:root{
  --bg:#0a0e16; --panel:#111827; --panel2:#172234; --line:#263653;
  --ink:#eef5ff; --muted:#9aa8bd; --faint:#6f7d92;
  --teal:#4fd0a0; --blue:#4f8fd0; --gold:#e0b64a; --coral:#c98c7a;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.nav{
  position:fixed; z-index:20; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px clamp(18px,4vw,56px);
  background:rgba(10,14,22,.74); border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:850; letter-spacing:.01em; }
.brand img{ width:42px; height:42px; border-radius:50%; box-shadow:0 0 22px rgba(79,208,160,.22); }
.nav nav{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; font-weight:750; }
.nav nav a{ padding:10px 12px; border-radius:999px; }
.nav nav a:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.hero{
  position:relative; min-height:92svh; display:grid; align-items:end; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(10,14,22,.94) 0%,rgba(10,14,22,.64) 43%,rgba(10,14,22,.08) 100%),
    linear-gradient(0deg,rgba(10,14,22,.95) 0%,rgba(10,14,22,.18) 46%,rgba(10,14,22,.36) 100%);
}
.hero__content{
  position:relative; z-index:2; width:min(760px,100%); padding:150px clamp(20px,5vw,72px) 92px;
}
.eyebrow{
  margin:0 0 12px; color:var(--teal); font-size:12px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase;
}
h1,h2,h3,p{ margin-top:0; }
h1{ margin-bottom:18px; font-size:clamp(56px,10vw,126px); line-height:.88; letter-spacing:0; }
h2{ margin-bottom:14px; font-size:clamp(34px,5vw,64px); line-height:1; letter-spacing:0; }
h3{ margin-bottom:9px; font-size:26px; line-height:1.05; letter-spacing:0; }
.lead{ max-width:660px; margin-bottom:28px; color:#cfdaeb; font-size:clamp(18px,2vw,23px); line-height:1.5; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; }
.actions--inline{ margin-top:26px; }
.actions--center{ justify-content:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px;
  border-radius:999px; font-weight:850; font-size:16px; border:1px solid transparent;
}
.btn--primary{ color:#04121f; background:linear-gradient(135deg,var(--teal),var(--blue)); box-shadow:0 16px 38px rgba(79,208,160,.22); }
.btn--ghost{ color:var(--ink); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.07); }
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.strip div{ padding:28px clamp(20px,4vw,56px); background:#0d1421; }
.strip b{ display:block; margin-bottom:5px; font-size:30px; color:var(--gold); }
.strip span{ color:var(--muted); font-weight:700; }
.section{ padding:88px clamp(20px,5vw,72px); }
.section--compact{ padding-top:70px; }
.section__head{ max-width:780px; margin-bottom:34px; }
.section__head p:not(.eyebrow){ color:var(--muted); font-size:18px; line-height:1.65; }
.game-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.game{
  min-height:320px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:0; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,rgba(79,208,160,.12),rgba(79,143,208,.07) 42%,rgba(255,255,255,.03));
}
.game--wide{ grid-column:span 2; background:linear-gradient(135deg,rgba(79,208,160,.2),rgba(79,143,208,.13),rgba(224,182,74,.08)); }
.game__art{ display:block; width:100%; aspect-ratio:16/10; overflow:hidden; background:#070b12; border-bottom:1px solid rgba(255,255,255,.08); }
.game__art img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.game:hover .game__art img{ transform:scale(1.04); }
.game h3{ margin:20px 22px 10px; }
.game p{ margin:0 22px 22px; color:var(--muted); line-height:1.55; }
.band{
  display:grid; grid-template-columns:minmax(320px,.9fr) minmax(320px,1fr); gap:48px; align-items:center;
  padding:86px clamp(20px,5vw,72px); background:linear-gradient(180deg,#0d1421,#0a0e16);
  border-block:1px solid rgba(255,255,255,.08);
}
.phone{
  position:relative; width:min(600px,100%); margin:auto; padding:14px; border-radius:42px;
  background:#070b12; border:1px solid rgba(255,255,255,.14); box-shadow:0 28px 72px rgba(0,0,0,.45);
}
.phone__top{ width:88px; height:9px; margin:0 auto 12px; border-radius:999px; background:#1f2b3c; }
.phone img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:contain;
  border-radius:28px; border:1px solid rgba(79,208,160,.22); background:#070b12;
}
.band__copy p:not(.eyebrow){ color:var(--muted); font-size:18px; line-height:1.65; }
.checks{ list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:12px; }
.checks li{ position:relative; padding-left:24px; color:#d6dfed; font-weight:700; }
.checks li::before{ content:""; position:absolute; left:0; top:.56em; width:9px; height:9px; border-radius:50%; background:var(--teal); box-shadow:0 0 16px rgba(79,208,160,.6); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.steps div{
  padding:24px; min-height:190px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.steps span{ display:block; margin-bottom:34px; color:var(--gold); font-size:13px; font-weight:900; letter-spacing:.12em; }
.steps b{ display:block; margin-bottom:9px; font-size:24px; }
.steps p{ margin:0; color:var(--muted); line-height:1.55; }
.cta{
  margin:0 clamp(20px,5vw,72px) 72px; padding:54px 24px; text-align:center; border:1px solid rgba(79,208,160,.24);
  border-radius:28px; background:linear-gradient(135deg,rgba(79,208,160,.14),rgba(79,143,208,.1),rgba(224,182,74,.07));
}
.cta img{ width:96px; height:96px; margin:0 auto 18px; border-radius:50%; }
.cta p{ max-width:560px; margin:0 auto 24px; color:var(--muted); font-size:18px; line-height:1.6; }
.footer{
  display:flex; justify-content:space-between; gap:18px; padding:26px clamp(20px,5vw,72px);
  border-top:1px solid rgba(255,255,255,.08); color:var(--faint); font-weight:750;
}
.footer a{ color:var(--teal); }
@media (max-width: 900px){
  .nav{ position:absolute; }
  .nav nav a:not(:last-child){ display:none; }
  .hero{ min-height:88svh; }
  .hero__media img{ object-position:61% center; }
  .hero__shade{ background:linear-gradient(0deg,rgba(10,14,22,.96) 0%,rgba(10,14,22,.62) 54%,rgba(10,14,22,.18) 100%); }
  .hero__content{ padding-top:340px; padding-bottom:44px; }
  .strip{ grid-template-columns:1fr; }
  .game-grid,.steps,.band{ grid-template-columns:1fr; }
  .game--wide{ grid-column:auto; }
  .section,.band{ padding-block:62px; }
  .footer{ flex-direction:column; }
}
@media (max-width: 520px){
  .brand span{ font-size:15px; }
  .hero__content{ padding-left:18px; padding-right:18px; }
  h1{ font-size:58px; }
  .btn{ width:100%; }
  .game{ min-height:300px; }
}