/* TILTBROS - near-black, white, Duelbits green, red accents. Rounded, bold, stream-hub energy.
   Background topography pattern: Hero Patterns (heropatterns.com), CC BY 4.0. */
:root{
  --bg:#0c0e0c;
  --case:#12150f;
  --case2:#0f120d;
  --silver:#dfe6df;
  --silver-dim:rgba(255,255,255,.6);
  --white:#f7faf7;
  --green:#2ec463;
  --green-hi:#58e58d;
  --green-deep:#1e9a4a;
  --red:#ff2038;
  /* compat aliases: any legacy var(--blue*) resolves to green */
  --blue:var(--green);
  --blue-hi:var(--green-hi);
  --line:rgba(247,250,247,.13);
  --line-hi:rgba(247,250,247,.24);
  --r:12px;
  --disp:'Montserrat',sans-serif;
  --body:'Montserrat',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--silver);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--green);color:#fff}

/* atmosphere: topo texture + green (Duelbits) & red (NoFace) washes */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% -180px,rgba(46,196,99,.12),transparent 60%),
    radial-gradient(760px 520px at 93% 6%,rgba(255,32,56,.11),transparent 62%),
    radial-gradient(680px 480px at 4% 96%,rgba(255,32,56,.07),transparent 64%),
    url("assets/topo.svg")}
/* blurred glow orbs, floating in front of the texture */
.orb{position:fixed;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0}
.orb1{width:560px;height:560px;left:-160px;top:6%;
  background:radial-gradient(circle,rgba(46,196,99,.48),transparent 68%);
  animation:drift1 26s ease-in-out infinite alternate}
.orb2{width:460px;height:460px;right:-140px;top:34%;
  background:radial-gradient(circle,rgba(255,32,56,.32),transparent 68%);
  animation:drift2 32s ease-in-out infinite alternate}
.orb3{width:420px;height:420px;left:28%;bottom:-180px;
  background:radial-gradient(circle,rgba(46,196,99,.34),transparent 68%);
  animation:drift3 29s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(70px,50px) scale(1.12)}}
@keyframes drift2{to{transform:translate(-60px,-40px) scale(1.08)}}
@keyframes drift3{to{transform:translate(50px,-60px) scale(1.15)}}

main,header,footer{position:relative;z-index:1}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ── nav ── */
header{position:sticky;top:0;z-index:50;background:rgba(12,14,12,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;gap:34px;height:68px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none}
.ztile{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(180deg,#2ec463,#1e9a4a);
  box-shadow:0 6px 16px -6px rgba(46,196,99,.6),inset 0 1px 0 rgba(255,255,255,.3);
  font-family:var(--disp);font-weight:900;font-style:italic;font-size:20px;color:#fff;line-height:1}
.mark b{font-family:var(--disp);font-weight:800;font-style:italic;font-size:21px;letter-spacing:1px;color:var(--white)}
.navlinks{display:flex;gap:28px;margin-left:auto;margin-right:auto}
.navlinks a{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--silver-dim);
  text-decoration:none;text-transform:uppercase;transition:color .2s}
.navlinks a:hover,.navlinks a.on{color:var(--white)}
.nav-code{display:flex;align-items:center;gap:8px;padding:10px 18px;cursor:pointer;border-radius:10px;
  border:1px solid var(--line-hi);background:linear-gradient(180deg,#1a1f18,#10130e);
  font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--silver);white-space:nowrap}
.nav-code em{font-style:italic;font-family:var(--disp);font-weight:800;font-size:14px;color:var(--green-hi);letter-spacing:1px}
.nav-code:hover{border-color:var(--green)}

/* ── hero: asymmetric split, text left / code card right ── */
.hero2{position:relative;display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center;padding:92px 0 96px}
.hero2>*{position:relative;z-index:1}
.hero2::before{content:'TILT';position:absolute;right:-60px;top:-52px;z-index:0;
  font-family:var(--disp);font-style:italic;font-weight:900;font-size:320px;line-height:1;letter-spacing:8px;
  color:transparent;-webkit-text-stroke:1.5px rgba(247,250,247,.06);pointer-events:none;user-select:none}
.tilt{transform:rotate(-1.8deg);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tilt:hover{transform:rotate(-.4deg)}
h1{font-family:var(--disp);font-weight:900;font-style:italic;font-size:92px;line-height:1;
  letter-spacing:2px;color:var(--white);text-shadow:0 14px 40px rgba(0,0,0,.55)}
.hero2 .eyebrow{text-align:left;margin-bottom:14px}
.hero2 .tag{margin:20px 0 6px;font-size:17px;line-height:1.75;color:var(--silver-dim);max-width:480px}
.hero2 .tag em{font-style:normal;color:var(--white);font-weight:600}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* code card */
.codecard{padding:40px 38px 36px;display:flex;flex-direction:column;gap:20px;align-items:center;
  border-color:rgba(46,196,99,.35)}
.codecard .partner{display:flex;flex-direction:column;align-items:center;gap:12px}
.codecard .partner img{height:42px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.codecard .partner span{font-size:10.5px;font-weight:700;letter-spacing:3px;color:var(--silver-dim);text-transform:uppercase}
.codebox{width:100%;padding:22px;text-align:center;cursor:pointer;border-radius:14px;
  border:2px dashed rgba(88,229,141,.5);background:rgba(46,196,99,.07);transition:.22s}
.codebox:hover{border-color:var(--green-hi);background:rgba(46,196,99,.13)}
.codebox small{display:block;font-size:10.5px;font-weight:700;letter-spacing:3px;
  color:var(--silver-dim);text-transform:uppercase;margin-bottom:6px}
.codebox b{font-family:var(--disp);font-weight:900;font-style:italic;font-size:46px;
  color:var(--white);letter-spacing:4px;line-height:1}
.codebox u{display:block;text-decoration:none;font-size:10px;font-weight:700;letter-spacing:2.5px;
  color:var(--green-hi);text-transform:uppercase;margin-top:8px}
.codecard .btn{width:100%}

/* ── leaderboard preview band ── */
.lb-band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:44px;padding:36px 42px}
.lb-band .head h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:26px;color:var(--white);letter-spacing:1px}
.lb-band .head p{font-size:13.5px;color:var(--silver-dim);margin-top:4px;max-width:220px}
.mini{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mini-item{display:flex;align-items:center;gap:12px;padding:13px 20px;border-radius:12px;
  border:1px solid var(--line);background:rgba(12,14,12,.5)}
.mini-item .rk{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--disp);font-weight:900;font-style:italic;font-size:15px;color:#fff}
.mini-item.m1{padding:16px 24px;border-color:rgba(46,196,99,.45)}
.mini-item.m1 b{font-size:15.5px}
.mini-item.m1 span{font-size:14.5px}
.mini-item.m1 .rk{background:linear-gradient(180deg,#2ec463,#1e9a4a)}
.mini-item.m2 .rk{background:linear-gradient(180deg,#ff2038,#c1142a);color:#fff}
.mini-item.m3 .rk{background:linear-gradient(180deg,#3a453a,#252e25)}
.mini-item b{font-size:14px;color:var(--white);font-weight:600}
.mini-item span{font-size:13px;font-weight:700;color:var(--green-hi)}

/* ── raffle strip ── */
.strip{display:grid;grid-template-columns:104px 1fr auto;gap:32px;align-items:center;padding:30px 42px;margin-top:26px}
.strip .emblem2{width:104px;height:86px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.strip h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:24px;color:var(--white);letter-spacing:1px}
.strip p{font-size:14px;color:var(--silver-dim);margin-top:4px;max-width:520px;line-height:1.55}
.strip p b{color:var(--green-hi);font-weight:600}

/* ── horizontal bonus card ── */
.bonus-h{display:grid;grid-template-columns:1fr 1.15fr;overflow:hidden;max-width:880px;margin:0 auto;
  border-color:rgba(46,196,99,.35)}
.bonus-h .bh-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:48px 36px;border-right:1px solid var(--line);
  background:
    radial-gradient(300px 200px at 30% 110%,rgba(46,196,99,.24),transparent 70%),
    linear-gradient(160deg,rgba(23,29,22,.55),rgba(16,19,14,.6))}
.bonus-h .bh-brand img{height:52px;width:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.bonus-h .bh-brand span{font-size:10.5px;font-weight:700;letter-spacing:3px;color:var(--silver-dim);text-transform:uppercase}
.bonus-h .bh-body{padding:40px 42px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.bonus-h .bh-body h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:24px;color:var(--white);letter-spacing:1px}
.bonus-h .bh-body p{font-size:14.5px;color:var(--silver-dim);line-height:1.6}
.bonus-h .bh-body p em{font-style:normal;color:var(--white);font-weight:600}
.bonus-h .row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ── social pills ── */
.socbar{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto}
.socpill{display:flex;align-items:center;gap:13px;padding:16px 28px;border-radius:99px;text-decoration:none;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(23,29,22,.55),rgba(16,19,14,.62));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .22s,transform .22s}
.socpill svg{width:22px;height:22px;fill:var(--silver);transition:fill .22s}
.socpill b{font-size:14px;font-weight:700;color:var(--white);letter-spacing:.5px}
.socpill span{font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--silver-dim);text-transform:uppercase}
.socpill:hover{border-color:rgba(46,196,99,.65);transform:translateY(-3px)}
.socpill:hover svg{fill:var(--green-hi)}

/* left-aligned section heads (home) */
.sec-head.sec-left{max-width:none;margin:0 0 36px;text-align:left}
.sec-head.sec-left h2{font-size:38px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;
  text-decoration:none;cursor:pointer;border-radius:11px;border:0;
  font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;transition:.22s}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn-green,.btn-blue{background:linear-gradient(180deg,#2ec463,#1e9a4a);color:#fff;
  box-shadow:0 10px 30px -10px rgba(46,196,99,.6),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-green:hover,.btn-blue:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(46,196,99,.75),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--silver);background:rgba(18,22,17,.5);border-radius:99px}
.btn-ghost:hover{border-color:var(--silver-dim);color:var(--white)}

/* ── marquee strip ── */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;background:rgba(12,14,12,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mq-track{display:flex;white-space:nowrap;width:max-content;animation:mq 34s linear infinite}
.mq-track span{display:inline-flex;align-items:center;font-family:var(--disp);font-style:italic;font-weight:800;
  font-size:15px;letter-spacing:2px;color:var(--silver-dim);text-transform:uppercase}
.mq-track span b{color:var(--green-hi);margin:0 7px}
.mq-track span::after{content:'';width:7px;height:7px;background:var(--green);transform:rotate(45deg);
  margin:0 28px;flex:none;opacity:.8}
.mq-track span:nth-child(even)::after{background:var(--red)}
@keyframes mq{to{transform:translateX(-50%)}}

/* starting-soon countdown banner (homepage) */
.soon-bar{display:flex;align-items:center;justify-content:center;gap:14px;max-width:1180px;margin:22px auto 0;padding:14px 22px;
  border-radius:14px;text-decoration:none;position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(46,196,99,.14),rgba(255,255,255,.03));border:1px solid rgba(46,196,99,.4)}
.soon-bar[hidden]{display:none}  /* the display:flex above was overriding the hidden attribute */
.soon-bar:hover{border-color:var(--green-hi)}
.soon-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--red);box-shadow:0 0 10px rgba(255,32,56,.8);animation:livepulse 1.4s ease-in-out infinite}
.soon-label{font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:13px;color:var(--white)}
.soon-time{font-family:var(--disp);font-weight:900;font-style:italic;font-size:26px;color:var(--green-hi);font-variant-numeric:tabular-nums;letter-spacing:1px}
@media(max-width:560px){.soon-bar{margin:16px 16px 0;gap:10px}.soon-label{font-size:11px;letter-spacing:1px}.soon-time{font-size:22px}}

/* red utility accents (sparing) */
.red{color:var(--red)}
.hot{color:var(--red)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--red);box-shadow:0 0 8px rgba(255,32,56,.7);animation:livepulse 1.6s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ── sections ── */
section{padding:88px 0}
.sec-head{position:relative;max-width:620px;margin:0 auto 54px;text-align:center}
.sec-head .wm{position:absolute;left:50%;top:-38px;transform:translateX(-50%);
  width:150px;height:150px;fill:var(--silver);opacity:.05;pointer-events:none}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:4px;color:var(--green-hi);text-transform:uppercase}
h2{font-family:var(--disp);font-weight:800;font-style:italic;font-size:44px;letter-spacing:1px;
  margin:8px 0 10px;color:var(--white);text-transform:uppercase;position:relative}
.sec-head p{color:var(--silver-dim);font-size:15.5px;line-height:1.6;position:relative}

/* ── panels: glass over the locked background ── */
.panel{position:relative;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(23,29,22,.62),rgba(16,19,14,.72));
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(247,250,247,.26);border-top-color:rgba(247,250,247,.36);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05)}

/* feature duo: emblems breach the card tops */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:980px;margin:70px auto 0}
.feature{padding:72px 44px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  border-color:rgba(46,196,99,.3);transition:border-color .25s,transform .25s}
.feature:hover{border-color:rgba(46,196,99,.65);transform:translateY(-4px)}
.feature .emblem{position:absolute;top:-48px;left:50%;transform:translateX(-50%);width:100px;height:100px;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.65))}
.feature h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:30px;letter-spacing:1.5px;color:var(--white)}
.feature p{color:var(--silver-dim);font-size:15px;line-height:1.62;flex:1;max-width:380px}
.feature p b{color:var(--green-hi);font-weight:600}
.feature .go{width:100%}

/* bonus card */
.bonus-grid{max-width:420px;margin:0 auto}
.bonus{overflow:hidden;display:flex;flex-direction:column;border-color:rgba(46,196,99,.35)}
.bonus .b-top{padding:48px 40px 42px;display:flex;flex-direction:column;align-items:center;gap:20px;
  background:
    radial-gradient(340px 150px at 50% 130%,rgba(46,196,99,.26),transparent 70%),
    linear-gradient(180deg,#161b15,#0f120d);
  border-bottom:1px solid var(--line)}
.bonus .b-top img{height:58px;width:auto;display:block;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.bonus .b-body{padding:26px 32px 30px;display:flex;flex-direction:column;gap:14px;text-align:center}
.offer-box{border:1px solid var(--line-hi);border-radius:11px;padding:15px;
  font-size:13.5px;font-weight:700;letter-spacing:2.5px;color:var(--white);
  text-transform:uppercase;background:rgba(12,14,12,.45)}
.how{font-size:11.5px;font-weight:700;letter-spacing:2px;color:var(--silver-dim);
  text-decoration:none;text-transform:uppercase;transition:color .2s;margin-top:2px}
.how:hover{color:var(--green-hi)}

/* socials */
.soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:920px;margin:0 auto}
.social{padding:38px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;transition:border-color .25s,transform .25s}
.social svg{width:46px;height:46px;fill:var(--silver);transition:fill .25s;margin-bottom:8px}
.social b{font-size:15px;font-weight:700;letter-spacing:1px;color:var(--white)}
.social span{font-size:10.5px;font-weight:700;letter-spacing:2.5px;color:var(--silver-dim);text-transform:uppercase}
.social .follow{margin-top:16px;width:100%;text-align:center;padding:12px 0;border-radius:10px;
  background:linear-gradient(180deg,#2ec463,#1e9a4a);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  box-shadow:0 8px 22px -8px rgba(46,196,99,.55),inset 0 1px 0 rgba(255,255,255,.25);transition:.22s}
.social:hover{border-color:rgba(46,196,99,.65);transform:translateY(-4px)}
.social:hover svg{fill:var(--green-hi)}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
details{border:1px solid var(--line);border-radius:13px;overflow:hidden;
  background:linear-gradient(180deg,rgba(23,29,22,.55),rgba(16,19,14,.62));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:22px 26px;font-size:15.5px;font-weight:600;color:var(--white)}
details summary::-webkit-details-marker{display:none}
details summary svg{width:20px;height:20px;fill:var(--green-hi);flex:none}
details summary::after{content:'';width:8px;height:8px;margin-left:auto;flex:none;
  border-right:2px solid var(--green-hi);border-bottom:2px solid var(--green-hi);
  transform:rotate(45deg);transition:.25s}
details[open] summary::after{transform:rotate(225deg)}
details .a{padding:0 26px 24px 60px;color:var(--silver-dim);font-size:14.5px;line-height:1.65}

/* ── subpage scaffolding ── */
.page-head{position:relative;max-width:640px;margin:0 auto;padding:84px 0 0;text-align:center}
.page-head .wm{position:absolute;left:50%;top:46px;transform:translateX(-50%);
  width:150px;height:150px;fill:var(--silver);opacity:.05;pointer-events:none}

/* leaderboard */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;max-width:920px;margin:76px auto 26px;align-items:end}
.pod{padding:66px 0 0;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.pod b{padding:0 20px}
.pod .medal{position:absolute;top:-44px;left:50%;transform:translateX(-50%);
  width:78px;height:96px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.pod.p1{border-color:rgba(46,196,99,.55);box-shadow:0 30px 60px -28px rgba(46,196,99,.4),0 30px 60px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05)}
.pod.p1 .medal{width:96px}
.pod b{font-size:16px;font-weight:700;color:var(--white);letter-spacing:.5px}
.pod .wag{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--silver-dim);text-transform:uppercase;margin-bottom:16px}
/* prize = filled bottom strip, coloured per placement (traced to match the reference) */
.pod .prize{width:100%;margin-top:auto;padding:15px 12px;font-family:var(--disp);font-weight:800;font-style:italic;font-size:26px;
  color:var(--white);border-top:1px solid var(--line-hi);border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.pod.p1 .prize{background:linear-gradient(180deg,#2ec463,#1e9a4a);border-top-color:rgba(255,255,255,.28);font-size:30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.pod.p2 .prize{background:linear-gradient(180deg,rgba(255,32,56,.3),rgba(255,32,56,.08));border-top-color:rgba(255,32,56,.45)}
.pod.p3 .prize{background:linear-gradient(180deg,rgba(90,104,90,.3),rgba(70,82,70,.1));border-top-color:rgba(247,250,247,.28)}

/* countdown — outlined boxes matching the reference layout */
.countdown{max-width:920px;margin:8px auto 30px;text-align:center}
.cd-label{font-size:12px;font-weight:700;letter-spacing:3px;color:var(--silver-dim);text-transform:uppercase;margin-bottom:16px}
.cd-grid{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cd-cell{min-width:88px;padding:16px 12px;border-radius:13px;
  background:linear-gradient(180deg,rgba(23,29,22,.62),rgba(16,19,14,.72));
  border:1px solid rgba(247,250,247,.26);border-top-color:rgba(247,250,247,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cd-cell b{display:block;font-family:var(--disp);font-weight:900;font-style:italic;font-size:36px;color:var(--white);line-height:1;font-variant-numeric:tabular-nums}
.cd-cell span{display:block;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:2px;color:var(--silver-dim);text-transform:uppercase}
.cd-note{margin-top:16px;font-size:12.5px;color:var(--silver-dim);letter-spacing:1px}
.lb-table{max-width:920px;margin:0 auto;overflow:hidden}
.lb-row{display:grid;grid-template-columns:70px 1fr 170px 130px;align-items:center;gap:10px;
  padding:17px 26px;border-top:1px solid var(--line);font-size:14.5px}
.lb-row:first-child{border-top:0;background:rgba(12,14,12,.5);
  font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--silver-dim);text-transform:uppercase}
.lb-row .rk{font-family:var(--disp);font-weight:800;font-style:italic;color:var(--silver-dim)}
.lb-row .nm{font-weight:600;color:var(--white)}
.lb-row .wg{color:var(--silver-dim)}
.lb-row .pz{font-weight:700;color:var(--green-hi);text-align:right}
.lb-note{max-width:920px;margin:16px auto 0;text-align:center;font-size:12.5px;color:var(--silver-dim);letter-spacing:1px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:980px;margin:0 auto}
.step{padding:34px 30px;display:flex;flex-direction:column;gap:10px}
.step .n{font-family:var(--disp);font-weight:900;font-style:italic;font-size:40px;color:var(--green-hi);line-height:1}
.step b{font-size:15.5px;font-weight:700;color:var(--white);letter-spacing:.5px}
.step p{font-size:14px;color:var(--silver-dim);line-height:1.6}

/* footer */
footer{border-top:1px solid var(--line);margin-top:40px;
  background:linear-gradient(180deg,transparent,rgba(46,196,99,.05))}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:56px 0 30px}
.foot .mark{margin-bottom:16px}
.foot p{font-size:13px;line-height:1.7;color:var(--silver-dim);max-width:360px}
.foot h4{font-size:12px;font-weight:700;letter-spacing:3px;color:var(--white);
  text-transform:uppercase;margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{font-size:13.5px;color:var(--silver-dim);text-decoration:none;transition:color .2s;overflow-wrap:anywhere}
.foot ul a:hover{color:var(--green-hi)}
.legal{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;justify-content:space-between;
  gap:20px;font-size:12px;color:var(--silver-dim);letter-spacing:.4px}
.legal b{color:var(--silver);letter-spacing:2px}

/* motion: panels sweep in from the outside, headers appear in place */
.rv{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.rv-l{transform:translateX(-72px)}
.rv-r{transform:translateX(72px)}
.rv-up{transform:translateY(26px)}
.rv-in{transform:scale(.94)}
.rv.on{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* toast */
#toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,16px);z-index:99;opacity:0;
  padding:13px 26px;border-radius:11px;background:#12160f;border:1px solid var(--green);color:var(--white);
  font-size:13px;font-weight:600;letter-spacing:1.5px;pointer-events:none;transition:.3s}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1040px){
  .duo{grid-template-columns:1fr;gap:70px}
  .soc-grid,.steps,.podium{grid-template-columns:1fr}
  .podium{gap:56px}
  .foot{grid-template-columns:1fr 1fr}
  h1{font-size:56px}
  h2{font-size:32px}
  .navlinks{display:none}
  .hero2{grid-template-columns:1fr;gap:44px;padding:64px 0 70px}
  .lb-band{grid-template-columns:1fr;gap:22px;text-align:center}
  .lb-band .head p{max-width:none}
  .strip{grid-template-columns:1fr;text-align:center;justify-items:center}
  .bonus-h{grid-template-columns:1fr}
  .bonus-h .bh-brand{border-right:0;border-bottom:1px solid var(--line)}
  .sec-left{text-align:center}
  .lb-row{grid-template-columns:48px 1fr 110px;font-size:13.5px}
  .lb-row .wg{display:none}
  .lb-row:first-child .wg{display:none}
  .rv-l,.rv-r{transform:translateY(26px)}
}


/* ======= sneakzy-style build (leaderboard hero, claim flow, VIP form, scatter) ======= */
/* ── leaderboard prize hero ── */
.lb-hero{max-width:760px;margin:0 auto;padding:84px 0 6px;text-align:center}
.lb-hero h2{font-size:56px;line-height:1.02}
.lb-hero .lb-amt{color:var(--green-hi)}
.lb-hero p{margin:16px auto 0;max-width:520px;font-size:16px;line-height:1.6;color:var(--silver-dim)}
.lb-cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:28px}

/* diamond mark before masked usernames */
.lb-table .nm{display:inline-flex;align-items:center;gap:9px}
.lb-mark{width:15px;height:15px;flex:none;fill:var(--green-hi)}

@media (max-width:1040px){
  .lb-hero{padding:60px 0 6px}
  .lb-hero h2{font-size:34px}
}

/* ── bonuses / link-account claim flow ── */
/* Step 01: Visit Duelbits, two columns + browser mock */
.cl-visit{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;
  padding:44px 46px;border-color:rgba(46,196,99,.35)}
.cl-visit-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cl-tag{display:inline-block;padding:6px 14px;border-radius:99px;border:1px solid var(--line-hi);
  background:rgba(46,196,99,.1);font-size:10.5px;font-weight:700;letter-spacing:3px;
  color:var(--green-hi);text-transform:uppercase}
.cl-visit-copy h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:34px;
  letter-spacing:1px;color:var(--white)}
.cl-visit-copy p{font-size:15px;line-height:1.62;color:var(--silver-dim);max-width:420px}
.cl-chip{margin-top:2px}
.cl-visit-btn{margin-top:4px}

/* browser preview mock (divs only) */
.cl-browser{border-radius:14px;overflow:hidden;border:1px solid rgba(247,250,247,.24);
  background:linear-gradient(180deg,rgba(16,19,14,.9),rgba(12,14,12,.94));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)}
.cl-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;
  border-bottom:1px solid var(--line);background:rgba(12,14,12,.6)}
.cl-dots{display:flex;gap:7px;flex:none}
.cl-dots i{width:11px;height:11px;border-radius:50%;background:#262e26;
  border:1px solid rgba(247,250,247,.24)}
.cl-url{display:flex;align-items:baseline;gap:2px;flex:1;padding:8px 14px;border-radius:9px;
  border:1px solid var(--line-hi);background:rgba(12,14,12,.7)}
.cl-url b{font-size:12.5px;font-weight:700;color:var(--white);letter-spacing:.5px}
.cl-url small{font-size:12.5px;font-weight:600;color:var(--green-hi)}
.cl-view{padding:22px;display:flex;flex-direction:column;gap:16px}
.cl-hero{border-radius:12px;padding:22px 20px;display:flex;flex-direction:column;gap:5px;
  border:1px solid rgba(46,196,99,.4);
  background:radial-gradient(300px 120px at 25% 120%,rgba(46,196,99,.28),transparent 70%),
    linear-gradient(160deg,rgba(23,29,22,.6),rgba(16,19,14,.7))}
.cl-hero-code{font-family:var(--disp);font-weight:900;font-style:italic;font-size:32px;
  letter-spacing:3px;color:var(--white);line-height:1}
.cl-hero-sub{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--green-hi);text-transform:uppercase}
.cl-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cl-tile{height:52px;border-radius:10px;border:1px solid var(--line-hi);
  background:linear-gradient(180deg,rgba(46,196,99,.14),rgba(12,14,12,.5))}
.cl-tile:nth-child(2){background:linear-gradient(180deg,rgba(88,229,141,.18),rgba(12,14,12,.5))}
.cl-rows{display:flex;flex-direction:column;gap:11px}
.cl-line{display:flex;align-items:center;gap:12px}
.cl-line i{width:34px;height:34px;border-radius:9px;flex:none;border:1px solid var(--line-hi);
  background:rgba(46,196,99,.12)}
.cl-line em{flex:1;height:11px;border-radius:6px;background:rgba(247,250,247,.14)}
.cl-line-btn{height:38px;border-radius:10px;
  background:linear-gradient(180deg,#2ec463,#1e9a4a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}

/* Create an account: 3 numbered step cards */
.cl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:980px;margin:0 auto}
.cl-step{padding:36px 32px;display:flex;flex-direction:column;gap:11px;
  border-color:rgba(247,250,247,.28);transition:border-color .25s,transform .25s}
.cl-step:hover{border-color:rgba(46,196,99,.6);transform:translateY(-4px)}
.cl-n{font-family:var(--disp);font-weight:900;font-style:italic;font-size:46px;
  color:var(--green-hi);line-height:1}
.cl-step b{font-size:16px;font-weight:700;color:var(--white);letter-spacing:.5px}
.cl-step p{font-size:14px;color:var(--silver-dim);line-height:1.6}

/* Enjoy your bonus: centered panel */
.cl-enjoy{max-width:680px;margin:0 auto;padding:52px 44px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  border-color:rgba(46,196,99,.35)}
.cl-gift{width:56px;height:56px;fill:var(--green-hi);
  filter:drop-shadow(0 10px 20px rgba(46,196,99,.4))}
.cl-enjoy h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:30px;
  letter-spacing:1px;color:var(--white)}
.cl-enjoy p{font-size:15px;line-height:1.62;color:var(--silver-dim);max-width:440px}

@media (max-width:1040px){
  .cl-visit{grid-template-columns:1fr;gap:34px}
  .cl-visit-copy{align-items:center;text-align:center}
  .cl-visit-copy p{max-width:none}
  .cl-steps{grid-template-columns:1fr}
}

/* ── VIP submit-your-info form ── */
.vip-card{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:960px;margin:0 auto;
  padding:44px 46px;align-items:center}
.vip-left h3{font-family:var(--disp);font-weight:800;font-style:italic;font-size:28px;letter-spacing:1px;
  color:var(--white);margin:6px 0 12px}
.vip-left p{font-size:15px;line-height:1.65;color:var(--silver-dim);max-width:420px}
.vip-art{display:block;width:100%;max-width:280px;height:auto;margin-bottom:22px;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.vip-right{display:flex;flex-direction:column}
#vipForm{display:flex;flex-direction:column;gap:18px}
.vip-field{display:flex;flex-direction:column;gap:8px}
.vip-field span{font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--silver-dim);text-transform:uppercase}
.vip-field input{width:100%;padding:14px 16px;border-radius:11px;
  border:1px solid var(--line-hi);background:rgba(12,14,12,.6);
  font-family:var(--body);font-size:14.5px;font-weight:500;color:var(--white);
  transition:border-color .2s,box-shadow .2s}
.vip-field input::placeholder{color:var(--silver-dim);opacity:.75}
.vip-field input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(46,196,99,.16)}
.vip-submit{width:100%;margin-top:4px}
.vip-submit:disabled{opacity:.6;cursor:default;transform:none}
.vip-status{min-height:18px;font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--silver-dim);text-align:center}
.vip-status.ok{color:var(--green-hi)}
.vip-status.err{color:#ff8b98}
@media (max-width:1040px){
  .vip-card{grid-template-columns:1fr;gap:32px;padding:36px 30px;text-align:center}
  .vip-left p{max-width:none;margin:0 auto}
  .vip-art{margin-left:auto;margin-right:auto}
  .vip-field span{text-align:left}
}

/* ===== leaderboard decorative scatter layer ===== */
.lb-scatter{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lb-scatter .lb-item{position:absolute;display:block;line-height:0;
  will-change:transform;animation:lb-bob 8s ease-in-out infinite alternate}
.lb-scatter .lb-item svg{display:block;width:100%;height:100%}

/* sizes handled per-item via width; positions hug the edges + top corners,
   leaving the central ~640px column clear for podium/table */
.lb-s1{width:44px;top:8%;left:5%;opacity:.28;transform:rotate(-12deg);animation-duration:9s;animation-delay:-.4s}
.lb-s2{width:38px;top:22%;left:9%;opacity:.22;transform:rotate(8deg);animation-duration:7.5s;animation-delay:-1.6s}
.lb-s3{width:60px;top:40%;left:4%;opacity:.20;transform:rotate(-6deg);animation-duration:10.5s;animation-delay:-.9s}
.lb-s4{width:34px;top:60%;left:8%;opacity:.30;transform:rotate(14deg);animation-duration:8.5s;animation-delay:-2.3s}
.lb-s5{width:48px;top:78%;left:6%;opacity:.24;transform:rotate(-10deg);animation-duration:11s;animation-delay:-.2s}
.lb-s6{width:40px;top:6%;right:6%;opacity:.26;transform:rotate(10deg);animation-duration:7s;animation-delay:-1.1s}
.lb-s7{width:46px;top:20%;right:10%;opacity:.22;transform:rotate(-8deg);animation-duration:9.5s;animation-delay:-2.7s}
.lb-s8{width:52px;top:38%;right:4%;opacity:.20;transform:rotate(6deg);animation-duration:8s;animation-delay:-.6s}
.lb-s9{width:56px;top:57%;right:7%;opacity:.28;transform:rotate(-14deg);animation-duration:10s;animation-delay:-1.9s}
.lb-s10{width:42px;top:76%;right:9%;opacity:.23;transform:rotate(12deg);animation-duration:7.8s;animation-delay:-3s}
.lb-s11{width:36px;top:90%;right:14%;opacity:.18;transform:rotate(-5deg);animation-duration:9.2s;animation-delay:-1.3s}

@keyframes lb-bob{
  from{transform:translateY(-6px) rotate(var(--lb-r,0deg))}
  to{transform:translateY(9px) rotate(var(--lb-r,0deg))}
}
/* preserve each item's base rotation through the shared keyframe */
.lb-s1{--lb-r:-12deg}.lb-s2{--lb-r:8deg}.lb-s3{--lb-r:-6deg}.lb-s4{--lb-r:14deg}
.lb-s5{--lb-r:-10deg}.lb-s6{--lb-r:10deg}.lb-s7{--lb-r:-8deg}.lb-s8{--lb-r:6deg}
.lb-s9{--lb-r:-14deg}.lb-s10{--lb-r:12deg}.lb-s11{--lb-r:-5deg}

@media (prefers-reduced-motion:reduce){
  .lb-scatter .lb-item{animation:none}
}
@media (max-width:900px){
  .lb-scatter{display:none}
}
/* register-button click pointer (draws the eye to the Duelbits CTAs) */
.btn{position:relative}
.reg-point{position:absolute;right:-15px;bottom:-17px;width:44px;height:44px;pointer-events:none;z-index:5}
.reg-point svg{position:absolute;left:9px;top:7px;width:26px;height:26px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));animation:regtap 1.7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:top left}
.reg-point .ring{position:absolute;left:7px;top:4px;width:14px;height:14px;border-radius:50%;
  border:2.5px solid var(--green-hi);animation:regring 1.7s ease-out infinite;opacity:0}
@keyframes regtap{0%,100%{transform:translate(0,0)}40%{transform:translate(-5px,-5px)}56%{transform:translate(0,0)}}
@keyframes regring{0%,38%{transform:scale(.3);opacity:0}54%{opacity:.9}100%{transform:scale(2);opacity:0}}
@media (prefers-reduced-motion:reduce){.reg-point svg{animation:none}.reg-point .ring{display:none}}

/* screenshots inside the how-to browser frames */
.cl-shot{display:block;width:100%;height:auto}
.cl-visit.cl-rev .cl-visit-copy{order:2;align-items:flex-start;text-align:left}
.cl-visit.cl-rev .cl-browser{order:1}
@media (max-width:1040px){
  .cl-visit.cl-rev .cl-visit-copy{order:0;align-items:center;text-align:center}
}

/* animated pointer aiming at the Register button inside each how-to screenshot */
.cl-shotwrap{position:relative;line-height:0}
.cl-aim{position:absolute;width:0;height:0;z-index:3;pointer-events:none}
.cl-aim svg{position:absolute;left:-2px;top:-2px;width:27px;height:27px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.65));
  animation:aimtap 1.5s cubic-bezier(.4,0,.2,1) infinite;transform-origin:top left}
.cl-aim .ring{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border:2.5px solid #fff;border-radius:50%;
  box-shadow:0 0 9px rgba(88,229,141,.75);animation:aimring 1.5s ease-out infinite;opacity:0}
@keyframes aimtap{0%,100%{transform:translate(7px,7px)}45%{transform:translate(0,0)}62%{transform:translate(7px,7px)}}
@keyframes aimring{0%,42%{transform:scale(.25);opacity:0}56%{opacity:.85}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.cl-aim svg{animation:none}.cl-aim .ring{display:none}}

/* real slot-card art in the leaderboard scatter */
.lb-scatter .lb-item.lb-card{opacity:.5}
.lb-scatter .lb-item img{display:block;width:100%;height:auto;border-radius:9px;
  box-shadow:0 10px 22px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.09)}

/* mobile hamburger menu */
.nav-burger{display:none;width:42px;height:42px;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;
  background:linear-gradient(180deg,#1a1f18,#10130e);border:1px solid var(--line-hi);border-radius:10px;cursor:pointer;padding:0}
.nav-burger span{display:block;width:20px;height:2px;background:var(--silver);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:10px 22px 20px;
  background:rgba(10,13,10,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
.nav-menu a{display:block;padding:15px 4px;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--silver-dim);text-decoration:none;border-bottom:1px solid var(--line)}
.nav-menu a:last-child{border-bottom:0}
.nav-menu a:hover,.nav-menu a.on{color:var(--white)}
@media (max-width:1040px){
  .nav-burger{display:flex}
  body.nav-open .nav-menu{display:flex}
  body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .nav-burger span:nth-child(2){opacity:0}
  body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* real register screenshot + animated cursor on the Register button */
.cl-shot{position:relative;line-height:0;background:#0f141b}
.cl-shot img{width:100%;height:auto;display:block}
.cl-aim{position:absolute;left:75.2%;top:74.6%;width:26px;height:26px;pointer-events:none;
  animation:aimdrift 3.6s ease-in-out infinite}
.cl-aim svg{position:relative;z-index:2;width:22px;height:22px;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.cl-aim i{content:'';position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;
  border:2px solid #2ec463;opacity:0;transform:scale(.4);animation:aimring 3.6s ease-out infinite}
@keyframes aimdrift{
  0%{transform:translate(26px,30px)}
  38%{transform:translate(0,0)}
  46%{transform:translate(0,0) scale(.86)}
  54%{transform:translate(0,0) scale(1)}
  78%{transform:translate(0,0)}
  100%{transform:translate(26px,30px)}
}
@keyframes aimring{
  0%,44%{opacity:0;transform:scale(.4)}
  50%{opacity:.9;transform:scale(1)}
  72%{opacity:0;transform:scale(2.4)}
  100%{opacity:0}
}

/* ── Phone optimization (Android + iPhone) ─────────────────────────────── */
html,body{overflow-x:hidden;max-width:100%}
*{min-width:0}
@media (max-width:560px){
  .wrap{padding:0 16px}
  nav{gap:12px;height:60px}
  .nav-code{display:none}          /* the code is front-and-center in the hero card */
  .hero2::before{display:none}     /* huge ghost "TILT" was overflowing the right edge */
  .hero2{padding:46px 0 54px;gap:34px}
  .hero2 .tag{font-size:15px;line-height:1.65;max-width:100%}
  h1{font-size:clamp(3.4rem,18vw,5.2rem);letter-spacing:1px}
  .cta{margin-top:22px}
  .codecard{padding:30px 22px 28px}
}

/* menu button flush to the right edge whenever the mobile nav is active */
@media (max-width:1040px){ .nav-burger{margin-left:auto} }