/* ===== Online Concierge — Premium UI ===== */
*{box-sizing:border-box}
:root{
  --bg: #070b17;
  --bg2: #0c1229;
  --surface: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.08);
  --line: rgba(255,255,255,0.12);
  --text: #f1f5ff;
  --muted:#a9b7e6;
  --accent:#3b82ff;
  --accent-2:#7c5cff;
  --ok:#27c27c;
  --warn:#ffbf47;
  --danger:#ff5a6b;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text);font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
a{color:#b7ccff;text-decoration:none}
a:hover{opacity:.9}
img{max-width:100%;display:block}

.header-blur{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(90deg, rgba(10,14,40,.8), rgba(10,14,40,.4));
  border-bottom:1px solid var(--line);
}
.nav{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{font-weight:800;letter-spacing:.2px}
.nav a{color:#dce6ff}

.hero{
  max-width:1100px;margin:0 auto;padding:56px 18px 26px;
  text-align:center;
}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--glass);color:#cfe0ff;font-size:12px}
.hero h1{margin:12px auto 6px;font-size:46px;line-height:1.05;max-width:900px}
.hero p.lead{margin:8px auto 0;color:#c7cff6;max-width:820px;font-size:18px}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:0;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer;
  box-shadow: var(--shadow);
}
.btn.secondary{background:transparent;border:1px solid var(--line)}
.btn.ghost{background:transparent;border:1px dashed var(--line)}
.btn.danger{background:linear-gradient(135deg,#ff6b7d,#f9415c)}
.btn:hover{transform:translateY(-1px)}
.small{font-size:12px;color:var(--muted)}
.hero-price{font-size:30px;font-weight:900;margin:10px 0}

.container{max-width:1100px;margin:0 auto;padding:0 18px}
.section{padding:24px 0}

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
@media(min-width:860px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:1.2fr .8fr}
}

.card{
  background:linear-gradient(180deg,var(--surface), rgba(255,255,255,0.03));
  border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow: var(--shadow)
}
.card h2,.card h3{margin-top:0}

.icon{font-size:22px}

.list{margin:0;padding-left:18px}
.kicker{color:#a5b3ea;text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700}

.feature{padding:16px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid var(--line)}
.feature h3{margin:6px 0 4px}

.pricing{display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:720px){.pricing{grid-template-columns:repeat(2,1fr)}}
.price-card{padding:20px;border-radius:16px;background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));border:1px solid var(--line)}
.price{font-size:38px;font-weight:900;margin:4px 0}
.muted{color:#c1c9ef}

.faq-item{border:1px solid var(--line);border-radius:12px;padding:14px;background:rgba(255,255,255,0.03)}

.footer{padding:26px;text-align:center;color:#aab6e9;border-top:1px solid var(--line);margin-top:36px}

/* subtle entrance animation */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}