:root{
      --bg-0:#070a10;
      --bg-1:#0b0f14;
      --bg-2:#0e131b;
      --panel:rgba(13,20,32,.58);
      --panel-strong:rgba(11,17,27,.76);
      --line:rgba(228,236,255,.16);
      --line-strong:rgba(228,236,255,.26);
      --text:#e6ecfb;
      --muted:rgba(230,236,251,.72);
      --soft:rgba(230,236,251,.54);
      --accent:#00c26e;
      --accent-2:#00a95f;
      --accent-3:#72f1bc;
      --alert:#ff9d78;
      --warm:#ffcb8d;
      --max:1100px;
      --header-h:88px;
      --section-pad:48px;
      --section-vh:20vh;
      --radius:26px;
      --parallax-x:0;
      --parallax-y:0;
    }

    *{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
      overflow-x:hidden;
    }

    body{
      margin:0;
      min-height:100vh;
      font-family:"Manrope", system-ui, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 800px at 50% -10%, rgba(120,160,255,.09), transparent 60%),
        radial-gradient(900px 520px at 20% 20%, rgba(255,255,255,.05), transparent 55%),
        radial-gradient(900px 700px at 80% 60%, rgba(0,194,110,.045), transparent 55%),
        linear-gradient(180deg, var(--bg-0), var(--bg-1) 35%, var(--bg-2));
      overflow-x:hidden;
    }

    body::before,
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:0;
    }

    body::before{
      background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
      background-size:26px 26px;
      opacity:.08;
      mix-blend-mode:screen;
    }

    body::after{
      inset:-18%;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.018), rgba(255,255,255,.018) 1px, transparent 1px, transparent 3px);
      opacity:.05;
      transform:rotate(2deg);
      animation:grainMove 12s linear infinite;
    }

    @keyframes grainMove{
      from{transform:translate3d(0,0,0) rotate(2deg);}
      to{transform:translate3d(-5%,-4%,0) rotate(2deg);}
    }

    #moleculeFx{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      pointer-events:none;
      z-index:1;
      opacity:.95;
      filter:blur(.15px);
    }

    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:120;
      padding:20px 20px 0;
      background:linear-gradient(180deg, rgba(7,10,16,.85), rgba(7,10,16,.35) 60%, transparent);
      backdrop-filter:blur(12px);
    }

    .nav{
      width:min(var(--max), calc(100% - 8px));
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      position:relative;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(9,14,21,.48);
      box-shadow:0 20px 70px rgba(0,0,0,.26);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:0;
    }

    .brand-mark{
      width:14px;
      height:14px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 6px rgba(122,223,255,.06), 0 0 26px rgba(122,223,255,.28);
      flex:none;
    }

    .brand-copy{
      min-width:0;
    }

    .brand-title{
      display:block;
      font:700 .98rem/1 "Manrope", system-ui, sans-serif;
      letter-spacing:-.03em;
      white-space:nowrap;
    }

    .brand-sub{
      display:block;
      margin-top:3px;
      color:var(--soft);
      font-size:.73rem;
      letter-spacing:.16em;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
      padding:5px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:999px;
      background:rgba(255,255,255,.03);
    }

    .nav-links a,
    .btn{
      color:var(--text);
      text-decoration:none;
      border:none;
      cursor:pointer;
      font:600 .93rem/1 "Manrope", sans-serif;
      letter-spacing:.01em;
      transition:transform .18s ease, background .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease;
    }

    .nav-links a{
      padding:10px 13px;
      border-radius:999px;
      color:var(--soft);
    }

    .nav-links a:hover,
    .nav-links a.is-active{
      color:var(--text);
      background:rgba(255,255,255,.08);
    }

    .nav-links a:focus-visible,
    .btn:focus-visible,
    .menu-toggle:focus-visible{
      outline:2px solid var(--accent-3);
      outline-offset:3px;
    }

    .menu-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      width:50px;
      height:50px;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 12px 24px rgba(0,0,0,.2);
      transition:background .25s ease, transform .25s ease;
      position:relative;
      overflow:hidden;
      flex:none;
    }

    .menu-toggle::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
      opacity:0;
      transform:translateX(-60%);
      transition:opacity .3s ease, transform .35s ease;
      pointer-events:none;
    }

    .menu-toggle:hover::after{
      opacity:.55;
      transform:translateX(60%);
    }

    .menu-toggle span{
      background:var(--text);
      height:2px;
      width:24px;
      border-radius:999px;
      position:absolute;
      transition:transform .35s ease, opacity .25s ease;
      transform-origin:center;
    }

    .menu-toggle span:nth-child(1){ transform:translateY(-7px); }
    .menu-toggle span:nth-child(2){ transform:translateY(0); }
    .menu-toggle span:nth-child(3){ transform:translateY(7px); }
    .menu-toggle.active span:nth-child(1){ transform:rotate(45deg); }
    .menu-toggle.active span:nth-child(2){ opacity:0; transform:scaleX(.6); }
    .menu-toggle.active span:nth-child(3){ transform:rotate(-45deg); }

    .actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      box-shadow:none;
    }

    .btn:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.2);
    }

    .btn.primary{
      background:
        radial-gradient(circle at 20% 20%, rgba(0,194,110,.24), transparent 54%),
        radial-gradient(circle at 80% 20%, rgba(0,169,95,.2), transparent 54%),
        rgba(255,255,255,.05);
      border-color:rgba(0,194,110,.34);
      box-shadow:0 0 0 1px rgba(0,194,110,.14), 0 18px 50px rgba(0,194,110,.18);
    }

    main{
      position:relative;
      z-index:2;
    }

    .layer{
      position:relative;
      min-height:var(--section-vh);
      padding:calc(var(--header-h) + 14px) 24px var(--section-pad);
      display:flex;
      align-items:center;
      isolation:isolate;
      overflow:visible;
    }

    .layer::before,
    .layer::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .layer::before{
      z-index:-3;
      background:none;
      opacity:0;
    }

    .layer::after{
      z-index:-2;
      background:none;
      opacity:0;
    }

    .section-wrap{
      width:min(var(--max), 100%);
      margin:0 auto;
      position:relative;
      z-index:2;
    }

    .content{
      max-width:680px;
      display:grid;
      gap:16px;
      transform:translateY(56px) scale(.985);
      opacity:0;
      filter:blur(14px);
      will-change:transform, opacity, filter;
      transition:
        transform 1.02s cubic-bezier(.16,1,.3,1),
        opacity .9s ease-out,
        filter 1.02s ease-out;
    }

    .content > *{
      opacity:0;
      transform:translateY(18px);
      filter:blur(10px);
      transition:
        transform .92s cubic-bezier(.16,1,.3,1),
        opacity .8s ease-out,
        filter .92s ease-out;
    }

    .content > *:nth-child(1){ transition-delay:.04s; }
    .content > *:nth-child(2){ transition-delay:.1s; }
    .content > *:nth-child(3){ transition-delay:.16s; }
    .content > *:nth-child(4){ transition-delay:.22s; }
    .content > *:nth-child(5){ transition-delay:.28s; }
    .content > *:nth-child(6){ transition-delay:.34s; }

    .layer:not(.is-visible) .content > *{
      transition-delay:0s;
    }

    .layer.is-visible .content{
      transform:translateY(0) scale(1);
      opacity:1;
      filter:blur(0);
    }

    .layer.is-visible .content > *{
      opacity:1;
      transform:translateY(0);
      filter:blur(0);
    }

    .eyebrow{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:rgba(230,236,251,.58);
      font-size:12px;
      font-weight:600;
      letter-spacing:.14em;
      text-transform:uppercase;
    }

    .eyebrow::before{
      content:"";
      position:relative;
      width:11px;
      height:11px;
      border-radius:2px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.26), transparent 42%),
        linear-gradient(145deg, var(--eyebrow-dot, rgba(255,255,255,.74)), rgba(255,255,255,.42));
      border:1px solid rgba(228,236,255,.28);
      box-shadow:0 0 0 6px var(--eyebrow-shadow-1, rgba(255,255,255,.08)), 0 0 24px var(--eyebrow-shadow-2, rgba(255,255,255,.18));
      flex:none;
      z-index:1;
    }

    .eyebrow::after{
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:11px;
      height:11px;
      border-radius:2px;
      transform:translateY(-50%) scale(.72);
      box-shadow:0 0 0 6px var(--eyebrow-shadow-1, rgba(255,255,255,.08)), 0 0 24px var(--eyebrow-shadow-2, rgba(255,255,255,.18));
      opacity:0;
      pointer-events:none;
    }

    @keyframes eyebrowFloat{
      0%, 100%{ transform:translateY(0); }
      50%{ transform:translateY(-6px); }
    }

    @keyframes eyebrowAuraPulse{
      0%{
        transform:translateY(-50%) scale(.72);
        opacity:0;
      }
      18%{
        opacity:.72;
      }
      72%{
        transform:translateY(-50%) scale(2.1);
        opacity:0;
      }
      100%{
        transform:translateY(-50%) scale(2.1);
        opacity:0;
      }
    }

    @keyframes eyebrowDotBeat{
      0%, 100%{
        transform:scale(1);
        opacity:1;
      }
      40%{
        transform:scale(1.06);
        opacity:.98;
      }
    }

    #surface.layer.is-visible .eyebrow,
    #network.layer.is-visible .eyebrow,
    #neo.layer.is-visible .eyebrow{
      animation:eyebrowFloat 4.8s ease-in-out infinite;
      will-change:transform;
    }

    #network.layer.is-visible .eyebrow{ animation-delay:-.9s; }
    #neo.layer.is-visible .eyebrow{ animation-delay:-3.1s; }

    #surface.layer.is-visible .eyebrow::before,
    #network.layer.is-visible .eyebrow::before,
    #neo.layer.is-visible .eyebrow::before{
      animation:eyebrowDotBeat 2.8s ease-in-out infinite;
      will-change:transform, opacity;
    }

    #network.layer.is-visible .eyebrow::before{ animation-delay:-.35s; }
    #neo.layer.is-visible .eyebrow::before{ animation-delay:-1.5s; }

    #surface.layer.is-visible .eyebrow::after,
    #network.layer.is-visible .eyebrow::after,
    #neo.layer.is-visible .eyebrow::after{
      animation:eyebrowAuraPulse 2.8s ease-out infinite;
      will-change:transform, opacity;
    }

    #network.layer.is-visible .eyebrow::after{ animation-delay:-.35s; }
    #neo.layer.is-visible .eyebrow::after{ animation-delay:-1.5s; }

    h1,
    h2{
      margin:0;
      font-family:"Manrope", system-ui, sans-serif;
      font-weight:700;
      letter-spacing:-.03em;
      line-height:1.08;
      max-width:13ch;
      text-shadow:0 10px 24px rgba(0,0,0,.14);
    }

    h1{
      font-size:clamp(38px, 5vw, 64px);
    }

    h2{
      font-size:clamp(28px, 3.6vw, 44px);
    }

    p{
      margin:0;
      max-width:60ch;
      color:rgba(230,236,251,.66);
      font-size:clamp(16px, 1.3vw, 18px);
      line-height:1.56;
    }

    .lead{
      color:rgba(230,236,251,.78);
      max-width:58ch;
    }

    .focus-line{
      font-size:.97rem;
      color:rgba(230,236,251,.7);
      max-width:62ch;
      letter-spacing:.01em;
    }

    .statement{
      max-width:52ch;
      color:rgba(230,236,251,.82);
      font-weight:600;
      font-size:clamp(1.08rem,1.52vw,1.24rem);
      letter-spacing:-.01em;
    }

    .impact-grid{
      width:min(860px, 100%);
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
    }

    .impact-card{
      padding:14px 14px 13px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.11);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(9,14,22,.34);
      color:rgba(230,236,251,.76);
      font-size:.92rem;
      line-height:1.42;
      min-height:84px;
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
    }

    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:10px;
    }

    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 12px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:999px;
      background:rgba(255,255,255,.045);
      color:rgba(230,236,251,.68);
      font-size:.84rem;
    }

    .meta-pill::before{
      content:"";
      width:7px;
      height:7px;
      border-radius:999px;
      background:currentColor;
      opacity:.7;
    }

    .cut{
      position:absolute;
      left:0;
      right:0;
      top:0;
      height:0;
      pointer-events:none;
      z-index:12;
    }

    /* No section separators: continuous surface across all sections. */
    .cut{
      display:none !important;
    }

    .cut::before{
      content:"";
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      width:min(1200px, calc(100vw - 24px));
      height:1px;
      background:linear-gradient(90deg, transparent 0%, transparent 12%, var(--cut-accent, var(--cut-line, var(--line))) 50%, transparent 88%, transparent 100%);
      opacity:.86;
    }

    .cut::after{
      content:"";
      position:absolute;
      left:50%;
      top:-12px;
      transform:translateX(-50%);
      width:min(1200px, calc(100vw - 24px));
      height:24px;
      background:radial-gradient(64px 14px at 50% 50%, var(--cut-accent, var(--cut-glow, rgba(230,236,251,.62))), transparent 72%);
      opacity:.92;
      filter:blur(.2px);
    }

    .layer:first-of-type .cut{
      display:none;
    }

    .panel{
      margin-top:16px;
      width:min(100%, 760px);
      padding:22px 22px 20px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.1);
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
        rgba(10,16,26,.38);
      box-shadow:0 24px 80px rgba(0,0,0,.24);
      backdrop-filter:blur(12px);
    }

    .panel-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .panel-title{
      margin:0 0 5px;
      font:700 1.08rem/1.2 "Sora", sans-serif;
      letter-spacing:-.03em;
    }

    .panel-copy{
      color:var(--soft);
      font-size:.98rem;
      max-width:52ch;
    }

    .panel-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      flex:none;
    }

    footer{
      position:relative;
      z-index:1;
      padding:26px 24px 40px;
      color:rgba(230,236,251,.55);
      text-align:center;
      font-size:.95rem;
      overflow:hidden;
    }

    footer::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      pointer-events:none;
      background:
        linear-gradient(180deg, rgba(8,14,22,.28), rgba(8,14,22,.16) 64%, rgba(8,14,22,.08));
    }

    .footer-brand{
      letter-spacing:.08em;
      text-transform:lowercase;
      font-weight:650;
      opacity:.82;
    }

    .footer-copy{
      margin-top:6px;
      color:rgba(230,236,251,.62);
    }

    @media (max-width: 1080px){
      .nav{
        border-radius:28px;
      }

      .panel-row{
        flex-direction:column;
        align-items:flex-start;
      }
    }

    @media (max-width: 760px){
      .surface{
        --surface-page-angle:-82deg;
      }

      .game-launch-fx{
        --launch-size:56px;
      }

      .reveal-underlay{
        --final-grid-cell:58px;
        height:100vh;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        background:
          repeating-linear-gradient(90deg, rgba(125,255,197,.08), rgba(125,255,197,.08) 1px, transparent 1px, transparent var(--final-grid-cell)),
          repeating-linear-gradient(0deg, rgba(125,255,197,.06), rgba(125,255,197,.06) 1px, transparent 1px, transparent var(--final-grid-cell)),
          radial-gradient(1200px 800px at 50% 40%, rgba(0,194,110,.2), transparent 65%),
          linear-gradient(180deg, #02231c 0%, #031d18 55%, #042620 100%);
      }

      .reveal-underlay::before{
        display:none;
      }

      :root{
        --header-h:110px;
        --section-pad:92px;
      }

      .site-header{
        padding:10px 8px 0;
        z-index:180;
      }

      .nav{
        width:100%;
        max-width:100%;
        padding:10px 12px;
        border-radius:28px;
        justify-content:space-between;
        overflow:visible;
        gap:10px;
      }

      .brand{
        flex:1 1 auto;
        min-width:0;
      }

      .brand-copy{
        min-width:0;
      }

      .brand-title{
        font-size:.95rem;
        overflow:hidden;
        text-overflow:ellipsis;
      }

      .menu-toggle{
        display:flex;
        margin-left:auto;
        position:relative;
        z-index:220;
        flex:0 0 46px;
        width:46px;
        height:46px;
      }

      .nav-links{
        display:flex;
        flex-direction:column;
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        padding:.6rem;
        border-radius:18px;
        background:rgba(8,12,20,.86);
        border:1px solid rgba(255,255,255,.12);
        box-shadow:0 24px 50px rgba(0,0,0,.45);
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        pointer-events:none;
        transition:opacity .2s ease, transform .25s ease, visibility .2s ease;
        z-index:30;
      }

      .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
      }

      .actions{
        display:flex;
        flex:0 0 auto;
        align-items:center;
      }

      .actions .btn{
        padding:10px 14px;
        font-size:.86rem;
        min-height:42px;
      }

      .layer{
        padding-inline:18px;
      }

      .content{
        gap:16px;
      }

      #surface .surface-rotor{
        min-height:560px;
      }

      #surface .surface-face-front{
        align-items:flex-start;
      }

      #surface .surface-face-molecules{
        justify-content:center;
      }

      #surface .surface-molecule-field,
      #network .surface-molecule-field{
        width:min(88vw, 430px);
        height:min(44vh, 320px);
      }

      .surface-molecule-structure{
        width:clamp(176px, 44vw, 236px);
        height:clamp(92px, 23vw, 128px);
      }

      .neo-scroll-cue{
        gap:6px;
        margin-top:18px;
      }

      .neo-scroll-cue-mouse{
        width:20px;
        height:32px;
      }

      .neo-scroll-cue-label{
        font-size:.56rem;
        letter-spacing:.14em;
      }

      .neo-state-copy-line{
        font-size:.84rem;
        letter-spacing:.04em;
      }

      .eyebrow{
        gap:10px;
        letter-spacing:.18em;
        font-size:.7rem;
      }

      .hero-note{
        flex-direction:column;
        align-items:flex-start;
      }

      .meta-pill{
        width:100%;
        justify-content:flex-start;
      }

      .impact-grid{
        grid-template-columns:1fr;
      }

      .faq-grid{
        grid-template-columns:1fr;
      }

      .contact-grid{
        grid-template-columns:1fr;
      }

      .reveal-under-footer{
        position:relative;
        order:2;
        left:auto;
        right:auto;
        bottom:auto;
        width:calc(100% - 36px);
        margin:calc(var(--final-grid-cell) * .9) auto 26px;
        grid-template-columns:1fr;
        gap:12px;
        padding-bottom:16px;
      }

      .game-transition-stage{
        width:min(calc(var(--final-grid-cell) * 7), 92vw);
        height:calc(var(--final-grid-cell) * 4.2);
        margin:26px auto 0;
      }

      .reveal-under-content{
        order:1;
        height:auto;
        display:block;
        text-align:center;
        padding:118px 18px 0;
      }

      .reveal-under-shell{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
      }

      .panel{
        padding:20px 18px 18px;
      }
    }

    @media (prefers-reduced-motion: reduce){
      html{
        scroll-behavior:auto;
      }

      body::after,
      .content,
      .content > *,
      .btn,
      .nav-links a,
      .menu-toggle,
      #moleculeFx,
      .layer::before,
      .layer::after{
        animation:none;
        transition:none;
        transform:none;
      }

      .eyebrow::before{
        animation:none;
      }

      .eyebrow::after{
        animation:none;
      }

      .neo-scroll-cue-mouse::before{
        animation:none;
        opacity:.9;
        transform:translate(-50%, 4px);
      }

      .neo-state-copy-line{
        transition:none;
        filter:none;
      }

      #surface.layer.is-visible .content{
        transform:none;
        opacity:1;
        filter:none;
      }


      .game-transition-stage{
        opacity:1;
        filter:none;
        transform:none;
      }

      .fall-cube{
        opacity:.96;
        transform:translateX(-50%) translateY(var(--cube-rest-y));
      }

      .cube-halo{
        opacity:.66;
        transform:translate(-50%, calc(var(--halo-center-y) - 50%));
      }

      .impact-glow{
        opacity:.14;
        transform:translateX(-50%) scale(1.5);
      }
    }