:root{
  --bg:#080e1f; --ink:#eef3ff; --muted:#a6b3d9;
  --accent1:#7C3AED; --accent2:#22D3EE; --brand: linear-gradient(135deg, var(--accent1), var(--accent2));
  --panel:#0f1731; --radius:24px; --shadow: 0 24px 64px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(1200px 700px at 110% 0%, rgba(34,211,238,.28), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}
.screen{position:relative; min-height:100dvh; display:flex; flex-direction:column}

.brand-mark{
  position:fixed; inset:auto -12vw -10vh -12vw; z-index:0;
  font-weight:800; font-size:min(42vw, 46rem); line-height:0.8; letter-spacing:-.02em;
  opacity:.07; color:transparent; -webkit-text-stroke: 2px rgba(255,255,255,.18); text-stroke: 2px rgba(255,255,255,.18);
  transform: rotate(-6deg);
  filter: drop-shadow(0 6px 30px rgba(0,0,0,.35));
  pointer-events:none;
}
.brand-mark .sup{font-size:.45em; vertical-align:super}

.topbar{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:18px 22px}
.logo{font-weight:800; font-size:22px; letter-spacing:.5px}
.logo .z{background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.logo .dot{opacity:.4; margin:0 .2rem}.logo .tag{opacity:.7}
.lang{display:flex; align-items:center; gap:10px; opacity:.95}
.globe{width:18px; height:18px; opacity:.8}
.chip{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--ink);
  border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:700}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.12)}

.hero{position:relative; z-index:2; display:grid; place-items:center; min-height:60vh; padding:22px}
.copy{max-width:720px; text-align:center; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10); border-radius: var(--radius); padding: clamp(18px, 4vw, 28px); box-shadow: var(--shadow)}
.copy h1{font-size: clamp(28px, 6.6vw, 56px); margin:0 0 8px}
.sub{color:var(--muted); margin:6px 0 18px}
.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{display:inline-block; padding:14px 20px; border-radius:999px; font-weight:800; letter-spacing:.2px; border:1px solid rgba(255,255,255,.18); color:var(--ink); text-decoration:none}
.btn.primary{background:var(--brand); color:#05111b; box-shadow: var(--shadow)}
.tiny{color:#99a7cc; font-size:14px; margin-top:14px}