:root {
  --bg:#0b0f17;
  --bg2:#0a0d14;
  --surface:rgba(255,255,255,0.06);
  --surface2:rgba(255,255,255,0.08);
  --card:rgba(255,255,255,0.07);
  --cardBorder:rgba(255,255,255,0.10);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.68);
  --faint:rgba(255,255,255,0.48);
  --brand:#6ee7ff;
  --brand2:#a78bfa;
  --ok:#7CFFB2;
  --shadow:0 18px 50px rgba(0,0,0,0.45);
  --shadow2:0 10px 30px rgba(0,0,0,0.35);
  --radius:18px;
  --radius2:26px;
  --max:1180px;
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(110,231,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(167,139,250,0.16), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font:15px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  letter-spacing:0.1px;
  background-attachment: fixed;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
.container { max-width:var(--max); margin:0 auto; padding:0 20px; }
.header { position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:rgba(11,15,23,0.70); border-bottom:1px solid rgba(255,255,255,0.06); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:720; letter-spacing:0.2px; }
.logo-mark { width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg, rgba(110,231,255,0.95), rgba(167,139,250,0.95)); box-shadow:0 10px 30px rgba(110,231,255,0.18); }
.top-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:var(--text); cursor:pointer; transition:transform 0.10s ease, border-color 0.15s ease, background 0.15s ease; text-decoration:none; white-space:nowrap; font:inherit; }
.btn:hover { transform:translateY(-1px); border-color:rgba(110,231,255,0.35); text-decoration:none; }
.btn.primary { border-color:rgba(110,231,255,0.35); background:linear-gradient(135deg, rgba(110,231,255,0.18), rgba(167,139,250,0.18)); }
.btn.ghost { background:transparent; }
.hero { padding:46px 0 18px; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:26px; align-items:start; }
.eyebrow { font-size:12px; color:var(--muted); letter-spacing:0.14em; text-transform:uppercase; margin:0 0 10px; }
h1 { font-size:44px; line-height:1.05; margin:0 0 12px; letter-spacing:-0.02em; }
.lead { font-size:16px; color:var(--muted); margin:0 0 18px; max-width:58ch; }
.cta-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.proof { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.pill { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); font-size:12px; color:var(--muted); }
.pill .dot { width:8px; height:8px; border-radius:3px; background:rgba(124,255,178,0.9); box-shadow:0 0 0 3px rgba(124,255,178,0.12); }
.trust-strip { font-size:12px; color:var(--faint); border-left:2px solid rgba(110,231,255,0.35); padding:8px 10px; margin-top:10px; }
.card { border-radius:var(--radius2); border:1px solid rgba(255,255,255,0.12); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); box-shadow:var(--shadow2); overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 10px; }
.card-head strong { font-size:13px; opacity:0.95; }
.chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.chip { font-size:11px; color:var(--muted); border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); padding:5px 8px; border-radius:999px; }
.video-wrap { padding:0 14px 12px; }
.video-stage { width:100%; aspect-ratio:16/9; border-radius:18px; border:1px solid rgba(255,255,255,0.08); overflow:hidden; background:#000; }
video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }
.controls { padding:0 14px 14px; display:flex; flex-direction:column; gap:10px; }
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mini-card { border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); border-radius:16px; padding:14px; }
.mini-card strong { display:block; font-size:14px; margin-bottom:6px; }
.mini-card p { color:var(--muted); margin:0; font-size:13px; }
.section { padding:26px 0; }
.section h2 { font-size:22px; letter-spacing:-0.01em; margin:0 0 8px; }
.section p { color:var(--muted); margin:0 0 14px; }
.two-col { display:grid; grid-template-columns:1.08fr 0.92fr; gap:14px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:14px; }
.panel { border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); border-radius:var(--radius); padding:16px; }
.panel h3 { font-size:18px; letter-spacing:-0.01em; margin:0 0 8px; }
.sub { font-size:12px; color:var(--muted); margin:0 0 10px; }
.price { font-size:26px; letter-spacing:-0.02em; margin:10px 0 8px; }
.field-group { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field-group label { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.12em; }
input[type="email"], input[type="text"], input[type="search"] { width:100%; padding:11px 12px; border-radius:14px; border:1px solid rgba(255,255,255,0.12); background:rgba(8,11,18,0.70); color:var(--text); outline:none; font:inherit; }
.check-row { display:flex; gap:10px; align-items:flex-start; margin:10px 0 14px; color:var(--muted); font-size:14px; }
.check-row input { margin-top:3px; }
.list { padding-left:18px; color:var(--muted); margin:0 0 12px; }
.list li { margin:6px 0; }
.steps { margin:0; padding-left:18px; color:var(--muted); }
.steps li { margin:10px 0; }
.browser-controls { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-bottom:12px; }
.result-note { color:var(--faint); font-size:12px; }
.city-grid-browser { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; max-height:520px; overflow:auto; padding-right:4px; }
.city-button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; padding:10px 11px; text-align:left; border-radius:14px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); color:var(--text); cursor:pointer; font:inherit; }
.city-button:hover { border-color:rgba(110,231,255,0.35); transform:translateY(-1px); }
.city-button.active { border-color:rgba(110,231,255,0.55); background:rgba(110,231,255,0.10); }
.city-name { font-size:13px; line-height:1.2; }
.city-rank { font-size:11px; color:var(--faint); border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); padding:4px 6px; border-radius:999px; flex-shrink:0; }
.how-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.callout { border-left:2px solid rgba(167,139,250,0.40); padding:10px 12px; background:rgba(167,139,250,0.06); border-radius:14px; color:var(--muted); }
.tutorial-box { width:100%; aspect-ratio:16/9; border-radius:18px; border:1px solid rgba(255,255,255,0.08); background:radial-gradient(900px 500px at 30% 10%, rgba(110,231,255,0.12), transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted); padding:24px; }
details.qa { border-radius:var(--radius); border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); padding:12px 14px; margin-bottom:10px; }
details.qa summary { cursor:pointer; font-weight:650; }
details.qa p { margin:10px 0 0; color:var(--muted); }
.footer { padding:38px 0 50px; color:var(--faint); font-size:12px; border-top:1px solid rgba(255,255,255,0.06); margin-top:22px; }
@media (max-width: 1020px) { .hero-grid, .two-col, .how-grid { grid-template-columns:1fr; } .city-grid-browser { grid-template-columns:repeat(3, minmax(0, 1fr)); } h1 { font-size:38px; } }
@media (max-width: 680px) { .browser-controls { grid-template-columns:1fr; } .city-grid-browser { grid-template-columns:repeat(2, minmax(0, 1fr)); } .meta-grid { grid-template-columns:1fr; } h1 { font-size:34px; } }