/* wolf-aspect-guard: square wolf never distorts */
.em,.enter-em{object-fit:contain}
/* a11y skip-link: off-screen by default, must snap into view on keyboard
   focus - an inline style="" on the <a> can't do the :focus half and gets
   blocked outright under the marketing-site CSP's style-src, so it lives
   here instead (external stylesheet, always applies). */
.skip-link{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip-link:focus{left:12px !important;top:12px;width:auto;height:auto;overflow:visible;clip-path:none;z-index:1000;background:var(--vx-ink,#0B1426);color:#fff;padding:10px 16px;border-radius:10px}
/* ══════════════════════════════════════════════════════════════════════════
   VILKAX · NEXUS · immersive 360° ecosystem hub
   Built on Dark Wolf tokens (vilkax-tokens.css). State-of-the-art motion layer.
   ══════════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  background:var(--vx-void);color:var(--vx-text);
  font-family:var(--vx-f-body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  --hero:var(--vx-accent);
  --hero-br:var(--vx-accent-br);
  --hero-sf:var(--vx-accent-sf);
  --hero-ln:var(--vx-accent-ln);
  --hero-glow:var(--vx-accent-glow);
  --drift:1;      /* motion multiplier (Tweaks) */
  --amb:1;        /* ambient intensity (Tweaks) */
}
::selection{background:color-mix(in srgb,var(--hero) 34%,transparent);color:#fff}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--vx-f-mono)}
.serif{font-family:var(--vx-f-serif);font-style:italic}
.disp{font-family:var(--vx-f-disp)}

/* ══════════ AMBIENT FIELD (fixed depth layers) ══════════ */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;inset:-30%;will-change:transform;filter:blur(14px);
  opacity:calc(.62*var(--amb));
  background:
    radial-gradient(38% 44% at 78% 6%, var(--hero-glow), transparent 60%),
    radial-gradient(34% 40% at 12% 4%, rgba(0,229,184,.12), transparent 58%),
    radial-gradient(48% 52% at 50% 118%, rgba(76,140,255,.13), transparent 60%);
  animation:auroraDrift calc(34s*var(--drift)) var(--vx-ease) infinite alternate}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  50%{transform:translate3d(-2.6%,1.6%,0) scale(1.09) rotate(2deg)}
  100%{transform:translate3d(2.6%,-1.6%,0) scale(1.05) rotate(-2deg)}}
.aurora.b{filter:blur(40px);opacity:calc(.4*var(--amb));animation-duration:calc(48s*var(--drift));animation-direction:alternate-reverse;
  background:
    radial-gradient(30% 36% at 24% 84%, var(--hero-glow), transparent 62%),
    radial-gradient(28% 34% at 86% 70%, rgba(0,229,184,.1), transparent 60%)}
.stars{position:absolute;inset:0;opacity:calc(.5*var(--amb));
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(203,149,255,.5), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(134,180,255,.45), transparent),
    radial-gradient(1px 1px at 12% 85%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 88%, rgba(91,245,218,.4), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 33% 12%, rgba(255,255,255,.3), transparent);
  background-repeat:repeat;background-size:100% 100%;
  animation:twinkleField calc(9s*var(--drift)) ease-in-out infinite alternate}
@keyframes twinkleField{from{opacity:calc(.32*var(--amb))}to{opacity:calc(.6*var(--amb))}}
.grain{position:absolute;inset:0;opacity:calc(.5*var(--amb));mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .5px);background-size:3px 3px}
.vignette{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 40%, transparent 52%, rgba(3,4,8,.55) 100%)}
.spotlight{position:fixed;width:760px;height:760px;left:0;top:0;z-index:1;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:calc(.3*var(--amb));will-change:left,top;
  background:radial-gradient(circle,var(--hero-sf),rgba(76,140,255,.05) 38%,transparent 66%)}
[data-field="calm"] .aurora{animation:none}
[data-field="calm"] .stars{display:none}
[data-field="mesh"] .field::after{content:"";position:absolute;inset:0;opacity:calc(.5*var(--amb));
  background-image:linear-gradient(var(--vx-line) 1px,transparent 1px),linear-gradient(90deg,var(--vx-line) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask:radial-gradient(circle at 50% 40%,#000,transparent 74%);mask:radial-gradient(circle at 50% 40%,#000,transparent 74%)}

/* ══════════ TOP CHROME ══════════ */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:66px;display:flex;align-items:center;gap:18px;
  padding:0 30px;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.topbar.scrolled{background:rgba(8,11,18,.97);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-bottom-color:var(--vx-line);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
.tb-brand{display:flex;align-items:center;gap:12px}
.tb-brand .em{width:32px;height:32px;filter:drop-shadow(0 3px 10px rgba(76,140,255,.4))}
.tb-brand .vx-stage{--vx-size:17px}
.tb-nav{display:flex;align-items:center;gap:4px;margin-left:22px}
.tb-nav a{font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-dim);
  padding:8px 13px;border-radius:9px;transition:.18s}
.tb-nav a:hover{color:var(--vx-text);background:rgba(255,255,255,.05)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.ai-pill{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:20px;
  background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln);color:var(--vx-mint-br);
  font-family:var(--vx-f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.ai-pill .d{width:7px;height:7px;border-radius:50%;background:var(--vx-mint);box-shadow:0 0 9px var(--vx-mint);
  animation:pulse calc(2.4s*var(--drift)) var(--vx-ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;
  border:1px solid transparent;transition:.18s;white-space:nowrap}
.btn .icon{width:16px;height:16px}
.btn.primary{color:var(--vx-on-accent);
  /* White text on the brand purple measured 3.6 to 3.9:1, under WCAG AA. The fill is
     deepened toward black so the label clears 5:1 across the whole gradient. */
  background:linear-gradient(135deg,color-mix(in srgb,var(--hero) 86%,black),color-mix(in srgb,var(--hero) 74%,black));
  box-shadow:0 10px 26px -10px var(--hero-glow),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px var(--hero-glow)}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--vx-line-2);color:var(--vx-text-muted)}
.btn.ghost:hover{color:var(--vx-text);border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.btn.lg{padding:15px 26px;font-size:15px;border-radius:14px}

/* ══════════ SCENE PROGRESS RAIL ══════════ */
.progress{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:14px}
.progress button{position:relative;width:11px;height:11px;border-radius:50%;border:1px solid var(--vx-line-3);
  background:transparent;transition:.2s}
.progress button::after{content:attr(data-label);position:absolute;right:22px;top:50%;transform:translateY(-50%) translateX(6px);
  opacity:0;white-space:nowrap;font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vx-text-dim);pointer-events:none;transition:.2s}
.progress button:hover{border-color:var(--hero);background:var(--hero-sf)}
.progress button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.progress button.on{background:var(--hero);border-color:var(--hero);box-shadow:0 0 12px var(--hero-glow)}
.progress button.on::after{opacity:1;color:var(--vx-text);transform:translateY(-50%) translateX(0)}

/* ══════════ SCENE SCAFFOLD ══════════ */
.scene{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(24px,7vw,120px) 100px;max-width:1500px;margin:0 auto}
.scene.tall{min-height:auto;padding-top:60px;padding-bottom:120px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hero-br);margin-bottom:22px}
.eyebrow .bar{width:26px;height:1px;background:linear-gradient(90deg,var(--hero),transparent)}
.eyebrow.mint{color:var(--vx-mint-br)}.eyebrow.mint .bar{background:linear-gradient(90deg,var(--vx-mint),transparent)}
.eyebrow.blue{color:var(--vx-blue-br)}.eyebrow.blue .bar{background:linear-gradient(90deg,var(--vx-blue),transparent)}
.big-title{font-family:var(--vx-f-disp);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(38px,6.4vw,88px)}
.big-title .grad{background:linear-gradient(180deg,var(--vx-text),color-mix(in srgb,var(--vx-text) 55%,var(--hero)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.big-title .accent{background:linear-gradient(120deg,var(--hero-br),var(--vx-blue-br));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(15px,1.5vw,19px);color:var(--vx-text-muted);line-height:1.6;max-width:60ch}
.lead strong{color:var(--vx-text);font-weight:600}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--vx-ease),transform .9s var(--vx-ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}

/* ══════════ HERO ══════════ */
#hero{align-items:center;text-align:center;min-height:100svh;padding-top:66px}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:3;will-change:transform,opacity}
.aegis{position:relative;display:grid;place-items:center;isolation:isolate;width:min(32vh,300px);height:min(32vh,300px);
  margin-bottom:2px}
.aegis>*{grid-area:1/1}
.aegis-glow{width:120%;height:120%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--hero) 42%,transparent),transparent 62%);
  filter:blur(20px);animation:breathe calc(7s*var(--drift)) var(--vx-ease) infinite;z-index:0}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}
.aegis-rings{width:100%;height:100%;overflow:visible;z-index:1;will-change:transform;transition:transform .5s var(--vx-ease)}
.ring{fill:none;transform-box:fill-box;transform-origin:center;
  stroke:color-mix(in srgb,var(--hero) 30%,transparent);stroke-width:.5}
.ring.r0{stroke:color-mix(in srgb,var(--hero) 55%,transparent);stroke-width:.7}
.ring.r1{stroke-dasharray:1.4 3.2;opacity:.6;animation:spin calc(52s*var(--drift)) linear infinite}
.ring.r2{opacity:.42;stroke-dasharray:.5 5;animation:spin calc(92s*var(--drift)) linear infinite reverse}
.ring.r3{stroke:color-mix(in srgb,var(--hero) 20%,transparent)}
.ticks line{stroke:color-mix(in srgb,var(--hero) 26%,transparent);stroke-width:.5}
@keyframes spin{to{transform:rotate(360deg)}}
.aegis-sweep{width:90%;height:90%;border-radius:50%;z-index:1;mix-blend-mode:screen;
  background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--hero) 32%,transparent) 34deg,transparent 60deg);
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%);mask:radial-gradient(circle,transparent 42%,#000 43%);
  animation:spin calc(7s*var(--drift)) linear infinite}
.aegis-orbit{width:100%;height:100%;z-index:2;animation:spin calc(28s*var(--drift)) linear infinite}
.odot{position:absolute;top:50%;left:50%;transform:rotate(calc(var(--i)*360deg/var(--n))) translateX(var(--orad,46%))}
.odot i{display:block;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--hero-br);
  box-shadow:0 0 12px color-mix(in srgb,var(--hero) 85%,transparent);
  animation:twinkle calc(4s*var(--drift)) ease-in-out infinite;animation-delay:calc(var(--i)*-.5s)}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.aegis-core{z-index:3;display:grid;place-items:center;position:relative}
.aegis-core .em{position:relative;z-index:2;width:44%;aspect-ratio:1;height:auto;align-self:center;object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.55)) drop-shadow(0 0 26px color-mix(in srgb,var(--hero) 46%,transparent))}
.core-halo{position:absolute;width:170%;height:170%;border-radius:50%;z-index:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--hero) 22%,transparent),transparent 60%);
  filter:blur(9px);animation:breathe calc(7s*var(--drift)) var(--vx-ease) infinite}

.hero-wm{--vx-size:clamp(30px,5vw,58px);margin-top:2px}
.hero-line{font-family:var(--vx-f-disp);font-weight:600;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(30px,5vw,58px);max-width:16ch}
.hero-line .grad{background:linear-gradient(180deg,var(--vx-text),color-mix(in srgb,var(--vx-text) 52%,var(--hero)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-line .accent{background:linear-gradient(120deg,var(--hero-br),var(--vx-blue-br) 70%,var(--vx-mint-br));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(15px,1.6vw,19px);color:var(--vx-text-muted);max-width:56ch;line-height:1.6}
.hero-sub .serif{color:var(--hero-br)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.04);
  border:1px solid var(--vx-line);color:var(--vx-text-dim)}
.tag .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.tag.v{color:var(--hero-br);border-color:var(--hero-ln);background:var(--hero-sf)}
.tag.m{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.tag.b{color:var(--vx-blue-br);border-color:var(--vx-blue-ln);background:var(--vx-blue-sf)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:7px;color:var(--vx-text-faint);font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;z-index:3}
.scroll-hint .mouse{width:20px;height:32px;border-radius:11px;border:1.5px solid var(--vx-line-3);position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;
  border-radius:2px;background:var(--vx-text-dim);animation:wheel calc(1.8s*var(--drift)) var(--vx-ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* ══════════ PROBLEM / STAKES ══════════ */
#stakes{text-align:left}
.stakes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.stat-tile{position:relative;padding:24px 22px;border-radius:18px;background:rgba(255,255,255,.03);
  border:1px solid var(--vx-line);overflow:hidden;transition:.3s var(--vx-ease)}
.stat-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-bar,var(--hero))}
.stat-tile:hover{transform:translateY(-4px);border-color:var(--vx-line-2);background:rgba(255,255,255,.05)}
.stat-tile .v{font-family:var(--vx-f-disp);font-weight:700;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em;line-height:1}
.stat-tile .k{font-size:12.5px;color:var(--vx-text-dim);margin-top:10px;line-height:1.45}
.stakes-quote{margin-top:36px;font-family:var(--vx-f-disp);font-weight:500;font-size:clamp(20px,2.4vw,32px);
  letter-spacing:-.02em;line-height:1.32;max-width:24ch}
.stakes-quote b{background:linear-gradient(120deg,var(--hero-br),var(--vx-blue-br));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ══════════ 360 ORBIT (the centerpiece) ══════════ */
#nexus{align-items:center;text-align:center;overflow:visible}
.orbit-head{max-width:60ch;margin:0 auto}
.orbit-shell{position:relative;width:min(88vw,74svh,860px);max-width:100%;margin:8px auto 0}
/* Size the stage as a SQUARE from a single dimension that respects BOTH the
   viewport width and height, so the ring plane is always a true circle (never a
   squashed ellipse) and the orbit fits cleanly on every screen — desktop,
   laptop, iPad portrait/landscape. Phones get their own square size below. */
.orbit-stage{position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;
  perspective:1400px;perspective-origin:50% 46%}
.orbit-world{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(64deg) rotateZ(var(--spin,0deg));
  transition:transform .3s var(--vx-ease);will-change:transform}
.orbit-ring{position:absolute;inset:0;margin:auto;border-radius:50%;transform-style:preserve-3d;pointer-events:none;
  border:1px solid var(--vx-line);box-shadow:0 0 60px -20px var(--hero-glow) inset}
.orbit-ring.r1{width:38%;height:38%}
.orbit-ring.r2{width:66%;height:66%;border-color:rgba(255,255,255,.05)}
.orbit-ring.r3{width:94%;height:94%;border-color:rgba(255,255,255,.04)}
.orbit-ring .dash{position:absolute;inset:-1px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--hero) 22%,transparent);
  opacity:.5}
/* nodes are positioned by JS on the ring plane, then counter-rotated upright */
.node{position:absolute;top:50%;left:50%;transform-style:preserve-3d;will-change:transform}
.node-upright{transform:rotateZ(calc(-1*var(--spin,0deg))) rotateX(-64deg);transform-style:preserve-3d}
.node-btn{position:relative;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  width:104px;transition:.24s var(--vx-ease);pointer-events:auto;cursor:pointer}
.node-tile{position:relative;width:60px;height:60px;border-radius:17px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--vx-surface-2),var(--vx-surface-0));
  border:1px solid var(--vx-line-2);box-shadow:0 14px 30px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  transition:.24s var(--vx-ease)}
.node-tile .icon{width:27px;height:27px;color:var(--node-c,var(--hero-br));transition:.24s}
.node-tile::after{content:"";position:absolute;inset:-1px;border-radius:17px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,color-mix(in srgb,var(--node-c,var(--hero)) 50%,transparent),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.6;transition:.24s}
.node-lbl{font-family:var(--vx-f-disp);font-weight:600;font-size:13px;letter-spacing:-.01em;color:var(--vx-text);
  text-shadow:0 2px 8px rgba(0,0,0,.6)}
.node-tag{font-family:var(--vx-f-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--vx-text-dim)}
.node-btn:hover{transform:translate(-50%,-50%) scale(1.12)}
.node-btn:hover .node-tile{border-color:var(--node-c,var(--hero));
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 30px -6px var(--node-c,var(--hero)),inset 0 1px 0 rgba(255,255,255,.1)}
.node-btn:hover .node-tile .icon{transform:scale(1.08)}
.node-btn:hover .node-tile::after{opacity:1}
.node-btn.sel .node-tile{border-color:var(--node-c,var(--hero));box-shadow:0 0 34px -4px var(--node-c,var(--hero))}
.node-conn{position:absolute;top:50%;left:50%;height:1px;transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--hero) 40%,transparent),transparent)}

/* orbit core */
.orbit-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;
  display:grid;place-items:center;width:150px;height:150px}
.orbit-core .em{width:74px;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)) drop-shadow(0 0 26px var(--hero-glow));
  animation:coreFloat calc(6s*var(--drift)) var(--vx-ease) infinite}
@keyframes coreFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.orbit-core .halo{position:absolute;width:170%;height:170%;border-radius:50%;
  background:radial-gradient(circle,var(--hero-glow),transparent 62%);filter:blur(12px);
  animation:breathe calc(6s*var(--drift)) var(--vx-ease) infinite}
.orbit-core .ripple{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid var(--hero-ln);
  animation:ripple calc(4s*var(--drift)) var(--vx-ease) infinite}
.orbit-core .ripple:nth-child(2){animation-delay:calc(-2s*var(--drift))}
@keyframes ripple{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.6);opacity:0}}

/* orbit info readout */
.orbit-info{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);z-index:8;pointer-events:none;
  min-width:280px;max-width:min(90vw,420px);padding:16px 20px;border-radius:16px;
  background:rgba(11,14,22,.82);backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--vx-line-2);
  box-shadow:var(--vx-shadow-pop);text-align:left;transition:.3s var(--vx-ease)}
.orbit-info .oi-top{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.orbit-info .oi-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--node-c-sf,var(--hero-sf));border:1px solid var(--node-c-ln,var(--hero-ln));color:var(--node-c,var(--hero-br))}
.orbit-info .oi-ic .icon{width:20px;height:20px}
.orbit-info .oi-name{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em}
.orbit-info .oi-tag{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--node-c,var(--hero-br));margin-top:2px}
.orbit-info .oi-desc{font-size:13px;color:var(--vx-text-muted);line-height:1.5}
.orbit-hint{margin-top:14px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vx-text-faint)}
.orbit-controls{display:flex;gap:10px;justify-content:center;margin-top:18px}

/* ══════════ METHODS (decision intelligence) ══════════ */
.methods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.method{position:relative;padding:26px 22px;border-radius:20px;overflow:hidden;min-height:280px;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--vx-line);transition:.34s var(--vx-ease);display:flex;flex-direction:column}
.method::before{content:"";position:absolute;inset:0;opacity:0;transition:.34s;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,var(--m-c-sf,var(--hero-sf)),transparent 70%)}
.method:hover{transform:translateY(-6px);border-color:var(--m-c-ln,var(--hero-ln));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 40px -20px var(--m-c,var(--hero))}
.method:hover::before{opacity:1}
.method .m-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;position:relative;z-index:1;
  background:var(--m-c-sf,var(--hero-sf));border:1px solid var(--m-c-ln,var(--hero-ln));color:var(--m-c,var(--hero-br))}
.method .m-ic .icon{width:26px;height:26px}
.method .m-n{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vx-text-faint);margin:18px 0 8px;position:relative;z-index:1}
.method .m-t{font-family:var(--vx-f-disp);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.15;
  position:relative;z-index:1}
.method .m-d{font-size:13px;color:var(--vx-text-dim);line-height:1.55;margin-top:10px;position:relative;z-index:1}
.method .m-tag{margin-top:auto;padding-top:16px;position:relative;z-index:1}

/* ══════════ LIVING SURFACES ══════════ */
#surfaces{overflow:visible}
.surfaces-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:36px}
.surface-copy .feat-list{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.feat-item{display:flex;gap:14px;align-items:flex-start}
.feat-item .fi-ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.feat-item .fi-ic .icon{width:20px;height:20px}
.feat-item .fi-t{font-family:var(--vx-f-disp);font-weight:600;font-size:15px}
.feat-item .fi-d{font-size:13px;color:var(--vx-text-dim);line-height:1.5;margin-top:2px}
.surface-stage{position:relative;height:560px;perspective:1600px}
.float{position:absolute;transform-style:preserve-3d;border-radius:20px;overflow:hidden;will-change:transform;
  background:var(--vx-bg);border:1px solid var(--vx-line-2);box-shadow:var(--vx-shadow-pop)}
/* phone */
.float.phone{width:224px;height:472px;right:38%;top:44px;border-radius:38px;padding:9px;
  background:linear-gradient(155deg,#171b24,#080a0f 60%);box-shadow:0 0 0 2px #2a2f3a,var(--vx-shadow-pop)}
.float.phone .p-scr{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--vx-bg)}
/* console window */
.float.console{width:460px;height:300px;right:-2%;top:14px}
.float.soc{width:340px;height:220px;left:2%;bottom:6px}
.float .win-bar{height:34px;display:flex;align-items:center;gap:8px;padding:0 13px;
  background:rgba(11,14,22,.9);border-bottom:1px solid var(--vx-line)}
.float .win-bar i{width:9px;height:9px;border-radius:50%}
.float .win-bar .r{background:#FF5F57}.float .win-bar .y{background:#FEBC2E}.float .win-bar .g{background:#28C840}
.float .win-bar .tt{margin-left:8px;font-family:var(--vx-f-mono);font-size:10px;color:var(--vx-text-dim);letter-spacing:.04em}
.float .win-bar .live{margin-left:auto;font-family:var(--vx-f-mono);font-size:8px;letter-spacing:.08em;color:var(--vx-mint-br)}
.mini-aurora{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 30% 0%,var(--hero-sf),transparent 70%),
    radial-gradient(50% 40% at 90% 100%,var(--vx-blue-sf),transparent 70%)}

/* mini phone content */
.mp{position:relative;height:100%;padding:34px 16px 16px;display:flex;flex-direction:column;align-items:center;z-index:1}
.mp .mp-status{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;padding:0 20px;
  font-family:var(--vx-f-mono);font-size:8px;color:var(--vx-text-dim)}
.mp .mp-shield{position:relative;width:96px;height:96px;display:grid;place-items:center;margin:14px 0 12px}
.mp .mp-shield .em{width:44px;z-index:2;filter:drop-shadow(0 0 14px var(--hero-glow))}
.mp .mp-shield .rng{position:absolute;inset:0;border-radius:50%;border:2px solid var(--hero-ln)}
.mp .mp-shield .rng.a{border-top-color:var(--hero);border-right-color:var(--hero);animation:spin calc(6s*var(--drift)) linear infinite}
.mp .mp-t{font-family:var(--vx-f-disp);font-weight:600;font-size:15px;text-align:center}
.mp .mp-s{font-family:var(--vx-f-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-mint-br);margin-top:4px}
.mp .mp-chips{display:flex;gap:6px;margin-top:16px}
.mp .mp-chip{flex:1;padding:9px 4px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.mp .mp-chip b{font-family:var(--vx-f-disp);font-weight:700;font-size:16px;color:var(--hero-br)}
.mp .mp-chip span{font-family:var(--vx-f-mono);font-size:7px;letter-spacing:.04em;text-transform:uppercase;color:var(--vx-text-dim)}

/* mini console content */
.mc{position:relative;height:calc(100% - 34px);padding:16px 18px;display:flex;flex-direction:column;gap:12px;z-index:1}
.mc .mc-head{display:flex;align-items:center;justify-content:space-between}
.mc .mc-title{font-family:var(--vx-f-disp);font-weight:600;font-size:15px}
.mc .mc-ask{display:flex;align-items:center;gap:6px;font-family:var(--vx-f-mono);font-size:8px;letter-spacing:.06em;
  color:var(--hero-br);padding:5px 10px;border-radius:14px;background:var(--hero-sf);border:1px solid var(--hero-ln)}
.mc .mc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.mc .mc-kpi{padding:11px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--vx-line)}
.mc .mc-kpi b{font-family:var(--vx-f-disp);font-weight:700;font-size:19px;letter-spacing:-.01em;display:block}
.mc .mc-kpi.a b{color:var(--hero-br)}.mc .mc-kpi.m b{color:var(--vx-mint-br)}.mc .mc-kpi.b b{color:var(--vx-blue-br)}
.mc .mc-kpi span{font-family:var(--vx-f-mono);font-size:7.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--vx-text-dim)}
.mc .mc-chart{flex:1;display:flex;align-items:flex-end;gap:5px;padding-top:6px}
.mc .mc-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--hero),color-mix(in srgb,var(--hero) 30%,transparent));
  opacity:.85}
/* mini soc content */
.ms{position:relative;height:calc(100% - 34px);padding:14px 16px;display:flex;flex-direction:column;gap:8px;z-index:1}
.ms .ms-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);
  border:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:9px;color:var(--vx-text-muted)}
.ms .ms-row .dot{width:7px;height:7px;border-radius:50%;flex:none}
.ms .ms-row.safe .dot{background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.ms .ms-row.info .dot{background:var(--vx-blue);box-shadow:0 0 8px var(--vx-blue)}
.ms .ms-row.warn .dot{background:var(--vx-sev-elevated);box-shadow:0 0 8px var(--vx-sev-elevated)}
.ms .ms-row b{margin-left:auto;color:var(--vx-text-dim)}

/* ══════════ PLANES (architecture depth stack) ══════════ */
.planes{display:flex;flex-direction:column;gap:12px;margin-top:40px;max-width:960px}
.plane{position:relative;display:flex;align-items:center;gap:20px;padding:20px 24px;border-radius:16px;
  background:linear-gradient(100deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--vx-line);transition:.3s var(--vx-ease);overflow:hidden}
.plane:hover{transform:translateX(8px);border-color:var(--hero-ln);background:rgba(255,255,255,.06)}
.plane .pl-n{font-family:var(--vx-f-mono);font-size:12px;color:var(--hero-br);letter-spacing:.06em;width:34px;flex:none}
.plane .pl-bar{width:3px;align-self:stretch;border-radius:3px;background:linear-gradient(180deg,var(--hero),var(--vx-blue));flex:none}
.plane .pl-t{font-family:var(--vx-f-disp);font-weight:600;font-size:17px;letter-spacing:-.01em;flex:none;width:210px}
.plane .pl-d{font-size:13px;color:var(--vx-text-dim);line-height:1.5}
.plane .pl-tag{margin-left:auto;flex:none}

/* ══════════ CTA / FOOTER ══════════ */
#enter{align-items:center;text-align:center;min-height:92svh}
.enter-inner{display:flex;flex-direction:column;align-items:center;gap:24px;position:relative;z-index:3}
.enter-em{width:88px;filter:drop-shadow(0 14px 34px rgba(76,140,255,.42)) drop-shadow(0 0 30px var(--hero-glow));
  animation:coreFloat calc(6s*var(--drift)) var(--vx-ease) infinite}
.enter-title{font-family:var(--vx-f-disp);font-weight:600;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(38px,6vw,80px);max-width:16ch}
.enter-title .accent{background:linear-gradient(120deg,var(--hero-br),var(--vx-blue-br));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.footer{position:relative;z-index:2;border-top:1px solid var(--vx-line);margin-top:40px;
  padding:40px clamp(24px,7vw,120px);display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  max-width:1500px;margin-left:auto;margin-right:auto;width:100%}
.footer .vx-stage{--vx-size:15px}
.footer .f-meta{font-family:var(--vx-f-mono);font-size:10px;color:var(--vx-text-faint);letter-spacing:.05em;line-height:1.7}
.footer .f-right{margin-left:auto;display:flex;gap:22px;font-family:var(--vx-f-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--vx-text-dim)}
.footer .f-right a:hover{color:var(--hero-br)}

/* ══════════ TWEAKS PANEL (custom, cohesive) ══════════ */
.tw-fab{position:fixed;right:22px;bottom:22px;z-index:70;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:rgba(11,14,22,.8);backdrop-filter:blur(16px);border:1px solid var(--vx-line-2);color:var(--vx-text-muted);
  box-shadow:var(--vx-shadow-2);transition:.2s}
.tw-fab:hover{color:var(--hero-br);border-color:var(--hero-ln);transform:translateY(-2px)}
.tw-fab .icon{width:22px;height:22px}
.tw-panel{position:fixed;right:22px;bottom:84px;z-index:71;width:290px;padding:18px;border-radius:18px;
  background:rgba(11,14,22,.9);backdrop-filter:blur(24px) saturate(150%);border:1px solid var(--vx-line-2);
  box-shadow:var(--vx-shadow-pop);transform:translateY(12px) scale(.97);opacity:0;pointer-events:none;
  transition:.24s var(--vx-ease);transform-origin:bottom right}
.tw-panel.open{transform:none;opacity:1;pointer-events:auto}
.tw-panel .tw-title{font-family:var(--vx-f-disp);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.tw-panel .tw-sub{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vx-text-faint);margin-bottom:16px}
.tw-group{margin-bottom:16px}
.tw-group>label{font-family:var(--vx-f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--vx-text-dim);display:block;margin-bottom:8px}
.tw-seg{display:flex;gap:5px;background:rgba(255,255,255,.03);padding:4px;border-radius:11px;border:1px solid var(--vx-line)}
.tw-seg button{flex:1;padding:7px 4px;border-radius:8px;font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.03em;
  color:var(--vx-text-dim);transition:.16s}
.tw-seg button.on{background:var(--hero-sf);color:var(--hero-br);box-shadow:inset 0 0 0 1px var(--hero-ln)}
.tw-swatches{display:flex;gap:9px}
.tw-swatch{width:34px;height:34px;border-radius:10px;border:2px solid transparent;transition:.16s;position:relative}
.tw-swatch.on{border-color:#fff}
.tw-swatch:hover{transform:scale(1.08)}
.tw-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tw-toggle{width:42px;height:24px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid var(--vx-line-2);
  position:relative;transition:.2s;flex:none}
.tw-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--vx-text-dim);transition:.2s}
.tw-toggle.on{background:var(--hero-sf);border-color:var(--hero-ln)}
.tw-toggle.on::after{left:20px;background:var(--hero-br)}
.tw-row .tw-lbl{font-size:12px;color:var(--vx-text-muted)}

/* ══════════ MOTION GATING + RESPONSIVE ══════════ */
[data-motion="whisper"]{--drift:2.4}
[data-motion="whisper"] .aegis-orbit,[data-motion="whisper"] .ring.r1,[data-motion="whisper"] .ring.r2{animation-play-state:paused}
[data-motion="lively"]{--drift:.6}
[data-motion="off"] *{animation:none!important}
[data-motion="off"] .orbit-world{transform:rotateX(64deg) rotateZ(28deg)!important}

@media (max-width:1080px){
  .stakes-grid{grid-template-columns:repeat(2,1fr)}
  .methods-grid{grid-template-columns:repeat(2,1fr)}
  .surfaces-wrap{grid-template-columns:1fr;gap:30px}
  .surface-stage{height:480px}
  .tb-nav{display:none}
  .progress{display:none}
}

@media (max-width:640px){
  /* Premium mobile pass: comfortable edge padding, calmer ambient field so the
     star-field/aurora reads as depth not a "messy galaxy", and tighter hero. */
  .scene{padding:84px 20px 60px;min-height:auto}
  #hero.scene{min-height:100svh;padding-top:96px}
  .scene.tall{padding:40px 20px 72px}
  .stars{opacity:calc(.24*var(--amb))}
  .aurora.b{display:none}
  .aurora{opacity:calc(.5*var(--amb))}
  .grain{opacity:.04}
  .hero-line{font-size:clamp(28px,8.5vw,40px);max-width:none}
  .big-title{font-size:clamp(26px,7.5vw,40px)!important}
  .lead{font-size:15px}
  .hero-sub{font-size:15px}
  .aegis{width:min(66vw,240px)}
  .stakes-grid{grid-template-columns:1fr 1fr}
  .methods-grid{grid-template-columns:1fr}
  .plane{flex-wrap:wrap;gap:12px}
  .plane .pl-t{width:auto}
  .plane .pl-tag{display:none}
  .float.console{width:300px;height:210px;right:0}
  .float.phone{width:150px;height:316px;right:52%}
  .float.soc{width:220px;height:150px}
  .footer .f-right{margin-left:0;flex-wrap:wrap;gap:12px}
  .tb-brand .vx-stage{display:none}
  /* Orbit galaxy on phones: shrink it so the nodes never spill off-screen, and
     drop the readout card BELOW the wolf instead of floating over it (on desktop
     it stays an absolute overlay inside .orbit-shell). Kills the mobile overlap. */
  #layers .orbit-shell{width:min(96vw,440px)}
  /* flatter perspective (less front-node magnification) + smaller orbit + smaller
     nodes so nodes never swing off the edge as it auto-rotates on a phone */
  #layers .orbit-stage{width:min(62vw,272px);height:min(62vw,272px);max-height:none;margin:0 auto;perspective:2600px}
  #layers .orbit-core .em{width:52px}
  #layers .node-tile{width:50px;height:50px;border-radius:14px}
  #layers .node-tile .icon{width:23px;height:23px}
  #layers .node-btn{width:84px;gap:6px}
  #layers .node-lbl{font-size:12px}
  #layers .orbit-info{position:static;transform:none;left:auto;right:auto;bottom:auto;
    margin:16px auto 0;width:100%;min-width:0;max-width:none}
  #layers .orbit-hint{margin-top:10px}
}
/* Tablet / iPad (641–1080px): the orbit is already square via the shared
   min(88vw,74svh,860px) sizing; drop the readout card BELOW the orbit (as on
   phones) instead of floating it as an absolute overlay, so it never clips off
   the fold or overlaps the ring on touch screens. */
@media (min-width:641px) and (max-width:1080px){
  #layers .orbit-info{position:static;transform:none;left:auto;right:auto;bottom:auto;
    margin:18px auto 0;width:100%;min-width:0;max-width:min(88vw,460px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .orbit-world{transform:rotateX(64deg) rotateZ(28deg)!important}
}


/* ══════════ NEXUS · human rework additions ══════════ */
.reveal{filter:blur(7px);transition:opacity .9s var(--vx-ease),transform .9s var(--vx-ease),filter .9s var(--vx-ease)}
.reveal.in{filter:blur(0)}
.shimmer{background-size:220% auto;animation:shimmer 6.5s linear infinite}
@keyframes shimmer{to{background-position:220% center}}

.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--hero),var(--vx-blue-br),var(--vx-mint-br));box-shadow:0 0 12px var(--hero-glow)}

.cursor-ring{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:79;pointer-events:none;
  border:1.5px solid color-mix(in srgb,var(--hero) 55%,transparent);transform:translate(-50%,-50%);
  transition:width .25s var(--vx-ease),height .25s var(--vx-ease),border-color .25s,background .25s;mix-blend-mode:screen}
.cursor-ring.big{width:54px;height:54px;background:var(--hero-sf);border-color:var(--hero)}
@media (hover:none){.cursor-ring{display:none}}

.pre-pill{display:flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:20px;
  background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln);color:var(--vx-mint-br);
  font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pre-pill .d{width:7px;height:7px;border-radius:50%;background:var(--vx-mint);box-shadow:0 0 9px var(--vx-mint);animation:pulse calc(2.4s*var(--drift)) var(--vx-ease) infinite}
@media (max-width:760px){.pre-pill{display:none}}

/* The topbar's flex row needs ~1357px. Between 1081px and that width the
   primary CTA was pushed past the right edge and clipped (1280 and 1366
   laptops both hit it). Shed the QA status badge first, then the in-page
   anchor nav - which is already hidden below 1080px. */
@media (max-width:1400px){ .pre-pill{display:none} }
@media (max-width:1240px){ .tb-nav{display:none} }


.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.pillar-card{--pc-c:var(--hero-br);--pc-sf:var(--hero-sf);--pc-ln:var(--hero-ln);position:relative;padding:28px 24px;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--vx-line);transition:.34s var(--vx-ease)}
.pillar-card::before{content:"";position:absolute;inset:0;opacity:0;transition:.34s;pointer-events:none;background:radial-gradient(80% 60% at 30% 0%,var(--pc-sf),transparent 70%)}
.pillar-card:hover{transform:translateY(-6px);border-color:var(--pc-ln);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pillar-card:hover::before{opacity:1}
.pc-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;position:relative;z-index:1;background:var(--pc-sf);border:1px solid var(--pc-ln);color:var(--pc-c)}
.pc-ic .icon{width:26px;height:26px}
.pc-t{font-family:var(--vx-f-disp);font-weight:600;font-size:22px;letter-spacing:-.01em;margin:18px 0 8px;position:relative;z-index:1}
.pc-d{font-size:14px;color:var(--vx-text-dim);line-height:1.6;position:relative;z-index:1}

.action-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:20px}
.action-note{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-faint);margin-top:24px}
.demo{position:relative;display:grid;place-items:center;min-height:420px}
.demo-glow{position:absolute;width:80%;height:70%;border-radius:50%;background:radial-gradient(circle,var(--hero-glow),transparent 65%);filter:blur(34px);opacity:.6}
.demo-card{position:relative;width:min(100%,404px);border-radius:24px;overflow:hidden;background:rgba(11,14,22,.86);
  backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--vx-line-2);box-shadow:var(--vx-shadow-pop)}
.demo-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--vx-line)}
.demo-head .em{width:24px;height:24px}
.demo-head .dh-name{font-family:var(--vx-f-disp);font-weight:600;font-size:14px}
.demo-head .dh-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.05em;color:var(--vx-mint-br)}
.demo-head .dh-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.demo-body{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:212px}
.demo-msg,.demo-scan,.demo-verdict{opacity:0;transform:translateY(10px)}
.msg-tag{font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-dim);margin-bottom:6px}
.msg-bubble{padding:13px 15px;border-radius:14px 14px 14px 4px;background:var(--vx-surface-2);border:1px solid var(--vx-line);font-size:13.5px;color:var(--vx-text-muted);line-height:1.5}
.demo-scan{display:flex;align-items:center;gap:10px;font-family:var(--vx-f-mono);font-size:11px;color:var(--vx-blue-br)}
.scan-dot{width:8px;height:8px;border-radius:50%;background:var(--vx-blue);box-shadow:0 0 10px var(--vx-blue);flex:none}
.scan-line{flex:1;height:1px;background:linear-gradient(90deg,var(--vx-blue-ln),transparent);position:relative;overflow:hidden}
.scan-line::after{content:"";position:absolute;top:0;left:-40%;height:100%;width:40%;background:linear-gradient(90deg,transparent,var(--vx-blue-br),transparent);animation:scanSweep 1.4s linear infinite}
@keyframes scanSweep{to{left:100%}}
.demo-verdict{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--vx-mint-sf);border:1px solid var(--vx-mint-ln)}
.dv-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(0,229,184,.16);border:1px solid var(--vx-mint-ln);color:var(--vx-mint-br)}
.dv-ic .icon{width:20px;height:20px}
.dv-txt b{font-family:var(--vx-f-disp);font-weight:600;font-size:15px;color:var(--vx-text);display:block}
.dv-txt p{font-size:12px;color:var(--vx-text-muted);margin-top:2px;line-height:1.45}
.dv-stamp{margin-left:auto;flex:none;font-family:var(--vx-f-mono);font-size:9px;letter-spacing:.1em;color:var(--vx-mint-br);border:1px solid var(--vx-mint-ln);border-radius:7px;padding:5px 9px}
.demo-foot{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:10px;color:var(--vx-text-dim)}
.demo-foot b{color:var(--vx-text)}
.demo.play .demo-msg{animation:demoStep 8s var(--vx-ease) infinite;animation-delay:.2s}
.demo.play .demo-scan{animation:demoStep 8s var(--vx-ease) infinite;animation-delay:2s}
.demo.play .demo-verdict{animation:demoStep 8s var(--vx-ease) infinite;animation-delay:3.6s}
@keyframes demoStep{0%{opacity:0;transform:translateY(10px)}6%{opacity:1;transform:none}82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-6px)}}
[data-motion="off"] .demo-msg,[data-motion="off"] .demo-scan,[data-motion="off"] .demo-verdict{opacity:1;transform:none;animation:none}

.dev-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.dev-chip{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:22px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);font-size:12.5px;font-weight:500;color:var(--vx-text-muted)}
.dev-chip .icon{width:16px;height:16px;color:var(--vx-text-dim)}
.dev-chip.live{color:var(--vx-mint-br);border-color:var(--vx-mint-ln);background:var(--vx-mint-sf)}
.dev-chip .ld{width:7px;height:7px;border-radius:50%;background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}

.float.scanner{width:420px;height:250px;right:-2%;top:20px}
.sc{position:relative;height:calc(100% - 34px);padding:16px 18px;display:flex;flex-direction:column;gap:10px;z-index:1}
.sc-field{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:12px;color:var(--vx-text-muted)}
.sc-field .icon{width:16px;height:16px;color:var(--vx-text-dim)}
.sc-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:10.5px;color:var(--vx-text-muted)}
.sc-row .dot{width:7px;height:7px;border-radius:50%;flex:none}
.sc-row.ok .dot{background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.sc-row b{margin-left:auto;color:var(--vx-mint-br)}

.mp-rows{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:16px}
.mp-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--vx-line);font-family:var(--vx-f-mono);font-size:9px;color:var(--vx-text-muted)}
.mp-row .dot{width:7px;height:7px;border-radius:50%;flex:none}
.mp-row .dot.ok{background:var(--vx-mint);box-shadow:0 0 8px var(--vx-mint)}
.mp-row .dot.rd{background:var(--vx-blue);box-shadow:0 0 8px var(--vx-blue)}
.mp-row b{margin-left:auto;color:var(--vx-text-dim)}
.mp-score{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:2px}
.mp-score b{font-family:var(--vx-f-disp);font-weight:700;font-size:34px;color:var(--hero-br);line-height:1}
.mp-score span{font-family:var(--vx-f-mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--vx-text-dim)}

.privacy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.priv{padding:24px 20px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--vx-line);transition:.3s var(--vx-ease)}
.priv:hover{transform:translateY(-4px);border-color:var(--hero-ln);background:rgba(255,255,255,.05)}
.pv-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--hero-sf);border:1px solid var(--hero-ln);color:var(--hero-br)}
.pv-ic .icon{width:22px;height:22px}
.pv-t{font-family:var(--vx-f-disp);font-weight:600;font-size:16px;margin:16px 0 6px}
.pv-d{font-size:12.5px;color:var(--vx-text-dim);line-height:1.55}
/* The landing page asserted four privacy properties and linked to nothing that
   supported any of them, while /security/ and /transparency/ both existed and
   were unreachable from here. A claim the reader cannot check costs trust. */
.trust-evidence{text-align:center;margin-top:26px;font-family:var(--vx-f-mono);font-size:12px;letter-spacing:.04em;color:var(--vx-text-faint)}
.trust-evidence a{color:var(--vx-text-muted);text-decoration:none;border-bottom:1px solid var(--vx-line-2);padding-bottom:2px;transition:color .15s,border-color .15s}
.trust-evidence a:hover,.trust-evidence a:focus-visible{color:var(--vx-text);border-bottom-color:var(--vx-line)}
.trust-evidence span{margin:0 10px;opacity:.5}
.trust-line{text-align:center;margin-top:34px;font-family:var(--vx-f-serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--vx-text-muted)}

.join-form{display:flex;gap:10px;margin-top:6px;width:min(100%,440px)}
.join-form input{flex:1;padding:14px 16px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--vx-line-2);color:var(--vx-text);font:inherit;font-size:14px;outline:none;transition:.2s}
.join-form input::placeholder{color:var(--vx-text-faint)}
.join-form input:focus{border-color:var(--hero-ln);background:rgba(255,255,255,.07)}
.join-form .btn{white-space:nowrap}
.join-meta{font-family:var(--vx-f-mono);font-size:10px;letter-spacing:.05em;color:var(--vx-text-faint);margin-top:4px}

.footer{flex-direction:column;align-items:flex-start;gap:16px}
.f-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.f-tag{max-width:52ch;font-size:13px;color:var(--vx-text-dim);line-height:1.6}

@media (max-width:1080px){
  .pillars{grid-template-columns:1fr}
  .action-wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .privacy-grid{grid-template-columns:1fr 1fr}
  .float.scanner{width:340px;height:220px}
}
@media (max-width:640px){
  .privacy-grid{grid-template-columns:1fr}
  .join-form{flex-direction:column}
  .float.scanner{width:280px;height:190px;right:0}
}
/* short viewports (laptops ~768 tall): compact the hero so headline + CTA stay above the fold */
@media (max-height:820px){
  #hero{padding-top:74px}
  .aegis{width:min(26vh,240px);height:min(26vh,240px);margin-bottom:0}
  .hero-inner{gap:13px}
  .hero-wm{--vx-size:clamp(26px,3.4vw,42px)}
  .hero-line{font-size:clamp(28px,4.4vw,50px)}
  .hero-sub{font-size:15px}
  .hero-cta{margin-top:2px}
  .hero-tags{margin-top:8px}
}
@media (max-height:680px){
  .aegis{width:min(21vh,200px);height:min(21vh,200px)}
  .hero-line{font-size:clamp(26px,4vw,44px)}
  .scroll-hint{display:none}
}
/* hero copy is visible by default and animates via CSS (never depends on the scroll observer,
   so headline + CTA are always shown above the fold on load) */
#hero .reveal{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:no-preference){
  #hero .reveal{animation:heroRise .85s var(--vx-ease) both}
  #hero .reveal.d1{animation-delay:.12s}
  #hero .reveal.d2{animation-delay:.2s}
  #hero .reveal.d3{animation-delay:.3s}
  #hero .reveal.d4{animation-delay:.4s}
  #hero .reveal.d5{animation-delay:.5s}
}
@keyframes heroRise{from{transform:translateY(18px)}to{transform:none}}

/* Screen-reader-only text. The progress-rail buttons carry their real name in
   a span with this class: their visible label comes from
   `.progress button::after { content: attr(data-label) }`, and CSS generated
   content is neither a reliable accessible name nor translatable. Without this
   rule the name renders as ordinary visible text next to every dot. */
.vlx-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ── Topbar: sign-in, and the right-hand group always fits ────────────────
   Sign in had no entry point on any page with this topbar — every call to
   action speaks to a NEW visitor, and a returning customer had nowhere to go.
   Quieter than the primary CTA (the page is selling to new visitors) but never
   hidden, because "I cannot find how to log in" reads as "my account is gone".
   Typeset like the section nav so it belongs to the bar. */
.tb-signin{font-family:var(--vx-f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--vx-text-dim);padding:8px 13px;border-radius:9px;transition:.18s;white-space:nowrap}
.tb-signin:hover{color:var(--vx-text);background:rgba(255,255,255,.05)}

/* The CTA clipped to "Únete al…" in Spanish. `.btn` is white-space:nowrap with
   no flex-shrink guard, so as a flex item it compresses below its own text.
   English survived on length alone — measured in the shipped font, English
   126px, Spanish 199px, Polish 225px. The topbar now uses a SHORT label
   (cta.join_early_short: Spanish 136px, Polish 121px) and neither control may
   shrink. The section nav is the part that yields, by scrolling, so the brand
   and the right-hand group keep their size. */
.tb-brand,.tb-right{flex:0 0 auto}
.tb-nav{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-nav a{flex:0 0 auto}
.topbar .tb-right .btn.primary,.topbar .tb-signin{flex:0 0 auto}

/* The "early access open" badge repeats the hero three lines down, and the
   audience switcher is in the footer, so those are what give way first. */
@media (max-width:1280px){ .topbar .pre-pill{display:none} }
@media (max-width:1100px){ .topbar .tb-surface{display:none} }

/* Phones: on the LANDING pages the topbar CTA's label overran its own button,
   and the hero carries the same call to action a few hundred pixels down, so
   the row is better spent on sign-in. Scoped to href="#waitlist" exactly —
   the same-page anchor only the landing pages use. On business, company,
   developer, investors and transparency the topbar button is the page's MAIN
   action (contact, API access) with no duplicate below, and hiding it there
   would remove it. */
@media (max-width:640px){
  .topbar .tb-right{gap:8px}
  .tb-signin{padding:8px 9px;letter-spacing:.04em}
  .topbar .tb-right .btn.primary[href="#waitlist"]{display:none}
}