:root{
    --ink:#07080B; --ink2:#0B0D12; --ink3:#101319;
    --paper:#F4F2EC; --dim:rgba(244,242,236,.58); --dim2:rgba(244,242,236,.34);
    --lime:#C8F53F; --violet:#8B5CF6; --line:rgba(244,242,236,.11);
    --display:'Anton',Impact,sans-serif; --body:'Inter',system-ui,sans-serif;
    --r:18px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--ink); color:var(--paper);
    font-family:var(--body); -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
  a{color:inherit; text-decoration:none}
  ::selection{background:var(--lime); color:#07080B}

  /* ---------- grain ---------- */
  .grain{position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

  /* ---------- nav ---------- */
  header{position:sticky; top:0; z-index:100; backdrop-filter:blur(14px);
    background:linear-gradient(to bottom,rgba(7,8,11,.92),rgba(7,8,11,.55));
    border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; gap:16px; height:64px}
  .mark{font-family:var(--display); font-size:26px; letter-spacing:.06em; line-height:1; display:flex; align-items:center; gap:9px}
  .mark i{width:9px; height:9px; border-radius:50%; background:var(--lime); display:block;
    box-shadow:0 0 0 0 rgba(200,245,63,.6); animation:pulse 2.1s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 11px rgba(200,245,63,0)}100%{box-shadow:0 0 0 0 rgba(200,245,63,0)}}
  .navlinks{display:none; gap:26px; margin-left:auto; font-size:14px; color:var(--dim)}
  .navlinks a:hover{color:var(--paper)}
  .livepill{display:none; margin-left:auto; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    border:1px solid rgba(200,245,63,.35); color:var(--lime); padding:7px 12px; border-radius:999px; font-weight:600}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:14px; padding:13px 22px; border-radius:999px;
    border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .18s ease, color .18s ease}
  .btn:active{transform:scale(.98)}
  .btn-primary{background:var(--lime); color:#08090C}
  .btn-primary:hover{background:#d6ff5c}
  .btn-ghost{border-color:rgba(244,242,236,.22); color:var(--paper)}
  .btn-ghost:hover{border-color:rgba(244,242,236,.5); background:rgba(244,242,236,.04)}
  .nav .btn{padding:10px 18px; font-size:13px; margin-left:auto}
  @media(min-width:900px){
    .navlinks{display:flex; margin-left:auto}
    .livepill{display:inline-block; margin-left:0}
    .nav .btn{margin-left:0}
  }

  /* ---------- hero ---------- */
  .hero{position:relative; padding:64px 0 40px; overflow:hidden}
  .aurora{position:absolute; inset:-30% -20% auto -20%; height:760px; z-index:0; filter:blur(70px); opacity:.55;
    background:
      radial-gradient(38% 46% at 26% 34%, rgba(200,245,63,.34), transparent 62%),
      radial-gradient(34% 40% at 74% 22%, rgba(139,92,246,.34), transparent 64%),
      radial-gradient(46% 50% at 52% 68%, rgba(46,196,182,.20), transparent 68%);
    animation:drift 17s ease-in-out infinite alternate}
  @keyframes drift{to{transform:translate3d(0,-38px,0) scale(1.1)}}
  .hero .wrap{position:relative; z-index:1}
  .eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--dim); border:1px solid var(--line); padding:7px 13px; border-radius:999px; margin-bottom:26px}
  .eyebrow b{color:var(--lime); font-weight:700}
  h1{font-family:var(--display); font-weight:400; margin:0;
    font-size:clamp(46px,11.5vw,116px); line-height:.88; letter-spacing:-.015em; text-transform:uppercase}
  h1 .out{color:transparent; -webkit-text-stroke:1.4px rgba(244,242,236,.5)}
  h1 .hl{color:var(--lime)}
  .sub{margin:26px 0 0; max-width:52ch; font-size:clamp(15px,2.2vw,18px); line-height:1.62; color:var(--dim)}
  .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
  .hostsignin{margin:18px 0 0; font-size:13.5px}
  .hostsignin a{color:var(--dim2); border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:1px}
  .hostsignin a:hover{color:var(--lime); border-bottom-color:rgba(200,245,63,.5)}
  .hero-note{margin-top:22px; font-size:12.5px; color:var(--dim2); display:flex; align-items:center; gap:8px}
  .hero-note b{color:var(--lime); font-weight:600}

  /* waveform */
  .wave{display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:38px}
  .wave span{width:3px; border-radius:2px; background:var(--lime); opacity:.75;
    animation:bar 1.25s ease-in-out infinite alternate}
  @keyframes bar{from{height:5px}to{height:32px}}

  /* ---------- ticker ---------- */
  .ticker{border-block:1px solid var(--line); background:var(--ink2); overflow:hidden; padding:13px 0}
  .ticker-track{display:flex; gap:36px; width:max-content; animation:slide 34s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  @keyframes slide{to{transform:translateX(-50%)}}
  .ticker-item{display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.13em;
    text-transform:uppercase; color:var(--dim); white-space:nowrap}
  .ticker-item s{width:6px; height:6px; border-radius:50%; background:var(--lime); text-decoration:none}

  /* ---------- sections ---------- */
  section{padding:74px 0}
  .shead{display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:34px}
  .shead h2{font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0;
    font-size:clamp(27px,5.2vw,46px); line-height:.95; letter-spacing:-.01em}
  .shead p{margin:0; color:var(--dim); font-size:14.5px; max-width:44ch; line-height:1.6}
  .shead .num{font-size:11px; letter-spacing:.2em; color:var(--lime); border:1px solid rgba(200,245,63,.3);
    border-radius:999px; padding:6px 11px; font-weight:600}

  /* live cards */
  .grid{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
  @media(min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .card{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:20px;
    background:linear-gradient(170deg,var(--ink3),var(--ink2)); overflow:hidden;
    transition:transform .22s ease, border-color .22s ease}
  .card:hover{transform:translateY(-4px); border-color:rgba(200,245,63,.35)}
  .card .glow{position:absolute; inset:-40% -20% auto auto; width:210px; height:210px; border-radius:50%;
    filter:blur(46px); opacity:.3; background:var(--lime)}
  .card.v .glow{background:var(--violet)}
  .card.t .glow{background:#2EC4B6}
  .card-top{display:flex; justify-content:space-between; align-items:center; gap:10px; position:relative}
  .host{display:flex; align-items:center; gap:10px; min-width:0}
  .av{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
    font-family:var(--display); font-size:13px; color:#07080B; background:var(--lime)}
  .card.v .av{background:var(--violet); color:#fff}
  .card.t .av{background:#2EC4B6; color:#04211F}
  .host b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .host span{display:block; font-size:11px; color:var(--dim2); letter-spacing:.06em; text-transform:uppercase}
  .livebadge{font-size:10px; letter-spacing:.15em; font-weight:700; color:#07080B; background:var(--lime);
    padding:4px 8px; border-radius:5px; flex:none}
  .track{position:relative; margin:20px 0 16px; font-family:var(--display); font-size:22px;
    line-height:1.05; text-transform:uppercase; letter-spacing:.01em}
  .track small{display:block; font-family:var(--body); font-size:11.5px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--dim2); margin-top:8px; font-weight:500}
  .mini{display:flex; align-items:flex-end; gap:2px; height:22px; margin-bottom:16px}
  .mini i{width:2.5px; background:rgba(200,245,63,.55); border-radius:2px; animation:bar 1.1s ease-in-out infinite alternate}
  .card-foot{display:flex; justify-content:space-between; align-items:center; font-size:11.5px;
    color:var(--dim); border-top:1px solid var(--line); padding-top:13px; position:relative}
  .card-foot b{color:var(--paper); font-weight:600}

  /* how it works */
  .steps{display:grid; gap:0; grid-template-columns:minmax(0,1fr)}
  @media(min-width:820px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .step{padding:26px 0; border-top:1px solid var(--line); position:relative}
  @media(min-width:820px){
    .step{padding:30px 26px 30px 0; border-top:1px solid var(--line)}
    .step+.step{border-left:1px solid var(--line); padding-left:26px}
  }
  .step .n{font-family:var(--display); font-size:13px; color:var(--lime); letter-spacing:.1em}
  .step h3{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:25px;
    margin:12px 0 10px; letter-spacing:.01em}
  .step p{margin:0; color:var(--dim); font-size:14.5px; line-height:1.62}

  /* two doors */
  .doors{display:grid; gap:14px; grid-template-columns:minmax(0,1fr)}
  @media(min-width:820px){.doors{grid-template-columns:1fr 1fr}}
  .door{border:1px solid var(--line); border-radius:var(--r); padding:28px; position:relative; overflow:hidden;
    background:linear-gradient(160deg,var(--ink3),var(--ink2))}
  .door.accent{border-color:rgba(200,245,63,.34)}
  .door h3{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:30px; margin:0 0 12px; line-height:.95}
  .door>p{margin:0 0 22px; color:var(--dim); font-size:14.5px; line-height:1.62; max-width:40ch}
  .door ul{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px}
  .door li{display:flex; gap:11px; font-size:14px; color:rgba(244,242,236,.82); line-height:1.5}
  .door li svg{flex:none; margin-top:2px}
  .door .btn{width:100%}
  @media(min-width:520px){.door .btn{width:auto}}

  /* stats */
  .stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line);
    border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  @media(min-width:760px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
  .stat{background:var(--ink2); padding:26px 22px}
  .stat b{display:block; font-family:var(--display); font-size:clamp(30px,6vw,44px); line-height:1; letter-spacing:-.01em}
  .stat span{display:block; margin-top:9px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim2)}

  /* final */
  .final{position:relative; overflow:hidden; border-top:1px solid var(--line)}
  .final .aurora{inset:auto -20% -60% -20%; height:520px; opacity:.4}
  .final .wrap{position:relative; z-index:1; text-align:center}
  .final h2{font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0;
    font-size:clamp(38px,9vw,84px); line-height:.9; letter-spacing:-.015em}
  .final p{color:var(--dim); max-width:44ch; margin:22px auto 30px; font-size:16px; line-height:1.6}
  .final .cta{justify-content:center}

  /* footer */
  footer{border-top:1px solid var(--line); padding:34px 0; background:var(--ink)}
  .foot{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
    font-size:12.5px; color:var(--dim2)}
  .foot nav{display:flex; flex-wrap:wrap; gap:18px}
  .foot a:hover{color:var(--paper)}

  /* reveal */
  .rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .rv.in{opacity:1; transform:none}

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important; transition:none!important}
    .rv{opacity:1; transform:none}
    html{scroll-behavior:auto}
  }