:root {
      --bg-primary:   #fdfcfc;
      --bg-elevated:  #f4f1fd;
      --bg-card:      rgba(255,255,255,0.72);
      --bg-card-alt:  rgba(248,246,255,0.88);
      --color-muted:  #c8c2de;
      --color-body:   #6b6584;
      --color-text:   #312d4b;
      --color-bright: #1a1626;
      --color-em:     #8f33e9;
      --color-em-dim: rgba(124,106,247,0.10);
      --color-vi:     #e8829a;
      --color-vi-dim: rgba(232,130,154,0.10);
      --color-am:     #5bb8d4;
      --color-am-dim: rgba(91,184,212,0.10);
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-sig: cubic-bezier(0.62, 0.16, 0.13, 1.01);
      --header-h: 64px;
    }
    @media(min-width:1024px){ :root{ --header-h:80px; } }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scrollbar-gutter:stable;scroll-padding-top:80px;}
    html.lenis,html.lenis body{height:auto;}
    .lenis.lenis-smooth{scroll-behavior:auto !important;}
    .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
    .lenis.lenis-stopped{overflow:hidden;}
    section[id]{scroll-margin-top:80px;}
    body{
      font-family:'Space Grotesk',system-ui,sans-serif;
      background:var(--bg-primary);
      color:var(--color-text);
      overflow-x:clip;
      -webkit-font-smoothing:antialiased;
    }
    ::-webkit-scrollbar{width:4px;}
    ::-webkit-scrollbar-track{background:#f0edf8;}
    ::-webkit-scrollbar-thumb{background:var(--color-muted);border-radius:99px;}

    .skip-link{
      position:absolute;left:50%;transform:translateX(-50%);
      background:#fff;color:var(--color-bright);font-weight:700;
      padding:.75rem .5rem;border-radius:.5rem;z-index:20;
      box-shadow:0 4px 16px rgba(124,106,247,.15);
    }
    .skip-link:not(:focus){clip-path:inset(50%);height:1px;overflow:hidden;white-space:nowrap;width:1px;}

    /* ── NOISE ───────────────────────────────── */
    .noise{
      position:fixed;top:-10rem;left:-10rem;
      width:calc(200% + 20rem);height:calc(200% + 20rem);
      pointer-events:none;z-index:9999;opacity:.018;
      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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
      animation:noiseAnim .5s steps(2) infinite;
    }
    @keyframes noiseAnim{
      0%{transform:translate(0,2rem)}25%{transform:translate(-3rem,-2rem)}
      50%{transform:translate(3rem,1rem)}75%{transform:translate(-2rem,3rem)}
      to{transform:translate(2rem,-1rem)}
    }

    .mono{font-family:'Space Mono',monospace;}

    /* ── SECTION LABEL ───────────────────────── */
    .section-label{
      display:inline-flex;flex-direction:column;gap:.75rem;
    }
    .section-label span{
      font-family:'Space Mono',monospace;
      font-size:.6875rem;letter-spacing:.25em;text-transform:uppercase;
      color:rgba(49,45,75,.32);
    }
    .section-label::after{
      content:'';display:block;width:2.5rem;height:1px;
      background:linear-gradient(90deg,var(--color-em),transparent);
    }

    /* ── BUTTON — clone-slide ────────────────── */
    .btn{
      position:relative;isolation:isolate;display:inline-flex;
      align-items:center;justify-content:center;
      border-radius:99px;overflow:hidden;cursor:pointer;
      transition:border-color .35s var(--ease-sig),background .35s var(--ease-sig),box-shadow .35s,transform .35s var(--ease-sig);
      text-decoration:none;
    }
    .btn .btn-inner{
      position:relative;overflow:hidden;
      font-family:'Space Mono',monospace;
      font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;
      white-space:nowrap;
    }
    .btn .btn-inner span{display:block;transition:transform .4s var(--ease-sig);}
    .btn .btn-inner .clone{
      position:absolute;inset:0;
      transform:translateY(110%);
    }
    .btn:hover .btn-inner .orig{transform:translateY(-110%);}
    .btn:hover .btn-inner .clone{transform:translateY(0);}

    .btn-primary{
      background:linear-gradient(90deg, #a848ff, #ff6d6d);
      padding:.75rem 2.25rem;
      box-shadow:0 4px 24px rgba(168,72,255,.28),0 1px 4px rgba(255,109,109,.15);
    }
    .btn-primary .btn-inner{color:#fff;font-weight:700;}
    .btn-primary:hover{
      box-shadow:0 8px 36px rgba(124,106,247,.38),0 2px 8px rgba(124,106,247,.2);
      transform:translateY(-1px);
    }
    .btn-primary:focus-visible{
      outline:none;
      box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(143,51,233,.4),0 8px 36px rgba(124,106,247,.38);
    }

    .btn-ghost{
      border:1px solid rgba(49,45,75,.14);
      padding:.75rem 2.25rem;
      background:rgba(255,255,255,.7);
      backdrop-filter:blur(12px);
    }
    .btn-ghost .btn-inner{color:rgba(49,45,75,.55);}
    .btn-ghost:hover{border-color:rgba(124,106,247,.4);background:rgba(255,255,255,.9);transform:translateY(-1px);}
    .btn-ghost:hover .btn-inner{color:var(--color-text);}

    .btn-outline-em{
      border:1px solid rgba(124,106,247,.3);
      padding:.5rem 1.25rem;
      background:rgba(124,106,247,.04);
    }
    .btn-outline-em .btn-inner{color:var(--color-em);}
    .btn-outline-em:hover{border-color:var(--color-em);background:rgba(124,106,247,.08);}

    .btn-outline-vi{
      border:1px solid rgba(232,130,154,.3);
      padding:.5rem 1.25rem;
      background:rgba(232,130,154,.04);
    }
    .btn-outline-vi .btn-inner{color:var(--color-vi);}
    .btn-outline-vi:hover{border-color:var(--color-vi);background:rgba(232,130,154,.08);}

    /* ── PULSE DOT ───────────────────────────── */
    .pulse-dot{position:relative;display:inline-block;}
    .pulse-dot::after{
      content:'';position:absolute;inset:0;border-radius:50%;
      background:inherit;animation:pulseRing 1.8s ease-out infinite;
    }

    /* ── PULSE LOGO RING (breathing multi-color gradient) ── */
    .pulse-logo-ring{
      position:relative;
      background:radial-gradient(circle at 50% 50%,
        #ffe4b9 0%,
        #e8829a 28%,
        #8f33e9 58%,
        #5b53e0 85%,
        #14b2ec 100%);
      animation:pulseRingDilate 2.4s ease-in-out infinite;
    }
    @keyframes pulseRingDilate{
      0%, 100%{ transform:scale(1);    filter:hue-rotate(0deg)  brightness(1);   }
      50%     { transform:scale(1.08); filter:hue-rotate(60deg) brightness(1.15); }
    }
    @keyframes pulseRing{
      0%{transform:scale(1);opacity:.5}
      100%{transform:scale(2.6);opacity:0}
    }

    /* ── GLASS CARD (hover-block) ────────────── */
    .hover-block{
      border:1px solid rgba(255,255,255,.85);
      background:rgba(255,255,255,.65);
      backdrop-filter:blur(20px);
      -webkit-backdrop-filter:blur(20px);
      border-radius:1.25rem;
      box-shadow:0 2px 24px rgba(124,106,247,.07),0 1px 4px rgba(0,0,0,.03);
      transition:border-color .4s var(--ease-sig),background .4s var(--ease-sig),transform .4s var(--ease-sig),box-shadow .4s;
    }
    .hover-block:hover{
      border-color:rgba(124,106,247,.35);
      background:rgba(255,255,255,.88);
      transform:translateY(-3px);
      box-shadow:0 8px 40px rgba(124,106,247,.13),0 2px 8px rgba(0,0,0,.04);
    }

    /* ── STAT CARD ───────────────────────────── */
    .stat-card{
      border:1px solid rgba(255,255,255,.9);
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-radius:1.25rem;
      padding:2rem 1.5rem;
      text-align:center;
      box-shadow:0 2px 20px rgba(124,106,247,.07);
      transition:border-color .35s,transform .35s,box-shadow .35s;
    }
    .stat-card:hover{
      border-color:rgba(124,106,247,.3);
      transform:translateY(-2px);
      box-shadow:0 8px 32px rgba(124,106,247,.12);
    }

    /* ── HORIZON CARD ────────────────────────── */
    .horizon-card{border-radius:1.25rem;padding:2rem;overflow:hidden;position:relative;}

    /* ── REVEAL ANIM ─────────────────────────── */
    .reveal{opacity:0;transform:translateY(2rem);}
    .intel-card,.pulse-card,.community-slide,#cta-title{opacity:0;}
    @media (prefers-reduced-motion: reduce){
      .reveal{opacity:1!important;transform:none!important;}
      .intel-card,.pulse-card,.community-slide,#cta-title{opacity:1!important;}
    }

    [x-cloak]{display:none!important;}

    .sep{height:1px;background:linear-gradient(90deg,transparent,rgba(124,106,247,.12),transparent);}

    /* ── HERO BG (Figma-style with gradient) ── */
    .how-bg-img{
      position:absolute;
      inset:0 0 -10% 0;
      width:100%;
      height:auto;
      object-fit:cover;
      object-position:center top;
      will-change:transform;
      z-index:0;
      pointer-events:none;
    }
    .hero-container{
      border-radius:2rem;
      overflow:hidden;
      position:relative;
      min-height:min(900px, 85vh);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:clamp(2rem, 4vh, 3rem) 1.5rem;
      text-align:center;
      background:#1a0a3c;
      box-sizing:border-box;
    }
    .hero-content{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      position:relative;
      z-index:1;
      width:100%;
      max-width:620px;
    }

    /* Mobile hero — CSS animation (no GSAP wait) keeps LCP fast */
    @keyframes hero-rise-mobile {
      from { transform: translateY(20px); }
      to { transform: translateY(0); }
    }
    @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
      body.home.hero-mobile-anim #h-eye {
        animation: hero-rise-mobile 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
      }
      body.home.hero-mobile-anim #h-head {
        animation: hero-rise-mobile 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
      }
      body.home.hero-mobile-anim #h-sub {
        animation: hero-rise-mobile 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
      }
      body.home.hero-mobile-anim #h-cta {
        animation: hero-rise-mobile 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
      }
    }

    /* ── INTEL IMAGE CARD ────────────────────── */
    .intel-image-card{
      position:relative;
      border-radius:2rem;
      overflow:hidden;
      min-height:600px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:2.5rem;
      flex:1;
      min-width:280px;
    }
    .intel-image-card::before{
      content:'';
      position:absolute;
      inset:0;
      z-index:1;
    }
    .intel-image-card > *{
      position:relative;
      z-index:2;
    }

    /* ── MODULE CARD ─────────────────────────── */
    .module-card{
      background:#fff;
      border-radius:2rem;
      padding:2rem;
      box-shadow:0 4px 20px rgba(0,0,0,.08);
      transition:transform .35s var(--ease-sig),box-shadow .35s;
    }
    .module-card:hover{
      transform:translateY(-4px);
      box-shadow:0 8px 32px rgba(0,0,0,.12);
    }

    /* ── COMPARISON ANIMATED GLOW ───────────── */
    .comparison-wrap::before{
      content:'';
      position:absolute;
      inset:-10px;
      border-radius:3rem;
      background:linear-gradient(90deg, #5B53E0 0%, #14B2EC 24.52%, #FFB8D8 53.37%, #FFE4B9 77.4%, #FF5618 100%);
      background-size:200% 200%;
      filter:blur(60px);
      opacity:.55;
      z-index:0;
      animation:compGlow 8s ease-in-out infinite;
    }
    @keyframes compGlow{
      0%, 100%{ background-position:0% 0%; opacity:.55; }
      50%{ background-position:100% 100%; opacity:.75; }
    }

    /* ── PILLAR CARD (Figma-style) ───────────── */
    .pillar-card-figma{
      background:#f5f3f1;
      padding:2rem;
      min-height:240px;
    }
    .pillar-card-figma:first-child{
      border-radius:2rem 0 0 2rem;
    }
    .pillar-card-figma:last-child{
      border-radius:0 2rem 2rem 0;
    }

    /* ── COMMUNITY CARD ──────────────────────── */
    .community-card{
      background:#f5f3f1;
      border-radius:2rem;
      padding:2rem;
    }

    /* ── CTA HERO ────────────────────────────── */
    .cta-hero{
      border-radius:2rem;
      overflow:hidden;
      position:relative;
      min-height:min(700px, 70vh);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      background:#1a0a3c;
    }

    /* ── ABSTRACT BLOB ───────────────────────── */
    .blob{
      position:absolute;border-radius:50%;pointer-events:none;
      filter:blur(100px);
    }

/* Responsive layout helpers */
    @media(min-width:920px){
      #desktop-nav{display:flex!important;}
      #header-signin{display:flex!important;}
      #header-cta{display:flex!important;}
      #mob-btn{display:none!important;}
    }
    @media(max-width:919px){
      header > div:first-child{
        padding-left:1.25rem !important;
        padding-right:1.25rem !important;
      }
    }
    #header-logo-link .header-logo-enhance{color:var(--color-em);}
    #header-logo-link .header-logo-events{color:#000;}

    @media(max-width:767px){
      body.home header:not(.scrolled):not(.mob-open) #header-logo-link .header-logo-enhance,
      body.home header:not(.scrolled):not(.mob-open) #header-logo-link .header-logo-events{
        color:#fff !important;
      }
      body.home header:not(.scrolled):not(.mob-open) #mob-btn{
        background:transparent !important;
        border-color:rgba(255,255,255,.4) !important;
      }
      body.home header:not(.scrolled):not(.mob-open) #mob-btn svg{
        color:#fff !important;
      }
    }
    @media(min-width:768px) and (max-width:919px){
      body.home header:not(.scrolled):not(.mob-open){
        background-color:rgb(255 255 255 / 0.85) !important;
        backdrop-filter:blur(24px);
        -webkit-backdrop-filter:blur(24px);
        border-bottom:1px solid rgba(124,106,247,0.1);
        box-shadow:0 2px 24px rgba(124,106,247,0.06);
      }
      body.home header:not(.scrolled):not(.mob-open) #header-logo-link .header-logo-enhance{
        color:var(--color-em) !important;
      }
      body.home header:not(.scrolled):not(.mob-open) #header-logo-link .header-logo-events{
        color:#000 !important;
      }
    }
    @media(min-width:768px){
      #footer-top{grid-template-columns:1fr 1fr 1fr;}
      #footer-cols{display:contents !important;}
    }

    /* Intel cards row: horizontal scroll on mobile, flex on desktop */
    .intel-cards-row{
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
    }
    .intel-cards-row > .intel-image-card{
      scroll-snap-align:start;
    }
    @media(max-width:767px){
      .intel-image-card{
        min-width:100% !important;
        min-height:420px !important;
      }
      .comparison-row{
        flex-direction:column !important;
      }
      .pillars-row{
        grid-template-columns:1fr !important;
      }
      .pillar-card-figma{
        border-radius:0 !important;
        border-left:none !important;
        border-right:none !important;
        border-bottom:1px solid rgba(0,0,0,.06);
      }
      .pillar-card-figma:first-child{
        border-radius:2rem 2rem 0 0 !important;
      }
      .pillar-card-figma:last-child{
        border-radius:0 0 2rem 2rem !important;
        border-bottom:none;
      }
      .pulse-layout{
        flex-direction:column !important;
      }
      .community-top-row,
      .community-bottom-row{
        flex-direction:column !important;
      }
      .community-card{
        flex-direction:column !important;
        text-align:center !important;
        padding:1.75rem !important;
      }
      .community-card img{
        max-width:100% !important;
      }
      .hero-container{
        border-radius:0 !important;
        height:100vh !important;
        height:100dvh !important;
        min-height:0 !important;
        justify-content:center !important;
        padding:1.25rem !important;
        box-sizing:border-box;
      }
      .cta-hero{
        border-radius:1.25rem !important;
      }
      section{
        padding-left:1.25rem !important;
        padding-right:1.25rem !important;
        padding-top:3.5rem !important;
        padding-bottom:3.5rem !important;
      }
      #hero-section{
        padding:0 !important;
      }
    }
    header.mob-open{
      background:rgba(255,255,255,.95) !important;
      backdrop-filter:blur(20px) !important;
      -webkit-backdrop-filter:blur(20px) !important;
      border-bottom:none !important;
      box-shadow:none !important;
    }
    @media(max-width:480px){
      #header-logo-link > span{font-size:1.35rem !important;}
    }