/* ═══════════════════════════════════════════
   VAULT V2 — styles.css
   ═══════════════════════════════════════════ */

/* ── Light mode component overrides (tokens at :root block below) ── */
[data-theme="light"] .noise{opacity:.012}
[data-theme="light"] body{background:var(--bg);color:var(--text)}
[data-theme="light"] .icon-sun{display:none}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="light"] .cursor-glow{opacity:.12}

/* Nav — frosted white */
[data-theme="light"] #nav{background:rgba(255,255,255,.82);border-color:var(--border);backdrop-filter:blur(12px)}
[data-theme="light"] #nav.solid{background:rgba(255,255,255,.96)}
[data-theme="light"] .logo{color:var(--text)}
[data-theme="light"] .nav-links a{color:var(--text2)}
[data-theme="light"] .nav-links a:hover{color:var(--cyan);background:rgba(2,132,199,.06)}
[data-theme="light"] .nav-signin{color:var(--text2)}
[data-theme="light"] .nav-signin:hover{color:var(--text)}
[data-theme="light"] .nav-mobile{background:rgba(255,255,255,.98);border-color:var(--border)}
[data-theme="light"] .nav-mobile a{color:var(--text2)}
[data-theme="light"] .nav-mobile a:hover{color:var(--cyan);background:rgba(2,132,199,.06)}
[data-theme="light"] .nav-icon-btn{background:var(--bg1);color:var(--text2);border-color:var(--border)}
[data-theme="light"] .nav-icon-btn:hover{background:var(--bg2);color:var(--text)}

/* Hero — bright gradient canvas */
[data-theme="light"] #hero{background:var(--grad-hero-bg)}
[data-theme="light"] .hero-bg .orb{opacity:.28}
[data-theme="light"] .hero-eyebrow{
  color:var(--cyan);
  border-color:rgba(3,105,161,.22);
  background:rgba(3,105,161,.07);
}
[data-theme="light"] .h1-line{color:var(--text)}
[data-theme="light"] .h1-grad{background:var(--grad-hero);-webkit-text-fill-color:transparent;background-clip:text}
[data-theme="light"] .hero-sub{color:var(--text2)}
[data-theme="light"] .trust-item,[data-theme="light"] .trust-sep{color:var(--text3)}
[data-theme="light"] .btn-hero-ghost{
  color:var(--text2);
  border-color:var(--border2);
  background:rgba(255,255,255,.75);
}
[data-theme="light"] .btn-hero-ghost:hover{
  color:var(--cyan);
  border-color:rgba(3,105,161,.35);
  background:rgba(3,105,161,.06);
}
[data-theme="light"] .btn-cta,
[data-theme="light"] .btn-hero-primary{
  background:linear-gradient(135deg,#0369a1 0%,#0284c7 100%);
  color:var(--on-accent);
  box-shadow:0 4px 14px rgba(3,105,161,.28);
}
[data-theme="light"] .btn-cta:hover,
[data-theme="light"] .btn-hero-primary:hover{
  background:linear-gradient(135deg,#075985 0%,#0369a1 100%);
  color:var(--on-accent);
  box-shadow:0 6px 20px rgba(3,105,161,.32);
}

/* Constellation */
[data-theme="light"] .hc-badge{
  color:var(--text2);
  background:rgba(255,255,255,.94);
  border-color:var(--glass-edge);
  box-shadow:0 2px 10px rgba(51,65,85,.07);
}
[data-theme="light"] .vst-layer{
  border:1px solid rgba(148,163,184,.32);
  background:linear-gradient(148deg,rgba(255,255,255,.97) 0%,rgba(241,245,252,.92) 100%);
  box-shadow:0 22px 56px rgba(51,65,85,.11),0 2px 8px rgba(51,65,85,.05),inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] .vst-layer-3{opacity:.48}
[data-theme="light"] .vst-layer-2{opacity:.72}
[data-theme="light"] .vst-caption{color:var(--text3)}
[data-theme="light"] .vst-logos{filter:none}
[data-theme="light"] .orbit-track-inner{border-color:rgba(3,105,161,.22)}
[data-theme="light"] .orbit-track-outer{border-color:rgba(109,40,217,.16)}

/* Orbital cards — white glass */
[data-theme="light"] .hcard{
  background:linear-gradient(145deg,rgba(255,255,255,.94) 0%,rgba(248,250,252,.88) 100%);
  border-top:1px solid rgba(255,255,255,.98);
  border-bottom:1px solid var(--glass-edge);
  border-left:2px solid var(--bc);
  border-right:2px solid var(--bcr,rgba(71,85,105,.18));
  box-shadow:0 4px 18px rgba(51,65,85,.09),0 1px 2px rgba(51,65,85,.04);
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  color:var(--text);
}
[data-theme="light"] .hcard-name{color:var(--text)}
[data-theme="light"] .hcard-sub{color:var(--text2)}
[data-theme="light"] .hcard-sub .hcard-pass{color:var(--text3)}
[data-theme="light"] .hcard-sub.warn{color:var(--red)}

[data-theme="light"] .hcard-icon img,
[data-theme="light"] .hcard-icon .brand-icon,
[data-theme="light"] .ec-icon img,
[data-theme="light"] .ec-icon .brand-icon,
[data-theme="light"] .sd-result img,
[data-theme="light"] .sd-result .brand-icon,
[data-theme="light"] .fd-file img,
[data-theme="light"] .fd-file .brand-icon,
[data-theme="light"] .cmd-row img,
[data-theme="light"] .cmd-row .brand-icon,
[data-theme="light"] .detail-icon img,
[data-theme="light"] .detail-icon .brand-icon{
  filter:none!important;
  color:var(--text2)!important;
  opacity:.88!important;
}

/* App mockup — white main, tinted sidebar only */
[data-theme="light"] .app-window{background:var(--bg1);border-color:var(--border);box-shadow:0 24px 64px rgba(100,120,180,.14),0 0 0 1px var(--border)}
[data-theme="light"] .app-titlebar{background:var(--bg);border-color:var(--border)}
[data-theme="light"] .app-sidebar{background:var(--bg2);border-color:var(--border)}
[data-theme="light"] .app-topbar,
[data-theme="light"] .app-main,
[data-theme="light"] .app-detail{background:var(--bg1)}
[data-theme="light"] .app-url{background:var(--bg1);color:var(--text3);border-color:var(--border)}
[data-theme="light"] .sb-search{background:var(--bg1);border-color:var(--border);color:var(--text3)}
[data-theme="light"] .sb-item:hover{background:rgba(2,132,199,.06)}
[data-theme="light"] .sb-item--active{background:rgba(2,132,199,.1);color:var(--cyan)}
[data-theme="light"] .entry-card{background:var(--bg1);border:1px solid var(--border)}
[data-theme="light"] .entry-card:hover,
[data-theme="light"] .entry-card--open{background:rgba(2,132,199,.05);border-color:rgba(2,132,199,.2)}
[data-theme="light"] .titlebar-icon{background:var(--bg2);border-color:var(--border)}
[data-theme="light"] .field-row{background:var(--bg);border-color:var(--border)}
[data-theme="light"] .topbar-stat.green{color:var(--green);background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.2)}
[data-theme="light"] .topbar-stat.red{color:var(--red);background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.18)}
[data-theme="light"] .topbar-new{background:var(--cyan);color:var(--on-accent)}
[data-theme="light"] .strength-badge{color:var(--green);background:rgba(22,163,74,.1)}
[data-theme="light"] .level-open{color:var(--green);background:rgba(22,163,74,.1)}
[data-theme="light"] .level-masked{color:var(--gold);background:rgba(217,119,6,.1)}
[data-theme="light"] .level-protected{color:var(--red);background:rgba(220,38,38,.08)}
[data-theme="light"] .air-chip.red{color:var(--red);background:rgba(220,38,38,.08)}
[data-theme="light"] .air-chip.amber{color:var(--gold);background:rgba(217,119,6,.1)}
[data-theme="light"] .air-chip.blue{color:#4338ca;background:rgba(99,102,241,.08)}
[data-theme="light"] .air-chip.green{color:var(--green);background:rgba(22,163,74,.1)}
[data-theme="light"] .air-score-bar{background:var(--bg3)}

/* Headings & stats band */
[data-theme="light"] .fs-h2,
[data-theme="light"] .sec-h2,
[data-theme="light"] .ai-h2,
[data-theme="light"] .cta-h2,
[data-theme="light"] .faq-h2,
[data-theme="light"] h2{color:var(--text)}
[data-theme="light"] .stat-n{color:var(--cyan)}
[data-theme="light"] .stat-l{color:var(--text3)}
[data-theme="light"] .sec-h2 em{color:var(--cyan)}

/* Background geometry — subtle on light canvas */
[data-theme="light"] .orb-1{background:radial-gradient(circle,rgba(14,165,233,.12),transparent 70%)}
[data-theme="light"] .orb-2{background:radial-gradient(circle,rgba(124,58,237,.08),transparent 70%)}
[data-theme="light"] .orb-3{background:radial-gradient(circle,rgba(245,158,11,.07),transparent 70%)}
[data-theme="light"] .bg3d .bgcube i,
[data-theme="light"] .bg3d .bgpyramid i,
[data-theme="light"] .bg3d .bgplane,
[data-theme="light"] .bg3d .bgring,
[data-theme="light"] .bg3d .bgtorus,
[data-theme="light"] .bg3d .bghex,
[data-theme="light"] .bg3d .bgdiamond,
[data-theme="light"] .bg3d .bgcross::before,
[data-theme="light"] .bg3d .bgcross::after{border-color:rgba(3,105,161,.22)}
[data-theme="light"] .bg3d .bgcube i,
[data-theme="light"] .bg3d .bgpyramid i,
[data-theme="light"] .bg3d .bgplane{background:rgba(3,105,161,.07)}
[data-theme="light"] .bg3d .bgdiamond{background:rgba(109,40,217,.06)}
[data-theme="light"] .bg3d .bgcross::before,
[data-theme="light"] .bg3d .bgcross::after{background:rgba(3,105,161,.24)}
[data-theme="light"] .bg3d .bgdot{background:rgba(3,105,161,.38);box-shadow:0 0 8px rgba(3,105,161,.2)}
[data-theme="light"] .hero-3d .bgcube i,
[data-theme="light"] .hero-3d .bgpyramid i{
  border-color:rgba(3,105,161,.24);
  background:rgba(3,105,161,.07);
}
[data-theme="light"] .hero-3d .bgring .bg-spin{border-color:rgba(109,40,217,.2)}
[data-theme="light"] .logo-flow-svg{filter:none}
[data-theme="light"] .stat-div{background:var(--border2)}

/* ── Reset ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
img,svg{display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;background:none;border:none;font:inherit}
ul{list-style:none}

/* ── Tokens (dark default) ───────────────── */
:root,
[data-theme="dark"]{
  --bg:       #050810;
  --bg1:      #090d1a;
  --bg2:      #0d1222;
  --bg3:      #111828;
  --border:   rgba(255,255,255,0.06);
  --border2:  rgba(255,255,255,0.1);
  --text:     #f1f5f9;
  --text2:    #94a3b8;
  --text3:    #475569;
  --cyan:     #00d4ff;
  --cyan2:    #06b6d4;
  --purple:   #7c3aed;
  --gold:     #f59e0b;
  --green:    #22c55e;
  --red:      #ef4444;
  --on-accent:#000000;
  --font-display: 'Sora', sans-serif;
  --font-h:   'Sora', sans-serif;
  --font-b:   'Sora', sans-serif;
  --font-m:   'Geist Mono', monospace;
  --r:        12px;
  --r-sm:     8px;
  --max:      1240px;
  /* Per-section canvas gradients (dark) */
  --section-stats: linear-gradient(180deg, #090d1a 0%, #0a1528 100%);
  --section-features: linear-gradient(168deg, #090d1a 0%, #0c1024 45%, #100a22 100%);
  --section-security: linear-gradient(165deg, #0a0d1a 0%, #0f0a24 42%, #0d1222 100%);
  --section-ai: linear-gradient(168deg, #090d1a 0%, #0a1a18 48%, #0c1024 100%);
  --section-pricing: linear-gradient(180deg, #0a0d1a 0%, #141008 38%, #0d1222 100%);
  --section-faq: linear-gradient(180deg, #090d1a 0%, #0c1228 100%);
  --section-cta: linear-gradient(155deg, #0a1228 0%, #100a24 48%, #0d1222 100%);
  --section-footer: #080c18;
}

/* Light tokens — AFTER dark :root so they win when html[data-theme="light"] */
:root[data-theme="light"]{
  --bg:    #f6f8fc;
  --bg1:   #ffffff;
  --bg2:   #eef2f9;
  --bg3:   #dfe6f2;
  --border: rgba(71,85,105,.12);
  --border2: rgba(71,85,105,.2);
  --text:  #1e293b;
  --text2: #475569;
  --text3: #64748b;
  --cyan:  #0369a1;
  --cyan2: #0ea5e9;
  --purple: #6d28d9;
  --gold:  #b45309;
  --green: #15803d;
  --red:   #dc2626;
  --on-accent: #ffffff;
  --grad-hero: linear-gradient(135deg, #0369a1 0%, #6d28d9 48%, #b45309 100%);
  --grad-hero-bg: linear-gradient(165deg, #eef6ff 0%, #f5f0ff 42%, #fffbeb 78%, #f6f8fc 100%);
  /* Premium glass system */
  --glass-bg: rgba(255,255,255,.72);
  --glass-bg-strong: rgba(255,255,255,.88);
  --glass-border: rgba(255,255,255,.92);
  --glass-edge: rgba(100,116,139,.18);
  --glass-blur: 20px;
  --glass-shadow: 0 4px 24px rgba(51,65,85,.08), inset 0 1px 0 rgba(255,255,255,.98);
  --glass-shadow-lg: 0 18px 48px rgba(51,65,85,.11), inset 0 1px 0 rgba(255,255,255,1);
  /* Per-section canvas gradients */
  --section-stats: linear-gradient(180deg,#fff 0%,#eef6ff 100%);
  --section-features: linear-gradient(168deg,#f4f8ff 0%,#eef4fd 45%,#f7f2ff 100%);
  --section-security: linear-gradient(165deg,#f8f6ff 0%,#f0ebff 42%,#f6f8fc 100%);
  --section-ai: linear-gradient(168deg,#ecfdf5 0%,#eff8ff 48%,#f2f6ff 100%);
  --section-pricing: linear-gradient(180deg,#fffbeb 0%,#fef7e7 38%,#f6f8fc 100%);
  --section-faq: linear-gradient(180deg,#fafcff 0%,#f1f5ff 100%);
  --section-cta: linear-gradient(155deg,#dbeafe 0%,#e9e4ff 48%,#f6f8fc 100%);
  --section-footer: #eef2f9;
}

/* ── Base ────────────────────────────────── */
html{overflow-x:hidden}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
h1{font-family:var(--font-display);line-height:1.05}
h2,h3{font-family:var(--font-h);line-height:1.1}

/* ── Noise overlay ───────────────────────── */
.noise{
  position:fixed;inset:0;
  pointer-events:none;z-index:999;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
}

/* ── Cursor glow ─────────────────────────── */
.cursor-glow{
  position:fixed;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.045) 0%,transparent 65%);
  pointer-events:none;
  z-index:0;
  transform:translate(-50%,-50%);
  transition:opacity .4s;
}

/* ── Reveal ──────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.12s}
.reveal-delay-2{transition-delay:.24s}

/* ── Buttons ─────────────────────────────── */
.btn-cta{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--cyan);color:var(--on-accent);
  font-family:var(--font-b);font-weight:700;font-size:13px;
  padding:8px 18px;border-radius:var(--r-sm);
  transition:background .2s,box-shadow .2s,transform .15s;
}
.btn-cta:hover{background:var(--cyan2);box-shadow:0 0 24px rgba(2,132,199,.25);transform:translateY(-1px)}
[data-theme="dark"] .btn-cta:hover{background:#22e0ff;box-shadow:0 0 24px rgba(0,212,255,.3)}
.btn-free{opacity:.7}

.btn-hero-primary{
  display:inline-flex;align-items:center;
  background:var(--cyan);color:var(--on-accent);
  font-family:var(--font-h);font-weight:700;font-size:15px;
  padding:13px 32px;border-radius:var(--r);
  transition:background .2s,box-shadow .2s,transform .15s;
}
.btn-hero-primary:hover{background:var(--cyan2);box-shadow:0 0 40px rgba(2,132,199,.28);transform:translateY(-2px)}
[data-theme="dark"] .btn-hero-primary:hover{background:#22e0ff;box-shadow:0 0 40px rgba(0,212,255,.35)}

.btn-hero-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border2);
  color:var(--text2);
  font-family:var(--font-b);font-weight:500;font-size:15px;
  padding:13px 28px;border-radius:var(--r);
  transition:border-color .2s,color .2s,background .2s;
}
.btn-hero-ghost:hover{border-color:var(--cyan);color:var(--text);background:rgba(0,212,255,.05)}

/* ═══ NAV ════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
#nav.solid{background:color-mix(in srgb, var(--bg) 94%, transparent)}
.nav-inner{
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(16px,3vw,48px);
  height:58px;
  display:flex;align-items:center;gap:28px;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-h);font-weight:800;font-size:.9rem;
  letter-spacing:.06em;color:var(--text);flex-shrink:0;
}
.vault-logo-link{
  display:inline-flex;align-items:center;
  font-size:0;line-height:0;
}
.logo-flow-svg{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
.vst-logos .logo-flow-svg{filter:none}
@media (prefers-reduced-motion:reduce){
  .logo-flow-svg animate,.gradient-flow-icons animate{display:none}
}
.gradient-flow-icons{display:inline-flex;vertical-align:middle}
.footer-social svg{display:block}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{color:var(--text3);font-size:13px;font-weight:500;padding:5px 12px;border-radius:6px;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--text);background:var(--bg3)}
[data-theme="light"] .nav-links a:hover{color:var(--cyan);background:rgba(2,132,199,.06)}
.nav-right{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;border:1px solid var(--border);background:var(--surface2)}
.lang-btn{border:0;background:transparent;color:var(--muted);font:600 10px/1 'Geist Mono',monospace;letter-spacing:.04em;padding:5px 7px;border-radius:999px;cursor:pointer;transition:color .15s,background .15s}
.lang-btn:hover{color:var(--text)}
.lang-btn.active{color:var(--text);background:var(--surface)}
.lang-switch--mobile{margin-bottom:8px;align-self:flex-start}
.nav-signin{color:var(--text3);font-size:13px;font-weight:500;padding:5px 12px;border-radius:6px;transition:color .2s}
.nav-signin:hover{color:var(--text)}
.nav-icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  border:1px solid var(--border2);
  color:var(--text3);
  background:rgba(255,255,255,.04);
  transition:color .2s,background .2s,border-color .2s;
  flex-shrink:0;
}
.nav-icon-btn:hover{color:var(--text);background:rgba(255,255,255,.08);border-color:var(--border2)}
.burger{display:none;flex-direction:column;gap:5px}
.burger span{width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:color .2s}
.nav-mobile{display:none;flex-direction:column;gap:4px;padding:10px clamp(16px,3vw,48px) 14px;border-top:1px solid var(--border);background:color-mix(in srgb, var(--bg) 98%, transparent)}
.nav-mobile a{padding:10px 12px;color:var(--text3);font-size:14px;border-radius:var(--r-sm);transition:color .2s}
.nav-mobile a:hover{color:var(--text);background:var(--bg3)}
[data-theme="light"] .nav-mobile a:hover{color:var(--cyan);background:rgba(2,132,199,.06)}
.nav-mobile.open{display:flex}

/* ═══ HERO ═══════════════════════════════════ */
#hero{
  position:relative;
  padding-top:clamp(100px,14vw,160px);
  padding-bottom:0;
  overflow-x:clip;
  overflow-y:visible;
}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-3d{
  position:absolute;inset:0;
  pointer-events:none;
  perspective:900px;
  -webkit-perspective:900px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.hero-3d .bg-obj{opacity:.85}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;animation:orbDrift 20s ease-in-out infinite}
.orb-1{width:700px;height:700px;background:radial-gradient(circle,rgba(0,212,255,.18),transparent 70%);top:-200px;left:-150px;animation-duration:22s}
.orb-2{width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,.15),transparent 70%);top:-100px;right:-200px;animation-delay:-7s;animation-duration:26s}
.orb-3{width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,.1),transparent 70%);bottom:0;left:50%;animation-delay:-12s;animation-duration:18s;animation-name:orbDriftCenter}
@keyframes orbDriftCenter{
  0%,100%{transform:translateX(-50%) translate(0,0)}
  33%    {transform:translateX(-50%) translate(20px,-14px)}
  66%    {transform:translateX(-50%) translate(-12px,10px)}
}
@keyframes orbDrift{
  0%,100%{transform:translate(0,0)}
  33%    {transform:translate(24px,-18px)}
  66%    {transform:translate(-16px,12px)}
}

/* ── Hero wrapper — CSS Grid on desktop, ordered flex on mobile ── */
.hero-wrapper{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(16px,3vw,48px);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto auto;
  grid-template-areas:
    "eyebrow      constellation"
    "headline     constellation"
    "sub          constellation"
    "ctas         constellation"
    "trust        constellation";
  column-gap:clamp(32px,5vw,72px);
  align-items:start;
}
.orbital-system{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  transform:translate(-50%,calc(-50% + var(--orbit-y,0px)));
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.orbital-system .vault-stack-wrap{
  position:absolute;
  top:0;left:0;
  --vst-scale:1;
  transform:translate(-50%,-50%) scale(var(--vst-scale));
  transform-origin:center center;
  pointer-events:none;
}
.hero-h1       { grid-area:headline; align-self:center }
.hero-sub      { grid-area:sub }
.hero-ctas     { grid-area:ctas; justify-content:flex-start }
.hero-trust    { grid-area:trust; justify-content:flex-start }
.hero-eyebrow  { grid-area:eyebrow; margin-bottom:20px }
.hero-constellation { grid-area:constellation; grid-row:1/6; align-self:center }

/* ── Lock constellation ──────────────────── */
.hero-constellation{
  position:relative;
  min-height:660px;
  height:660px;
  overflow:visible;
  perspective:900px;
  -webkit-perspective:900px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  --orbit-y:-16px;
  --orbit-inner:248px;
  --orbit-outer:318px;
  --orbit-inner-dur:24s;
  --orbit-outer-dur:40s;
}
.hc-lock-wrap{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  z-index:3;
}
.hc-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(0,212,255,.18);
  animation:ringPulse 3s ease-in-out infinite;
}
.hc-ring-1{width:130px;height:130px;animation-delay:0s}
.hc-ring-2{width:200px;height:200px;border-color:rgba(0,212,255,.09);animation-delay:.55s}
.hc-ring-3{width:280px;height:280px;border-color:rgba(0,212,255,.05);animation-delay:1.1s}
.hc-glow{
  position:absolute;width:220px;height:220px;
  background:radial-gradient(circle,rgba(0,212,255,.12) 0%,transparent 65%);
  border-radius:50%;animation:glowBreath 3s ease-in-out infinite;
}
@keyframes glowBreath{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.hc-lock-svg{
  width:160px;height:160px;position:relative;z-index:2;
  filter:drop-shadow(0 0 20px rgba(0,212,255,.4));
}
.hc-lock-label{
  margin-top:10px;font-family:var(--font-m);font-size:10px;font-weight:700;
  color:var(--cyan);letter-spacing:.05em;
  background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.18);
  padding:4px 12px;border-radius:100px;white-space:nowrap;position:relative;z-index:2;
}

/* ── Orbital radii (clears central vault stack) ── */
.orbit-arm[data-orbit="inner"]{--r:var(--orbit-inner);--dur:var(--orbit-inner-dur)}
.orbit-arm[data-orbit="outer"]{--r:var(--orbit-outer);--dur:var(--orbit-outer-dur)}

/* ── Orbital arms ────────────────────────── */
.orbit-arm{
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  animation:orbit-cw var(--dur,20s) linear var(--delay,0s) infinite;
  z-index:3;
  will-change:transform;
}
.orbit-arm--ccw{
  animation-name:orbit-ccw;
}
@keyframes orbit-cw  { from{transform:rotate(0deg)}   to{transform:rotate(360deg)}  }
@keyframes orbit-ccw { from{transform:rotate(0deg)}   to{transform:rotate(-360deg)} }

/* ── Glass credential cards ──────────────── */
.hcard{
  position:absolute;
  left:var(--r,180px);
  top:0;
  /* Fixed height — all cards same, width varies by content */
  height:56px;
  padding:0 12px 0 10px;
  /* Glass: bilateral edge highlights — left AND right in brand color */
  border-top:   1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.04);
  border-left:  2px solid var(--bc);
  border-right: 2px solid var(--bcr, rgba(255,255,255,.25));
  border-radius:10px;
  /* Frosted glass background with diagonal light sweep */
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.1) 0%,
    rgba(15,20,40,.72) 35%,
    rgba(10,15,32,.78) 65%,
    rgba(255,255,255,.05) 100%
  );
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  /* Inner top highlight + outer glow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 0.5px rgba(255,255,255,.06),
    0 0 20px color-mix(in srgb, var(--bc) 12%, transparent);
  display:flex;align-items:center;gap:8px;
  isolation:isolate;
  /* 3D depth: scale+opacity simulates orbital front/back; z-index snaps mid-orbit */
  animation:depth-cw var(--dur,20s) linear var(--delay,0s) infinite;
}
.orbit-arm--ccw .hcard{
  animation-name:depth-ccw;
}
/* Orbit arms also carry a z-index animation so cards alternate in-front/behind elements */
.orbit-arm{
  animation:
    orbit-cw var(--dur,20s) linear var(--delay,0s) infinite,
    zidx-cw  var(--dur,20s) step-start var(--delay,0s) infinite;
}
.orbit-arm--ccw{
  animation:
    orbit-ccw var(--dur,20s) linear var(--delay,0s) infinite,
    zidx-ccw  var(--dur,20s) step-start var(--delay,0s) infinite;
}
@keyframes zidx-cw  { 0%,49.9%{z-index:7} 50%,100%{z-index:2} }
@keyframes zidx-ccw { 0%,49.9%{z-index:2} 50%,100%{z-index:7} }

/* Front of orbit: large+bright; back: small+faded (passes behind hub) */
@keyframes depth-cw {
  0%   { transform:translateX(-50%) translateY(-50%) rotate(0deg)    scale(1);    opacity:1;   }
  25%  { transform:translateX(-50%) translateY(-50%) rotate(-90deg)  scale(1.04); opacity:1;   }
  50%  { transform:translateX(-50%) translateY(-50%) rotate(-180deg) scale(0.72); opacity:.28; }
  75%  { transform:translateX(-50%) translateY(-50%) rotate(-270deg) scale(0.82); opacity:.5;  }
  100% { transform:translateX(-50%) translateY(-50%) rotate(-360deg) scale(1);    opacity:1;   }
}
@keyframes depth-ccw {
  0%   { transform:translateX(-50%) translateY(-50%) rotate(0deg)   scale(1);    opacity:1;   }
  25%  { transform:translateX(-50%) translateY(-50%) rotate(90deg)  scale(0.82); opacity:.5;  }
  50%  { transform:translateX(-50%) translateY(-50%) rotate(180deg) scale(0.72); opacity:.28; }
  75%  { transform:translateX(-50%) translateY(-50%) rotate(270deg) scale(1.04); opacity:1;   }
  100% { transform:translateX(-50%) translateY(-50%) rotate(360deg) scale(1);    opacity:1;   }
}

.hcard-icon{
  width:34px;height:34px;flex-shrink:0;
  border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.hcard-icon img{width:20px!important;height:20px!important}
.brand-icon{display:block;flex-shrink:0;fill:currentColor;color:#fff;filter:brightness(0) invert(1)}
.brand-icon--muted{opacity:.55!important}
[data-theme="light"] .brand-icon{
  color:var(--text2);
  filter:none;
  opacity:.9;
}
[data-theme="light"] .brand-icon--muted{opacity:.42!important}
.hcard-body{flex:1;min-width:0}
.hcard-name{
  font-size:11px;font-weight:700;color:var(--text);line-height:1;
  font-family:var(--font-h);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hcard-sub{font-size:9px;color:var(--text3);margin-top:3px;white-space:nowrap}
.hcard-pass{font-family:var(--font-m);letter-spacing:.03em}
.hcard-sub.warn{color:#f87171}
.hcard-ind{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hcard-ind.green{background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,.6)}
.hcard-ind.amber{background:#f59e0b;box-shadow:0 0 5px rgba(245,158,11,.6)}
.hcard-ind.red{background:#ef4444;box-shadow:0 0 5px rgba(239,68,68,.7);animation:blink 1.5s ease infinite}

/* Security badge chips */
.hc-badge{
  position:absolute;
  font-family:var(--font-m);font-size:9px;font-weight:700;
  color:rgba(148,163,184,.65);
  background:rgba(15,21,40,.75);
  border:1px solid rgba(255,255,255,.07);
  padding:5px 11px;border-radius:100px;
  backdrop-filter:blur(10px);
  z-index:5;white-space:nowrap;
  animation:floatY 6s ease-in-out infinite;
}
/* Badges at top of constellation — clear of the central atom */
.hc-badge-1{top:5%;left:50%;transform:translateX(-50%);animation-delay:0s}
.hc-badge-2{top:12%;right:4%;animation-delay:.8s}
.hc-badge-3{top:12%;left:4%;animation-delay:1.6s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(0,212,255,.2);
  background:rgba(0,212,255,.05);
  color:var(--cyan);
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:5px 14px;border-radius:100px;
  margin-bottom:28px;
}
.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:blink 2s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.hero-h1{
  font-size:clamp(3rem,7vw,6rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:28px;
  display:flex;flex-direction:column;gap:4px;
}
.h1-line{display:block}
.h1-grad{
  background:linear-gradient(135deg,var(--cyan) 0%,var(--purple) 50%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  background-size:200%;
  animation:gradShift 4s ease infinite;
}
@keyframes gradShift{0%,100%{background-position:0%}50%{background-position:100%}}

.hero-sub{color:var(--text2);font-size:clamp(.95rem,1.6vw,1.1rem);max-width:540px;margin:0 auto 36px;line-height:1.7}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.hero-trust{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3)}
.trust-sep{color:var(--text3);opacity:.4}

/* APP MOCKUP */
.mockup-wrap{
  position:relative;
  max-width:1100px;margin:40px auto 0;
  padding:0 clamp(12px,3vw,40px);
  z-index:2;
}
.mockup-glow{
  position:absolute;
  bottom:-40px;left:10%;right:10%;height:120px;
  background:radial-gradient(ellipse,rgba(0,212,255,.18) 0%,transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.app-window{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:var(--bg1);
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);
  transform:perspective(2000px) rotateX(3deg);
  transform-origin:center bottom;
  transition:transform .6s ease;
}
.app-window:hover{transform:perspective(2000px) rotateX(0deg)}
.app-titlebar{
  height:38px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 14px;gap:8px;
}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:#ef4444}.dot.y{background:#f59e0b}.dot.g{background:#22c55e}
.app-url{
  flex:1;text-align:center;
  font-family:var(--font-m);font-size:10px;
  color:var(--text3);
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  padding:3px 12px;border-radius:5px;max-width:220px;margin:0 auto;
}
.app-titlebar-actions{display:flex;gap:6px}
.titlebar-icon{width:20px;height:14px;border-radius:3px;background:rgba(255,255,255,.05);border:1px solid var(--border)}

.app-body{display:flex;height:400px}

/* Sidebar */
.app-sidebar{
  width:180px;flex-shrink:0;
  border-right:1px solid var(--border);
  background:var(--bg2);
  padding:12px 8px;
  display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.app-sidebar:hover{scrollbar-color:rgba(100,116,139,.4) transparent}
.app-sidebar::-webkit-scrollbar{width:4px}
.app-sidebar::-webkit-scrollbar-track{background:transparent}
.app-sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.app-sidebar:hover::-webkit-scrollbar-thumb{background:rgba(100,116,139,.4)}
.sb-search{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  border:1px solid var(--border);border-radius:6px;
  background:rgba(255,255,255,.03);
  margin-bottom:8px;
  font-size:10px;color:var(--text3);
}
.sb-search kbd{margin-left:auto;font-family:var(--font-m);font-size:8px;background:var(--bg3);border:1px solid var(--border);padding:1px 4px;border-radius:3px;color:var(--text3)}
.sb-section{font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--text3);padding:8px 8px 4px;text-transform:uppercase;margin-top:4px}
.sb-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;font-size:10px;color:var(--text2);cursor:default;transition:background .15s}
.sb-item:hover{background:rgba(255,255,255,.04)}
.sb-item--active{background:rgba(0,212,255,.08);color:var(--cyan)}
.sb-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sb-count{margin-left:auto;font-size:9px;color:var(--text3);font-family:var(--font-m)}
.sb-star{color:var(--gold);font-size:10px}
.sb-file{color:var(--text3);font-size:10px}
.sb-item--pro .sb-file{color:var(--text3);opacity:.5}
.sb-pro-tag{margin-left:auto;font-size:7px;font-weight:700;background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.2);padding:1px 5px;border-radius:3px;letter-spacing:.05em}
.sb-footer{display:flex;align-items:center;gap:8px;margin-top:auto;padding:8px;border-top:1px solid var(--border)}
.sb-avatar{width:24px;height:24px;border-radius:50%;background:rgba(0,212,255,.15);color:var(--cyan);font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-user-info{display:flex;flex-direction:column;min-width:0}
.sb-user-info span{font-size:10px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-info small{font-size:8px;color:var(--cyan)}

/* Main */
.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);min-width:0}
.app-topbar{display:flex;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg2);gap:10px;flex-shrink:0}
.app-breadcrumb{font-size:11px;font-weight:600;color:var(--text2);flex:1}
.app-breadcrumb span{color:var(--text3)}
.app-topbar-right{display:flex;align-items:center;gap:6px}
.topbar-stat{font-size:9px;font-weight:700;padding:3px 8px;border-radius:4px;font-family:var(--font-m)}
.topbar-stat.green{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.topbar-stat.red{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.topbar-new{font-size:10px;font-weight:700;background:var(--cyan);color:var(--on-accent);padding:4px 10px;border-radius:5px;border:none;cursor:default}

.entry-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 10px 6px;overflow:hidden;align-content:start}
.entry-pagination{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;gap:3px;
  padding:6px 10px 8px;
  border-top:1px solid var(--border);
  background:var(--bg2);
}
.page-btn,.page-num,.page-ellipsis{
  font-size:9px;font-family:var(--font-m);
  padding:3px 6px;border-radius:4px;
  color:var(--text3);
}
.page-btn--disabled{opacity:.45}
.page-num--active{background:var(--cyan);color:var(--on-accent);font-weight:700}
.page-ellipsis{padding:3px 2px}
.entry-card{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  border-radius:7px;
  border:1px solid var(--border);
  border-left:2px solid var(--ec);
  background:rgba(255,255,255,.02);
  cursor:default;transition:background .15s;position:relative;overflow:hidden;
}
.entry-card:hover,.entry-card--open{background:rgba(255,255,255,.04)}
.entry-card--open{border-color:rgba(0,212,255,.3);border-left-color:var(--cyan)}
.ec-border{position:absolute;inset:0;border-radius:7px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec) 15%,transparent)}
.ec-icon{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ec-info{flex:1;min-width:0}
.ec-name{font-size:10px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ec-meta{font-size:9px;color:var(--text3)}
.ec-strength{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ec-strength.strong{background:var(--green)}.ec-strength.medium{background:var(--gold)}.ec-strength.weak{background:var(--red)}
.breached-label{color:var(--red)}
.entry-card--breached{border-left-color:var(--red)!important}

/* Detail Panel */
.app-detail{width:200px;flex-shrink:0;background:var(--bg1);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.detail-header{display:flex;align-items:center;gap:8px}
.detail-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.detail-name{font-size:11px;font-weight:700;color:var(--text)}
.detail-domain{font-size:9px;color:var(--text3)}
.detail-edit{font-size:9px;font-weight:600;color:var(--cyan);border:1px solid rgba(0,212,255,.2);padding:2px 8px;border-radius:4px;margin-left:auto;background:rgba(0,212,255,.05)}
.detail-fields{display:flex;flex-direction:column;gap:4px}
.field-row{display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:5px;background:var(--bg2);border:1px solid var(--border)}
.field-row--masked{border-color:rgba(124,58,237,.2)}
.field-label{font-size:8px;color:var(--text3);font-weight:600;min-width:50px}
.field-val{flex:1;font-size:9px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-val.mono{font-family:var(--font-m);letter-spacing:.05em}
.field-copy,.field-reveal{font-size:9px;color:var(--text3);padding:1px 3px;border-radius:3px;transition:color .15s}
.field-copy:hover,.field-reveal:hover{color:var(--cyan)}
.detail-meta{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.detail-meta span{font-size:8px;color:var(--text3)}
.strength-badge{font-size:8px;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(34,197,94,.1);color:#4ade80;font-family:var(--font-m)}

/* ═══ STATS ══════════════════════════════════ */
#stats{
  padding:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--section-stats);
  margin-top:56px;
}
.stats-inner{
  max-width:var(--max);margin:0 auto;
  padding:32px clamp(16px,3vw,48px);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;
}
.stat-block{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 clamp(24px,4vw,56px);min-width:140px}
.stat-n{font-family:var(--font-h);font-size:2rem;font-weight:800;color:var(--cyan);line-height:1;font-variant-numeric:tabular-nums;min-width:7ch;text-align:center}
.stat-n.stat-mono{font-family:var(--font-m);font-size:1.1rem;min-width:auto}
.stat-l{font-size:11px;color:var(--text3);font-weight:500;white-space:nowrap}
.stat-div{width:1px;height:40px;background:var(--border2)}

/* ═══ FEATURES ═══════════════════════════════ */
#features{
  padding:clamp(64px,8vw,120px) 0;
  display:flex;flex-direction:column;gap:clamp(80px,10vw,140px);
  background:var(--section-features);
}
.feature-story{
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(16px,3vw,48px);
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(40px,6vw,96px);
}
.feature-story--right .fs-text{order:2}
.feature-story--right .fs-visual{order:1}

.fs-tag{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 25%,transparent);
  background:color-mix(in srgb,var(--tc) 8%,transparent);
  padding:4px 12px;border-radius:100px;margin-bottom:16px;
}
.fs-tag--pro{display:inline-flex;align-items:center;gap:6px}
.fs-h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:16px;letter-spacing:-.02em}
.fs-body{color:var(--text2);font-size:.95rem;line-height:1.75;margin-bottom:24px}
.fs-list{display:flex;flex-direction:column;gap:8px}
.fs-list li{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--text2)}
.fs-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--cyan);flex-shrink:0}
.pro-note{display:flex;align-items:center;gap:6px;margin-top:20px;font-size:12px;color:var(--gold);opacity:.8}

/* Encryption diagram */
.enc-diagram{
  background:var(--bg1);
  border:1px solid var(--border2);
  border-radius:var(--r);
  padding:28px 24px;
  display:flex;flex-direction:column;align-items:center;
  gap:0;
}
.enc-node{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r-sm);
  border:1px solid var(--border2);
  background:var(--bg2);
}
.enc-node--input{border-color:rgba(239,68,68,.2)}
.enc-node--key{border-color:rgba(124,58,237,.2)}
.enc-node--cipher{border-color:rgba(0,212,255,.2)}
.enc-icon{font-size:1.2rem;flex-shrink:0}
.enc-label{font-size:13px;font-weight:600;color:var(--text)}
.enc-sublabel{font-size:10px;color:var(--text3);margin-left:auto}
.enc-cipher-text{font-family:var(--font-m);font-size:12px;color:var(--cyan)}
.mono-sm{font-family:var(--font-m);font-size:11px;color:var(--cyan)}
.enc-arrow{
  display:flex;align-items:center;
  width:100%;padding:6px 0;gap:10px;
}
.enc-arrow-line{
  flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--border2) 0,var(--border2) 4px,transparent 4px,transparent 8px);
}
.enc-arrow-tag{font-size:9.5px;font-family:var(--font-m);color:var(--text3);white-space:nowrap;font-weight:500}
.enc-server-label{
  display:flex;align-items:center;gap:8px;
  margin-top:16px;width:100%;
  font-size:10px;font-family:var(--font-m);color:var(--text3);
}
.enc-server-line{flex:1;height:1px;background:var(--border)}

/* Search demo */
.search-demo{
  background:var(--bg1);
  backdrop-filter:blur(20px);
  border:1px solid var(--border2);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(0,212,255,.08);
}
[data-theme="light"] .search-demo{
  box-shadow:0 8px 32px rgba(100,120,180,.12);
  backdrop-filter:none;
}
.sd-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--border);
}
.sd-input{font-size:14px;font-weight:500;flex:1}
.sd-cursor{display:inline-block;width:1.5px;height:14px;background:var(--cyan);margin-left:1px;animation:blink 1s step-end infinite}
.sd-bar kbd{font-family:var(--font-m);font-size:10px;background:var(--bg3);border:1px solid var(--border2);padding:2px 6px;border-radius:4px;color:var(--text3)}
.sd-results{padding:6px}
.sd-result{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:var(--r-sm);
  cursor:default;transition:background .1s;
}
.sd-result:hover{background:var(--bg3)}
.sd-result--active{background:rgba(0,212,255,.07)}
[data-theme="light"] .sd-result:hover{background:var(--bg2)}
[data-theme="light"] .sd-result--active{background:rgba(2,132,199,.08)}
.sd-icon-fallback{width:14px;height:14px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.sd-name{flex:1;font-size:13px;font-weight:500}
.sd-type{font-size:11px;color:var(--text3)}
.sd-hint{font-size:10px;font-family:var(--font-m);color:var(--text3);background:var(--bg3);border:1px solid var(--border);padding:2px 6px;border-radius:4px}
.sd-footer{padding:8px 16px;border-top:1px solid var(--border);font-size:10px;font-family:var(--font-m);color:var(--text3)}
.sd-footer kbd{background:var(--bg3);border:1px solid var(--border);padding:0 4px;border-radius:3px}

/* Files demo */
.files-demo{
  background:var(--bg1);border:1px solid var(--border2);
  border-radius:var(--r);overflow:hidden;
}
.fd-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600}
.fd-count{font-size:11px;color:var(--text3);font-family:var(--font-m)}
.fd-file{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--border);
  border-left:2px solid var(--fc);
}
.fd-icon{font-size:16px}
.fd-info{flex:1;min-width:0}
.fd-name{font-size:11px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-meta{font-size:9px;color:var(--text3)}
.fd-level{font-size:12px;border-radius:4px;padding:3px 6px;font-size:10px;font-weight:700}
.level-protected{background:rgba(239,68,68,.1);color:#f87171}
.level-masked{background:rgba(245,158,11,.1);color:#fbbf24}
.level-open{background:rgba(34,197,94,.1);color:#4ade80}
.fd-upload{padding:10px 16px;font-size:11px;color:var(--text3);border-top:1px dashed var(--border);cursor:default;text-align:center}

/* ═══ SECURITY ═══════════════════════════════ */
#security{
  background:var(--section-security);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:clamp(64px,8vw,120px) 0;
}
.security-content{
  max-width:var(--max);margin:0 auto;
  padding:0 clamp(16px,3vw,48px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(48px,6vw,96px);align-items:center;
}
.sec-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(0,212,255,.2);background:rgba(0,212,255,.05);
  padding:4px 12px;border-radius:100px;margin-bottom:16px;
}
.sec-h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;margin-bottom:16px;letter-spacing:-.02em}
.sec-h2 em{font-style:normal;color:var(--cyan)}
.sec-body{color:var(--text2);font-size:.95rem;line-height:1.75;margin-bottom:32px}
.sec-pillars{display:flex;flex-direction:column;gap:16px}
.sec-pillar{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg2)}
.sec-pillar-icon{font-size:1.25rem;flex-shrink:0;margin-top:2px}
.sec-pillar-title{font-size:.9rem;font-weight:700;margin-bottom:4px}
.sec-pillar-body{font-size:.825rem;color:var(--text2);line-height:1.6}

/* Vault visualization */
.sec-right{display:flex;flex-direction:column;align-items:center;gap:24px}
.sec-vault-vis{
  position:relative;
  width:280px;height:280px;
  display:flex;align-items:center;justify-content:center;
}
.vault-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vring{
  position:absolute;border-radius:50%;border:1px solid;
  animation:ringPulse 3s ease infinite;
}
.vring-1{width:110px;height:110px;border-color:rgba(0,212,255,.3);animation-delay:0s}
.vring-2{width:180px;height:180px;border-color:rgba(0,212,255,.15);animation-delay:.5s}
.vring-3{width:250px;height:250px;border-color:rgba(0,212,255,.07);animation-delay:1s}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.6}}
.vault-core{
  width:72px;height:72px;border-radius:50%;
  background:var(--bg2);border:1px solid rgba(0,212,255,.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--cyan);z-index:2;
  box-shadow:0 0 30px rgba(0,212,255,.15);
}
.vault-orbit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:orbit var(--dur,10s) linear infinite}
.vault-orbit-1{--dur:8s}
.vault-orbit-2{--dur:11s;animation-direction:reverse}
.vault-orbit-3{--dur:14s}
.vault-orbit-4{--dur:9s;animation-direction:reverse}
@keyframes orbit{from{transform:rotate(0deg) translateX(120px) rotate(0deg)}to{transform:rotate(360deg) translateX(120px) rotate(-360deg)}}
.orbit-item{
  font-family:var(--font-m);font-size:10px;font-weight:700;
  padding:4px 8px;border-radius:6px;
  background:var(--bg);border:1px solid currentColor;
  white-space:nowrap;
}
.sec-quote{
  max-width:300px;text-align:center;
  font-size:.875rem;color:var(--text2);line-height:1.65;
  font-style:italic;
  border-left:2px solid var(--cyan);padding-left:16px;
  text-align:left;
}

/* ═══ AI ═════════════════════════════════════ */
#ai{
  padding:clamp(64px,8vw,120px) 0;
  background:var(--section-ai);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.ai-inner{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,3vw,48px);display:flex;flex-direction:column;gap:48px}
.ai-header{text-align:center;max-width:640px;margin:0 auto}
.ai-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);
  color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 14px;border-radius:100px;margin-bottom:16px;
}
.ai-h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.ai-sub{color:var(--text2);font-size:.95rem;max-width:520px;margin:0 auto}
.ai-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ai-card{
  padding:22px 20px;
  border:1px solid var(--border);
  border-top:2px solid var(--ac);
  border-radius:var(--r);
  background:var(--bg1);
  transition:border-color .2s,box-shadow .2s;
}
.ai-card:hover{box-shadow:0 0 24px color-mix(in srgb,var(--ac) 12%,transparent)}
.ai-card-icon{font-size:1.4rem;margin-bottom:10px}
.ai-card h3{font-size:.9rem;font-weight:700;margin-bottom:8px}
.ai-card p{font-size:.825rem;color:var(--text2);line-height:1.6}

/* AI report */
.ai-report{
  background:var(--bg1);border:1px solid var(--border2);
  border-radius:var(--r);overflow:hidden;
  max-width:680px;margin:0 auto;
}
.air-header{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.air-dot{width:10px;height:10px;border-radius:50%}
.air-dot.r{background:#ef4444}.air-dot.y{background:#f59e0b}.air-dot.g{background:#22c55e}
.air-title{font-size:12px;font-weight:600;color:var(--text2);margin-left:6px;flex:1}
.air-badge{font-size:10px;font-family:var(--font-m);color:var(--text3);background:var(--bg3);border:1px solid var(--border);padding:2px 8px;border-radius:4px}
.air-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.air-score-row{display:flex;align-items:center;gap:10px}
.air-score-label{font-size:12px;font-weight:600;color:var(--text2);white-space:nowrap}
.air-score-bar{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.air-score-fill{width:0;height:100%;background:linear-gradient(90deg,var(--cyan2),var(--green));border-radius:10px;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.air-score-fill.on{width:79%}
.air-score-val{font-family:var(--font-m);font-size:13px;font-weight:700;color:var(--green);white-space:nowrap}
.air-chips{display:flex;gap:6px;flex-wrap:wrap}
.air-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:100px}
.air-chip.red{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)}
.air-chip.amber{background:rgba(245,158,11,.1);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}
.air-chip.blue{background:rgba(99,102,241,.1);color:#a5b4fc;border:1px solid rgba(99,102,241,.2)}
.air-chip.green{background:rgba(34,197,94,.1);color:#4ade80;border:1px solid rgba(34,197,94,.2)}
.air-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg2)}
.air-item--critical{border-color:rgba(239,68,68,.2)}
.air-item-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.air-item-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px}
.air-item-action{font-size:11px;color:var(--text3)}

/* ═══ PRICING ════════════════════════════════ */
#pricing{
  padding:clamp(64px,8vw,120px) 0 clamp(48px,6vw,80px);
  background:var(--section-pricing);border-top:1px solid var(--border);
  overflow:hidden;
}
.pricing-header{text-align:center;margin-bottom:40px;padding:0 clamp(16px,3vw,48px)}
.pricing-header h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.pricing-header p{color:var(--text2)}
.billing-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.bill-label{font-size:13px;color:var(--text3);font-weight:500;transition:color .2s}
.bill-label.active{color:var(--text)}
.bill-toggle{position:relative;cursor:pointer}
.bill-toggle input{opacity:0;width:0;height:0;position:absolute}
.bill-track{display:block;width:40px;height:22px;background:var(--bg3);border:1px solid var(--border2);border-radius:100px;position:relative;transition:background .2s}
.bill-toggle input:checked+.bill-track{background:rgba(0,212,255,.15);border-color:var(--cyan)}
.bill-thumb{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:left .2s,background .2s}
.bill-toggle input:checked+.bill-track .bill-thumb{left:20px;background:var(--cyan)}
.bill-save{font-size:10px;font-weight:700;background:rgba(34,197,94,.1);color:var(--green);border:1px solid rgba(34,197,94,.2);padding:2px 7px;border-radius:100px;margin-left:4px}

/* ── Pricing carousel ────────────────────── */
.pricing-carousel{
  display:flex;
  align-items:center;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:32px 0 32px 0;
  /* Desktop: center-snap with spacer padding */
  scroll-padding-inline:calc(50% - 195px);
}
.pricing-carousel::-webkit-scrollbar{display:none}
.pricing-carousel::before,
.pricing-carousel::after{
  content:'';flex-shrink:0;
  width:calc(50% - 195px);
  min-width:16px;
}
@media(max-width:768px){
  .pricing-carousel{
    /* Show ~30px of adjacent cards on each side */
    scroll-padding-inline:24px;
    padding:24px 0;
    gap:12px;
  }
  .pricing-carousel::before,
  .pricing-carousel::after{
    width:24px;
    min-width:24px;
  }
  .price-card{
    width:75vw !important;
    max-width:290px !important;
  }
}

.price-card{
  flex-shrink:0;
  width:390px;max-width:88vw;
  padding:28px;
  border-radius:var(--r);
  position:relative;
  display:flex;flex-direction:column;gap:0;
  scroll-snap-align:center;
  background:var(--bg1);
  border:1px solid var(--border2);
  box-shadow:0 16px 50px rgba(0,0,0,.12);
  transform:scale(0.9);
  opacity:.75;
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .45s ease, box-shadow .45s ease;
  will-change:transform,opacity;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  cursor:default;
}
[data-theme="dark"] .price-card{
  background:linear-gradient(145deg,rgba(255,255,255,.07) 0%,rgba(8,12,24,.74) 45%,rgba(255,255,255,.03) 100%);
  backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid rgba(255,255,255,.1);
  border-top:1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 16px 50px rgba(0,0,0,.45);
}
.price-card--pro{
  border-color:rgba(0,212,255,.25);
}
.price-card--max{
  border-color:rgba(245,158,11,.22);
}
/* Center/active card is full-size */
.price-card.pc-active{
  transform:scale(1.0);
  opacity:1;
  box-shadow:0 24px 64px rgba(0,0,0,.15),0 0 40px rgba(2,132,199,.08);
}
[data-theme="dark"] .price-card.pc-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 64px rgba(0,0,0,.55),
    0 0 40px rgba(0,180,255,.1);
}
[data-theme="dark"] .price-card--pro.pc-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 64px rgba(0,0,0,.55),
    0 0 50px rgba(0,212,255,.15);
}
[data-theme="dark"] .price-card--max.pc-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 64px rgba(0,0,0,.55),
    0 0 50px rgba(245,158,11,.12);
}
.pc-popular{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--cyan);color:var(--on-accent);
  padding:3px 14px;border-radius:100px;white-space:nowrap;
}
.pc-plan{font-family:var(--font-h);font-size:1.1rem;font-weight:700;margin-bottom:10px}
.pc-price{display:flex;align-items:baseline;gap:4px;margin-bottom:4px}
.pc-amount{font-family:var(--font-h);font-size:2.75rem;font-weight:800;line-height:1}
.pc-per{color:var(--text3);font-size:.85rem}
.pc-billed{font-size:10px;color:var(--cyan);min-height:14px;margin-bottom:8px;font-family:var(--font-m)}
.pc-desc{color:var(--text2);font-size:.85rem;margin-bottom:20px}
.pc-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;flex:1}
.pc-features li{display:flex;align-items:flex-start;gap:8px;font-size:.83rem;color:var(--text2);line-height:1.4}
.pc-features li::before{content:'';flex-shrink:0;margin-top:4px}
.pc-features li.on::before{width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5l3 3 6-6' stroke='%2322c55e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}
.pc-features li.on.max::before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5l3 3 6-6' stroke='%23f59e0b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}
.pc-features li.off{color:var(--text3)}
.pc-features li.off::before{width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6.5h5' stroke='%23475569' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
.pc-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:11px;border-radius:var(--r-sm);font-size:13px;font-weight:700;transition:.2s}
.pc-btn--outline{border:1px solid var(--border2);color:var(--text2)}
.pc-btn--outline:hover{border-color:var(--cyan);color:var(--text);background:rgba(0,212,255,.05)}
.pc-btn--primary{background:var(--cyan);color:var(--on-accent)}
.pc-btn--primary:hover{background:var(--cyan2);box-shadow:0 0 20px rgba(2,132,199,.25)}
[data-theme="dark"] .pc-btn--primary:hover{background:#22e0ff;box-shadow:0 0 20px rgba(0,212,255,.3)}
.pc-btn--max{background:linear-gradient(135deg,var(--gold),#fbbf24);color:var(--on-accent)}
.pc-btn--max:hover{opacity:.9;box-shadow:0 0 20px rgba(245,158,11,.25)}
.pricing-foot{text-align:center;font-size:12px;color:var(--text3);margin-top:28px;padding:0 16px;max-width:var(--max);margin-left:auto;margin-right:auto}

/* ═══ FAQ ════════════════════════════════════ */
#faq{
  padding:clamp(64px,8vw,100px) 0;
  background:var(--section-faq);
}
.faq-inner{max-width:680px;margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.faq-h2{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:40px}
.faq-list{display:flex;flex-direction:column;gap:2px}
.faq-item{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg1);overflow:hidden}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:17px 20px;text-align:left;
  font-size:.95rem;font-weight:600;color:var(--text);
  transition:background .2s;
}
.faq-q:hover{background:rgba(255,255,255,.03)}
.fchev{flex-shrink:0;color:var(--text3);stroke:currentColor;transition:transform .3s}
.faq-item.open .fchev{transform:rotate(180deg)}
.faq-a{
  font-size:.875rem;color:var(--text2);line-height:1.75;
  padding:0 20px;max-height:0;overflow:hidden;
  transition:max-height .35s ease,padding .35s ease;
}
.faq-item.open .faq-a{max-height:180px;padding:0 20px 17px}

/* ═══ CTA ════════════════════════════════════ */
#cta{
  padding:clamp(64px,8vw,120px) clamp(16px,3vw,48px);
  text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--border);
  background:var(--section-cta);
}
.cta-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
.cta-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(0,212,255,.06),transparent 65%);
  pointer-events:none;
}
.cta-h2{font-size:clamp(1.75rem,3.5vw,3rem);font-weight:800;letter-spacing:-.025em;margin-bottom:16px}
.cta-sub{color:var(--text2);font-size:1rem;margin-bottom:36px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.cta-note{font-size:12px;color:var(--text3);font-family:var(--font-m)}

/* ═══ FOOTER ═════════════════════════════════ */
footer{border-top:1px solid var(--border);background:var(--section-footer)}
.footer-inner{
  max-width:var(--max);margin:0 auto;
  padding:48px clamp(16px,3vw,48px) 40px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
}
.footer-brand .logo{margin-bottom:10px}
.footer-brand p{font-size:.85rem;color:var(--text3);line-height:1.7}
.fc-head{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:14px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:.85rem;color:var(--text3);transition:color .2s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{
  max-width:var(--max);margin:0 auto;
  padding:18px clamp(16px,3vw,48px);
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--text3);flex-wrap:wrap;gap:8px;
}
.footer-social{
  display:flex;align-items:center;gap:14px;
}
.footer-social a{
  color:var(--text3);transition:color .15s;
  display:flex;align-items:center;
}
.footer-social a:hover{color:var(--text)}

/* ── 3D background geometry ──────────────── */
.bg3d{
  position:fixed;inset:0;
  width:100%;height:100%;
  min-height:100vh;min-height:100dvh;
  pointer-events:none;z-index:0;overflow:hidden;
  perspective:1100px;
  -webkit-perspective:1100px;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.bg-obj{
  position:absolute;
  --bg-scale:1;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.bg-obj:not(.bgdot):not(.bgcross){
  animation:bgObjDrift calc(var(--dur,24s)*1.35) ease-in-out var(--d,0s) infinite;
}
@keyframes bgObjDrift{
  0%,100%{transform:translate3d(0,0,0) scale(var(--bg-scale))}
  25%    {transform:translate3d(12px,-18px,24px) scale(var(--bg-scale))}
  50%    {transform:translate3d(-10px,10px,-16px) scale(var(--bg-scale))}
  75%    {transform:translate3d(8px,14px,12px) scale(var(--bg-scale))}
}
.bg-spin{
  width:100%;height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform:rotateX(var(--rx,20deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
  animation:bgTumble var(--dur,24s) linear var(--d,0s) infinite;
  will-change:transform;
}
@keyframes bgTumble{
  from{transform:rotateX(var(--rx,20deg)) rotateZ(var(--rz,0deg)) rotateY(var(--ry,0deg))}
  to  {transform:rotateX(var(--rx,20deg)) rotateZ(var(--rz,0deg)) rotateY(calc(var(--ry,0deg) + 360deg))}
}

/* Shared wireframe cube faces */
.cube-faces{
  position:relative;
  width:var(--s,40px);height:var(--s,40px);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.cube-faces i{
  position:absolute;inset:0;
  border:1px solid rgba(0,212,255,.18);
  background:rgba(0,212,255,.04);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-sizing:border-box;
}
.cube-faces i:nth-child(1){transform:rotateY(0deg) translateZ(calc(var(--s,40px)/2))}
.cube-faces i:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s,40px)/2))}
.cube-faces i:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s,40px)/2))}
.cube-faces i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s,40px)/2))}
.cube-faces i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s,40px)/2))}
.cube-faces i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s,40px)/2))}

.bgcube{width:var(--s,40px);height:var(--s,40px)}

/* Square pyramid — 4 triangular faces */
.bgpyramid{width:var(--s,44px);height:var(--s,44px)}
.bgpyramid .bg-spin{position:relative}
.bgpyramid i{
  position:absolute;left:0;top:0;
  width:var(--s,44px);height:var(--s,44px);
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
  transform-origin:50% 100%;
  border:1px solid rgba(0,212,255,.18);
  background:rgba(0,212,255,.05);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-sizing:border-box;
}
.bgpyramid i:nth-child(1){transform:rotateY(0deg) translateZ(calc(var(--s,44px)*.36)) rotateX(32deg)}
.bgpyramid i:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s,44px)*.36)) rotateX(32deg)}
.bgpyramid i:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s,44px)*.36)) rotateX(32deg)}
.bgpyramid i:nth-child(4){transform:rotateY(270deg) translateZ(calc(var(--s,44px)*.36)) rotateX(32deg)}

/* Gem plate — flat diamond tilted in space */
.bgdiamond{width:var(--s,36px);height:var(--s,36px)}
.bgdiamond-plate{
  width:100%;height:100%;
  border:1.5px solid rgba(0,212,255,.2);
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(124,58,237,.04));
  transform:rotateX(58deg) rotateZ(45deg);
  animation:bgGemFloat var(--dur,20s) ease-in-out var(--d,0s) infinite;
  will-change:transform;
}
@keyframes bgGemFloat{
  0%,100%{transform:rotateX(58deg) rotateZ(45deg) translateY(0) translateZ(0)}
  50%    {transform:rotateX(58deg) rotateZ(225deg) translateY(-12px) translateZ(18px)}
}

/* Hex wireframe */
.bghex{width:var(--s,40px);height:calc(var(--s,40px)*.866)}
.bghex-plate{
  width:100%;height:100%;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:rgba(0,212,255,.04);
  box-shadow:inset 0 0 0 1.5px rgba(0,212,255,.16);
  box-sizing:border-box;
  animation:bgHexSpin var(--dur,26s) linear var(--d,0s) infinite;
  will-change:transform;
}
@keyframes bgHexSpin{
  from{transform:rotateX(52deg) rotateZ(0deg)}
  to  {transform:rotateX(52deg) rotateZ(360deg)}
}

/* Glass plane */
.bgplane{width:calc(var(--s,48px)*1.35);height:calc(var(--s,48px)*1.35)}
.bgplane-plate{
  width:100%;height:100%;
  border:1px solid rgba(0,212,255,.14);
  background:linear-gradient(145deg,rgba(0,212,255,.07),rgba(99,102,241,.03));
  border-radius:4px;
  transform:rotateX(70deg) rotateZ(var(--rz,12deg));
  animation:bgPlaneDrift var(--dur,22s) ease-in-out var(--d,0s) infinite;
  will-change:transform;
}
@keyframes bgPlaneDrift{
  0%,100%{transform:rotateX(70deg) rotateZ(var(--rz,12deg)) translateY(0)}
  50%    {transform:rotateX(70deg) rotateZ(calc(var(--rz,12deg) + 18deg)) translateY(-8px)}
}

.bgring{
  width:var(--rs,80px);height:var(--rs,80px);
}
.bgring .bg-spin{
  width:100%;height:100%;
  border-radius:50%;
  border:1.5px solid rgba(0,212,255,.16);
  animation:bgRingPulse var(--dur,16s) ease-in-out var(--d,0s) infinite;
  transform:none;
}
@keyframes bgRingPulse{
  0%,100%{opacity:.45;transform:scale(1) rotateX(62deg) rotateZ(0deg)}
  50%    {opacity:.9;transform:scale(1.12) rotateX(62deg) rotateZ(180deg)}
}

/* Double-ring torus accent */
.bgtorus{width:var(--s,52px);height:var(--s,52px)}
.bgtorus-plate{
  position:relative;
  width:100%;height:100%;
  border-radius:50%;
  border:1.5px solid rgba(0,212,255,.15);
  transform:rotateX(68deg);
  animation:bgTorusSpin var(--dur,18s) linear var(--d,0s) infinite;
  will-change:transform;
}
.bgtorus-plate::after{
  content:'';position:absolute;
  inset:22%;
  border-radius:50%;
  border:1px solid rgba(0,212,255,.12);
}
@keyframes bgTorusSpin{
  from{transform:rotateX(68deg) rotateZ(0deg)}
  to  {transform:rotateX(68deg) rotateZ(360deg)}
}

.bgdot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(0,212,255,.35);
  box-shadow:0 0 8px rgba(0,212,255,.25);
  animation:bgDotBlink 3s ease-in-out var(--d,0s) infinite,bgDotFloat 9s ease-in-out var(--d,0s) infinite;
}
@keyframes bgDotBlink{0%,100%{opacity:.25;box-shadow:0 0 6px rgba(0,212,255,.15)}50%{opacity:.95;box-shadow:0 0 14px rgba(0,212,255,.45)}}
@keyframes bgDotFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-10px,8px)}
}

.bgcross{
  width:var(--csize,16px);height:var(--csize,16px);
  animation:bgCrossSpin 14s ease-in-out var(--d,0s) infinite;
  will-change:transform,opacity;
}
@keyframes bgCrossSpin{
  0%,100%{transform:rotate(0deg) scale(1);opacity:.45}
  50%    {transform:rotate(90deg) scale(1.2);opacity:.85}
}
.bgcross::before,.bgcross::after{
  content:'';position:absolute;
  background:rgba(0,212,255,.2);border-radius:1px;
}
.bgcross::before{width:100%;height:1px;top:50%;transform:translateY(-50%)}
.bgcross::after{height:100%;width:1px;left:50%;transform:translateX(-50%)}

@media (prefers-reduced-motion:reduce){
  .bg3d,.hero-3d{transform:none!important;transition:none}
  .bg-obj:not(.bgdot):not(.bgcross){animation:none}
  .bg-spin,.bgdiamond-plate,.bghex-plate,.bgplane-plate,.bgtorus-plate,.bgring .bg-spin,.bgdot,.bgcross{animation:none}
  .s3d-cube .cube-faces,.s3d-ring,.s3d-dot,.s3d-prism,.s3d-diamond-plate,.s3d-hex-plate,.s3d-plane-plate{animation:none}
  .orb,.orbit-track-inner,.orbit-track-outer,.vault-stack,.vst-shimmer{animation:none}
}

/* Main content above bg3d */
nav,main,footer{position:relative;z-index:1}

/* orbit arms anchor at orbital system center */
.orbital-system .orbit-arm,
.orbital-system .orbit-arm--ccw{
  top:0;left:0;
}

/* ── 3D glass orb ────────────────────────── */
.hc-lock-wrap{
  perspective:700px;
}
.orb-ring-sys{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:260px;height:260px;
  margin:-130px 0 0 -130px;
  pointer-events:none;
}
.orb-ring-3d{
  position:absolute;top:50%;left:50%;
  border-radius:50%;
}
.orb-ring-a{
  width:200px;height:200px;margin:-100px 0 0 -100px;
  border:1.5px solid rgba(200,185,255,.5);
  animation:orbRingA 7s linear infinite;
  will-change:transform;
}
@keyframes orbRingA{
  from{transform:rotateX(75deg) rotateZ(0deg)}
  to  {transform:rotateX(75deg) rotateZ(360deg)}
}
.orb-ring-b{
  width:242px;height:242px;margin:-121px 0 0 -121px;
  border:1px solid rgba(160,145,255,.25);
  animation:orbRingB 11s linear infinite reverse;
  will-change:transform;
}
@keyframes orbRingB{
  from{transform:rotateX(68deg) rotateY(25deg) rotateZ(0deg)}
  to  {transform:rotateX(68deg) rotateY(25deg) rotateZ(360deg)}
}
.orb-ring-c{
  width:160px;height:160px;margin:-80px 0 0 -80px;
  border:1px dashed rgba(0,212,255,.2);
  animation:orbRingC 5.5s linear infinite;
  will-change:transform;
}
@keyframes orbRingC{
  from{transform:rotateX(15deg) rotateY(80deg) rotateZ(0deg)}
  to  {transform:rotateX(15deg) rotateY(80deg) rotateZ(-360deg)}
}

.hc-sphere{
  /* Perfect circle — equal width and height, enforced */
  width:178px;height:178px;
  min-width:178px;min-height:178px;
  border-radius:50%;
  position:relative;z-index:2;
  /* Light pastel glass — pearlescent crystal ball */
  background:
    /* Primary specular — bright top-left */
    radial-gradient(ellipse at 28% 22%, rgba(255,255,255,.92) 0%, rgba(230,240,255,.4) 18%, transparent 50%),
    /* Secondary soft reflection — bottom right */
    radial-gradient(ellipse at 72% 74%, rgba(200,185,255,.38) 0%, rgba(180,200,255,.18) 28%, transparent 55%),
    /* Faint blue-white core */
    radial-gradient(circle at 50% 50%, rgba(210,225,255,.18) 0%, rgba(190,210,255,.06) 55%, transparent 100%);
  /* Light glow: lavender + blue-white */
  box-shadow:
    0 0 80px rgba(180,160,255,.5),
    0 0 160px rgba(150,170,255,.2),
    0 0 50px rgba(210,230,255,.45),
    /* Bright glass rim */
    inset 0 0 0 1.5px rgba(255,255,255,.7),
    inset 0 0 0 0.5px rgba(200,185,255,.5),
    /* Inner depth */
    inset 0 -8px 24px rgba(160,140,220,.1),
    inset 0 10px 32px rgba(255,255,255,.35);
  backdrop-filter:blur(16px) saturate(1.8);
  -webkit-backdrop-filter:blur(16px) saturate(1.8);
  display:flex;align-items:center;justify-content:center;
  animation:spherePulse 3.5s ease-in-out infinite;
}
@keyframes spherePulse{
  0%,100%{
    box-shadow:
      0 0 80px rgba(180,160,255,.5),
      0 0 160px rgba(150,170,255,.2),
      0 0 50px rgba(210,230,255,.45),
      inset 0 0 0 1.5px rgba(255,255,255,.7),
      inset 0 0 0 0.5px rgba(200,185,255,.5),
      inset 0 -8px 24px rgba(160,140,220,.1),
      inset 0 10px 32px rgba(255,255,255,.35)
  }
  50%{
    box-shadow:
      0 0 110px rgba(190,165,255,.65),
      0 0 220px rgba(160,180,255,.28),
      0 0 70px rgba(220,235,255,.55),
      inset 0 0 0 1.5px rgba(255,255,255,.8),
      inset 0 0 0 0.5px rgba(210,195,255,.6),
      inset 0 -8px 24px rgba(160,140,220,.1),
      inset 0 10px 32px rgba(255,255,255,.45)
  }
}
.sphere-spec{
  position:absolute;top:11%;left:15%;
  width:38%;height:28%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.7) 0%,rgba(255,255,255,.2) 55%,transparent 75%);
  transform:rotate(-25deg);pointer-events:none;
}
.sphere-spec-2{
  top:58%;right:9%;width:20%;height:16%;opacity:.28;transform:rotate(15deg);
}
.sphere-rim{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 62% 68%,rgba(124,58,237,.28) 0%,transparent 55%);
  pointer-events:none;
}
.sphere-icon{position:relative;z-index:1}
.hc-sphere-shadow{
  position:absolute;bottom:-22px;left:50%;
  width:100px;height:22px;
  transform:translateX(-50%);
  background:rgba(180,160,255,.3);
  border-radius:50%;filter:blur(16px);
  animation:shadowPulse 3.5s ease-in-out infinite;
}
@keyframes shadowPulse{0%,100%{opacity:.6;width:90px}50%{opacity:1;width:110px}}

.orbit-arm,.orbit-arm--ccw{ transform-style:preserve-3d }

/* ── Orbit track lines ───────────────────── */
.orbit-track{
  position:absolute;
  top:calc(50% + var(--orbit-y,0px));left:50%;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  transform:translate(-50%,-50%);
}
.orbit-track-inner{
  width:calc(var(--orbit-inner, 248px) * 2);
  height:calc(var(--orbit-inner, 248px) * 2);
  border:1px dashed rgba(0,212,255,.2);
  box-shadow:0 0 8px rgba(0,212,255,.05);
  animation:trackSpin 48s linear infinite;
}
.orbit-track-outer{
  width:calc(var(--orbit-outer, 318px) * 2);
  height:calc(var(--orbit-outer, 318px) * 2);
  border:1px dashed rgba(124,58,237,.14);
  box-shadow:0 0 8px rgba(124,58,237,.03);
  animation:trackSpin 64s linear infinite reverse;
}
@keyframes trackSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}

/* ── Sora hero h1 sizing ─────────────────── */
.hero-h1{
  font-size:clamp(3rem,6.5vw,5.8rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
}
.h1-line{display:block}

/* ── Wide CTA button ─────────────────────── */
.btn-hero-wide{width:100%;justify-content:center;font-size:14px;padding:14px 24px}

/* ── Trust 1 line ────────────────────────── */
.hero-trust{flex-wrap:nowrap;gap:6px}
.trust-item{font-size:10.5px;white-space:nowrap}
.trust-sep{font-size:10px}

/* ── App grid 3-col ──────────────────────── */
.entry-grid{grid-template-columns:1fr 1fr 1fr}

/* ── Feature story glass cards ───────────── */
.feature-story .fs-visual > *{
  border:1px solid var(--border2);
  box-shadow:0 8px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.enc-diagram,.search-demo,.files-demo{
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}

/* ── Vault Stack (hero hub) ────────────────── */
.vault-stack-wrap{
  display:flex;flex-direction:column;align-items:center;gap:30px;
  z-index:4;
}
.vault-stack{
  position:relative;
  width:288px;height:324px;
  perspective:1560px;
  transform-style:preserve-3d;
  animation:vstTilt 7s ease-in-out infinite;
}
@keyframes vstTilt{
  0%,100%{transform:rotateX(6deg) rotateY(-10deg)}
  50%    {transform:rotateX(6deg) rotateY(8deg)}
}
.vst-layer{
  position:absolute;inset:0;
  border-radius:48px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(148deg,rgba(22,28,48,.92) 0%,rgba(10,14,28,.88) 100%);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 30px 108px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
}
.vst-layer-3{
  transform:translate3d(30px,-30px,-84px) rotate(-5deg) scale(.9);
  opacity:.42;
}
.vst-layer-2{
  transform:translate3d(15px,-15px,-42px) rotate(-2deg) scale(.95);
  opacity:.68;
}
.vst-layer-1{
  transform:translate3d(0,0,0);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.vst-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
  animation:vstShimmer 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes vstShimmer{
  0%  {transform:translateX(-120%) skewX(-12deg)}
  100%{transform:translateX(120%) skewX(-12deg)}
}
.vst-logos{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;line-height:0;position:relative;z-index:1;
}
.vst-logo-part{
  display:flex;align-items:center;justify-content:center;line-height:0;
}
.vst-caption{
  font-family:var(--font-m);font-size:24px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3);
  white-space:nowrap;margin:0;
}

/* ── Mobile card visibility fix ─────────────── */
/* Cards need enough width to show content clearly */
@media(max-width:1024px){
  .hcard{
    width:142px !important;
    height:52px !important;
    padding:0 10px 0 8px !important;
  }
  .hcard-icon{ width:30px !important; height:30px !important; }
  .hcard-icon img{ width:18px !important; height:18px !important; }
  .hcard-name{ font-size:10px !important }
  .hcard-sub{ font-size:8.5px !important }
}
@media(max-width:768px){
  .hcard{
    width:126px !important;
    height:54px !important;
    padding:0 8px 0 7px !important;
    gap:6px !important;
  }
  .hcard-icon{ width:26px !important; height:26px !important; }
  .hcard-icon img{ width:15px !important; height:15px !important; }
  .hcard-name{ font-size:9px !important }
  .hcard-sub{ display:block !important; font-size:8px !important; color:var(--text3) !important; margin-top:2px !important }
  .hcard-ind{ width:5px !important; height:5px !important }
}

/* ── Light mode — premium sections, glass & 3D ─── */
[data-theme="light"] #stats{
  background:var(--section-stats);
  border-top:1px solid var(--glass-edge);
  border-bottom:1px solid var(--glass-edge);
}
[data-theme="light"] #features{background:var(--section-features)}
[data-theme="light"] #security{background:var(--section-security);border-color:var(--border)}
[data-theme="light"] #ai{background:var(--section-ai);border-color:var(--border)}
[data-theme="light"] #pricing{background:var(--section-pricing)}
[data-theme="light"] #faq{background:var(--section-faq)}
[data-theme="light"] #cta{background:var(--section-cta);border-color:var(--border)}
[data-theme="light"] footer{background:var(--section-footer)}

/* Light mode mobile — softer section tints */
@media(max-width:768px){
  [data-theme="light"] #stats{background:linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);border-color:rgba(3,105,161,.1)}
  [data-theme="light"] #features{background:linear-gradient(180deg,#f6f2ff 0%,#f4f8ff 100%)}
  [data-theme="light"] #security{background:linear-gradient(180deg,#f7f4ff 0%,#f3efff 100%)}
  [data-theme="light"] #ai{background:linear-gradient(180deg,#ecfdf5 0%,#e8faf3 100%)}
  [data-theme="light"] #pricing{background:linear-gradient(180deg,#fffbeb 0%,#fef3c7 100%)}
  [data-theme="light"] #faq{background:linear-gradient(180deg,#f8faff 0%,#eef4ff 100%)}
  [data-theme="light"] #cta{background:linear-gradient(155deg,#dbeafe 0%,#ddd6fe 100%)}
}

/* Glass surfaces — cards & demo panels */
[data-theme="light"] .glass-surface,
[data-theme="light"] .enc-diagram,
[data-theme="light"] .search-demo,
[data-theme="light"] .files-demo,
[data-theme="light"] .sec-pillar,
[data-theme="light"] .ai-card,
[data-theme="light"] .ai-report,
[data-theme="light"] .ai-panel,
[data-theme="light"] .price-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .stat-block,
[data-theme="light"] .security-flow,
[data-theme="light"] .pillar-card{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.45);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.45);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .25s;
}
[data-theme="light"] .enc-node,
[data-theme="light"] .air-item,
[data-theme="light"] .ai-suggestion{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--glass-edge);
  box-shadow:0 2px 12px rgba(70,90,150,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .hcard{
  background:linear-gradient(145deg,rgba(255,255,255,.92) 0%,rgba(248,250,252,.82) 50%,rgba(255,255,255,.88) 100%);
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  border-top:1px solid rgba(255,255,255,.98);
  border-bottom:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
}
[data-theme="light"] .app-window{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:var(--glass-shadow-lg);
}
[data-theme="light"] .entry-card{
  background:var(--glass-bg-strong);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
[data-theme="light"] .price-card.pc-active{
  background:var(--glass-bg-strong);
  box-shadow:var(--glass-shadow-lg);
  border-color:rgba(2,132,199,.28);
}
[data-theme="light"] .sec-pillar:hover,
[data-theme="light"] .ai-card:hover,
[data-theme="light"] .faq-item:hover{
  box-shadow:var(--glass-shadow-lg);
  transform:translateY(-2px);
}
[data-theme="light"] .feature-story .fs-visual > *{
  box-shadow:var(--glass-shadow);
  border:1px solid var(--glass-border);
}

/* Section accent tints */
[data-theme="light"] #features .fs-tag{color:var(--cyan);border-color:rgba(3,105,161,.2);background:rgba(3,105,161,.07)}
[data-theme="light"] #security .sec-tag{color:var(--purple);border-color:rgba(109,40,217,.2);background:rgba(109,40,217,.07)}
[data-theme="light"] #ai .ai-sub{color:var(--text2)}
[data-theme="light"] #pricing .pricing-header h2{color:var(--text)}
[data-theme="light"] .stat-n{color:var(--cyan)}
[data-theme="light"] .stat-block{
  padding:20px 28px;border-radius:var(--r);
  min-width:140px;
}

[data-theme="light"] .orbit-track-inner{border-color:rgba(3,105,161,.22)}
[data-theme="light"] .orbit-track-outer{border-color:rgba(109,40,217,.16)}

/* Features & demos */
[data-theme="light"] .feature-story{background:transparent}
[data-theme="light"] .fs-body,[data-theme="light"] .fs-list li{color:var(--text2)}
[data-theme="light"] .enc-node--input{border-color:rgba(239,68,68,.28)}
[data-theme="light"] .enc-node--key{border-color:rgba(124,58,237,.28)}
[data-theme="light"] .enc-node--cipher{border-color:rgba(2,132,199,.28)}
[data-theme="light"] .enc-label{color:var(--text)}
[data-theme="light"] .enc-sublabel,[data-theme="light"] .enc-arrow-tag,[data-theme="light"] .enc-server-label{color:var(--text3)}
[data-theme="light"] .enc-chip{background:rgba(239,68,68,.08);color:#be123c;border-color:rgba(239,68,68,.18)}
[data-theme="light"] .sd-bar{border-color:var(--glass-edge)}
[data-theme="light"] .sd-input{color:var(--text)}
[data-theme="light"] .sd-result:hover{background:rgba(255,255,255,.5)}
[data-theme="light"] .sd-result--active{background:rgba(2,132,199,.08)}
[data-theme="light"] .sd-name{color:var(--text)}
[data-theme="light"] .sd-type,[data-theme="light"] .sd-hint,[data-theme="light"] .sd-footer{color:var(--text3)}
[data-theme="light"] .fd-header{border-color:var(--glass-edge);color:var(--text)}
[data-theme="light"] .fd-file{border-color:var(--glass-edge)}
[data-theme="light"] .fd-name{color:var(--text)}
[data-theme="light"] .fd-meta,[data-theme="light"] .fd-upload{color:var(--text3)}

/* Security */
[data-theme="light"] .sec-body{color:var(--text2)}
[data-theme="light"] .sec-pillar-title{color:var(--text)}
[data-theme="light"] .sec-pillar-body{color:var(--text2)}
[data-theme="light"] .sec-quote{color:var(--text2);border-color:var(--purple)}
[data-theme="light"] .flow-title{background:rgba(255,255,255,.45);color:var(--text3);backdrop-filter:blur(8px)}
[data-theme="light"] .flow-node{color:var(--text)}
[data-theme="light"] .flow-transfer{background:rgba(255,255,255,.35)}
[data-theme="light"] .flow-server-note{color:var(--text3)}

/* AI section */
[data-theme="light"] .ai-panel-header,[data-theme="light"] .air-header{background:rgba(255,255,255,.45);backdrop-filter:blur(10px);border-color:var(--glass-edge)}
[data-theme="light"] .ai-panel-title,[data-theme="light"] .air-title,[data-theme="light"] .air-score-label{color:var(--text2)}
[data-theme="light"] .ai-sug-title{color:var(--text)}
[data-theme="light"] .ai-card-title,[data-theme="light"] .ai-card h3{color:var(--text)}
[data-theme="light"] .ai-card p{color:var(--text2)}
[data-theme="light"] .air-item-title{color:var(--text)}
[data-theme="light"] .air-item-action{color:var(--text3)}

/* Command palette demo */
[data-theme="light"] #command{background:transparent}
[data-theme="light"] .cmd-palette{background:var(--glass-bg-strong);border-color:var(--glass-border);box-shadow:var(--glass-shadow-lg);backdrop-filter:blur(var(--glass-blur))}
[data-theme="light"] .cmd-search{border-color:var(--glass-edge)}
[data-theme="light"] .cmd-row--active{background:rgba(2,132,199,.08)}
[data-theme="light"] .cmd-name{color:var(--text)}
[data-theme="light"] .cmd-type,[data-theme="light"] .cmd-footer{color:var(--text3)}
[data-theme="light"] .cmd-kbd,[data-theme="light"] .sd-bar kbd,[data-theme="light"] .sd-footer kbd{background:rgba(255,255,255,.6);border-color:var(--glass-edge);color:var(--text3)}

/* Testimonials & pricing */
[data-theme="light"] #testimonials{background:var(--section-features)}
[data-theme="light"] .testimonial{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));border-color:var(--glass-border);box-shadow:var(--glass-shadow)}
[data-theme="light"] .testimonial-quote{color:var(--text2)}
[data-theme="light"] .testimonial-quote::before,[data-theme="light"] .testimonial-quote::after{color:var(--cyan)}
[data-theme="light"] .pricing-header p,[data-theme="light"] .pricing-foot{color:var(--text3)}
[data-theme="light"] .bill-label{color:var(--text3)}
[data-theme="light"] .bill-label.active{color:var(--text)}
[data-theme="light"] .pc-plan,[data-theme="light"] .pc-amount{color:var(--text)}
[data-theme="light"] .pc-desc,[data-theme="light"] .pc-per,[data-theme="light"] .pc-features li{color:var(--text2)}
[data-theme="light"] .pc-billed{color:var(--cyan)}
[data-theme="light"] .pc-features li.off{color:var(--text3)}
[data-theme="light"] .pc-popular{background:var(--cyan);color:var(--on-accent)}
[data-theme="light"] .pc-btn--primary{background:var(--cyan);color:var(--on-accent)}
[data-theme="light"] .pc-btn--outline{color:var(--text2);border-color:var(--glass-edge);background:var(--glass-bg)}
[data-theme="light"] .pc-btn--outline:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(2,132,199,.08)}
[data-theme="light"] .price-card--pro.pc-active{border-color:rgba(3,105,161,.32);box-shadow:0 20px 48px rgba(3,105,161,.12), inset 0 1px 0 rgba(255,255,255,1)}
[data-theme="light"] .price-card--max.pc-active{border-color:rgba(180,83,9,.28);box-shadow:0 20px 48px rgba(180,83,9,.1), inset 0 1px 0 rgba(255,255,255,1)}

/* FAQ, CTA, footer */
[data-theme="light"] .faq-q{color:var(--text)}
[data-theme="light"] .faq-q:hover{background:rgba(255,255,255,.55)}
[data-theme="light"] .faq-a{color:var(--text2)}
[data-theme="light"] .fchev{color:var(--text3)}
[data-theme="light"] .cta-h2{color:var(--text)}
[data-theme="light"] .cta-sub,[data-theme="light"] .cta-note{color:var(--text2)}
[data-theme="light"] .footer-bottom{border-color:var(--glass-edge)}
[data-theme="light"] .footer-brand p,[data-theme="light"] .footer-bottom,[data-theme="light"] .footer-built{color:var(--text3)}
[data-theme="light"] .fc-head{color:var(--text2);font-weight:700}
[data-theme="light"] .footer-col a{color:var(--text2)}
[data-theme="light"] .footer-col a:hover{color:var(--cyan)}
[data-theme="light"] .footer-social a{color:var(--text3)}
[data-theme="light"] .footer-social a:hover{color:var(--cyan)}
[data-theme="light"] .stats-inner{background:transparent}

/* Glows, shadows & security viz */
[data-theme="light"] .cursor-glow{
  background:radial-gradient(circle,rgba(3,105,161,.06) 0%,transparent 65%);
  opacity:.3;
}
[data-theme="light"] .cta-glow{
  background:radial-gradient(ellipse,rgba(2,132,199,.08) 0%,transparent 65%);
}
[data-theme="light"] .feature-story .fs-visual > *{
  box-shadow:0 8px 32px rgba(100,120,180,.1),inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .vault-core{
  background:var(--bg1);
  border-color:rgba(2,132,199,.25);
  box-shadow:0 0 24px rgba(2,132,199,.12);
  color:var(--cyan);
}
[data-theme="light"] .vring-1{border-color:rgba(2,132,199,.28)}
[data-theme="light"] .vring-2{border-color:rgba(2,132,199,.16)}
[data-theme="light"] .vring-3{border-color:rgba(2,132,199,.08)}
[data-theme="light"] .orbit-item{background:var(--bg1);color:var(--text2)}
[data-theme="light"] .bill-track{background:var(--bg3);border-color:var(--border)}
[data-theme="light"] .bill-toggle input:checked+.bill-track{background:rgba(2,132,199,.15);border-color:var(--cyan)}
[data-theme="light"] .bill-thumb{background:var(--text3)}
[data-theme="light"] .bill-toggle input:checked+.bill-track .bill-thumb{background:var(--cyan)}
[data-theme="light"] .faq-q:hover{background:var(--bg2)}
[data-theme="light"] .sb-search{background:var(--bg1)}
[data-theme="light"] .app-window:hover{box-shadow:0 28px 72px rgba(100,120,180,.18),0 0 0 1px var(--glass-edge)}

/* ── Section 3D scenes (interactive) ──────── */
.section-scene{position:relative;overflow:hidden}
.section-scene > :not(.section-3d){position:relative;z-index:1}
.section-3d{
  position:absolute;inset:0;
  pointer-events:none;z-index:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  overflow:visible;
}
.s3d-shape{
  position:absolute;
  left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.s3d-ring{
  width:var(--rs,80px);height:var(--rs,80px);
  border-radius:50%;
  border:1.5px dashed var(--s3d-color,rgba(0,212,255,.18));
  transform:translate(-50%,-50%) rotateX(58deg);
  animation:s3dRingSpin var(--dur,20s) linear infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dRingSpin{
  from{transform:translate(-50%,-50%) rotateX(58deg) rotateZ(0deg)}
  to  {transform:translate(-50%,-50%) rotateX(58deg) rotateZ(360deg)}
}
.s3d-cube{
  width:var(--s,32px);height:var(--s,32px);
}
.s3d-cube .cube-faces{
  animation:s3dCubeSpin var(--dur,18s) linear infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dCubeSpin{
  0%  {transform:rotateX(22deg) rotateY(0deg) translateY(0)}
  50% {transform:rotateX(22deg) rotateY(180deg) translateY(-10px)}
  100%{transform:rotateX(22deg) rotateY(360deg) translateY(0)}
}
.s3d-cube .cube-faces i{
  border:1px solid var(--s3d-color,rgba(0,212,255,.28));
  background:rgba(0,212,255,.06);
  border-radius:2px;
}
.s3d-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--s3d-color,rgba(0,212,255,.35));
  box-shadow:0 0 12px var(--s3d-color,rgba(0,212,255,.35));
  animation:s3dPulse 3s ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:opacity,transform;
}
.s3d-prism{
  width:var(--s,24px);height:calc(var(--s,24px)*1.35);
  clip-path:polygon(50% 0%,0% 100%,100% 100%);
  border:1px solid var(--s3d-color,rgba(0,212,255,.15));
  background:linear-gradient(180deg,rgba(0,212,255,.14),rgba(0,212,255,.02));
  transform:translate(-50%,-50%) rotateX(18deg);
  animation:s3dPrismFloat var(--dur,16s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dPrismFloat{
  0%,100%{transform:translate(-50%,-50%) rotateX(18deg) rotateY(0deg) translateY(0)}
  50%    {transform:translate(-50%,-50%) rotateX(18deg) rotateY(180deg) translateY(-12px)}
}
.s3d-diamond{
  width:var(--s,28px);height:var(--s,28px);
}
.s3d-diamond-plate{
  width:100%;height:100%;
  border:1.5px solid var(--s3d-color,rgba(0,212,255,.22));
  background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(124,58,237,.05));
  transform:rotateX(56deg) rotateZ(45deg);
  animation:s3dGemSpin var(--dur,19s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dGemSpin{
  0%,100%{transform:rotateX(56deg) rotateZ(45deg) translateY(0)}
  50%    {transform:rotateX(56deg) rotateZ(225deg) translateY(-8px)}
}
.s3d-hex{
  width:var(--s,34px);height:calc(var(--s,34px)*.866);
}
.s3d-hex-plate{
  width:100%;height:100%;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:rgba(0,212,255,.04);
  box-shadow:inset 0 0 0 1.5px var(--s3d-color,rgba(0,212,255,.2));
  box-sizing:border-box;
  animation:s3dHexSpin var(--dur,24s) linear infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dHexSpin{
  from{transform:rotateX(50deg) rotateZ(0deg)}
  to  {transform:rotateX(50deg) rotateZ(360deg)}
}
.s3d-plane{
  width:calc(var(--s,36px)*1.3);height:calc(var(--s,36px)*1.3);
}
.s3d-plane-plate{
  width:100%;height:100%;
  border:1px solid var(--s3d-color,rgba(0,212,255,.16));
  background:linear-gradient(145deg,rgba(0,212,255,.08),transparent);
  border-radius:3px;
  transform:rotateX(66deg) rotateZ(var(--rz,8deg));
  animation:s3dPlaneDrift var(--dur,21s) ease-in-out infinite;
  animation-delay:var(--d,0s);
  will-change:transform;
}
@keyframes s3dPlaneDrift{
  0%,100%{transform:rotateX(66deg) rotateZ(var(--rz,8deg)) translateY(0)}
  50%    {transform:rotateX(66deg) rotateZ(calc(var(--rz,8deg) + 20deg)) translateY(-10px)}
}
@keyframes s3dPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.35)}}

/* Light-mode section 3D accent colors */
[data-theme="light"] .section-3d[data-scene="stats"]{--s3d-color:rgba(3,105,161,.34)}
[data-theme="light"] .section-3d[data-scene="features"]{--s3d-color:rgba(3,105,161,.38)}
[data-theme="light"] .section-3d[data-scene="security"]{--s3d-color:rgba(109,40,217,.34)}
[data-theme="light"] .section-3d[data-scene="ai"]{--s3d-color:rgba(21,128,61,.36)}
[data-theme="light"] .section-3d[data-scene="pricing"]{--s3d-color:rgba(180,83,9,.34)}
[data-theme="light"] .section-3d[data-scene="faq"]{--s3d-color:rgba(71,85,105,.28)}
[data-theme="light"] .section-3d[data-scene="cta"]{--s3d-color:rgba(3,105,161,.36)}
[data-theme="light"] .s3d-cube .cube-faces i{
  background:rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  border-color:var(--s3d-color);
}
[data-theme="light"] .s3d-prism{
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.08));
}
[data-theme="light"] .s3d-diamond-plate{
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.12));
}
[data-theme="light"] .s3d-hex-plate{background:rgba(255,255,255,.25)}
[data-theme="light"] .s3d-plane-plate{background:linear-gradient(145deg,rgba(255,255,255,.35),transparent)}

@media(max-width:768px){
  .section-scene{overflow:visible}

  /* Keep all 3D shapes visible — scale down instead of hiding */
  .section-3d .s3d-cube{--s:24px!important}
  .section-3d .s3d-prism{--s:20px!important;opacity:.9}
  .section-3d .s3d-diamond{--s:22px!important}
  .section-3d .s3d-hex{--s:26px!important}
  .section-3d .s3d-plane{--s:28px!important}
  .section-3d .s3d-ring{opacity:.8;border-width:2px}
  .section-3d .s3d-dot{width:7px;height:7px}

  /* Global bg3d — scale shapes via --bg-scale, preserve drift animation */
  .bg-obj{--bg-scale:.82}
  .bgcube i,.bgpyramid i{border-color:rgba(0,212,255,.22);background:rgba(0,212,255,.05)}
  .bgring .bg-spin{border-color:rgba(0,212,255,.2)}
  .bgdot{width:6px;height:6px;background:rgba(0,212,255,.45)}

  [data-theme="light"] .bg3d .bgcube i,
  [data-theme="light"] .bg3d .bgpyramid i{
    border-color:rgba(2,132,199,.28);
    background:rgba(2,132,199,.08);
  }
  [data-theme="light"] .bg3d .bgring .bg-spin{border-color:rgba(2,132,199,.22)}
  [data-theme="light"] .bg3d .bgdot{background:rgba(2,132,199,.4)}
  [data-theme="light"] .section-3d .s3d-ring{opacity:.85}
  [data-theme="light"] .s3d-cube .cube-faces i{
    border-color:var(--s3d-color);
    background:rgba(255,255,255,.55);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ── More 3D elements in lower sections ─────── */
/* Extra bg shapes positioned at lower page depths */
.bg3d-extra{
  position:absolute;
  pointer-events:none;
}
/* These are injected via JS to avoid bloating HTML */

/* ═══ RESPONSIVE ═════════════════════════════ */
@media(max-width:1024px){
  .app-detail{display:none}
  .app-main{border-right:none}
  .mockup-wrap{margin-top:16px;margin-bottom:0;padding-bottom:0}
  .mockup-glow{display:none}
  .app-window{box-shadow:0 20px 56px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.05)}
  #stats{margin-top:28px;position:relative;z-index:5}
  .ai-cards{grid-template-columns:repeat(2,1fr)}
  .feature-story{grid-template-columns:1fr}
  .feature-story--right .fs-text{order:0}
  .feature-story--right .fs-visual{order:0}
  .security-content{grid-template-columns:1fr}
  .sec-right{display:none}
  .footer-inner{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:1024px){
  /* Mobile: flat ordered flex */
  .hero-wrapper{
    display:flex;flex-direction:column;align-items:flex-start;
    text-align:left;gap:0;
  }
  .hero-h1{
    order:1;width:100%;text-align:left;
    margin-bottom:clamp(36px,6vh,56px);
    font-size:clamp(2.4rem,9vw,3.4rem);
  }
  .hero-constellation{
    order:2;width:100%;min-height:480px;height:480px;margin-bottom:32px;overflow:visible;
    --orbit-y:-40px;
    --orbit-inner:194px;
    --orbit-outer:248px;
    --orbit-inner-dur:32s;
    --orbit-outer-dur:50s;
  }
  .hero-sub          { order:3; width:100%; margin-bottom:24px; text-align:left; margin-left:0; margin-right:auto }
  .hero-ctas         { order:4; justify-content:flex-start; margin-bottom:16px; width:100% }
  .hero-trust        { order:5; justify-content:center; align-self:center; margin-bottom:20px; width:100% }
  .hero-eyebrow      { order:6; align-self:center }

  /* Orbit tracks follow --orbit-inner / --orbit-outer */
  .orbital-system .vault-stack-wrap{--vst-scale:.78}
  .vault-stack-wrap{gap:24px}
  .vst-logos{gap:8px}
  .vst-caption{font-size:21px!important}
  /* CRITICAL: arm and card must share the SAME duration to keep cards upright */
  [data-orbit="inner"] .hcard { animation-duration:var(--orbit-inner-dur) }
  [data-orbit="outer"] .hcard { animation-duration:var(--orbit-outer-dur) }

  .hcard{ width:130px; padding:8px 9px }
  .hc-badge{ display:none }
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-right{
    display:flex;
    align-items:center;
    margin-left:auto;
    gap:4px;
  }
  .nav-right .nav-signin,
  .nav-right .btn-cta{display:none}
  .burger{display:flex}
  #hero{
    min-height:100dvh;
    min-height:100svh;
    padding-top:calc(58px + 48px);
    padding-bottom:0;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
  }
  .hero-wrapper{
    flex:1;
    align-items:flex-start;
    text-align:left;
    gap:clamp(14px,2.8vh,28px);
    padding-bottom:8px;
  }
  .mockup-wrap{
    margin-top:8px;
    margin-bottom:0;
    flex-shrink:0;
  }
  .app-body{height:320px}
  .hero-h1{
    font-size:clamp(3rem,13vw,4.25rem)!important;
    line-height:1.02;
    text-align:left;
    align-self:flex-start;
    margin-bottom:clamp(40px,8vh,72px)!important;
    gap:8px;
  }
  .hero-sub{
    margin-bottom:0;
    text-align:left;
    align-self:flex-start;
    margin-left:0;
    margin-right:auto;
    font-size:clamp(1rem,3.8vw,1.12rem);
    max-width:36ch;
  }
  .hero-ctas{justify-content:flex-start;width:100%;margin-bottom:0}
  .hero-trust{justify-content:center;align-self:center;width:100%;margin-bottom:0}
  .hero-eyebrow{align-self:center}
  /* Constellation — scale down with viewport */
  .hero-constellation{
    flex:1 1 auto;
    min-height:260px;
    height:auto;
    margin-bottom:8px;
    overflow:visible;
    --orbit-y:-56px;
    --orbit-inner:154px;
    --orbit-outer:197px;
    --orbit-inner-dur:36s;
    --orbit-outer-dur:56s;
  }
  .orbital-system .vault-stack-wrap{--vst-scale:.62}
  .vault-stack-wrap{gap:20px}
  .vst-caption{font-size:18px!important}
  [data-orbit="inner"] .hcard{animation-duration:var(--orbit-inner-dur)}
  [data-orbit="outer"] .hcard{animation-duration:var(--orbit-outer-dur)}
  /* Small cards on phone */
  .hcard{width:110px;padding:6px 8px;font-size:.82em}
  .app-sidebar{display:none}
  .app-window{transform:none}
  .ai-cards{grid-template-columns:1fr 1fr}
  /* pricing-carousel stays horizontal on all screens */
  .stats-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:24px 16px}
  .stat-div{display:none}
  .stat-block{padding:20px 12px;min-width:0;border:1px solid var(--border2);border-radius:12px}
  .stat-n{font-size:1.7rem;min-width:0;width:100%}
  /* pricing: kill scale transform on mobile — it causes visible flicker during snap */
  .price-card{transform:none !important;opacity:.72;transition:opacity .3s ease,box-shadow .3s ease}
  .price-card.pc-active{opacity:1;box-shadow:0 0 0 2px var(--cyan),0 20px 48px rgba(0,0,0,.3)}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas a{text-align:center;justify-content:center}
  .ai-cards{grid-template-columns:1fr}
  #hero{padding-top:calc(58px + 40px)}
  .hero-h1{font-size:clamp(2.75rem,12vw,3.75rem)!important}
  .hero-constellation{
    min-height:220px;
    --orbit-y:-44px;
    --orbit-inner:129px;
    --orbit-outer:165px;
  }
  .orbital-system .vault-stack-wrap{--vst-scale:.52}
  .vault-stack-wrap{gap:16px}
  .vst-caption{font-size:15px!important}
}

/* ── Performance: pause off-screen animations ── */
.animations-paused .orbit-arm,
.animations-paused .orbit-arm--ccw,
.animations-paused .orbit-arm .hcard,
.animations-paused .orbit-track-inner,
.animations-paused .orbit-track-outer,
.animations-paused .vault-stack,
.animations-paused .vst-shimmer,
.animations-paused .hc-badge,
.animations-paused .orb,
.animations-paused.bg3d .bg-obj:not(.bgdot):not(.bgcross),
.animations-paused.bg3d .bg-spin,
.animations-paused.bg3d .bgdiamond-plate,
.animations-paused.bg3d .bghex-plate,
.animations-paused.bg3d .bgplane-plate,
.animations-paused.bg3d .bgtorus-plate,
.animations-paused.bg3d .bgring .bg-spin,
.animations-paused.bg3d .bgdot,
.animations-paused.bg3d .bgcross,
.animations-paused.hero-3d .bg-obj:not(.bgdot):not(.bgcross),
.animations-paused.hero-3d .bg-spin,
.animations-paused.hero-3d .bgdiamond-plate,
.animations-paused.section-3d .s3d-ring,
.animations-paused.section-3d .s3d-cube .cube-faces,
.animations-paused.section-3d .s3d-dot,
.animations-paused.section-3d .s3d-prism,
.animations-paused.section-3d .s3d-diamond-plate,
.animations-paused.section-3d .s3d-hex-plate,
.animations-paused.section-3d .s3d-plane-plate{
  animation-play-state:paused !important;
}

.mockup-wrap{content-visibility:auto;contain-intrinsic-size:auto 380px}
.mockup-placeholder{
  height:320px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,rgba(22,28,48,.75),rgba(10,14,28,.65));
}
[data-theme="light"] .mockup-placeholder{
  border:1px solid var(--glass-edge);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(238,242,249,.88));
  box-shadow:var(--glass-shadow);
}
[data-theme="light"] .mockup-glow{
  background:radial-gradient(ellipse,rgba(3,105,161,.1) 0%,transparent 70%);
  opacity:.45;
}

@media(max-width:768px){
  .noise{display:none}
  .bg3d > .bghex,
  .bg3d > .bgplane,
  .bg3d > .bgtorus,
  .bg3d > .bgcube:nth-child(7),
  .bg3d > .bgring:nth-child(11),
  .bg3d > .bgcross:nth-child(15){display:none}
  .orb{opacity:.22}
  .hcard{backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3)}
}