:root {
  --bg:#0E0E24; --bg2:#141433; --surface:#1B1B3D; --card:#22224A;
  --line:rgba(255,255,255,.09); --hi:#F5F3FF; --lo:#B9B7D9;
  --cyan:#22D3EE; --teal:#2DD4BF; --gold:#FFB830; --violet:#7C5CFF;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--hi); line-height:1.6; }
a { color:var(--cyan); }
img { max-width:100%; }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(14,14,36,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-in { max-width:1080px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--hi); font-weight:900; letter-spacing:.4px; }
.brand img { width:38px; height:38px; border-radius:10px; object-fit:cover; }
.brand small { display:block; font-size:11px; font-weight:700; letter-spacing:1.6px; color:var(--lo); }
.nav-links { display:flex; gap:18px; margin-left:auto; flex-wrap:wrap; }
.nav-links a { color:var(--lo); text-decoration:none; font-weight:600; font-size:15px; }
.nav-links a:hover, .nav-links a.active { color:var(--hi); }
.btn { display:inline-block; background:var(--gold); color:#1A1A1A; font-weight:800; text-decoration:none; padding:12px 22px; border-radius:12px; }
.btn:hover { filter:brightness(1.08); }
.btn.ghost { background:transparent; color:var(--hi); border:1px solid var(--line); }
.btn.small { padding:8px 14px; font-size:14px; }

/* layout */
.wrap { max-width:1080px; margin:0 auto; padding:0 20px 64px; }
section { padding:56px 0 8px; }
h1 { font-size:clamp(34px,6vw,58px); line-height:1.08; margin:0 0 14px; font-weight:900; }
h2 { font-size:clamp(26px,4vw,34px); margin:0 0 10px; font-weight:900; }
h3 { font-size:20px; margin:0 0 6px; }
.lead { color:var(--lo); font-size:18px; max-width:640px; }
.kicker { color:var(--cyan); font-weight:800; letter-spacing:1.8px; font-size:12px; text-transform:uppercase; margin:0 0 10px; }

/* hero */
.hero { position:relative; border-radius:24px; overflow:hidden; margin-top:24px; box-shadow:0 16px 48px rgba(0,0,0,.45); }
.hero img.bg { width:100%; height:440px; object-fit:cover; display:block; }
.hero .shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,10,28,.92) 0%,rgba(10,10,28,.55) 55%,rgba(10,10,28,.15) 100%); }
.hero .copy { position:absolute; left:0; right:0; bottom:0; padding:36px; max-width:620px; }
.hero .copy p { color:#E7E5F5; font-size:18px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }

/* cards + grids */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:24px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.card .body { padding:22px; }
.card p { color:var(--lo); margin:0 0 14px; }
.card img.cover { width:100%; height:210px; object-fit:cover; display:block; }
.pill { display:inline-block; font-size:12px; font-weight:800; letter-spacing:.8px; padding:5px 11px; border-radius:999px; text-transform:uppercase; }
.pill.live { background:rgba(61,220,132,.15); color:#3DDC84; }
.pill.soon { background:rgba(255,184,48,.15); color:var(--gold); }
.pill.dev { background:rgba(34,211,238,.15); color:var(--cyan); }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; }
.tile .ico { font-size:28px; }
.tile p { color:var(--lo); margin:6px 0 0; }
.note { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:18px 22px; color:var(--lo); }
.note strong { color:var(--hi); }

/* contact + faq */
.mailbox { background:linear-gradient(135deg,#1B1B3D,#241a4d); border:1px solid var(--line); border-radius:20px; padding:30px; text-align:center; }
.mailbox a.mail { font-size:clamp(20px,3.5vw,28px); font-weight:800; color:var(--gold); text-decoration:none; word-break:break-all; }
.faq { border-top:1px solid var(--line); padding:18px 0; }
.faq h3 { margin-bottom:4px; }
.faq p { color:var(--lo); margin:0; }

/* footer */
footer { border-top:1px solid var(--line); margin-top:64px; padding:28px 0 8px; color:var(--lo); font-size:14px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }
footer a { color:var(--lo); text-decoration:none; }
footer a:hover { color:var(--hi); }

@media (max-width:720px) {
  .hero img.bg { height:340px; }
  .hero .copy { padding:22px; }
  .nav-links { margin-left:0; }
}