:root { --black:#000; --yellow:#FFFF18; --arc:#FFFF00; --white:#fff; }
    /* Ensure Clash Display is used everywhere it should be */
    .hero-l1,.hero-l2,.hero-l3,.hero-badge,.hero-tagline,
    .nav-logo,.sec-title,.prin-title,.bottom-jullow,
    .div-tag,.nl-title,.nl-btn,.bottom-col-title,
    .bottom-eu-label,.bottom-privacy,.policies-title{
      font-family:'Clash Display',sans-serif;
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;overflow-x:clip;}
    body{background:var(--black);color:var(--white);font-family:'Inter',sans-serif;}
    body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity:.5}

    /* ── NAV ── */
    nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:20px 52px;
      display:flex;justify-content:center;align-items:center;
      background:rgba(0,0,0,0.92);
      border-bottom:1px solid rgba(255,255,255,.04);
      backdrop-filter:blur(8px);
    }
    .nav-logo{font-family:'Clash Display',sans-serif;font-weight:700;font-size:18px;
      color:var(--yellow);letter-spacing:.12em;text-decoration:none}
    .nav-links{display:none}

    /* ════════════════════════════════════
       HERO — Pure Black
    ════════════════════════════════════ */
    #hero{
      position:relative;width:100%;height:100vh;
      overflow:hidden;display:flex;
      flex-direction:column;align-items:center;justify-content:center;
      background:#000000;
    }

    /* ── Hero text ── */
    .hero-content{
      position:relative;z-index:10;
      display:flex;flex-direction:column;align-items:center;
      text-align:center;
      pointer-events:none;
      gap:0;
    }

    /* EST badge — extra top padding on mobile */
    .hero-badge{
      font-size:10px;font-weight:600;
      color:#FFFF18;
      letter-spacing:.32em;text-transform:uppercase;
      margin-bottom:36px;
      padding-top:clamp(60px, 12vh, 100px);
      opacity:0;animation:hFadeUp .9s ease forwards;animation-delay:.2s;
    }

    /* "Built on a" — Relief layer 1: smaller, slightly dimmer */
    .hero-l1{
      font-family:'Clash Display',sans-serif;font-weight:700;
      font-size:clamp(32px,5.5vw,76px);
      color:rgba(255,255,255,0.75);
      letter-spacing:.01em;line-height:1.05;
      margin-bottom:2px;
      opacity:0;animation:hFadeUp 1s ease forwards;animation-delay:.7s;
    }

    /* "different" — wrap for BIG glow behind, covering all three slogan lines */
    .hero-l2-wrap{
      position:relative;margin-bottom:2px;
    }
    .hero-l2-wrap::before{
      content:'';position:absolute;
      left:50%;top:50%;transform:translate(-50%,-50%);
      /* Wide enough to bleed behind "Built on a" and "belief." */
      width:130%;height:420%;
      background:radial-gradient(ellipse 70% 55% at 50% 50%,
        rgba(255,255,24,0.22) 0%,
        rgba(255,255,24,0.12) 25%,
        rgba(255,255,24,0.05) 50%,
        rgba(255,255,24,0.01) 70%,
        transparent 85%);
      filter:blur(38px);
      z-index:0;pointer-events:none;
      animation:heroGlowPulse 3.8s ease-in-out infinite;
    }
    @keyframes heroGlowPulse{
      0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1); }
      50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.06); }
    }
    .hero-l2{
      font-family:'Clash Display',sans-serif;font-weight:700;
      font-size:clamp(80px,16vw,210px);
      color:#FFFF18;
      letter-spacing:-.02em;line-height:.88;
      position:relative;z-index:1;
      opacity:0;
      animation:hDiffReveal 1.3s cubic-bezier(0.15,0,0.1,1) forwards;
      animation-delay:1.55s;
    }

    /* "belief." */
    .hero-l3{
      font-family:'Clash Display',sans-serif;font-weight:700;
      font-size:clamp(32px,5.5vw,76px);
      color:rgba(255,255,255,0.7);
      letter-spacing:.01em;line-height:1.05;
      margin-bottom:40px;
      opacity:0;animation:hFadeUp 1s ease forwards;animation-delay:2.7s;
    }

    /* Subtitle */
    .hero-bracket-wrap{
      margin-bottom:28px;
      opacity:0;animation:hFadeUp .9s ease forwards;animation-delay:3.3s;
    }
    .hero-sub{
      font-size:clamp(13px,1.3vw,15px);font-weight:400;
      color:rgba(255,255,255,.32);
      max-width:460px;line-height:1.82;
      letter-spacing:.01em;
    }

    /* Tagline — full yellow, sharp */
    .hero-tagline{
      font-size:11px;font-weight:600;
      color:#FFFF18;
      letter-spacing:.28em;text-transform:uppercase;
      opacity:0;animation:hFadeUp .8s ease forwards;animation-delay:3.9s;
    }

    /* Animations */
    @keyframes hFadeUp{
      from{opacity:0;transform:translateY(20px)}
      to{opacity:1;transform:translateY(0)}
    }
    @keyframes hDiffReveal{
      0%  {opacity:0;transform:translateY(24px) scale(.96);filter:blur(8px);}
      30% {opacity:1;filter:blur(1px);}
      100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
    }

    /* ── DIVIDER ── */
    .divider{width:100%;height:1px;background:linear-gradient(to right,transparent 0%,rgba(255,255,24,.12) 40%,rgba(255,255,24,.12) 60%,transparent 100%)}

    /* ── SHARED ── */
    .sec-wrap{padding:88px 24px;overflow:visible}
    .sec-inner{max-width:1160px;margin:0 auto;overflow:visible}
    .sec-label{font-size:11px;font-weight:600;color:var(--yellow);letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;text-align:center}
    .sec-title{font-family:'Clash Display',sans-serif;font-weight:700;font-size:clamp(28px,4vw,50px);line-height:1.06;text-align:center;margin-bottom:52px}

    /* ── ECOSYSTEM ── */
    .division{margin-bottom:0}
    .division+.division{
      margin-top:0;
      /* Fading yellow line matching the main divider */
      border-top:none;
      position:relative;
    }
    .division+.division::before{
      content:'';
      display:block;
      height:1px;
      background:linear-gradient(to right,transparent 0%,rgba(255,255,24,.18) 30%,rgba(255,255,24,.18) 70%,transparent 100%);
    }
    /* More breathing room around the yellow separator */
    .div-header{
      display:flex;justify-content:center;align-items:center;
      padding:38px 0;cursor:pointer;user-select:none;
      text-align:center;
    }
    .div-header:hover .div-tag{color:#fff}
    .div-header-left{text-align:center}
    .div-tag{font-size:10px;font-weight:600;color:var(--yellow);letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;transition:color .25s}
    .div-sub{font-size:13px;color:rgba(255,255,255,.3);margin-top:2px}
    .div-chevron{display:none;}

    /* Collapsible body */
    .div-body{
      overflow:hidden;
      max-height:0;
      transition:max-height .45s cubic-bezier(0.4,0,0.2,1), opacity .35s ease;
      opacity:0;
    }
    .division.open .div-body{
      max-height:700px;
      opacity:1;
    }

    /* ── PEEK CAROUSEL ── */
    :root { --peek: 14px; --card-gap: 20px; }

    .carousel-outer{
      overflow:hidden;
      width:100%;
      max-width:680px;
      margin:0 auto;
      position:relative;
    }
    /* Multi-card track: side padding = peek, so neighbours show equally */
    .carousel-track{
      display:flex;
      flex-wrap:nowrap;
      gap:var(--card-gap);
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      /* Left & right padding = peek amount so first/last card center */
      padding:8px var(--peek) 20px;
    }
    .carousel-track::-webkit-scrollbar{display:none}
    /* Single card: just center it, no peek needed */
    .carousel-track.single{
      justify-content:center;
      padding:8px var(--peek) 20px;
    }

    /* Every card: mobile = full width minus peeks, desktop = capped */
    .brand-card{
      flex:0 0 min(calc(100% - calc(var(--peek) * 2) - var(--card-gap)), 400px);
      flex-shrink:0;
      min-width:0;
      scroll-snap-align:center;
      position:relative;
      background:#000;
      border:none;
      border-radius:22px;
      padding:28px 24px 22px;
      display:flex;flex-direction:column;
      min-height:200px;
      box-sizing:border-box;
    }
    .badge-wrap{margin-top:auto;padding-top:16px;text-align:center;}
    @property --ba {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes borderSpin { to { --ba: 360deg; } }

    .brand-card::before{
      content:'';
      position:absolute;inset:-1.5px;
      border-radius:23.5px;
      z-index:-1;
    }
    /* Default (no brand class) */
    .brand-card:not([class*="bc-"])::before{
      background:rgba(255,255,255,0.3);
    }

    /* Stargurls — yellow + blue spinning */
    .bc-stargurls::before{
      background:conic-gradient(from var(--ba),#FFFF18 0%,#1a5aff 30%,#88bbff 50%,#1a5aff 70%,#FFFF18 100%);
      animation:borderSpin 4s linear infinite;
    }
    /* AniTreasure — warm yellow spinning */
    .bc-anitreasure::before{
      background:conic-gradient(from var(--ba),#FFEE00 0%,#b37d00 35%,#fff099 58%,#b37d00 78%,#FFEE00 100%);
      animation:borderSpin 5s linear infinite;
    }
    /* Worltra — cyan blue spinning */
    .bc-worltra::before{
      background:conic-gradient(from var(--ba),#00e5ff 0%,#004d6b 35%,#7fffff 56%,#004d6b 78%,#00e5ff 100%);
      animation:borderSpin 4.5s linear infinite;
    }
    /* Synnero — purple spinning */
    .bc-synnero::before{
      background:conic-gradient(from var(--ba),#855bdd 0%,#2a0a6e 35%,#c8a8ff 56%,#2a0a6e 78%,#855bdd 100%);
      animation:borderSpin 5s linear infinite;
    }
    /* Vigkan — green spinning */
    .bc-vigkan::before{
      background:conic-gradient(from var(--ba),#00ff00 0%,#004400 35%,#88ff88 56%,#004400 78%,#00ff00 100%);
      animation:borderSpin 4.5s linear infinite;
    }
    /* JID — yellow spinning */
    .bc-jid::before{
      background:conic-gradient(from var(--ba),#FFFF18 0%,#887700 35%,#ffffa0 58%,#887700 78%,#FFFF18 100%);
      animation:borderSpin 4s linear infinite;
    }
    /* OPRA — yellow spinning */
    .bc-opra::before{
      background:conic-gradient(from var(--ba),#FFFF18 0%,#887700 35%,#ffffa0 58%,#887700 78%,#FFFF18 100%);
      animation:borderSpin 4s linear infinite;
    }
    /* Aija — white spinning */
    .bc-aija::before{
      background:conic-gradient(from var(--ba),#ffffff 0%,#444444 35%,#ffffff 58%,#444444 80%,#ffffff 100%);
      animation:borderSpin 5s linear infinite;
    }
    .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
    .card-name{font-family:'Inter',sans-serif;font-weight:600;font-size:20px;color:var(--white)}
    .badge{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;display:block;margin-top:18px;text-align:center;width:fit-content;margin-left:auto;margin-right:auto;}
    .b-live{background:rgba(0,204,80,.11);color:#00CC50;border:1px solid rgba(0,204,80,.22)}
    .b-dev{background:rgba(255,255,24,.08);color:#FFFF18;border:1px solid rgba(255,255,24,.18)}
    .b-soon{background:rgba(255,255,255,.04);color:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.08)}
    /* Brand-colored badge variants */
    .b-dev-cyan{background:rgba(0,229,255,.08);color:#00e5ff;border:1px solid rgba(0,229,255,.25)}
    .b-soon-purple{background:rgba(133,91,221,.1);color:#855bdd;border:1px solid rgba(133,91,221,.3)}
    .b-soon-green{background:rgba(0,255,0,.07);color:#00ff00;border:1px solid rgba(0,255,0,.25)}
    .b-dev-yellow{background:rgba(255,255,24,.08);color:#FFFF18;border:1px solid rgba(255,255,24,.18)}
    .card-desc{font-size:13px;line-height:1.72;color:rgba(255,255,255,.42);margin-bottom:4px}
    .card-link{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
      color:#FFFF18;text-decoration:none;opacity:.65;transition:opacity .3s,gap .3s;letter-spacing:.04em;margin-top:14px}
    .card-link:hover{opacity:1;gap:10px}
    .car-nav{display:none}
    .policies-wrap{padding:64px 24px;text-align:center}
    .policies-inner{max-width:680px;margin:0 auto}
    .policies-title{font-family:'Clash Display',sans-serif;font-weight:700;font-size:clamp(20px,2.5vw,28px);margin-bottom:10px}
    .policies-sub{font-size:13px;color:rgba(255,255,255,.32);line-height:1.7;margin-bottom:28px}
    .policies-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
    .pol-link{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;
      border:1px solid #FFFF18;border-radius:10px;font-size:13px;font-weight:500;
      color:#FFFF18;text-decoration:none;transition:opacity .3s}
    .pol-link:hover{opacity:.75}
    .pol-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

    /* ── PRINCIPLES — black bg, yellow border ── */
    .principles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:780px;margin:0 auto}
    @media(max-width:580px){.principles-grid{grid-template-columns:1fr}}
    .prin-card{
      border:1px solid #FFFF18;border-radius:24px;padding:28px 24px;
      background:#000;transition:box-shadow .4s;text-align:left;
    }
    .prin-card:hover{border-color:rgba(255,255,24,.6)}
    .prin-title{font-family:'Clash Display',sans-serif;font-weight:700;font-size:17px;color:#fff;margin-bottom:8px;text-align:center;}
    .prin-desc{font-size:13px;color:rgba(255,255,255,.42);line-height:1.7}

    /* ── NEWSLETTER ── */
    .newsletter-wrap{padding:72px 24px}
    .newsletter-inner{max-width:580px;margin:0 auto;text-align:center}
    .nl-label{font-size:11px;font-weight:600;color:var(--yellow);letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px}
    .nl-title{font-family:'Clash Display',sans-serif;font-weight:700;font-size:clamp(22px,3vw,36px);margin-bottom:12px}
    .nl-sub{font-size:14px;color:rgba(255,255,255,.36);line-height:1.7;margin-bottom:28px}
    .nl-form{display:flex;flex-direction:column;gap:12px;max-width:380px;margin:0 auto}
    .nl-input{width:100%;background:#000;border:1px solid #FFFF18;
      border-radius:16px;padding:14px 18px;font-size:14px;font-family:'Inter',sans-serif;
      color:var(--white);outline:none;transition:box-shadow .3s}
    .nl-input::placeholder{color:rgba(255,255,255,.28)}
    .nl-input:focus{border-color:rgba(255,255,24,.7)}
    .nl-input.error{border-color:#ff4444}
    .nl-btn{width:100%;background:#000;color:#FFFF18;border:1px solid #FFFF18;border-radius:16px;
      padding:14px 24px;font-size:14px;font-weight:700;font-family:'Clash Display',sans-serif;
      letter-spacing:.06em;cursor:not-allowed;transition:all .3s;opacity:.45}
    .nl-btn.ready{background:#FFFF18;color:#000;border-color:#FFFF18;cursor:pointer;opacity:1}
    .nl-btn.ready:hover{opacity:.88;transform:translateY(-1px)}
    .nl-btn.ready:hover{opacity:.88;transform:translateY(-1px)}
    .nl-legal{font-size:11px;color:rgba(255,255,255,.2);margin-top:16px;line-height:1.65;max-width:340px;margin-left:auto;margin-right:auto}

    /* ── BOTTOM ── */
    .bottom-sec{padding:80px 24px 0;text-align:center}
    .bottom-eu-label{font-size:11px;font-weight:600;color:#FFFF18;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
    .bottom-jullow{
      font-family:'Clash Display',sans-serif;font-weight:700;
      font-size:clamp(56px,10vw,110px);letter-spacing:.08em;
      margin-bottom:12px;line-height:1;
      color:#FFFF18;
      position:relative;display:inline-block;
    }
    .bottom-jullow::before{
      content:'';position:absolute;
      left:50%;top:50%;transform:translate(-50%,-50%);
      width:130%;height:220%;
      background:radial-gradient(ellipse at center,rgba(255,255,24,0.09) 0%,rgba(255,255,24,0.03) 50%,transparent 72%);
      filter:blur(28px);z-index:-1;pointer-events:none;
    }
    .bottom-privacy{font-size:11px;font-weight:600;color:#FFFF18;letter-spacing:.22em;text-transform:uppercase;margin-bottom:52px;opacity:1}

    .bottom-links-grid{
      display:grid;grid-template-columns:1fr 1fr 1fr;
      max-width:860px;margin:0 auto 0;
      border-top:none;
      position:relative;
      padding-top:52px;padding-bottom:52px;
      text-align:left;gap:0;
    }
    .bottom-links-grid::before{
      content:'';position:absolute;top:0;left:0;right:0;height:1px;
      background:linear-gradient(to right,transparent 0%,rgba(255,255,24,.15) 30%,rgba(255,255,24,.15) 70%,transparent 100%);
    }
    @media(max-width:640px){
      .bottom-links-grid{grid-template-columns:1fr;gap:40px;}
    }
    .bottom-col-title{
      font-family:'Clash Display',sans-serif;font-weight:700;font-size:13px;
      color:var(--white);letter-spacing:.08em;text-transform:uppercase;
      margin-bottom:26px;
    }
    .bottom-col ul{list-style:none;display:flex;flex-direction:column;gap:18px}
    .bottom-col a{font-size:15px;font-weight:500;color:rgba(255,255,255,.52);text-decoration:none;transition:color .3s}
    .bottom-col a:hover{color:var(--white)}
    .soon-tag{
      display:inline-block;font-size:9px;font-family:'Clash Display',sans-serif;
      font-weight:700;letter-spacing:.08em;
      background:#FFFF18;color:#000;
      padding:3px 8px;border-radius:4px;margin-left:10px;vertical-align:middle;
    }

    /* Footer copyright */
    footer{
      padding:20px 48px;text-align:center;
      position:relative;
    }
    footer::before{
      content:'';display:block;height:1px;
      background:linear-gradient(to right,transparent 0%,rgba(255,255,24,.15) 30%,rgba(255,255,24,.15) 70%,transparent 100%);
      margin-bottom:20px;
    }
    .footer-copy{font-size:12px;color:rgba(255,255,255,.18)}

    /* ── FADE IN ── */
    .fi{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
    .fi.show{opacity:1;transform:translateY(0)}

/* ── COOKIE BANNER ── */
#cookie-banner{
  position:fixed;bottom:0;left:0;right:0;
  z-index:9000;
  background:#000;
  border-top:1px solid rgba(255,255,24,.2);
  padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  transform:translateY(0);
  transition:transform .4s ease, opacity .4s ease;
  backdrop-filter:blur(8px);
}
#cookie-banner.hidden{
  transform:translateY(110%);
  opacity:0;
  pointer-events:none;
}
.cookie-text{
  font-size:13px;color:rgba(255,255,255,.55);
  line-height:1.55;flex:1;min-width:200px;
}
.cookie-text a{color:var(--yellow);text-decoration:none}
.cookie-text a:hover{text-decoration:underline}
.cookie-btn{
  font-family:'Clash Display',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.08em;
  background:var(--yellow);color:#000;border:none;
  border-radius:10px;padding:10px 20px;
  cursor:pointer;white-space:nowrap;
  transition:opacity .25s;flex-shrink:0;
}
.cookie-btn:hover{opacity:.85}