:root{
  --bg:#14161a; --panel:#1b1e23; --panel2:#20242a; --line:#2a2e33;
  --text:#eef0f2; --muted:#a9b0b8; --amber:#ffb000; --amber-d:#e69d00; --ink:#14161a;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
h1,h2,h3,.brand,.btn,.badge,.tag{font-family:"Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  font-stretch:condensed;letter-spacing:.01em}
a{color:var(--amber)}
.amber{color:var(--amber)}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 14px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(20,22,26,.94);
  backdrop-filter:blur(6px);z-index:5}
.brand{color:var(--text);text-decoration:none;font-size:22px;font-weight:700;display:inline-flex;align-items:center;gap:10px;text-transform:uppercase}
.brand b{color:var(--amber)}
.brand .logo-mark{width:36px;height:36px;display:block}
nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:15px}
nav a:hover{color:var(--text)}
nav a.lang{border:1px solid var(--line);padding:6px 12px;border-radius:999px;color:var(--text)}
nav a.lang:hover{border-color:var(--amber);color:var(--amber)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:72px 24px 56px}
.badge{display:inline-block;border:1px solid var(--amber);color:var(--amber);padding:3px 12px;border-radius:999px;
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
h1{font-size:clamp(44px,8vw,84px);line-height:.98;margin:0 0 18px;text-transform:uppercase}
.sub{font-size:20px;color:var(--muted);max-width:34em;margin:0 0 26px}
.btn{display:inline-block;background:var(--amber);color:var(--ink);font-weight:700;text-decoration:none;
  padding:14px 26px;border-radius:10px;font-size:19px;text-transform:uppercase;border:2px solid var(--amber)}
.btn:hover{background:var(--amber-d);border-color:var(--amber-d)}
.btn.ghost{background:transparent;color:var(--amber)}
.btn.ghost:hover{background:var(--amber);color:var(--ink)}
.note{color:var(--muted);font-size:14px;margin-top:8px}
.coming{margin:26px 0 8px;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.platforms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.platforms li{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:6px 14px;border-radius:999px;font-weight:600;font-size:15px}
.hero-gauge{background:radial-gradient(circle at 50% 100%,#2b2417,var(--panel) 70%);border:1px solid var(--line);
  border-radius:20px;padding:24px 20px 16px;text-align:center}
.gauge{width:100%;max-width:300px;height:auto}
.g-state{fill:var(--amber);font:700 22px "Arial Narrow",Arial,sans-serif;text-transform:uppercase}
.needle{transform-box:view-box;transform-origin:120px 130px;transform:rotate(54deg);animation:sweep 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes sweep{from{transform:rotate(-88deg)}to{transform:rotate(54deg)}}
.gauge-cap{margin:6px 0 0;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.section{padding:64px 24px}
.section>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.section.alt{background:var(--panel)}
h2{font-size:clamp(30px,5vw,46px);margin:0 0 12px;text-transform:uppercase;line-height:1.05}
.lead{color:var(--muted);font-size:19px;max-width:42em;margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:22px}
.card h3{margin:10px 0 8px;font-size:22px;text-transform:uppercase}
.card p{margin:0;color:var(--muted);font-size:16px}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--amber);border:1px solid var(--line);
  padding:2px 10px;border-radius:999px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.small-h{margin:0 0 10px;font-size:18px;text-transform:uppercase;color:var(--muted)}
.terms{width:100%;border-collapse:collapse;background:var(--panel2);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.terms th,.terms td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.terms th{color:var(--amber);font-size:13px;text-transform:uppercase;letter-spacing:.08em;background:#181b1f}
.terms tr:last-child td{border-bottom:0}
.faq details{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:0 18px;margin-bottom:12px}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--amber);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);margin:0 0 16px}
.banner{margin:0 auto;max-width:var(--wrap);padding:0 24px}
.banner img,.feature img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--line)}
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;max-width:var(--wrap);margin:0 auto;padding:56px 24px}
.feature.flip img{order:2}
.roger{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center}
.roger img{width:100%;height:auto;border-radius:18px;border:1px solid var(--line);display:block}
.legal{max-width:760px;margin:0 auto;padding:56px 24px 72px}
.legal h1{font-size:clamp(34px,6vw,54px);margin-bottom:6px}
.legal h2{font-size:24px;margin:30px 0 8px}
.legal p,.legal li{color:var(--muted)}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:24px}
.foot{padding:36px 24px 48px;border-top:1px solid var(--line);text-align:center}
.foot-brand{margin-bottom:14px}
.foot .disc{color:var(--muted);font-size:14px;max-width:46em;margin:0 auto 14px}
.foot .links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;font-size:15px}
.foot .copy{color:var(--muted);font-size:13px;margin-top:14px}
.pick{min-height:100vh;display:grid;place-content:center;text-align:center;gap:10px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media (min-width:1500px){
  :root{--wrap:1440px}
  body{font-size:19px}
  .lead{font-size:21px}
  .sub{font-size:23px}
}
@media (min-width:1900px){
  :root{--wrap:1700px}
  body{font-size:21px}
  .lead{font-size:24px}
  .sub{font-size:26px}
  h1{font-size:112px}
  .btn{font-size:22px;padding:16px 32px}
}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .two,.roger,.feature{grid-template-columns:1fr}
  .feature.flip img{order:0}
  nav a:not(.lang){display:none}
}
@media (prefers-reduced-motion:reduce){.needle{animation:none;transform:rotate(54deg)}html{scroll-behavior:auto}}