:root{
      --bg:#060606;
      --ink:#f5f5f2;
      --muted:rgba(245,245,242,.52);
      --line:rgba(255,255,255,.12);
      --line2:rgba(255,255,255,.22);
      --ease:cubic-bezier(.16,1,.3,1);
      --ease2:cubic-bezier(.22,.75,.18,1);
      --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
    }

    *{box-sizing:border-box}

    html{
      width:100%;
      min-width:320px;
      background:var(--bg);
      overflow:hidden;
    }

    body{
      margin:0;
      width:100%;
      min-width:320px;
      min-height:100svh;
      overflow:hidden;
      background:var(--bg);
      color:var(--ink);
      font-family:var(--font);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    a,button{font:inherit}
    a{color:inherit;text-decoration:none}
    button{border:0;padding:0;background:none}

    /* =========================================================
       SCENE
       ========================================================= */

    .page{
      position:relative;
      width:100%;
      height:100svh;
      overflow:hidden;
      isolation:isolate;
      background:
        radial-gradient(circle at 76% 46%, rgba(255,255,255,.035), transparent 29%),
        #060606;
    }

    .grain{
      position:absolute;
      inset:-40%;
      z-index:-8;
      pointer-events:none;
      opacity:.08;
      background-image:
        repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.8) 0 1px, transparent 1px 3px);
      background-size:5px 5px;
      animation:grain 8s steps(8) infinite;
    }

    .grid{
      position:absolute;
      inset:0;
      z-index:-7;
      pointer-events:none;
      opacity:.19;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size:72px 72px;
      mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 84%,transparent 100%);
      -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 84%,transparent 100%);
      animation:gridMove 22s linear infinite;
    }

    .scan{
      position:absolute;
      left:0;
      right:0;
      top:-20%;
      z-index:-5;
      height:28%;
      pointer-events:none;
      background:linear-gradient(to bottom,transparent,rgba(255,255,255,.025),transparent);
      animation:scan 9s linear infinite;
    }

    .layout{
      position:relative;
      z-index:3;
      width:min(100%,1720px);
      height:100%;
      margin:auto;
      display:grid;
      grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
      align-items:center;
      gap:clamp(30px,4vw,76px);
      padding:
        max(44px, env(safe-area-inset-top))
        max(42px, env(safe-area-inset-right))
        max(112px, calc(86px + env(safe-area-inset-bottom)))
        max(42px, env(safe-area-inset-left));
    }

    /* =========================================================
       TYPE / COPY
       ========================================================= */

    .copy{
      position:relative;
      min-width:0;
      z-index:5;
      transform:translate3d(var(--copy-x,0px),var(--copy-y,0px),0);
      will-change:transform;
    }

    .status{
      display:inline-flex;
      align-items:center;
      gap:9px;
      min-height:34px;
      margin-bottom:clamp(24px,3vw,42px);
      padding:0 12px;
      border:1px solid var(--line);
      border-radius:999px;
      color:rgba(245,245,242,.66);
      background:rgba(6,6,6,.7);
      font-size:10px;
      font-weight:680;
      letter-spacing:.075em;
      text-transform:uppercase;
      opacity:0;
      transform:translateY(10px);
      animation:fadeUp .7s var(--ease) .1s forwards;
    }

    .status-dot{
      position:relative;
      width:7px;
      height:7px;
      border-radius:50%;
      background:#fff;
      flex:0 0 auto;
    }

    .status-dot::after{
      content:"";
      position:absolute;
      inset:-4px;
      border:1px solid rgba(255,255,255,.34);
      border-radius:50%;
      animation:pulse 1.8s ease-out infinite;
    }

    .title{
      margin:0;
      max-width:1050px;
      font-size:clamp(74px,8vw,156px);
      font-weight:710;
      line-height:.83;
      letter-spacing:-.078em;
      text-wrap:balance;
      perspective:1100px;
    }

    .title-line{
      display:block;
      overflow:hidden;
      padding-bottom:.075em;
    }

    .title-line > span{
      display:block;
      opacity:0;
      transform:translate3d(0,108%,0) rotateX(-20deg);
      transform-origin:50% 100%;
      animation:titleIn 1.15s var(--ease) forwards;
    }

    .title-line:nth-child(1)>span{animation-delay:.16s}
    .title-line:nth-child(2)>span{animation-delay:.3s}

    .title .accent{
      color:transparent;
      -webkit-text-stroke:1px rgba(245,245,242,.68);
      text-shadow:0 0 28px rgba(255,255,255,.035);
      animation:
        titleIn 1.15s var(--ease) .3s forwards,
        outlineBreath 5.5s ease-in-out 1.5s infinite;
    }

    .summary{
      width:min(100%,620px);
      margin:clamp(24px,2.7vw,38px) 0 0;
      color:rgba(245,245,242,.58);
      font-size:clamp(14px,1.14vw,18px);
      line-height:1.56;
      letter-spacing:-.022em;
      opacity:0;
      transform:translateY(12px);
      animation:fadeUp .72s var(--ease) .52s forwards;
    }

    .micro{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:10px 16px;
      margin-top:24px;
      color:rgba(245,245,242,.33);
      font-size:9px;
      font-weight:640;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:0;
      animation:fadeUp .7s var(--ease) .68s forwards;
    }

    .micro span{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .micro span::before{
      content:"";
      width:18px;
      height:1px;
      background:rgba(255,255,255,.22);
    }

    /* =========================================================
       3D AUDIO OBJECT
       ========================================================= */

    .visual{
      position:relative;
      min-width:0;
      height:min(68svh,720px);
      display:grid;
      place-items:center;
      perspective:1400px;
      transform-style:preserve-3d;
      opacity:0;
      animation:visualIn 1.3s var(--ease) .26s forwards;
    }

    .orbital{
      position:relative;
      width:min(38vw,610px);
      aspect-ratio:1;
      transform-style:preserve-3d;
      transform:
        rotateX(var(--orb-x,64deg))
        rotateZ(var(--orb-z,-12deg))
        rotateY(var(--orb-y,0deg));
      will-change:transform;
      animation:orbFloat 7s ease-in-out infinite;
    }

    .disc{
      position:absolute;
      inset:11%;
      border-radius:50%;
      transform-style:preserve-3d;
      background:
        radial-gradient(circle at 50% 50%, #070707 0 8%, #161616 8.5% 9.5%, #090909 10% 31%, #171717 31.5% 32%, #080808 32.5% 100%);
      border:1px solid rgba(255,255,255,.16);
      box-shadow:
        0 0 0 1px rgba(255,255,255,.025) inset,
        0 44px 80px rgba(0,0,0,.5);
      animation:discSpin 18s linear infinite;
    }

    .disc::before,
    .disc::after{
      content:"";
      position:absolute;
      border-radius:50%;
      pointer-events:none;
    }

    .disc::before{
      inset:3%;
      background:
        repeating-radial-gradient(circle at 50% 50%,
          transparent 0 5px,
          rgba(255,255,255,.035) 5px 6px,
          transparent 6px 11px);
      opacity:.9;
    }

    .disc::after{
      inset:39%;
      background:#f5f5f2;
      box-shadow:0 0 0 12px #090909;
    }

    .ring{
      position:absolute;
      left:50%;
      top:50%;
      border:1px solid rgba(255,255,255,.18);
      border-radius:50%;
      transform-style:preserve-3d;
      pointer-events:none;
    }

    .ring.r1{
      width:96%;height:96%;
      transform:translate(-50%,-50%) rotateX(73deg) rotateZ(4deg);
      animation:ringA 12s linear infinite;
    }

    .ring.r2{
      width:78%;height:78%;
      border-style:dashed;
      border-color:rgba(255,255,255,.26);
      transform:translate(-50%,-50%) rotateY(69deg) rotateZ(24deg);
      animation:ringB 9s linear infinite reverse;
    }

    .ring.r3{
      width:112%;height:112%;
      border-color:rgba(255,255,255,.1);
      transform:translate(-50%,-50%) rotateX(61deg) rotateY(22deg);
      animation:ringA 19s linear infinite reverse;
    }

    .wave{
      position:absolute;
      left:50%;
      top:50%;
      width:116%;
      height:28%;
      transform:translate(-50%,-50%) translateZ(70px);
      pointer-events:none;
    }

    .wave svg{
      width:100%;
      height:100%;
      overflow:visible;
    }

    .wave path{
      fill:none;
      stroke:#f5f5f2;
      stroke-width:1.25;
      vector-effect:non-scaling-stroke;
      stroke-linecap:round;
      opacity:.8;
      stroke-dasharray:4 10;
      animation:waveFlow 7s linear infinite;
    }

    .satellite{
      position:absolute;
      width:9px;
      height:9px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 0 22px rgba(255,255,255,.55);
      transform-style:preserve-3d;
    }

    .satellite.s1{left:2%;top:47%;animation:sat1 5.5s ease-in-out infinite}
    .satellite.s2{right:10%;top:10%;animation:sat2 7s ease-in-out infinite}
    .satellite.s3{right:1%;bottom:24%;animation:sat3 6.2s ease-in-out infinite}

    .visual-label{
      position:absolute;
      right:3%;
      bottom:7%;
      color:rgba(245,245,242,.34);
      font-size:9px;
      font-weight:650;
      letter-spacing:.13em;
      text-transform:uppercase;
      writing-mode:vertical-rl;
      transform:rotate(180deg);
    }

    /* =========================================================
       KINETIC MARQUEE
       ========================================================= */

    .marquee{
      position:absolute;
      z-index:1;
      left:0;
      right:0;
      bottom:82px;
      overflow:hidden;
      border-top:1px solid rgba(255,255,255,.07);
      border-bottom:1px solid rgba(255,255,255,.07);
      mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
      -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
      opacity:0;
      animation:fadeUp .8s var(--ease) .8s forwards;
      pointer-events:none;
    }

    .marquee-track{
      display:flex;
      width:max-content;
      animation:marquee 26s linear infinite;
    }

    .marquee-group{
      display:flex;
      align-items:center;
      gap:26px;
      padding:10px 26px 10px 0;
      color:rgba(245,245,242,.25);
      font-size:10px;
      font-weight:680;
      letter-spacing:.12em;
      text-transform:uppercase;
      white-space:nowrap;
    }

    .marquee-group i{
      width:4px;
      height:4px;
      border-radius:50%;
      background:rgba(255,255,255,.36);
      flex:0 0 auto;
    }

    /* =========================================================
       GLOBAL NAV
       ========================================================= */

    .desktop-menu-wrap{
      position:fixed;
      z-index:200;
      right:calc(22px + env(safe-area-inset-right));
      bottom:calc(22px + env(safe-area-inset-bottom));
      opacity:0;
      transform:translateY(10px);
      animation:fadeUp .62s var(--ease) .72s forwards;
    }

    .desktop-menu{
      display:flex;
      align-items:center;
      gap:2px;
      padding:5px;
      border:1px solid rgba(10,10,10,.08);
      border-radius:15px;
      background:#fff;
      box-shadow:0 10px 30px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.06);
    }

    .desktop-menu a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:38px;
      padding:0 13px;
      border-radius:10px;
      color:#111;
      font-size:13px;
      font-weight:630;
      letter-spacing:-.022em;
      white-space:nowrap;
      transition:background-color .18s ease,transform .22s var(--ease2);
    }

    .desktop-menu a:hover{background:#f0f0ed;transform:translateY(-1px)}
    .desktop-menu a[aria-current="page"]{color:#fff;background:#0a0a0a}

    .mobile-nav{
      display:none;
      position:fixed;
      z-index:999;
      right:calc(18px + env(safe-area-inset-right));
      bottom:calc(18px + env(safe-area-inset-bottom));
    }

    .mobile-menu-panel{
      position:absolute;
      right:0;
      bottom:56px;
      width:min(310px,calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
      max-height:min(70svh,430px);
      overflow-y:auto;
      padding:7px;
      border:1px solid rgba(10,10,10,.08);
      border-radius:18px;
      background:#fff;
      box-shadow:0 20px 48px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.05);
      opacity:0;
      visibility:hidden;
      transform:translateY(10px) scale(.985);
      transform-origin:right bottom;
      transition:opacity .18s ease,visibility .18s,transform .26s var(--ease);
    }

    .mobile-menu-panel nav{display:grid;gap:3px}

    .mobile-menu-panel a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:48px;
      padding:0 14px;
      border-radius:12px;
      color:#111;
      font-size:15px;
      font-weight:640;
      letter-spacing:-.025em;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    .mobile-menu-panel .menu-arrow{
      opacity:.34;
      transform:translate(-3px,3px);
      transition:opacity .16s ease,transform .18s var(--ease);
    }

    .mobile-menu-panel a:active,
    .mobile-menu-panel a.is-selected,
    .mobile-menu-panel a[aria-current="page"]{
      color:#fff;background:#0a0a0a;
    }

    .mobile-menu-panel a:active .menu-arrow,
    .mobile-menu-panel a.is-selected .menu-arrow,
    .mobile-menu-panel a[aria-current="page"] .menu-arrow{
      opacity:1;transform:translate(0,0);
    }

    .hamburger-button{
      position:relative;
      width:48px;
      height:48px;
      color:#fff;
      cursor:pointer;
      touch-action:manipulation;
      -webkit-tap-highlight-color:transparent;
    }

    .hamburger-line{
      position:absolute;
      left:50%;
      width:28px;
      height:2px;
      border-radius:999px;
      background:currentColor;
      transform:translateX(-50%);
      box-shadow:0 1px 5px rgba(0,0,0,.48);
      transition:top .27s var(--ease),transform .27s var(--ease),opacity .16s ease;
    }

    .hamburger-line:nth-child(1){top:15px}
    .hamburger-line:nth-child(2){top:23px}
    .hamburger-line:nth-child(3){top:31px}

    .mobile-nav.is-open .mobile-menu-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
    .mobile-nav.is-open .hamburger-line:nth-child(1){top:23px;transform:translateX(-50%) rotate(45deg)}
    .mobile-nav.is-open .hamburger-line:nth-child(2){opacity:0}
    .mobile-nav.is-open .hamburger-line:nth-child(3){top:23px;transform:translateX(-50%) rotate(-45deg)}

    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width:1180px) and (min-width:821px){
      .layout{
        grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);
        gap:30px;
        padding-inline:28px;
      }
      .title{font-size:clamp(68px,8.2vw,104px)}
      .orbital{width:min(42vw,500px)}
      .visual{height:min(62svh,620px)}
    }

    @media (max-width:820px){
      .desktop-menu-wrap{display:none}
      .mobile-nav{display:block}

      .page{overflow:hidden}

      .layout{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:stretch;
        gap:20px;
        padding:
          max(20px, env(safe-area-inset-top))
          max(16px, env(safe-area-inset-right))
          max(118px, calc(92px + env(safe-area-inset-bottom)))
          max(16px, env(safe-area-inset-left));
      }

      .copy{
        order:1;
        width:min(100%,620px);
        margin:0 auto;
        text-align:center;
      }

      .status{
        margin-bottom:20px;
        min-height:31px;
        font-size:9px;
      }

      .title{
        font-size:clamp(48px,14.3vw,78px);
        line-height:.9;
        letter-spacing:-.067em;
      }

      .summary{
        width:min(100%,470px);
        margin:20px auto 0;
        font-size:14px;
        line-height:1.52;
      }

      .micro{
        justify-content:center;
        margin-top:17px;
        font-size:8px;
      }

      .visual{
        order:0;
        position:absolute;
        z-index:-1;
        inset:50% auto auto 50%;
        width:min(100vw,620px);
        height:min(62svh,520px);
        transform:translate(-50%,-54%);
        opacity:.42;
      }

      .orbital{
        width:min(78vw,430px);
      }

      .disc{opacity:.88}
      .visual-label{display:none}

      .grid{
        background-size:46px 46px;
        opacity:.14;
      }

      .marquee{
        bottom:72px;
      }

      .marquee-group{
        padding-block:8px;
        font-size:9px;
      }
    }

    @media (max-width:390px){
      .layout{
        padding-inline:
          max(14px, env(safe-area-inset-left))
          max(14px, env(safe-area-inset-right));
      }
      .title{font-size:clamp(44px,13.7vw,58px)}
      .summary{font-size:13px}
      .orbital{width:min(82vw,340px)}
      .mobile-nav{
        right:calc(16px + env(safe-area-inset-right));
        bottom:calc(16px + env(safe-area-inset-bottom));
      }
    }

    @media (max-width:820px) and (orientation:landscape) and (min-width:620px){
      .layout{
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
        align-items:center;
        gap:24px;
        padding:
          max(10px, env(safe-area-inset-top))
          max(74px, calc(58px + env(safe-area-inset-right)))
          max(64px, env(safe-area-inset-bottom))
          max(16px, env(safe-area-inset-left));
      }
      .copy{text-align:left;margin:0}
      .summary{margin-left:0}
      .micro{justify-content:flex-start}
      .visual{
        position:relative;
        inset:auto;
        width:auto;
        height:min(82svh,430px);
        transform:none;
        opacity:.62;
      }
      .orbital{width:min(38vw,320px)}
      .title{font-size:clamp(42px,7vw,64px)}
      .status{margin-bottom:12px}
      .summary{margin-top:12px;font-size:12px}
      .micro{display:none}
      .marquee{display:none}
    }

    /* =========================================================
       ANIMATIONS
       ========================================================= */

    @keyframes titleIn{
      from{opacity:0;transform:translate3d(0,108%,0) rotateX(-20deg)}
      to{opacity:1;transform:translate3d(0,0,0) rotateX(0deg)}
    }

    @keyframes fadeUp{
      from{opacity:0;transform:translateY(12px)}
      to{opacity:1;transform:translateY(0)}
    }

    @keyframes visualIn{
      from{opacity:0;transform:translateY(22px) scale(.94)}
      to{opacity:1;transform:translateY(0) scale(1)}
    }

    @keyframes outlineBreath{
      0%,100%{-webkit-text-stroke-color:rgba(245,245,242,.48)}
      50%{-webkit-text-stroke-color:rgba(245,245,242,.9)}
    }

    @keyframes pulse{
      0%{opacity:.72;transform:scale(.65)}
      75%,100%{opacity:0;transform:scale(1.8)}
    }

    @keyframes discSpin{
      to{transform:rotateZ(360deg)}
    }

    @keyframes ringA{
      to{rotate:1turn}
    }

    @keyframes ringB{
      to{rotate:-1turn}
    }

    @keyframes waveFlow{
      to{stroke-dashoffset:-260}
    }

    @keyframes sat1{
      0%,100%{transform:translate3d(0,0,80px) scale(.8)}
      50%{transform:translate3d(38px,-18px,120px) scale(1.15)}
    }

    @keyframes sat2{
      0%,100%{transform:translate3d(0,0,30px)}
      50%{transform:translate3d(-30px,32px,100px)}
    }

    @keyframes sat3{
      0%,100%{transform:translate3d(0,0,70px) scale(1)}
      50%{transform:translate3d(-46px,-28px,130px) scale(.75)}
    }

    @keyframes orbFloat{
      0%,100%{margin-top:-6px}
      50%{margin-top:10px}
    }

    @keyframes marquee{
      to{transform:translateX(-50%)}
    }

    @keyframes gridMove{
      to{background-position:72px 72px}
    }

    @keyframes scan{
      to{top:110%}
    }

    @keyframes grain{
      0%{transform:translate(0,0)}
      20%{transform:translate(2%,-1%)}
      40%{transform:translate(-2%,1%)}
      60%{transform:translate(1%,2%)}
      80%{transform:translate(-1%,-2%)}
      100%{transform:translate(0,0)}
    }

    /* Keep motion active by request; amplitude remains restrained. */
    @media (prefers-reduced-motion:reduce){
      .grain,.grid,.scan,.status,.status-dot::after,
      .title-line>span,.summary,.micro,.visual,.orbital,.disc,
      .ring,.wave path,.satellite,.marquee,.marquee-track,
      .desktop-menu-wrap{
        animation-play-state:running!important;
      }
    }

    :focus-visible{
      outline:3px solid #fff;
      outline-offset:4px;
    }

    .desktop-menu :focus-visible,
    .mobile-menu-panel :focus-visible{
      outline-color:#111;
    }