:root{
  --bg: #03040a;

  --ice-100: #eaf2ff;
  --ice-200: #b9ccff;
  --ice-300: #7fa4f5;
  --ice-400: #5a86e6;
  --ice-500: #3d63c4;
  --ice-600: #25408c;

  --glass:        rgba(255,255,255,0.025);
  --glass-strong: rgba(255,255,255,0.04);
  --glass-hover:  rgba(255,255,255,0.055);
  --line:         rgba(180, 200, 255, 0.06);
  --line-2:       rgba(180, 200, 255, 0.11);
  --line-3:       rgba(180, 200, 255, 0.18);

  --text:   #e7ecf7;
  --text-2: #8a93ad;
  --text-3: #535b78;

  --accent: #7fa4f5;
  --accent-glow: rgba(127, 164, 245, 0.35);

  --green:  #22e07a;
  --money:  #a3e635;
  --blue:   #2bb8ff;
  --purple: #9b7bff;
  --orange: #ff8a3d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:'Geist',ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;
  min-height:100vh;
  background-image:
    radial-gradient(1000px 700px at 16% -8%, rgba(61, 99, 196, 0.18), transparent 62%),
    radial-gradient(800px 600px at 94% 4%,  rgba(90, 134, 230, 0.10), transparent 58%),
    radial-gradient(900px 700px at 78% 96%, rgba(37, 64, 140, 0.16), transparent 64%);
  background-attachment: fixed;
}
::selection{background:rgba(127,164,245,.25)}
a{color:inherit;text-decoration:none}

.wrap{max-width:1480px;margin:0 auto;padding:0 40px}

.nav{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, rgba(3,4,10,0.72), rgba(3,4,10,0.35));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{
  width:32px;height:32px;border-radius:9px;
  background: linear-gradient(135deg, rgba(127,164,245,0.18), rgba(127,164,245,0.04));
  border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ice-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.brand-name{font-family:'Geist Mono',monospace;font-weight:600;font-size:15px;letter-spacing:0.06em}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-dash{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border:1px solid var(--line-2);backdrop-filter:blur(12px);
  color:var(--text);font-family:'Geist Mono',monospace;font-size:12.5px;letter-spacing:0.04em;cursor:pointer;
  transition: all .15s;
}
.nav-dash:hover{border-color:var(--line-3);background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03))}
.nav-icon{
  width:38px;height:38px;border-radius:9px;
  background: var(--glass);border:1px solid var(--line-2);backdrop-filter:blur(12px);
  display:grid;place-items:center;color:var(--text-2);cursor:pointer;transition:all .15s;
}
.nav-icon:hover{color:var(--text);border-color:var(--line-3);background:var(--glass-hover)}

.hero-section{padding:24px 0 0}
.hero{
  position:relative;overflow:hidden;
  border-radius:22px;
  min-height:660px;
  border:1px solid var(--line-2);
  background:
    linear-gradient(180deg, rgba(20,30,58,0.30), rgba(6,9,20,0.55));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 80px -40px rgba(0,0,0,0.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 24px 64px;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,164,245,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,164,245,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 38%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 50% 38%, #000 35%, transparent 78%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(127,164,245,.10), transparent 65%),
    radial-gradient(520px circle at var(--sx,50%) var(--sy,35%), rgba(127,164,245,.07), transparent 62%);
}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--line-2);backdrop-filter:blur(12px);
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.14em;color:var(--text-2);
  text-transform:uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .2s, box-shadow .2s;
}
.badge:hover { border-color: rgba(34,224,122,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(34,224,122,.08); }
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(34,224,122,0.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

.hero-kicker{
  margin-top:34px;
  font-family:'Geist',sans-serif;font-weight:500;
  font-size:clamp(34px, 5vw, 62px);letter-spacing:0.34em;line-height:1;
  color:transparent;
  background:linear-gradient(180deg, var(--text-3), rgba(83,91,120,0.35));
  -webkit-background-clip:text;background-clip:text;
  padding-left:0.34em;
}
.hero-title{
  margin:6px 0 0;
  font-weight:800;letter-spacing:-0.04em;line-height:0.92;
  font-size:clamp(96px, 16vw, 200px);
  color:#fff;
  text-shadow: 0 20px 70px rgba(127,164,245,0.18);
}
.hero-sub{
  margin:30px 0 0;max-width:440px;
  color:var(--text-2);font-size:16px;line-height:1.5;text-wrap:pretty;
}
.hero-cta{display:flex;align-items:center;gap:12px;margin-top:40px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:11px;cursor:pointer;
  font-family:'Geist Mono',monospace;font-size:13px;letter-spacing:0.04em;
  transition: all .16s;
}
.btn-primary{
  background: linear-gradient(180deg, #ffffff, #e4e9f5);
  color:#0a0e1a;font-weight:600;border:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 30px -10px rgba(127,164,245,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow: 0 12px 38px -10px rgba(127,164,245,0.55), inset 0 1px 0 rgba(255,255,255,0.9)}
.btn-glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018));
  border:1px solid var(--line-2);backdrop-filter:blur(12px);color:var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-glass:hover{border-color:var(--line-3);background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03))}
.btn-glass svg{color:var(--ice-300)}

.scroll-hint{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.22em;color:var(--text-3);
}
.scroll-hint .line{width:1px;height:26px;background:linear-gradient(180deg, var(--text-3), transparent);animation:scrolly 2s ease-in-out infinite}
@keyframes scrolly{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

section.block{padding:30px 0}
.panel{
  position:relative;overflow:hidden;
  border-radius:20px;
  border:1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 24px 60px -40px rgba(0,0,0,0.7);
  padding:38px 40px;
}
.panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background: radial-gradient(110% 70% at 50% -10%, rgba(127,164,245,0.04), transparent 55%);
}
.panel > *{position:relative}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.16em;color:var(--ice-300);
  text-transform:uppercase;margin-bottom:12px;
}
.eyebrow .bar{width:22px;height:1px;background:var(--ice-400);opacity:.6}
.h2{font-size:28px;font-weight:700;letter-spacing:-0.02em;margin:0;line-height:1.1}
.section-desc{margin:8px 0 0;color:var(--text-2);font-size:14px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.stat{
  position:relative;overflow:hidden;
  padding:18px 20px 20px;border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border:1px solid var(--line-2);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.stat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.stat-label{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.12em;color:var(--text-2);text-transform:uppercase}
.stat-icon{
  width:30px;height:30px;border-radius:8px;
  background: rgba(127,164,245,0.06);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ice-300);
}
.stat.c-blue   .stat-icon{color:#2bb8ff;background:rgba(43,184,255,0.14);border-color:rgba(43,184,255,0.30)}
.stat.c-purple .stat-icon{color:#9b7bff;background:rgba(155,123,255,0.14);border-color:rgba(155,123,255,0.30)}
.stat.c-money  .stat-icon{color:#a3e635;background:rgba(163,230,53,0.14);border-color:rgba(163,230,53,0.30)}
.stat.c-green  .stat-icon{color:#22e07a;background:rgba(34,224,122,0.14);border-color:rgba(34,224,122,0.30)}
.stat.c-orange .stat-icon{color:#ff8a3d;background:rgba(255,138,61,0.14);border-color:rgba(255,138,61,0.30)}
.stat-value{font-size:34px;font-weight:700;letter-spacing:-0.03em;line-height:1;color:#fff}
.stat.c-money .stat-value{color:#a3e635}
.stat-foot{margin-top:12px;color:var(--text-3);font-size:12px;padding-top:12px;border-top:1px solid var(--line)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.split .col-l{padding-right:44px;border-right:1px solid var(--line)}
.split .col-r{padding-left:44px;display:flex;flex-direction:column;justify-content:center}
.game-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:11px;margin-top:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
  border:1px solid var(--line-2);backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.game-left{display:flex;align-items:center;gap:11px}
.game-icon{
  width:34px;height:34px;border-radius:9px;flex:none;
  background: linear-gradient(135deg, rgba(155,123,255,0.22), rgba(155,123,255,0.04));
  border:none;
  display:grid;place-items:center;color:#c0a8ff;font-family:'Geist',sans-serif;font-weight:800;font-size:17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  overflow:hidden;
}
.game-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.game-name{font-weight:600;font-size:15px;color:var(--text)}
.badge-active{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:7px;
  background: rgba(34,224,122,0.10);border:1px solid rgba(34,224,122,0.32);
  color:#86efac;font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.10em;text-transform:uppercase;
}
.badge-active .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(34,224,122,0.6)}
.cta-title{font-size:26px;font-weight:700;letter-spacing:-0.02em;margin:0}
.cta-desc{margin:12px 0 0;color:var(--text-2);font-size:14px;line-height:1.55;max-width:420px}
.cta-btn{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:24px;
  padding:13px 22px;border-radius:11px;cursor:pointer;
  background: linear-gradient(180deg, #ffffff, #e4e9f5);color:#0a0e1a;
  font-family:'Geist Mono',monospace;font-size:13px;letter-spacing:0.04em;font-weight:600;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow: 0 8px 30px -10px rgba(127,164,245,0.4), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: all .16s;
}
.cta-btn:hover{transform:translateY(-1px)}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.qs-card{
  position:relative;overflow:hidden;min-height:130px;
  padding:16px 18px;border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.005));
  border:1px solid var(--line-2);backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  display:flex;flex-direction:column;
  transition: all .18s;
}
.qs-card:hover{border-color:var(--line-3);background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));transform:translateY(-2px)}
.qs-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:auto}
.qs-num{
  font-family:'Geist Mono',monospace;font-size:34px;font-weight:600;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line-3);letter-spacing:-0.02em;
}
.qs-icon{
  width:34px;height:34px;border-radius:9px;
  background: var(--glass);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ice-300);
}
.qs-card-title{font-size:16px;font-weight:600;margin:0;color:var(--text)}
.qs-card-desc{margin:5px 0 0;color:var(--text-3);font-size:12.5px;line-height:1.5}

.feat-card .qs-top{margin-bottom:18px}
.feat-icon{
  width:42px;height:42px;border-radius:11px;
  background: rgba(127,164,245,0.07);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ice-200);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.discord-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 32px;
}
.discord-left{display:flex;align-items:center;gap:14px;color:var(--text);font-size:15px}
.discord-ico{
  width:40px;height:40px;border-radius:10px;flex:none;
  background: rgba(127,164,245,0.08);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ice-300);
}
.discord-btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:12px 20px;border-radius:10px;cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid var(--line-2);backdrop-filter:blur(12px);
  color:var(--text);font-family:'Geist Mono',monospace;font-size:12.5px;letter-spacing:0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);transition: all .16s;
}
.discord-btn:hover{border-color:var(--line-3);background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035))}

.footer{padding:46px 0 40px;border-top:1px solid var(--line);margin-top:30px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.foot-brand{font-family:'Geist Mono',monospace;font-weight:600;font-size:16px;letter-spacing:0.06em;color:var(--text)}
.foot-tag{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.12em;color:var(--text-3);text-transform:uppercase;margin-top:6px}
.foot-copy{font-family:'Geist Mono',monospace;font-size:11.5px;color:var(--text-3);letter-spacing:0.02em}

@media (max-width:1080px){
  .stats,.grid4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split .col-l{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:28px}
  .split .col-r{padding-left:0;padding-top:28px}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .stats,.grid4{grid-template-columns:1fr}
  .panel{padding:26px 22px}
  .discord-cta{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion: no-preference){
  @keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .hero-content > *{opacity:0;animation:heroIn .7s cubic-bezier(.22,.61,.36,1) forwards}
  .hero-content > *:nth-child(1){animation-delay:.10s}
  .hero-content > *:nth-child(2){animation-delay:.18s}
  .hero-content > *:nth-child(3){animation-delay:.26s}
  .hero-content > *:nth-child(4){animation-delay:.36s}
  .hero-content > *:nth-child(5){animation-delay:.46s}
  .scroll-hint{opacity:0;animation:heroIn .7s ease .7s forwards}

  .reveal{opacity:0;transition:opacity .6s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1}
  .reveal .stat,.reveal .qs-card,.reveal .game-row{
    opacity:0;transform:translateY(18px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1) var(--cd,0s),
               transform .55s cubic-bezier(.22,.61,.36,1) var(--cd,0s);
  }
  .reveal.in .stat,.reveal.in .qs-card,.reveal.in .game-row{opacity:1;transform:none}
  .reveal .stat:nth-child(1),.reveal .qs-card:nth-child(1){--cd:.06s}
  .reveal .stat:nth-child(2),.reveal .qs-card:nth-child(2){--cd:.14s}
  .reveal .stat:nth-child(3),.reveal .qs-card:nth-child(3){--cd:.22s}
  .reveal .stat:nth-child(4),.reveal .qs-card:nth-child(4){--cd:.30s}

  @keyframes navSlide { from { transform: translateY(-110%); opacity: 0; } }
  .nav { animation: navSlide .52s cubic-bezier(.22,.61,.36,1) both; }

  @keyframes barGrow { from { transform: scaleX(0); opacity: 0; } }
  .reveal.in .eyebrow .bar {
    transform-origin: left center;
    animation: barGrow .45s cubic-bezier(.22,.61,.36,1) .3s both;
  }
}

.hero-chart{
  position:absolute;bottom:0;left:0;width:100%;height:62%;
  z-index:1;pointer-events:none;overflow:visible;
  opacity:0.35;
}
.chart-fill{
  fill:url(#cGrad);
  opacity:0;
  animation:cFadeIn 3s ease .5s forwards;
}
.chart-line{
  fill:none;stroke:rgba(127,164,245,0.4);stroke-width:1.5;
  filter:url(#cGlow);
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:cDraw 5s cubic-bezier(.25,.1,.1,1) .1s forwards;
}
.chart-line-glow{
  fill:none;stroke:rgba(127,164,245,0.10);stroke-width:6;
  filter:url(#cGlow2);
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:cDraw 5s cubic-bezier(.25,.1,.1,1) .1s forwards;
}
@keyframes cDraw{to{stroke-dashoffset:0}}
@keyframes cFadeIn{to{opacity:1}}

.btn:active        { transform: scale(0.965); transition-duration: .07s; }
.cta-btn:active    { transform: scale(0.965); transition-duration: .07s; }
.nav-dash:active   { transform: scale(0.965); transition-duration: .07s; }
.nav-icon:active   { transform: scale(0.88);  transition-duration: .07s; }
.discord-btn:active{ transform: scale(0.965); transition-duration: .07s; }

.btn-primary, .cta-btn { position: relative; overflow: hidden; }
.btn-primary::after, .cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.22) 50%, transparent 72%);
  transform: translateX(-140%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .cta-btn:hover::after { transform: translateX(140%); }

.stat { transition: border-color .22s, box-shadow .22s, transform .22s; }
.stat:hover { transform: translateY(-3px); }
.stat.c-blue:hover   { border-color: rgba(43,184,255,.26);  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px -18px rgba(43,184,255,.32); }
.stat.c-purple:hover { border-color: rgba(155,123,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px -18px rgba(155,123,255,.32); }
.stat.c-money:hover  { border-color: rgba(163,230,53,.26);  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px -18px rgba(163,230,53,.32); }
.stat.c-orange:hover { border-color: rgba(255,138,61,.26);  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px -18px rgba(255,138,61,.32); }
.stat.c-green:hover  { border-color: rgba(34,224,122,.26);  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 38px -18px rgba(34,224,122,.32); }

.game-row { transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s, background .2s; }
.game-row:hover { transform: translateX(6px); border-color: var(--line-3); }

.qs-icon { transition: background .2s, color .2s, border-color .2s; }
.qs-card:hover .qs-icon { background: rgba(127,164,245,.10); border-color: rgba(127,164,245,.22); color: var(--ice-200); }

.feat-icon { transition: background .22s, color .22s, box-shadow .22s; }
.qs-card.feat-card:hover .feat-icon {
  background: rgba(127,164,245,.15);
  color: var(--ice-100);
  box-shadow: 0 0 22px rgba(127,164,245,.14), inset 0 1px 0 rgba(255,255,255,.08);
}