:root{
  --bg:#ffffff; --fg:#0e1116; --muted:#5b6472; --line:#e9ecf1;
  --accent:#0a84ff; --accent2:#6b5cff; --mint:#34d39a;
  --card:#ffffff; --soft:#f5f7fb; --radius:18px; --max:1080px;
  --shadow:0 20px 50px -24px rgba(16,24,40,.28);
  --shadow-sm:0 8px 24px -14px rgba(16,24,40,.22);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0d10; --fg:#eef0f3; --muted:#9aa3b0; --line:#1b1f26;
    --card:#131720; --soft:#11141b;
    --shadow:0 24px 60px -24px rgba(0,0,0,.6); --shadow-sm:0 10px 28px -16px rgba(0,0,0,.6); }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); overflow-x:hidden;
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ---------- Header ---------- */
header{position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.6) blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{display:flex; align-items:center; gap:10px; font-weight:750; color:var(--fg); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.logo{width:30px; height:30px; border-radius:9px; box-shadow:var(--shadow-sm)}
.nav-links{display:flex; align-items:center; gap:10px; font-size:15px}
.nav-links a{color:var(--muted); padding:8px 12px; border-radius:10px}
.nav-links a:hover{color:var(--fg); background:var(--soft); text-decoration:none}
.nav-cta{background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff!important; font-weight:600;
  box-shadow:0 10px 22px -12px rgba(10,132,255,.6)}
.nav-cta:hover{opacity:.95}
@media(max-width:600px){ .nav-links a:not(.nav-cta){display:none} }

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:16px;
  padding:14px 26px; border-radius:999px; transition:transform .15s ease, box-shadow .2s ease; white-space:nowrap}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-primary{color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 14px 30px -12px rgba(10,132,255,.6)}
.btn-ghost{color:var(--fg); background:var(--soft); border:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{position:relative; text-align:center; padding:72px 0 40px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-30% -20% auto -20%; height:620px; z-index:-1;
  background:
    radial-gradient(42% 55% at 22% 20%, rgba(10,132,255,.28), transparent 70%),
    radial-gradient(40% 55% at 82% 10%, rgba(107,92,255,.26), transparent 70%),
    radial-gradient(36% 50% at 60% 60%, rgba(52,211,154,.18), transparent 70%);
  filter:blur(8px)}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent);
  padding:6px 14px; border-radius:999px; margin-bottom:22px}
.hero h1{font-size:clamp(38px,8vw,68px); line-height:1.02; letter-spacing:-.03em; margin:.1em auto .28em; max-width:14ch}
.hero h1 .grad{background:linear-gradient(120deg,var(--accent),var(--accent2) 60%,var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{font-size:clamp(17px,2.6vw,21px); color:var(--muted); max-width:620px; margin:0 auto 30px}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.badge-note{display:block; margin-top:14px; color:var(--muted); font-size:13px}

/* Hero phone */
.hero-stage{margin:64px auto 0; position:relative; width:min(300px,76vw)}
.hero-stage .glow{position:absolute; inset:-14% -24%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,132,255,.35), transparent 72%); filter:blur(20px)}

/* Decorative blue boxes (depth) */
.deco{position:absolute; z-index:-1; border-radius:22px}
.deco.b1{width:118px; height:118px; top:-34px; left:-64px; transform:rotate(-14deg);
  background:linear-gradient(135deg,#0a84ff,#4aa8ff); box-shadow:0 26px 50px -18px rgba(10,132,255,.55)}
.deco.b2{width:92px; height:92px; bottom:34px; right:-56px; transform:rotate(12deg);
  background:linear-gradient(135deg,#6b5cff,#9d7bff); box-shadow:0 26px 50px -18px rgba(107,92,255,.5)}
.deco.b3{width:60px; height:60px; top:44%; left:-42px; transform:rotate(8deg);
  background:linear-gradient(135deg,#34d39a,#5ee7b6); box-shadow:0 20px 40px -16px rgba(52,211,154,.5)}

/* Floating glass chips */
.float{position:absolute; z-index:2; display:flex; align-items:center; gap:9px;
  background:color-mix(in srgb,var(--card) 86%, transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:14px; padding:9px 13px;
  font-size:13px; font-weight:650; box-shadow:var(--shadow)}
.float .dot{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; color:#fff; font-size:13px}
.float.f1{top:14%; left:-40px}
.float.f2{bottom:16%; right:-34px}
@media(max-width:420px){ .float.f1{left:-14px} .float.f2{right:-10px} .deco.b1{left:-34px} .deco.b2{right:-28px} }

/* ---------- Phone frame ---------- */
.phone{border-radius:40px; padding:8px; background:linear-gradient(160deg,#2b2f38,#0d0f13);
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.08)}
.phone img{border-radius:32px; display:block}
.phone.tilt{transform:rotate(-3deg)}

/* ---------- Sections ---------- */
section{padding:70px 0}
.section-head{text-align:center; max-width:620px; margin:0 auto 46px}
h2{font-size:clamp(26px,4.4vw,38px); letter-spacing:-.02em; margin:0 0 10px}
.section-head p{color:var(--muted); margin:0}

/* Features grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.card .ic{width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  font-size:24px; margin-bottom:16px; color:#fff}
.g-blue{background:linear-gradient(135deg,#0a84ff,#4aa8ff)}
.g-violet{background:linear-gradient(135deg,#6b5cff,#9d7bff)}
.g-mint{background:linear-gradient(135deg,#17b486,#49e0ad)}
.g-amber{background:linear-gradient(135deg,#ff9f0a,#ffc24a)}
.g-pink{background:linear-gradient(135deg,#ff5d8f,#ff8bb0)}
.g-slate{background:linear-gradient(135deg,#475569,#7688a1)}
.card h3{margin:0 0 6px; font-size:18px; letter-spacing:-.01em}
.card p{margin:0; color:var(--muted); font-size:15px}

/* Showcase alternating rows */
.showcase{background:
  linear-gradient(180deg, color-mix(in srgb,var(--accent) 7%, var(--bg)), color-mix(in srgb,var(--accent2) 5%, var(--bg)));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; max-width:920px; margin:0 auto}
.row + .row{margin-top:84px}
.row .txt h3{font-size:clamp(22px,3.4vw,28px); letter-spacing:-.02em; margin:0 0 10px}
.row .txt p{color:var(--muted); margin:0 0 16px}
.row .pill{display:inline-flex; gap:7px; font-size:13px; font-weight:600; color:var(--accent2);
  background:color-mix(in srgb,var(--accent2) 12%, transparent); padding:5px 12px; border-radius:999px; margin-bottom:14px}
.row .shot{display:flex; justify-content:center}
.row .phone{width:min(260px,70vw)}
.row.reverse .media{order:-1}
@media(max-width:760px){
  .row{grid-template-columns:1fr; gap:26px; text-align:center}
  .row.reverse .media{order:0}
  .row .pill{margin-inline:auto}
  .row + .row{margin-top:60px}
}

/* Languages */
.langs{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:720px; margin:0 auto}
.chip{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:9px 16px;
  font-size:14px; color:var(--fg); box-shadow:var(--shadow-sm)}
.chip .beta{color:var(--muted); font-size:12px; margin-left:4px}

/* CTA band */
.cta-band{margin:12px auto 0; max-width:var(--max)}
.cta-inner{position:relative; overflow:hidden; border-radius:28px; text-align:center; color:#fff;
  padding:64px 24px; background:linear-gradient(135deg,#0a84ff,#6b5cff)}
.cta-inner::after{content:""; position:absolute; inset:auto -10% -60% -10%; height:300px;
  background:radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%)}
.cta-inner h2{color:#fff; margin:0 0 10px}
.cta-inner p{color:rgba(255,255,255,.85); margin:0 0 26px}
.cta-inner .btn-primary{background:#fff; color:#0a2a5e; box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}

/* Content pages (privacy/terms) */
.content{max-width:760px; padding:52px 20px 96px}
.content h1{font-size:34px; letter-spacing:-.02em; margin:0 0 4px}
.content h2{text-align:left; font-size:20px; margin:30px 0 6px}
.content p,.content li{color:var(--fg)}
.content .muted{color:var(--muted)}

/* Footer */
footer{border-top:1px solid var(--line); padding:40px 0; color:var(--muted); font-size:14px}
.foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px}
.foot .brand{font-size:15px}
.foot-links{display:flex; gap:18px}
.foot-links a{color:var(--muted)}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .btn:hover{transform:none} }