/* GhostCore Systems™ visual system v5 — iPhone-first Spectral Audio */
:root{
  color-scheme:dark;
  --bg:#05070b;
  --bg2:#090d14;
  --panel:rgba(13,18,28,.78);
  --panel-strong:rgba(11,15,24,.94);
  --text:#f7f9ff;
  --muted:#a9b4c7;
  --violet:#7c5cff;
  --violet2:#9b7dff;
  --cyan:#38e8ff;
  --blue:#397bff;
  --green:#42e6a4;
  --warning:#ffbd59;
  --edge:rgba(176,193,222,.16);
  --edge-hi:rgba(56,232,255,.42);
  --glow:rgba(124,92,255,.28);
  --mx:50vw;
  --my:24vh;
  --radius:24px;
  --shadow:0 28px 90px rgba(0,0,0,.48);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

*{box-sizing:border-box}
html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  margin:0;
  min-width:320px;
  min-height:100svh;
  overflow-x:hidden;
  background:
    radial-gradient(70rem 48rem at 110% -10%,rgba(124,92,255,.20),transparent 64%),
    radial-gradient(58rem 40rem at -10% 32%,rgba(56,232,255,.08),transparent 68%),
    linear-gradient(180deg,#070a10 0%,#05070b 42%,#030407 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-synthesis:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  opacity:.32;
  background-image:
    linear-gradient(rgba(56,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,92,255,.028) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.5) 62%,transparent);
}
body::after{
  content:"";
  position:fixed;
  inset:-30%;
  z-index:-6;
  pointer-events:none;
  background:conic-gradient(from 210deg at 50% 50%,transparent,rgba(124,92,255,.055),transparent 22%,rgba(56,232,255,.035),transparent 45%);
  animation:ambientRotate 32s linear infinite;
  transform:translate3d(0,0,0);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,a{-webkit-touch-callout:none}
::selection{background:rgba(124,92,255,.42);color:#fff}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  height:2px;
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(var(--scroll-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,var(--violet),var(--cyan),#fff);
  box-shadow:0 0 16px rgba(56,232,255,.7);
}

.ambient-stage{
  position:fixed;
  inset:0;
  z-index:-4;
  overflow:hidden;
  pointer-events:none;
}
.ambient-stage i{position:absolute;display:block;will-change:transform}
.ambient-a{
  width:54vw;height:54vw;
  min-width:420px;min-height:420px;
  right:-18vw;top:4vh;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.18),rgba(57,123,255,.08) 34%,transparent 68%);
  filter:blur(34px);
  animation:floatA 17s ease-in-out infinite alternate;
}
.ambient-b{
  width:42vw;height:42vw;
  min-width:340px;min-height:340px;
  left:-16vw;top:42vh;
  border-radius:50%;
  background:radial-gradient(circle,rgba(56,232,255,.10),rgba(124,92,255,.045) 40%,transparent 70%);
  filter:blur(42px);
  animation:floatB 21s ease-in-out infinite alternate;
}
.ambient-grid{
  inset:0;
  opacity:.18;
  background:
    linear-gradient(115deg,transparent 0 49.5%,rgba(56,232,255,.08) 50%,transparent 50.5%),
    linear-gradient(25deg,transparent 0 49.5%,rgba(124,92,255,.06) 50%,transparent 50.5%);
  background-size:220px 220px;
  mask-image:radial-gradient(circle at var(--mx) var(--my),black 0,rgba(0,0,0,.62) 18rem,transparent 36rem);
}

.site-shell{position:relative;isolation:isolate}
.wrap{
  width:min(1220px,calc(100% - 44px));
  margin-inline:auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding-top:var(--safe-top);
  background:linear-gradient(180deg,rgba(5,7,11,.90),rgba(5,7,11,.72));
  border-bottom:1px solid rgba(124,92,255,.18);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(124,92,255,.15),rgba(56,232,255,.72) 50%,rgba(124,92,255,.18),transparent 97%);
  opacity:.66;
}
.nav-shell{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-lockup img{
  width:42px;height:42px;
  filter:drop-shadow(0 0 16px rgba(124,92,255,.34)) drop-shadow(0 8px 18px rgba(0,0,0,.4));
  animation:logoBreath 4.8s ease-in-out infinite;
}
.wordmark-core{
  font-size:1rem;
  font-weight:850;
  letter-spacing:-.025em;
  white-space:nowrap;
  background:linear-gradient(110deg,#fff 0%,#dfe7ff 32%,var(--cyan) 64%,var(--violet2) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
nav{
  display:flex;
  align-items:center;
  gap:8px;
}
nav a{
  position:relative;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border-radius:999px;
  color:var(--muted);
  font-size:.84rem;
  font-weight:720;
  letter-spacing:.015em;
  transition:color .2s ease,background .2s ease,transform .2s ease;
}
nav a::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  background:linear-gradient(120deg,rgba(124,92,255,.14),rgba(56,232,255,.06));
  opacity:0;
  transform:scale(.92);
  transition:opacity .2s ease,transform .2s ease;
}
nav a:hover,nav a:focus-visible,.nav-active{color:#fff}
nav a:hover::before,nav a:focus-visible::before,.nav-active::before{opacity:1;transform:scale(1)}
nav a:focus-visible,.btn:focus-visible,.brand-lockup:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.hero{
  position:relative;
  min-height:min(860px,calc(100svh - 80px));
  display:flex;
  align-items:center;
  padding:clamp(64px,8vw,110px) 0;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:720px;height:720px;
  left:50%;top:48%;
  transform:translate(-8%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(124,92,255,.13),rgba(57,123,255,.055) 38%,transparent 67%);
  filter:blur(8px);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,232,255,.42),rgba(124,92,255,.18),transparent);
}
.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);
  align-items:center;
  gap:clamp(44px,6vw,86px);
}
.hero-copyblock{min-width:0}
.kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--cyan);
  font:800 .71rem/1.3 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.kicker::before{
  content:"";
  width:38px;height:1px;
  background:linear-gradient(90deg,var(--violet),var(--cyan),transparent);
  box-shadow:0 0 12px rgba(56,232,255,.5);
}
h1,h2,h3{margin-top:0;color:var(--text)}
h1{
  max-width:820px;
  margin:22px 0 24px;
  font-size:clamp(3.3rem,7vw,6.9rem);
  line-height:.92;
  font-weight:850;
  letter-spacing:-.068em;
  text-wrap:balance;
  background:linear-gradient(110deg,#fff 4%,#eef2ff 34%,var(--cyan) 66%,#b6a6ff 94%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 18px 48px rgba(124,92,255,.10));
}
.hero-copy{
  max-width:690px;
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem,1.55vw,1.16rem);
  line-height:1.72;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.btn{
  position:relative;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  overflow:hidden;
  border:1px solid var(--edge);
  border-radius:999px;
  font-weight:800;
  font-size:.88rem;
  letter-spacing:.015em;
  transform:translateZ(0);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn::after{
  content:"";
  position:absolute;
  top:-70%;bottom:-70%;width:46%;
  left:-60%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transition:left .55s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::after{left:120%}
.btn.primary{
  color:#04070b;
  border-color:rgba(56,232,255,.72);
  background:linear-gradient(110deg,var(--violet),var(--cyan));
  box-shadow:0 16px 50px rgba(124,92,255,.25),0 0 0 1px rgba(255,255,255,.18) inset;
}
.btn.secondary{
  color:#fff;
  background:rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.btn:hover{transform:translateY(-2px)}
.btn.primary:hover{box-shadow:0 22px 68px rgba(124,92,255,.34),0 0 26px rgba(56,232,255,.12)}
.btn.secondary:hover{border-color:rgba(56,232,255,.38);background:rgba(124,92,255,.08)}

.prelaunch{
  margin-top:24px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  padding:15px 17px;
  border:1px solid rgba(56,232,255,.24);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(124,92,255,.085),rgba(56,232,255,.025));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  color:var(--muted);
  font-size:.82rem;
  line-height:1.58;
}
.prelaunch b{color:var(--cyan);letter-spacing:.04em}
.status-dot{
  width:9px;height:9px;
  margin-top:5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(56,232,255,.08),0 0 22px rgba(56,232,255,.7);
  animation:statusPulse 2.4s ease-in-out infinite;
}

.hero-visual{
  --rx:0deg;
  --ry:0deg;
  --tx:0px;
  --ty:0px;
  position:relative;
  min-width:0;
  perspective:1100px;
  transform:translate3d(var(--tx),var(--ty),0);
}
.visual-console{
  position:relative;
  min-height:570px;
  padding:25px;
  overflow:hidden;
  border:1px solid rgba(56,232,255,.28);
  border-radius:34px;
  background:
    linear-gradient(160deg,rgba(22,29,43,.80),rgba(6,9,14,.94) 65%),
    radial-gradient(circle at 50% 0,rgba(124,92,255,.18),transparent 45%);
  box-shadow:
    0 40px 110px rgba(0,0,0,.54),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 80px rgba(124,92,255,.09);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  transform:rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease;
  will-change:transform;
}
.visual-console::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from 210deg,transparent 0 12%,rgba(56,232,255,.58) 20%,transparent 28% 55%,rgba(124,92,255,.62) 65%,transparent 77%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.75;
  animation:borderSpin 9s linear infinite;
  pointer-events:none;
}
.visual-console::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
  mix-blend-mode:soft-light;
  animation:scanMove 7s linear infinite;
}
.hero-visual:hover .visual-console{border-color:rgba(56,232,255,.5);box-shadow:0 48px 130px rgba(0,0,0,.58),0 0 100px rgba(124,92,255,.14)}
.visual-halo{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(18px);
  opacity:.8;
}
.halo-one{
  width:72%;aspect-ratio:1;
  right:-12%;top:-12%;
  background:radial-gradient(circle,rgba(124,92,255,.22),transparent 68%);
  animation:haloFloat 9s ease-in-out infinite alternate;
}
.halo-two{
  width:62%;aspect-ratio:1;
  left:-13%;bottom:-16%;
  background:radial-gradient(circle,rgba(56,232,255,.12),transparent 68%);
  animation:haloFloat 12s ease-in-out infinite alternate-reverse;
}
.visual-grid{
  position:absolute;
  inset:9% -9% -8% 10%;
  border-radius:32px;
  opacity:.28;
  transform:perspective(700px) rotateX(66deg) translateY(20%);
  transform-origin:center bottom;
  background-image:
    linear-gradient(rgba(56,232,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,92,255,.12) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to top,black,transparent 84%);
}
.console-topline{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#8794aa;
  font:800 .61rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.console-topline b{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--cyan);
}
.console-topline b::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px rgba(66,230,164,.8);
}
.visual-core{
  position:relative;
  min-height:400px;
  display:grid;
  place-items:center;
  isolation:isolate;
  transform:translateZ(35px);
}
.visual-logo{
  position:relative;
  z-index:6;
  width:158px;height:158px;
  display:grid;
  place-items:center;
  border-radius:42%;
  background:radial-gradient(circle at 50% 42%,rgba(18,28,44,.62),rgba(4,7,12,.2) 72%);
  box-shadow:0 0 70px rgba(124,92,255,.12);
}
.visual-logo img{
  width:128px;height:128px;
  filter:drop-shadow(0 0 30px rgba(124,92,255,.28)) drop-shadow(0 20px 30px rgba(0,0,0,.4));
  animation:logoFloat 5.2s ease-in-out infinite;
}
.orbit{
  position:absolute;
  left:50%;top:50%;
  border:1px solid rgba(56,232,255,.2);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 28px rgba(124,92,255,.06) inset;
}
.orbit::before{
  content:"";
  position:absolute;
  width:8px;height:8px;
  top:50%;left:-4px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(56,232,255,.9);
}
.orbit-a{width:230px;height:230px;animation:orbitSpin 10s linear infinite}
.orbit-b{width:300px;height:300px;border-style:dashed;border-color:rgba(124,92,255,.22);animation:orbitSpin 16s linear infinite reverse}
.orbit-c{width:355px;height:355px;border-color:rgba(170,180,195,.10);animation:orbitPulse 4.5s ease-in-out infinite}
.spectrum{
  position:absolute;
  z-index:8;
  left:50%;bottom:35px;
  transform:translateX(-50%);
  width:min(78%,310px);
  height:64px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  opacity:.85;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.spectrum i{
  width:6px;
  min-height:9px;
  height:var(--h,40%);
  border-radius:99px;
  background:linear-gradient(to top,var(--violet),var(--cyan));
  box-shadow:0 0 12px rgba(56,232,255,.24);
  transform-origin:center bottom;
  animation:eq 1.3s ease-in-out infinite alternate;
}
.spectrum i:nth-child(1){--h:28%;animation-delay:-.7s}
.spectrum i:nth-child(2){--h:54%;animation-delay:-1.1s}
.spectrum i:nth-child(3){--h:40%;animation-delay:-.25s}
.spectrum i:nth-child(4){--h:78%;animation-delay:-.9s}
.spectrum i:nth-child(5){--h:60%;animation-delay:-.45s}
.spectrum i:nth-child(6){--h:92%;animation-delay:-1.25s}
.spectrum i:nth-child(7){--h:70%;animation-delay:-.4s}
.spectrum i:nth-child(8){--h:50%;animation-delay:-1s}
.spectrum i:nth-child(9){--h:84%;animation-delay:-.62s}
.spectrum i:nth-child(10){--h:44%;animation-delay:-.18s}
.spectrum i:nth-child(11){--h:64%;animation-delay:-.86s}
.spectrum i:nth-child(12){--h:32%;animation-delay:-1.18s}

.console-stats{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.console-stats span{
  min-width:0;
  padding:12px 11px;
  border:1px solid rgba(170,180,195,.13);
  border-radius:15px;
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
}
.console-stats b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#e8faff;
  font:850 .66rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.console-stats small{display:block;margin-top:5px;color:#7f8ca2;font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.section{
  position:relative;
  padding:clamp(82px,9vw,120px) 0;
  border-top:1px solid rgba(170,180,195,.075);
}
.section::before{
  content:"";
  position:absolute;
  width:460px;height:460px;
  right:-200px;top:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.06),transparent 70%);
  pointer-events:none;
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  align-items:end;
  gap:60px;
  margin-bottom:42px;
}
.section h2{
  max-width:820px;
  margin:13px 0 0;
  font-size:clamp(2.25rem,5vw,4.9rem);
  line-height:.98;
  font-weight:830;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.lede{margin:0;color:var(--muted);line-height:1.72}
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.card,.item{
  position:relative;
  overflow:hidden;
  border:1px solid var(--edge);
  background:
    radial-gradient(circle at 100% 0,rgba(124,92,255,.13),transparent 38%),
    linear-gradient(155deg,rgba(18,24,36,.82),rgba(6,9,14,.92));
  box-shadow:0 26px 72px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.024);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.card{
  min-height:255px;
  padding:27px;
  border-radius:var(--radius);
  transform:translateZ(0);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.card::before,.item::before{
  content:"";
  position:absolute;
  width:140px;height:140px;
  right:-55px;top:-55px;
  border-radius:50%;
  border:1px solid rgba(56,232,255,.14);
  box-shadow:0 0 60px rgba(124,92,255,.06);
  transition:transform .45s ease,border-color .3s ease;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(120deg,transparent 0 44%,rgba(56,232,255,.06) 50%,transparent 57%);
  transform:translateX(-35%);
  transition:opacity .3s ease,transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(56,232,255,.36);
  box-shadow:0 36px 90px rgba(0,0,0,.30),0 0 50px rgba(124,92,255,.06);
}
.card:hover::before{transform:scale(1.16);border-color:rgba(56,232,255,.24)}
.card:hover::after{opacity:1;transform:translateX(35%)}
.card .code{
  position:relative;
  z-index:2;
  color:var(--cyan);
  font:820 .67rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.12em;
}
.card h3{
  position:relative;
  z-index:2;
  margin:30px 0 12px;
  font-size:1.38rem;
  line-height:1.08;
  letter-spacing:-.035em;
}
.card p,.item p{
  position:relative;
  z-index:2;
  margin:0;
  color:var(--muted);
  font-size:.91rem;
  line-height:1.65;
}
.split{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
  gap:clamp(46px,7vw,92px);
  align-items:start;
}
.stack{display:grid;gap:13px}
.item{
  padding:23px 24px;
  border-radius:20px;
  transition:border-color .22s ease,transform .22s ease,background .22s ease;
}
.item:hover{border-color:rgba(56,232,255,.28);transform:translateX(4px)}
.item h3{
  position:relative;
  z-index:2;
  margin:0 0 9px;
  font-size:1.08rem;
  letter-spacing:-.025em;
}

.site-footer{
  padding:46px max(0px,var(--safe-right)) calc(44px + var(--safe-bottom)) max(0px,var(--safe-left));
  border-top:1px solid rgba(124,92,255,.14);
  background:linear-gradient(180deg,rgba(4,6,10,.2),rgba(2,3,6,.88));
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:end;
}
.footer-brand{color:var(--muted);font-size:.79rem;line-height:1.75}
.footer-brand strong{display:block;color:#fff;font-size:.94rem;margin-bottom:3px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.69rem;color:#718098}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.footer-links a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  border-radius:999px;
  color:#8996aa;
  font-size:.77rem;
  transition:color .2s ease,background .2s ease;
}
.footer-links a:hover{color:var(--cyan);background:rgba(124,92,255,.08)}

.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.js [data-reveal].is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
.is-pressed{transform:scale(.985)!important}

@keyframes ambientRotate{to{transform:rotate(360deg)}}
@keyframes floatA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vw,5vh,0) scale(1.08)}}
@keyframes floatB{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vw,-4vh,0) scale(1.1)}}
@keyframes logoBreath{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 14px rgba(124,92,255,.26))}50%{transform:translateY(-2px);filter:drop-shadow(0 0 22px rgba(56,232,255,.30))}}
@keyframes statusPulse{0%,100%{opacity:.72;transform:scale(.92)}50%{opacity:1;transform:scale(1.12)}}
@keyframes borderSpin{to{transform:rotate(360deg)}}
@keyframes scanMove{from{background-position:0 0}to{background-position:0 120px}}
@keyframes haloFloat{from{transform:translate3d(-2%,0,0) scale(.96)}to{transform:translate3d(7%,4%,0) scale(1.08)}}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitPulse{0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.035)}}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.025)}}
@keyframes eq{from{transform:scaleY(.5);opacity:.52}to{transform:scaleY(1.08);opacity:1}}

@media (max-width:1050px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.78fr);gap:38px}
  .visual-console{min-height:510px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:last-child:nth-child(odd){grid-column:1/-1}
}

@media (max-width:820px){
  html{scroll-padding-top:132px}
  .wrap{width:min(100% - 30px,760px)}
  .site-header{padding-top:max(var(--safe-top),2px)}
  .nav-shell{
    min-height:auto;
    padding:10px 0 9px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .brand-lockup{padding-inline:2px}
  .brand-lockup img{width:38px;height:38px}
  nav{
    margin:0 -15px;
    padding:0 15px 2px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }
  nav::-webkit-scrollbar{display:none}
  nav a{
    flex:0 0 auto;
    min-height:42px;
    padding:0 14px;
    scroll-snap-align:start;
    font-size:.82rem;
  }
  .hero{
    min-height:auto;
    padding:52px 0 72px;
  }
  .hero-grid{
    grid-template-columns:1fr;
    gap:42px;
  }
  h1{font-size:clamp(3.35rem,13vw,6.4rem);max-width:740px}
  .hero-copy{font-size:1rem}
  .hero-visual{width:min(100%,620px);margin-inline:auto}
  .visual-console{min-height:500px}
  .section-head,.split{grid-template-columns:1fr;gap:26px}
  .cards{grid-template-columns:1fr}
  .card:last-child:nth-child(odd){grid-column:auto}
  .card{min-height:220px}
  .footer-grid{grid-template-columns:1fr;align-items:start}
  .footer-links{justify-content:flex-start}
}

@media (max-width:560px){
  :root{--radius:21px}
  body::before{background-size:34px 34px;opacity:.24}
  body::after{animation-duration:44s;opacity:.72}
  .ambient-a{width:150vw;height:150vw;right:-72vw;top:-8vh;filter:blur(26px)}
  .ambient-b{width:125vw;height:125vw;left:-68vw;top:46vh;filter:blur(30px)}
  .wrap{width:calc(100% - 28px)}
  .site-header{
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    backdrop-filter:blur(18px) saturate(145%);
  }
  .wordmark-core{font-size:.94rem}
  .hero{padding:42px 0 62px}
  .hero::before{width:520px;height:520px;left:26%;top:52%}
  h1{
    margin:18px 0 19px;
    font-size:clamp(3.05rem,15.2vw,4.85rem);
    line-height:.93;
    letter-spacing:-.064em;
  }
  .kicker{font-size:.64rem;letter-spacing:.135em}
  .kicker::before{width:28px}
  .hero-actions{display:grid;grid-template-columns:1fr;margin-top:26px}
  .btn{width:100%;min-height:54px}
  .prelaunch{margin-top:18px;padding:14px;border-radius:17px;font-size:.79rem}
  .hero-visual{margin-top:0}
  .visual-console{
    min-height:438px;
    padding:18px;
    border-radius:27px;
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
  }
  .visual-core{min-height:310px}
  .visual-logo{width:124px;height:124px}
  .visual-logo img{width:100px;height:100px}
  .orbit-a{width:180px;height:180px}
  .orbit-b{width:235px;height:235px}
  .orbit-c{width:285px;height:285px}
  .spectrum{bottom:22px;height:50px;width:76%;gap:4px}
  .spectrum i{width:5px}
  .console-stats{gap:6px}
  .console-stats span{padding:9px 8px;border-radius:12px}
  .console-stats b{font-size:.55rem}
  .console-stats small{font-size:.54rem}
  .console-topline{font-size:.52rem}
  .section{padding:74px 0}
  .section h2{font-size:clamp(2.45rem,11.8vw,4rem)}
  .section-head{margin-bottom:30px}
  .card{padding:23px;min-height:205px}
  .card h3{margin-top:25px;font-size:1.3rem}
  .item{padding:20px}
  .footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .footer-links a{justify-content:center;border:1px solid rgba(170,180,195,.10);background:rgba(255,255,255,.02)}
}

@media (max-width:390px){
  .wrap{width:calc(100% - 22px)}
  nav{margin-inline:-11px;padding-inline:11px}
  nav a{padding-inline:12px}
  h1{font-size:clamp(2.8rem,14.8vw,4.1rem)}
  .visual-console{min-height:410px;padding:15px}
  .visual-core{min-height:290px}
  .orbit-c{width:260px;height:260px}
  .console-topline span:first-child{max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .hero{min-height:auto;padding:38px 0 54px}
  .hero-grid{grid-template-columns:1fr 360px;gap:34px}
  h1{font-size:clamp(2.7rem,7vw,4.5rem)}
  .visual-console{min-height:360px}
  .visual-core{min-height:250px}
  .orbit-a{width:150px;height:150px}.orbit-b{width:200px;height:200px}.orbit-c{width:240px;height:240px}
  .visual-logo{width:105px;height:105px}.visual-logo img{width:82px;height:82px}
  .spectrum{height:40px;bottom:14px}
}

@media (hover:none) and (pointer:coarse){
  .btn:hover,.card:hover,.item:hover{transform:none}
  .card:hover::after{opacity:0}
  nav a,.btn,.footer-links a{min-height:48px}
  .visual-console{will-change:auto}
}

@supports (-webkit-touch-callout:none){
  body{min-height:-webkit-fill-available}
  .site-header{padding-left:var(--safe-left);padding-right:var(--safe-right)}
  .hero,.section{padding-left:var(--safe-left);padding-right:var(--safe-right)}
  .visual-console,.card,.item{
    -webkit-backdrop-filter:blur(20px) saturate(145%);
  }
}

@supports (height:100dvh){
  .hero{min-height:min(860px,calc(100dvh - 80px))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .visual-console{transform:none!important}
}


/* GhostCore Systems™ cross-platform hardening v6 — Safari/iOS, Chromium, Firefox, Edge */
:root{--app-vh:1vh}

html,body{max-width:100%}
body{
  min-height:100vh;
  min-height:calc(var(--app-vh,1vh) * 100);
}
p,h1,h2,h3,.mono,.footer-brand{overflow-wrap:anywhere}
button,input,select,textarea{font:inherit}
a,button{-webkit-user-select:none;user-select:none}
p,.footer-brand,.mono{-webkit-user-select:text;user-select:text}

body::before{
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.5) 62%,transparent);
}
.ambient-grid{
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),black 0,rgba(0,0,0,.62) 18rem,transparent 36rem);
}
.visual-grid{
  -webkit-mask-image:linear-gradient(to top,black,transparent 84%);
}
.spectrum{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* Solid-color fallback prevents invisible gradient text on older engines. */
.wordmark-core,h1{
  color:var(--text);
  background:none;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark-core{
    background:linear-gradient(110deg,#fff 0%,#dfe7ff 32%,var(--cyan) 64%,var(--violet2) 92%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  h1{
    background:linear-gradient(110deg,#fff 4%,#eef2ff 34%,var(--cyan) 66%,#b6a6ff 94%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 18px 48px rgba(124,92,255,.10));
  }
}

/* Older browsers without backdrop-filter still get an opaque, readable UI. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:rgba(5,7,11,.98)}
  .btn.secondary{background:rgba(12,16,24,.96)}
  .visual-console,.card,.item{background:rgba(9,13,20,.98)}
}

/* WebKit compositing guardrails: preserve the look while reducing repaint artifacts. */
.is-safari body::after{animation:none;opacity:.20}
.is-safari .ambient-stage i,
.is-safari .visual-console{will-change:auto}
.is-safari .site-header{
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
}
.is-safari .visual-console,
.is-safari .card,
.is-safari .item{
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}
.is-safari .visual-console::before{animation:none;opacity:.58}

/* iOS avoids accidental text zoom and tap-state jitter while scrolling. */
.is-ios body{-webkit-text-size-adjust:100%}
.is-ios .card,
.is-ios .item{transform:none}
.is-ios .card:hover,
.is-ios .item:hover{transform:none}

/* Large-content sections can skip off-screen paint on engines that support it. */
@supports (content-visibility:auto){
  .section{
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }
}

@supports (height:100svh){
  body{min-height:100svh}
}
@supports (height:100dvh){
  body{min-height:100dvh}
}

/* Narrow legacy phones and compact embedded browsers. */
@media (max-width:360px){
  .wrap{width:calc(100% - 18px)}
  .wordmark-core{font-size:.88rem}
  h1{font-size:clamp(2.55rem,14vw,3.8rem)}
  .visual-console{min-height:382px;padding:13px}
  .visual-core{min-height:272px}
  .console-stats{gap:5px}
  .console-stats span{padding:8px 6px}
}

/* High-contrast and forced-color environments remain usable. */
@media (forced-colors:active){
  .wordmark-core,h1{color:CanvasText;background:none}
  .btn,.card,.item,.prelaunch,.visual-console{border:1px solid CanvasText}
  .status-dot{box-shadow:none}
}