@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

  :root{
    --void:#060a08;
    --panel:#0c1310;
    --panel-2:#111b16;
    --line: rgba(93,240,175,.14);
    --green:#34e8a0;
    --green-deep:#0fae72;
    --purple:#a855f7;
    --purple-deep:#7c3aed;
    --gold:#f2b705;
    --ink:#e9fbf1;
    --muted:#8ba79b;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:
      radial-gradient(60vw 40vh at 85% -10%, rgba(168,85,247,.20), transparent 60%),
      radial-gradient(50vw 40vh at 5% 0%, rgba(52,232,160,.16), transparent 60%),
      var(--void);
    color:var(--ink);
    font-family:'Manrope', sans-serif;
    line-height:1.5;
  }
  h1,h2,h3, .display{
    font-family:'Chakra Petch', sans-serif;
    letter-spacing:.01em;
    margin:0;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

  /* ---------- Boot loader (up until the page is ready) ---------- */
  .loader{
    position:fixed; inset:0; z-index:9999; color:#fff;
    display:grid; place-items:center;
    transition:opacity .5s ease, visibility .5s ease;
  }
  .loader.is-done{opacity:0; visibility:hidden;}
  /* the veil is three stacked layers: blur, brand tint, vignette */
  .loader-veil{position:absolute; inset:0;}
  .loader-veil::before{
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.4);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  }
  .loader-veil::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(135deg, rgba(0,25,0,.4), rgba(12,12,12,.4)),
      radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  }
  /* the neon halo spinning behind the mark */
  .loader-ring{
    position:absolute; width:180px; height:180px; border-radius:50%;
    filter:blur(24px); opacity:.7;
    background:conic-gradient(from 0deg, #00ff66 0%, #07f405 40%, #00ff66 100%);
    animation:loader-spin 3.4s linear infinite;
  }
  @keyframes loader-spin{ to{transform:rotate(360deg);} }
  .loader-inner{position:relative; display:flex; flex-direction:column; align-items:center; padding:0 22px;}
  .loader-logo{
    height:clamp(88px, 22vw, 120px); width:auto; margin-bottom:22px;
    filter:drop-shadow(0 0 14px rgba(0,255,102,.65));
    animation:loader-pulse 2.4s ease-in-out infinite;
  }
  @keyframes loader-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.045);}
  }
  .loader-text{
    font-family:'Chakra Petch', sans-serif; font-size:20px; font-weight:600;
    color:#00ff66; letter-spacing:.02em;
  }
  .loader-bar{
    margin-top:20px; width:256px; max-width:72vw; height:6px;
    border-radius:999px; background:rgba(0,255,102,.2); overflow:hidden;
  }
  .loader-bar-fill{
    display:block; height:100%; width:0; border-radius:999px;
    background:linear-gradient(90deg, #07f405, #00ff66);
    box-shadow:0 0 10px rgba(0,255,102,.6);
    transition:width .18s ease-out;
  }
  /* nothing should scroll behind the veil */
  html.is-booting, html.is-booting body{overflow:hidden;}
  /* hold the hero entrance (and the shine sweeps) while the loader is up:
     animation-play-state freezes the delays too, so no frame is wasted behind it */
  html.is-booting .hero-logo,
  html.is-booting .hero-logo .orn,
  html.is-booting .hero-logo-flash,
  html.is-booting .hero-logo-shine,
  html.is-booting .logo-shine{animation-play-state:paused;}

  /* ---------- Floating background (brand assets rising non-stop) ---------- */
  .bg-float{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1;}
  .bg-float i{
    position:absolute; bottom:-160px; width:var(--s,44px); aspect-ratio:1;
    background-position:center; background-repeat:no-repeat; background-size:contain;
    opacity:0;
    animation:bg-rise var(--dur,24s) linear var(--delay,0s) infinite;
  }
  .bf-diamond   {background-image:url(../assets/images/perk-stake.png);}
  .bf-ticket    {background-image:url(../assets/images/perk-raffle.png);}
  .bf-heart     {background-image:url(../assets/images/perk-race.png);}
  .bf-gem-green {background-image:url(../assets/images/gem-green.png);}
  .bf-gem-purple{background-image:url(../assets/images/gem-purple.png);}
  @keyframes bg-rise{
    0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
    7%{ opacity:var(--o, .3); }
    78%{ opacity:var(--o, .3); }
    100%{ transform:translate3d(var(--drift, 24px), calc(-100vh - 200px), 0) rotate(var(--spin, 180deg)); opacity:0; }
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 22px;
    border-radius:10px;
    font-family:'Chakra Petch', sans-serif;
    font-weight:600;
    font-size:15px;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    white-space:nowrap;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{
    background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
    color:#04140c;
    box-shadow:0 10px 26px -10px rgba(52,232,160,.55);
  }
  .btn-primary:hover{ box-shadow:0 14px 30px -8px rgba(52,232,160,.7); }
  .btn-ghost{
    background:rgba(168,85,247,.10);
    border-color:rgba(168,85,247,.45);
    color:#e9dcff;
  }
  .btn-ghost:hover{ border-color:var(--purple); background:rgba(168,85,247,.18); }
  .btn-outline{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-outline:hover{border-color:var(--green);}
  .btn-sm{padding:9px 16px; font-size:13px; border-radius:8px;}
  .btn-block{width:100%; justify-content:center;}

  /* ---------- Nav ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(6,10,8,.78);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 28px; }
  .nav-left{display:flex; align-items:center; gap:40px;}
  .logo{height:34px;}
  .nav-left .logo{height:56px;}

  /* ---------- Animated logo mark (old G logo + new-design diamonds) ---------- */
  .logo-mark{position:relative; display:inline-flex; align-items:center; justify-content:center;}
  .logo-mark .logo{position:relative; z-index:1; animation:logo-glow 3.6s ease-in-out infinite;}
  @keyframes logo-glow{
    0%,100%{filter:drop-shadow(0 0 9px rgba(52,232,160,.30));}
    50%{filter:drop-shadow(0 0 14px rgba(52,232,160,.58)) drop-shadow(0 0 26px rgba(168,85,247,.34));}
  }
  /* light sweep, clipped to the logo's own pixels via the PNG's alpha */
  .logo-shine, .hero-logo-shine{
    position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
    background:linear-gradient(105deg, rgba(255,255,255,0) 41%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 59%) no-repeat;
    background-size:280% 100%;
    -webkit-mask:url(../assets/images/logo-gemzz.png) center/contain no-repeat;
    mask:url(../assets/images/logo-gemzz.png) center/contain no-repeat;
    animation:logo-shine 5s ease-in-out infinite;
  }
  .logo-shine{animation-delay:1.2s;}        /* the header mark just glints */
  .hero-logo-shine{animation-delay:2.6s;}   /* the hero waits until its entrance is done */
  @keyframes logo-shine{
    0%{background-position:190% 0; opacity:0;}
    12%{opacity:1;}
    58%{background-position:-90% 0; opacity:0;}
    100%{background-position:-90% 0; opacity:0;}
  }
  /* diamond ornaments, cut straight out of the hero artwork */
  .logo-mark .gem{
    position:absolute; z-index:0; pointer-events:none;
    filter:drop-shadow(0 0 6px rgba(52,232,160,.65));
    animation:gem-orbit 5.4s ease-in-out infinite;
  }
  .logo-mark .gem-a{top:-8px; right:-10px; width:17px; filter:drop-shadow(0 0 7px rgba(168,85,247,.7));}
  .logo-mark .gem-b{bottom:-10px; left:-12px; width:15px; animation-duration:6.6s; animation-delay:-2.2s;}
  .logo-mark .gem-c{top:44%; right:-16px; width:11px; animation-duration:4.8s; animation-delay:-3.4s;}
  @keyframes gem-orbit{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(.9); opacity:.7;}
    50%{transform:translate3d(0,-6px,0) rotate(10deg) scale(1.08); opacity:1;}
  }
  .nav-links{display:flex; gap:30px; list-style:none; margin:0; padding:0;}
  .nav-links a{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:14.5px;
    color:var(--muted); position:relative; padding-bottom:4px;
  }
  .nav-links a.active, .nav-links a:hover{ color:var(--green); }
  .nav-links a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
    background:linear-gradient(90deg,var(--green),var(--purple));
  }
  .nav-right{display:flex; align-items:center; gap:14px;}
  .icon-btn{
    width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:var(--muted); cursor:pointer;
  }
  .icon-btn:hover{border-color:var(--green); color:var(--green);}

  /* ---------- Hero ---------- */
  .hero{ padding:78px 0 40px; position:relative; overflow:hidden;}
  .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--green); font-family:'Chakra Petch',sans-serif; font-weight:600;
    font-size:13px; letter-spacing:.12em; margin-bottom:18px;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--green); display:inline-block;}
  .hero h1{
    font-size:56px; font-weight:700; line-height:1.03; margin-bottom:20px;
  }
  .hero h1 .grad{
    background:linear-gradient(120deg, var(--green) 10%, var(--purple) 90%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero h1 .h1-sub{
    display:block; margin-top:8px; text-transform:uppercase;
    font-size:.55em; line-height:1.15; letter-spacing:.01em; color:var(--ink);
  }
  .hero p.lead{ color:var(--muted); font-size:17px; max-width:480px; margin-bottom:30px;}
  .hero-cta{display:flex; gap:14px; margin-bottom:40px;}
  .stat-row{display:flex; gap:34px; flex-wrap:wrap;}
  .stat{display:flex; align-items:center; gap:10px;}
  .stat b{display:block; font-family:'Chakra Petch',sans-serif; font-size:15px;}
  .stat span{display:block; color:var(--muted); font-size:12.5px;}
  .stat-icon{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;}
  .stat-icon img{width:100%; height:100%; object-fit:contain; display:block;}
  /* the members mark is a filled tile, so it reads heavier than the gift/shield glyphs */
  .stat-icon img[src$="icon-members.png"]{width:33px; height:33px;}
  .stat-icon img[src$="icon-trust.png"]{width:35px; height:35px;}

  .hero-art{ position:relative; display:flex; justify-content:center; padding-bottom:104px; }
  /* the hero shows the same living logo, scaled up: the mark floats as one piece
     (wrapper, not the image) so the masked shine stays glued to the pixels */
  .hero-logo{
    position:relative; display:inline-flex; justify-content:center;
    /* entrance first, then the endless float; the flash sits on the wrapper so
       the mark + shine + diamonds bloom together */
    animation:
      logo-drop .85s cubic-bezier(.2,.85,.25,1.12) both,
      float 6s ease-in-out 1.7s infinite,
      hero-flash .95s ease-out .4s both;
  }
  .hero-art .hero-gem{
    width:300px; position:relative; z-index:1;
    filter:drop-shadow(0 24px 46px rgba(168,85,247,.4));
    animation:logo-glow 3.6s ease-in-out infinite;
  }
  /* the burst that pops the moment the mark lands */
  .hero-logo-flash{
    position:absolute; inset:-14% -12%; z-index:0; border-radius:50%; pointer-events:none; opacity:0;
    background:radial-gradient(circle, rgba(255,255,255,.9), rgba(52,232,160,.55) 32%, rgba(168,85,247,.3) 54%, transparent 72%);
    animation:logo-flash .95s ease-out .4s both;
  }
  @keyframes logo-drop{
    0%{ transform:translateY(-46px) scale(.82); opacity:0; }
    55%{ opacity:1; }
    100%{ transform:translateY(0) scale(1); opacity:1; }
  }
  @keyframes hero-flash{
    0%{ filter:brightness(1); }
    20%{ filter:brightness(2.05) saturate(1.2); }
    100%{ filter:brightness(1); }
  }
  @keyframes logo-flash{
    0%{ opacity:0; transform:scale(.5); }
    32%{ opacity:.95; }
    100%{ opacity:0; transform:scale(1.55); }
  }
  .hero-logo .orn{ position:absolute; z-index:0; pointer-events:none; }
  .hero-logo .orn-purple{ filter:drop-shadow(0 10px 24px rgba(168,85,247,.6)); }
  .hero-logo .orn-green{ filter:drop-shadow(0 10px 24px rgba(52,232,160,.55)); }
  /* each diamond pops in on its own beat, then hands over to orn-drift — whose
     0% frame is identical to orn-pop's last one, so the switch is invisible */
  .hero-logo .o1{ width:112px; right:-76px; top:-30px; --dx:8px; --dy:-14px; --rot:12deg;
    animation:orn-pop .62s cubic-bezier(.2,.9,.25,1.38) .7s both, orn-drift 8s ease-in-out 1.3s infinite; }
  .hero-logo .o2{ width:96px; left:-84px; top:28%; --dx:-7px; --dy:12px; --rot:-14deg;
    animation:orn-pop .62s cubic-bezier(.2,.9,.25,1.38) .92s both, orn-drift 9.6s ease-in-out 1.52s infinite; }
  /* kept clear of the mark's "zz" corner and of the promo-code card below it */
  .hero-logo .o3{ width:72px; right:-70px; top:40%; --dx:6px; --dy:10px; --rot:-10deg;
    animation:orn-pop .62s cubic-bezier(.2,.9,.25,1.38) 1.14s both, orn-drift 7.4s ease-in-out 1.74s infinite; }
  .hero-logo .o4{ width:64px; left:-46px; bottom:16%; --dx:-6px; --dy:-10px; --rot:16deg;
    animation:orn-pop .62s cubic-bezier(.2,.9,.25,1.38) 1.36s both, orn-drift 8.8s ease-in-out 1.96s infinite; }
  .hero-logo .o5{ width:50px; left:-40px; top:-4px; --dx:5px; --dy:9px; --rot:9deg;
    animation:orn-pop .62s cubic-bezier(.2,.9,.25,1.38) 1.58s both, orn-drift 6.8s ease-in-out 2.18s infinite; }
  @keyframes orn-pop{
    0%{ transform:translate3d(0,12px,0) rotate(-20deg) scale(.35); opacity:0; }
    60%{ opacity:1; }
    100%{ transform:translate3d(0,0,0) rotate(0deg) scale(.96); opacity:1; }
  }
  @keyframes orn-drift{
    0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(.96); }
    50%{ transform:translate3d(var(--dx, 6px), var(--dy, -12px), 0) rotate(var(--rot, 10deg)) scale(1.04); }
  }
  .hero-art .glow{
    position:absolute; inset:0; margin:auto; width:540px; height:540px; border-radius:50%;
    background:radial-gradient(circle, rgba(52,232,160,.32), rgba(168,85,247,.24) 52%, transparent 74%);
    filter:blur(10px); z-index:-1;
  }
  .hero-tagline{
    position:absolute; left:0; bottom:30px; width:158px; height:auto;
    filter:drop-shadow(0 8px 20px rgba(52,232,160,.35));
  }

  /* promo code card, floating in the hero's lower-right corner */
  .code-card{
    position:absolute; right:0; bottom:0;
    display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:16px 18px; border-radius:14px;
    background:linear-gradient(135deg, rgba(52,232,160,.10), rgba(168,85,247,.10)), rgba(10,14,12,.92);
    border:1px solid rgba(52,232,160,.35); backdrop-filter:blur(10px);
    box-shadow:0 26px 54px -32px rgba(52,232,160,.7);
  }
  .code-card-kicker{
    font-family:'Chakra Petch',sans-serif; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
  }
  .code-card-main{display:flex; align-items:center; gap:12px; padding:2px 0;}
  .code-card-main b{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:24px; color:var(--green);}
  .code-copy{
    width:36px; height:36px; flex:none; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.5); border:1px solid rgba(52,232,160,.45); color:var(--green);
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
  }
  .code-copy:hover{background:rgba(52,232,160,.18); transform:translateY(-1px);}
  .code-copy svg{width:17px; height:17px; fill:currentColor;}
  .code-copy .icon-check{display:none;}
  .code-copy.is-copied{border-color:var(--green); background:rgba(52,232,160,.28);}
  .code-copy.is-copied .icon-copy{display:none;}
  .code-copy.is-copied .icon-check{display:block;}
  @keyframes float{ 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-14px);} }

  /* ---------- Perks strip (below the hero) ---------- */
  .perks-strip{
    margin:6px 0 34px; padding:18px 26px;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:44px;
    background:linear-gradient(120deg, rgba(52,232,160,.08), rgba(168,85,247,.08));
    border:1px solid var(--line); border-radius:16px;
  }
  .perk{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted);}
  .perk img{width:22px; height:22px;}

  /* ---------- Section heading ---------- */
  .section{padding:64px 0;}
  .section-head{
    display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:20px; flex-wrap:wrap;
  }
  .section-head h2{font-size:32px; font-weight:700;}
  .section-head p{color:var(--muted); font-size:14.5px; margin-top:6px;}
  .view-all{font-family:'Chakra Petch',sans-serif; font-weight:600; color:var(--green); font-size:14px;}

  /* ---------- Promotions ---------- */
  .promo-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
  .promo-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:0;
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
    transition:border-color .2s ease, transform .2s ease;
  }
  .promo-card:hover{ border-color:var(--green); transform:translateY(-4px); }
  /* the poster art IS the card; cards are 5:7 to match the artwork */
  .promo-card img.art{ width:100%; aspect-ratio:5/7; object-fit:cover; display:block; }
  .promo-card .btn{ margin:14px; width:auto; }

  /* ---------- Leaderboard ---------- */
  .lb-layout{ display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:start;}

  /* head: title | period tabs | countdown, all on one line */
  .lb-head{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:36px; }
  .lb-title{margin-right:auto;}
  .lb-title h2, .social-head h2, .journal-head h2{font-size:30px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
  .lb-title p, .social-head p, .journal-head p{color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px;}

  .lb-tabs{ display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--panel); border:1px solid var(--line); }
  .lb-tab{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13px; color:var(--muted);
    background:none; border:none; cursor:pointer; padding:7px 18px; border-radius:999px;
    transition:color .2s ease, background .2s ease;
  }
  .lb-tab:hover{color:var(--ink);}
  .lb-tab.is-active{ background:linear-gradient(135deg,var(--green) 0%, var(--green-deep) 100%); color:#04140c; }

  .lb-timer{display:flex; align-items:center; gap:12px;}
  .lb-timer-label{ font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:12.5px; color:var(--green); letter-spacing:.06em; }
  .lb-clock{ display:flex; align-items:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 15px; }
  .clock-unit{display:flex; flex-direction:column; align-items:center;}
  .clock-unit b{ font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:16px; color:var(--green); line-height:1; }
  .clock-unit i{ font-style:normal; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
  .clock-sep{color:var(--muted); font-weight:700; font-size:13px;}

  .podium{display:flex; align-items:flex-end; justify-content:center; gap:18px; margin-bottom:10px;}
  .pod-card{
    position:relative; overflow:hidden; aspect-ratio:2/3;
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:16px 14px; text-align:center; width:168px;
    display:flex; flex-direction:column; justify-content:flex-end;
  }
  /* medal art fills the card, the name/prize sit on top of it.
     Kept a touch high so the crown stays visible while the scrim clears room for the text. */
  .pod-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .pod-card::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,10,8,0) 46%, rgba(6,10,8,.78) 70%, rgba(6,10,8,.97) 100%);
  }
  .pod-card .name, .pod-card .prize{ position:relative; z-index:2; text-shadow:0 1px 8px rgba(0,0,0,.75); }
  /* masked names can be long ("P*************"), so let them wrap inside the card */
  .pod-card .name{font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13.5px; line-height:1.3; word-break:break-word;}
  .pod-card .prize{color:var(--green); font-weight:800; font-size:17px; margin-top:4px;}
  /* the winner card stands taller, keeping the podium shape */
  .pod-1{ order:2; aspect-ratio:.6; border-color: rgba(242,183,5,.5); box-shadow:0 0 0 1px rgba(242,183,5,.15), 0 20px 40px -20px rgba(242,183,5,.4);}
  .pod-1 .prize{color:#f5c451;}
  .pod-2{ order:1; border-color: rgba(125,211,252,.32); }
  .pod-3{ order:3; border-color: rgba(255,154,92,.32); }
  .pod-3 .prize{color:#ff9a5c;}

  table.lb-table{ width:100%; border-collapse:collapse; font-size:13.5px;}
  table.lb-table th{
    text-align:left; color:var(--muted); font-weight:600; font-size:11.5px;
    letter-spacing:.06em; padding:10px 12px; border-bottom:1px solid var(--line);
  }
  table.lb-table td{ padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.04); }
  table.lb-table td:last-child{ color:var(--green); font-weight:700; text-align:right;}
  table.lb-table td:first-child{color:var(--muted);}

  /* table column: rows + a right-aligned CTA */
  .lb-right{display:flex; flex-direction:column; align-items:flex-end; width:100%;}
  .lb-cta{margin-top:18px;}
  .lb-note{ margin-top:14px; color:var(--muted); font-size:11.5px; line-height:1.6; text-align:right; }

  /* the list scrolls, so a full campaign does not stretch the section */
  .lb-scroll{
    width:100%; max-height:318px; overflow-y:auto; overscroll-behavior:contain;
    padding-right:6px; scrollbar-width:thin; scrollbar-color:rgba(52,232,160,.35) transparent;
  }
  .lb-scroll thead th{ position:sticky; top:0; z-index:2; background:var(--panel); }
  .lb-scroll::-webkit-scrollbar{width:8px;}
  .lb-scroll::-webkit-scrollbar-thumb{ background:rgba(52,232,160,.28); border-radius:99px; }
  .lb-scroll::-webkit-scrollbar-track{background:transparent;}

  .p-name{display:inline-flex; align-items:center; gap:10px;}
  .p-ico{
    width:18px; height:18px; border-radius:5px; flex:none; display:inline-block;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(135deg, var(--ico-a,#7dd3fc), var(--ico-b,#2563eb));
  }
  /* the dot colour cycles all the way down the list, not just the first six rows */
  .lb-table tbody tr:nth-child(6n+1) .p-ico{--ico-a:#7dd3fc; --ico-b:#2563eb;}
  .lb-table tbody tr:nth-child(6n+2) .p-ico{--ico-a:#34e8a0; --ico-b:#0f9d63;}
  .lb-table tbody tr:nth-child(6n+3) .p-ico{--ico-a:#e879f9; --ico-b:#9333ea;}
  .lb-table tbody tr:nth-child(6n+4) .p-ico{--ico-a:#fca5a5; --ico-b:#dc2626;}
  .lb-table tbody tr:nth-child(6n+5) .p-ico{--ico-a:#fde047; --ico-b:#f59e0b;}
  .lb-table tbody tr:nth-child(6n+6) .p-ico{--ico-a:#a5b4fc; --ico-b:#4f46e5;}

  /* ---------- Socials ---------- */
  .social-head{margin-bottom:32px;}
  .social-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  /* each card is tinted by its brand colour */
  .social-card{
    --brand:52,232,160;
    background:
      radial-gradient(130% 150% at 0% 50%, rgba(var(--brand),.18), transparent 62%),
      var(--panel);
    border:1px solid rgba(var(--brand),.28); border-radius:16px; padding:20px;
    display:flex; align-items:center; gap:18px;
    transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .social-card:hover{
    transform:translateY(-4px); border-color:rgba(var(--brand),.55);
    box-shadow:0 20px 42px -26px rgba(var(--brand),.65);
  }
  .brand-youtube{--brand:255,64,64;}
  .brand-discord{--brand:114,137,218;}

  .social-card .icon-wrap{
    width:82px; height:82px; flex:none; border-radius:20px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(var(--brand),.14); border:1px solid rgba(var(--brand),.32);
    box-shadow:inset 0 0 26px -8px rgba(var(--brand),.55), 0 0 28px -12px rgba(var(--brand),.85);
  }
  .social-card .icon-wrap img{width:44px;}
  .social-body{display:flex; flex-direction:column; gap:6px; min-width:0;}
  .social-card h3{font-size:17px;}
  .social-card p{color:var(--muted); font-size:13px; line-height:1.45; margin:0;}
  .btn-brand{
    align-self:flex-start; margin-top:6px;
    background:rgba(var(--brand),.12); border-color:rgba(var(--brand),.45); color:rgb(var(--brand));
  }
  .btn-brand:hover{background:rgba(var(--brand),.22); border-color:rgb(var(--brand));}

  /* ---------- Journal ---------- */
  .journal-head{margin-bottom:32px; align-items:center;}
  .journal-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; align-items:stretch;}
  .j-card{
    background:var(--panel); border:1px solid var(--line); border-radius:16px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:border-color .2s ease, transform .2s ease;
  }
  .j-card:hover{border-color:rgba(52,232,160,.45); transform:translateY(-4px);}

  /* artwork sits whole inside the thumb (never cropped) with the category pill on it */
  .j-thumb{
    position:relative; aspect-ratio:4/5; overflow:hidden;
    background:radial-gradient(circle at 50% 42%, rgba(52,232,160,.10), rgba(0,0,0,.40) 72%);
  }
  .j-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
  /* posts without artwork fall back to their emoji */
  .j-thumb .j-emoji{position:absolute; inset:0; display:grid; place-items:center; font-size:44px;}
  .j-thumb::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(6,10,8,.5), rgba(6,10,8,0) 55%);
  }
  .j-cat{
    position:absolute; top:12px; left:12px; z-index:1;
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:10px;
    letter-spacing:.10em; text-transform:uppercase; color:var(--green);
    background:rgba(6,10,8,.72); border:1px solid rgba(52,232,160,.45);
    backdrop-filter:blur(6px); border-radius:6px; padding:4px 9px;
  }
  .j-card.feature .j-cat{color:var(--purple); border-color:rgba(168,85,247,.5);}

  .j-body{ padding:18px; display:flex; flex-direction:column; gap:9px; flex-grow:1;}
  .j-card h4{font-size:15.5px; line-height:1.3;}
  .j-card.feature h4{font-size:18px;}
  .j-desc{font-size:13px; color:var(--muted); line-height:1.5; margin:0;}
  .j-card.feature .j-desc{font-size:13.5px;}
  .j-meta{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); margin-top:auto;}
  .j-meta .read{margin-left:auto; color:var(--green); font-family:'Chakra Petch',sans-serif; font-weight:600;}
  .j-avatar{
    width:18px; height:18px; border-radius:50%; flex:none;
    background:conic-gradient(from 210deg, var(--green), var(--purple), var(--green));
    box-shadow:0 0 10px -2px rgba(52,232,160,.9);
  }

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line); padding:50px 0 30px; margin-top:20px;}
  .foot-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; margin-bottom:30px;}
  .foot-links{display:flex; gap:26px; list-style:none; padding:0; margin:0; flex-wrap:wrap;}
  .foot-links a{color:var(--muted); font-size:13.5px;}
  .foot-links a:hover{color:var(--green);}
  .foot-socials{display:flex; gap:10px;}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    padding-top:22px; border-top:1px solid rgba(255,255,255,.05);
    color:var(--muted); font-size:12.5px;
  }
  .foot-tagline{height:66px; width:auto; display:block;}

  /* ---------- Leaderboard: the full page (/leaderboard.html) ----------
     Same tokens and components as the homepage section: it has to read as one
     site, not a second design. Only what the extra room buys is new — the
     summary tiles, the share-of-campaign column and the rank badges. */
  .page-head{margin-bottom:30px;}
  .lb-back{
    display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
    color:var(--muted); font-size:13px; transition:color .2s ease;
  }
  .lb-back:hover{color:var(--green);}
  .page-head h1{font-size:40px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
  .page-head .lead{color:var(--muted); font-size:14.5px; margin-top:10px; max-width:680px;}

  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
  .chip{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:12px; letter-spacing:.06em;
    color:var(--green); background:rgba(52,232,160,.08);
    border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  }
  .chip.is-purple{color:var(--purple); background:rgba(168,85,247,.10); border-color:rgba(168,85,247,.28);}

  .lb-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:36px;}
  .lb-stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px;}
  .lb-stat b{
    display:block; font-family:'Chakra Petch',sans-serif; font-weight:700;
    font-size:26px; line-height:1.1; color:var(--green);
  }
  .lb-stat.cool b{color:var(--purple);}
  .lb-stat span{display:block; margin-top:7px; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase;}

  .lb-podium-wrap{
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    padding:26px 22px 22px; margin-bottom:34px;
  }
  .lb-podium-wrap .podium{margin-bottom:0;}
  .lb-podium-label{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); text-align:center; margin-bottom:20px;
  }

  /* the full table sits in a panel so 44 rows read as one block, not a page of stripes */
  .lb-panel{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:6px 22px 18px;}
  .lb-panel-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:16px 0 14px; border-bottom:1px solid var(--line);
  }
  .lb-panel-head h3{font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
  .lb-panel-head p{color:var(--muted); font-size:11.5px;}

  /* wide variant: a money column, the share of the campaign, and a rank badge */
  table.lb-table.lb-wide th:nth-child(3), table.lb-table.lb-wide th:nth-child(4){text-align:right;}
  table.lb-table.lb-wide td{padding:13px 12px;}
  table.lb-table td.lb-rank{width:56px;}
  table.lb-table td.lb-rank.medal-1{color:var(--gold); font-weight:800;}
  table.lb-table td.lb-rank.medal-2{color:#cfd8e3; font-weight:800;}
  table.lb-table td.lb-rank.medal-3{color:#ff9a5c; font-weight:800;}
  table.lb-table td.lb-money{color:var(--ink); font-weight:700; text-align:right; white-space:nowrap;}
  .lb-sub{display:block; margin-top:3px; color:var(--muted); font-weight:500; font-size:11px;}
  .lb-sub .lb-lead{color:var(--gold);}
  table.lb-table td.lb-share{text-align:right; white-space:nowrap;}
  .share-bar{
    display:inline-block; width:110px; height:6px; margin-right:10px; border-radius:99px;
    background:rgba(255,255,255,.07); overflow:hidden; vertical-align:middle;
  }
  .share-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--green), var(--green-deep));}
  table.lb-table td.lb-share b{color:var(--green); font-size:12.5px; font-variant-numeric:tabular-nums;}

  .lb-foot{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:26px;}
  .lb-foot .lb-note{text-align:left; margin:0; max-width:600px;}

  /* ---------- Challenges page (/challenges) ----------
     Posters are never cropped, here either: the art keeps its 5:7 ratio and the
     copy sits under it, exactly as on the homepage cards. */
  .promo-grid.cards-3{grid-template-columns:repeat(3, 1fr);}
  .promo-body{padding:16px 18px 0;}
  .promo-body h3{font-size:18px; font-weight:700;}
  .promo-body p{color:var(--muted); font-size:13.5px; margin:8px 0 0;}
  .promo-grid.cards-3 .promo-card .btn{margin:16px 18px 18px;}

  /* three steps: how a visitor goes from nothing to a claim */
  .steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:34px;}
  .step{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
  .step-n{
    display:inline-grid; place-items:center; width:28px; height:28px; margin-bottom:12px; border-radius:9px;
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:13px; color:#04140c;
    background:linear-gradient(135deg, var(--green), var(--green-deep));
  }
  .step h3{font-size:16px; font-weight:700;}
  .step p{color:var(--muted); font-size:13.5px; margin:6px 0 0;}

  .page-cta{
    margin-top:34px; padding:24px 28px; border-radius:16px;
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
    background:linear-gradient(120deg, rgba(52,232,160,.10), rgba(168,85,247,.10));
    border:1px solid var(--line);
  }
  .page-cta h3{font-size:20px; font-weight:700;}
  .page-cta p{color:var(--muted); font-size:13.5px; margin-top:6px;}

  @media (max-width: 760px){
    .promo-grid.cards-3{grid-template-columns:1fr;}
    .steps{grid-template-columns:1fr;}
    .page-cta{padding:20px;}
    .lb-stats{grid-template-columns:1fr 1fr;}
    .page-head h1{font-size:30px;}
    .lb-podium-wrap{padding:20px 14px 16px;}
    .lb-panel{padding:4px 14px 14px;}
    /* 44 rows x 4 columns will not fit a phone: the bar goes, the % stays */
    .lb-wide th:nth-child(4), .lb-wide td:nth-child(4){display:none;}
    table.lb-table.lb-wide td{padding:11px 8px;}
    .lb-stat b{font-size:22px;}
  }

  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-cta, .stat-row{justify-content:center;}
    .hero-art{order:-1;}
    .promo-grid{grid-template-columns:repeat(2,1fr);}
    .lb-layout{grid-template-columns:1fr;}
    .social-grid{grid-template-columns:1fr;}
    .journal-grid{grid-template-columns:1fr 1fr;}
    .nav-links{display:none;}
  }
  @media (max-width: 520px){
    .hero{padding:56px 0 28px;}
    .hero h1{font-size:38px;}
    .wrap{padding:0 18px;}
    .hero-cta{flex-direction:column; align-items:stretch;}
    .perks-strip{gap:16px 22px; padding:16px;}
    .stat-row{gap:18px;}

    /* stack the hero extras so nothing runs off a narrow screen */
    .hero-art{padding-bottom:0;}
    .hero-art .hero-gem{width:280px;}
    .hero-art .glow{width:400px; height:400px;}
    .hero-logo .o1{width:72px; right:-38px; top:-16px;}
    .hero-logo .o2{width:62px; left:-44px;}
    .hero-logo .o3{width:50px; right:-32px;}
    .hero-logo .o4{width:42px; left:-30px;}
    .hero-logo .o5{display:none;}
    /* thin the floating background out on a phone */
    .bg-float i:nth-child(n+7){display:none;}
    .bg-float i{--s:30px !important;}
    .hero-tagline{position:static; width:150px; margin:14px auto 0;}
    .code-card{position:static; margin:16px auto 0; align-items:center; text-align:center;}
    .code-card-main{justify-content:center;}

    /* keep the three podium cards inside a 360px screen */
    .podium{width:100%; gap:10px;}
    .pod-card{width:auto; flex:1 1 0; min-width:0; padding:12px 9px;}
    .pod-card .name{font-size:12.5px;}
    .pod-card .prize{font-size:14.5px;}
    .lb-head{gap:14px;}
    .lb-tabs{width:100%; justify-content:space-between;}
    .lb-tab{flex:1; padding:7px 10px;}
    .lb-right{width:100%; align-items:stretch;}
    .lb-cta{width:100%;}
    table.lb-table th, table.lb-table td{padding:10px 6px;}

    /* keep the logo ornaments from crowding a phone header */
    .logo-mark .gem-a{width:14px; right:-8px;}
    .logo-mark .gem-b{width:12px; left:-10px;}
    .logo-mark .gem-c{display:none;}
  }

  @media (prefers-reduced-motion: reduce){
    .logo-mark .logo, .logo-mark .gem{animation:none;}
    .logo-shine, .hero-logo-shine{animation:none; opacity:0;}
    .hero-logo, .hero-logo .orn, .hero-art .hero-gem{animation:none;}
    .hero-logo-flash{animation:none; opacity:0;}
    .bg-float{display:none;}
    .loader-ring{animation:none;}
    .loader-logo{animation:none;}
  }