:root{
  color-scheme: dark;
  --ease: cubic-bezier(.22,.61,.36,1);

  --cyan: rgba(90,220,255,1);
  --pink: rgba(255,72,214,1);
  --sun:  rgba(255,206,120,1);

  --txt:  rgba(236,242,255,.96);
  --mut:  rgba(198,214,255,.72);
  --whit: rgba(255,255,255,.72);

  --green: rgba(98,255,170,1);
  --yellow: rgba(255,216,102,1);
  --red: rgba(255,118,118,1);

  --grad: linear-gradient(90deg, var(--cyan), var(--pink));
  --panelW: 720px;
  --radius: 28px;

  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);
  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:#050611;
  color: var(--txt);
  overflow:hidden;
  overscroll-behavior: none;
}

#spxScene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.spx{
  position:relative;
  z-index:1;
  height:100svh;
  padding: calc(16px + var(--safeT)) calc(16px + var(--safeR)) calc(16px + var(--safeB)) calc(16px + var(--safeL));
  display:grid;
  place-items:center;
}

.hero{
  width: min(1080px, 100%);
  display:flex;
  flex-direction:column;
  gap: 14px;
  justify-content:center;
  align-items:flex-start;
}

.topbar{ width:100%; display:flex; justify-content:flex-start; }

.brand{
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(2,6,18,.14);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

.brandDot{
  width:10px;height:10px;border-radius:999px;
  background: var(--grad);
  box-shadow: 0 0 18px rgba(90,220,255,.34), 0 0 26px rgba(255,72,214,.22);
}
.brandWord{ letter-spacing:.22em; font-weight: 950; font-size: 12px; }
.brandTag{
  font-size:11px; font-weight:900; opacity:.78;
  padding-left:10px; border-left:1px solid rgba(255,255,255,.12);
}

.heroCopy{
  max-width: 980px;
  transition: opacity .42s var(--ease), transform .62s var(--ease), filter .62s var(--ease);
  will-change: opacity, transform, filter;
}
.hero.is-open .heroCopy{
  opacity:0;
  transform: translateY(-18px) scale(.99);
  filter: blur(12px);
  pointer-events:none;
}

.kicker{ display:flex; gap:10px; align-items:center; margin: 6px 0 12px; }
.chip{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(2,6,18,.14);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  font-weight: 950;
}
.ghost{ color: rgba(198,214,255,.62); font-weight: 850; }

.h1{
  margin:0 0 12px;
  font-size: clamp(40px, 6vw, 78px);
  line-height:1.03;
  letter-spacing:-.03em;
  text-shadow: 0 40px 120px rgba(0,0,0,.70);
}
.grad{
  background-image: var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.p{
  margin:0 0 14px;
  max-width: 920px;
  color: var(--whit);
  font-weight: 650;
  line-height:1.85;
  font-size: 16px;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
.meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 4px; }
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(2,6,18,.12);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  font-weight: 850;
  font-size: 12px;
}

.cta{
  width: min(var(--panelW), 100%);
  display:grid;
  gap: 10px;
}

.ctaBtn{
  width:70%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px;
  border-radius: 22px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  font-weight: 950;
  letter-spacing: .02em;

  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow: 0 40px 160px rgba(0,0,0,.62);
  user-select:none;
  transform: translateZ(0);
}

.ctaBg{
  position:absolute; inset:-70%;
  background:
    radial-gradient(900px 360px at var(--mx,50%) var(--my,50%), rgba(255,206,120,.22), transparent 62%),
    radial-gradient(980px 420px at 72% 35%, rgba(255,72,214,.18), transparent 64%),
    radial-gradient(980px 420px at 36% 70%, rgba(90,220,255,.20), transparent 64%);
  filter: blur(18px);
  opacity:.86;
  pointer-events:none;
}

.ctaSheen{
  position:absolute; inset:-90%;
  background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.34) 50%, transparent 64%);
  transform: translateX(-55%);
  opacity: .18;
  pointer-events:none;
  animation: sheenLoop 4.4s var(--ease) infinite;
}
@keyframes sheenLoop{
  0%{ transform: translateX(-60%); opacity:.06; }
  18%{ opacity:.42; }
  46%{ transform: translateX(44%); opacity:.26; }
  100%{ transform: translateX(44%); opacity:.06; }
}

.ctaBtn::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0px, rgba(255,255,255,.02) 2px, rgba(255,255,255,0) 7px);
  opacity:.10;
  pointer-events:none;
}

.ctaBtn:hover{ border-color: rgba(255,206,120,.22); background: rgba(255,255,255,.08); }
.ctaBtn:active{ transform: scale(.992); }

.ctaLabel,.ctaIcon{ position:relative; z-index:1; }
.ctaIcon{ opacity:.92; font-weight: 950; }

.ctaFine{
  color: rgba(198,214,255,.72);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.6;
  text-shadow: 0 20px 80px rgba(0,0,0,.65);
}
.legalLink{
  margin-left: 10px;
  color: rgba(236,242,255,.96);
  text-decoration:none;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
}
.legalLink:hover{ border-color: rgba(255,206,120,.28); }

.hero.is-open .ctaBtn{
  opacity:0;
  transform: translateY(-10px) scale(.992);
  pointer-events:none;
  transition: opacity .18s var(--ease), transform .35s var(--ease);
}

/* Burst particles container injected by JS */
.portalBurst{
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events:none;
}
.portalBurst .p{
  position:absolute;
  width: 2px;
  height: 16px;
  border-radius: 4px;
  transform-origin: 50% 100%;
  opacity: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.95), rgba(255,206,120,.0));
  filter: drop-shadow(0 0 10px rgba(255,206,120,.30));
}

/* Portal panel (no “rotating box”: rim breath instead of spin) */
.portalPanel{
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 50%;
  width: min(var(--panelW), calc(100vw - 24px));
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  overflow:hidden;
  opacity:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 560px at 20% 18%, rgba(90,220,255,.30), transparent 62%),
    radial-gradient(1100px 560px at 80% 30%, rgba(255,72,214,.28), transparent 64%),
    radial-gradient(900px 480px at 55% 78%, rgba(255,206,120,.18), transparent 64%),
    linear-gradient(180deg, rgba(10,14,30,.18), rgba(10,14,30,.66));

  backdrop-filter: blur(18px);
  box-shadow: 0 90px 260px rgba(0,0,0,.82);

  clip-path: circle(0px at var(--px, 50%) var(--py, 50%));
  filter: blur(16px) saturate(1.30);
}

.portalPanel::before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  padding: 1px;
  background: conic-gradient(from 180deg,
    rgba(90,220,255,.0),
    rgba(90,220,255,.58),
    rgba(255,206,120,.42),
    rgba(255,72,214,.58),
    rgba(90,220,255,.0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.70;
  animation: rimBreath 2.8s var(--ease) infinite alternate;
  pointer-events:none;
}
@keyframes rimBreath{
  from{ opacity:.44; filter: blur(0px); }
  to  { opacity:.88; filter: blur(1px); }
}

.portalPanel::after{
  content:"";
  position:absolute;
  inset:-22%;
  background:
    radial-gradient(900px 420px at 25% 35%, rgba(255,72,214,.30), transparent 60%),
    radial-gradient(980px 520px at 75% 45%, rgba(90,220,255,.25), transparent 62%),
    radial-gradient(860px 520px at 52% 78%, rgba(255,206,120,.20), transparent 62%),
    linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12), transparent 62%);
  filter: blur(22px);
  opacity:.42;
  animation: fogDrift 8.4s var(--ease) infinite alternate;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes fogDrift{
  from{ transform: translate3d(-2.5%, -2%, 0) scale(1); opacity:.30; }
  to{ transform: translate3d(2%, 1%, 0) scale(1.02); opacity:.52; }
}

.portalPanel.is-open{
  opacity:1;
  pointer-events:auto;
  filter: blur(0px) saturate(1.10);
  transition: filter .52s var(--ease);
}

.portalTop{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.portalTitle .small{ font-size: 11px; letter-spacing:.18em; text-transform:uppercase; font-weight: 950; opacity:.85; }
.portalTitle .big{ font-size: 16px; font-weight: 950; }

.portalClose{
  width: 44px; height: 44px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  font-weight: 950;
  cursor:pointer;
}
.portalClose:hover{ border-color: rgba(255,72,214,.22); }

.portalForm{
  position:relative; z-index:2;
  padding: 16px;
  display:grid;
  gap: 12px;
}

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row{ display:grid; gap: 8px; }
label{ font-weight: 900; }

input{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: var(--txt);
  outline:none;
}
input:focus{
  border-color: rgba(255,206,120,.28);
  box-shadow: 0 0 0 4px rgba(255,206,120,.10);
}

.consent{
  display:flex; align-items:center; gap:10px;
  color: var(--mut);
  font-weight: 850;
}
.consent input{ width:16px; height:16px; }

.submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  font-weight: 950;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.submit:hover{ border-color: rgba(255,206,120,.22); }
.submit:disabled{ opacity:.65; cursor:not-allowed; }

.dot{
  width: 10px; height:10px; border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 18px rgba(255,255,255,.18);
  animation: pulse 1.2s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.65; }
  50%{ transform: scale(1.35); opacity: 1; }
}

.inlineMsg{
  min-height: 42px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--mut);
  font-weight: 900;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .32s var(--ease);
}
.inlineMsg.show{ opacity:1; transform: translateY(0); }
.inlineMsg.success{ border-color: rgba(98,255,170,.26); background: rgba(98,255,170,.12); color: rgba(210,255,235,.98); }
.inlineMsg.error{ border-color: rgba(255,118,118,.30); background: rgba(255,118,118,.12); color: rgba(255,220,220,.98); }
.inlineMsg.warn{ border-color: rgba(255,216,102,.30); background: rgba(255,216,102,.12); color: rgba(255,242,200,.98); }

.portalStatus{
  position: fixed;
  z-index: 65;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(var(--panelW), calc(100vw - 24px));
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,30,.52);
  backdrop-filter: blur(18px);
  box-shadow: 0 90px 260px rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 18px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s var(--ease);
}
.portalStatus.success{ border-color: rgba(98,255,170,.30); box-shadow: 0 0 0 10px rgba(98,255,170,.08), 0 90px 260px rgba(0,0,0,.82); }
.portalStatus.error{ border-color: rgba(255,118,118,.32); box-shadow: 0 0 0 10px rgba(255,118,118,.08), 0 90px 260px rgba(0,0,0,.82); }
.portalStatus.warn{ border-color: rgba(255,216,102,.32); box-shadow: 0 0 0 10px rgba(255,216,102,.08), 0 90px 260px rgba(0,0,0,.82); }

.hp{ position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }

/* Cookie */
.cookieBar{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 90;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,30,.52);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
  transform: translateY(18px);
  opacity: 0;
  pointer-events:none;
  transition: opacity .28s var(--ease), transform .42s var(--ease);
}
.cookieBar.show{ transform: translateY(0); opacity: 1; pointer-events:auto; }
.cookieText{ color: rgba(198,214,255,.86); font-weight: 800; }
.cookieText a{ color: rgba(236,242,255,.95); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.18); }
.cookieBtn{
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,206,120,.14);
  color: rgba(236,242,255,.96);
  font-weight: 950;
  cursor:pointer;
}
.cookieBtn:hover{ border-color: rgba(255,206,120,.28); }

/* Privacy modal (animated) */
.legalModal{
  position: fixed; inset: 0;
  z-index: 100;
  display:none;
}
.legalModal.show{ display:block; }

.legalBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(10px);
  opacity:0;
  animation: fadeIn .22s var(--ease) forwards;
}
@keyframes fadeIn{ to{ opacity:1; } }

.legalShell{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(980px, calc(100vw - 16px));
  height: min(80svh, 780px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,14,30,.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 70px 240px rgba(0,0,0,.78);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  animation: modalIn .26s var(--ease) forwards;
}
@keyframes modalIn{
  to{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}

.legalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.legalBrand{ display:flex; align-items:center; gap: 10px; }

.legalX{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  cursor:pointer;
  font-weight: 950;
}
.legalX:hover{ border-color: rgba(255,206,120,.22); }

.legalFrame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background: transparent;
}

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
  .h1{ font-size: clamp(36px, 8vw, 56px); }
  .spx{ padding: calc(14px + var(--safeT)) calc(14px + var(--safeR)) calc(14px + var(--safeB)) calc(14px + var(--safeL)); }
  .ctaBtn{ padding: 16px 16px; border-radius: 20px; }
  .portalPanel{ width: calc(100vw - 16px); border-radius: 22px; }
  .legalShell{
    width: calc(100vw - 12px);
    height: calc(100svh - 12px);
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce){
  .heroCopy,.ctaBtn,.portalPanel,.portalStatus,.inlineMsg,.cookieBar,.legalBackdrop,.legalShell{ animation:none!important; transition:none!important; }
  .ctaSheen,.portalPanel::before,.portalPanel::after{ animation:none!important; }
}

/* place About button next to main CTA */
    .ctaRow{
      display:flex;
      gap: 12px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-start;
    }

    /* About button (matches CTA vibe, but secondary) */
    .aboutLink{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(90,220,255,.16), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.05);
      color: rgba(240,244,255,.98);
      font-weight: 880;
      letter-spacing: .02em;
      cursor:pointer;
      text-decoration:none;
      backdrop-filter: blur(12px) saturate(1.25);
      box-shadow: 0 14px 46px rgba(0,0,0,.18);
      height: 54px;
    }
    .aboutLink:hover{ border-color: rgba(90,220,255,.38); }
    .aboutLink .spark{
      width: 18px; height: 18px; border-radius: 999px;
      background: radial-gradient(circle, rgba(255,255,255,.95), rgba(90,220,255,.60), rgba(255,72,214,.18), rgba(0,0,0,0) 72%);
      box-shadow: 0 0 18px rgba(90,220,255,.22);
      flex: 0 0 auto;
    }

    /* =========================================================
       ✅ ABOUT MODAL — premium open/close animation (no display:none)
       ========================================================= */

    /* modal wrapper */
    .aboutModal{
      position: fixed;
      inset: 0;
      z-index: 9998;

      /* ✅ instead of display:none (animatable) */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      transition: opacity 260ms ease, visibility 0s linear 260ms;
      will-change: opacity;
    }
    .aboutModal.show{
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 260ms ease, visibility 0s linear 0s;
    }

    .aboutBackdrop{
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 30%, rgba(20,30,80,.24), rgba(0,0,0,.54)),
        rgba(0,0,0,.40);
      backdrop-filter: blur(12px) saturate(1.15);

      opacity: 0;
      transition: opacity 320ms ease;
      will-change: opacity;
    }
    .aboutModal.show .aboutBackdrop{ opacity: 1; }

    .aboutShell{
      position: relative;
      width: min(1120px, calc(100vw - 28px));
      height: min(82vh, 820px);
      margin: 6vh auto 0;
      border-radius: 26px;
      overflow: hidden;

      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 28px 110px rgba(0,0,0,.55);

      /* Brighter glass nebula */
      background:
        radial-gradient(circle at 18% 14%, rgba(90,220,255,.20), rgba(0,0,0,0) 55%),
        radial-gradient(circle at 78% 12%, rgba(255,72,214,.16), rgba(0,0,0,0) 58%),
        radial-gradient(circle at 52% 115%, rgba(255,206,120,.12), rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(26,34,86,.70), rgba(12,14,30,.72));
      backdrop-filter: blur(16px) saturate(1.22);
      -webkit-backdrop-filter: blur(16px) saturate(1.22);

      /* ✅ base (closed) state */
      opacity: 0;
      transform: translateY(18px) scale(.975);
      filter: saturate(1.05) brightness(.98);
      will-change: transform, opacity, filter;

      transition:
        transform 720ms cubic-bezier(.18,.82,.18,1),
        opacity 280ms ease,
        filter 520ms ease;
    }
    .aboutModal.show .aboutShell{
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: saturate(1.12) brightness(1);
    }

    /* Optional: closing micro-feel (JS adds .isClosing) */
    .aboutModal.isClosing{
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms ease, visibility 0s linear 220ms;
    }
    .aboutModal.isClosing .aboutBackdrop{ opacity: 0; transition: opacity 220ms ease; }
    .aboutModal.isClosing .aboutShell{
      opacity: 0;
      transform: translateY(10px) scale(.985);
      filter: saturate(1.05) brightness(.98);
      transition: transform 380ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease, filter 220ms ease;
    }

    /* subtle star drift overlay */
    .aboutShell::before{
      content:"";
      position:absolute;
      inset:-40px;
      background:
        radial-gradient(circle at 12% 20%, rgba(255,255,255,.20) 0 1px, rgba(0,0,0,0) 2px),
        radial-gradient(circle at 34% 62%, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,0) 2px),
        radial-gradient(circle at 70% 28%, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 2px),
        radial-gradient(circle at 86% 58%, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,0) 2px);
      opacity: .22;
      pointer-events:none;
      filter: blur(.2px);
      transform: translate3d(0,0,0);
      animation: aboutStars 14s linear infinite;
    }
    @keyframes aboutStars{
      0%{ transform: translate3d(0,0,0); }
      100%{ transform: translate3d(-26px,18px,0); }
    }

    /* top bar */
    .aboutTop{
      position: relative;
      z-index: 1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 14px 12px;
      border-bottom: 1px solid rgba(255,255,255,.16);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    }
    .aboutBrand{
      display:flex;
      align-items:center;
      gap: 10px;
      user-select:none;
    }
    .aboutBrand .dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: radial-gradient(circle, rgba(255,255,255,.95), rgba(90,220,255,.62), rgba(0,0,0,0) 70%);
      box-shadow: 0 0 18px rgba(90,220,255,.28);
    }
    .aboutBrand .name{
      font-weight: 920;
      letter-spacing: .14em;
      font-size: 13px;
      color: rgba(246,248,255,.98);
    }
    .aboutBrand .tag{
      margin-left: 6px;
      font-weight: 860;
      font-size: 12px;
      color: rgba(240,244,255,.98);
      opacity: .95;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
    }
    .aboutX{
      width: 44px; height: 40px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: rgba(246,248,255,.98);
      cursor:pointer;
      backdrop-filter: blur(10px) saturate(1.2);
    }
    .aboutX:hover{ border-color: rgba(255,255,255,.26); }

    /* layout: rail + content */
    .aboutBody{
      position: relative;
      z-index: 1;
      display:grid;
      grid-template-columns: 320px 1fr;
      height: calc(100% - 60px);
      min-height: 0;
    }

    /* left rail */
    .aboutRail{
      border-right: 1px solid rgba(255,255,255,.16);
      padding: 14px 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
      overflow: auto;
    }

    .aboutHeroMini{
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at 18% 16%, rgba(90,220,255,.16), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.06);
      padding: 12px 12px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
      margin-bottom: 12px;
      backdrop-filter: blur(12px) saturate(1.2);
    }
    .aboutHeroMini .k{
      display:flex; gap: 10px; align-items:center; flex-wrap:wrap;
      margin-bottom: 10px;
    }

    .aboutChip{
      display:inline-flex; align-items:center; gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: rgba(248,250,255,.98);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .aboutChip .miniDot{
      width: 8px; height: 8px; border-radius:999px;
      background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,206,120,.62), rgba(0,0,0,0) 70%);
      box-shadow: 0 0 14px rgba(255,206,120,.18);
    }
    .aboutGhost{
      color: rgba(240,244,255,.98);
      font-weight: 760;
      font-size: 12px;
      opacity: .96;
    }

    /* rail hint (NOT heavy levels) */
    .aboutHint{
      margin-top: 10px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.05);
      padding: 10px 10px;
      color: rgba(240,244,255,.98);
      font-size: 12px;
      font-weight: 720;
      line-height: 1.45;
      opacity: .96;
    }

    .aboutTabs{
      display:grid;
      gap: 8px;
      margin-top: 12px;
    }
    .aboutTab{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.05);
      color: rgba(244,246,255,.98);
      cursor:pointer;
      user-select:none;
      text-align:left;
      backdrop-filter: blur(10px) saturate(1.2);
    }
    .aboutTab:hover{ border-color: rgba(90,220,255,.32); }
    .aboutTab.active{
      border-color: rgba(90,220,255,.44);
      background:
        radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(90,220,255,.18), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.06);
      color: rgba(250,252,255,1);
      box-shadow: 0 0 0 1px rgba(90,220,255,.12) inset;
    }
    .aboutTab .ic{
      width: 28px; height: 28px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      display:flex; align-items:center; justify-content:center;
      flex: 0 0 auto;
      color: rgba(250,252,255,1);
      font-weight: 950;
      font-size: 12px;
    }
    .aboutTab .tx{
      display:grid;
      gap: 2px;
      flex: 1 1 auto;
    }
    .aboutTab .tx b{
      font-weight: 950;
      letter-spacing: -.01em;
      font-size: 13px;
    }
    .aboutTab .tx span{
      font-size: 12px;
      color: rgba(240,244,255,.98);
      font-weight: 720;
      line-height: 1.35;
      opacity: .95;
    }

    /* =========================================================
       ✅ TAB PANELS — smooth crossfade + slide, no display:none
       ========================================================= */

    .aboutContent{
      position: relative;
      padding: 0;
      overflow: hidden;
      min-height: 0;
    }

    .aboutPanel{
      position: absolute;
      inset: 0;
      overflow: auto;
      padding: 16px 16px 18px;

      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;

      transition:
        opacity 220ms ease,
        transform 720ms cubic-bezier(.22,.61,.36,1);
      will-change: opacity, transform;
    }
    .aboutPanel.active{
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .aboutPanel.leaving{
      opacity: 0;
      transform: translateY(-10px);
      pointer-events: none;
    }
    .aboutPanel.entering{
      opacity: 0;
      transform: translateY(14px);
    }

    /* Make tab click feel “alive” */
    @keyframes aboutPulse{
      0%{ transform: scale(1); box-shadow: 0 0 0 rgba(90,220,255,0); }
      60%{ transform: scale(1.05); box-shadow: 0 0 28px rgba(90,220,255,.18); }
      100%{ transform: scale(1); box-shadow: 0 0 0 rgba(90,220,255,0); }
    }
    .aboutTab.active .ic{
      animation: aboutPulse 520ms cubic-bezier(.22,.61,.36,1);
    }

    /* TYPO / CONTENT (unchanged) */
    .aboutTitle{
      margin: 0 0 8px;
      font-size: 26px;
      letter-spacing: -.02em;
      color: rgba(252,252,255,1);
      line-height: 1.15;
      text-shadow: 0 10px 40px rgba(0,0,0,.16);
    }
    .aboutTitle .grad{
      background-image: linear-gradient(90deg, rgba(90,220,255,1), rgba(255,72,214,1));
      -webkit-background-clip:text;
      background-clip:text;
      color: transparent;
    }
    .aboutLead{
      margin: 0 0 14px;
      color: rgba(244,246,255,.98);
      line-height: 1.75;
      font-weight: 720;
      max-width: 78ch;
      opacity: .96;
    }

    .aboutChips{
      display:flex;
      flex-wrap:wrap;
      gap: 8px;
      margin: 10px 0 12px;
    }
    .aboutChips .chip{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: rgba(252,252,255,1);
      font-weight: 900;
      font-size: 12px;
      white-space: nowrap;
    }
    .aboutChips .chip.ghost{
      background: rgba(255,255,255,.04);
      opacity: .90;
    }

    .aboutGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 980px){
      .aboutBody{ grid-template-columns: 1fr; }
      .aboutRail{ border-right: none; border-bottom: 1px solid rgba(255,255,255,.16); }
      .aboutGrid{ grid-template-columns: 1fr; }
    }

    .aboutCard{
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.06);
      padding: 14px 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
      backdrop-filter: blur(12px) saturate(1.2);
    }
    .aboutCard h3{
      margin: 0 0 8px;
      color: rgba(252,252,255,1);
      font-weight: 950;
      letter-spacing: -.01em;
      font-size: 15px;
    }
    .aboutCard p{
      margin: 0;
      color: rgba(244,246,255,.98);
      line-height: 1.65;
      font-weight: 680;
      opacity: .96;
    }
    .aboutList{
      margin: 10px 0 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 8px;
    }
    .aboutList li{
      display:flex;
      gap: 10px;
      align-items:flex-start;
      color: rgba(244,246,255,.98);
      font-weight: 680;
      line-height: 1.55;
      opacity: .96;
    }
    .aboutList .bullet{
      width: 18px; height: 18px;
      border-radius: 999px;
      background: rgba(90,220,255,.14);
      border: 1px solid rgba(90,220,255,.28);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      margin-top: 2px;
      color: rgba(252,252,255,1);
      font-size: 12px;
      font-weight: 950;
      box-shadow: 0 0 18px rgba(90,220,255,.14);
    }

    /* small optional card */
    .aboutCardSmall{
      margin-top: 12px;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.16);
      background:
        radial-gradient(circle at 22% 20%, rgba(90,220,255,.12), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.05);
      padding: 12px 14px;
      backdrop-filter: blur(12px) saturate(1.2);
    }
    .aboutCardSmall h3{ margin:0 0 6px; font-size: 14px; font-weight: 950; color: rgba(252,252,255,1); }
    .aboutCardSmall p{ margin:0; color: rgba(244,246,255,.98); opacity:.95; line-height:1.6; font-weight:680; }

    .aboutCTA{
      margin-top: 14px;
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items:center;
    }
    .aboutBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.18);
      background:
        radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(90,220,255,.20), rgba(0,0,0,0) 55%),
        rgba(255,255,255,.06);
      color: rgba(252,252,255,1);
      font-weight: 920;
      cursor:pointer;
      backdrop-filter: blur(12px) saturate(1.2);
      box-shadow: 0 14px 46px rgba(0,0,0,.18);
    }
    .aboutBtn:hover{ border-color: rgba(90,220,255,.38); }
    .aboutBtn.secondary{
      background: rgba(255,255,255,.04);
      font-weight: 820;
      color: rgba(240,244,255,.98);
      box-shadow: none;
    }

    /* Mobile: rail becomes horizontal tabs */
    @media (max-width: 980px){
      .aboutTabs{
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 1fr);
        overflow: auto;
        padding-bottom: 2px;
      }
      .aboutTab{ min-width: 220px; }
      .aboutHeroMini{ position: sticky; top: 0; z-index: 2; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .aboutModal, .aboutBackdrop, .aboutShell, .aboutPanel{
        transition: none !important;
        transform: none !important;
        animation: none !important;
      }
    }