/* Spixor A8.1 public redesign - cinematic, organized, responsive and theme-aware. */
:root{
  color-scheme:dark;
  --bg:#030712;
  --bg-2:#07111f;
  --bg-3:#0b1324;
  --surface:rgba(9,17,32,.72);
  --surface-solid:#0b1324;
  --surface-2:rgba(15,26,46,.78);
  --surface-3:rgba(20,35,59,.78);
  --text:#f7fbff;
  --text-soft:#d8e6f7;
  --secondary:#a9bad1;
  --muted:#75859b;
  --cyan:#18c9f5;
  --cyan-2:#6be8ff;
  --blue:#2563eb;
  --blue-2:#0b84ff;
  --orange:#f59e0b;
  --green:#3ee6a5;
  --red:#ff5570;
  --purple:#6d5dfc;
  --border:rgba(218,236,255,.12);
  --border-strong:rgba(218,236,255,.20);
  --border-accent:rgba(24,201,245,.38);
  --shadow:0 32px 110px rgba(0,0,0,.42);
  --shadow-soft:0 18px 70px rgba(0,0,0,.24);
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:16px;
  --container:1180px;
  --side:clamp(18px,5vw,76px);
  --ease:cubic-bezier(.22,.8,.27,1);
}

html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f8fc;
  --bg-2:#eef3fa;
  --bg-3:#ffffff;
  --surface:rgba(255,255,255,.78);
  --surface-solid:#ffffff;
  --surface-2:rgba(248,250,255,.86);
  --surface-3:#eef6ff;
  --text:#101828;
  --text-soft:#1d2939;
  --secondary:#475467;
  --muted:#667085;
  --cyan:#078fc2;
  --cyan-2:#0ea5e9;
  --blue:#2563eb;
  --blue-2:#0b74de;
  --orange:#d97706;
  --green:#047857;
  --red:#d92d20;
  --purple:#5b5bd6;
  --border:rgba(15,23,42,.10);
  --border-strong:rgba(15,23,42,.16);
  --border-accent:rgba(14,165,233,.28);
  --shadow:0 28px 90px rgba(22,34,64,.12);
  --shadow-soft:0 18px 56px rgba(22,34,64,.10);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  background:
    radial-gradient(900px 560px at 83% -8%, rgba(24,201,245,.17), transparent 62%),
    radial-gradient(820px 520px at 4% 8%, rgba(37,99,235,.14), transparent 58%),
    radial-gradient(760px 640px at 92% 62%, rgba(109,93,252,.10), transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
}
html[data-theme="light"] body{
  background:
    radial-gradient(920px 540px at 82% -10%,rgba(14,165,233,.22),transparent 58%),
    radial-gradient(760px 480px at 3% 3%,rgba(37,99,235,.12),transparent 60%),
    radial-gradient(680px 560px at 88% 68%,rgba(7,143,194,.08),transparent 64%),
    linear-gradient(180deg,#f6f8fc 0%,#eef3fa 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.72;
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.16) 0 1px,transparent 1.5px),
    radial-gradient(circle at 62% 18%,rgba(107,232,255,.16) 0 1px,transparent 1.7px),
    radial-gradient(circle at 80% 78%,rgba(255,255,255,.12) 0 1px,transparent 1.4px);
  background-size:190px 190px,260px 260px,220px 220px;
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.82) 38%,transparent 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background:linear-gradient(115deg, transparent 0 45%, rgba(24,201,245,.30) 46%, transparent 48% 100%);
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
::selection{background:rgba(24,201,245,.32)}
.skip-link{position:absolute;left:-999px;top:12px;z-index:80;background:var(--cyan);color:#031018;border-radius:14px;padding:10px 14px;font-weight:900;text-decoration:none}.skip-link:focus{left:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;
  padding:14px var(--side);
  backdrop-filter:blur(18px) saturate(145%);
  background:rgba(3,7,18,.72);
  border-bottom:1px solid var(--border);
}
html[data-theme="light"] .site-header{background:rgba(246,248,252,.76)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:950;letter-spacing:-.02em;white-space:nowrap}.brand img{width:38px;height:38px;border-radius:12px;object-fit:cover;box-shadow:0 0 0 1px var(--border),0 10px 28px rgba(24,201,245,.14)}.brand span{font-size:19px}.site-nav{display:flex;align-items:center;justify-content:center;gap:8px}.site-nav>a,.nav-group>a,.nav-actions>a{min-height:42px;display:inline-flex;align-items:center;text-decoration:none;border-radius:999px;padding:9px 13px;color:var(--secondary);font-weight:850;transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}.site-nav>a:hover,.nav-group>a:hover,.nav-actions>a:hover{color:var(--text);background:rgba(255,255,255,.06);transform:translateY(-1px)}html[data-theme="light"] .site-nav>a:hover,html[data-theme="light"] .nav-group>a:hover,html[data-theme="light"] .nav-actions>a:hover{background:rgba(14,165,233,.08)}
.nav-group{position:relative}.nav-group>a::after{content:"⌄";font-size:12px;margin-left:7px;opacity:.68}.nav-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);width:min(310px,calc(100vw - 30px));display:grid;gap:6px;padding:10px;border:1px solid var(--border);border-radius:22px;background:rgba(5,10,22,.94);box-shadow:var(--shadow-soft);opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease)}html[data-theme="light"] .nav-menu{background:rgba(255,255,255,.96)}.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}.nav-menu a{display:flex;min-height:42px;align-items:center;text-decoration:none;border-radius:15px;padding:10px 12px;color:var(--secondary);font-weight:850}.nav-menu a:hover{background:rgba(24,201,245,.10);color:var(--text)}.nav-actions{display:flex;align-items:center;gap:10px}.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);cursor:pointer}.nav-toggle span:not(.sr-only){display:block;width:18px;height:2px;margin:4px auto;border-radius:99px;background:currentColor}.theme-toggle{min-height:42px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.05);color:var(--text);padding:9px 13px;font-weight:900;cursor:pointer}.theme-toggle:hover{border-color:var(--border-accent);background:rgba(24,201,245,.08)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border-radius:999px;border:1px solid var(--border);font-weight:950;text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);color:var(--text);white-space:nowrap}.btn:hover{transform:translateY(-2px);border-color:var(--border-accent)}.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--blue-2));border-color:rgba(107,232,255,.55);color:#03111e;box-shadow:0 18px 54px rgba(24,201,245,.20)}.btn.primary:hover{box-shadow:0 22px 68px rgba(24,201,245,.28)}.btn.ghost{background:rgba(255,255,255,.055)}html[data-theme="light"] .btn.ghost{background:rgba(255,255,255,.82)}.btn[disabled],.btn.is-disabled{opacity:.56;cursor:not-allowed;pointer-events:none}

main{min-height:70vh}.eyebrow{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:8px 11px;border-radius:999px;border:1px solid var(--border-accent);background:rgba(24,201,245,.09);color:var(--cyan-2);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.105em}.eyebrow.alpha{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.10);color:#ffd08a}html[data-theme="light"] .eyebrow.alpha{color:#a15c00}.alpha-note{font-size:14px!important;color:#ffd08a!important;border-left:3px solid var(--orange);padding-left:14px;margin-top:22px}.hero,.page-hero{padding:clamp(76px,11vw,150px) var(--side) clamp(48px,8vw,96px)}
.hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);gap:clamp(26px,6vw,92px);align-items:center;min-height:min(920px,calc(100svh - 72px));overflow:hidden}.hero::before{content:"";position:absolute;right:-18vw;top:-14vw;width:min(70vw,880px);height:min(70vw,880px);border-radius:50%;background:radial-gradient(circle at 34% 26%,rgba(107,232,255,.50),rgba(24,201,245,.18) 28%,rgba(37,99,235,.08) 56%,transparent 68%);filter:blur(.2px);opacity:.72;z-index:-1}.hero::after{content:"";position:absolute;right:4vw;top:12%;width:min(52vw,720px);height:min(52vw,720px);border:1px solid rgba(107,232,255,.20);border-radius:50%;transform:rotate(-21deg) scaleX(1.48);z-index:-1;opacity:.70}.cosmic-depth{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 18% 20%,rgba(255,255,255,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 74% 16%,rgba(107,232,255,.18) 0 1px,transparent 1.5px),radial-gradient(circle at 54% 74%,rgba(255,255,255,.14) 0 1px,transparent 1.5px),linear-gradient(115deg,transparent 0 44%,rgba(24,201,245,.07) 45%,transparent 47% 100%);background-size:160px 160px,220px 220px,190px 190px,100% 100%;animation:spxStarDrift 30s linear infinite;opacity:.74}@keyframes spxStarDrift{from{background-position:0 0,0 0,0 0,0 0}to{background-position:160px 90px,-220px 120px,190px -110px,0 0}}
.hero h1,.page-hero h1{margin:16px 0 18px;font-size:clamp(48px,8.2vw,104px);line-height:.90;letter-spacing:-.075em;font-weight:1000}.page-hero.compact h1{font-size:clamp(42px,7vw,82px)}.hero p,.page-hero p,.section p,.article p{font-size:clamp(17px,2vw,21px);color:var(--secondary);max-width:780px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-points span{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px solid var(--border-accent);border-radius:999px;background:rgba(24,201,245,.085);padding:8px 12px;color:var(--text-soft);font-weight:900}.hero-points span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px rgba(24,201,245,.75)}
.product-frame{position:relative;margin:0;border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(24,201,245,.13),rgba(37,99,235,.06)),var(--surface);padding:10px;box-shadow:var(--shadow);overflow:hidden}.product-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 28%,rgba(255,255,255,.13) 34%,transparent 42% 100%);transform:translateX(-60%);opacity:.35;pointer-events:none}.product-frame img{border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#07101d;width:100%}.hero-product{transform:perspective(1300px) rotateX(2deg) rotateY(-5deg);box-shadow:0 42px 120px rgba(0,0,0,.48),0 0 0 1px rgba(24,201,245,.08)}.hero-product::after{content:"";position:absolute;inset:auto 10% -26px 10%;height:42px;background:radial-gradient(closest-side,rgba(24,201,245,.36),transparent);filter:blur(18px);pointer-events:none}.hero-product figcaption{position:absolute;inset:10px;pointer-events:none}.hero-product figcaption span{position:absolute;left:var(--x);top:var(--y);transform:translate(-8px,-50%);border:1px solid rgba(107,232,255,.38);background:rgba(4,10,22,.84);color:#e7fbff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:950;box-shadow:0 16px 40px rgba(0,0,0,.28)}html[data-theme="light"] .hero-product figcaption span{background:rgba(255,255,255,.92);color:#0b2c3d}.hero-product figcaption span::after{content:"";position:absolute;left:14px;bottom:-18px;width:1px;height:18px;background:linear-gradient(var(--cyan),transparent)}

/* Section architecture */
.section{padding:72px var(--side);max-width:var(--container)}.section h2,.intro h2,.pricing-preview h2,.roadmap-strip h2,.final-cta h2,.command-center h2,.builder-showcase h2,.export-pathway h2,.comparison h2,.mini-demo-copy h2{font-size:clamp(34px,5.3vw,64px);line-height:1.02;letter-spacing:-.05em;margin:14px 0}.intro{max-width:1040px}.intro p{font-size:clamp(18px,2vw,23px)}.command-center,.builder-showcase,.export-pathway,.comparison,.plain-explainer,.mini-builder-demo,.pricing-preview,.roadmap-strip,.final-cta,.faq-block,.article,.maintenance-card{position:relative;margin:36px var(--side) 82px;border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(900px 330px at 12% 0%,rgba(24,201,245,.14),transparent 64%),linear-gradient(180deg,rgba(9,17,32,.74),rgba(5,10,22,.64));padding:clamp(24px,4vw,50px);box-shadow:var(--shadow-soft);overflow:hidden}.command-center::after,.builder-showcase::after,.mini-builder-demo::after,.roadmap-strip::after{content:"";position:absolute;right:-130px;top:-130px;width:260px;height:260px;border:1px solid rgba(24,201,245,.16);border-radius:50%;transform:scaleX(1.5) rotate(-16deg);pointer-events:none}html[data-theme="light"] .command-center,html[data-theme="light"] .builder-showcase,html[data-theme="light"] .export-pathway,html[data-theme="light"] .comparison,html[data-theme="light"] .plain-explainer,html[data-theme="light"] .mini-builder-demo,html[data-theme="light"] .pricing-preview,html[data-theme="light"] .roadmap-strip,html[data-theme="light"] .final-cta,html[data-theme="light"] .faq-block,html[data-theme="light"] .article,html[data-theme="light"] .maintenance-card{background:radial-gradient(900px 330px at 12% 0%,rgba(14,165,233,.13),transparent 64%),linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,255,.82));box-shadow:var(--shadow)}
.command-center{display:grid;grid-template-columns:.88fr 1.12fr;gap:28px;align-items:center}.command-center p,.builder-showcase p,.comparison p,.mini-demo-copy p,.maintenance-card p{color:var(--secondary)}.command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.command-grid div,.compare-grid div,.explain-grid p,.feature-card,.price-card,.roadmap-node{border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.045);padding:20px;box-shadow:0 12px 36px rgba(0,0,0,.08)}html[data-theme="light"] .command-grid div,html[data-theme="light"] .compare-grid div,html[data-theme="light"] .explain-grid p,html[data-theme="light"] .feature-card,html[data-theme="light"] .price-card,html[data-theme="light"] .roadmap-node{background:rgba(255,255,255,.72)}.command-grid b{display:block;color:var(--cyan);font-size:32px;line-height:1}.command-grid span{display:block;margin-top:8px;color:var(--text);font-weight:950}.showcase-head{max-width:900px;margin-bottom:26px}.step-tabs{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:20px}.step-list{display:grid;gap:10px;align-content:start}.step-list button{text-align:left;border:1px solid var(--border);border-radius:20px;background:rgba(255,255,255,.045);color:var(--text);padding:15px;font-weight:950;cursor:pointer;transition:.18s var(--ease)}.step-list button:hover{border-color:var(--border-accent);transform:translateY(-1px)}.step-list button small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.10em;margin-bottom:4px}.step-list button.is-active{border-color:var(--border-accent);background:rgba(24,201,245,.11);box-shadow:0 18px 50px rgba(24,201,245,.11)}.step-panel{display:none;grid-template-columns:.42fr .58fr;gap:20px;align-items:center}.step-panel.is-active{display:grid}.step-panel h3{font-size:clamp(28px,4vw,46px);line-height:1.04;margin:12px 0}.step-panel p{color:var(--secondary)}
.card-grid,.roadmap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:20px var(--side) 82px}.feature-card{text-decoration:none;min-height:210px;transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}.feature-card:hover{transform:translateY(-5px);border-color:var(--border-accent);background:rgba(24,201,245,.075)}.feature-card h2,.feature-card h3,.price-card h2,.price-card h3{margin:14px 0 9px;font-size:24px;line-height:1.12}.feature-card p,.price-card p{color:var(--secondary);margin:0}.icon-mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:16px;background:rgba(24,201,245,.10);border:1px solid var(--border-accent);color:var(--cyan-2);font-weight:1000}.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:32px;align-items:center;max-width:none}.plain-explainer{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px}.explain-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.explain-grid p{margin:0;color:var(--secondary)}.explain-grid b{color:var(--text)}.pathway{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}.pathway span{border:1px solid var(--border-accent);border-radius:999px;background:rgba(24,201,245,.09);padding:12px 15px;font-weight:950}.pathway i{width:36px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)}.compare-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}.compare-grid b{display:block;font-size:18px;margin-bottom:6px;color:var(--text)}

/* Interactive mini builder */
.mini-builder-demo{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:center}.mini-demo-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.mini-demo-controls button{border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);padding:10px 14px;font-weight:950;cursor:pointer}.mini-demo-controls button.is-active{border-color:var(--border-accent);background:rgba(24,201,245,.13);color:var(--cyan-2)}.mini-builder-surface{border:1px solid var(--border-strong);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#0a1324,#050711);box-shadow:var(--shadow);min-height:430px}html[data-theme="light"] .mini-builder-surface{background:linear-gradient(180deg,#fff,#eef6ff)}.mini-topbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);color:var(--secondary);font-weight:950}.mini-topbar b{color:var(--cyan)}.mini-body{display:grid;grid-template-columns:128px 1fr 172px;gap:14px;padding:16px}.mini-body aside{display:grid;align-content:start;gap:10px}.mini-body aside button,.mini-inspector label{border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.055);padding:10px;color:var(--secondary);font-weight:850}.mini-body aside button.is-active{color:var(--text);border-color:var(--border-accent)}.mini-body main{display:grid;gap:12px;min-height:0}.mini-canvas-hero{min-height:230px;border:1px solid var(--border-accent);border-radius:24px;padding:26px;background:radial-gradient(420px 180px at 18% 0%,rgba(24,201,245,.20),transparent 70%),linear-gradient(145deg,rgba(24,201,245,.08),rgba(37,99,235,.07));display:grid;align-content:center;transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease)}.mini-canvas-hero span{color:var(--cyan);font-weight:950;text-transform:uppercase;font-size:12px;letter-spacing:.11em}.mini-canvas-hero h3{font-size:clamp(28px,4vw,48px);line-height:1;margin:8px 0}.mini-canvas-hero p{color:var(--secondary);margin:0}.mini-canvas-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mini-canvas-row i{height:62px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.05)}.mini-inspector b{color:var(--text)}.mini-builder-surface[data-mode="focus"] .mini-canvas-hero{transform:scale(1.018);box-shadow:0 22px 70px rgba(24,201,245,.16)}.mini-builder-surface[data-mode="theme"] .mini-canvas-hero{background:radial-gradient(420px 180px at 18% 0%,rgba(62,230,165,.20),transparent 70%),linear-gradient(145deg,rgba(62,230,165,.12),rgba(14,165,233,.10))}.mini-builder-surface[data-mode="export"] .mini-canvas-hero{background:radial-gradient(420px 180px at 18% 0%,rgba(245,158,11,.20),transparent 70%),linear-gradient(145deg,rgba(245,158,11,.12),rgba(24,201,245,.08))}

/* Pricing / roadmap */
.pricing-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}.pricing-cards.wide{padding:0 var(--side) 44px}.price-card strong{display:block;font-size:clamp(36px,5vw,58px);line-height:1;margin:16px 0}.price-card.accent{border-color:var(--border-accent);box-shadow:0 24px 80px rgba(24,201,245,.12)}.price-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px;color:var(--secondary)}.roadmap-orbit{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}.roadmap-orbit::before{content:"";position:absolute;inset:12% 8%;border:1px solid rgba(24,201,245,.13);border-radius:50%;transform:rotate(-4deg);pointer-events:none}.roadmap-orbit span{position:relative;border:1px solid var(--border-accent);border-radius:18px;background:rgba(24,201,245,.09);padding:14px;font-weight:950;color:var(--text)}.roadmap-cinema{position:relative;margin:30px var(--side) 82px}.roadmap-cinema::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.36}.roadmap-lane{position:relative;margin:0 0 20px;border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(560px 220px at 0% 0%,rgba(24,201,245,.11),transparent 70%),linear-gradient(180deg,var(--surface-2),rgba(5,10,22,.56));padding:26px;box-shadow:var(--shadow-soft)}html[data-theme="light"] .roadmap-lane{background:radial-gradient(560px 220px at 0% 0%,rgba(14,165,233,.10),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.88),rgba(248,250,255,.78))}.roadmap-lane h2{font-size:clamp(28px,4vw,46px);line-height:1.08;margin:12px 0}.roadmap-lane>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.roadmap-node{position:relative;margin:0;color:var(--secondary)}.roadmap-node::before{content:"";position:absolute;right:16px;top:16px;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px rgba(24,201,245,.75)}.roadmap-node b{display:block;color:var(--text);margin-bottom:6px}.roadmap-node span{font-size:12px;color:var(--cyan);font-weight:950}

/* Auth / legal / support */
.auth-shell{min-height:78vh;display:grid;place-items:center;padding:78px var(--side)}.auth-shell-rich{grid-template-columns:minmax(280px,520px) minmax(320px,560px);gap:28px;align-items:center}.auth-card,.auth-story{width:min(100%,580px);border:1px solid var(--border);border-radius:var(--radius-xl);background:radial-gradient(620px 240px at 0% 0%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,var(--surface-2),rgba(5,10,22,.68));padding:clamp(24px,4vw,48px);box-shadow:var(--shadow)}html[data-theme="light"] .auth-card,html[data-theme="light"] .auth-story{background:radial-gradient(620px 240px at 0% 0%,rgba(14,165,233,.11),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,255,.86))}.auth-card h1,.auth-story h2{font-size:clamp(34px,6vw,62px);line-height:.98;letter-spacing:-.055em;margin:14px 0}.auth-card p,.auth-story p,.auth-story-points span{color:var(--secondary)}.auth-story-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.auth-story-points span{border:1px solid var(--border);border-radius:999px;padding:9px 12px;background:rgba(255,255,255,.05);font-weight:850}.auth-form{display:grid;gap:14px}.auth-form label{display:grid;gap:7px;color:var(--secondary);font-weight:850}.auth-form input,.auth-form select,.auth-form textarea,.register-step select{min-height:48px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:12px 13px;outline:0}html[data-theme="light"] .auth-form input,html[data-theme="light"] .auth-form select,html[data-theme="light"] .register-step select{background:#fff}.auth-form input:focus,.auth-form select:focus{border-color:var(--border-accent);box-shadow:0 0 0 4px rgba(24,201,245,.10)}.google-btn{display:flex;justify-content:center;align-items:center;min-height:48px;border-radius:999px;border:1px solid var(--border);text-decoration:none;background:rgba(255,255,255,.055);font-weight:950;color:var(--text);cursor:pointer}.steps{display:flex;gap:9px;margin:20px 0}.steps span{width:34px;height:34px;border-radius:14px;border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);font-weight:950}.steps span.is-active{background:var(--cyan);color:#03111e;border-color:transparent}.register-step{display:none}.register-step.is-active{display:grid;gap:13px}.captcha-box{border:1px dashed var(--border-accent);border-radius:20px;padding:15px;background:rgba(24,201,245,.07)}.legal-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:11px;border:1px dashed var(--border-accent);border-radius:20px;padding:15px;background:rgba(24,201,245,.07)}.legal-consent input{min-height:auto!important;width:19px;height:19px;margin-top:3px}.legal-consent a{color:var(--cyan);font-weight:950}.form-status{min-height:22px;font-size:14px}.form-status.is-error{color:var(--red)}.form-status.is-ok{color:var(--green)}.auth-links{display:flex;justify-content:space-between;gap:14px;margin-top:16px}.maintenance-lock{border:1px solid rgba(245,158,11,.24);border-radius:20px;background:rgba(245,158,11,.09);padding:16px;margin-top:16px}.legal-article h2{font-size:clamp(24px,3vw,36px);margin:28px 0 8px;letter-spacing:-.025em}.legal-article p{font-size:17px}
.faq-item{border:1px solid var(--border);border-radius:18px;margin:12px 0;background:rgba(255,255,255,.045);overflow:hidden}.faq-item summary{cursor:pointer;padding:16px 18px;font-weight:950}.faq-item p{padding:0 18px 18px;margin:0;color:var(--secondary)}.filter-row{display:flex;flex-wrap:wrap;gap:10px;padding:0 var(--side) 24px}.filter-row button{border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.055);color:var(--secondary);padding:10px 14px;font-weight:950;cursor:pointer}.filter-row button.is-active{background:var(--cyan);border-color:transparent;color:#03111e}.maintenance-banner{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:0;padding:12px var(--side);border-bottom:1px solid rgba(245,158,11,.24);background:linear-gradient(90deg,rgba(245,158,11,.15),rgba(24,201,245,.07));color:#ffe2ae}.maintenance-banner strong{color:var(--text);font-weight:950}.maintenance-banner span{color:var(--secondary)}.maintenance-banner a{color:#071018;background:var(--orange);text-decoration:none;border-radius:999px;padding:7px 11px;font-weight:950}

/* Footer / reveals */
.site-footer{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;border-top:1px solid var(--border);padding:32px var(--side);color:var(--secondary);background:rgba(3,7,18,.74);backdrop-filter:blur(14px)}html[data-theme="light"] .site-footer{background:rgba(255,255,255,.64)}.site-footer nav{display:flex;flex-wrap:wrap;gap:16px}.site-footer a{text-decoration:none}.footer-brand img{width:30px;height:30px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .68s var(--ease),transform .68s var(--ease)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:1080px){
  .site-header{grid-template-columns:auto auto;justify-content:space-between}.nav-toggle{display:block}.site-nav,.nav-actions{display:none}.site-header.is-open .site-nav,.site-header.is-open .nav-actions{display:grid;grid-column:1/-1;justify-content:stretch}.site-header.is-open .site-nav{gap:6px}.site-header.is-open .site-nav>a,.site-header.is-open .nav-group>a,.site-header.is-open .nav-actions>a{justify-content:flex-start}.nav-menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;padding:0 0 0 14px}.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{transform:none}.hero,.page-hero,.split,.command-center,.step-tabs,.step-panel,.plain-explainer,.mini-builder-demo,.auth-shell-rich{grid-template-columns:1fr}.hero{min-height:auto}.hero-product{transform:none}.hero-product{order:-1}.compare-grid,.roadmap-lane>div,.roadmap-orbit{grid-template-columns:1fr 1fr}.command-grid,.explain-grid,.pricing-cards,.pricing-cards.wide{grid-template-columns:1fr}.card-grid,.roadmap-grid{grid-template-columns:1fr 1fr}.mini-body{grid-template-columns:1fr}.mini-body aside{grid-template-columns:repeat(3,1fr)}.roadmap-cinema::before{left:14px}.pathway i{display:none}.auth-story{order:2}.cosmic-depth{animation-duration:48s;opacity:.48}
}
@media(max-width:640px){
  :root{--side:14px}.site-header{padding:12px var(--side)}.brand img{width:34px;height:34px}.brand span{font-size:17px}.hero,.page-hero{padding-top:46px}.hero h1,.page-hero h1{font-size:clamp(42px,14vw,64px);letter-spacing:-.065em}.hero-actions,.nav-actions,.auth-links{display:grid}.btn{width:100%}.hero-product figcaption span{display:none}.card-grid,.roadmap-grid,.compare-grid,.roadmap-lane>div,.roadmap-orbit{grid-template-columns:1fr}.command-center,.builder-showcase,.export-pathway,.comparison,.plain-explainer,.mini-builder-demo,.pricing-preview,.roadmap-strip,.final-cta,.faq-block,.article,.maintenance-card{border-radius:24px;margin-top:26px;margin-bottom:56px}.step-list{display:flex;overflow:auto;padding-bottom:4px}.step-list button{min-width:210px}.mini-canvas-row,.mini-body aside{grid-template-columns:1fr}.mini-builder-surface{min-height:auto}.site-footer{grid-template-columns:1fr}.maintenance-banner{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.cosmic-depth{animation:none}}

/* A8.9 navigator + hero cinematic section pass */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  transition:background .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease), padding .34s var(--ease), transform .34s var(--ease);
  background:linear-gradient(180deg, rgba(3,7,18,.18), rgba(3,7,18,.05));
  border-bottom-color:transparent;
  box-shadow:none;
}
html[data-theme="light"] .site-header{background:linear-gradient(180deg, rgba(246,248,252,.10), rgba(246,248,252,.02));}
.site-header.is-scrolled,
.site-header.is-open,
.site-header:focus-within{
  background:rgba(3,7,18,.78);
  border-bottom-color:var(--border);
  box-shadow:0 16px 50px rgba(0,0,0,.22);
  padding-top:10px;
  padding-bottom:10px;
}
html[data-theme="light"] .site-header.is-scrolled,
html[data-theme="light"] .site-header.is-open,
html[data-theme="light"] .site-header:focus-within{
  background:rgba(246,248,252,.84);
  box-shadow:0 16px 46px rgba(20,35,70,.10);
}
.site-header .brand{position:relative;padding:6px 10px 6px 6px;border-radius:999px;transition:background .25s var(--ease), transform .25s var(--ease)}
.site-header .brand:hover{background:rgba(255,255,255,.055);transform:translateY(-1px)}
html[data-theme="light"] .site-header .brand:hover{background:rgba(14,165,233,.08)}
.site-header .brand img{border-radius:999px;box-shadow:0 0 0 1px rgba(107,232,255,.24),0 0 34px rgba(24,201,245,.16)}
.site-nav>a,.nav-group>a,.nav-actions>a,.theme-toggle{backdrop-filter:blur(12px);}
.nav-group-mega{position:relative}.nav-group-mega .mega-menu{
  width:min(780px,calc(100vw - 32px));
  left:50%;
  grid-template-columns:1fr;
  padding:16px;
  border-radius:30px;
  background:linear-gradient(145deg,rgba(4,10,24,.96),rgba(8,20,38,.94));
  border:1px solid rgba(107,232,255,.16);
  box-shadow:0 34px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
}
.nav-group-mega .mega-menu::before{content:"";position:absolute;inset:-35%;background:radial-gradient(circle at 20% 20%,rgba(24,201,245,.18),transparent 34%),radial-gradient(circle at 85% 30%,rgba(37,99,235,.14),transparent 40%),linear-gradient(115deg,transparent 0 49%,rgba(107,232,255,.10) 50%,transparent 52%);pointer-events:none;opacity:.92}
html[data-theme="light"] .nav-group-mega .mega-menu{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.96));box-shadow:0 30px 80px rgba(22,34,64,.16), inset 0 1px 0 rgba(255,255,255,.82)}
.mega-intro,.mega-grid,.mega-footer{position:relative;z-index:1}.mega-intro{display:grid;gap:5px;padding:8px 10px 16px;border-bottom:1px solid var(--border);margin-bottom:12px}.mega-intro span{color:var(--cyan-2);font-size:11px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.mega-intro strong{font-size:clamp(19px,2.2vw,28px);line-height:1.04;letter-spacing:-.045em}.mega-intro small{color:var(--secondary);font-weight:750}.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mega-grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}.mega-card{position:relative;display:grid!important;gap:6px!important;min-height:96px!important;padding:16px!important;border-radius:21px!important;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);overflow:hidden;color:var(--text)!important;transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease)}.mega-card::before{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-22px;top:-24px;background:radial-gradient(circle,rgba(24,201,245,.32),transparent 65%);opacity:.76;transition:transform .25s var(--ease),opacity .25s var(--ease)}.mega-card:hover{transform:translateY(-3px);border-color:rgba(107,232,255,.28);background:rgba(24,201,245,.08);box-shadow:0 18px 46px rgba(0,0,0,.22)}.mega-card:hover::before{transform:scale(1.35);opacity:1}.mega-card b{font-size:15px;letter-spacing:-.02em}.mega-card span{font-size:13px!important;line-height:1.35;color:var(--secondary)!important;font-weight:750!important}.mega-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px;padding:12px 12px 4px;color:var(--secondary);font-size:13px;font-weight:850}.mega-footer a{color:var(--cyan-2);text-decoration:none}.resources-mega .mega-menu{width:min(560px,calc(100vw - 32px))}.resources-mega .mega-card{min-height:86px!important}
.spx-public main{padding-top:0}.spx-aurora-hero{min-height:clamp(820px,100svh,1040px);padding-top:clamp(120px,13vw,170px);padding-bottom:clamp(98px,11vw,150px);grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr);background:radial-gradient(ellipse at 50% 105%, rgba(7,17,31,.70), transparent 58%);}
html[data-theme="light"] .spx-aurora-hero{background:radial-gradient(ellipse at 50% 105%, rgba(238,243,250,.94), transparent 62%)}
.spx-aurora-hero::before{right:-10vw;top:-9vw;width:min(78vw,980px);height:min(78vw,980px);background:radial-gradient(circle at 34% 26%,rgba(142,236,255,.70),rgba(24,201,245,.30) 28%,rgba(37,99,235,.16) 52%,rgba(8,15,34,.05) 68%,transparent 76%);animation:spxPlanetPulse 7s ease-in-out infinite alternate}.spx-aurora-hero::after{right:5vw;top:9%;width:min(60vw,800px);height:min(60vw,800px);border-color:rgba(107,232,255,.25);box-shadow:0 0 90px rgba(24,201,245,.09);animation:spxOrbitFloat 12s ease-in-out infinite alternate}.milkyway-field{position:absolute;inset:0;z-index:-3;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 72% 15%,rgba(24,201,245,.23),transparent 32%),radial-gradient(ellipse at 24% 16%,rgba(77,103,255,.19),transparent 33%),radial-gradient(ellipse at 56% 42%,rgba(161,219,255,.16),transparent 26%),linear-gradient(180deg,#030712 0%,#07111f 64%,rgba(7,17,31,0) 100%)}html[data-theme="light"] .milkyway-field{background:radial-gradient(ellipse at 72% 15%,rgba(14,165,233,.30),transparent 32%),radial-gradient(ellipse at 24% 16%,rgba(37,99,235,.16),transparent 33%),radial-gradient(ellipse at 56% 42%,rgba(7,143,194,.13),transparent 28%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,rgba(246,248,252,0) 100%)}.milkyway-field::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 210deg at 55% 28%, transparent 0 20%, rgba(80,214,255,.17) 24%, rgba(37,99,235,.13) 32%, transparent 46%, rgba(255,255,255,.10) 52%, transparent 60% 100%);filter:blur(34px);transform:rotate(-10deg);animation:spxMilkyFlow 26s ease-in-out infinite alternate}.milkyway-field::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 25%,rgba(255,255,255,.36) 0 1px,transparent 1.7px),radial-gradient(circle at 35% 12%,rgba(107,232,255,.28) 0 1px,transparent 1.6px),radial-gradient(circle at 80% 30%,rgba(255,255,255,.22) 0 1px,transparent 1.5px),radial-gradient(circle at 60% 68%,rgba(255,255,255,.16) 0 1px,transparent 1.5px);background-size:180px 180px,240px 240px,210px 210px,260px 260px;animation:spxStarDrift 42s linear infinite;opacity:.76}.milkyway-field i{position:absolute;border-radius:999px;filter:blur(24px);opacity:.60;animation:spxNebulaPulse 9s ease-in-out infinite alternate}.milkyway-field i:nth-child(1){width:280px;height:120px;background:rgba(24,201,245,.16);left:10%;top:19%;transform:rotate(-18deg)}.milkyway-field i:nth-child(2){width:360px;height:140px;background:rgba(37,99,235,.18);right:14%;top:12%;transform:rotate(18deg);animation-delay:-2s}.milkyway-field i:nth-child(3){width:260px;height:110px;background:rgba(107,232,255,.14);left:47%;top:37%;transform:rotate(-8deg);animation-delay:-4s}.hero-content-fade{height:160px;margin-top:-160px;position:relative;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(7,17,31,.70) 46%,var(--bg-2) 100%)}html[data-theme="light"] .hero-content-fade{background:linear-gradient(180deg,transparent 0%,rgba(246,248,252,.72) 50%,#eef3fa 100%)}.hero-copy{position:relative;z-index:3}.hero-copy h1{max-width:850px;text-wrap:balance}.hero-lead{font-size:clamp(18px,2.1vw,24px)!important;line-height:1.55;color:var(--text-soft)!important;max-width:760px!important}.hero-trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px;max-width:760px}.hero-trust-row span{position:relative;min-height:82px;padding:16px;border-radius:20px;border:1px solid rgba(107,232,255,.18);background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:var(--secondary);font-weight:760;overflow:hidden}.hero-trust-row span::after{content:"";position:absolute;right:-28px;top:-28px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(24,201,245,.18),transparent 68%)}.hero-trust-row b{display:block;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}.hero-product-system{position:relative;min-height:620px;perspective:1200px}.builder-holo-card{position:absolute;inset:8% 2% auto 0;min-height:430px;border-radius:34px;border:1px solid rgba(107,232,255,.22);background:linear-gradient(145deg,rgba(8,17,36,.82),rgba(5,10,22,.68));box-shadow:0 36px 130px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px) saturate(150%);transform:rotateY(-8deg) rotateX(5deg) rotateZ(-1deg);overflow:hidden;transition:transform .45s var(--ease)}.builder-holo-card::before{content:"";position:absolute;inset:-1px;background:linear-gradient(115deg,transparent 0 30%,rgba(107,232,255,.18) 45%,transparent 58% 100%);animation:spxScan 5s ease-in-out infinite;pointer-events:none}.holo-topbar{height:54px;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--secondary);font-size:13px;font-weight:900}.holo-topbar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}.holo-topbar span:nth-child(1){background:#ff6b86}.holo-topbar span:nth-child(2){background:#ffd166}.holo-topbar span:nth-child(3){background:#51e6a7}.holo-topbar b{margin-left:auto;color:var(--text);letter-spacing:.02em}.holo-workspace{display:grid;grid-template-columns:126px 1fr 150px;gap:12px;padding:16px;height:376px}.holo-sidebar,.holo-inspector,.holo-canvas{border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.045)}.holo-sidebar,.holo-inspector{display:grid;align-content:start;gap:10px;padding:14px;color:var(--secondary);font-size:12px;font-weight:850}.holo-sidebar b,.holo-inspector b{color:var(--text)}.holo-sidebar span{padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.045)}.holo-sidebar .is-on{background:rgba(24,201,245,.15);color:var(--cyan-2)}.holo-sidebar i{height:68px;border-radius:15px;background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));margin-top:4px}.holo-inspector label{display:grid;gap:3px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.holo-inspector span{color:var(--cyan-2)}.holo-canvas{position:relative;padding:18px;overflow:hidden;background:radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),rgba(255,255,255,.04)}.holo-site-nav{height:24px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.045));margin-bottom:18px}.holo-canvas section{border-radius:24px;min-height:185px;padding:24px;background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.08));border:1px solid rgba(107,232,255,.18)}.holo-canvas small{color:var(--cyan-2);font-weight:1000;text-transform:uppercase;letter-spacing:.10em}.holo-canvas strong{display:block;margin-top:12px;font-size:clamp(24px,3.1vw,42px);line-height:1;letter-spacing:-.06em}.holo-canvas em{display:block;width:58%;height:9px;border-radius:999px;background:rgba(255,255,255,.26);margin-top:20px}.holo-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.holo-blocks i{height:64px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}.hero-floating-card{position:absolute;z-index:4;max-width:205px;padding:15px 16px;border-radius:20px;border:1px solid rgba(107,232,255,.22);background:rgba(5,10,22,.74);box-shadow:0 22px 70px rgba(0,0,0,.28);backdrop-filter:blur(18px);animation:spxFloatCard 6s ease-in-out infinite alternate}.hero-floating-card b{display:block;color:var(--text);font-size:14px}.hero-floating-card span{display:block;margin-top:3px;color:var(--secondary);font-size:12px;line-height:1.35}.hero-floating-card.card-a{left:-3%;top:5%}.hero-floating-card.card-b{right:1%;top:18%;animation-delay:-2s}.hero-floating-card.card-c{left:6%;bottom:18%;animation-delay:-4s}.hero-screenshot-frame{position:absolute;right:4%;bottom:3%;width:min(430px,58%);margin:0;transform:rotateY(-13deg) rotateX(4deg) rotateZ(2deg);opacity:.86}.hero-scroll-cue{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:24px;height:38px;border:1px solid rgba(107,232,255,.28);border-radius:999px;display:grid;place-items:start center;padding-top:7px;opacity:.72}.hero-scroll-cue span{width:4px;height:8px;border-radius:99px;background:var(--cyan-2);animation:spxScrollCue 1.4s ease-in-out infinite}
html[data-theme="light"] .builder-holo-card{background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(238,246,255,.70));box-shadow:0 34px 95px rgba(22,34,64,.16),inset 0 1px 0 rgba(255,255,255,.84)}html[data-theme="light"] .holo-sidebar,html[data-theme="light"] .holo-inspector,html[data-theme="light"] .holo-canvas{background:rgba(255,255,255,.72);border-color:rgba(15,23,42,.10)}html[data-theme="light"] .hero-floating-card{background:rgba(255,255,255,.76);box-shadow:0 22px 60px rgba(22,34,64,.13)}
@keyframes spxPlanetPulse{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.035)}}@keyframes spxOrbitFloat{from{transform:rotate(-21deg) scaleX(1.48) translateY(0)}to{transform:rotate(-17deg) scaleX(1.54) translateY(18px)}}@keyframes spxMilkyFlow{from{transform:translate3d(-2%,0,0) rotate(-12deg) scale(1)}to{transform:translate3d(3%,2%,0) rotate(-7deg) scale(1.08)}}@keyframes spxNebulaPulse{from{transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(.96);opacity:.42}to{transform:translate3d(18px,-12px,0) rotate(var(--r,0deg)) scale(1.08);opacity:.74}}@keyframes spxScan{0%,100%{transform:translateX(-42%);opacity:.15}48%{transform:translateX(46%);opacity:.55}}@keyframes spxFloatCard{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}@keyframes spxScrollCue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(13px);opacity:.25}100%{transform:translateY(0);opacity:1}}
@media (hover:hover){.builder-holo-card[data-tilt-active="1"]{transform:rotateY(var(--tilt-x,-8deg)) rotateX(var(--tilt-y,5deg)) rotateZ(-1deg) translateY(-4px)}}
@media(max-width:1050px){.site-header{grid-template-columns:auto auto 1fr}.nav-toggle{display:block;order:3;justify-self:end}.site-nav{display:none}.site-header.is-open .site-nav{display:grid;position:absolute;left:16px;right:16px;top:calc(100% + 10px);padding:12px;border:1px solid var(--border);border-radius:26px;background:rgba(4,10,22,.96);box-shadow:var(--shadow-soft);justify-content:stretch}.site-header.is-open .nav-actions{display:flex}.nav-actions{justify-self:end}.nav-group-mega .mega-menu,.resources-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}.mega-grid,.mega-grid.small{grid-template-columns:1fr}.spx-aurora-hero{grid-template-columns:1fr;min-height:auto;padding-top:128px}.hero-product-system{min-height:560px}.builder-holo-card{inset:4% 0 auto 0}.hero-screenshot-frame{right:0;width:min(470px,66%)}}
@media(max-width:720px){.site-header{padding-left:16px;padding-right:16px}.nav-actions .btn.primary,.nav-actions .btn.ghost{display:none}.spx-aurora-hero{padding-left:18px;padding-right:18px;padding-top:112px;padding-bottom:84px}.hero h1{font-size:clamp(46px,14vw,70px);letter-spacing:-.08em}.hero-trust-row{grid-template-columns:1fr}.hero-product-system{min-height:520px}.builder-holo-card{min-height:390px;transform:none}.holo-workspace{grid-template-columns:1fr;padding:12px;height:auto}.holo-sidebar,.holo-inspector{display:none}.holo-canvas{min-height:310px}.hero-floating-card{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:10px 0 0 auto;max-width:250px}.hero-floating-card.card-a{margin-top:410px}.hero-screenshot-frame{display:none}.mega-footer{display:grid}.hero-content-fade{height:110px;margin-top:-110px}}



/* ==========================================================================
   A8.12 HERO FROM SCRATCH — interactive Milky Way experience
   ========================================================================== */

/* Navigator polish kept isolated and appended after older public CSS. */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:90;
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:background .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease), padding .34s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open,
.site-header:focus-within{
  background:rgba(3,7,18,.78)!important;
  border-bottom-color:rgba(218,236,255,.12);
  box-shadow:0 18px 54px rgba(0,0,0,.30);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
html[data-theme="light"] .site-header.is-scrolled,
html[data-theme="light"] .site-header.is-open,
html[data-theme="light"] .site-header:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 52px rgba(22,34,64,.12);
}
.nav-home-link::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin-right:9px;
  border-radius:50%;
  vertical-align:1px;
  background:var(--cyan-2);
  box-shadow:0 0 18px rgba(24,201,245,.72);
}
.site-nav>a,
.nav-group>a,
.nav-actions>a,
.theme-toggle{
  transition:transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
}
.site-nav>a:hover,
.nav-group:hover>a,
.nav-actions>a:hover,
.theme-toggle:hover{
  transform:translateY(-1px);
}
.nav-actions .btn.primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 52%,#18c9f5 100%);
  box-shadow:0 14px 42px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.26);
}
.nav-actions .btn.primary::after{
  content:"";
  position:absolute;
  inset:-70% -40%;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.34),transparent 65%);
  transform:translateX(-72%) rotate(12deg);
  transition:transform .72s var(--ease);
}
.nav-actions .btn.primary:hover::after{transform:translateX(72%) rotate(12deg)}
.nav-group-mega .mega-menu{
  border-radius:30px;
  border:1px solid rgba(107,232,255,.20);
  background:
    radial-gradient(circle at 14% 8%,rgba(24,201,245,.14),transparent 28%),
    radial-gradient(circle at 90% 0%,rgba(37,99,235,.18),transparent 30%),
    rgba(4,10,22,.92);
  box-shadow:0 34px 110px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(150%);
}
html[data-theme="light"] .nav-group-mega .mega-menu{
  background:
    radial-gradient(circle at 14% 8%,rgba(14,165,233,.16),transparent 30%),
    radial-gradient(circle at 90% 0%,rgba(37,99,235,.12),transparent 32%),
    rgba(255,255,255,.94);
  box-shadow:0 34px 90px rgba(22,34,64,.14);
}

/* Completely new hero root. It does not use the older .hero/.spx-aurora-hero classes. */
.spx-hero-v12{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(850px,100svh,1120px);
  padding:clamp(126px,12vw,174px) var(--side) clamp(142px,13vw,196px);
  color:var(--text);
  background:#020511;
}
html[data-theme="light"] .spx-hero-v12{
  background:#eef6ff;
}
.spx-hero-space,
.spx-hero-nebula,
.spx-hero-bottom-fade{
  position:absolute;
  pointer-events:none;
}
.spx-hero-space{
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(980px 540px at 76% 16%,rgba(37,99,235,.18),transparent 62%),
    radial-gradient(760px 440px at 12% 78%,rgba(24,201,245,.12),transparent 66%),
    linear-gradient(180deg,#020511 0%,#06101e 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-space{
  background:
    radial-gradient(980px 540px at 76% 16%,rgba(37,99,235,.12),transparent 62%),
    radial-gradient(760px 440px at 12% 78%,rgba(14,165,233,.11),transparent 66%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 74%,#eef3fa 100%);
}
.spx-hero-nebula{
  inset:-8% -6%;
  z-index:1;
  overflow:hidden;
}
.spx-hero-nebula::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:5%;
  height:86%;
  background:
    linear-gradient(111deg,
      transparent 0 29%,
      rgba(64,119,255,.08) 35%,
      rgba(107,232,255,.22) 43%,
      rgba(255,255,255,.34) 49%,
      rgba(185,226,255,.20) 55%,
      rgba(47,127,255,.10) 63%,
      transparent 71% 100%);
  filter:blur(12px) saturate(140%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .10),calc(var(--spx-hero-y,0px) * .08),0);
  opacity:.88;
  animation:spxV12GalaxyDrift 24s ease-in-out infinite alternate;
}
.spx-hero-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 42% 48%,rgba(255,255,255,.14),transparent 34%),
    radial-gradient(ellipse at 50% 53%,rgba(107,232,255,.18),transparent 43%),
    radial-gradient(ellipse at 34% 62%,rgba(255,170,245,.08),transparent 35%);
  filter:blur(24px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .06),calc(var(--spx-hero-y,0px) * .05),0);
  opacity:.78;
  animation:spxV12NebulaBreath 14s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-nebula::before{
  opacity:.62;
  background:
    linear-gradient(111deg,
      transparent 0 30%,
      rgba(37,99,235,.06) 36%,
      rgba(14,165,233,.15) 44%,
      rgba(255,255,255,.64) 49%,
      rgba(125,211,252,.14) 55%,
      rgba(37,99,235,.07) 63%,
      transparent 71% 100%);
}
html[data-theme="light"] .spx-hero-nebula::after{
  opacity:.52;
}
.nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(36px);
  opacity:.50;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .18),calc(var(--spx-hero-y,0px) * .14),0);
  animation:spxV12CloudFloat 12s ease-in-out infinite alternate;
}
.cloud-a{left:3%;top:62%;width:46vw;height:13vw;background:rgba(107,232,255,.14);transform:rotate(-17deg)}
.cloud-b{right:5%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.16);transform:rotate(-18deg);animation-delay:-3s}
.cloud-c{left:40%;top:42%;width:36vw;height:10vw;background:rgba(255,188,244,.09);transform:rotate(-18deg);animation-delay:-6s}
.spx-logo-constellation{
  position:absolute;
  right:clamp(18px,7vw,96px);
  top:clamp(120px,15vw,220px);
  width:min(38vw,500px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  opacity:.07;
  filter:drop-shadow(0 0 90px rgba(24,201,245,.22));
  transform:rotate(-8deg) translate3d(calc(var(--spx-hero-x,0px) * -.12),calc(var(--spx-hero-y,0px) * -.08),0);
}
.spx-logo-constellation::before{
  content:"";
  position:absolute;
  inset:5%;
  border-radius:50%;
  border:1px solid rgba(107,232,255,.18);
  box-shadow:0 0 90px rgba(24,201,245,.10),inset 0 0 62px rgba(24,201,245,.08);
}
.spx-logo-constellation img{
  width:62%;
  height:62%;
  object-fit:contain;
  border-radius:999px;
}
html[data-theme="light"] .spx-logo-constellation{opacity:.045}

.spx-hero-shell{
  position:relative;
  z-index:4;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(460px,1.04fr) minmax(420px,.96fr);
  gap:clamp(34px,5vw,82px);
  align-items:center;
}
.spx-hero-message{
  grid-column:2;
  max-width:740px;
}
.spx-hero-product{
  grid-column:1;
  grid-row:1;
  position:relative;
  min-height:650px;
  perspective:1400px;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .55),calc(var(--spx-hero-y,0px) * .45),0);
}
.spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(24,201,245,.10);
  color:#bff4ff;
  font-weight:1000;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
html[data-theme="light"] .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.22);
}
.spx-hero-message h1{
  margin:18px 0 0;
  font-size:clamp(52px,6vw,92px);
  line-height:.92;
  letter-spacing:-.088em;
  text-wrap:balance;
}
.spx-hero-lead{
  margin:24px 0 0;
  max-width:710px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.56;
}
.spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:26px;
}
.spx-hero-points span{
  min-height:104px;
  padding:17px;
  border-radius:22px;
  border:1px solid rgba(107,232,255,.17);
  background:rgba(255,255,255,.052);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  color:var(--secondary);
  font-weight:800;
}
html[data-theme="light"] .spx-hero-points span{
  background:rgba(255,255,255,.64);
  border-color:rgba(15,23,42,.10);
}
.spx-hero-points b{
  display:block;
  margin-bottom:6px;
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.builder-photo-behind{
  position:absolute;
  left:clamp(-220px,-14vw,-80px);
  top:44px;
  width:min(650px,78vw);
  margin:0;
  z-index:1;
  opacity:.64;
  transform:rotateY(-18deg) rotateX(5deg) rotateZ(-4deg);
  filter:saturate(1.08) contrast(1.05);
}
.builder-photo-behind::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:34px;
  background:linear-gradient(90deg,rgba(2,5,17,.62),rgba(2,5,17,.05) 48%,rgba(2,5,17,.44));
  pointer-events:none;
}
.builder-photo-behind img{
  display:block;
  width:100%;
  border-radius:34px;
  border:1px solid rgba(107,232,255,.18);
  box-shadow:0 38px 130px rgba(0,0,0,.42);
}
.spx-builder-window{
  position:absolute;
  left:clamp(0px,4vw,62px);
  top:104px;
  z-index:3;
  width:min(690px,92%);
  min-height:470px;
  border-radius:34px;
  border:1px solid rgba(107,232,255,.22);
  background:linear-gradient(145deg,rgba(8,17,36,.86),rgba(5,10,22,.70));
  box-shadow:0 42px 140px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transform:rotateY(-9deg) rotateX(5deg) rotateZ(-1.5deg);
  transition:transform .34s var(--ease);
}
html[data-theme="light"] .spx-builder-window{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(238,246,255,.74));
  box-shadow:0 36px 110px rgba(22,34,64,.18),inset 0 1px 0 rgba(255,255,255,.80);
}
.spx-builder-window::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(115deg,transparent 0 32%,rgba(107,232,255,.18) 45%,transparent 60% 100%);
  animation:spxV12Scan 5.2s ease-in-out infinite;
  pointer-events:none;
}
.spx-builder-bar{
  height:56px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--secondary);
  font-size:13px;
  font-weight:900;
}
.spx-builder-bar span{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.spx-builder-bar span:nth-child(1){background:#ff6b86}
.spx-builder-bar span:nth-child(2){background:#ffd166}
.spx-builder-bar span:nth-child(3){background:#51e6a7}
.spx-builder-bar strong{margin-left:auto;color:var(--text);letter-spacing:.01em}
.spx-builder-bar em{
  font-style:normal;
  padding:5px 8px;
  border-radius:999px;
  color:var(--cyan-2);
  background:rgba(24,201,245,.10);
  border:1px solid rgba(107,232,255,.16);
}
.spx-builder-workspace{
  display:grid;
  grid-template-columns:126px 1fr 148px;
  gap:12px;
  padding:16px;
  min-height:414px;
}
.spx-builder-left,
.spx-builder-right,
.spx-builder-canvas{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-builder-left,
html[data-theme="light"] .spx-builder-right,
html[data-theme="light"] .spx-builder-canvas{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.spx-builder-left,
.spx-builder-right{
  display:grid;
  align-content:start;
  gap:10px;
  padding:14px;
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
}
.spx-builder-left b,
.spx-builder-right b{color:var(--text)}
.spx-builder-left i{
  font-style:normal;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.spx-builder-left i.active{
  background:rgba(24,201,245,.15);
  color:var(--cyan-2);
}
.spx-builder-left small{
  display:block;
  height:72px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));
}
.spx-builder-right label{
  display:grid;
  gap:3px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.spx-builder-right span{color:var(--cyan-2)}
.spx-builder-canvas{
  position:relative;
  padding:18px;
  overflow:hidden;
  background:radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),rgba(255,255,255,.04);
}
.fake-browser-nav{
  height:25px;
  margin-bottom:18px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.045));
}
.spx-builder-canvas section{
  min-height:202px;
  padding:24px;
  border-radius:24px;
  border:1px solid rgba(107,232,255,.18);
  background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.08));
}
.spx-builder-canvas small{
  color:var(--cyan-2);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.spx-builder-canvas h2{
  margin:13px 0 0;
  max-width:410px;
  font-size:clamp(26px,2.8vw,42px);
  line-height:1;
  letter-spacing:-.06em;
}
.spx-builder-canvas p{
  max-width:360px;
  color:var(--secondary);
}
.spx-canvas-blocks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.spx-canvas-blocks i{
  height:64px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.06);
}
.spx-hero-card{
  position:absolute;
  z-index:4;
  max-width:220px;
  padding:15px 16px;
  border-radius:21px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(5,10,22,.74);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
  animation:spxV12Float 6s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-card{
  background:rgba(255,255,255,.78);
  box-shadow:0 22px 60px rgba(22,34,64,.13);
}
.spx-hero-card b{
  display:block;
  color:var(--text);
  font-size:14px;
}
.spx-hero-card span{
  display:block;
  margin-top:4px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.35;
}
.card-visual{left:-1%;top:34px}
.card-export{right:2%;bottom:84px;animation-delay:-2.5s}
.spx-hero-bottom-fade{
  left:0;right:0;bottom:-1px;
  z-index:2;
  height:240px;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.28) 42%,
      rgba(7,17,31,.78) 73%,
      var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.36) 42%,
      rgba(246,248,252,.82) 73%,
      #eef3fa 100%);
}
.spx-hero-v12 + .section.intro{
  margin-top:-52px;
  position:relative;
  z-index:5;
}

@keyframes spxV12GalaxyDrift{
  0%{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.05);opacity:.76}
  100%{transform:rotate(-16deg) translate3d(1.4%,-.8%,0) scale(1.12);opacity:.94}
}
@keyframes spxV12NebulaBreath{
  from{opacity:.50;transform:rotate(-18deg) scale(1.0)}
  to{opacity:.82;transform:rotate(-16deg) scale(1.06)}
}
@keyframes spxV12CloudFloat{
  from{opacity:.38;filter:blur(34px)}
  to{opacity:.62;filter:blur(42px)}
}
@keyframes spxV12Scan{
  0%,30%{transform:translateX(-62%)}
  70%,100%{transform:translateX(62%)}
}
@keyframes spxV12Float{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-12px,0)}
}

@media(max-width:1120px){
  .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:900px;
  }
  .spx-hero-message,
  .spx-hero-product{
    grid-column:1;
    grid-row:auto;
  }
  .spx-hero-message{max-width:850px}
  .spx-hero-product{min-height:600px}
  .builder-photo-behind{left:-120px;width:min(640px,88vw)}
  .spx-builder-window{left:clamp(0px,6vw,56px);width:min(690px,94%)}
}
@media(max-width:720px){
  .spx-hero-v12{
    min-height:auto;
    padding:112px 18px 128px;
  }
  .spx-hero-message h1{
    font-size:clamp(42px,13vw,66px);
    letter-spacing:-.075em;
  }
  .spx-hero-actions{display:grid}
  .spx-hero-points{grid-template-columns:1fr}
  .spx-hero-product{min-height:520px}
  .builder-photo-behind{left:-112px;top:18px;width:520px;opacity:.48}
  .spx-builder-window{
    left:0;
    top:90px;
    width:100%;
    min-height:390px;
    transform:none!important;
  }
  .spx-builder-workspace{
    grid-template-columns:1fr;
    min-height:auto;
    padding:12px;
  }
  .spx-builder-left,.spx-builder-right{display:none}
  .spx-builder-canvas{min-height:320px}
  .spx-builder-canvas h2{font-size:34px}
  .card-visual{left:0;top:0;transform:none}
  .card-export{right:0;bottom:8px}
  .spx-logo-constellation{width:70vw;right:-18vw;top:12%;opacity:.045}
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-nebula::before,
  .spx-hero-nebula::after,
  .nebula-cloud,
  .spx-builder-window::before,
  .spx-hero-card{
    animation:none!important;
  }
}


/* ==========================================================================
   A8.13 HERO REFINEMENT — live builder preview + darker interactive nebula
   ========================================================================== */

.spx-hero-v12{display:none!important}
.spx-hero-v13{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:clamp(820px,100svh,1060px);
  padding:clamp(126px,11vw,166px) var(--side) clamp(136px,12vw,190px);
  color:var(--text);
  background:#020511;
}
html[data-theme="light"] .spx-hero-v13{background:#eef6ff}

.spx-hero-v13 .spx-hero-space,
.spx-hero-v13 .spx-hero-nebula,
.spx-hero-v13 .spx-hero-bottom-fade{
  position:absolute;
  pointer-events:none;
}
.spx-hero-v13 .spx-hero-space{
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  background:
    radial-gradient(900px 560px at 76% 15%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(760px 480px at 10% 74%,rgba(24,201,245,.10),transparent 68%),
    radial-gradient(720px 460px at 47% 48%,rgba(83,44,146,.10),transparent 66%),
    linear-gradient(180deg,#020511 0%,#050b17 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-space{
  background:
    radial-gradient(900px 560px at 76% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 480px at 10% 74%,rgba(14,165,233,.09),transparent 68%),
    radial-gradient(720px 460px at 47% 48%,rgba(99,102,241,.08),transparent 66%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}

.spx-hero-v13 .spx-hero-nebula{
  inset:-10% -8%;
  z-index:1;
  overflow:hidden;
}
.spx-hero-v13 .spx-hero-nebula::before{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:4%;
  height:92%;
  background:
    linear-gradient(111deg,
      transparent 0 28%,
      rgba(12,40,88,.02) 34%,
      rgba(28,91,148,.12) 41%,
      rgba(84,192,235,.18) 46%,
      rgba(194,233,255,.22) 49%,
      rgba(94,178,230,.15) 53%,
      rgba(46,82,176,.08) 61%,
      transparent 72% 100%),
    radial-gradient(ellipse at 46% 50%,rgba(128,219,255,.12),transparent 37%),
    radial-gradient(ellipse at 38% 58%,rgba(186,132,255,.06),transparent 38%);
  filter:blur(18px) saturate(128%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .10),calc(var(--spx-hero-y,0px) * .08),0);
  opacity:.72;
  animation:spxV13GalaxyDrift 26s ease-in-out infinite alternate;
}
.spx-hero-v13 .spx-hero-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 48% 52%,rgba(255,255,255,.07),transparent 32%),
    radial-gradient(ellipse at 50% 54%,rgba(107,232,255,.11),transparent 43%),
    radial-gradient(ellipse at 35% 62%,rgba(255,170,245,.055),transparent 36%);
  filter:blur(32px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-hero-x,0px) * .06),calc(var(--spx-hero-y,0px) * .05),0);
  opacity:.72;
  animation:spxV13NebulaBreath 15s ease-in-out infinite alternate;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-nebula::before{
  opacity:.50;
  background:
    linear-gradient(111deg,
      transparent 0 30%,
      rgba(37,99,235,.04) 36%,
      rgba(14,165,233,.11) 44%,
      rgba(255,255,255,.48) 49%,
      rgba(125,211,252,.12) 55%,
      rgba(37,99,235,.05) 63%,
      transparent 72% 100%);
}
.spx-hero-v13 .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(44px);
  opacity:.38;
  transform:translate3d(calc(var(--spx-hero-x,0px) * .16),calc(var(--spx-hero-y,0px) * .12),0);
  animation:spxV13CloudFloat 13s ease-in-out infinite alternate;
}
.spx-hero-v13 .cloud-a{left:2%;top:64%;width:44vw;height:13vw;background:rgba(107,232,255,.10);transform:rotate(-17deg)}
.spx-hero-v13 .cloud-b{right:4%;top:17%;width:38vw;height:11vw;background:rgba(37,99,235,.12);transform:rotate(-18deg);animation-delay:-3s}
.spx-hero-v13 .cloud-c{left:40%;top:43%;width:36vw;height:10vw;background:rgba(255,188,244,.06);transform:rotate(-18deg);animation-delay:-6s}

.spx-hero-v13 .spx-hero-shell{
  position:relative;
  z-index:4;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(520px,1.06fr) minmax(380px,.94fr);
  gap:clamp(38px,5vw,84px);
  align-items:center;
}

/* Right-side copy: shorter, clearer, less oversized. */
.spx-hero-v13 .spx-hero-message{
  max-width:620px;
}
.spx-hero-v13 .spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.22);
  background:rgba(24,201,245,.10);
  color:#bff4ff;
  font-weight:1000;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.22);
}
.spx-hero-v13 .spx-hero-message h1{
  margin:18px 0 0;
  max-width:620px;
  font-size:clamp(44px,4.8vw,76px);
  line-height:.96;
  letter-spacing:-.074em;
  text-wrap:balance;
}
.spx-hero-v13 .spx-hero-lead{
  margin:22px 0 0;
  max-width:590px;
  color:var(--text-soft);
  font-size:clamp(16px,1.18vw,19px);
  line-height:1.56;
}
.spx-hero-v13 .spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-v13 .spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.spx-hero-v13 .spx-hero-points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.spx-hero-v13 .spx-hero-points span{
  min-height:92px;
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  color:var(--secondary);
  font-weight:820;
  font-size:13px;
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-points span{
  background:rgba(255,255,255,.64);
  border-color:rgba(15,23,42,.10);
}
.spx-hero-v13 .spx-hero-points b{
  display:block;
  margin-bottom:6px;
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Left side: public-safe live builder inspired by the real builder canvas. */
.spx-live-builder{
  position:relative;
  min-height:570px;
  border-radius:36px;
  border:1px solid rgba(107,232,255,.24);
  background:
    linear-gradient(145deg,rgba(8,17,36,.88),rgba(5,10,22,.76)),
    radial-gradient(circle at 24% 0%,rgba(24,201,245,.16),transparent 40%);
  box-shadow:0 46px 150px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
  transform:perspective(1400px) rotateY(6deg) rotateX(3deg);
}
html[data-theme="light"] .spx-live-builder{
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(238,246,255,.78)),
    radial-gradient(circle at 24% 0%,rgba(14,165,233,.13),transparent 40%);
  box-shadow:0 36px 110px rgba(22,34,64,.18),inset 0 1px 0 rgba(255,255,255,.80);
}
.spx-live-builder::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(115deg,transparent 0 34%,rgba(107,232,255,.14) 47%,transparent 60% 100%);
  animation:spxV13Scan 5.8s ease-in-out infinite;
  pointer-events:none;
}
.spx-live-builder__top{
  position:relative;
  z-index:2;
  height:58px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--secondary);
  font-size:13px;
  font-weight:900;
}
.spx-live-builder__top > span{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.22);
}
.spx-live-builder__top > span:nth-child(1){background:#ff6b86}
.spx-live-builder__top > span:nth-child(2){background:#ffd166}
.spx-live-builder__top > span:nth-child(3){background:#51e6a7}
.spx-live-builder__top strong{margin-left:auto;color:var(--text);letter-spacing:.01em}
.spx-live-builder__top em{
  font-style:normal;
  padding:5px 9px;
  border-radius:999px;
  color:var(--cyan-2);
  background:rgba(24,201,245,.10);
  border:1px solid rgba(107,232,255,.16);
}
.spx-live-builder__body{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:134px minmax(0,1fr) 156px;
  gap:12px;
  padding:16px;
  min-height:456px;
}
.spx-live-builder__rail,
.spx-live-builder__inspector,
.spx-live-builder__viewport{
  border:1px solid rgba(255,255,255,.08);
  border-radius:23px;
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-live-builder__rail,
html[data-theme="light"] .spx-live-builder__inspector,
html[data-theme="light"] .spx-live-builder__viewport{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.70);
}
.spx-live-builder__rail,
.spx-live-builder__inspector{
  display:grid;
  align-content:start;
  gap:10px;
  padding:14px;
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
}
.spx-live-builder__rail b,
.spx-live-builder__inspector b{color:var(--text)}
.spx-live-builder__rail button{
  all:unset;
  cursor:default;
  padding:9px 10px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
}
.spx-live-builder__rail button.is-active{
  background:rgba(24,201,245,.15);
  color:var(--cyan-2);
}
.spx-live-builder__rail i{
  display:block;
  height:76px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(24,201,245,.15),rgba(37,99,235,.08));
}
.spx-live-builder__inspector label{
  display:grid;
  gap:3px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.spx-live-builder__inspector span{color:var(--cyan-2)}
.spx-live-builder__viewport{
  position:relative;
  overflow:hidden;
  min-height:420px;
  cursor:grab;
  background:
    radial-gradient(circle at 75% 15%,rgba(24,201,245,.12),transparent 34%),
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  touch-action:none;
}
.spx-live-builder__viewport:active{cursor:grabbing}
.spx-live-builder__viewport::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(107,232,255,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.055) 1px, transparent 1px);
  background-size:34px 34px;
  transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0);
  opacity:.55;
}
.spx-live-canvas{
  position:absolute;
  left:50%;
  top:50%;
  width:560px;
  transform:translate3d(calc(-50% + var(--pan-x,0px)),calc(-50% + var(--pan-y,0px)),0);
  transition:box-shadow .25s var(--ease);
}
.spx-live-canvas.is-dragging{transition:none}
.spx-live-page{
  position:relative;
  padding:18px;
  border-radius:28px;
  border:1px solid rgba(107,232,255,.24);
  background:linear-gradient(180deg,rgba(9,20,42,.98),rgba(5,13,30,.96));
  box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 0 8px rgba(255,255,255,.025);
}
html[data-theme="light"] .spx-live-page{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(238,246,255,.96));
  box-shadow:0 30px 90px rgba(22,34,64,.14),0 0 0 8px rgba(255,255,255,.30);
}
.spx-live-page nav{
  height:28px;
  display:flex;
  gap:8px;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
html[data-theme="light"] .spx-live-page nav{background:rgba(15,23,42,.055)}
.spx-live-page nav span{
  height:7px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.spx-live-page nav span:nth-child(1){width:70px}
.spx-live-page nav span:nth-child(2){width:44px}
.spx-live-page nav span:nth-child(3){width:52px;margin-left:auto}
.spx-live-hero-block{
  margin-top:18px;
  padding:26px;
  border-radius:26px;
  border:1px solid rgba(107,232,255,.20);
  background:
    radial-gradient(circle at 78% 12%,rgba(24,201,245,.16),transparent 38%),
    linear-gradient(135deg,rgba(24,201,245,.14),rgba(37,99,235,.07));
}
.spx-live-hero-block small{
  color:var(--cyan-2);
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.spx-live-hero-block h2{
  max-width:390px;
  margin:12px 0 0;
  color:var(--text);
  font-size:38px;
  line-height:1;
  letter-spacing:-.06em;
}
.spx-live-hero-block p{
  max-width:360px;
  color:var(--secondary);
  margin:12px 0 0;
}
.spx-live-hero-block div{
  display:flex;
  gap:10px;
  margin-top:18px;
}
.spx-live-hero-block i{
  display:block;
  width:96px;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}
.spx-live-section-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.spx-live-section-grid article{
  min-height:82px;
  padding:13px;
  border-radius:19px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.055);
}
html[data-theme="light"] .spx-live-section-grid article{
  background:rgba(15,23,42,.035);
  border-color:rgba(15,23,42,.07);
}
.spx-live-section-grid b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.spx-live-section-grid span{
  display:block;
  height:9px;
  margin-top:17px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}
.spx-live-builder__hint{
  position:relative;
  z-index:2;
  margin:0 16px 16px;
  padding:10px 13px;
  border-radius:16px;
  border:1px solid rgba(107,232,255,.15);
  background:rgba(24,201,245,.07);
  color:var(--secondary);
  font-size:12px;
  font-weight:820;
}
.spx-hero-v13 .spx-hero-bottom-fade{
  left:0;right:0;bottom:-1px;
  z-index:2;
  height:250px;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.22) 34%,
      rgba(7,17,31,.72) 68%,
      var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-v13 .spx-hero-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.34) 40%,
      rgba(246,248,252,.82) 72%,
      #eef3fa 100%);
}
.spx-hero-v13 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV13GalaxyDrift{
  0%{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.05);opacity:.62}
  100%{transform:rotate(-16deg) translate3d(1.4%,-.8%,0) scale(1.12);opacity:.78}
}
@keyframes spxV13NebulaBreath{
  from{opacity:.48;transform:rotate(-18deg) scale(1)}
  to{opacity:.74;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV13CloudFloat{
  from{opacity:.30;filter:blur(42px)}
  to{opacity:.48;filter:blur(52px)}
}
@keyframes spxV13Scan{
  0%,34%{transform:translateX(-64%)}
  70%,100%{transform:translateX(64%)}
}

@media(max-width:1120px){
  .spx-hero-v13 .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:920px;
  }
  .spx-live-builder{
    transform:none;
    min-height:560px;
  }
  .spx-hero-v13 .spx-hero-message{
    max-width:850px;
  }
}
@media(max-width:760px){
  .spx-hero-v13{
    min-height:auto;
    padding:112px 18px 132px;
  }
  .spx-hero-v13 .spx-hero-message h1{
    font-size:clamp(40px,12vw,62px);
    letter-spacing:-.07em;
  }
  .spx-hero-v13 .spx-hero-actions{display:grid}
  .spx-hero-v13 .spx-hero-points{grid-template-columns:1fr}
  .spx-live-builder{
    min-height:auto;
    border-radius:28px;
  }
  .spx-live-builder__body{
    grid-template-columns:1fr;
    min-height:430px;
    padding:12px;
  }
  .spx-live-builder__rail,
  .spx-live-builder__inspector{
    display:none;
  }
  .spx-live-builder__viewport{
    min-height:405px;
  }
  .spx-live-canvas{
    width:520px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-v13 .spx-hero-nebula::before,
  .spx-hero-v13 .spx-hero-nebula::after,
  .spx-hero-v13 .nebula-cloud,
  .spx-live-builder::before{
    animation:none!important;
  }
}



/* ==========================================================================
   A8.15 — Spixor Orbit Interface hero + stricter professional navigator
   Inspiration direction: space-tech cinematic clarity + modern visual-builder SaaS.
   ========================================================================== */

.spx-nav-v15{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,28px);
  align-items:center;
  padding:18px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), padding .28s var(--ease);
}
.spx-nav-v15.is-scrolled,
.spx-nav-v15.is-open,
.spx-nav-v15:focus-within{
  padding-top:12px;
  padding-bottom:12px;
  background:rgba(4,9,18,.78)!important;
  border-bottom-color:rgba(218,236,255,.12);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
html[data-theme="light"] .spx-nav-v15.is-scrolled,
html[data-theme="light"] .spx-nav-v15.is-open,
html[data-theme="light"] .spx-nav-v15:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 54px rgba(22,34,64,.10);
}
.spx-nav-v15 .brand{
  padding:6px 10px 6px 6px;
  border-radius:14px;
}
.spx-nav-v15 .brand img{
  width:38px;
  height:38px;
  border-radius:10px;
}
.spx-nav-v15 .brand span{
  font-weight:950;
  letter-spacing:-.04em;
}
.spx-nav-v15 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px;
  border:1px solid rgba(218,236,255,.10);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .spx-nav-v15 .site-nav{
  background:rgba(255,255,255,.54);
  border-color:rgba(15,23,42,.08);
}
.spx-nav-v15 .site-nav>a,
.spx-nav-v15 .nav-group>a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  color:var(--text-soft);
  padding:9px 14px;
  border-radius:10px;
  border:1px solid transparent;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.015em;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v15 .site-nav>a:hover,
.spx-nav-v15 .nav-group:hover>a,
.spx-nav-v15 .nav-group>a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.105);
  border-color:rgba(107,232,255,.18);
  transform:translateY(-1px);
}
.spx-nav-v15 .nav-home-link::before{
  content:"";
  width:7px;height:7px;
  border-radius:2px;
  margin-right:9px;
  background:var(--cyan-2);
  box-shadow:0 0 16px rgba(24,201,245,.72);
}
.spx-nav-v15 .nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.spx-nav-v15 .nav-actions .btn,
.spx-nav-v15 .theme-toggle{
  min-height:42px;
  border-radius:12px;
  padding:9px 14px;
  font-weight:950;
  letter-spacing:-.015em;
}
.spx-nav-v15 .nav-actions .btn.ghost,
.spx-nav-v15 .theme-toggle{
  border:1px solid rgba(218,236,255,.13);
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-nav-v15 .nav-actions .btn.ghost,
html[data-theme="light"] .spx-nav-v15 .theme-toggle{
  background:rgba(255,255,255,.66);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v15 .nav-actions .btn.primary{
  border-radius:12px;
  background:linear-gradient(135deg,#078fc2,#2563eb 65%,#18c9f5);
  box-shadow:0 14px 44px rgba(14,165,233,.24), inset 0 1px 0 rgba(255,255,255,.22);
}
.spx-nav-v15 .nav-group-mega .mega-menu{
  width:min(920px,calc(100vw - 36px));
  border-radius:18px;
  padding:18px;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(180deg,rgba(5,11,23,.96),rgba(4,9,18,.91)),
    radial-gradient(circle at 18% 0%,rgba(24,201,245,.11),transparent 30%);
  box-shadow:0 32px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="light"] .spx-nav-v15 .nav-group-mega .mega-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,248,252,.92));
  box-shadow:0 30px 80px rgba(22,34,64,.13);
}
.spx-nav-v15 .mega-intro,
.spx-nav-v15 .mega-card{
  border-radius:12px;
}
.spx-nav-v15 .mega-card{
  padding:16px;
}
.spx-nav-v15 .mega-card:hover{
  transform:translateY(-3px);
}

/* Hide older hero experiments when a v15 hero exists. */
.spx-hero-v12,
.spx-hero-v13,
.hero.spx-aurora-hero{display:none!important}

.spx-hero-v15{
  position:relative;
  min-height:clamp(840px,100svh,1100px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(132px,11vw,170px) var(--side) clamp(140px,13vw,198px);
  background:#02050d;
  color:var(--text);
}
html[data-theme="light"] .spx-hero-v15{
  background:#eef6ff;
}
.spx-hero-v15 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 76% 14%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(760px 500px at 12% 78%,rgba(24,201,245,.09),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 76% 14%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 500px at 12% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-hero-v15 .spx-nebula-plane{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-hero-v15 .spx-nebula-plane::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:7%;
  height:86%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.045) 37%,
      rgba(24,201,245,.13) 44%,
      rgba(210,244,255,.18) 49%,
      rgba(82,181,230,.11) 54%,
      rgba(48,86,180,.055) 62%,
      transparent 72% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.10),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 40%);
  filter:blur(20px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v15-x,0px) * .10),calc(var(--spx-v15-y,0px) * .08),0);
  opacity:.66;
  animation:spxV15Galaxy 28s ease-in-out infinite alternate;
}
.spx-hero-v15 .spx-nebula-plane::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.055),transparent 33%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.095),transparent 44%);
  filter:blur(36px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v15-x,0px) * .07),calc(var(--spx-v15-y,0px) * .05),0);
  opacity:.68;
  animation:spxV15Nebula 16s ease-in-out infinite alternate;
}
.spx-hero-v15 .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.34;
  filter:blur(48px);
  transform:translate3d(calc(var(--spx-v15-x,0px) * .13),calc(var(--spx-v15-y,0px) * .10),0);
  animation:spxV15Cloud 14s ease-in-out infinite alternate;
}
.spx-hero-v15 .cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.spx-hero-v15 .cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.spx-hero-v15 .cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.spx-hero-v15 .orbit-line{
  position:absolute;
  border:1px solid rgba(107,232,255,.13);
  transform:rotate(-14deg) translate3d(calc(var(--spx-v15-x,0px) * -.06),calc(var(--spx-v15-y,0px) * -.05),0);
  opacity:.44;
}
.spx-hero-v15 .line-a{
  right:6%;
  top:18%;
  width:720px;
  height:320px;
  border-radius:50%;
}
.spx-hero-v15 .line-b{
  right:22%;
  bottom:17%;
  width:560px;
  height:240px;
  border-radius:50%;
  opacity:.28;
}

.spx-hero-v15 .spx-hero-shell{
  position:relative;
  z-index:5;
  width:min(1380px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(390px,.78fr) minmax(560px,1.22fr);
  gap:clamp(44px,5vw,88px);
  align-items:center;
}
.spx-hero-v15 .spx-hero-copy{
  max-width:560px;
}
.spx-hero-v15 .spx-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-hero-v15 .spx-hero-copy h1{
  margin:18px 0 0;
  max-width:610px;
  font-size:clamp(46px,5.2vw,84px);
  line-height:.95;
  letter-spacing:-.082em;
  text-wrap:balance;
}
.spx-hero-v15 .spx-hero-lead{
  margin:22px 0 0;
  max-width:540px;
  color:var(--text-soft);
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.56;
}
.spx-hero-v15 .spx-hero-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-hero-v15 .spx-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.spx-hero-v15 .spx-hero-actions .btn{
  border-radius:12px;
}
.spx-hero-v15 .spx-hero-proof{
  margin-top:28px;
  display:grid;
  gap:10px;
}
.spx-hero-v15 .spx-hero-proof span{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--secondary);
  font-weight:850;
  border-radius:10px;
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-proof span{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.09);
}
.spx-hero-v15 .spx-hero-proof b{
  width:34px;
  height:26px;
  display:grid;
  place-items:center;
  color:var(--cyan-2);
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  font-size:11px;
}

.spx-orbit-interface{
  position:relative;
  min-height:620px;
  perspective:1200px;
  transform:translate3d(calc(var(--spx-v15-x,0px) * .35),calc(var(--spx-v15-y,0px) * .25),0);
}
.spx-orbit-backplate{
  position:absolute;
  inset:6% 4% 7% 8%;
  border:1px solid rgba(107,232,255,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),
    repeating-linear-gradient(90deg,rgba(107,232,255,.035) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(107,232,255,.025) 0 1px,transparent 1px 54px);
  clip-path:polygon(6% 0,100% 0,100% 83%,88% 100%,0 100%,0 9%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 42px 120px rgba(0,0,0,.32);
}
html[data-theme="light"] .spx-orbit-backplate{
  background:
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(238,246,255,.38)),
    repeating-linear-gradient(90deg,rgba(14,165,233,.04) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(14,165,233,.03) 0 1px,transparent 1px 54px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 42px 100px rgba(22,34,64,.13);
}
.spx-trajectory{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.spx-trajectory svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.spx-trajectory path{
  fill:none;
  stroke:rgba(107,232,255,.23);
  stroke-width:1.2;
  stroke-dasharray:9 12;
  animation:spxV15Dash 20s linear infinite;
}
.spx-trajectory path:nth-child(2){
  stroke:rgba(255,255,255,.10);
  stroke-dasharray:5 16;
  animation-duration:26s;
}
.spx-command-panel{
  position:absolute;
  left:13%;
  top:14%;
  z-index:4;
  width:min(600px,74%);
  min-height:420px;
  border:1px solid rgba(107,232,255,.22);
  background:
    radial-gradient(circle at 85% 10%,rgba(24,201,245,.12),transparent 34%),
    linear-gradient(150deg,rgba(8,17,36,.88),rgba(4,9,18,.76));
  clip-path:polygon(5% 0,100% 0,100% 88%,91% 100%,0 100%,0 8%);
  box-shadow:0 46px 130px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(145%);
  transform:rotateY(-5deg) rotateX(3deg);
}
html[data-theme="light"] .spx-command-panel{
  background:
    radial-gradient(circle at 85% 10%,rgba(14,165,233,.12),transparent 34%),
    linear-gradient(150deg,rgba(255,255,255,.90),rgba(238,246,255,.72));
  box-shadow:0 40px 110px rgba(22,34,64,.16),inset 0 1px 0 rgba(255,255,255,.78);
}
.spx-command-panel .panel-top{
  height:54px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .spx-command-panel .panel-top{border-bottom-color:rgba(15,23,42,.08)}
.spx-command-panel .panel-top span{
  width:9px;height:9px;border-radius:3px;
  background:rgba(255,255,255,.20);
}
.spx-command-panel .panel-top span:nth-child(1){background:#ff6b86}
.spx-command-panel .panel-top span:nth-child(2){background:#ffd166}
.spx-command-panel .panel-top span:nth-child(3){background:#51e6a7}
.spx-command-panel .panel-top strong{
  margin-left:auto;
  color:var(--text);
  font-size:13px;
}
.spx-command-panel .panel-body{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:18px;
  padding:22px;
}
.panel-visual{
  position:relative;
  min-height:260px;
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 70% 20%,rgba(24,201,245,.10),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  overflow:hidden;
  clip-path:polygon(9% 0,100% 0,100% 88%,88% 100%,0 100%,0 10%);
}
.panel-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
}
.panel-visual i{
  position:absolute;
  display:block;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(255,255,255,.055);
}
.panel-visual i:nth-child(1){left:12%;top:13%;width:56%;height:18%;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
.panel-visual i:nth-child(2){left:12%;top:40%;width:34%;height:42%}
.panel-visual i:nth-child(3){right:12%;top:40%;width:36%;height:18%}
.panel-visual i:nth-child(4){right:12%;bottom:17%;width:36%;height:18%}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(1){background:rgba(24,201,245,.16)}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(2){background:rgba(37,99,235,.13)}
.spx-command-panel[data-state="theme"] .panel-visual i:nth-child(3){background:rgba(255,186,245,.08)}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(1){width:42%;height:42%;left:30%;top:18%;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(2){left:18%;top:68%;width:64%;height:9%}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(3){left:24%;top:82%;width:52%;height:7%}
.spx-command-panel[data-state="export"] .panel-visual i:nth-child(4){display:none}
.panel-copy small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.panel-copy h2{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(28px,2.8vw,42px);
  line-height:1;
  letter-spacing:-.065em;
}
.panel-copy p{
  color:var(--secondary);
  margin:14px 0 0;
  font-size:14px;
  line-height:1.55;
}
.panel-status{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:0 22px 22px;
  padding:12px 14px;
  border:1px solid rgba(107,232,255,.13);
  color:var(--secondary);
  font-size:12px;
  font-weight:850;
  background:rgba(255,255,255,.035);
}
.panel-status b{color:var(--cyan-2)}

.spx-orbit-node{
  position:absolute;
  z-index:5;
  width:176px;
  padding:14px 15px;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(5,11,23,.78);
  color:var(--secondary);
  cursor:pointer;
  clip-path:polygon(10% 0,100% 0,100% 78%,88% 100%,0 100%,0 18%);
  box-shadow:0 22px 60px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
html[data-theme="light"] .spx-orbit-node{
  background:rgba(255,255,255,.78);
  box-shadow:0 20px 48px rgba(22,34,64,.12);
}
.spx-orbit-node:hover,
.spx-orbit-node.is-active{
  transform:translateY(-4px);
  color:var(--text);
  border-color:rgba(107,232,255,.42);
  background:rgba(12,28,52,.86);
}
html[data-theme="light"] .spx-orbit-node:hover,
html[data-theme="light"] .spx-orbit-node.is-active{
  background:rgba(238,246,255,.92);
}
.spx-orbit-node span{
  display:block;
  color:var(--cyan-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  font-weight:950;
}
.spx-orbit-node b{
  display:block;
  margin-top:6px;
  color:inherit;
  font-size:15px;
}
.node-build{left:2%;top:7%}
.node-manage{right:1%;top:20%}
.node-export{right:12%;bottom:5%}

.spx-hero-v15 .spx-hero-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:250px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.28) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-hero-v15 .spx-hero-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v15 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV15Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.58}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.72}
}
@keyframes spxV15Nebula{
  from{opacity:.48;transform:rotate(-18deg) scale(1)}
  to{opacity:.68;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV15Cloud{
  from{opacity:.25;filter:blur(44px)}
  to{opacity:.42;filter:blur(54px)}
}
@keyframes spxV15Dash{to{stroke-dashoffset:-400}}

@media(max-width:1120px){
  .spx-nav-v15{grid-template-columns:auto auto 1fr}
  .spx-nav-v15 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v15 .site-nav{display:none}
  .spx-nav-v15.is-open .site-nav{
    display:grid;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    justify-content:stretch;
    border-radius:16px;
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v15.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v15.is-open .nav-actions{display:flex}
  .spx-nav-v15 .nav-group-mega .mega-menu,
  .spx-nav-v15 .resources-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-hero-v15 .spx-hero-shell{
    grid-template-columns:1fr;
    max-width:920px;
  }
  .spx-hero-v15 .spx-hero-copy{max-width:860px}
  .spx-orbit-interface{min-height:590px}
}
@media(max-width:760px){
  .spx-hero-v15{
    min-height:auto;
    padding:112px 18px 134px;
  }
  .spx-hero-v15 .spx-hero-copy h1{
    font-size:clamp(42px,13vw,66px);
  }
  .spx-hero-v15 .spx-hero-actions{display:grid}
  .spx-hero-v15 .spx-hero-proof{grid-template-columns:1fr}
  .spx-orbit-interface{min-height:640px}
  .spx-command-panel{
    left:0;
    top:92px;
    width:100%;
    min-height:420px;
    transform:none;
  }
  .spx-command-panel .panel-body{
    grid-template-columns:1fr;
  }
  .panel-visual{min-height:190px}
  .spx-orbit-node{width:150px}
  .node-build{left:0;top:0}
  .node-manage{right:0;top:30px}
  .node-export{right:6%;bottom:0}
  .spx-nav-v15 .nav-actions .btn.primary,
  .spx-nav-v15 .nav-actions .btn.ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .spx-hero-v15 .spx-nebula-plane::before,
  .spx-hero-v15 .spx-nebula-plane::after,
  .spx-hero-v15 .nebula-cloud,
  .spx-trajectory path{
    animation:none!important;
  }
}



/* ==========================================================================
   A8.16 — Cinematic Flow Hero + Strict Premium Navigator
   ========================================================================== */

.spx-nav-v15,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

.spx-nav-v16{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:110;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,30px);
  align-items:center;
  padding:18px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v16.is-scrolled,
.spx-nav-v16.is-open,
.spx-nav-v16:focus-within{
  padding-top:12px;
  padding-bottom:12px;
  background:rgba(3,8,17,.82)!important;
  border-bottom-color:rgba(218,236,255,.12);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.30);
}
html[data-theme="light"] .spx-nav-v16.is-scrolled,
html[data-theme="light"] .spx-nav-v16.is-open,
html[data-theme="light"] .spx-nav-v16:focus-within{
  background:rgba(246,248,252,.88)!important;
  border-bottom-color:rgba(15,23,42,.10);
  box-shadow:0 18px 54px rgba(22,34,64,.10);
}
.spx-nav-v16 .brand{
  padding:5px 9px 5px 5px;
  border-radius:10px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v16 .brand:hover{
  background:rgba(255,255,255,.055);
  transform:translateY(-1px);
}
.spx-nav-v16 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v16 .brand span{
  font-weight:950;
  letter-spacing:-.045em;
}
.spx-nav-v16 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:3px;
  padding:5px;
  border:1px solid rgba(218,236,255,.11);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="light"] .spx-nav-v16 .site-nav{
  background:rgba(255,255,255,.58);
  border-color:rgba(15,23,42,.08);
}
.spx-nav-v16 .site-nav>a,
.spx-nav-v16 .nav-group>a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  color:var(--text-soft);
  border:1px solid transparent;
  border-radius:8px;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.015em;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.spx-nav-v16 .site-nav>a:hover,
.spx-nav-v16 .nav-group:hover>a,
.spx-nav-v16 .nav-group>a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.105);
  border-color:rgba(107,232,255,.18);
  transform:translateY(-1px);
}
.spx-nav-v16 .nav-home-link::before{
  content:"";
  width:7px;height:7px;
  margin-right:9px;
  border-radius:2px;
  background:#18c9f5;
  box-shadow:0 0 16px rgba(24,201,245,.72);
}
.spx-nav-v16 .nav-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.spx-nav-v16 .nav-actions .btn,
.spx-nav-v16 .theme-toggle{
  min-height:42px;
  border-radius:10px;
  padding:9px 14px;
  font-weight:950;
  letter-spacing:-.015em;
}
.spx-nav-v16 .nav-actions .btn.ghost,
.spx-nav-v16 .theme-toggle{
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.045);
}
html[data-theme="light"] .spx-nav-v16 .nav-actions .btn.ghost,
html[data-theme="light"] .spx-nav-v16 .theme-toggle{
  background:rgba(255,255,255,.66);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v16 .nav-actions .btn.primary{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(135deg,#078fc2,#2563eb 62%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.spx-nav-v16 .nav-actions .btn.primary::after{
  content:"";
  position:absolute;
  inset:-70% -40%;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.32),transparent 65%);
  transform:translateX(-70%) rotate(12deg);
  transition:transform .7s var(--ease);
}
.spx-nav-v16 .nav-actions .btn.primary:hover::after{transform:translateX(70%) rotate(12deg)}
.spx-nav-v16 .nav-group-mega .mega-menu{
  width:min(920px,calc(100vw - 36px));
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(180deg,rgba(5,11,23,.97),rgba(4,9,18,.93)),
    radial-gradient(circle at 18% 0%,rgba(24,201,245,.10),transparent 34%);
  box-shadow:0 34px 110px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(24px) saturate(150%);
}
html[data-theme="light"] .spx-nav-v16 .nav-group-mega .mega-menu{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(246,248,252,.94));
  box-shadow:0 30px 80px rgba(22,34,64,.14);
}
.spx-nav-v16 .mega-intro,
.spx-nav-v16 .mega-card{
  border-radius:10px!important;
}
.spx-nav-v16 .mega-intro{
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.04);
}
.spx-nav-v16 .mega-card{
  padding:16px;
  background:rgba(255,255,255,.035);
  border-color:rgba(218,236,255,.09);
}
.spx-nav-v16 .mega-card:hover{
  transform:translateY(-3px);
  border-color:rgba(107,232,255,.24);
  background:rgba(24,201,245,.075);
}

/* New cinematic hero */
.spx-hero-v16{
  display:block!important;
  position:relative;
  min-height:clamp(850px,100svh,1100px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(134px,11vw,174px) var(--side) clamp(142px,13vw,200px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v16{background:#eef6ff}
.spx-hero-v16 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(760px 520px at 10% 78%,rgba(24,201,245,.09),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v16 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(760px 520px at 10% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v16-nebula{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v16-nebula::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:7%;
  height:88%;
  background:
    linear-gradient(112deg,
      transparent 0 31%,
      rgba(37,99,235,.04) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(22px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v16-x,0px) * .10),calc(var(--spx-v16-y,0px) * .08),0);
  opacity:.64;
  animation:spxV16Galaxy 30s ease-in-out infinite alternate;
}
.spx-v16-nebula::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.050),transparent 33%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.090),transparent 44%);
  filter:blur(38px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v16-x,0px) * .07),calc(var(--spx-v16-y,0px) * .05),0);
  opacity:.66;
  animation:spxV16Nebula 18s ease-in-out infinite alternate;
}
.spx-v16-nebula .nebula-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.32;
  filter:blur(50px);
  transform:translate3d(calc(var(--spx-v16-x,0px) * .13),calc(var(--spx-v16-y,0px) * .10),0);
  animation:spxV16Cloud 15s ease-in-out infinite alternate;
}
.spx-v16-nebula .cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.spx-v16-nebula .cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.spx-v16-nebula .cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.spx-v16-nebula .light-beam{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.24),transparent);
  transform:rotate(-18deg);
  opacity:.45;
}
.spx-v16-nebula .beam-a{left:4%;right:12%;top:42%}
.spx-v16-nebula .beam-b{left:18%;right:2%;top:56%;opacity:.25}

.spx-v16-shell{
  position:relative;
  z-index:5;
  width:min(1400px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(450px,.86fr) minmax(560px,1.14fr);
  gap:clamp(48px,6vw,96px);
  align-items:center;
}
.spx-v16-copy{
  max-width:640px;
}
.spx-v16-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v16-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v16-copy h1{
  margin:18px 0 0;
  font-size:clamp(56px,6.7vw,112px);
  line-height:.88;
  letter-spacing:-.095em;
  text-wrap:balance;
}
.spx-v16-copy h1::after{
  content:"";
  display:block;
  width:min(280px,44%);
  height:2px;
  margin-top:24px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 22px rgba(24,201,245,.42);
}
.spx-v16-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.55;
}
.spx-v16-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v16-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v16-actions .btn{
  border-radius:12px;
}
.spx-v16-metrics{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.spx-v16-metrics span{
  min-height:96px;
  padding:15px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(255,255,255,.035);
  color:var(--secondary);
  font-size:13px;
  font-weight:850;
  border-radius:10px;
}
html[data-theme="light"] .spx-v16-metrics span{
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.09);
}
.spx-v16-metrics b{
  display:block;
  margin-bottom:7px;
  color:var(--cyan-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}

.spx-v16-showcase{
  position:relative;
  min-height:610px;
  transform:translate3d(calc(var(--spx-v16-x,0px) * .32),calc(var(--spx-v16-y,0px) * .22),0);
}
.showcase-frame{
  position:absolute;
  inset:5% 0 6% 2%;
  border:1px solid rgba(107,232,255,.18);
  background:
    linear-gradient(135deg,rgba(255,255,255,.050),rgba(255,255,255,.016)),
    repeating-linear-gradient(90deg,rgba(107,232,255,.035) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(107,232,255,.026) 0 1px,transparent 1px 56px);
  clip-path:polygon(6% 0,100% 0,100% 86%,88% 100%,0 100%,0 9%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 46px 130px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(145%);
  padding:clamp(18px,2.2vw,30px);
}
html[data-theme="light"] .showcase-frame{
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(238,246,255,.44)),
    repeating-linear-gradient(90deg,rgba(14,165,233,.04) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(14,165,233,.03) 0 1px,transparent 1px 56px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 40px 110px rgba(22,34,64,.14);
}
.showcase-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(218,236,255,.10);
}
.showcase-header span{
  color:var(--secondary);
  font-weight:900;
  font-size:13px;
}
.showcase-header b{
  color:var(--cyan-2);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.flow-stage{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px;
}
.flow-step{
  all:unset;
  position:relative;
  z-index:2;
  min-height:150px;
  padding:18px;
  cursor:pointer;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(5,11,23,.72);
  clip-path:polygon(10% 0,100% 0,100% 82%,88% 100%,0 100%,0 14%);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}
html[data-theme="light"] .flow-step{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.10);
}
.flow-step:hover,
.flow-step.is-active{
  transform:translateY(-5px);
  border-color:rgba(107,232,255,.42);
  background:rgba(8,24,45,.86);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
html[data-theme="light"] .flow-step:hover,
html[data-theme="light"] .flow-step.is-active{
  background:rgba(238,246,255,.92);
  box-shadow:0 22px 56px rgba(22,34,64,.13);
}
.flow-step i{
  display:grid;
  place-items:center;
  width:38px;height:30px;
  border:1px solid rgba(107,232,255,.22);
  color:var(--cyan-2);
  font-style:normal;
  font-weight:950;
  font-size:11px;
  border-radius:6px;
}
.flow-step b{
  display:block;
  margin-top:18px;
  color:var(--text);
  font-size:18px;
  line-height:1.1;
}
.flow-step small{
  display:block;
  margin-top:8px;
  color:var(--secondary);
  font-size:12px;
  line-height:1.35;
}
.flow-connector{
  position:absolute;
  left:8%;
  right:8%;
  top:54%;
  height:2px;
  z-index:1;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);
}
.flow-connector span{
  position:absolute;
  top:50%;
  width:9px;height:9px;
  margin-top:-4px;
  border-radius:50%;
  background:#18c9f5;
  box-shadow:0 0 18px rgba(24,201,245,.72);
  animation:spxV16Pulse 2.8s ease-in-out infinite;
}
.flow-connector span:nth-child(1){left:14%}
.flow-connector span:nth-child(2){left:50%;animation-delay:-.9s}
.flow-connector span:nth-child(3){right:14%;animation-delay:-1.8s}

.flow-detail{
  margin-top:24px;
  min-height:210px;
  padding:26px;
  border:1px solid rgba(107,232,255,.15);
  background:
    radial-gradient(circle at 86% 18%,rgba(24,201,245,.12),transparent 36%),
    rgba(255,255,255,.040);
  clip-path:polygon(4% 0,100% 0,100% 84%,92% 100%,0 100%,0 10%);
}
html[data-theme="light"] .flow-detail{
  background:
    radial-gradient(circle at 86% 18%,rgba(14,165,233,.11),transparent 36%),
    rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.flow-detail small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.flow-detail h2{
  max-width:560px;
  margin:12px 0 0;
  font-size:clamp(30px,3.2vw,50px);
  line-height:1;
  letter-spacing:-.07em;
}
.flow-detail p{
  max-width:570px;
  margin:14px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.flow-output{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.flow-output span{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(107,232,255,.15);
  background:rgba(24,201,245,.07);
  color:var(--secondary);
  font-size:12px;
  font-weight:900;
}
.spx-v16-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:260px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.28) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v16-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v16 + .section.intro{
  margin-top:-54px;
  position:relative;
  z-index:5;
}

@keyframes spxV16Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV16Nebula{
  from{opacity:.46;transform:rotate(-18deg) scale(1)}
  to{opacity:.66;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV16Cloud{
  from{opacity:.24;filter:blur(46px)}
  to{opacity:.40;filter:blur(56px)}
}
@keyframes spxV16Pulse{
  0%,100%{opacity:.34;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.18)}
}

@media(max-width:1120px){
  .spx-nav-v16{grid-template-columns:auto auto 1fr}
  .spx-nav-v16 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v16 .site-nav{display:none}
  .spx-nav-v16.is-open .site-nav{
    display:grid;
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    justify-content:stretch;
    border-radius:12px;
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v16.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v16 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-v16-shell{
    grid-template-columns:1fr;
    max-width:940px;
  }
  .spx-v16-showcase{min-height:560px}
}
@media(max-width:760px){
  .spx-hero-v16{
    min-height:auto;
    padding:112px 18px 136px;
  }
  .spx-v16-copy h1{
    font-size:clamp(44px,13vw,70px);
  }
  .spx-v16-actions{display:grid}
  .spx-v16-metrics,
  .flow-stage{grid-template-columns:1fr}
  .spx-v16-showcase{min-height:auto}
  .showcase-frame{
    position:relative;
    inset:auto;
    clip-path:polygon(5% 0,100% 0,100% 94%,92% 100%,0 100%,0 4%);
  }
  .flow-step{min-height:104px}
  .flow-connector{display:none}
  .spx-nav-v16 .nav-actions .btn.primary,
  .spx-nav-v16 .nav-actions .btn.ghost{display:none}
}
@media(prefers-reduced-motion:reduce){
  .spx-v16-nebula::before,
  .spx-v16-nebula::after,
  .spx-v16-nebula .nebula-cloud,
  .flow-connector span{animation:none!important}
}



/* ==========================================================================
   A8.17 — Open cinematic hero + text-link navigator
   ========================================================================== */

/* Hide previous hero/nav experiments. */
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: no more blocks-in-blocks around normal links. */
.spx-nav-v17{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:120;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v17.is-scrolled,
.spx-nav-v17.is-open,
.spx-nav-v17:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.78)!important;
  border-bottom-color:rgba(218,236,255,.10);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.24);
}
html[data-theme="light"] .spx-nav-v17.is-scrolled,
html[data-theme="light"] .spx-nav-v17.is-open,
html[data-theme="light"] .spx-nav-v17:focus-within{
  background:rgba(246,248,252,.86)!important;
  border-bottom-color:rgba(15,23,42,.08);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v17 .brand{
  gap:10px;
  padding:0;
  border-radius:0;
  background:transparent;
}
.spx-nav-v17 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v17 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v17 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v17 .site-nav>a,
.spx-nav-v17 .nav-group>a{
  position:relative;
  min-height:0;
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-soft);
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v17 .site-nav>a::after,
.spx-nav-v17 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.38);
}
.spx-nav-v17 .site-nav>a:hover,
.spx-nav-v17 .nav-group:hover>a,
.spx-nav-v17 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v17 .site-nav>a:hover::after,
.spx-nav-v17 .nav-group:hover>a::after,
.spx-nav-v17 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v17 .nav-home-link::before{display:none!important}
.spx-nav-v17 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v17 .theme-toggle{
  min-height:40px;
  padding:8px 11px;
  border-radius:9px;
  border:1px solid rgba(218,236,255,.12);
  background:rgba(255,255,255,.035);
  font-weight:900;
}
.spx-nav-v17 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v17 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v17 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v17 .theme-toggle,
html[data-theme="light"] .spx-nav-v17 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}
.spx-nav-v17 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.91);
  box-shadow:0 34px 110px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(24px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v17 .nav-group-mega .mega-menu{
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 80px rgba(22,34,64,.13);
}
.spx-nav-v17 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.09);
  background:
    linear-gradient(90deg,rgba(24,201,245,.10),transparent 55%),
    rgba(255,255,255,.025);
}
.spx-nav-v17 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v17 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v17 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v17 .nav-panel-columns a{
  min-height:148px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.08);
  color:var(--secondary);
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v17 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v17 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v17 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v17 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* Hero: open cinematic composition, no blocky right widget. */
.spx-hero-v17{
  display:block!important;
  position:relative;
  min-height:clamp(850px,100svh,1120px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(142px,12vw,188px) var(--side) clamp(148px,14vw,210px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v17{background:#eef6ff}
.spx-hero-v17 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(820px 560px at 12% 76%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v17 .spx-hero-space{
  background:
    radial-gradient(900px 580px at 78% 15%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(820px 560px at 12% 76%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v17-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v17-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:5%;
  height:88%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v17-x,0px) * .10),calc(var(--spx-v17-y,0px) * .08),0);
  opacity:.62;
  animation:spxV17Galaxy 30s ease-in-out infinite alternate;
}
.spx-v17-sky::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 49% 53%,rgba(255,255,255,.045),transparent 34%),
    radial-gradient(ellipse at 52% 55%,rgba(107,232,255,.085),transparent 44%);
  filter:blur(40px);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v17-x,0px) * .07),calc(var(--spx-v17-y,0px) * .05),0);
  opacity:.62;
  animation:spxV17Nebula 18s ease-in-out infinite alternate;
}
.v17-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v17-x,0px) * .13),calc(var(--spx-v17-y,0px) * .10),0);
  animation:spxV17Cloud 15s ease-in-out infinite alternate;
}
.v17-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v17-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v17-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v17-horizon{
  position:absolute;
  left:6%;
  right:6%;
  bottom:14%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.28),transparent);
  box-shadow:0 0 42px rgba(24,201,245,.20);
}
.v17-orbit{
  position:absolute;
  border:1px solid rgba(107,232,255,.13);
  transform:rotate(-16deg) translate3d(calc(var(--spx-v17-x,0px) * -.06),calc(var(--spx-v17-y,0px) * -.05),0);
  opacity:.42;
}
.v17-orbit.orbit-a{right:4%;top:18%;width:760px;height:330px;border-radius:50%}
.v17-orbit.orbit-b{right:20%;bottom:16%;width:560px;height:240px;border-radius:50%;opacity:.25}

.spx-v17-shell{
  position:relative;
  z-index:5;
  width:min(1360px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(520px,.98fr) minmax(460px,1.02fr);
  gap:clamp(46px,6vw,96px);
  align-items:center;
}
.spx-v17-copy{
  max-width:680px;
}
.spx-v17-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v17-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v17-copy h1{
  margin:18px 0 0;
  max-width:740px;
  font-size:clamp(64px,8.3vw,138px);
  line-height:.84;
  letter-spacing:-.105em;
  text-wrap:balance;
}
.spx-v17-copy h1::after{
  content:"";
  display:block;
  width:min(320px,42%);
  height:2px;
  margin-top:28px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 24px rgba(24,201,245,.42);
}
.spx-v17-lead{
  margin:24px 0 0;
  max-width:570px;
  color:var(--text-soft);
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.52;
}
.spx-v17-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v17-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v17-actions .btn{
  border-radius:10px;
}

/* Right side: lightweight, open visual flow instead of boxed widget. */
.spx-v17-sequence{
  position:relative;
  min-height:560px;
  transform:translate3d(calc(var(--spx-v17-x,0px) * .32),calc(var(--spx-v17-y,0px) * .22),0);
}
.sequence-line{
  position:absolute;
  left:4%;
  right:4%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.46),rgba(37,99,235,.30),transparent);
  box-shadow:0 0 34px rgba(24,201,245,.20);
  transform:rotate(-10deg);
}
.sequence-step{
  all:unset;
  position:absolute;
  z-index:4;
  width:190px;
  min-height:118px;
  padding:18px;
  cursor:pointer;
  color:var(--secondary);
  border-left:1px solid rgba(107,232,255,.24);
  background:linear-gradient(90deg,rgba(5,11,23,.74),rgba(5,11,23,.18));
  backdrop-filter:blur(14px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
html[data-theme="light"] .sequence-step{
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.20));
}
.sequence-step:hover,
.sequence-step.is-active{
  color:var(--text);
  transform:translateY(-7px);
  border-left-color:rgba(107,232,255,.60);
  background:linear-gradient(90deg,rgba(10,28,52,.88),rgba(10,28,52,.22));
}
html[data-theme="light"] .sequence-step:hover,
html[data-theme="light"] .sequence-step.is-active{
  background:linear-gradient(90deg,rgba(238,246,255,.94),rgba(238,246,255,.30));
}
.sequence-step i{
  display:block;
  color:var(--cyan-2);
  font-style:normal;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.sequence-step b{
  display:block;
  margin-top:12px;
  color:inherit;
  font-size:25px;
  line-height:1;
  letter-spacing:-.05em;
}
.sequence-step span{
  display:block;
  margin-top:7px;
  font-size:13px;
  color:var(--secondary);
}
.sequence-step:nth-of-type(1){left:3%;top:17%}
.sequence-step:nth-of-type(2){left:38%;top:44%}
.sequence-step:nth-of-type(3){right:4%;top:20%}

.sequence-focus{
  position:absolute;
  right:3%;
  bottom:6%;
  z-index:3;
  width:min(440px,72%);
  padding:26px 0 0 26px;
  border-left:1px solid rgba(107,232,255,.20);
}
.sequence-focus small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.sequence-focus strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,3vw,48px);
  line-height:1;
  letter-spacing:-.07em;
}
.sequence-focus p{
  max-width:420px;
  margin:14px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.spx-v17-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:270px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.26) 38%,rgba(7,17,31,.82) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v17-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.86) 72%,#eef3fa 100%);
}
.spx-hero-v17 + .section.intro{
  margin-top:-56px;
  position:relative;
  z-index:5;
}

@keyframes spxV17Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.54}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.68}
}
@keyframes spxV17Nebula{
  from{opacity:.44;transform:rotate(-18deg) scale(1)}
  to{opacity:.62;transform:rotate(-16deg) scale(1.05)}
}
@keyframes spxV17Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}

@media(max-width:1120px){
  .spx-nav-v17{grid-template-columns:auto auto 1fr}
  .spx-nav-v17 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v17 .site-nav{display:none}
  .spx-nav-v17.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:rgba(4,10,22,.96);
  }
  html[data-theme="light"] .spx-nav-v17.is-open .site-nav{background:rgba(255,255,255,.96)}
  .spx-nav-v17 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v17 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
  .spx-v17-shell{
    grid-template-columns:1fr;
    max-width:940px;
  }
  .spx-v17-sequence{min-height:520px}
}
@media(max-width:760px){
  .spx-hero-v17{
    min-height:auto;
    padding:118px 18px 138px;
  }
  .spx-v17-copy h1{
    font-size:clamp(52px,16vw,78px);
  }
  .spx-v17-actions{display:grid}
  .spx-v17-sequence{min-height:620px}
  .sequence-step{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto;
    margin:12px 0;
  }
  .sequence-line{display:none}
  .sequence-focus{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    margin-top:24px;
  }
  .spx-nav-v17 .nav-actions .btn.primary,
  .spx-nav-v17 .nav-actions .btn.ghost{display:none}
  .spx-nav-v17 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v17 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v17-sky::before,
  .spx-v17-sky::after,
  .v17-cloud{animation:none!important}
}



/* ==========================================================================
   A8.18 — Central launch hero, opaque dropdowns, clear theme switch, animated grid
   ========================================================================== */

/* Hide earlier public hero/nav experiments. */
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: text links stay clean; dropdowns become opaque and easier to read. */
.spx-nav-v18{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:130;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v18.is-scrolled,
.spx-nav-v18.is-open,
.spx-nav-v18:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.84)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.26);
}
html[data-theme="light"] .spx-nav-v18.is-scrolled,
html[data-theme="light"] .spx-nav-v18.is-open,
html[data-theme="light"] .spx-nav-v18:focus-within{
  background:rgba(246,248,252,.90)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v18 .brand{
  gap:10px;
  padding:0;
  background:transparent;
}
.spx-nav-v18 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v18 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v18 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v18 .site-nav>a,
.spx-nav-v18 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v18 .site-nav>a::after,
.spx-nav-v18 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v18 .site-nav>a:hover,
.spx-nav-v18 .nav-group:hover>a,
.spx-nav-v18 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v18 .site-nav>a:hover::after,
.spx-nav-v18 .nav-group:hover>a::after,
.spx-nav-v18 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v18 .nav-home-link::before{display:none!important}
.spx-nav-v18 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v18 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v18 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v18 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v18 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}

/* Clear dark/light switch */
.spx-theme-switch{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px 7px 7px;
  border-radius:999px;
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--text-soft);
  font-weight:900;
  line-height:1;
}
html[data-theme="light"] .spx-theme-switch{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.spx-theme-switch .switch-track{
  position:relative;
  width:48px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(135deg,#111827,#0b1220);
  border:1px solid rgba(218,236,255,.12);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.28);
}
.spx-theme-switch .switch-track i{
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);
  box-shadow:0 0 16px rgba(147,197,253,.38);
  transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
html[data-theme="light"] .spx-theme-switch .switch-track{
  background:linear-gradient(135deg,#e0f2fe,#f8fafc);
  border-color:rgba(14,165,233,.18);
}
html[data-theme="light"] .spx-theme-switch .switch-track i{
  transform:translateX(22px);
  background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);
  box-shadow:0 0 18px rgba(245,158,11,.32);
}
.spx-theme-switch .switch-label{
  min-width:36px;
  text-align:left;
  font-size:12px;
}

/* Dropdown panels: opaque + blurred background behind them for readability. */
.spx-nav-v18 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:#050b17;
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v18 .nav-group-mega .mega-menu{
  background:#ffffff;
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v18 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v18 .nav-group-mega .mega-menu::before{
  background:rgba(246,248,252,.28);
}
.spx-nav-v18 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%);
}
html[data-theme="light"] .spx-nav-v18 .nav-panel-lead{
  border-bottom-color:rgba(15,23,42,.08);
  background:linear-gradient(90deg,rgba(14,165,233,.10),rgba(37,99,235,.05),transparent 70%);
}
.spx-nav-v18 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v18 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v18 .nav-panel-lead small{
  max-width:640px;
  color:var(--secondary);
  font-weight:760;
}
.spx-nav-v18 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v18 .nav-panel-columns a{
  min-height:154px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.09);
  color:var(--secondary);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
html[data-theme="light"] .spx-nav-v18 .nav-panel-columns a{
  border-right-color:rgba(15,23,42,.07);
}
.spx-nav-v18 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v18 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v18 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v18 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* Hero: real central re-composition, not left/right repeated layout. */
.spx-hero-v18{
  display:block!important;
  position:relative;
  min-height:clamp(900px,105svh,1180px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v18{background:#eef6ff}
.spx-hero-v18 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v18 .spx-hero-space{
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v18-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v18-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v18-x,0px) * .10),calc(var(--spx-v18-y,0px) * .08),0);
  opacity:.64;
  animation:spxV18Galaxy 30s ease-in-out infinite alternate;
}
.spx-v18-sky::after{
  content:"";
  position:absolute;
  inset:6% 0 0;
  background:
    linear-gradient(rgba(107,232,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v18-x,0px) * .18),calc(var(--spx-v18-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.36;
  animation:spxV18GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v18-sky::after{
  opacity:.25;
}
.v18-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v18-x,0px) * .13),calc(var(--spx-v18-y,0px) * .10),0);
  animation:spxV18Cloud 15s ease-in-out infinite alternate;
}
.v18-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v18-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v18-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v18-glow{
  position:absolute;
  width:34vw;
  height:34vw;
  border-radius:50%;
  filter:blur(34px);
  opacity:.16;
}
.v18-glow.glow-a{right:6%;top:18%;background:rgba(24,201,245,.28)}
.v18-glow.glow-b{left:8%;bottom:12%;background:rgba(37,99,235,.22)}
.v18-asset-placeholders{
  position:absolute;
  inset:0;
  z-index:2;
  transform:translate3d(calc(var(--spx-v18-x,0px) * .22),calc(var(--spx-v18-y,0px) * .15),0);
}
.asset-ghost{
  position:absolute;
  width:clamp(178px,14vw,238px);
  min-height:98px;
  padding:16px;
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(135deg,rgba(5,11,23,.62),rgba(5,11,23,.16));
  color:var(--secondary);
  opacity:.48;
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .asset-ghost{
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.20));
  border-color:rgba(14,165,233,.16);
  opacity:.56;
}
.asset-ghost b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.asset-ghost small{
  display:block;
  margin-top:7px;
  line-height:1.35;
}
.asset-canvas{right:10%;top:22%;transform:rotate(-4deg)}
.asset-settings{left:7%;bottom:30%;transform:rotate(3deg)}
.asset-export{right:18%;bottom:17%;transform:rotate(2deg)}

.spx-v18-shell{
  position:relative;
  z-index:5;
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  justify-items:center;
  text-align:center;
}
.spx-v18-copy{
  max-width:980px;
}
.spx-v18-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v18-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v18-copy h1{
  margin:20px auto 0;
  max-width:1050px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v18-copy h1::after{
  content:"";
  display:block;
  width:min(380px,38%);
  height:2px;
  margin:30px auto 0;
  background:linear-gradient(90deg,transparent,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v18-lead{
  margin:24px auto 0;
  max-width:720px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v18-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v18-actions{
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v18-actions .btn{border-radius:10px}

/* Launch path: open visual under headline, not a right-side block. */
.spx-launch-path{
  position:relative;
  width:min(1050px,100%);
  min-height:340px;
  margin-top:clamp(46px,6vw,76px);
  transform:translate3d(calc(var(--spx-v18-x,0px) * .24),calc(var(--spx-v18-y,0px) * .16),0);
}
.launch-rail{
  position:absolute;
  left:3%;
  right:3%;
  top:48%;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.54),rgba(37,99,235,.34),transparent);
  box-shadow:0 0 38px rgba(24,201,245,.24);
}
.launch-rail::before{
  content:"";
  position:absolute;
  inset:-90px 4%;
  border:1px solid rgba(107,232,255,.12);
  border-left:0;
  border-right:0;
  border-radius:50%;
  transform:rotate(-5deg);
}
.launch-point{
  all:unset;
  position:absolute;
  z-index:4;
  width:190px;
  min-height:110px;
  padding:18px;
  text-align:left;
  cursor:pointer;
  color:var(--secondary);
  border-left:1px solid rgba(107,232,255,.24);
  background:linear-gradient(90deg,rgba(5,11,23,.72),rgba(5,11,23,.08));
  backdrop-filter:blur(14px);
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
}
html[data-theme="light"] .launch-point{
  background:linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.16));
}
.launch-point:hover,
.launch-point.is-active{
  color:var(--text);
  transform:translateY(-8px);
  border-left-color:rgba(107,232,255,.60);
  background:linear-gradient(90deg,rgba(10,28,52,.88),rgba(10,28,52,.18));
}
html[data-theme="light"] .launch-point:hover,
html[data-theme="light"] .launch-point.is-active{
  background:linear-gradient(90deg,rgba(238,246,255,.94),rgba(238,246,255,.30));
}
.launch-point i{
  display:block;
  color:var(--cyan-2);
  font-style:normal;
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
}
.launch-point b{
  display:block;
  margin-top:12px;
  color:inherit;
  font-size:25px;
  line-height:1;
  letter-spacing:-.05em;
}
.launch-point span{
  display:block;
  margin-top:7px;
  font-size:13px;
  color:var(--secondary);
}
.point-build{left:4%;top:9%}
.point-organize{left:50%;top:36%;transform:translateX(-50%)}
.point-organize:hover,
.point-organize.is-active{transform:translateX(-50%) translateY(-8px)}
.point-export{right:4%;top:9%}
.launch-focus{
  position:absolute;
  left:50%;
  bottom:0;
  width:min(540px,86%);
  transform:translateX(-50%);
  padding-top:24px;
  border-top:1px solid rgba(107,232,255,.20);
  text-align:center;
}
.launch-focus small{
  color:var(--cyan-2);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}
.launch-focus strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,2.8vw,46px);
  line-height:1;
  letter-spacing:-.07em;
}
.launch-focus p{
  max-width:520px;
  margin:14px auto 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.56;
}
.launch-particles span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#18c9f5;
  box-shadow:0 0 20px rgba(24,201,245,.74);
  animation:spxV18Pulse 3.4s ease-in-out infinite;
}
.launch-particles span:nth-child(1){left:7%;top:47%}
.launch-particles span:nth-child(2){left:33%;top:46%;animation-delay:-.8s}
.launch-particles span:nth-child(3){right:33%;top:46%;animation-delay:-1.6s}
.launch-particles span:nth-child(4){right:7%;top:47%;animation-delay:-2.4s}

.spx-v18-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:290px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v18-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v18 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV18Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV18Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV18GridDrift{
  from{background-position:0 0,0 0;opacity:.26}
  50%{opacity:.42}
  to{background-position:72px 72px,72px 72px;opacity:.26}
}
@keyframes spxV18Pulse{
  0%,100%{opacity:.28;transform:scale(.75)}
  50%{opacity:1;transform:scale(1.15)}
}

@media(max-width:1120px){
  .spx-nav-v18{grid-template-columns:auto auto 1fr}
  .spx-nav-v18 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v18 .site-nav{display:none}
  .spx-nav-v18.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v18.is-open .site-nav{background:#fff}
  .spx-nav-v18 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v18 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v18{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v18-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v18-actions{display:grid}
  .asset-ghost{display:none}
  .spx-launch-path{
    min-height:620px;
    margin-top:44px;
  }
  .launch-rail{display:none}
  .launch-point{
    position:relative;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto;
    margin:12px 0;
  }
  .point-organize,
  .point-organize:hover,
  .point-organize.is-active{transform:none}
  .launch-focus{
    position:relative;
    left:auto;
    bottom:auto;
    width:auto;
    transform:none;
    margin-top:24px;
  }
  .launch-particles{display:none}
  .spx-nav-v18 .nav-actions .btn.primary,
  .spx-nav-v18 .nav-actions .btn.ghost{display:none}
  .spx-nav-v18 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v18 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v18-sky::before,
  .spx-v18-sky::after,
  .v18-cloud,
  .launch-particles span{animation:none!important}
}



/* ==========================================================================
   A8.19 — left-aligned hero, no workflow widget, no centered copy
   ========================================================================== */

.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator keeps A8.18 readability, but under v19 class. */
.spx-nav-v19{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:140;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.spx-nav-v19.is-scrolled,
.spx-nav-v19.is-open,
.spx-nav-v19:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.84)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:0 18px 64px rgba(0,0,0,.26);
}
html[data-theme="light"] .spx-nav-v19.is-scrolled,
html[data-theme="light"] .spx-nav-v19.is-open,
html[data-theme="light"] .spx-nav-v19:focus-within{
  background:rgba(246,248,252,.90)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v19 .brand{
  gap:10px;
  padding:0;
  background:transparent;
}
.spx-nav-v19 .brand img{
  width:38px;
  height:38px;
  border-radius:8px;
}
.spx-nav-v19 .brand span{
  font-weight:960;
  letter-spacing:-.045em;
}
.spx-nav-v19 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v19 .site-nav>a,
.spx-nav-v19 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v19 .site-nav>a::after,
.spx-nav-v19 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v19 .site-nav>a:hover,
.spx-nav-v19 .nav-group:hover>a,
.spx-nav-v19 .nav-group>a:focus-visible{
  color:var(--text);
  transform:translateY(-1px);
}
.spx-nav-v19 .site-nav>a:hover::after,
.spx-nav-v19 .nav-group:hover>a::after,
.spx-nav-v19 .nav-group>a:focus-visible::after{
  transform:scaleX(1);
}
.spx-nav-v19 .nav-home-link::before{display:none!important}
.spx-nav-v19 .nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.spx-nav-v19 .nav-actions .btn{
  min-height:40px;
  padding:8px 14px;
  border-radius:9px;
  font-weight:930;
}
.spx-nav-v19 .nav-actions .btn.ghost{
  background:transparent;
  border:1px solid rgba(218,236,255,.12);
}
.spx-nav-v19 .nav-actions .btn.primary{
  background:linear-gradient(135deg,#078fc2,#2563eb 64%,#18c9f5);
  box-shadow:0 14px 42px rgba(14,165,233,.23),inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="light"] .spx-nav-v19 .nav-actions .btn.ghost{
  background:rgba(255,255,255,.56);
  border-color:rgba(15,23,42,.09);
}

/* Keep clearer A8.18 theme switch under v19 nav. */
.spx-nav-v19 .spx-theme-switch{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 10px 7px 7px;
  border-radius:999px;
  border:1px solid rgba(218,236,255,.14);
  background:rgba(255,255,255,.055);
  color:var(--text-soft);
  font-weight:900;
  line-height:1;
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch{
  background:rgba(255,255,255,.68);
  border-color:rgba(15,23,42,.10);
}
.spx-nav-v19 .spx-theme-switch .switch-track{
  position:relative;
  width:48px;
  height:26px;
  border-radius:999px;
  background:linear-gradient(135deg,#111827,#0b1220);
  border:1px solid rgba(218,236,255,.12);
  box-shadow:inset 0 1px 5px rgba(0,0,0,.28);
}
.spx-nav-v19 .spx-theme-switch .switch-track i{
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);
  box-shadow:0 0 16px rgba(147,197,253,.38);
  transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease);
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch .switch-track{
  background:linear-gradient(135deg,#e0f2fe,#f8fafc);
  border-color:rgba(14,165,233,.18);
}
html[data-theme="light"] .spx-nav-v19 .spx-theme-switch .switch-track i{
  transform:translateX(22px);
  background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);
  box-shadow:0 0 18px rgba(245,158,11,.32);
}
.spx-nav-v19 .spx-theme-switch .switch-label{
  min-width:36px;
  text-align:left;
  font-size:12px;
}

/* Opaque dropdowns: readable, not transparent. */
.spx-nav-v19 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:#050b17;
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v19 .nav-group-mega .mega-menu{
  background:#ffffff;
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v19 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v19 .nav-group-mega .mega-menu::before{
  background:rgba(246,248,252,.28);
}
.spx-nav-v19 .nav-panel-lead{
  display:grid;
  gap:8px;
  padding:22px 24px;
  border-bottom:1px solid rgba(218,236,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%);
}
.spx-nav-v19 .nav-panel-lead span{
  color:var(--cyan-2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:950;
}
.spx-nav-v19 .nav-panel-lead strong{
  max-width:720px;
  color:var(--text);
  font-size:clamp(24px,2vw,34px);
  line-height:1.05;
  letter-spacing:-.06em;
}
.spx-nav-v19 .nav-panel-lead small{
  max-width:640px;
  color:var(--secondary);
  font-weight:760;
}
.spx-nav-v19 .nav-panel-columns{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spx-nav-v19 .nav-panel-columns a{
  min-height:154px;
  padding:22px;
  border-right:1px solid rgba(218,236,255,.09);
  color:var(--secondary);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v19 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v19 .nav-panel-columns a:hover{
  background:rgba(24,201,245,.075);
  transform:translateY(-2px);
}
.spx-nav-v19 .nav-panel-columns b{
  display:block;
  color:var(--text);
  font-size:15px;
}
.spx-nav-v19 .nav-panel-columns span{
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.4;
}

/* A8.19 hero: left-aligned copy; no Build/Organize/Export element. */
.spx-hero-v19{
  display:block!important;
  position:relative;
  min-height:clamp(870px,104svh,1180px);
  overflow:hidden;
  isolation:isolate;
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v19{background:#eef6ff}
.spx-hero-v19 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),
    linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v19 .spx-hero-space{
  background:
    radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v19-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v19-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:
    linear-gradient(112deg,
      transparent 0 30%,
      rgba(37,99,235,.040) 38%,
      rgba(24,201,245,.12) 45%,
      rgba(210,244,255,.17) 49%,
      rgba(82,181,230,.10) 54%,
      rgba(48,86,180,.05) 62%,
      transparent 73% 100%),
    radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),
    radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v19-x,0px) * .10),calc(var(--spx-v19-y,0px) * .08),0);
  opacity:.64;
  animation:spxV19Galaxy 30s ease-in-out infinite alternate;
}
.spx-v19-sky::after{
  content:"";
  position:absolute;
  inset:6% 0 0;
  background:
    linear-gradient(rgba(107,232,255,.050) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v19-x,0px) * .18),calc(var(--spx-v19-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.38;
  animation:spxV19GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v19-sky::after{opacity:.26}
.v19-cloud{
  position:absolute;
  display:block;
  border-radius:999px;
  opacity:.30;
  filter:blur(54px);
  transform:translate3d(calc(var(--spx-v19-x,0px) * .13),calc(var(--spx-v19-y,0px) * .10),0);
  animation:spxV19Cloud 15s ease-in-out infinite alternate;
}
.v19-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v19-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v19-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v19-horizon{
  position:absolute;
  left:6%;
  right:6%;
  bottom:22%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);
  box-shadow:0 0 48px rgba(24,201,245,.24);
}
.v19-grid-plane{
  position:absolute;
  left:3%;
  right:3%;
  bottom:0;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);
  background-size:64px 64px;
  transform:perspective(900px) rotateX(66deg);
  transform-origin:center bottom;
  opacity:.22;
  animation:spxV19GridDrift 20s linear infinite reverse;
  mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%);
}
.v19-product-fragments{
  position:absolute;
  inset:0;
  z-index:2;
  transform:translate3d(calc(var(--spx-v19-x,0px) * .22),calc(var(--spx-v19-y,0px) * .15),0);
}
.fragment{
  position:absolute;
  width:clamp(188px,15vw,255px);
  min-height:104px;
  padding:16px;
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(135deg,rgba(5,11,23,.56),rgba(5,11,23,.12));
  color:var(--secondary);
  opacity:.46;
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .fragment{
  background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(255,255,255,.20));
  border-color:rgba(14,165,233,.16);
  opacity:.56;
}
.fragment b{
  display:block;
  color:var(--text);
  font-size:13px;
}
.fragment small{
  display:block;
  margin-top:7px;
  line-height:1.35;
}
.fragment-canvas{right:8%;top:24%;transform:rotate(-4deg)}
.fragment-settings{right:22%;bottom:28%;transform:rotate(3deg)}
.fragment-export{right:4%;bottom:14%;transform:rotate(2deg)}

.spx-v19-shell{
  position:relative;
  z-index:5;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v19-copy{
  max-width:min(760px,64vw);
}
.spx-v19-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v19-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v19-copy h1{
  margin:20px 0 0;
  max-width:920px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v19-copy h1::after{
  content:"";
  display:block;
  width:min(380px,46%);
  height:2px;
  margin-top:30px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v19-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v19-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v19-actions{
  justify-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v19-actions .btn{border-radius:10px}

.spx-v19-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:290px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v19-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v19 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV19Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV19Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV19GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}

@media(max-width:1120px){
  .spx-nav-v19{grid-template-columns:auto auto 1fr}
  .spx-nav-v19 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v19 .site-nav{display:none}
  .spx-nav-v19.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v19.is-open .site-nav{background:#fff}
  .spx-nav-v19 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v19 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
  .spx-v19-copy{max-width:780px}
}
@media(max-width:760px){
  .spx-hero-v19{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v19-copy{max-width:100%}
  .spx-v19-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v19-actions{display:grid}
  .fragment{display:none}
  .spx-nav-v19 .nav-actions .btn.primary,
  .spx-nav-v19 .nav-actions .btn.ghost{display:none}
  .spx-nav-v19 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v19 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v19-sky::before,
  .spx-v19-sky::after,
  .v19-cloud,
  .v19-grid-plane{animation:none!important}
}


/* ==========================================================================
   A8.20 — hero product stage (option B), transparent nav, softer nav buttons
   ========================================================================== */
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator keeps the transparent top state and becomes readable only on scroll/open. */
.spx-nav-v20{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:140;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v20.is-scrolled,
.spx-nav-v20.is-open,
.spx-nav-v20:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v20.is-scrolled,
html[data-theme="light"] .spx-nav-v20.is-open,
html[data-theme="light"] .spx-nav-v20:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v20 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v20 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v20 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v20 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;border:0;background:transparent;box-shadow:none;
}
.spx-nav-v20 .site-nav>a,
.spx-nav-v20 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;border:0;border-radius:0;
  font-weight:900;font-size:14px;letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v20 .site-nav>a::after,
.spx-nav-v20 .nav-group>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v20 .site-nav>a:hover,
.spx-nav-v20 .nav-group:hover>a,
.spx-nav-v20 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v20 .site-nav>a:hover::after,
.spx-nav-v20 .nav-group:hover>a::after,
.spx-nav-v20 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v20 .nav-home-link::before{display:none!important}
.spx-nav-v20 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v20 .nav-actions .btn{
  min-height:38px;
  padding:8px 14px;
  font-weight:930;
  border-radius:999px;
}
.spx-nav-v20 .nav-actions .btn.ghost{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--text-soft);
}
.spx-nav-v20 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v20 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v20 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v20 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v20 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v20 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v20 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v20 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

.spx-nav-v20 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;
  border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.95);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden;
}
html[data-theme="light"] .spx-nav-v20 .nav-group-mega .mega-menu{background:rgba(255,255,255,.95);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v20 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v20 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v20 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v20 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v20 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v20 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v20 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v20 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v20 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v20 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v20 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v20 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: Option B — canvas workspace as base, details cycle inside one integrated stage. */
.spx-hero-v20{
  display:block!important;position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);background:#02050d;
}
html[data-theme="light"] .spx-hero-v20{background:#eef6ff}
.spx-hero-v20 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v20 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v20-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v20-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);filter:blur(24px) saturate(125%);transform:rotate(-18deg) translate3d(calc(var(--spx-v20-x,0px) * .10),calc(var(--spx-v20-y,0px) * .08),0);opacity:.64;animation:spxV20Galaxy 30s ease-in-out infinite alternate}
.spx-v20-sky::after{content:"";position:absolute;inset:7% 0 0;background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);background-size:72px 72px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v20-x,0px) * .18),calc(var(--spx-v20-y,0px) * .10),0);transform-origin:center bottom;opacity:.32;animation:spxV20GridDrift 18s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v20-sky::after{opacity:.22}
.v20-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v20-x,0px) * .13),calc(var(--spx-v20-y,0px) * .10),0);animation:spxV20Cloud 15s ease-in-out infinite alternate}
.v20-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v20-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v20-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v20-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v20-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.20;animation:spxV20GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v20-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.32;filter:blur(.2px);animation:spxV20Trace 10s linear infinite}
.v20-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v20-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

.spx-v20-shell{position:relative;z-index:5;width:min(1360px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(560px,640px);align-items:center;gap:clamp(28px,4vw,68px)}
.spx-v20-copy{max-width:620px;justify-self:start}
.spx-v20-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v20-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v20-copy h1{margin:20px 0 0;max-width:860px;font-size:clamp(66px,9vw,150px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}
.spx-v20-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v20-lead{margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52}
.spx-v20-lead strong{color:var(--text);font-weight:950}
.spx-v20-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.spx-v20-actions .btn{border-radius:999px}

.spx-v20-stage{width:min(640px,100%);justify-self:end;position:relative}
.stage-shell{position:relative;padding:18px;border:1px solid rgba(107,232,255,.12);background:linear-gradient(180deg,rgba(6,14,29,.72),rgba(3,8,17,.66));backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 34px 110px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.02) inset}
html[data-theme="light"] .stage-shell{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(248,250,255,.62));border-color:rgba(14,165,233,.14);box-shadow:0 30px 80px rgba(22,34,64,.12),0 0 0 1px rgba(255,255,255,.55) inset}
.stage-shell::before{content:"";position:absolute;inset:-20% auto auto -18%;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(24,201,245,.20),rgba(24,201,245,0));filter:blur(20px);pointer-events:none}
.stage-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.stage-meta span{display:block;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:950}
.stage-meta strong{display:block;color:var(--text);font-size:22px;line-height:1;letter-spacing:-.06em}
.stage-frame{position:relative;min-height:430px;border:1px solid rgba(107,232,255,.14);background:rgba(2,6,14,.72);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="light"] .stage-frame{background:rgba(255,255,255,.62);border-color:rgba(14,165,233,.12)}
.stage-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.98;transform:scale(1.02)}
.stage-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.03) 46%,rgba(2,6,14,.15) 100%),radial-gradient(circle at 82% 16%,rgba(24,201,245,.08),transparent 28%);pointer-events:none}
.stage-pane{position:absolute;opacity:0;transform:translateY(18px) scale(.98);transition:opacity .45s var(--ease), transform .45s var(--ease);pointer-events:none;z-index:3;border:1px solid rgba(107,232,255,.16);background:rgba(4,10,20,.88);box-shadow:0 22px 54px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden}
.stage-pane img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.stage-pane.is-active{opacity:1;transform:translateY(0) scale(1)}
.stage-pane[data-stage-pane="settings"]{right:20px;top:28px;width:210px;height:360px}
.stage-pane[data-stage-pane="export"]{left:34px;right:34px;bottom:26px;height:230px}
.stage-pane[data-stage-pane="add"]{left:20px;top:34px;width:250px;height:300px}
.stage-pane-export img{object-position:center top}
.stage-pane-add img{object-position:left top}
.stage-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.stage-tabs button{appearance:none;border:0;background:transparent;color:var(--text-soft);font:inherit;font-weight:900;font-size:13px;letter-spacing:-.01em;padding:0 0 4px;position:relative;cursor:pointer}
.stage-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.stage-tabs button:hover,.stage-tabs button.is-active{color:var(--text)}
.stage-tabs button.is-active::after,.stage-tabs button:hover::after{transform:scaleX(1)}
.stage-caption{margin-top:14px;max-width:520px}
.stage-caption small{display:block;color:var(--cyan-2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:950}
.stage-caption strong{display:block;margin-top:10px;color:var(--text);font-size:clamp(24px,2.2vw,34px);line-height:1.03;letter-spacing:-.06em}
.stage-caption p{margin-top:10px;color:var(--secondary);font-size:14px;line-height:1.56}

.spx-v20-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:290px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v20-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v20 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV20Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}}
@keyframes spxV20Cloud{from{opacity:.22;filter:blur(48px)}to{opacity:.38;filter:blur(58px)}}
@keyframes spxV20GridDrift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes spxV20Trace{from{transform:translateX(-28px);opacity:0}20%{opacity:.34}80%{opacity:.34}to{transform:translateX(28px);opacity:0}}

@media (max-width:1200px){
  .spx-v20-shell{grid-template-columns:minmax(0,1fr);justify-items:start}
  .spx-v20-stage{width:min(760px,100%);justify-self:start}
}
@media(max-width:1120px){
  .spx-nav-v20{grid-template-columns:auto auto 1fr}
  .spx-nav-v20 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v20 .site-nav{display:none}
  .spx-nav-v20.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}
  html[data-theme="light"] .spx-nav-v20.is-open .site-nav{background:#fff}
  .spx-nav-v20 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v20 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v20{min-height:auto;padding:118px 18px 148px}
  .spx-v20-copy{max-width:100%}
  .spx-v20-copy h1{font-size:clamp(52px,16vw,80px)}
  .spx-v20-actions{display:grid}
  .spx-nav-v20 .nav-actions .btn.primary,.spx-nav-v20 .nav-actions .btn.ghost{display:none}
  .spx-nav-v20 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v20 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
  .stage-shell{padding:14px}
  .stage-frame{min-height:310px}
  .stage-pane[data-stage-pane="settings"]{right:10px;top:16px;width:132px;height:226px}
  .stage-pane[data-stage-pane="export"]{left:12px;right:12px;bottom:12px;height:150px}
  .stage-pane[data-stage-pane="add"]{left:10px;top:16px;width:154px;height:200px}
  .stage-caption strong{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .spx-v20-sky::before,.spx-v20-sky::after,.v20-cloud,.v20-grid-plane,.v20-light-trace{animation:none!important}
}


/* ==========================================================================
   A8.21 — corrected Option B: real Spixor UI integrated into hero background
   ========================================================================== */

.spx-nav-v20,
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v20,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: transparent at top, not blocky, readable after scroll/open. */
.spx-nav-v21{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v21.is-scrolled,
.spx-nav-v21.is-open,
.spx-nav-v21:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v21.is-scrolled,
html[data-theme="light"] .spx-nav-v21.is-open,
html[data-theme="light"] .spx-nav-v21:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v21 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v21 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v21 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v21 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.spx-nav-v21 .site-nav>a,
.spx-nav-v21 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  font-weight:900;
  font-size:14px;
  letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v21 .site-nav>a::after,
.spx-nav-v21 .nav-group>a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v21 .site-nav>a:hover,
.spx-nav-v21 .nav-group:hover>a,
.spx-nav-v21 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v21 .site-nav>a:hover::after,
.spx-nav-v21 .nav-group:hover>a::after,
.spx-nav-v21 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v21 .nav-home-link::before{display:none!important}
.spx-nav-v21 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v21 .nav-actions .btn{
  min-height:38px;
  padding:8px 14px;
  font-weight:930;
  border-radius:999px;
}
.spx-nav-v21 .nav-actions .btn.ghost{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--text-soft);
}
.spx-nav-v21 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v21 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v21 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v21 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v21 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v21 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v21 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v21 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

/* Dropdowns: opaque and readable with blur behind. */
.spx-nav-v21 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));
  padding:0;
  border-radius:0;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(5,11,23,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  overflow:hidden;
}
html[data-theme="light"] .spx-nav-v21 .nav-group-mega .mega-menu{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(22,34,64,.16);
}
.spx-nav-v21 .nav-group-mega .mega-menu::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(2,6,23,.24);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
html[data-theme="light"] .spx-nav-v21 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v21 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v21 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v21 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v21 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v21 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v21 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v21 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v21 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v21 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v21 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: real Spixor UI is integrated into the atmosphere, not a right-side tab/card. */
.spx-hero-v21{
  display:block!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v21{background:#eef6ff}
.spx-hero-v21 .spx-hero-space{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v21 .spx-hero-space{
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v21-sky{
  position:absolute;
  inset:-10% -8%;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.spx-v21-sky::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:2%;
  height:92%;
  background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v21-x,0px) * .10),calc(var(--spx-v21-y,0px) * .08),0);
  opacity:.64;
  animation:spxV21Galaxy 30s ease-in-out infinite alternate;
}
.spx-v21-sky::after{
  content:"";
  position:absolute;
  inset:7% 0 0;
  background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v21-x,0px) * .18),calc(var(--spx-v21-y,0px) * .10),0);
  transform-origin:center bottom;
  opacity:.32;
  animation:spxV21GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v21-sky::after{opacity:.22}
.v21-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v21-x,0px) * .13),calc(var(--spx-v21-y,0px) * .10),0);animation:spxV21Cloud 15s ease-in-out infinite alternate}
.v21-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v21-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v21-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v21-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v21-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.20;animation:spxV21GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v21-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.32;filter:blur(.2px);animation:spxV21Trace 10s linear infinite}
.v21-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v21-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* Product atmosphere: canvas is the background base; detail views switch inside the same visual space. */
.v21-product-atmosphere{
  position:absolute;
  right:-6vw;
  top:17%;
  width:min(880px,58vw);
  height:min(590px,52vw);
  z-index:2;
  transform:perspective(1400px) rotateY(-12deg) rotateX(4deg) translate3d(calc(var(--spx-v21-x,0px) * .22),calc(var(--spx-v21-y,0px) * .16),0);
  transform-origin:center;
  opacity:.78;
  filter:drop-shadow(0 44px 110px rgba(0,0,0,.38));
}
.v21-product-atmosphere::before{
  content:"";
  position:absolute;
  inset:-7%;
  background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.18),transparent 62%);
  filter:blur(22px);
  opacity:.66;
}
.v21-product-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(2,5,13,.78),rgba(2,5,13,.16) 35%,rgba(2,5,13,.12) 74%,rgba(2,5,13,.56)),linear-gradient(180deg,rgba(2,5,13,.12),rgba(2,5,13,.46));
  z-index:7;
  pointer-events:none;
}
html[data-theme="light"] .v21-product-atmosphere::after{
  background:linear-gradient(90deg,rgba(238,246,255,.54),rgba(238,246,255,.12) 40%,rgba(238,246,255,.08) 75%,rgba(238,246,255,.38)),linear-gradient(180deg,rgba(238,246,255,.05),rgba(238,246,255,.34));
}
.v21-builder-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
  border:1px solid rgba(107,232,255,.18);
  opacity:.92;
  filter:saturate(1.08) contrast(1.05);
  clip-path:polygon(4% 0,100% 0,100% 90%,91% 100%,0 100%,0 7%);
}
.v21-product-layer{
  position:absolute;
  z-index:4;
  border:1px solid rgba(107,232,255,.22);
  background:#050b17;
  box-shadow:0 28px 80px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035) inset;
  opacity:0;
  overflow:hidden;
  transform:translateY(18px) scale(.985);
  animation:spxV21ProductSwitch 12s ease-in-out infinite;
}
.v21-product-layer img,
.v21-product-layer{display:block}
.v21-product-layer{
  object-fit:cover;
  object-position:center top;
}
.layer-settings{
  right:5.5%;
  top:8%;
  width:34%;
  height:76%;
  object-position:center top;
  animation-delay:0s;
}
.layer-export{
  left:10%;
  right:7%;
  bottom:6%;
  width:auto;
  height:46%;
  object-position:center top;
  animation-delay:4s;
}
.layer-add{
  left:1.5%;
  top:10.5%;
  width:39%;
  height:76%;
  object-position:left top;
  animation-delay:8s;
}
.v21-product-label{
  position:absolute;
  z-index:8;
  padding:7px 9px;
  color:#c9f7ff;
  border:1px solid rgba(107,232,255,.20);
  background:rgba(5,11,23,.62);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}
.label-canvas{left:7%;top:7%}
.label-context{right:8%;bottom:7%}
html[data-theme="light"] .v21-product-label{
  color:#075985;
  background:rgba(255,255,255,.62);
  border-color:rgba(14,165,233,.18);
}

/* Copy remains left-aligned. Product visuals live behind/right as cinematic atmosphere. */
.spx-v21-shell{
  position:relative;
  z-index:5;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v21-copy{
  max-width:min(720px,62vw);
}
.spx-v21-kicker{
  display:inline-flex;
  align-items:center;
  padding:8px 11px;
  border:1px solid rgba(107,232,255,.20);
  border-radius:7px;
  background:rgba(24,201,245,.08);
  color:#bff4ff;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html[data-theme="light"] .spx-v21-kicker{
  color:#075985;
  background:rgba(14,165,233,.09);
  border-color:rgba(14,165,233,.20);
}
.spx-v21-copy h1{
  margin:20px 0 0;
  max-width:920px;
  font-size:clamp(66px,9.5vw,154px);
  line-height:.82;
  letter-spacing:-.11em;
  text-wrap:balance;
}
.spx-v21-copy h1::after{
  content:"";
  display:block;
  width:min(380px,46%);
  height:2px;
  margin-top:30px;
  background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);
  box-shadow:0 0 26px rgba(24,201,245,.42);
}
.spx-v21-lead{
  margin:24px 0 0;
  max-width:610px;
  color:var(--text-soft);
  font-size:clamp(18px,1.35vw,23px);
  line-height:1.52;
}
.spx-v21-lead strong{
  color:var(--text);
  font-weight:950;
}
.spx-v21-actions{
  justify-content:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.spx-v21-actions .btn{border-radius:999px}

.spx-v21-bottom-fade{
  position:absolute;
  left:0;right:0;bottom:-1px;
  z-index:3;
  height:300px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v21-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v21 + .section.intro{
  margin-top:-58px;
  position:relative;
  z-index:5;
}

@keyframes spxV21Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV21Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV21GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}
@keyframes spxV21Trace{
  from{transform:translateX(-28px);opacity:0}
  20%{opacity:.34}
  80%{opacity:.34}
  to{transform:translateX(28px);opacity:0}
}
@keyframes spxV21ProductSwitch{
  0%,5%{opacity:0;transform:translateY(18px) scale(.985)}
  10%,28%{opacity:.86;transform:translateY(0) scale(1)}
  33%,100%{opacity:0;transform:translateY(-12px) scale(.985)}
}

@media(max-width:1200px){
  .v21-product-atmosphere{
    right:-22vw;
    width:900px;
    height:600px;
    opacity:.50;
  }
  .spx-v21-copy{max-width:760px}
}
@media(max-width:1120px){
  .spx-nav-v21{grid-template-columns:auto auto 1fr}
  .spx-nav-v21 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v21 .site-nav{display:none}
  .spx-nav-v21.is-open .site-nav{
    display:grid;
    position:absolute;
    left:18px;
    right:18px;
    top:calc(100% + 10px);
    justify-content:stretch;
    gap:6px;
    padding:16px;
    border:1px solid rgba(218,236,255,.10);
    background:#050b17;
  }
  html[data-theme="light"] .spx-nav-v21.is-open .site-nav{background:#fff}
  .spx-nav-v21 .nav-group-mega .mega-menu{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    transform:none;
    margin-top:8px;
  }
  .spx-nav-v21 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .spx-hero-v21{
    min-height:auto;
    padding:118px 18px 148px;
  }
  .spx-v21-copy{max-width:100%}
  .spx-v21-copy h1{
    font-size:clamp(52px,16vw,80px);
  }
  .spx-v21-actions{display:grid}
  .v21-product-atmosphere{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    height:310px;
    margin-top:38px;
    opacity:.70;
    transform:none;
  }
  .spx-v21-shell{display:block}
  .layer-settings{right:5%;top:8%;width:35%;height:74%}
  .layer-export{left:7%;right:7%;height:44%;bottom:6%}
  .layer-add{left:2%;top:10%;width:40%;height:72%}
  .v21-product-label{display:none}
  .spx-nav-v21 .nav-actions .btn.primary,
  .spx-nav-v21 .nav-actions .btn.ghost{display:none}
  .spx-nav-v21 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v21 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v21-sky::before,
  .spx-v21-sky::after,
  .v21-cloud,
  .v21-grid-plane,
  .v21-light-trace,
  .v21-product-layer{animation:none!important}
  .layer-settings{opacity:.80!important;transform:none!important}
}


/* ==========================================================================
   A8.22 — centered cinematic product background, stronger but subtler balance
   ========================================================================== */

.spx-nav-v21,
.spx-nav-v20,
.spx-nav-v19,
.spx-nav-v18,
.spx-nav-v17,
.spx-nav-v16,
.spx-nav-v15,
.spx-hero-v21,
.spx-hero-v20,
.spx-hero-v19,
.spx-hero-v18,
.spx-hero-v17,
.spx-hero-v16,
.spx-hero-v15,
.spx-hero-v13,
.spx-hero-v12,
.hero.spx-aurora-hero{display:none!important}

/* Navigator: transparent at the top, blur only when needed, less blocky buttons. */
.spx-nav-v22{
  display:grid!important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding:24px var(--side);
  background:transparent!important;
  border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v22.is-scrolled,
.spx-nav-v22.is-open,
.spx-nav-v22:focus-within{
  padding-top:14px;
  padding-bottom:14px;
  background:rgba(3,8,17,.76)!important;
  border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v22.is-scrolled,
html[data-theme="light"] .spx-nav-v22.is-open,
html[data-theme="light"] .spx-nav-v22:focus-within{
  background:rgba(246,248,252,.84)!important;
  border-bottom-color:rgba(15,23,42,.09);
  box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v22 .brand{gap:10px;padding:0;background:transparent}
.spx-nav-v22 .brand img{width:38px;height:38px;border-radius:8px}
.spx-nav-v22 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v22 .site-nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:clamp(18px,2.6vw,34px);
  padding:0;border:0;background:transparent;box-shadow:none;
}
.spx-nav-v22 .site-nav>a,
.spx-nav-v22 .nav-group>a{
  position:relative;
  padding:7px 0;
  color:var(--text-soft);
  background:transparent;border:0;border-radius:0;
  font-weight:900;font-size:14px;letter-spacing:-.01em;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.spx-nav-v22 .site-nav>a::after,
.spx-nav-v22 .nav-group>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
  box-shadow:0 0 16px rgba(24,201,245,.36);
}
.spx-nav-v22 .site-nav>a:hover,
.spx-nav-v22 .nav-group:hover>a,
.spx-nav-v22 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v22 .site-nav>a:hover::after,
.spx-nav-v22 .nav-group:hover>a::after,
.spx-nav-v22 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v22 .nav-home-link::before{display:none!important}
.spx-nav-v22 .nav-actions{display:flex;align-items:center;gap:10px}
.spx-nav-v22 .nav-actions .btn{
  min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px;
}
.spx-nav-v22 .nav-actions .btn.ghost{
  background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft);
}
.spx-nav-v22 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v22 .nav-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
}
html[data-theme="light"] .spx-nav-v22 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}

.spx-nav-v22 .spx-theme-switch{
  min-height:38px;display:inline-flex;align-items:center;gap:9px;
  padding:7px 10px 7px 7px;border-radius:999px;
  border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);
  color:var(--text-soft);font-weight:900;line-height:1;
}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v22 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v22 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v22 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v22 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}

.spx-nav-v22 .nav-group-mega .mega-menu{
  width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;
  border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.96);
  box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden;
}
html[data-theme="light"] .spx-nav-v22 .nav-group-mega .mega-menu{background:rgba(255,255,255,.96);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v22 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v22 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v22 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v22 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}
.spx-nav-v22 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}
.spx-nav-v22 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v22 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v22 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v22 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v22 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}
.spx-nav-v22 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}
.spx-nav-v22 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

/* Hero: centered cinematic product background, subtle but still visible. */
.spx-hero-v22{
  display:block!important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:clamp(900px,104svh,1180px);
  padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);
  color:var(--text);
  background:#02050d;
}
html[data-theme="light"] .spx-hero-v22{background:#eef6ff}
.spx-hero-v22 .spx-hero-space{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%);
}
html[data-theme="light"] .spx-hero-v22 .spx-hero-space{
  background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%);
}
.spx-v22-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v22-sky::before{
  content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;
  background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);
  filter:blur(24px) saturate(125%);
  transform:rotate(-18deg) translate3d(calc(var(--spx-v22-x,0px) * .10),calc(var(--spx-v22-y,0px) * .08),0);
  opacity:.64;animation:spxV22Galaxy 30s ease-in-out infinite alternate;
}
.spx-v22-sky::after{
  content:"";position:absolute;inset:7% 0 0;
  background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);
  background-size:72px 72px;
  transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v22-x,0px) * .18),calc(var(--spx-v22-y,0px) * .10),0);
  transform-origin:center bottom;opacity:.26;animation:spxV22GridDrift 18s linear infinite;
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-v22-sky::after{opacity:.18}
.v22-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v22-x,0px) * .13),calc(var(--spx-v22-y,0px) * .10),0);animation:spxV22Cloud 15s ease-in-out infinite alternate}
.v22-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v22-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v22-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v22-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v22-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.16;animation:spxV22GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v22-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.28;filter:blur(.2px);animation:spxV22Trace 10s linear infinite}
.v22-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}
.v22-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* Product visuals are centered in the atmosphere, not pushed to the right. */
.v22-product-atmosphere{
  position:absolute;
  left:50%;
  top:56%;
  width:min(1080px,74vw);
  height:min(650px,46vw);
  z-index:2;
  transform:translate(-18%,-18%) perspective(1550px) rotateY(-9deg) rotateX(5deg) translate3d(calc(var(--spx-v22-x,0px) * .20),calc(var(--spx-v22-y,0px) * .14),0);
  transform-origin:center;
  opacity:.64;
  filter:drop-shadow(0 46px 120px rgba(0,0,0,.34));
}
.v22-product-atmosphere::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),transparent 62%);
  filter:blur(26px);
  opacity:.62;
}
.v22-product-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.20) 30%,rgba(2,5,13,.08) 52%,rgba(2,5,13,.18) 75%,rgba(2,5,13,.66) 100%),
    linear-gradient(180deg,rgba(2,5,13,.26),rgba(2,5,13,.06) 22%,rgba(2,5,13,.18) 78%,rgba(2,5,13,.46));
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06);
}
html[data-theme="light"] .v22-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.78) 0%,rgba(238,246,255,.44) 14%,rgba(238,246,255,.12) 32%,rgba(238,246,255,.06) 52%,rgba(238,246,255,.12) 76%,rgba(238,246,255,.48) 100%),
    linear-gradient(180deg,rgba(238,246,255,.22),rgba(238,246,255,.05) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.34));
}
.v22-builder-base{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border:1px solid rgba(107,232,255,.16);
  opacity:.86;
  filter:saturate(1.04) contrast(1.03);
  clip-path:polygon(4% 0,100% 0,100% 92%,92% 100%,0 100%,0 7%);
}
.v22-product-layer{
  position:absolute;
  z-index:5;
  border:1px solid rgba(107,232,255,.22);
  background:#050b17;
  box-shadow:0 24px 72px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
}
.v22-product-layer.layer-settings{
  right:7.2%;
  top:8.8%;
  width:30%;
  height:72%;
  opacity:.72;
  transform:translateY(0) scale(1);
}
.v22-product-layer.layer-settings img,
.v22-product-layer.layer-export img,
.v22-product-layer.layer-add img{
  display:block;
  width:100%;
  height:100%;
}
.v22-product-layer.layer-settings img{object-fit:cover;object-position:center top}
.v22-product-layer.layer-add{
  left:3.8%;
  top:8.2%;
  width:33%;
  height:73%;
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:spxV22LayerAdd 12s ease-in-out infinite;
}
.v22-product-layer.layer-add img{object-fit:cover;object-position:left top}
.v22-product-layer.layer-export{
  left:11%;
  right:9%;
  bottom:7%;
  width:auto;
  height:44%;
  opacity:0;
  transform:translateY(18px) scale(.985);
  animation:spxV22LayerExport 12s ease-in-out infinite;
}
.v22-product-layer.layer-export img{object-fit:cover;object-position:center top}

.spx-v22-shell{
  position:relative;
  z-index:6;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  justify-items:start;
  text-align:left;
}
.spx-v22-copy{max-width:min(700px,60vw)}
.spx-v22-kicker{
  display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase
}
html[data-theme="light"] .spx-v22-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v22-copy h1{
  margin:20px 0 0;max-width:920px;font-size:clamp(66px,9.5vw,154px);line-height:.82;letter-spacing:-.11em;text-wrap:balance
}
.spx-v22-copy h1::after{
  content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)
}
.spx-v22-lead{
  margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52
}
.spx-v22-lead strong{color:var(--text);font-weight:950}
.spx-v22-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.spx-v22-actions .btn{border-radius:999px}

.spx-v22-bottom-fade{
  position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%);
}
html[data-theme="light"] .spx-v22-bottom-fade{
  background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%);
}
.spx-hero-v22 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV22Galaxy{
  from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}
  to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}
}
@keyframes spxV22Cloud{
  from{opacity:.22;filter:blur(48px)}
  to{opacity:.38;filter:blur(58px)}
}
@keyframes spxV22GridDrift{
  from{background-position:0 0,0 0}
  to{background-position:72px 72px,72px 72px}
}
@keyframes spxV22Trace{
  from{transform:translateX(-28px);opacity:0}
  20%{opacity:.32}
  80%{opacity:.32}
  to{transform:translateX(28px);opacity:0}
}
@keyframes spxV22LayerAdd{
  0%,8%{opacity:0;transform:translateY(18px) scale(.985)}
  14%,34%{opacity:.78;transform:translateY(0) scale(1)}
  40%,100%{opacity:0;transform:translateY(-10px) scale(.985)}
}
@keyframes spxV22LayerExport{
  0%,54%{opacity:0;transform:translateY(18px) scale(.985)}
  60%,80%{opacity:.82;transform:translateY(0) scale(1)}
  86%,100%{opacity:0;transform:translateY(-10px) scale(.985)}
}

@media(max-width:1200px){
  .v22-product-atmosphere{
    width:980px;
    height:590px;
    transform:translate(-22%,-16%) perspective(1450px) rotateY(-8deg) rotateX(4deg) translate3d(calc(var(--spx-v22-x,0px) * .16),calc(var(--spx-v22-y,0px) * .12),0);
    opacity:.56;
  }
  .spx-v22-copy{max-width:760px}
}
@media(max-width:1120px){
  .spx-nav-v22{grid-template-columns:auto auto 1fr}
  .spx-nav-v22 .nav-toggle{display:block;order:3;justify-self:end}
  .spx-nav-v22 .site-nav{display:none}
  .spx-nav-v22.is-open .site-nav{
    display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17
  }
  html[data-theme="light"] .spx-nav-v22.is-open .site-nav{background:#fff}
  .spx-nav-v22 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v22 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .v22-product-atmosphere{
    left:50%;
    top:64%;
    width:min(720px,92vw);
    height:min(430px,54vw);
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-5deg) rotateX(3deg);
    opacity:.60;
  }
  .spx-v22-copy{max-width:100%}
}
@media(max-width:760px){
  .spx-hero-v22{min-height:auto;padding:118px 18px 148px}
  .spx-v22-copy h1{font-size:clamp(52px,16vw,80px)}
  .spx-v22-actions{display:grid}
  .v22-product-atmosphere{
    top:auto;bottom:8%;
    width:100%;
    height:280px;
    transform:translate(-50%,0) perspective(1000px) rotateY(-4deg) rotateX(3deg);
    opacity:.56;
  }
  .spx-nav-v22 .nav-actions .btn.primary,.spx-nav-v22 .nav-actions .btn.ghost{display:none}
  .spx-nav-v22 .nav-panel-columns{grid-template-columns:1fr}
  .spx-nav-v22 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){
  .spx-v22-sky::before,.spx-v22-sky::after,.v22-cloud,.v22-grid-plane,.v22-light-trace,.v22-product-layer.layer-add,.v22-product-layer.layer-export{animation:none!important}
  .v22-product-layer.layer-add,.v22-product-layer.layer-export{opacity:0!important}
}


/* A8.22 object-fit correction for image layers */
.v22-product-layer{display:block;width:100%;height:100%}
.v22-product-layer.layer-settings{object-fit:cover;object-position:center top}
.v22-product-layer.layer-add{object-fit:cover;object-position:left top}
.v22-product-layer.layer-export{object-fit:cover;object-position:center top}


/* ==========================================================================
   A8.24 — revert to the previous placement, raise the right side, avoid clipping
   ========================================================================== */
.spx-nav-v24{
  display:grid!important;position:fixed;top:0;left:0;right:0;z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,42px);align-items:center;
  padding:24px var(--side);background:transparent!important;border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v24.is-scrolled,.spx-nav-v24.is-open,.spx-nav-v24:focus-within{
  padding-top:14px;padding-bottom:14px;background:rgba(3,8,17,.76)!important;border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v24.is-scrolled,html[data-theme="light"] .spx-nav-v24.is-open,html[data-theme="light"] .spx-nav-v24:focus-within{
  background:rgba(246,248,252,.84)!important;border-bottom-color:rgba(15,23,42,.09);box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v24 .brand{gap:10px;padding:0;background:transparent}.spx-nav-v24 .brand img{width:38px;height:38px;border-radius:8px}.spx-nav-v24 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v24 .site-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:0;border:0;background:transparent;box-shadow:none}
.spx-nav-v24 .site-nav>a,.spx-nav-v24 .nav-group>a{position:relative;padding:7px 0;color:var(--text-soft);background:transparent;border:0;border-radius:0;font-weight:900;font-size:14px;letter-spacing:-.01em;transition:color .2s var(--ease), transform .2s var(--ease)}
.spx-nav-v24 .site-nav>a::after,.spx-nav-v24 .nav-group>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);box-shadow:0 0 16px rgba(24,201,245,.36)}
.spx-nav-v24 .site-nav>a:hover,.spx-nav-v24 .nav-group:hover>a,.spx-nav-v24 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v24 .site-nav>a:hover::after,.spx-nav-v24 .nav-group:hover>a::after,.spx-nav-v24 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v24 .nav-home-link::before{display:none!important}
.spx-nav-v24 .nav-actions{display:flex;align-items:center;gap:10px}.spx-nav-v24 .nav-actions .btn{min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px}
.spx-nav-v24 .nav-actions .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}
.spx-nav-v24 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v24 .nav-actions .btn.primary{background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);border:1px solid rgba(125,220,255,.18)}
html[data-theme="light"] .spx-nav-v24 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}
.spx-nav-v24 .spx-theme-switch{min-height:38px;display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:999px;border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);color:var(--text-soft);font-weight:900;line-height:1}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v24 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v24 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v24 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v24 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}
.spx-nav-v24 .nav-group-mega .mega-menu{width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.96);box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);overflow:hidden}
html[data-theme="light"] .spx-nav-v24 .nav-group-mega .mega-menu{background:rgba(255,255,255,.96);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v24 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v24 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.28)}
.spx-nav-v24 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.10),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v24 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}.spx-nav-v24 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}.spx-nav-v24 .nav-panel-lead small{max-width:640px;color:var(--secondary);font-weight:760}
.spx-nav-v24 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.spx-nav-v24 .nav-panel-columns a{min-height:154px;padding:22px;border-right:1px solid rgba(218,236,255,.09);color:var(--secondary);background:transparent;transition:background .2s var(--ease), transform .2s var(--ease)}.spx-nav-v24 .nav-panel-columns a:last-child{border-right:0}.spx-nav-v24 .nav-panel-columns a:hover{background:rgba(24,201,245,.075);transform:translateY(-2px)}.spx-nav-v24 .nav-panel-columns b{display:block;color:var(--text);font-size:15px}.spx-nav-v24 .nav-panel-columns span{display:block;margin-top:8px;font-size:13px;line-height:1.4}

.spx-hero-v24{display:block!important;position:relative;overflow:hidden;isolation:isolate;min-height:clamp(900px,104svh,1180px);padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);color:var(--text);background:#02050d}
html[data-theme="light"] .spx-hero-v24{background:#eef6ff}
.spx-hero-v24 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.15),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.10),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v24 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.10),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.08),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v24-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v24-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:2%;height:92%;background:linear-gradient(112deg,transparent 0 30%,rgba(37,99,235,.04) 38%,rgba(24,201,245,.12) 45%,rgba(210,244,255,.17) 49%,rgba(82,181,230,.10) 54%,rgba(48,86,180,.05) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.09),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.045),transparent 42%);filter:blur(24px) saturate(125%);transform:rotate(-18deg) translate3d(calc(var(--spx-v24-x,0px) * .10),calc(var(--spx-v24-y,0px) * .08),0);opacity:.64;animation:spxV24Galaxy 30s ease-in-out infinite alternate}
.spx-v24-sky::after{content:"";position:absolute;inset:7% 0 0;background:linear-gradient(rgba(107,232,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.038) 1px,transparent 1px);background-size:72px 72px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v24-x,0px) * .18),calc(var(--spx-v24-y,0px) * .10),0);transform-origin:center bottom;opacity:.26;animation:spxV24GridDrift 18s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v24-sky::after{opacity:.18}
.v24-cloud{position:absolute;display:block;border-radius:999px;opacity:.30;filter:blur(54px);transform:translate3d(calc(var(--spx-v24-x,0px) * .13),calc(var(--spx-v24-y,0px) * .10),0);animation:spxV24Cloud 15s ease-in-out infinite alternate}
.v24-cloud.cloud-a{left:2%;top:63%;width:42vw;height:12vw;background:rgba(107,232,255,.09)}
.v24-cloud.cloud-b{right:4%;top:18%;width:38vw;height:11vw;background:rgba(37,99,235,.12);animation-delay:-3s}
.v24-cloud.cloud-c{left:42%;top:43%;width:36vw;height:10vw;background:rgba(185,135,255,.055);animation-delay:-6s}
.v24-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.32),transparent);box-shadow:0 0 48px rgba(24,201,245,.24)}
.v24-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.040) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.16;animation:spxV24GridDrift 20s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v24-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.52),transparent);opacity:.28;filter:blur(.2px);animation:spxV24Trace 10s linear infinite}.v24-light-trace.trace-a{left:48%;width:22%;top:28%;animation-delay:-1s}.v24-light-trace.trace-b{right:8%;width:18%;top:64%;animation-delay:-6s}

/* previous placement, but raised slightly; no image clipping */
.v24-product-atmosphere{position:absolute;left:50%;top:52%;width:min(1080px,74vw);height:min(650px,46vw);z-index:2;transform:translate(-18%,-18%) perspective(1550px) rotateY(-9deg) rotateX(5deg) translate3d(calc(var(--spx-v24-x,0px) * .20),calc(var(--spx-v24-y,0px) * .14),0);transform-origin:center;opacity:.64;filter:drop-shadow(0 46px 120px rgba(0,0,0,.34))}
.v24-product-atmosphere::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),transparent 62%);filter:blur(26px);opacity:.62}
.v24-product-atmosphere::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.20) 30%,rgba(2,5,13,.08) 52%,rgba(2,5,13,.18) 75%,rgba(2,5,13,.66) 100%),linear-gradient(180deg,rgba(2,5,13,.26),rgba(2,5,13,.06) 22%,rgba(2,5,13,.18) 78%,rgba(2,5,13,.46));box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)}
html[data-theme="light"] .v24-product-atmosphere::after{background:linear-gradient(90deg,rgba(238,246,255,.78) 0%,rgba(238,246,255,.44) 14%,rgba(238,246,255,.12) 32%,rgba(238,246,255,.06) 52%,rgba(238,246,255,.12) 76%,rgba(238,246,255,.48) 100%),linear-gradient(180deg,rgba(238,246,255,.22),rgba(238,246,255,.05) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.34))}
.v24-builder-base{position:absolute;inset:2% 3%;width:auto;height:auto;object-fit:contain;object-position:center top;border:1px solid rgba(107,232,255,.16);opacity:.88;filter:saturate(1.04) contrast(1.03);clip-path:none;background:rgba(5,11,23,.50);padding:6px;box-shadow:0 20px 64px rgba(0,0,0,.16)}
.v24-product-layer{position:absolute;z-index:5;border:1px solid rgba(107,232,255,.22);background:rgba(5,11,23,.88);box-shadow:0 24px 72px rgba(0,0,0,.32),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden;padding:6px}
.v24-product-layer.layer-settings{right:6.6%;top:4.2%;width:30%;height:74%;opacity:.74;transform:translateY(0) scale(1)}
.v24-product-layer.layer-settings,
.v24-product-layer.layer-add,
.v24-product-layer.layer-export{display:block;object-fit:contain;background:rgba(5,11,23,.84)}
.v24-product-layer.layer-add{left:3.4%;top:7.2%;width:33%;height:75%;opacity:0;transform:translateY(18px) scale(.985);animation:spxV24LayerAdd 12s ease-in-out infinite}
/* export is detached from the builder, positioned more like a dashboard scene */
.v24-product-layer.layer-export{right:2%;left:auto;bottom:-1.5%;width:38%;height:36%;opacity:0;transform:translateY(18px) scale(.985);animation:spxV24LayerExport 12s ease-in-out infinite}

.spx-v24-shell{position:relative;z-index:6;width:min(1340px,100%);margin:0 auto;display:grid;justify-items:start;text-align:left}.spx-v24-copy{max-width:min(700px,60vw)}
.spx-v24-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v24-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v24-copy h1{margin:20px 0 0;max-width:920px;font-size:clamp(66px,9.5vw,154px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}.spx-v24-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v24-lead{margin:24px 0 0;max-width:590px;color:var(--text-soft);font-size:clamp(18px,1.35vw,23px);line-height:1.52}.spx-v24-lead strong{color:var(--text);font-weight:950}.spx-v24-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.spx-v24-actions .btn{border-radius:999px}
.spx-v24-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v24-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v24 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV24Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.56}to{transform:rotate(-16deg) translate3d(1.2%,-.8%,0) scale(1.12);opacity:.70}}
@keyframes spxV24Cloud{from{opacity:.22;filter:blur(48px)}to{opacity:.38;filter:blur(58px)}}
@keyframes spxV24GridDrift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
@keyframes spxV24Trace{from{transform:translateX(-28px);opacity:0}20%{opacity:.32}80%{opacity:.32}to{transform:translateX(28px);opacity:0}}
@keyframes spxV24LayerAdd{0%,8%{opacity:0;transform:translateY(18px) scale(.985)}14%,34%{opacity:.78;transform:translateY(0) scale(1)}40%,100%{opacity:0;transform:translateY(-10px) scale(.985)}}
@keyframes spxV24LayerExport{0%,54%{opacity:0;transform:translateY(18px) scale(.985)}60%,80%{opacity:.82;transform:translateY(0) scale(1)}86%,100%{opacity:0;transform:translateY(-10px) scale(.985)}}

@media(max-width:1200px){.v24-product-atmosphere{width:980px;height:590px;top:55%;transform:translate(-22%,-16%) perspective(1450px) rotateY(-8deg) rotateX(4deg) translate3d(calc(var(--spx-v24-x,0px) * .16),calc(var(--spx-v24-y,0px) * .12),0);opacity:.56}.spx-v24-copy{max-width:760px}}
@media(max-width:1120px){.spx-nav-v24{grid-template-columns:auto auto 1fr}.spx-nav-v24 .nav-toggle{display:block;order:3;justify-self:end}.spx-nav-v24 .site-nav{display:none}.spx-nav-v24.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}html[data-theme="light"] .spx-nav-v24.is-open .site-nav{background:#fff}.spx-nav-v24 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}.spx-nav-v24 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.v24-product-atmosphere{left:50%;top:64%;width:min(720px,92vw);height:min(430px,54vw);transform:translate(-50%,-10%) perspective(1200px) rotateY(-5deg) rotateX(3deg);opacity:.60}.spx-v24-copy{max-width:100%}.v24-product-layer.layer-export{right:4%;width:42%;height:30%;bottom:-2%}}
@media(max-width:760px){.spx-hero-v24{min-height:auto;padding:118px 18px 148px}.spx-v24-copy h1{font-size:clamp(52px,16vw,80px)}.spx-v24-actions{display:grid}.v24-product-atmosphere{top:auto;bottom:8%;width:100%;height:280px;transform:translate(-50%,0) perspective(1000px) rotateY(-4deg) rotateX(3deg);opacity:.56}.v24-product-layer.layer-export{width:56%;height:26%;right:2%;bottom:-1%}.spx-nav-v24 .nav-actions .btn.primary,.spx-nav-v24 .nav-actions .btn.ghost{display:none}.spx-nav-v24 .nav-panel-columns{grid-template-columns:1fr}.spx-nav-v24 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}}
@media(prefers-reduced-motion:reduce){.spx-v24-sky::before,.spx-v24-sky::after,.v24-cloud,.v24-grid-plane,.v24-light-trace,.v24-product-layer.layer-add,.v24-product-layer.layer-export{animation:none!important}.v24-product-layer.layer-add,.v24-product-layer.layer-export{opacity:0!important}}


/* ==========================================================================
   A8.25 — hero balance / clarity tune
   ========================================================================== */

/* Left block: give the copy area more room. */
.spx-v24-shell{width:min(1380px,100%)}
.spx-v24-copy{max-width:min(790px,66vw)}
.spx-v24-copy h1{max-width:1040px}
.spx-v24-lead{max-width:640px}

/* Match the hero primary CTA hover feel to the navigator CTA. */
.spx-nav-v24 .nav-actions .btn.primary,
.spx-v24-actions .btn.primary{
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.spx-nav-v24 .nav-actions .btn.primary:hover,
.spx-v24-actions .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.03);
}

/* Right side: move a little higher, make it clearer and calmer. */
.v24-product-atmosphere{
  top:48.8%;
  width:min(1100px,75vw);
  height:min(670px,47vw);
  opacity:.74;
  transform:translate(-18%,-18%) perspective(1550px) rotateY(-7deg) rotateX(4deg) translate3d(calc(var(--spx-v24-x,0px) * .18),calc(var(--spx-v24-y,0px) * .12),0);
}
.v24-product-atmosphere::before{
  opacity:.48;
}
.v24-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(2,5,13,.88) 0%,rgba(2,5,13,.62) 12%,rgba(2,5,13,.28) 30%,rgba(2,5,13,.14) 50%,rgba(2,5,13,.18) 72%,rgba(2,5,13,.58) 100%),
    linear-gradient(180deg,rgba(2,5,13,.22),rgba(2,5,13,.06) 22%,rgba(2,5,13,.12) 78%,rgba(2,5,13,.40));
}
html[data-theme="light"] .v24-product-atmosphere::after{
  background:
    linear-gradient(90deg,rgba(238,246,255,.82) 0%,rgba(238,246,255,.56) 14%,rgba(238,246,255,.22) 32%,rgba(238,246,255,.10) 52%,rgba(238,246,255,.14) 76%,rgba(238,246,255,.46) 100%),
    linear-gradient(180deg,rgba(238,246,255,.20),rgba(238,246,255,.06) 22%,rgba(238,246,255,.12) 78%,rgba(238,246,255,.30));
}

/* Base panel clearer, still atmospheric. */
.v24-builder-base{
  inset:1.6% 2.4%;
  opacity:.94;
  padding:8px;
  background:rgba(6,12,25,.74);
  box-shadow:0 22px 72px rgba(0,0,0,.18);
}
html[data-theme="light"] .v24-builder-base{
  background:rgba(255,255,255,.84);
}

/* Panels: less overlap/noisy feel, stronger separation, more readable. */
.v24-product-layer{
  padding:8px;
  border-color:rgba(125,220,255,.24);
  background:rgba(6,12,25,.96);
  box-shadow:0 28px 76px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.04) inset;
}
html[data-theme="light"] .v24-product-layer{
  background:rgba(255,255,255,.95);
  box-shadow:0 22px 58px rgba(22,34,64,.16), 0 0 0 1px rgba(15,23,42,.04) inset;
}
.v24-product-layer.layer-settings{
  right:5.4%;
  top:2.2%;
  width:31%;
  height:75%;
  opacity:.84;
}
.v24-product-layer.layer-add{
  left:2.6%;
  top:6.4%;
  width:32.5%;
  height:74%;
}
.v24-product-layer.layer-export{
  right:0.8%;
  bottom:-3.2%;
  width:35%;
  height:34%;
}

/* Make the animated alternates calmer and clearer. */
@keyframes spxV24LayerAdd{
  0%,10%{opacity:0;transform:translateY(16px) scale(.985)}
  16%,36%{opacity:.68;transform:translateY(0) scale(1)}
  42%,100%{opacity:0;transform:translateY(-8px) scale(.985)}
}
@keyframes spxV24LayerExport{
  0%,56%{opacity:0;transform:translateY(16px) scale(.985)}
  62%,82%{opacity:.76;transform:translateY(0) scale(1)}
  88%,100%{opacity:0;transform:translateY(-8px) scale(.985)}
}

@media(max-width:1200px){
  .spx-v24-copy{max-width:min(760px,68vw)}
  .v24-product-atmosphere{
    top:52.2%;
    width:1000px;
    height:600px;
    opacity:.68;
  }
}
@media(max-width:900px){
  .spx-v24-copy{max-width:100%}
  .v24-product-atmosphere{
    top:61.5%;
    width:min(740px,94vw);
    height:min(450px,56vw);
    opacity:.68;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-4deg) rotateX(2.5deg);
  }
  .v24-product-layer.layer-settings{right:4%;top:2%;width:32%;height:72%}
  .v24-product-layer.layer-export{width:38%;height:31%;right:2%;bottom:-3%}
}
@media(max-width:760px){
  .spx-v24-copy h1{font-size:clamp(54px,16vw,84px)}
  .spx-v24-lead{max-width:520px}
  .v24-product-atmosphere{
    bottom:9%;
    height:292px;
    opacity:.64;
  }
  .v24-product-layer.layer-settings{right:4%;top:4%;width:31%;height:68%}
  .v24-product-layer.layer-export{right:2%;bottom:-2%;width:48%;height:25%}
}


/* ==========================================================================
   A8.26 — hero message clarity, calmer product side, livelier background
   ========================================================================== */

.spx-nav-v26,
.spx-hero-v26{display:block}

/* Navigator */
.spx-nav-v26{
  display:grid!important;position:fixed;top:0;left:0;right:0;z-index:150;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,42px);align-items:center;
  padding:24px var(--side);background:transparent!important;border-bottom:1px solid transparent;
  transition:padding .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), backdrop-filter .28s var(--ease);
}
.spx-nav-v26.is-scrolled,.spx-nav-v26.is-open,.spx-nav-v26:focus-within{
  padding-top:14px;padding-bottom:14px;background:rgba(3,8,17,.74)!important;border-bottom-color:rgba(218,236,255,.11);
  backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 64px rgba(0,0,0,.22);
}
html[data-theme="light"] .spx-nav-v26.is-scrolled,html[data-theme="light"] .spx-nav-v26.is-open,html[data-theme="light"] .spx-nav-v26:focus-within{
  background:rgba(246,248,252,.86)!important;border-bottom-color:rgba(15,23,42,.09);box-shadow:0 18px 54px rgba(22,34,64,.09);
}
.spx-nav-v26 .brand{gap:10px;padding:0;background:transparent}.spx-nav-v26 .brand img{width:38px;height:38px;border-radius:8px}.spx-nav-v26 .brand span{font-weight:960;letter-spacing:-.045em}
.spx-nav-v26 .site-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);padding:0;border:0;background:transparent;box-shadow:none}
.spx-nav-v26 .site-nav>a,.spx-nav-v26 .nav-group>a{
  position:relative;padding:8px 0;color:var(--text-soft);background:transparent!important;border:0;border-radius:0;box-shadow:none;
  font-weight:900;font-size:14px;letter-spacing:-.01em;transition:color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.spx-nav-v26 .site-nav>a::after,.spx-nav-v26 .nav-group>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#18c9f5,#2563eb);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);box-shadow:0 0 16px rgba(24,201,245,.36)}
.spx-nav-v26 .site-nav>a:hover,.spx-nav-v26 .nav-group:hover>a,.spx-nav-v26 .nav-group>a:focus-visible{color:var(--text);transform:translateY(-1px)}
.spx-nav-v26 .site-nav>a:hover::after,.spx-nav-v26 .nav-group:hover>a::after,.spx-nav-v26 .nav-group>a:focus-visible::after{transform:scaleX(1)}
.spx-nav-v26 .nav-home-link::before{display:none!important}
.spx-nav-v26 .nav-actions{display:flex;align-items:center;gap:10px}.spx-nav-v26 .nav-actions .btn{min-height:38px;padding:8px 14px;font-weight:930;border-radius:999px}
.spx-nav-v26 .nav-actions .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-soft)}
.spx-nav-v26 .nav-actions .btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.05)}
.spx-nav-v26 .nav-actions .btn.primary,
.spx-v26-actions .btn.primary{
  background:linear-gradient(135deg,rgba(7,143,194,.92),rgba(37,99,235,.92) 64%,rgba(24,201,245,.95));
  box-shadow:0 14px 42px rgba(14,165,233,.20), inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(125,220,255,.18);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}
.spx-nav-v26 .nav-actions .btn.primary:hover,
.spx-v26-actions .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(14,165,233,.28), inset 0 1px 0 rgba(255,255,255,.22);
  filter:brightness(1.03);
}
html[data-theme="light"] .spx-nav-v26 .nav-actions .btn.ghost:hover{background:rgba(15,23,42,.04)}
.spx-nav-v26 .spx-theme-switch{min-height:38px;display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 7px;border-radius:999px;border:1px solid rgba(218,236,255,.14);background:rgba(255,255,255,.055);color:var(--text-soft);font-weight:900;line-height:1}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch{background:rgba(255,255,255,.68);border-color:rgba(15,23,42,.10)}
.spx-nav-v26 .spx-theme-switch .switch-track{position:relative;width:48px;height:26px;border-radius:999px;background:linear-gradient(135deg,#111827,#0b1220);border:1px solid rgba(218,236,255,.12);box-shadow:inset 0 1px 5px rgba(0,0,0,.28)}
.spx-nav-v26 .spx-theme-switch .switch-track i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#93c5fd 55%,#2563eb);box-shadow:0 0 16px rgba(147,197,253,.38);transition:transform .24s var(--ease), background .24s var(--ease), box-shadow .24s var(--ease)}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch .switch-track{background:linear-gradient(135deg,#e0f2fe,#f8fafc);border-color:rgba(14,165,233,.18)}
html[data-theme="light"] .spx-nav-v26 .spx-theme-switch .switch-track i{transform:translateX(22px);background:radial-gradient(circle at 35% 35%,#fff7cc,#facc15 58%,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.32)}
.spx-nav-v26 .spx-theme-switch .switch-label{min-width:36px;text-align:left;font-size:12px}
.spx-nav-v26 .nav-group-mega .mega-menu{width:min(980px,calc(100vw - 42px));padding:0;border-radius:0;border:1px solid rgba(107,232,255,.18);background:rgba(5,11,23,.97);box-shadow:0 34px 110px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);overflow:hidden}
html[data-theme="light"] .spx-nav-v26 .nav-group-mega .mega-menu{background:rgba(255,255,255,.98);border-color:rgba(15,23,42,.10);box-shadow:0 30px 80px rgba(22,34,64,.16)}
.spx-nav-v26 .nav-group-mega .mega-menu::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(2,6,23,.26);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}
html[data-theme="light"] .spx-nav-v26 .nav-group-mega .mega-menu::before{background:rgba(246,248,252,.30)}
.spx-nav-v26 .nav-panel-lead{display:grid;gap:8px;padding:22px 24px;border-bottom:1px solid rgba(218,236,255,.10);background:linear-gradient(90deg,rgba(24,201,245,.11),rgba(37,99,235,.05),transparent 70%)}
.spx-nav-v26 .nav-panel-lead span{color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:950}.spx-nav-v26 .nav-panel-lead strong{max-width:720px;color:var(--text);font-size:clamp(24px,2vw,34px);line-height:1.05;letter-spacing:-.06em}.spx-nav-v26 .nav-panel-lead small{max-width:660px;color:var(--secondary);font-weight:760}
.spx-nav-v26 .nav-panel-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.spx-nav-v26 .nav-panel-columns a{
  position:relative;display:grid;align-content:start;gap:8px;min-height:164px;padding:22px 22px 20px;border-right:1px solid rgba(218,236,255,.08);color:var(--secondary);background:transparent!important;transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.spx-nav-v26 .nav-panel-columns a:last-child{border-right:0}
.spx-nav-v26 .nav-panel-columns a::after{content:"Explore \2192";margin-top:auto;color:var(--text);font-size:12px;font-weight:900;letter-spacing:.02em;opacity:.72;transition:transform .2s var(--ease), opacity .2s var(--ease), color .2s var(--ease)}
.spx-nav-v26 .nav-panel-columns a:hover{background:rgba(24,201,245,.075)!important;transform:translateY(-2px);border-color:rgba(107,232,255,.18)}
.spx-nav-v26 .nav-panel-columns a:hover::after{opacity:1;transform:translateX(4px);color:var(--cyan-2)}
.spx-nav-v26 .nav-panel-columns b{display:block;color:var(--text);font-size:15px;line-height:1.2}.spx-nav-v26 .nav-panel-columns span{display:block;font-size:13px;line-height:1.45}

/* Hero */
.spx-hero-v26{display:block!important;position:relative;overflow:hidden;isolation:isolate;min-height:clamp(920px,104svh,1180px);padding:clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px);color:var(--text);background:#02050d}
html[data-theme="light"] .spx-hero-v26{background:#eef6ff}
.spx-hero-v26 .spx-hero-space{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.17),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,#02050d 0%,#050a16 62%,#07111f 100%)}
html[data-theme="light"] .spx-hero-v26 .spx-hero-space{background:radial-gradient(980px 600px at 72% 18%,rgba(37,99,235,.11),transparent 62%),radial-gradient(920px 620px at 18% 78%,rgba(14,165,233,.09),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f6f8fc 72%,#eef3fa 100%)}
.spx-v26-sky{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;overflow:hidden}
.spx-v26-sky::before{content:"";position:absolute;left:-8%;right:-8%;top:0;height:94%;background:linear-gradient(112deg,transparent 0 28%,rgba(37,99,235,.05) 38%,rgba(24,201,245,.14) 45%,rgba(210,244,255,.18) 49%,rgba(82,181,230,.12) 54%,rgba(48,86,180,.06) 62%,transparent 73% 100%),radial-gradient(ellipse at 48% 52%,rgba(107,232,255,.11),transparent 39%),radial-gradient(ellipse at 37% 61%,rgba(180,120,255,.055),transparent 42%);filter:blur(22px) saturate(130%);transform:rotate(-18deg) translate3d(calc(var(--spx-v26-x,0px) * .12),calc(var(--spx-v26-y,0px) * .08),0);opacity:.72;animation:spxV26Galaxy 26s ease-in-out infinite alternate}
.spx-v26-sky::after{content:"";position:absolute;inset:5% 0 0;background:linear-gradient(rgba(107,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.045) 1px,transparent 1px);background-size:64px 64px;transform:perspective(900px) rotateX(62deg) translate3d(calc(var(--spx-v26-x,0px) * .18),calc(var(--spx-v26-y,0px) * .10),0);transform-origin:center bottom;opacity:.24;animation:spxV26GridDrift 16s linear infinite;mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 76%,transparent 100%)}
html[data-theme="light"] .spx-v26-sky::after{opacity:.16}
.v26-cloud{position:absolute;display:block;border-radius:999px;opacity:.34;filter:blur(52px);transform:translate3d(calc(var(--spx-v26-x,0px) * .13),calc(var(--spx-v26-y,0px) * .10),0);animation:spxV26Cloud 12s ease-in-out infinite alternate}
.v26-cloud.cloud-a{left:2%;top:61%;width:42vw;height:12vw;background:rgba(107,232,255,.11)}
.v26-cloud.cloud-b{right:4%;top:16%;width:38vw;height:11vw;background:rgba(37,99,235,.13);animation-delay:-3s}
.v26-cloud.cloud-c{left:42%;top:41%;width:36vw;height:10vw;background:rgba(185,135,255,.06);animation-delay:-6s}
.v26-horizon{position:absolute;left:6%;right:6%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.34),transparent);box-shadow:0 0 56px rgba(24,201,245,.26)}
.v26-grid-plane{position:absolute;left:3%;right:3%;bottom:0;height:38%;background:linear-gradient(rgba(107,232,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(107,232,255,.045) 1px,transparent 1px);background-size:58px 58px;transform:perspective(900px) rotateX(66deg);transform-origin:center bottom;opacity:.18;animation:spxV26GridDrift 18s linear infinite reverse;mask-image:linear-gradient(180deg,transparent 0%,black 30%,transparent 100%)}
.v26-light-trace{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(107,232,255,.58),transparent);opacity:.34;filter:blur(.2px);animation:spxV26Trace 8.5s linear infinite}.v26-light-trace.trace-a{left:48%;width:22%;top:26%;animation-delay:-1s}.v26-light-trace.trace-b{right:8%;width:18%;top:62%;animation-delay:-5s}

.spx-v26-shell{position:relative;z-index:6;width:min(1400px,100%);margin:0 auto;display:grid;justify-items:start;text-align:left}
.spx-v26-copy{max-width:min(820px,67vw)}
.spx-v26-kicker{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid rgba(107,232,255,.20);border-radius:7px;background:rgba(24,201,245,.08);color:#bff4ff;font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
html[data-theme="light"] .spx-v26-kicker{color:#075985;background:rgba(14,165,233,.09);border-color:rgba(14,165,233,.20)}
.spx-v26-copy h1{margin:20px 0 0;max-width:980px;font-size:clamp(68px,9.7vw,156px);line-height:.82;letter-spacing:-.11em;text-wrap:balance}.spx-v26-copy h1::after{content:"";display:block;width:min(380px,46%);height:2px;margin-top:30px;background:linear-gradient(90deg,#18c9f5,rgba(37,99,235,.85),transparent);box-shadow:0 0 26px rgba(24,201,245,.42)}
.spx-v26-lead{margin:24px 0 0;max-width:650px;color:var(--text-soft);font-size:clamp(18px,1.28vw,22px);line-height:1.55}.spx-v26-lead strong{color:var(--text);font-weight:950}
.spx-v26-support{margin:16px 0 0;max-width:620px;color:var(--secondary);font-size:15px;line-height:1.6}
.spx-v26-actions{justify-content:flex-start;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.spx-v26-actions .btn{border-radius:999px}
.spx-v26-note{margin:14px 0 0;color:var(--secondary);font-size:13px;line-height:1.5}.spx-v26-note a{color:var(--text);font-weight:900;text-decoration:none;border-bottom:1px solid rgba(107,232,255,.24)}.spx-v26-note a:hover{color:var(--cyan-2);border-bottom-color:rgba(107,232,255,.44)}

/* Product side: clearer, calmer, slightly higher. */
.v26-product-atmosphere{position:absolute;left:50%;top:47.2%;width:min(1040px,72vw);height:min(620px,43vw);z-index:2;transform:translate(-18%,-18%) perspective(1480px) rotateY(-6deg) rotateX(3.2deg) translate3d(calc(var(--spx-v26-x,0px) * .16),calc(var(--spx-v26-y,0px) * .11),0);transform-origin:center;opacity:.76;filter:drop-shadow(0 44px 116px rgba(0,0,0,.34))}
.v26-product-atmosphere::before{content:"";position:absolute;inset:-12%;background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.18),transparent 64%);filter:blur(28px);opacity:.48}
.v26-product-atmosphere::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(90deg,rgba(2,5,13,.86) 0%,rgba(2,5,13,.58) 12%,rgba(2,5,13,.26) 30%,rgba(2,5,13,.12) 50%,rgba(2,5,13,.16) 72%,rgba(2,5,13,.52) 100%),linear-gradient(180deg,rgba(2,5,13,.18),rgba(2,5,13,.05) 22%,rgba(2,5,13,.10) 78%,rgba(2,5,13,.34));box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)}
html[data-theme="light"] .v26-product-atmosphere::after{background:linear-gradient(90deg,rgba(238,246,255,.80) 0%,rgba(238,246,255,.52) 14%,rgba(238,246,255,.20) 32%,rgba(238,246,255,.10) 52%,rgba(238,246,255,.14) 76%,rgba(238,246,255,.42) 100%),linear-gradient(180deg,rgba(238,246,255,.18),rgba(238,246,255,.06) 22%,rgba(238,246,255,.10) 78%,rgba(238,246,255,.28))}
.v26-builder-base{position:absolute;inset:1.4% 2.1%;width:auto;height:auto;object-fit:contain;object-position:center top;border:1px solid rgba(107,232,255,.16);opacity:.95;filter:saturate(1.03) contrast(1.03);background:rgba(6,12,25,.78);padding:8px;box-shadow:0 22px 72px rgba(0,0,0,.18)}
html[data-theme="light"] .v26-builder-base{background:rgba(255,255,255,.86)}
.v26-product-layer{position:absolute;z-index:5;border:1px solid rgba(125,220,255,.22);background:rgba(6,12,25,.95);box-shadow:0 26px 72px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden;padding:8px;display:block;object-fit:contain}
html[data-theme="light"] .v26-product-layer{background:rgba(255,255,255,.96);box-shadow:0 22px 58px rgba(22,34,64,.16),0 0 0 1px rgba(15,23,42,.04) inset}
.v26-product-layer.layer-settings{right:4.2%;top:1.4%;width:31.5%;height:76%;opacity:0;animation:spxV26LayerSettings 10s ease-in-out infinite}
.v26-product-layer.layer-add{left:2.4%;top:6.8%;width:33%;height:74%;opacity:0;animation:spxV26LayerAdd 10s ease-in-out infinite}

.spx-v26-bottom-fade{position:absolute;left:0;right:0;bottom:-1px;z-index:3;height:300px;pointer-events:none;background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.24) 36%,rgba(7,17,31,.84) 72%,var(--bg-2) 100%)}
html[data-theme="light"] .spx-v26-bottom-fade{background:linear-gradient(180deg,rgba(246,248,252,0) 0%,rgba(246,248,252,.36) 40%,rgba(246,248,252,.88) 72%,#eef3fa 100%)}
.spx-hero-v26 + .section.intro{margin-top:-58px;position:relative;z-index:5}

@keyframes spxV26Galaxy{from{transform:rotate(-19deg) translate3d(-1.2%,.8%,0) scale(1.04);opacity:.62}to{transform:rotate(-16deg) translate3d(1.6%,-1.1%,0) scale(1.14);opacity:.78}}
@keyframes spxV26Cloud{from{opacity:.24;filter:blur(46px)}to{opacity:.40;filter:blur(60px)}}
@keyframes spxV26GridDrift{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}
@keyframes spxV26Trace{from{transform:translateX(-30px);opacity:0}22%{opacity:.36}78%{opacity:.36}to{transform:translateX(30px);opacity:0}}
@keyframes spxV26LayerSettings{0%,8%{opacity:0;transform:translateY(16px) scale(.985)}14%,42%{opacity:.86;transform:translateY(0) scale(1)}48%,100%{opacity:0;transform:translateY(-8px) scale(.985)}}
@keyframes spxV26LayerAdd{0%,54%{opacity:0;transform:translateY(16px) scale(.985)}60%,82%{opacity:.74;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(-8px) scale(.985)}}

@media(max-width:1200px){
  .spx-v26-copy{max-width:min(760px,68vw)}
  .v26-product-atmosphere{top:50.2%;width:980px;height:590px;opacity:.70}
}
@media(max-width:1120px){
  .spx-nav-v26{grid-template-columns:auto auto 1fr}.spx-nav-v26 .nav-toggle{display:block;order:3;justify-self:end}.spx-nav-v26 .site-nav{display:none}
  .spx-nav-v26.is-open .site-nav{display:grid;position:absolute;left:18px;right:18px;top:calc(100% + 10px);justify-content:stretch;gap:6px;padding:16px;border:1px solid rgba(218,236,255,.10);background:#050b17}
  html[data-theme="light"] .spx-nav-v26.is-open .site-nav{background:#fff}
  .spx-nav-v26 .nav-group-mega .mega-menu{position:static;width:100%;opacity:1;visibility:visible;transform:none;margin-top:8px}
  .spx-nav-v26 .nav-panel-columns{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .spx-v26-copy{max-width:100%}
  .v26-product-atmosphere{left:50%;top:60.2%;width:min(740px,94vw);height:min(450px,56vw);opacity:.70;transform:translate(-50%,-10%) perspective(1200px) rotateY(-4deg) rotateX(2.5deg)}
  .v26-product-layer.layer-settings{right:4%;top:2%;width:32%;height:72%}
}
@media(max-width:760px){
  .spx-hero-v26{min-height:auto;padding:118px 18px 148px}.spx-v26-copy h1{font-size:clamp(54px,16vw,84px)}.spx-v26-actions{display:grid}.spx-v26-support,.spx-v26-note,.spx-v26-lead{max-width:520px}
  .v26-product-atmosphere{top:auto;bottom:9%;width:100%;height:292px;opacity:.64}
  .v26-product-layer.layer-settings{right:4%;top:4%;width:31%;height:68%}
  .spx-nav-v26 .nav-actions .btn.primary,.spx-nav-v26 .nav-actions .btn.ghost{display:none}.spx-nav-v26 .nav-panel-columns{grid-template-columns:1fr}.spx-nav-v26 .nav-panel-columns a{min-height:auto;border-right:0;border-bottom:1px solid rgba(218,236,255,.08)}
}
@media(prefers-reduced-motion:reduce){.spx-v26-sky::before,.spx-v26-sky::after,.v26-cloud,.v26-grid-plane,.v26-light-trace,.v26-product-layer.layer-settings,.v26-product-layer.layer-add{animation:none!important}.v26-product-layer.layer-settings{opacity:.82!important}.v26-product-layer.layer-add{opacity:0!important}}

/* ==========================================================================
   A8.29 — smooth A8.26 rebase: nav/CTA/message fixes without new heavy loops
   ========================================================================== */

/* Keep anchor target usable below fixed nav. */
.spx-scroll-anchor{
  display:block;
  position:relative;
  top:-110px;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* Main nav links: stay integrated with the navbar, never become square/pill blocks. */
.site-header.spx-nav-v26 .site-nav,
.site-header.spx-nav-v26.is-scrolled .site-nav,
.site-header.spx-nav-v26.is-open .site-nav,
.site-header.spx-nav-v26:focus-within .site-nav{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.site-header.spx-nav-v26 .site-nav > a,
.site-header.spx-nav-v26 .nav-group > a,
.site-header.spx-nav-v26.is-scrolled .site-nav > a,
.site-header.spx-nav-v26.is-scrolled .nav-group > a,
.site-header.spx-nav-v26.is-open .site-nav > a,
.site-header.spx-nav-v26.is-open .nav-group > a,
.site-header.spx-nav-v26:focus-within .site-nav > a,
.site-header.spx-nav-v26:focus-within .nav-group > a,
.site-header.spx-nav-v26 .site-nav > a:hover,
.site-header.spx-nav-v26 .nav-group > a:hover,
.site-header.spx-nav-v26 .nav-group:hover > a,
.site-header.spx-nav-v26.is-scrolled .site-nav > a:hover,
.site-header.spx-nav-v26.is-scrolled .nav-group > a:hover,
.site-header.spx-nav-v26.is-scrolled .nav-group:hover > a,
.site-header.spx-nav-v26 .site-nav > a:focus-visible,
.site-header.spx-nav-v26 .nav-group > a:focus-visible{
  min-height:auto!important;
  padding:8px 0!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .site-nav > a:hover,
html[data-theme="light"] .site-header.spx-nav-v26 .nav-group > a:hover,
html[data-theme="light"] .site-header.spx-nav-v26 .nav-group:hover > a{
  background:transparent!important;
  background-color:transparent!important;
}

/* Dropdown indicator: clear which top-level items open menus. */
.site-header.spx-nav-v26 .nav-group > a::after{
  content:none!important;
  display:none!important;
}
.site-header.spx-nav-v26 .nav-group-mega > a{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}
.site-header.spx-nav-v26 .nav-caret{
  display:inline-block;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.68;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.site-header.spx-nav-v26 .nav-group-mega:hover .nav-caret,
.site-header.spx-nav-v26 .nav-group-mega:focus-within .nav-caret{
  transform:rotate(225deg) translate(-1px,-1px);
  opacity:1;
}

/* Theme switch: final item at the far right, vertical and textless. */
.site-header.spx-nav-v26 .nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.site-header.spx-nav-v26 .spx-theme-switch{
  order:99!important;
  width:30px!important;
  height:52px!important;
  min-width:30px!important;
  min-height:52px!important;
  padding:4px!important;
  border-radius:999px!important;
  justify-content:center!important;
  gap:0!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-track{
  width:22px!important;
  height:44px!important;
}
.site-header.spx-nav-v26 .spx-theme-switch .switch-track i{
  left:2px!important;
  top:2px!important;
  width:18px!important;
  height:18px!important;
  transform:none!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .spx-theme-switch .switch-track i{
  transform:translateY(22px)!important;
}

/* Shared CTA animation: exact same class on nav Start free and hero Start building. */
.spx-primary-action{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 52%,#18c9f5 100%)!important;
  background-size:150% 150%!important;
  border:1px solid rgba(125,220,255,.22)!important;
  box-shadow:0 14px 42px rgba(14,165,233,.25), inset 0 1px 0 rgba(255,255,255,.26)!important;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease), background-position .22s var(--ease), border-color .22s var(--ease)!important;
  will-change:transform;
}
.spx-primary-action::after{
  content:""!important;
  position:absolute!important;
  inset:-70% -40%!important;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.30) 48%,transparent 62%)!important;
  transform:translateX(-62%) rotate(8deg)!important;
  transition:transform .55s var(--ease)!important;
  pointer-events:none!important;
}
.spx-primary-action:hover,
.spx-primary-action:focus-visible{
  transform:translateY(-2px) scale(1.012)!important;
  background-position:100% 50%!important;
  border-color:rgba(170,236,255,.34)!important;
  box-shadow:0 20px 58px rgba(14,165,233,.32), inset 0 1px 0 rgba(255,255,255,.28)!important;
  filter:brightness(1.04)!important;
}
.spx-primary-action:hover::after,
.spx-primary-action:focus-visible::after{
  transform:translateX(62%) rotate(8deg)!important;
}

/* Dropdown links: clearer as links, without changing the smooth hero runtime. */
.site-header.spx-nav-v26 .nav-panel-lead{
  padding:24px 28px!important;
}
.site-header.spx-nav-v26 .nav-panel-lead small{
  max-width:720px!important;
  line-height:1.55!important;
}
.site-header.spx-nav-v26 .nav-panel-columns a{
  display:grid!important;
  grid-template-rows:auto auto 1fr auto!important;
  gap:10px!important;
  min-height:178px!important;
  padding:26px 24px 24px!important;
  text-decoration:none!important;
  border-right:1px solid rgba(218,236,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0))!important;
}
html[data-theme="light"] .site-header.spx-nav-v26 .nav-panel-columns a{
  background:linear-gradient(180deg,rgba(14,165,233,.035),rgba(255,255,255,0))!important;
  border-right-color:rgba(15,23,42,.08)!important;
}
.site-header.spx-nav-v26 .nav-panel-columns a::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  box-shadow:0 0 14px rgba(24,201,245,.28);
}
.site-header.spx-nav-v26 .nav-panel-columns a::after{
  content:"Open →";
  align-self:end;
  color:var(--text);
  font-size:12px;
  font-weight:950;
  letter-spacing:.02em;
  opacity:.78;
  transition:transform .2s var(--ease), opacity .2s var(--ease), color .2s var(--ease);
}
.site-header.spx-nav-v26 .nav-panel-columns a:hover{
  background:linear-gradient(180deg,rgba(24,201,245,.10),rgba(37,99,235,.04))!important;
  transform:translateY(-2px);
}
.site-header.spx-nav-v26 .nav-panel-columns a:hover::after{
  opacity:1;
  color:var(--cyan-2);
  transform:translateX(5px);
}

/* Hero message hierarchy. */
.spx-v26-copy{
  max-width:min(880px,70vw)!important;
}
.spx-v26-lead{
  max-width:720px!important;
}
.spx-v26-support{
  max-width:680px!important;
}

/* Product panel: keep A8.26 smoothness, only keep Settings below topbar. */
.v26-product-layer.layer-settings{
  top:11.5%!important;
  height:62%!important;
}
.v26-product-layer.layer-add{
  top:11.5%!important;
  height:62%!important;
}

@media(max-width:1120px){
  .site-header.spx-nav-v26.is-open .site-nav{
    background:#050b17!important;
    border:1px solid rgba(218,236,255,.10)!important;
    box-shadow:0 24px 80px rgba(0,0,0,.34)!important;
  }
  html[data-theme="light"] .site-header.spx-nav-v26.is-open .site-nav{
    background:#fff!important;
    border-color:rgba(15,23,42,.08)!important;
  }
}
@media(max-width:760px){
  .spx-v26-copy{
    max-width:100%!important;
  }
  .spx-v26-lead,
  .spx-v26-support{
    max-width:520px!important;
  }
}


/* ==========================================================================
   A8.30 — final hero copy + soft gradient emphasis on "Your"
   ========================================================================== */

.spx-v26-kicker{
  max-width:560px!important;
}

.spx-v26-copy h1{
  max-width:980px!important;
  text-wrap:balance;
}

.spx-hero-gradient-word{
  display:inline-block;
  background:linear-gradient(105deg,#ffffff 0%,#dff8ff 26%,#18c9f5 58%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 34px rgba(24,201,245,.20);
}
html[data-theme="light"] .spx-hero-gradient-word{
  background:linear-gradient(105deg,#101828 0%,#075985 32%,#0ea5e9 65%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.spx-v26-lead{
  max-width:650px!important;
}

.spx-v26-lead strong{
  font-weight:920;
}

.spx-v26-support{
  max-width:680px!important;
}

.spx-v26-note a{
  text-transform:none;
}

@media(max-width:760px){
  .spx-v26-copy h1{
    max-width:100%!important;
  }
}


/* ==========================================================================
   A8.31 — hero clipping fix + Why Spixor section + smooth background scroll
   ========================================================================== */

/* Fix clipped gradient word in the hero heading. */
.spx-v26-copy h1{
  line-height:.90!important;
  overflow:visible!important;
  padding-bottom:.055em!important;
}
.spx-hero-gradient-word{
  display:inline-block;
  padding:.02em .075em .075em 0!important;
  margin:-.02em -.035em -.075em 0!important;
  line-height:1!important;
  overflow:visible!important;
  background-position:center;
}

/* Smooth background scroll variable. Content scrolls normally; atmosphere lags subtly. */
[data-smooth-bg-scene]{
  --spx-smooth-bg-y: calc(var(--spx-bg-scroll, 0) * 1px);
}
.spx-v26-sky{
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * .055px), 0);
  will-change:transform;
}
.spx-v26-sky::before,
.spx-v26-sky::after{
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * .035px), 0);
}

/* The section starts inside the hero atmosphere instead of feeling cut off. */
.spx-why-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:-118px;
  padding:clamp(150px,14vw,220px) var(--side) clamp(105px,11vw,170px);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% 12%,rgba(24,201,245,.10),transparent 60%),
    radial-gradient(880px 560px at 84% 34%,rgba(37,99,235,.11),transparent 62%),
    linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.58) 16%,var(--bg-2) 42%,var(--bg) 100%);
}
html[data-theme="light"] .spx-why-section{
  background:
    radial-gradient(900px 520px at 12% 12%,rgba(14,165,233,.10),transparent 60%),
    radial-gradient(880px 560px at 84% 34%,rgba(37,99,235,.08),transparent 62%),
    linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.68) 20%,#eef3fa 48%,#f6f8fc 100%);
}
.spx-why-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:84px 84px;
  opacity:.34;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.025px), 0);
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 80%,transparent 100%);
}
html[data-theme="light"] .spx-why-section::before{
  opacity:.24;
}
.spx-why-bg{
  position:absolute;
  inset:-10% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.09px), 0);
  will-change:transform;
}
.why-nebula{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(54px);
  opacity:.34;
  animation:spxWhyNebula 18s ease-in-out infinite alternate;
}
.why-nebula-a{
  width:42vw;
  height:13vw;
  left:2%;
  top:18%;
  background:rgba(24,201,245,.13);
}
.why-nebula-b{
  width:34vw;
  height:12vw;
  right:8%;
  top:38%;
  background:rgba(37,99,235,.13);
  animation-delay:-7s;
}
.why-grid{
  position:absolute;
  left:4%;
  right:4%;
  bottom:4%;
  height:44%;
  background:
    linear-gradient(rgba(107,232,255,.040) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.032) 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.18;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}
.why-orbit-line{
  position:absolute;
  border:1px solid rgba(107,232,255,.12);
  border-radius:50%;
  opacity:.45;
  transform:rotate(-18deg);
}
.orbit-one{
  width:620px;
  height:190px;
  right:4%;
  top:22%;
}
.orbit-two{
  width:480px;
  height:160px;
  left:0;
  bottom:18%;
  border-color:rgba(37,99,235,.11);
}

.spx-why-shell{
  position:relative;
  z-index:2;
  width:min(1340px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(34px,5vw,70px);
}
.spx-why-intro{
  max-width:850px;
}
.spx-why-intro h2{
  margin:14px 0 0;
  max-width:920px;
  font-size:clamp(42px,5.6vw,92px);
  line-height:.94;
  letter-spacing:-.075em;
  text-wrap:balance;
}
.spx-why-intro p{
  margin:24px 0 0;
  max-width:760px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.58;
}

.spx-why-visual{
  position:relative;
  min-height:clamp(360px,38vw,540px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.015));
  box-shadow:0 34px 110px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(132%);
  -webkit-backdrop-filter:blur(18px) saturate(132%);
}
html[data-theme="light"] .spx-why-visual{
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.50));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 30px 90px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.spx-why-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(720px,70%);
  height:min(720px,86%);
  border:1px dashed rgba(107,232,255,.16);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
}
.spx-why-visual::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,5,13,.28),transparent 28%,transparent 72%,rgba(2,5,13,.24));
}
html[data-theme="light"] .spx-why-visual::after{
  background:linear-gradient(90deg,rgba(246,248,252,.50),transparent 28%,transparent 72%,rgba(246,248,252,.44));
}
.why-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:clamp(190px,18vw,260px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-content:center;
  text-align:center;
  padding:28px;
  border:1px solid rgba(107,232,255,.20);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),rgba(24,201,245,.10) 38%,rgba(5,11,23,.72));
  box-shadow:0 0 70px rgba(24,201,245,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .why-core{
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.96),rgba(224,242,254,.70) 42%,rgba(255,255,255,.64));
}
.why-core b{
  display:block;
  color:var(--text);
  font-size:clamp(26px,3vw,48px);
  line-height:.96;
  letter-spacing:-.06em;
}
.why-core span{
  display:block;
  margin-top:10px;
  color:var(--secondary);
  font-weight:800;
  font-size:13px;
}
.why-flow-card{
  position:absolute;
  z-index:2;
  width:min(290px,26vw);
  min-height:145px;
  padding:20px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(5,11,23,.64);
  box-shadow:0 20px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .65s var(--ease), opacity .65s var(--ease);
}
html[data-theme="light"] .why-flow-card{
  background:rgba(255,255,255,.74);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 48px rgba(22,34,64,.10),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-flow-card span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
}
.why-flow-card strong{
  display:block;
  margin-top:10px;
  color:var(--text);
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.035em;
}
.why-flow-card small{
  display:block;
  margin-top:10px;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}
.card-build{
  left:7%;
  top:12%;
}
.card-organize{
  right:7%;
  top:15%;
}
.card-continue{
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
}

.spx-why-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.spx-why-card{
  position:relative;
  min-height:260px;
  padding:28px;
  border:1px solid rgba(107,232,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018));
  box-shadow:0 22px 70px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .spx-why-card{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,255,.68));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 52px rgba(22,34,64,.08),inset 0 1px 0 rgba(255,255,255,.78);
}
.why-card-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(107,232,255,.16);
  color:var(--cyan-2);
  background:rgba(24,201,245,.075);
  margin-bottom:24px;
}
.spx-why-card h3{
  margin:0;
  color:var(--text);
  font-size:clamp(22px,2.1vw,32px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.spx-why-card p{
  margin:16px 0 0;
  color:var(--secondary);
  line-height:1.62;
}

/* Smoother reveal variants used in the new why section. */
.spx-smooth-reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible .spx-smooth-reveal,
.spx-smooth-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.reveal.is-visible .spx-smooth-reveal:nth-child(2),
.spx-smooth-reveal:nth-child(2){
  transition-delay:.08s;
}
.reveal.is-visible .spx-smooth-reveal:nth-child(3),
.spx-smooth-reveal:nth-child(3){
  transition-delay:.16s;
}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(1){transition-delay:.04s}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(2){transition-delay:.12s}
.reveal.is-visible .spx-why-cards .spx-smooth-reveal:nth-child(3){transition-delay:.20s}

@keyframes spxWhyNebula{
  from{transform:translate3d(-1.5%,.5%,0) scale(1);opacity:.26}
  to{transform:translate3d(1.5%,-.7%,0) scale(1.08);opacity:.40}
}

@media(max-width:980px){
  .spx-why-cards{
    grid-template-columns:1fr;
  }
  .spx-why-visual{
    min-height:620px;
  }
  .why-flow-card{
    width:min(330px,72vw);
  }
  .card-build{left:50%;top:8%;transform:translateX(-50%)}
  .card-organize{right:auto;left:50%;top:34%;transform:translateX(-50%)}
  .card-continue{bottom:7%}
  .why-core{
    width:180px;
  }
}
@media(max-width:760px){
  .spx-v26-copy h1{
    line-height:.94!important;
  }
  .spx-why-section{
    margin-top:-82px;
    padding-top:140px;
  }
  .spx-why-intro h2{
    font-size:clamp(38px,12vw,58px);
  }
  .spx-why-visual{
    min-height:650px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-v26-sky,
  .spx-v26-sky::before,
  .spx-v26-sky::after,
  .spx-why-bg,
  .spx-why-section::before{
    transform:none!important;
  }
  .why-nebula{
    animation:none!important;
  }
  .spx-smooth-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* ==========================================================================
   A8.32 — Framer-style Why Spixor section + seamless hero flow
   ========================================================================== */

/* Remove the visible cut line between hero and Why. */
.spx-hero-v26{
  position:relative;
}
.spx-v26-bottom-fade{
  height:390px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.18) 28%,
      rgba(7,17,31,.58) 58%,
      rgba(7,17,31,.92) 82%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.28) 32%,
      rgba(246,248,252,.68) 62%,
      rgba(238,243,250,.94) 84%,
      #eef3fa 100%)!important;
}

/* New Why section direction: compact, less copy, more visual. */
.spx-why-section.spx-why-v32{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:-190px!important;
  padding:clamp(210px,18vw,290px) var(--side) clamp(86px,9vw,140px)!important;
  border-top:0!important;
  color:var(--text);
  background:
    radial-gradient(980px 560px at 50% -8%,rgba(24,201,245,.12),transparent 64%),
    radial-gradient(860px 520px at 82% 28%,rgba(37,99,235,.10),transparent 62%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.28) 10%,
      var(--bg-2) 34%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v32{
  background:
    radial-gradient(980px 560px at 50% -8%,rgba(14,165,233,.11),transparent 64%),
    radial-gradient(860px 520px at 82% 28%,rgba(37,99,235,.08),transparent 62%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.36) 13%,
      #eef3fa 38%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v32::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:0;
  height:260px;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.22) 42%,
      rgba(7,17,31,0) 100%);
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.018px), 0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v32::before{
  background:
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.42) 42%,
      rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v32::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px);
  background-size:90px 90px;
  opacity:.26;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.032px), 0);
  mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 74%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v32::after{
  opacity:.16;
}

.spx-why-v32 .spx-why-bg{
  position:absolute;
  inset:-12% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0, calc(var(--spx-bg-scroll, 0) * -.065px), 0);
  will-change:transform;
}
.why-v32-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.34;
  animation:spxWhyV32Glow 22s ease-in-out infinite alternate;
}
.why-v32-glow.glow-a{
  width:42vw;
  height:12vw;
  left:6%;
  top:12%;
  background:rgba(24,201,245,.12);
}
.why-v32-glow.glow-b{
  width:34vw;
  height:11vw;
  right:8%;
  top:38%;
  background:rgba(37,99,235,.12);
  animation-delay:-8s;
}
.why-v32-grid{
  position:absolute;
  left:5%;
  right:5%;
  bottom:3%;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px);
  background-size:78px 78px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.16;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}

.spx-why-v32 .spx-why-shell{
  position:relative;
  z-index:2;
  width:min(1280px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(26px,4vw,52px);
}
.spx-why-head{
  max-width:790px;
}
.spx-why-head h2{
  margin:12px 0 0;
  max-width:850px;
  font-size:clamp(48px,6.6vw,106px);
  line-height:.90;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-head p{
  margin:22px 0 0;
  max-width:680px;
  color:var(--text-soft);
  font-size:clamp(17px,1.35vw,22px);
  line-height:1.55;
}

/* Framer-like visual stage: one strong visual, not a wall of text. */
.spx-why-showcase{
  position:relative;
  min-height:clamp(420px,42vw,620px);
  border:1px solid rgba(107,232,255,.11);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.012));
  box-shadow:0 34px 110px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .spx-why-showcase{
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 36%),
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.50));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 30px 90px rgba(22,34,64,.11),inset 0 1px 0 rgba(255,255,255,.72);
}
.spx-why-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.30),transparent 30%,transparent 70%,rgba(2,5,13,.25)),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 32%,rgba(0,0,0,.08));
  z-index:4;
}
html[data-theme="light"] .spx-why-showcase::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.48),transparent 30%,transparent 70%,rgba(246,248,252,.40)),
    linear-gradient(180deg,rgba(255,255,255,.25),transparent 32%,rgba(15,23,42,.03));
}
.why-v32-orbit{
  position:absolute;
  inset:8%;
  z-index:1;
  pointer-events:none;
}
.why-v32-orbit span{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(107,232,255,.12);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
}
.why-v32-orbit span:nth-child(1){
  width:min(780px,74%);
  height:min(310px,56%);
}
.why-v32-orbit span:nth-child(2){
  width:min(580px,54%);
  height:min(470px,78%);
  border-color:rgba(37,99,235,.10);
}
.why-v32-orbit span:nth-child(3){
  width:min(920px,86%);
  height:min(470px,74%);
  border-color:rgba(107,232,255,.07);
}

.why-v32-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:clamp(200px,18vw,270px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  display:grid;
  place-content:center;
  text-align:center;
  padding:30px;
  border:1px solid rgba(107,232,255,.18);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.16),rgba(24,201,245,.10) 40%,rgba(5,11,23,.74));
  box-shadow:0 0 76px rgba(24,201,245,.18),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme="light"] .why-v32-core{
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.96),rgba(224,242,254,.72) 42%,rgba(255,255,255,.66));
}
.why-v32-core span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.why-v32-core strong{
  display:block;
  margin-top:8px;
  color:var(--text);
  font-size:clamp(30px,3.1vw,52px);
  line-height:.92;
  letter-spacing:-.065em;
}
.why-v32-core small{
  margin-top:10px;
  color:var(--secondary);
  font-weight:820;
}

.why-v32-card{
  position:absolute;
  z-index:2;
  width:min(280px,25vw);
  min-height:142px;
  padding:20px;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.64);
  box-shadow:0 20px 60px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html[data-theme="light"] .why-v32-card{
  background:rgba(255,255,255,.76);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 18px 48px rgba(22,34,64,.10),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v32-card b{
  color:var(--cyan-2);
  font-size:12px;
  letter-spacing:.12em;
}
.why-v32-card h3{
  margin:10px 0 0;
  color:var(--text);
  font-size:20px;
  line-height:1.08;
  letter-spacing:-.04em;
}
.why-v32-card p{
  margin:10px 0 0;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}
.card-visual{
  left:7%;
  top:12%;
}
.card-organized{
  right:7%;
  top:14%;
}
.card-ready{
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
}

.spx-why-bottom{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.spx-why-bottom p{
  margin:0;
  color:var(--text-soft);
  font-size:clamp(16px,1.2vw,20px);
  line-height:1.62;
}

/* Smooth scroll-in, but smaller and calmer than A8.31. */
.spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.992);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-visible .spx-scroll-rise,
.spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV32Glow{
  from{transform:translate3d(-1.3%,.6%,0) scale(1);opacity:.26}
  to{transform:translate3d(1.3%,-.6%,0) scale(1.07);opacity:.38}
}

@media(max-width:980px){
  .spx-why-showcase{
    min-height:650px;
  }
  .why-v32-card{
    width:min(330px,74vw);
  }
  .card-visual{left:50%;top:8%;transform:translateX(-50%)}
  .card-organized{right:auto;left:50%;top:34%;transform:translateX(-50%)}
  .card-ready{bottom:7%}
  .why-v32-core{
    width:178px;
  }
}
@media(max-width:760px){
  .spx-why-section.spx-why-v32{
    margin-top:-120px!important;
    padding-top:170px!important;
  }
  .spx-why-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .spx-why-showcase{
    min-height:670px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-bg,
  .spx-why-section.spx-why-v32::before,
  .spx-why-section.spx-why-v32::after{
    transform:none!important;
  }
  .why-v32-glow{
    animation:none!important;
  }
  .spx-scroll-rise{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* A8.32 smooth anchor movement and section scroll comfort */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}


/* ==========================================================================
   A8.33 — Sticky right-tool Why Spixor section
   Framer-like split story: compact left text + sticky product preview on right
   ========================================================================== */

/* Blend hero into the next section more heavily to remove the visible cut line. */
.spx-v26-bottom-fade{
  height:520px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.12) 24%,
      rgba(7,17,31,.38) 52%,
      rgba(7,17,31,.78) 78%,
      var(--bg-2) 100%)!important;
  z-index:4;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.20) 30%,
      rgba(246,248,252,.54) 58%,
      rgba(238,243,250,.88) 82%,
      #eef3fa 100%)!important;
}

/* New Why section: no planet system; a product story with sticky tool preview. */
.spx-why-section.spx-why-v33{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-260px!important;
  padding:clamp(250px,20vw,340px) var(--side) clamp(92px,9vw,150px)!important;
  border:0!important;
  color:var(--text);
  background:
    radial-gradient(1000px 560px at 52% -10%,rgba(24,201,245,.12),transparent 64%),
    radial-gradient(900px 540px at 85% 26%,rgba(37,99,235,.10),transparent 64%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.08) 12%,
      rgba(7,17,31,.42) 32%,
      var(--bg-2) 54%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v33{
  background:
    radial-gradient(1000px 560px at 52% -10%,rgba(14,165,233,.10),transparent 64%),
    radial-gradient(900px 540px at 85% 26%,rgba(37,99,235,.075),transparent 64%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.16) 14%,
      rgba(238,243,250,.58) 34%,
      #eef3fa 56%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v33::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  z-index:0;
  height:360px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.22) 52%,rgba(7,17,31,0) 100%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.016px),0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v33::before{
  background:linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.42) 52%,rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v33::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.22;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.028px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 30%,black 76%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v33::after{opacity:.13}

.spx-why-v33-bg{
  position:absolute;
  inset:-12% -8%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.07px),0);
  will-change:transform;
}
.why-v33-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.30;
  animation:spxWhyV33Glow 24s ease-in-out infinite alternate;
}
.why-v33-glow.glow-a{
  width:42vw;
  height:12vw;
  left:6%;
  top:10%;
  background:rgba(24,201,245,.12);
}
.why-v33-glow.glow-b{
  width:34vw;
  height:11vw;
  right:8%;
  top:42%;
  background:rgba(37,99,235,.12);
  animation-delay:-8s;
}
.why-v33-lines{
  position:absolute;
  left:6%;
  right:6%;
  bottom:2%;
  height:42%;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:82px 82px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.13;
  mask-image:linear-gradient(180deg,transparent 0%,black 40%,transparent 100%);
}

.spx-why-v33-shell{
  position:relative;
  z-index:2;
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(32px,5vw,74px);
}
.spx-why-v33-head{
  max-width:820px;
}
.spx-why-v33-head h2{
  margin:12px 0 0;
  max-width:900px;
  font-size:clamp(46px,6.2vw,102px);
  line-height:.91;
  letter-spacing:-.082em;
  text-wrap:balance;
}
.spx-why-v33-head p{
  margin:22px 0 0;
  max-width:700px;
  color:var(--text-soft);
  font-size:clamp(16px,1.25vw,21px);
  line-height:1.56;
}

/* Split story: left scroll text, right sticky tool preview. */
.spx-why-v33-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(480px, 1.22fr);
  gap:clamp(34px,5vw,82px);
  align-items:start;
}
.spx-why-v33-copy{
  display:grid;
  gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3vw,48px) 0;
}
.why-v33-step{
  position:relative;
  min-height:clamp(230px,25vh,310px);
  display:grid;
  align-content:center;
  padding:clamp(22px,2.6vw,34px);
  border-left:2px solid rgba(107,232,255,.10);
  background:linear-gradient(90deg,rgba(255,255,255,.034),rgba(255,255,255,0));
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), background .42s var(--ease);
  opacity:.60;
}
html[data-theme="light"] .why-v33-step{
  background:linear-gradient(90deg,rgba(255,255,255,.58),rgba(255,255,255,0));
  border-left-color:rgba(15,23,42,.09);
}
.why-v33-step.is-active{
  opacity:1;
  transform:translateX(8px);
  border-left-color:rgba(107,232,255,.55);
  background:linear-gradient(90deg,rgba(24,201,245,.075),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v33-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.09),rgba(255,255,255,0));
  border-left-color:rgba(14,165,233,.45);
}
.why-v33-step span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
}
.why-v33-step h3{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(28px,3.3vw,54px);
  line-height:.95;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.why-v33-step p{
  margin:16px 0 0;
  max-width:520px;
  color:var(--secondary);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.62;
}

.spx-why-v33-sticky{
  position:sticky;
  top:clamp(96px,12vh,132px);
  min-height:clamp(520px,62vh,690px);
  display:grid;
  align-items:center;
}
.why-v33-device{
  position:relative;
  width:100%;
  min-height:clamp(430px,52vw,620px);
  border:1px solid rgba(107,232,255,.13);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.11),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:0 34px 120px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .why-v33-device{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.54));
  box-shadow:0 30px 90px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.74);
}
.why-v33-device::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(107,232,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px);
  background-size:58px 58px;
  opacity:.22;
  pointer-events:none;
}
.why-v33-device::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,5,13,.28),transparent 24%,transparent 78%,rgba(2,5,13,.24));
}
html[data-theme="light"] .why-v33-device::after{
  background:linear-gradient(90deg,rgba(246,248,252,.46),transparent 24%,transparent 78%,rgba(246,248,252,.38));
}
.why-v33-device-top{
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  z-index:8;
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.66);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
html[data-theme="light"] .why-v33-device-top{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.08);
}
.why-v33-device-top span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(107,232,255,.55);
}
.why-v33-device-top span:nth-child(2){opacity:.55}
.why-v33-device-top span:nth-child(3){opacity:.30}
.why-v33-device-top strong{
  margin-left:8px;
  color:var(--text);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.why-v33-visual-stack{
  position:absolute;
  inset:78px 18px 18px;
  z-index:2;
}
.why-v33-visual{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translate3d(0,18px,0) scale(.985);
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease);
  filter:blur(4px);
  pointer-events:none;
}
.why-v33-visual.is-active{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.why-v33-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  display:block;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.72);
  padding:8px;
  box-shadow:0 24px 80px rgba(0,0,0,.20);
}
html[data-theme="light"] .why-v33-visual img{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.08);
  box-shadow:0 20px 60px rgba(22,34,64,.10);
}
.why-v33-visual figcaption{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:3;
  padding:8px 10px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.70);
  color:var(--text);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
html[data-theme="light"] .why-v33-visual figcaption{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.10);
}
.why-v33-next-step{
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,48px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 45%,rgba(24,201,245,.12),transparent 44%),
    rgba(5,11,23,.52);
}
html[data-theme="light"] .why-v33-next-step{
  background:
    radial-gradient(circle at 50% 45%,rgba(14,165,233,.10),transparent 44%),
    rgba(255,255,255,.62);
}
.why-v33-output-card{
  width:min(500px,82%);
  padding:clamp(24px,3vw,42px);
  border:1px solid rgba(107,232,255,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:0 24px 90px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  text-align:left;
}
html[data-theme="light"] .why-v33-output-card{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.58));
  border-color:rgba(15,23,42,.09);
  box-shadow:0 22px 70px rgba(22,34,64,.11),inset 0 1px 0 rgba(255,255,255,.74);
}
.why-v33-output-card span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.why-v33-output-card strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(28px,3vw,48px);
  line-height:.96;
  letter-spacing:-.065em;
}
.why-v33-output-card p{
  margin:16px 0 0;
  color:var(--secondary);
  font-size:15px;
  line-height:1.6;
}
.why-v33-output-row{
  position:absolute;
  left:50%;
  bottom:56px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
}
.why-v33-output-row b{
  padding:8px 10px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(24,201,245,.07);
  color:var(--text);
  font-size:12px;
  font-weight:900;
}

.spx-why-v33-note{
  max-width:780px;
  margin:0 auto;
  color:var(--text-soft);
  text-align:center;
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.66;
}

/* Smooth but controlled scroll-in animations. */
.spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
  will-change:transform,opacity;
}
.reveal.is-visible .spx-scroll-rise,
.spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV33Glow{
  from{transform:translate3d(-1.2%,.6%,0) scale(1);opacity:.24}
  to{transform:translate3d(1.2%,-.6%,0) scale(1.06);opacity:.36}
}

@media(max-width:1080px){
  .spx-why-v33-story{
    grid-template-columns:1fr;
  }
  .spx-why-v33-sticky{
    position:relative;
    top:auto;
    min-height:auto;
    order:-1;
  }
  .why-v33-device{
    min-height:clamp(420px,66vw,620px);
  }
  .why-v33-step{
    min-height:auto;
  }
}
@media(max-width:760px){
  .spx-why-section.spx-why-v33{
    margin-top:-160px!important;
    padding-top:190px!important;
  }
  .spx-why-v33-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .why-v33-device{
    min-height:520px;
  }
  .why-v33-visual-stack{
    inset:72px 12px 12px;
  }
  .why-v33-output-row{
    flex-wrap:wrap;
    justify-content:center;
    bottom:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v33-bg,
  .spx-why-section.spx-why-v33::before,
  .spx-why-section.spx-why-v33::after{
    transform:none!important;
  }
  .why-v33-glow{
    animation:none!important;
  }
  .spx-scroll-rise,
  .why-v33-visual{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    filter:none!important;
  }
  .why-v33-visual:not(.is-active){
    display:none!important;
  }
}


/* ==========================================================================
   A8.34 — continuous hero atmosphere + larger Framer-style tool section
   ========================================================================== */

/* Make the hero atmosphere continue deeper before it resolves into the next section. */
.spx-v26-bottom-fade{
  height:720px!important;
  bottom:-2px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.08) 22%,
      rgba(7,17,31,.20) 44%,
      rgba(7,17,31,.54) 70%,
      rgba(7,17,31,.88) 88%,
      var(--bg-2) 100%)!important;
  z-index:4;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.12) 24%,
      rgba(246,248,252,.34) 48%,
      rgba(238,243,250,.66) 72%,
      rgba(238,243,250,.94) 90%,
      #eef3fa 100%)!important;
}

/* New section: more Framer-like, larger sticky tool, much less text. */
.spx-why-section.spx-why-v34{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-430px!important;
  padding:clamp(420px,31vw,540px) var(--side) clamp(82px,8vw,135px)!important;
  border:0!important;
  color:var(--text);
  background:
    radial-gradient(1150px 660px at 50% -26%,rgba(24,201,245,.16),transparent 67%),
    radial-gradient(980px 620px at 85% 18%,rgba(37,99,235,.12),transparent 66%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.025) 16%,
      rgba(7,17,31,.14) 33%,
      rgba(7,17,31,.48) 58%,
      var(--bg-2) 78%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v34{
  background:
    radial-gradient(1150px 660px at 50% -26%,rgba(14,165,233,.12),transparent 67%),
    radial-gradient(980px 620px at 85% 18%,rgba(37,99,235,.08),transparent 66%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.08) 18%,
      rgba(238,243,250,.26) 38%,
      rgba(238,243,250,.62) 62%,
      #eef3fa 80%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v34::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:520px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(760px 360px at 50% 0%,rgba(24,201,245,.11),transparent 70%),
    linear-gradient(180deg,rgba(7,17,31,0) 0%,rgba(7,17,31,.08) 54%,rgba(7,17,31,0) 100%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.018px),0);
  mask-image:linear-gradient(180deg,black 0%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v34::before{
  background:
    radial-gradient(760px 360px at 50% 0%,rgba(14,165,233,.09),transparent 70%),
    linear-gradient(180deg,rgba(238,243,250,0) 0%,rgba(238,243,250,.34) 54%,rgba(238,243,250,0) 100%);
}
.spx-why-section.spx-why-v34::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:100px 100px;
  opacity:.18;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.025px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 34%,black 74%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v34::after{
  opacity:.12;
}

.spx-why-v34-bg{
  position:absolute;
  inset:-26% -10%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.070px),0);
  will-change:transform;
}
.why-v34-hero-tail{
  position:absolute;
  left:-8%;
  right:-8%;
  top:-3%;
  height:58%;
  display:block;
  background:
    linear-gradient(112deg,
      transparent 0 28%,
      rgba(37,99,235,.04) 38%,
      rgba(24,201,245,.13) 45%,
      rgba(210,244,255,.14) 49%,
      rgba(82,181,230,.10) 55%,
      transparent 73% 100%),
    radial-gradient(ellipse at 50% 24%,rgba(107,232,255,.10),transparent 46%);
  filter:blur(26px) saturate(128%);
  opacity:.60;
  transform:rotate(-18deg);
}
.why-v34-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(56px);
  opacity:.32;
  animation:spxWhyV34Glow 24s ease-in-out infinite alternate;
}
.why-v34-glow.glow-a{
  width:46vw;
  height:13vw;
  left:4%;
  top:8%;
  background:rgba(24,201,245,.13);
}
.why-v34-glow.glow-b{
  width:36vw;
  height:12vw;
  right:6%;
  top:34%;
  background:rgba(37,99,235,.13);
  animation-delay:-8s;
}
.why-v34-mist{
  position:absolute;
  left:12%;
  right:12%;
  top:16%;
  height:34%;
  display:block;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 68%);
  filter:blur(22px);
  opacity:.6;
}
.why-v34-lines{
  position:absolute;
  left:4%;
  right:4%;
  bottom:7%;
  height:40%;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:86px 86px;
  transform:perspective(900px) rotateX(64deg);
  transform-origin:center bottom;
  opacity:.14;
  mask-image:linear-gradient(180deg,transparent 0%,black 38%,transparent 100%);
}

.spx-why-v34-shell{
  position:relative;
  z-index:2;
  width:min(1450px,100%);
  margin:0 auto;
  display:grid;
  gap:clamp(24px,4vw,54px);
}
.spx-why-v34-head{
  max-width:760px;
}
.spx-why-v34-head h2{
  margin:12px 0 0;
  max-width:850px;
  font-size:clamp(46px,6.1vw,96px);
  line-height:.91;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-v34-head p{
  margin:20px 0 0;
  max-width:590px;
  color:var(--text-soft);
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.5;
}

/* More room for the tool, less room for copy. */
.spx-why-v34-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.48fr) minmax(660px,1.52fr);
  gap:clamp(28px,4.5vw,78px);
  align-items:start;
}
.spx-why-v34-copy{
  display:grid;
  gap:clamp(12px,2vw,24px);
  padding:clamp(18px,2.4vw,38px) 0;
}
.why-v34-step{
  position:relative;
  min-height:clamp(145px,17vh,220px);
  display:grid;
  align-content:center;
  padding:clamp(16px,2vw,26px) clamp(18px,2.2vw,30px);
  border-left:2px solid rgba(107,232,255,.10);
  background:linear-gradient(90deg,rgba(255,255,255,.024),rgba(255,255,255,0));
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), background .42s var(--ease);
  opacity:.58;
}
html[data-theme="light"] .why-v34-step{
  background:linear-gradient(90deg,rgba(255,255,255,.52),rgba(255,255,255,0));
  border-left-color:rgba(15,23,42,.09);
}
.why-v34-step.is-active{
  opacity:1;
  transform:translateX(7px);
  border-left-color:rgba(107,232,255,.58);
  background:linear-gradient(90deg,rgba(24,201,245,.070),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v34-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.08),rgba(255,255,255,0));
  border-left-color:rgba(14,165,233,.46);
}
.why-v34-step span{
  color:var(--cyan-2);
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
}
.why-v34-step h3{
  margin:10px 0 0;
  color:var(--text);
  font-size:clamp(28px,2.9vw,48px);
  line-height:.96;
  letter-spacing:-.065em;
  text-wrap:balance;
}
.why-v34-step p{
  margin:12px 0 0;
  max-width:390px;
  color:var(--secondary);
  font-size:clamp(14px,.95vw,16px);
  line-height:1.45;
}

/* Larger sticky product/tool view. */
.spx-why-v34-sticky{
  position:sticky;
  top:clamp(82px,10vh,116px);
  min-height:clamp(620px,76vh,840px);
  display:grid;
  align-items:center;
}
.why-v34-device{
  position:relative;
  width:100%;
  min-height:clamp(600px,64vw,820px);
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.12),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.014));
  box-shadow:0 42px 136px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(128%);
  -webkit-backdrop-filter:blur(18px) saturate(128%);
}
html[data-theme="light"] .why-v34-device{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.56));
  box-shadow:0 34px 100px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v34-device::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.25),transparent 24%,transparent 78%,rgba(2,5,13,.20)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%,rgba(0,0,0,.08));
}
html[data-theme="light"] .why-v34-device::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.40),transparent 24%,transparent 78%,rgba(246,248,252,.32)),
    linear-gradient(180deg,rgba(255,255,255,.24),transparent 30%,rgba(15,23,42,.025));
}
.why-v34-device-top{
  position:relative;
  z-index:6;
  height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 18px;
  border-bottom:1px solid rgba(107,232,255,.12);
  background:rgba(5,11,23,.72);
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .why-v34-device-top{
  background:rgba(255,255,255,.74);
  border-bottom-color:rgba(15,23,42,.08);
}
.why-v34-device-top span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(107,232,255,.55);
}
.why-v34-device-top span:nth-child(2){opacity:.56}
.why-v34-device-top span:nth-child(3){opacity:.34}
.why-v34-device-top strong{
  margin-left:8px;
  color:var(--text);
  font-size:13px;
  font-weight:950;
  letter-spacing:.02em;
}

.why-v34-visual-stack{
  position:absolute;
  inset:48px 0 0;
}
.why-v34-visual{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transform:translateY(18px) scale(.992);
  transition:opacity .48s var(--ease), transform .48s var(--ease);
  pointer-events:none;
}
.why-v34-visual.is-active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.why-v34-visual img{
  position:absolute;
  inset:18px 18px 116px;
  width:calc(100% - 36px);
  height:calc(100% - 134px);
  object-fit:contain;
  object-position:center top;
  border:1px solid rgba(107,232,255,.12);
  background:rgba(4,10,20,.78);
  box-shadow:0 26px 74px rgba(0,0,0,.20);
}
html[data-theme="light"] .why-v34-visual img{
  background:rgba(255,255,255,.84);
  border-color:rgba(15,23,42,.08);
}
.why-v34-visual figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  z-index:6;
  display:grid;
  gap:6px;
  padding:18px 20px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(5,11,23,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .why-v34-visual figcaption{
  background:rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.08);
}
.why-v34-visual figcaption b{
  color:var(--text);
  font-size:clamp(25px,2.7vw,42px);
  line-height:.95;
  letter-spacing:-.055em;
}
.why-v34-visual figcaption span{
  color:var(--secondary);
  font-size:14px;
  line-height:1.42;
}

.why-v34-next-canvas{
  position:absolute;
  inset:18px 18px 116px;
  display:grid;
  place-items:center;
  padding:clamp(24px,4vw,58px);
  border:1px solid rgba(107,232,255,.12);
  background:
    radial-gradient(circle at 50% 38%,rgba(24,201,245,.14),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.016));
}
html[data-theme="light"] .why-v34-next-canvas{
  background:
    radial-gradient(circle at 50% 38%,rgba(14,165,233,.11),transparent 44%),
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.56));
}
.next-main{
  width:min(560px,78%);
  min-height:260px;
  display:grid;
  place-content:center;
  text-align:center;
  padding:36px;
  border:1px solid rgba(107,232,255,.16);
  background:rgba(5,11,23,.62);
  box-shadow:0 0 80px rgba(24,201,245,.14),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="light"] .next-main{
  background:rgba(255,255,255,.72);
  border-color:rgba(15,23,42,.08);
}
.next-main span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.next-main strong{
  display:block;
  margin-top:12px;
  color:var(--text);
  font-size:clamp(34px,4vw,64px);
  line-height:.94;
  letter-spacing:-.07em;
}
.next-paths{
  position:absolute;
  left:50%;
  bottom:clamp(22px,3vw,46px);
  transform:translateX(-50%);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  width:min(640px,88%);
}
.next-paths b{
  padding:10px 13px;
  border:1px solid rgba(107,232,255,.12);
  color:var(--text);
  background:rgba(5,11,23,.58);
  font-size:13px;
  border-radius:999px;
}
html[data-theme="light"] .next-paths b{
  background:rgba(255,255,255,.70);
  border-color:rgba(15,23,42,.08);
}

.spx-why-v34-note{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  color:var(--text-soft);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.6;
}

/* Keep A8.31 smooth reveal behavior, tuned for the new compact section. */
.spx-why-v34 .spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
  will-change:transform,opacity;
}
.spx-why-v34.reveal.is-visible .spx-scroll-rise,
.spx-why-v34 .spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.spx-why-v34.reveal.is-visible .spx-scroll-rise:nth-child(2){transition-delay:.08s}
.spx-why-v34.reveal.is-visible .spx-scroll-rise:nth-child(3){transition-delay:.14s}

@keyframes spxWhyV34Glow{
  from{transform:translate3d(-1.3%,.6%,0) scale(1);opacity:.25}
  to{transform:translate3d(1.3%,-.6%,0) scale(1.07);opacity:.38}
}

@media(max-width:1180px){
  .spx-why-v34-story{
    grid-template-columns:minmax(0,1fr);
  }
  .spx-why-v34-sticky{
    position:relative;
    top:auto;
    min-height:auto;
    order:-1;
  }
  .why-v34-device{
    min-height:clamp(520px,74vw,760px);
  }
  .spx-why-v34-copy{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .why-v34-step{
    min-height:200px;
  }
}
@media(max-width:820px){
  .spx-why-section.spx-why-v34{
    margin-top:-250px!important;
    padding-top:300px!important;
  }
  .spx-why-v34-copy{
    grid-template-columns:1fr;
  }
  .why-v34-device{
    min-height:620px;
  }
  .why-v34-visual img,
  .why-v34-next-canvas{
    inset:16px 16px 128px;
    height:calc(100% - 144px);
    width:calc(100% - 32px);
  }
  .why-v34-visual figcaption{
    left:16px;
    right:16px;
    bottom:16px;
  }
}
@media(max-width:620px){
  .spx-why-v34-head h2{
    font-size:clamp(42px,13vw,62px);
  }
  .why-v34-device{
    min-height:560px;
  }
  .why-v34-visual figcaption b{
    font-size:28px;
  }
  .next-main{
    width:90%;
    min-height:220px;
    padding:26px;
  }
  .next-main strong{
    font-size:36px;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v34-bg,
  .spx-why-section.spx-why-v34::before,
  .spx-why-section.spx-why-v34::after{
    transform:none!important;
  }
  .why-v34-glow{
    animation:none!important;
  }
  .spx-why-v34 .spx-scroll-rise{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* ==========================================================================
   A8.35 — seam fix + right-edge sticky tool alignment + leaner Why section
   ========================================================================== */

/* Blend hero and Why more aggressively to reduce the visible horizontal seam. */
.spx-v26-bottom-fade{
  height:860px!important;
  bottom:-4px!important;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.05) 16%,
      rgba(7,17,31,.14) 34%,
      rgba(7,17,31,.34) 54%,
      rgba(7,17,31,.70) 76%,
      rgba(7,17,31,.94) 92%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.07) 18%,
      rgba(246,248,252,.18) 36%,
      rgba(238,243,250,.42) 58%,
      rgba(238,243,250,.78) 80%,
      rgba(238,243,250,.97) 92%,
      #eef3fa 100%)!important;
}

.spx-why-section.spx-why-v34{
  margin-top:-560px!important;
  padding-top:560px!important;
  box-shadow:0 -150px 200px -60px rgba(7,17,31,.95)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v34{
  box-shadow:0 -150px 200px -60px rgba(238,243,250,.98)!important;
}
.spx-why-section.spx-why-v34::before{
  top:-180px!important;
  height:760px!important;
  opacity:.95;
  filter:blur(8px);
}
.spx-why-v34-bg{
  inset:-34% -12% -8%!important;
}
.why-v34-hero-tail{
  top:-8%!important;
  height:68%!important;
  opacity:.70;
  filter:blur(30px) saturate(132%);
}

/* Give the right sticky tool more dominance and pull it toward the screen edge. */
.spx-why-v34-shell{
  width:min(1580px,100%)!important;
}
.spx-why-v34-story{
  grid-template-columns:minmax(230px,.34fr) minmax(760px,1.66fr)!important;
  gap:clamp(20px,3.6vw,56px)!important;
}
.spx-why-v34-copy{
  max-width:420px;
  padding-top:clamp(18px,2.2vw,32px)!important;
}
.why-v34-step{
  min-height:clamp(126px,14vh,174px)!important;
  padding:18px 22px!important;
}
.why-v34-step h3{
  font-size:clamp(24px,2.4vw,40px)!important;
  max-width:360px;
}
.why-v34-step p{
  max-width:300px;
  font-size:14px!important;
}

.spx-why-v34-sticky{
  justify-self:end!important;
  width:min(1120px, calc(100vw - 20px))!important;
  margin-right:clamp(-120px, -7vw, -28px)!important;
  top:clamp(64px, calc(50vh - 360px), 126px)!important;
  min-height:clamp(660px,78vh,860px)!important;
}
.why-v34-device{
  min-height:clamp(680px,67vw,880px)!important;
}
.why-v34-visual img{
  inset:16px 16px 110px!important;
  width:calc(100% - 32px)!important;
  height:calc(100% - 126px)!important;
}
.why-v34-visual figcaption{
  left:16px!important;
  right:16px!important;
  bottom:16px!important;
  padding:18px 20px!important;
}
.why-v34-visual figcaption b{
  font-size:clamp(28px,2.8vw,46px)!important;
}
.why-v34-next-canvas{
  inset:16px 16px 110px!important;
  width:calc(100% - 32px)!important;
  height:calc(100% - 126px)!important;
}
.next-main{
  width:min(620px,80%)!important;
  min-height:300px!important;
}
.next-main strong{
  font-size:clamp(40px,4vw,70px)!important;
}

.spx-why-v34-note{
  max-width:540px!important;
  font-size:16px!important;
}

/* Keep edge-pulled layout only on large screens. */
@media(max-width:1180px){
  .spx-why-section.spx-why-v34{
    margin-top:-320px!important;
    padding-top:360px!important;
  }
  .spx-why-v34-story{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .spx-why-v34-copy{
    max-width:none;
  }
  .spx-why-v34-sticky{
    width:100%!important;
    margin-right:0!important;
    top:auto!important;
    min-height:auto!important;
  }
  .why-v34-device{
    min-height:clamp(520px,74vw,760px)!important;
  }
}
@media(max-width:820px){
  .spx-v26-bottom-fade{
    height:640px!important;
  }
  .spx-why-section.spx-why-v34{
    margin-top:-240px!important;
    padding-top:290px!important;
  }
}


/* ==========================================================================
   A8.36 — continuous hero + workflow journey + nav/logo/top-scroll polish
   ========================================================================== */

/* Navigator: larger logo, no border bottom, no hover pill, shrink on scroll. */
.site-header.spx-nav-v26{
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:background .28s var(--ease), transform .28s var(--ease), padding .28s var(--ease), box-shadow .28s var(--ease);
}
.site-header.spx-nav-v26.is-scrolled{
  background:rgba(4,10,20,.72)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
html[data-theme="light"] .site-header.spx-nav-v26.is-scrolled{
  background:rgba(255,255,255,.76)!important;
  box-shadow:0 18px 46px rgba(20,34,62,.10)!important;
}
.spx-nav-v26 .brand{
  gap:14px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  transition:transform .25s var(--ease), gap .25s var(--ease);
}
.spx-nav-v26 .brand:hover,
.spx-nav-v26 .brand:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
  transform:translateY(-1px);
}
.spx-nav-v26 .brand img{
  width:50px!important;
  height:50px!important;
  transition:width .25s var(--ease), height .25s var(--ease), transform .25s var(--ease);
}
.spx-nav-v26 .brand span{
  font-size:34px!important;
  line-height:1!important;
  letter-spacing:-.06em!important;
  transition:font-size .25s var(--ease), opacity .25s var(--ease);
}
.site-header.spx-nav-v26.is-scrolled .brand img{
  width:40px!important;
  height:40px!important;
}
.site-header.spx-nav-v26.is-scrolled .brand span{
  font-size:28px!important;
}
.spx-nav-v26 .site-nav>a,
.spx-nav-v26 .nav-group>a{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 0!important;
}
.spx-nav-v26 .site-nav>a:hover,
.spx-nav-v26 .nav-group:hover>a,
.spx-nav-v26 .site-nav>a:focus-visible,
.spx-nav-v26 .nav-group>a:focus-visible{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-nav-v26 .site-nav>a::before,
.spx-nav-v26 .nav-group>a::before{
  display:none!important;
}
.spx-nav-v26 .site-nav>a::after,
.spx-nav-v26 .nav-group>a::after{
  bottom:-6px!important;
}
.spx-nav-v26 .nav-actions{
  gap:12px!important;
}

/* Hero → Why as one continuous atmosphere. */
.spx-v26-bottom-fade{
  height:1020px!important;
  bottom:-6px!important;
  z-index:4;
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.05) 14%,
      rgba(7,17,31,.11) 28%,
      rgba(7,17,31,.20) 42%,
      rgba(7,17,31,.38) 58%,
      rgba(7,17,31,.62) 74%,
      rgba(7,17,31,.86) 90%,
      var(--bg-2) 100%)!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(246,248,252,0) 0%,
      rgba(246,248,252,.06) 14%,
      rgba(246,248,252,.11) 28%,
      rgba(246,248,252,.22) 44%,
      rgba(238,243,250,.44) 62%,
      rgba(238,243,250,.74) 82%,
      rgba(238,243,250,.96) 92%,
      #eef3fa 100%)!important;
}

.spx-why-section.spx-why-v36{
  position:relative;
  overflow:clip;
  isolation:isolate;
  margin-top:-760px!important;
  padding:740px var(--side) 120px!important;
  border:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(1250px 720px at 52% -16%,rgba(24,201,245,.13),transparent 66%),
    radial-gradient(1100px 680px at 88% 26%,rgba(37,99,235,.12),transparent 68%),
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.03) 12%,
      rgba(7,17,31,.09) 24%,
      rgba(7,17,31,.18) 38%,
      rgba(7,17,31,.34) 54%,
      rgba(7,17,31,.62) 72%,
      var(--bg-2) 86%,
      var(--bg) 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v36{
  background:
    radial-gradient(1250px 720px at 52% -16%,rgba(14,165,233,.11),transparent 66%),
    radial-gradient(1100px 680px at 88% 26%,rgba(37,99,235,.08),transparent 68%),
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.04) 14%,
      rgba(238,243,250,.12) 28%,
      rgba(238,243,250,.22) 42%,
      rgba(238,243,250,.42) 58%,
      rgba(238,243,250,.72) 78%,
      #eef3fa 88%,
      #f6f8fc 100%)!important;
}
.spx-why-section.spx-why-v36::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.015) 1px,transparent 1px);
  background-size:96px 96px;
  opacity:.15;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.026px),0);
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%);
}
html[data-theme="light"] .spx-why-section.spx-why-v36::before{opacity:.10}
.spx-why-v36-bg{
  position:absolute;
  inset:-32% -10% -10%;
  z-index:0;
  pointer-events:none;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.072px),0);
  will-change:transform;
}
.why-v36-hero-tail{
  position:absolute;
  left:-10%;
  right:-10%;
  top:-8%;
  height:66%;
  display:block;
  background:
    linear-gradient(112deg,
      transparent 0 24%,
      rgba(37,99,235,.04) 36%,
      rgba(24,201,245,.12) 43%,
      rgba(215,244,255,.14) 49%,
      rgba(86,176,229,.10) 55%,
      transparent 74% 100%),
    radial-gradient(ellipse at 50% 22%,rgba(107,232,255,.10),transparent 46%);
  filter:blur(34px) saturate(130%);
  opacity:.72;
  transform:rotate(-18deg);
}
.why-v36-glow{
  position:absolute;
  display:block;
  border-radius:999px;
  filter:blur(62px);
  opacity:.30;
  animation:spxWhyV36Glow 24s ease-in-out infinite alternate;
}
.why-v36-glow.glow-a{width:44vw;height:14vw;left:4%;top:10%;background:rgba(24,201,245,.12)}
.why-v36-glow.glow-b{width:36vw;height:13vw;right:7%;top:36%;background:rgba(37,99,235,.12);animation-delay:-8s}
.why-v36-mist{
  position:absolute;left:10%;right:10%;top:20%;height:36%;display:block;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.06),transparent 70%);
  filter:blur(24px);opacity:.58;
}
.why-v36-grid{
  position:absolute;left:5%;right:5%;bottom:7%;height:38%;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px);
  background-size:86px 86px;
  transform:perspective(1000px) rotateX(66deg);
  transform-origin:center bottom;
  opacity:.12;
  mask-image:linear-gradient(180deg,transparent 0%,black 36%,transparent 100%);
}

.spx-why-v36-shell{
  position:relative;
  z-index:2;
  width:min(1640px,100%);
  margin:0 auto;
  display:grid;
  gap:34px;
}
.spx-why-v36-head{
  max-width:900px;
}
.spx-why-v36-head h2{
  margin:14px 0 0;
  max-width:980px;
  font-size:clamp(52px,6.4vw,102px);
  line-height:.92;
  letter-spacing:-.085em;
  text-wrap:balance;
}
.spx-why-v36-head p{
  margin:20px 0 0;
  max-width:600px;
  color:var(--text-soft);
  font-size:clamp(17px,1.2vw,21px);
  line-height:1.5;
}

.spx-why-v36-journey{
  position:relative;
  display:grid;
  grid-template-columns:minmax(320px,.62fr) minmax(760px,1.38fr);
  gap:clamp(20px,4vw,56px);
  align-items:start;
}
.spx-why-v36-steps{
  display:grid;
  gap:0;
  padding:8px 0 0;
}
.why-v36-step{
  min-height:72vh;
  display:grid;
  align-content:center;
  padding:26px 28px;
  border-left:2px solid rgba(107,232,255,.10);
  opacity:.38;
  transition:opacity .38s var(--ease), transform .38s var(--ease), border-color .38s var(--ease), background .38s var(--ease);
  background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v36-step{
  border-left-color:rgba(15,23,42,.08);
  background:linear-gradient(90deg,rgba(255,255,255,.46),rgba(255,255,255,0));
}
.why-v36-step.is-active{
  opacity:1;
  transform:translateX(8px);
  border-left-color:rgba(107,232,255,.58);
  background:linear-gradient(90deg,rgba(24,201,245,.08),rgba(255,255,255,0));
}
html[data-theme="light"] .why-v36-step.is-active{
  border-left-color:rgba(14,165,233,.42);
  background:linear-gradient(90deg,rgba(14,165,233,.08),rgba(255,255,255,0));
}
.why-v36-step span{
  color:var(--cyan-2);
  font-size:12px;
  font-weight:960;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.why-v36-step h3{
  margin:12px 0 0;
  color:var(--text);
  font-size:clamp(34px,3.35vw,58px);
  line-height:.96;
  letter-spacing:-.07em;
  text-wrap:balance;
  max-width:470px;
}
.why-v36-step p{
  margin:14px 0 0;
  max-width:410px;
  color:var(--secondary);
  font-size:clamp(15px,1vw,17px);
  line-height:1.52;
}
.why-v36-step ul{
  display:grid;
  gap:10px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.why-v36-step li{
  position:relative;
  padding-left:22px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.44;
}
.why-v36-step li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--cyan-2);
  box-shadow:0 0 16px rgba(24,201,245,.35);
}
.why-v36-step small{
  display:block;
  margin-top:14px;
  color:var(--secondary);
  font-size:13px;
  line-height:1.45;
}

.spx-why-v36-sticky{
  position:sticky;
  top:calc(50vh - 300px);
  justify-self:end;
  width:min(1160px, calc(100vw - 24px));
  margin-right:clamp(-170px,-9vw,-54px);
  min-height:78vh;
  display:grid;
  align-items:center;
}
.why-v36-stage{
  position:relative;
  width:100%;
  min-height:650px;
  border:1px solid rgba(107,232,255,.14);
  background:
    radial-gradient(circle at 50% 42%,rgba(24,201,245,.11),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:0 46px 140px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
html[data-theme="light"] .why-v36-stage{
  border-color:rgba(15,23,42,.09);
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.56));
  box-shadow:0 30px 96px rgba(22,34,64,.12),inset 0 1px 0 rgba(255,255,255,.72);
}
.why-v36-stage::before{
  content:"";
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,13,.22),transparent 22%,transparent 82%,rgba(2,5,13,.18)),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%,rgba(0,0,0,.08));
}
html[data-theme="light"] .why-v36-stage::before{
  background:
    linear-gradient(90deg,rgba(246,248,252,.34),transparent 22%,transparent 82%,rgba(246,248,252,.26)),
    linear-gradient(180deg,rgba(255,255,255,.22),transparent 34%,rgba(15,23,42,.025));
}
.why-v36-stage-top{
  position:relative;z-index:6;height:50px;display:flex;align-items:center;gap:10px;
  padding:0 18px;border-bottom:1px solid rgba(107,232,255,.12);background:rgba(5,11,23,.72);
  backdrop-filter:blur(12px);
}
html[data-theme="light"] .why-v36-stage-top{background:rgba(255,255,255,.74);border-bottom-color:rgba(15,23,42,.08)}
.why-v36-stage-top span{width:9px;height:9px;border-radius:50%;background:rgba(107,232,255,.55)}
.why-v36-stage-top span:nth-child(2){opacity:.58}
.why-v36-stage-top span:nth-child(3){opacity:.34}
.why-v36-stage-top strong{margin-left:8px;color:var(--text);font-size:13px;font-weight:950;letter-spacing:.02em}

.why-v36-visuals{position:absolute;inset:50px 0 0}
.why-v36-visual{
  position:absolute;inset:0;margin:0;opacity:0;transform:translateY(20px) scale(.992);
  transition:opacity .44s var(--ease), transform .44s var(--ease);pointer-events:none;
}
.why-v36-visual.is-active{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.why-v36-visual img{
  position:absolute;
  inset:18px 18px 110px;
  width:calc(100% - 36px);
  height:calc(100% - 128px);
  object-fit:contain;
  object-position:center;
  border:1px solid rgba(107,232,255,.10);
  background:rgba(4,10,20,.78);
  box-shadow:0 24px 74px rgba(0,0,0,.22);
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.82);
  border-color:rgba(15,23,42,.08);
}
.why-v36-visual figcaption{
  position:absolute;left:18px;right:18px;bottom:18px;z-index:6;display:grid;gap:6px;
  padding:18px 20px;border:1px solid rgba(107,232,255,.12);background:rgba(5,11,23,.74);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.08);
}
.why-v36-visual figcaption b{
  color:var(--text);
  font-size:clamp(26px,2.8vw,44px);
  line-height:.94;
  letter-spacing:-.055em;
}
.why-v36-visual figcaption span{
  color:var(--secondary);
  font-size:14px;
  line-height:1.45;
}

/* Back-to-top button */
.spx-scroll-top{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(107,232,255,.18);
  background:rgba(4,10,20,.76);
  color:var(--text);
  box-shadow:0 20px 46px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  font-size:22px;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease), border-color .26s var(--ease), background .26s var(--ease);
}
.spx-scroll-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.spx-scroll-top:hover,
.spx-scroll-top:focus-visible{
  border-color:rgba(107,232,255,.38);
  background:rgba(7,16,31,.92);
}
html[data-theme="light"] .spx-scroll-top{
  background:rgba(255,255,255,.78);
  border-color:rgba(15,23,42,.10);
  box-shadow:0 18px 38px rgba(22,34,64,.10), inset 0 1px 0 rgba(255,255,255,.72);
}

/* reveal tuning */
.spx-why-v36 .spx-scroll-rise{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.994);
  transition:opacity .82s var(--ease), transform .82s var(--ease);
}
.spx-why-v36.reveal.is-visible .spx-scroll-rise,
.spx-why-v36 .spx-scroll-rise.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

@keyframes spxWhyV36Glow{
  from{transform:translate3d(-1.2%,.5%,0) scale(1);opacity:.24}
  to{transform:translate3d(1.2%,-.5%,0) scale(1.08);opacity:.36}
}

@media(max-width:1240px){
  .spx-why-section.spx-why-v36{
    margin-top:-520px!important;
    padding-top:540px!important;
  }
  .spx-why-v36-journey{
    grid-template-columns:minmax(0,1fr);
  }
  .spx-why-v36-sticky{
    position:relative;
    top:auto;
    width:100%;
    margin-right:0;
    min-height:auto;
  }
  .why-v36-stage{
    min-height:620px;
  }
  .why-v36-step{
    min-height:50vh;
  }
}
@media(max-width:820px){
  .spx-v26-bottom-fade{height:720px!important}
  .spx-why-section.spx-why-v36{
    margin-top:-280px!important;
    padding-top:330px!important;
  }
  .spx-nav-v26 .brand img{width:42px!important;height:42px!important}
  .spx-nav-v26 .brand span{font-size:28px!important}
  .spx-why-v36-head h2{font-size:clamp(42px,12vw,64px)}
  .why-v36-step{min-height:46vh;padding:20px}
  .why-v36-step h3{font-size:clamp(30px,8vw,42px)}
  .why-v36-stage{min-height:540px}
  .why-v36-visual img{inset:14px 14px 102px}
  .why-v36-visual figcaption{left:14px;right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .spx-why-v36-bg,.spx-why-section.spx-why-v36::before{transform:none!important}
  .why-v36-glow{animation:none!important}
  .spx-scroll-top{transition:none!important}
}


/* ==========================================================================
   A8.37 — logged-in user menu + single cosmic hero/why atmosphere
   ========================================================================== */

/* Single continuous cosmic background for homepage hero + Why. */
.spx-home-main{
  position:relative;
  overflow:clip;
  background:#07111f;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa;
}
.spx-home-main::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  height:min(3600px,320vh);
  background:
    radial-gradient(1100px 720px at 54% 3%,rgba(24,201,245,.18),transparent 64%),
    radial-gradient(1050px 660px at 80% 18%,rgba(37,99,235,.15),transparent 66%),
    radial-gradient(900px 620px at 18% 48%,rgba(69,212,255,.10),transparent 66%),
    linear-gradient(112deg,
      transparent 0 23%,
      rgba(37,99,235,.035) 35%,
      rgba(24,201,245,.14) 43%,
      rgba(215,244,255,.16) 49%,
      rgba(77,164,220,.11) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#02050d 0%,#06101d 46%,#07111f 72%,#07111f 100%);
  filter:saturate(126%);
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.075px),0);
  will-change:transform;
}
.spx-home-main::after{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:0;
  left:0;
  right:0;
  height:min(3600px,320vh);
  opacity:.54;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.58) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px);
  background-size:
    470px 360px,
    390px 320px,
    520px 410px,
    460px 380px,
    540px 430px,
    96px 96px,
    96px 96px;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.11px),0);
  animation:spxHomeStarDrift 34s linear infinite;
  will-change:transform,background-position;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(1100px 720px at 54% 3%,rgba(14,165,233,.14),transparent 64%),
    radial-gradient(1050px 660px at 80% 18%,rgba(37,99,235,.09),transparent 66%),
    radial-gradient(900px 620px at 18% 48%,rgba(69,212,255,.08),transparent 66%),
    linear-gradient(112deg,
      transparent 0 23%,
      rgba(37,99,235,.026) 35%,
      rgba(14,165,233,.10) 43%,
      rgba(255,255,255,.30) 49%,
      rgba(77,164,220,.08) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 50%,#eef3fa 100%);
}
html[data-theme="light"] .spx-home-main::after{
  opacity:.30;
}
.spx-home-main > *{
  position:relative;
  z-index:1;
}
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
}
.spx-home-main .spx-why-section.spx-why-v36{
  box-shadow:none!important;
}
.spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(7,17,31,0) 0%,
      rgba(7,17,31,.035) 25%,
      rgba(7,17,31,.070) 48%,
      rgba(7,17,31,.10) 68%,
      rgba(7,17,31,0) 100%)!important;
  height:1060px!important;
  bottom:-8px!important;
}
html[data-theme="light"] .spx-v26-bottom-fade{
  background:
    linear-gradient(180deg,
      rgba(238,243,250,0) 0%,
      rgba(238,243,250,.06) 30%,
      rgba(238,243,250,.10) 52%,
      rgba(238,243,250,.04) 100%)!important;
}
.spx-why-section.spx-why-v36{
  margin-top:-780px!important;
  padding-top:760px!important;
}
.spx-why-v36-bg{
  inset:-40% -12% -12%!important;
}
.why-v36-hero-tail{
  opacity:.86!important;
  height:76%!important;
  filter:blur(38px) saturate(140%)!important;
}

/* More alive hero/why nebula without adding another heavy canvas. */
.spx-v26-sky::before{
  opacity:.86!important;
  filter:blur(24px) saturate(148%)!important;
}
.v26-cloud{
  opacity:.48!important;
}
.why-v36-glow{
  opacity:.42!important;
}
.why-v36-mist{
  opacity:.72!important;
}

/* Logged-in public nav user menu. */
.nav-user-menu{
  position:relative;
}
.nav-user-trigger{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px 6px 6px;
  border:1px solid rgba(107,232,255,.13);
  background:rgba(255,255,255,.045);
  color:var(--text);
  cursor:pointer;
  font-weight:950;
  letter-spacing:-.02em;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.nav-user-trigger:hover,
.nav-user-menu:focus-within .nav-user-trigger{
  background:rgba(24,201,245,.08);
  border-color:rgba(107,232,255,.28);
  transform:translateY(-1px);
}
.nav-user-trigger img{
  width:34px;
  height:34px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(107,232,255,.18),0 0 20px rgba(24,201,245,.13);
}
.nav-user-trigger span{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spx-icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  position:relative;
}
.spx-icon-chevron::before{
  content:"";
  position:absolute;
  left:5px;
  top:5px;
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.74;
}
.spx-icon-dashboard::before{
  content:"";
  position:absolute;
  inset:3px;
  border:2px solid currentColor;
  border-radius:4px;
}
.spx-icon-dashboard::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  top:8px;
  height:2px;
  background:currentColor;
  box-shadow:0 4px 0 currentColor;
}
.spx-icon-logout::before{
  content:"";
  position:absolute;
  left:2px;
  top:4px;
  width:8px;
  height:10px;
  border:2px solid currentColor;
  border-right:0;
  border-radius:3px 0 0 3px;
}
.spx-icon-logout::after{
  content:"";
  position:absolute;
  right:1px;
  top:8px;
  width:11px;
  height:2px;
  background:currentColor;
  box-shadow:4px -4px 0 -1px transparent;
}
.nav-user-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:220px;
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid rgba(107,232,255,.14);
  background:rgba(5,11,23,.96);
  box-shadow:0 28px 86px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
  z-index:220;
}
html[data-theme="light"] .nav-user-dropdown{
  background:rgba(255,255,255,.98);
  border-color:rgba(15,23,42,.09);
  box-shadow:0 24px 70px rgba(20,34,62,.14), inset 0 1px 0 rgba(255,255,255,.72);
}
.nav-user-menu:hover .nav-user-dropdown,
.nav-user-menu:focus-within .nav-user-dropdown,
.nav-user-menu.is-open .nav-user-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-user-menu.is-open .spx-icon-chevron::before,
.nav-user-menu:hover .spx-icon-chevron::before,
.nav-user-menu:focus-within .spx-icon-chevron::before{
  transform:rotate(225deg);
  top:7px;
}
.nav-user-dropdown a{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:var(--text-soft);
  text-decoration:none;
  font-weight:900;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav-user-dropdown a:hover,
.nav-user-dropdown a:focus-visible{
  color:var(--text);
  background:rgba(24,201,245,.09);
  transform:translateX(2px);
}

/* Why stage: less static block, more animated product surface. */
.spx-why-v36-sticky{
  perspective:1200px;
}
.why-v36-stage{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:translateZ(0);
}
.why-v36-stage::before{
  display:none!important;
}
.why-v36-stage::after{
  content:"";
  position:absolute;
  inset:6% -3% 2% 4%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 60% 42%,rgba(24,201,245,.22),transparent 48%),
    radial-gradient(circle at 82% 18%,rgba(37,99,235,.16),transparent 44%);
  filter:blur(34px);
  opacity:.72;
  animation:spxWhyStagePulse 8s ease-in-out infinite alternate;
}
.why-v36-stage-top{
  position:absolute!important;
  left:28px;
  top:18px;
  z-index:8!important;
  width:auto;
  height:42px!important;
  border:1px solid rgba(107,232,255,.13)!important;
  background:rgba(5,11,23,.58)!important;
  box-shadow:0 18px 46px rgba(0,0,0,.18);
}
html[data-theme="light"] .why-v36-stage-top{
  background:rgba(255,255,255,.70)!important;
}
.why-v36-visuals{
  inset:0!important;
  overflow:visible;
}
.why-v36-visual{
  transform:translate3d(44px,18px,0) scale(.985);
}
.why-v36-visual.is-active{
  transform:translate3d(0,0,0) scale(1);
}
.why-v36-visual::before{
  content:"";
  position:absolute;
  inset:5% 0 16% 8%;
  border:1px solid rgba(107,232,255,.10);
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px),
    rgba(5,11,23,.20);
  background-size:52px 52px;
  transform:translateX(7%);
  z-index:0;
  opacity:.72;
}
html[data-theme="light"] .why-v36-visual::before{
  background:
    linear-gradient(rgba(14,165,233,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,.020) 1px,transparent 1px),
    rgba(255,255,255,.28);
}
.why-v36-visual img{
  z-index:2;
  inset:38px -36px 118px 26px!important;
  width:calc(100% + 10px)!important;
  height:calc(100% - 156px)!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.76)!important;
  box-shadow:0 32px 94px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.035) inset;
  transform:translate3d(0,0,0);
  animation:spxWhyVisualFloat 7s ease-in-out infinite alternate;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 28px 70px rgba(20,34,62,.14), 0 0 0 1px rgba(255,255,255,.72) inset;
}
.why-v36-visual figcaption{
  z-index:6;
  left:40px!important;
  right:60px!important;
  bottom:24px!important;
  border:1px solid rgba(107,232,255,.14)!important;
  background:rgba(5,11,23,.72)!important;
  box-shadow:0 22px 66px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.80)!important;
  border-color:rgba(15,23,42,.09)!important;
}

/* Why headers: inactive turns into outline, active becomes filled during scroll. */
.why-v36-step h3{
  transition:color .38s var(--ease), -webkit-text-stroke-color .38s var(--ease), opacity .38s var(--ease), transform .38s var(--ease);
}
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.38);
  text-shadow:none;
  opacity:.86;
}
html[data-theme="light"] .why-v36-step:not(.is-active) h3{
  -webkit-text-stroke-color:rgba(16,24,40,.34);
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent;
  opacity:1;
}

@keyframes spxHomeStarDrift{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to{background-position:90px 120px,-80px 70px,70px -90px,-120px 100px,100px 80px,96px 96px,96px 96px}
}
@keyframes spxWhyStagePulse{
  from{opacity:.54;transform:translate3d(-1%,1%,0) scale(.98)}
  to{opacity:.82;transform:translate3d(1%,-1%,0) scale(1.04)}
}
@keyframes spxWhyVisualFloat{
  from{transform:translate3d(0,-4px,0)}
  to{transform:translate3d(0,6px,0)}
}

@media(max-width:1240px){
  .why-v36-visual img{
    inset:38px 18px 118px 18px!important;
    width:calc(100% - 36px)!important;
  }
  .why-v36-visual figcaption{
    left:24px!important;
    right:24px!important;
  }
}
@media(max-width:820px){
  .spx-home-main::before,
  .spx-home-main::after{
    height:2600px;
  }
  .nav-user-trigger span{
    max-width:94px;
  }
  .spx-nav-v26 .brand span{
    font-size:27px!important;
  }
  .site-header.spx-nav-v26.is-scrolled .brand span{
    font-size:22px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-stage::after{
    animation:none!important;
    transform:none!important;
  }
  .why-v36-visual img{
    animation:none!important;
  }
}


/* ==========================================================================
   A8.38 — fixed cosmic background flow / no repeated seam
   ========================================================================== */

/*
  The previous home atmosphere used repeated/star/grid background layers on a tall
  scrolling pseudo-element. That caused visible repetition and a horizontal seam
  around the hero → Why area. This pass replaces that behavior with one fixed,
  viewport-scale cosmic background that moves only slightly slower than content.
*/

.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}

/* Main fixed nebula/milky-way field. No repeating backgrounds. */
.spx-home-main::before{
  content:""!important;
  position:fixed!important;
  inset:-18vh -10vw -22vh -10vw!important;
  z-index:-2!important;
  pointer-events:none!important;
  height:auto!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(1150px 820px at 72% 14%,rgba(37,99,235,.24),transparent 64%),
    radial-gradient(1050px 760px at 24% 52%,rgba(24,201,245,.16),transparent 67%),
    radial-gradient(840px 560px at 48% 38%,rgba(180,224,255,.10),transparent 66%),
    linear-gradient(116deg,
      transparent 0 22%,
      rgba(37,99,235,.04) 34%,
      rgba(24,201,245,.16) 43%,
      rgba(220,245,255,.20) 49%,
      rgba(84,168,226,.13) 56%,
      rgba(37,99,235,.05) 66%,
      transparent 78% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.13),transparent 58%),
    linear-gradient(180deg,#02050d 0%,#06111f 48%,#07111f 100%)!important;
  filter:saturate(132%) contrast(1.02)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.035px),0) scale(1.02)!important;
  will-change:transform!important;
}

/* Star/noise layer: fixed, not repeated, very subtle. */
.spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  height:auto!important;
  opacity:.50!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 7% 18%,rgba(255,255,255,.66) 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 64%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 22% 34%,rgba(255,255,255,.40) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 12%,rgba(107,232,255,.42) 0 1px,transparent 1.6px),
    radial-gradient(circle at 43% 78%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    radial-gradient(circle at 58% 23%,rgba(255,255,255,.54) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 46%,rgba(107,232,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 16%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 91% 72%,rgba(107,232,255,.44) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 88%,rgba(255,255,255,.34) 0 1px,transparent 1.5px),
    linear-gradient(180deg,rgba(255,255,255,.030),transparent 42%,rgba(107,232,255,.018))!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.055px),0) scale(1.015)!important;
  animation:spxA838StarBreathe 18s ease-in-out infinite alternate!important;
  will-change:transform,opacity!important;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(1150px 820px at 72% 14%,rgba(37,99,235,.12),transparent 64%),
    radial-gradient(1050px 760px at 24% 52%,rgba(14,165,233,.10),transparent 67%),
    radial-gradient(840px 560px at 48% 38%,rgba(255,255,255,.34),transparent 66%),
    linear-gradient(116deg,
      transparent 0 22%,
      rgba(37,99,235,.025) 34%,
      rgba(14,165,233,.10) 43%,
      rgba(255,255,255,.50) 49%,
      rgba(84,168,226,.08) 56%,
      rgba(37,99,235,.035) 66%,
      transparent 78% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(14,165,233,.08),transparent 58%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 54%,#eef3fa 100%)!important;
}
html[data-theme="light"] .spx-home-main::after{
  opacity:.22!important;
}

/* Remove the old sectional background/fade behavior that created the horizontal line. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-v26-bottom-fade{
  height:0!important;
  opacity:0!important;
  display:none!important;
  background:none!important;
}
.spx-why-section.spx-why-v36{
  margin-top:-520px!important;
  padding-top:520px!important;
}

/* Keep subtle section-local depth without creating a separate background seam. */
.spx-why-section.spx-why-v36::before{
  opacity:.06!important;
  background:
    linear-gradient(rgba(107,232,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px)!important;
  background-size:96px 96px!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 26%,black 76%,transparent 100%)!important;
}
html[data-theme="light"] .spx-why-section.spx-why-v36::before{
  opacity:.045!important;
}
.spx-why-v36-bg{
  opacity:.82!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.030px),0)!important;
}
.why-v36-hero-tail{
  display:none!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.28!important;
}

/* Hero canvas becomes an accent only; the fixed shared background now carries the scene. */
.spx-hero-v26 .spx-hero-space{
  opacity:.52!important;
}
.spx-v26-sky::before{
  opacity:.40!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.10!important;
}

/* No repeated grid in the shared atmosphere. */
.spx-home-main .why-v36-grid,
.spx-home-main .v26-grid-plane,
.spx-home-main .spx-v26-sky::after{
  background-repeat:no-repeat!important;
}

/* Make the right-side Why visual a little more alive, but keep it lightweight. */
.why-v36-visual img{
  transform-origin:center!important;
  transition:opacity .44s var(--ease), transform .44s var(--ease), filter .44s var(--ease)!important;
}
.why-v36-visual.is-active img{
  filter:saturate(1.04) contrast(1.03)!important;
}
.why-v36-stage::after{
  opacity:.84!important;
}

/* Back-to-top should sit above the cosmic background and page visuals. */
.spx-scroll-top{
  z-index:260!important;
}

@keyframes spxA838StarBreathe{
  from{opacity:.38;filter:brightness(.95)}
  to{opacity:.58;filter:brightness(1.1)}
}

@media(max-width:820px){
  .spx-home-main::before{
    inset:-12vh -18vw -18vh -18vw!important;
    transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.025px),0) scale(1.03)!important;
  }
  .spx-home-main::after{
    opacity:.34!important;
  }
  .spx-why-section.spx-why-v36{
    margin-top:-260px!important;
    padding-top:300px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.39 — fixed non-repeating bg, no hero overlay, slower Why journey + progress
   ========================================================================== */

/* Use the shared home atmosphere as a real fixed layer ABOVE the main background,
   not behind the body. This prevents fallback/section backgrounds from creating
   visible repeated bands or seams. */
.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before,
.spx-home-main::after{
  z-index:0!important;
  pointer-events:none!important;
}
.spx-home-main::before{
  position:fixed!important;
  inset:-22vh -12vw -24vh -12vw!important;
  height:auto!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background:
    radial-gradient(1250px 840px at 70% 10%,rgba(37,99,235,.25),transparent 64%),
    radial-gradient(1120px 760px at 20% 50%,rgba(24,201,245,.17),transparent 67%),
    radial-gradient(900px 620px at 52% 38%,rgba(210,242,255,.11),transparent 66%),
    linear-gradient(115deg,
      transparent 0 20%,
      rgba(37,99,235,.045) 33%,
      rgba(24,201,245,.18) 43%,
      rgba(228,248,255,.22) 49%,
      rgba(84,168,226,.14) 56%,
      rgba(37,99,235,.055) 67%,
      transparent 80% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.14),transparent 58%),
    linear-gradient(180deg,#02050d 0%,#06111f 52%,#07111f 100%)!important;
  filter:saturate(136%) contrast(1.03)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.028px),0) scale(1.035)!important;
  will-change:transform!important;
}
.spx-home-main::after{
  position:fixed!important;
  inset:0!important;
  height:auto!important;
  opacity:.46!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 7% 18%,rgba(255,255,255,.64) 0 1px,transparent 1.7px),
    radial-gradient(circle at 14% 64%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 22% 34%,rgba(255,255,255,.38) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 12%,rgba(107,232,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 43% 78%,rgba(255,255,255,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 58% 23%,rgba(255,255,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 46%,rgba(107,232,255,.36) 0 1px,transparent 1.6px),
    radial-gradient(circle at 84% 16%,rgba(255,255,255,.52) 0 1px,transparent 1.7px),
    radial-gradient(circle at 91% 72%,rgba(107,232,255,.38) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 88%,rgba(255,255,255,.30) 0 1px,transparent 1.5px)!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.045px),0) scale(1.02)!important;
  animation:spxA839StarBreathe 20s ease-in-out infinite alternate!important;
}
.spx-home-main > *{
  position:relative!important;
  z-index:2!important;
}

/* Make hero and Why fully transparent over the same fixed layer and prevent
   the negative-overlap Why section from blocking hero copy/buttons. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
}
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
  margin-top:-420px!important;
  padding-top:420px!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

/* Remove seam creators entirely. */
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid{
  display:none!important;
  opacity:0!important;
  background:none!important;
}
.spx-why-v36-bg{
  opacity:.46!important;
  transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.020px),0)!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.18!important;
}

/* Why title: no more huge wrapped sentence. */
.spx-why-v36-head{
  max-width:880px!important;
}
.spx-why-v36-head h2{
  max-width:780px!important;
  font-size:clamp(48px,5.8vw,92px)!important;
  line-height:.90!important;
}
.spx-why-v36-head p{
  max-width:760px!important;
  font-size:clamp(17px,1.25vw,22px)!important;
}

/* Slower, more controlled story scroll. */
.spx-why-v36-journey{
  grid-template-columns:minmax(360px,.58fr) minmax(760px,1.42fr)!important;
  gap:clamp(22px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:relative!important;
  padding-left:34px!important;
}
.why-v36-step{
  min-height:105vh!important;
  padding:32px 26px 32px 34px!important;
  border-left:0!important;
  background:transparent!important;
  scroll-margin-top:18vh!important;
}
.why-v36-step.is-active{
  transform:translateX(4px)!important;
  background:linear-gradient(90deg,rgba(24,201,245,.045),rgba(255,255,255,0))!important;
}
html[data-theme="light"] .why-v36-step.is-active{
  background:linear-gradient(90deg,rgba(14,165,233,.06),rgba(255,255,255,0))!important;
}
.why-v36-step h3{
  max-width:520px!important;
  font-size:clamp(32px,3.05vw,54px)!important;
}
.why-v36-step p{
  max-width:460px!important;
}
.why-v36-step ul{
  max-width:440px!important;
}

/* Progress rail in the left content. */
.why-v39-progress{
  position:absolute;
  left:8px;
  top:clamp(42px,8vh,90px);
  bottom:clamp(42px,8vh,90px);
  width:2px;
  border-radius:999px;
  background:rgba(107,232,255,.13);
  overflow:hidden;
  transform:translateZ(0);
}
.why-v39-progress span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:calc(var(--why-progress,0) * 100%);
  border-radius:999px;
  background:linear-gradient(180deg,#18c9f5,#2563eb);
  box-shadow:0 0 20px rgba(24,201,245,.45);
  transition:height .12s linear;
}
html[data-theme="light"] .why-v39-progress{
  background:rgba(15,23,42,.12);
}

/* Right side: no more "image in a block". Screenshots float as product surfaces
   that come out of the right side. */
.why-v36-stage{
  min-height:clamp(680px,74vh,860px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.why-v36-stage::before{
  display:none!important;
}
.why-v36-stage::after{
  inset:8% -12% 8% 16%!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 55% 48%,rgba(24,201,245,.24),transparent 46%),
    radial-gradient(circle at 80% 28%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(42px)!important;
  opacity:.70!important;
}
.why-v36-stage-top{
  left:auto!important;
  right:clamp(22px,4vw,74px)!important;
  top:20px!important;
  height:42px!important;
  border-radius:999px!important;
  opacity:.82;
}
.why-v36-visuals{
  inset:0!important;
  overflow:visible!important;
}
.why-v36-visual{
  transform:translate3d(92px,18px,0) scale(.98)!important;
  transition:opacity .50s var(--ease), transform .50s var(--ease)!important;
}
.why-v36-visual.is-active{
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual::before{
  inset:10% -10% 18% 18%!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.020) 1px,transparent 1px)!important;
  background-size:62px 62px!important;
  opacity:.42!important;
}
.why-v36-visual img{
  inset:54px -150px 100px 34px!important;
  width:calc(100% + 116px)!important;
  height:calc(100% - 154px)!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  background:transparent!important;
  box-shadow:0 42px 110px rgba(0,0,0,.34)!important;
  animation:spxA839VisualFloat 8s ease-in-out infinite alternate!important;
}
html[data-theme="light"] .why-v36-visual img{
  box-shadow:0 32px 80px rgba(20,34,62,.16)!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:clamp(30px,7vw,118px)!important;
  bottom:38px!important;
  width:min(360px,48vw)!important;
  border-radius:0!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.66)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
html[data-theme="light"] .why-v36-visual figcaption{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(15,23,42,.10)!important;
}

/* Back to top: appears earlier and stays above the hero/why visuals. */
.spx-scroll-top{
  z-index:400!important;
}

@keyframes spxA839StarBreathe{
  from{opacity:.36;filter:brightness(.94)}
  to{opacity:.54;filter:brightness(1.12)}
}
@keyframes spxA839VisualFloat{
  from{transform:translate3d(0,-5px,0)}
  to{transform:translate3d(0,7px,0)}
}

@media(max-width:1240px){
  .spx-why-section.spx-why-v36{
    margin-top:-250px!important;
    padding-top:310px!important;
  }
  .spx-why-v36-journey{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .spx-why-v36-steps{
    padding-left:28px!important;
  }
  .why-v36-step{
    min-height:78vh!important;
  }
  .why-v36-stage{
    min-height:620px!important;
  }
  .why-v36-visual img{
    inset:48px 18px 108px 18px!important;
    width:calc(100% - 36px)!important;
  }
  .why-v36-visual figcaption{
    right:24px!important;
    left:24px!important;
    width:auto!important;
  }
}
@media(max-width:820px){
  .spx-why-v36-head h2{
    font-size:clamp(42px,12vw,64px)!important;
  }
  .why-v36-step{
    min-height:70vh!important;
  }
  .why-v39-progress{
    left:4px;
  }
  .spx-home-main::before{
    transform:translate3d(0,calc(var(--spx-bg-scroll,0) * -.020px),0) scale(1.04)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.41 — safe restore after A8.40 empty-base regression
   ========================================================================== */

/*
  A8.40 introduced a homepage canvas layer. On the tested build this caused the
  visual base to appear empty, so this build deliberately does NOT include the
  canvas approach. It keeps the stable A8.39 structure and applies only safe CSS/JS
  upgrades: per-step progress, rounded floating screenshots and subtle mouse vars.
*/

/* Hard guard: no accidental homepage canvas layer should display. */
.spx-home-cosmic-canvas,
[data-home-space]{
  display:none!important;
}

/* Keep hero/Why content interactive and above background. */
.spx-home-main > *{
  position:relative!important;
}
.spx-home-main > *:not(.spx-home-cosmic-canvas){
  z-index:3!important;
}
.spx-home-main::before,
.spx-home-main::after{
  pointer-events:none!important;
}

/* Softer mouse-reactive background without canvas. */
.spx-home-main::before{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.024px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.04)!important;
}
.spx-home-main::after{
  opacity:.24!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.034px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
}

/* Remove the old single progress rail and use small progress bars inside each step. */
.why-v39-progress{
  display:none!important;
}
.why-v41-step-progress{
  --step-progress:0;
  position:relative;
  display:block;
  width:min(238px,72%);
  height:3px;
  margin:14px 0 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(107,232,255,.13);
}
.why-v41-step-progress::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(var(--step-progress,0) * 100%);
  border-radius:999px;
  background:linear-gradient(90deg,#18c9f5,#2563eb);
  box-shadow:0 0 18px rgba(24,201,245,.42);
  transition:width .12s linear;
}
.why-v36-step.is-active .why-v41-step-progress{
  background:rgba(107,232,255,.20);
}
html[data-theme="light"] .why-v41-step-progress{
  background:rgba(15,23,42,.12);
}

/* Re-center the left content now that the long rail is gone. */
.spx-why-v36-steps{
  padding-left:0!important;
}
.why-v36-step{
  padding-left:26px!important;
  border-left:0!important;
}
.why-v36-step.is-active{
  background:
    radial-gradient(420px 220px at 0% 48%,rgba(24,201,245,.07),transparent 72%),
    linear-gradient(90deg,rgba(24,201,245,.035),rgba(255,255,255,0))!important;
}

/* Rounded, floating workflow screenshots without turning the whole thing into a block. */
.why-v36-visual img{
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.34)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 72px rgba(24,201,245,.12)!important;
  transform-origin:center!important;
  animation:spxA841VisualFloat 7.8s ease-in-out infinite alternate!important;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:
    0 34px 86px rgba(20,34,62,.16),
    0 0 0 1px rgba(255,255,255,.72) inset,
    0 0 48px rgba(14,165,233,.10)!important;
}

/* Add subtle grid/line movement behind the screenshot only, not over the whole page. */
.why-v36-visual::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:8% -8% 16% 12%!important;
  z-index:0!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.11),transparent 44%)!important;
  background-size:60px 60px,60px 60px,100% 100%!important;
  transform:
    perspective(900px)
    rotateX(58deg)
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 14px),
      calc(var(--spx-home-mouse-y,0) * 9px),
      0
    )!important;
  transform-origin:center bottom!important;
  opacity:.42!important;
  animation:spxA841GridBreathe 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 22%,black 78%,transparent 100%)!important;
}
.why-v36-visual::after{
  content:"";
  position:absolute;
  inset:18% -5% 22% 22%;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(100deg,transparent 0 34%,rgba(24,201,245,.14) 48%,transparent 62%),
    radial-gradient(circle at 74% 22%,rgba(37,99,235,.14),transparent 28%);
  filter:blur(22px);
  opacity:.48;
  transform:translate3d(
    calc(var(--spx-home-mouse-x,0) * -11px),
    calc(var(--spx-home-mouse-y,0) * -7px),
    0
  );
  animation:spxA841GlowBreathe 8s ease-in-out infinite alternate;
}

/* Keep the caption polished but not massive. */
.why-v36-visual figcaption{
  border-radius:22px!important;
}

/* Increase existing star layer slightly without introducing new overlay/canvas. */
.spx-home-main::after{
  filter:brightness(1.10)!important;
}

/* Prevent the transparent Why overlap from blocking hero copy/buttons. */
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

@keyframes spxA841VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}
@keyframes spxA841GridBreathe{
  from{opacity:.34;background-position:0 0,0 0,0 0}
  to{opacity:.54;background-position:60px 60px,60px 60px,0 0}
}
@keyframes spxA841GlowBreathe{
  from{opacity:.34;filter:blur(23px)}
  to{opacity:.58;filter:blur(32px)}
}

@media(max-width:1240px){
  .why-v36-visual img{
    border-radius:22px!important;
  }
  .why-v36-visual::before{
    inset:8% 0 18% 0!important;
  }
}
@media(max-width:820px){
  .why-v41-step-progress{
    width:min(220px,78%);
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v36-visual img,
  .why-v36-visual::before,
  .why-v36-visual::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.43 — restore hero product + unify hero/why background safely
   ========================================================================== */

/*
  A8.42 removed too many local hero layers, which made the right-side hero
  product/example disappear. This pass is based on the safer A8.41 and only
  removes the specific seam-producing background/fade layers.
*/

/* Stable shared background for hero + Why, without canvas and without repeated blocks. */
.spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#020711!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before{
  content:""!important;
  position:fixed!important;
  inset:-18vh -12vw -22vh -12vw!important;
  z-index:0!important;
  pointer-events:none!important;
  opacity:1!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
  background:
    radial-gradient(1250px 820px at 70% 9%,rgba(37,99,235,.24),transparent 66%),
    radial-gradient(1120px 760px at 20% 52%,rgba(24,201,245,.17),transparent 68%),
    radial-gradient(940px 620px at 50% 37%,rgba(220,246,255,.105),transparent 68%),
    linear-gradient(115deg,
      transparent 0 19%,
      rgba(37,99,235,.040) 33%,
      rgba(24,201,245,.165) 42%,
      rgba(230,249,255,.19) 49%,
      rgba(82,181,230,.12) 56%,
      rgba(37,99,235,.050) 67%,
      transparent 82% 100%),
    radial-gradient(ellipse at 59% 38%,rgba(107,232,255,.13),transparent 60%),
    linear-gradient(180deg,#02050d 0%,#06111f 55%,#07111f 100%)!important;
  filter:saturate(138%) contrast(1.03)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.024px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.035)!important;
  will-change:transform!important;
}
.spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  opacity:.30!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background:
    radial-gradient(circle at 5% 13%,rgba(255,255,255,.64) 0 1px,transparent 1.7px),
    radial-gradient(circle at 11% 48%,rgba(107,232,255,.46) 0 1px,transparent 1.7px),
    radial-gradient(circle at 17% 78%,rgba(255,255,255,.40) 0 1px,transparent 1.6px),
    radial-gradient(circle at 24% 30%,rgba(255,255,255,.36) 0 1px,transparent 1.5px),
    radial-gradient(circle at 32% 9%,rgba(107,232,255,.42) 0 1px,transparent 1.6px),
    radial-gradient(circle at 40% 66%,rgba(255,255,255,.32) 0 1px,transparent 1.7px),
    radial-gradient(circle at 51% 18%,rgba(255,255,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 60% 86%,rgba(107,232,255,.34) 0 1px,transparent 1.7px),
    radial-gradient(circle at 70% 42%,rgba(107,232,255,.38) 0 1px,transparent 1.6px),
    radial-gradient(circle at 79% 20%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 88% 63%,rgba(255,255,255,.36) 0 1px,transparent 1.6px),
    radial-gradient(circle at 94% 82%,rgba(107,232,255,.40) 0 1px,transparent 1.6px)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.034px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
  animation:spxA843StarBreathe 19s ease-in-out infinite alternate!important;
}

/* Content always above the shared background. */
.spx-home-main > *{
  position:relative!important;
  z-index:3!important;
}

/* Only remove the seam/fade layers, not the hero product preview. */
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid{
  display:none!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Hero and Why now share the same base background color/atmosphere. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* Keep the hero's right-side builder/product preview visible. */
.spx-hero-v26{
  z-index:4!important;
}
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer,
.v26-product-float,
.v26-asteroid-belt{
  display:block!important;
  visibility:visible!important;
}
.v26-product-atmosphere{
  opacity:.82!important;
  z-index:3!important;
  pointer-events:auto!important;
}
.v26-builder-base{
  opacity:1!important;
  z-index:2!important;
}
.v26-product-layer{
  z-index:3!important;
}
.spx-v26-sky,
.v26-cloud,
.v26-light-trace{
  display:block!important;
  visibility:visible!important;
  pointer-events:none!important;
}

/* But make hero-local sky accents softer so they don't create a visible section band. */
.spx-v26-sky{
  opacity:.50!important;
  mix-blend-mode:screen;
}
.spx-v26-sky::before{
  opacity:.28!important;
  filter:blur(34px) saturate(150%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.08!important;
}
.v26-cloud{
  opacity:.22!important;
}
.v26-light-trace{
  opacity:.16!important;
}

/* Why overlap should not block hero interactions. */
.spx-why-section.spx-why-v36{
  pointer-events:none!important;
  margin-top:-420px!important;
  padding-top:420px!important;
}
.spx-why-v36-shell,
.spx-why-v36-sticky,
.spx-why-v36-steps,
.why-v36-step,
.why-v36-stage,
.why-v36-visual,
.why-v36-visual img,
.why-v36-visual figcaption{
  pointer-events:auto!important;
}

/* Why local background reduced to accent only, not a separate colored block. */
.spx-why-v36-bg{
  opacity:.18!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.014px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.12!important;
}

/* Per-step progress remains explicit. */
.why-v39-progress{
  display:none!important;
}
.why-v41-step-progress{
  --step-progress:0;
  position:relative!important;
  display:block!important;
  width:min(250px,74%)!important;
  height:4px!important;
  margin:14px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.13)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 18px rgba(24,201,245,.45)!important;
  transition:width .12s linear!important;
}

/* Stronger, more visible grid/line environment behind right workflow screenshots. */
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:6% -14% 9% 15%!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.09)!important;
  background:
    linear-gradient(rgba(107,232,255,.034) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 38%,rgba(24,201,245,.12) 48%,transparent 60%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(44% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.13),transparent 45%)!important;
  background-size:58px 58px,58px 58px,100% 100%,100% 100%!important;
  transform:
    perspective(1000px)
    rotateX(57deg)
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    )!important;
  transform-origin:center bottom!important;
  opacity:.58!important;
  animation:spxA843GridBreathe 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%)!important;
}
.why-v36-stage::after{
  content:""!important;
  position:absolute!important;
  inset:7% -10% 8% 18%!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(52% + (var(--spx-home-mouse-x,0) * 12%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.24),transparent 46%),
    radial-gradient(circle at 80% 26%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(44px)!important;
  opacity:.76!important;
  animation:spxA843GlowBreathe 8s ease-in-out infinite alternate!important;
}

.why-v36-visual::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:9% -8% 17% 12%!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(rgba(107,232,255,.030) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.024) 1px,transparent 1px)!important;
  background-size:52px 52px,52px 52px!important;
  opacity:.36!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 12px),
      calc(var(--spx-home-mouse-y,0) * 8px),
      0
    )!important;
  animation:spxA843LineDrift 11s linear infinite!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 78%,transparent 100%)!important;
}
.why-v36-visual::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:15% -4% 20% 20%!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(100deg,transparent 0 34%,rgba(24,201,245,.15) 48%,transparent 62%),
    radial-gradient(circle at 74% 22%,rgba(37,99,235,.15),transparent 28%)!important;
  filter:blur(24px)!important;
  opacity:.58!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -12px),
      calc(var(--spx-home-mouse-y,0) * -7px),
      0
    )!important;
  animation:spxA843GlowBreathe 8s ease-in-out infinite alternate!important;
}

.why-v36-visual img{
  z-index:3!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.38)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 76px rgba(24,201,245,.13)!important;
  transform-origin:center!important;
  animation:spxA843VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  z-index:4!important;
  border-radius:22px!important;
}

@keyframes spxA843StarBreathe{
  from{opacity:.24;filter:brightness(.96)}
  to{opacity:.38;filter:brightness(1.14)}
}
@keyframes spxA843VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}
@keyframes spxA843GridBreathe{
  from{opacity:.42;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.66;background-position:58px 58px,58px 58px,0 0,0 0}
}
@keyframes spxA843LineDrift{
  from{background-position:0 0,0 0}
  to{background-position:52px 52px,52px 52px}
}
@keyframes spxA843GlowBreathe{
  from{opacity:.42;filter:blur(24px)}
  to{opacity:.68;filter:blur(36px)}
}

@media(max-width:1240px){
  .why-v36-stage::before{
    inset:8% 0 16% 0!important;
  }
  .why-v36-visual img{
    border-radius:22px!important;
  }
}
@media(max-width:820px){
  .spx-why-section.spx-why-v36{
    margin-top:-260px!important;
    padding-top:300px!important;
  }
  .why-v41-step-progress{
    width:min(220px,78%)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .spx-home-main::before,
  .spx-home-main::after,
  .why-v36-stage::before,
  .why-v36-stage::after,
  .why-v36-visual::before,
  .why-v36-visual::after,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.44 — Why network background + overlapping left steps + unified bg cleanup
   ========================================================================== */

/*
  This build keeps the A8.43 hero product preview intact.
  It removes the remaining hero/Why color separation by forcing both sections
  to use the same transparent surface over the shared homepage atmosphere.
  It also replaces the flat right background with interconnected animated lines
  and changes the left Why story to overlapping sticky steps.
*/

/* Final seam guard: no separate surface may tint the Why section differently. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.spx-why-section.spx-why-v36,
.spx-why-section.spx-why-v36 *{
  --spx-why-surface:transparent;
}
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-v26-bottom-fade,
.why-v36-hero-tail,
.why-v36-grid{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.spx-why-v36-bg{
  opacity:.08!important;
  mix-blend-mode:screen!important;
}
.why-v36-glow,
.why-v36-mist{
  opacity:.08!important;
}

/* Keep hero product visible, but reduce local hero tint overlays that can create a color jump. */
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer,
.v26-product-float,
.v26-asteroid-belt{
  display:block!important;
  visibility:visible!important;
}
.spx-v26-sky{
  opacity:.38!important;
  mix-blend-mode:screen!important;
}
.spx-v26-sky::before{
  opacity:.22!important;
  filter:blur(34px) saturate(148%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane{
  opacity:.055!important;
}
.v26-cloud{
  opacity:.16!important;
}
.v26-light-trace{
  opacity:.12!important;
}

/* Overlapping left story: one sticky left panel, steps crossfade/slide in place. */
.spx-why-v36-journey{
  min-height:330vh!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(92px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  padding-left:0!important;
  display:block!important;
  align-self:start!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(560px,100%)!important;
  min-height:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  border-left:0!important;
  background:transparent!important;
  opacity:0!important;
  transform:translate3d(0,30px,0) scale(.985)!important;
  pointer-events:none!important;
  transition:
    opacity .50s var(--ease),
    transform .50s var(--ease),
    filter .50s var(--ease)!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  background:transparent!important;
  filter:none!important;
}
.why-v36-step:not(.is-active){
  filter:blur(.3px);
}
.why-v36-step span{
  margin-bottom:0!important;
}
.why-v36-step h3{
  margin-top:14px!important;
  max-width:540px!important;
}
.why-v36-step p{
  max-width:470px!important;
}
.why-v36-step ul{
  max-width:430px!important;
}

/* Horizontal progress per step, visible and tied to the active card. */
.why-v41-step-progress{
  --step-progress:0;
  position:relative!important;
  display:block!important;
  width:min(310px,80%)!important;
  height:4px!important;
  margin:16px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.14)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 18px rgba(24,201,245,.45)!important;
  transition:width .10s linear!important;
}
.why-v36-step.is-active .why-v41-step-progress{
  background:rgba(107,232,255,.20)!important;
}

/* Sticky right side remains centered while left steps overlap. */
.spx-why-v36-sticky{
  top:clamp(72px,calc(50vh - 335px),122px)!important;
}
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before,
.why-v36-stage::after{
  display:none!important;
}

/* Interconnected network/grid behind the workflow images. */
.why-v44-network{
  position:absolute;
  inset:5% -13% 7% 12%;
  z-index:0;
  pointer-events:none;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    );
  animation:spxA844NetworkBreathe 8s ease-in-out infinite alternate;
}
.why-v44-network::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    linear-gradient(rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 14%)) calc(44% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.12),transparent 45%);
  background-size:58px 58px,58px 58px,100% 100%;
  transform:perspective(1000px) rotateX(56deg);
  transform-origin:center bottom;
  mask-image:linear-gradient(180deg,transparent 0%,black 18%,black 82%,transparent 100%);
}
.why-v44-network::after{
  content:"";
  position:absolute;
  inset:8% 4% 12% 12%;
  border-radius:999px;
  background:
    radial-gradient(circle at 55% 46%,rgba(24,201,245,.24),transparent 45%),
    radial-gradient(circle at 78% 28%,rgba(37,99,235,.18),transparent 42%);
  filter:blur(42px);
  opacity:.68;
}
.why-v44-network .node{
  position:absolute;
  width:9px;
  height:9px;
  border-radius:50%;
  z-index:2;
  background:rgba(180,244,255,.90);
  box-shadow:0 0 20px rgba(24,201,245,.62);
  animation:spxA844NodePulse 3.8s ease-in-out infinite alternate;
}
.why-v44-network .n1{left:20%;top:26%;animation-delay:-.2s}
.why-v44-network .n2{left:44%;top:18%;animation-delay:-.9s}
.why-v44-network .n3{left:70%;top:30%;animation-delay:-1.4s}
.why-v44-network .n4{left:30%;top:56%;animation-delay:-2.0s}
.why-v44-network .n5{left:58%;top:64%;animation-delay:-.6s}
.why-v44-network .n6{left:84%;top:58%;animation-delay:-1.7s}

.why-v44-network .line{
  position:absolute;
  height:1px;
  z-index:1;
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.50),rgba(37,99,235,.12));
  box-shadow:0 0 14px rgba(24,201,245,.20);
  opacity:.62;
  animation:spxA844LinePulse 4.6s ease-in-out infinite alternate;
}
.why-v44-network .l1{left:21%;top:27%;width:25%;transform:rotate(-13deg);animation-delay:-.2s}
.why-v44-network .l2{left:45%;top:20%;width:27%;transform:rotate(16deg);animation-delay:-.8s}
.why-v44-network .l3{left:31%;top:56%;width:29%;transform:rotate(12deg);animation-delay:-1.3s}
.why-v44-network .l4{left:59%;top:64%;width:27%;transform:rotate(-7deg);animation-delay:-2.0s}
.why-v44-network .l5{left:22%;top:28%;width:42%;transform:rotate(40deg);animation-delay:-2.6s}
.why-v44-network .l6{left:44%;top:20%;width:21%;transform:rotate(72deg);animation-delay:-1.1s}
.why-v44-network .l7{left:70%;top:31%;width:18%;transform:rotate(76deg);animation-delay:-3.1s}

/* Keep screenshot surfaces above the network and softly floating. */
.why-v36-visual::before,
.why-v36-visual::after{
  opacity:.18!important;
}
.why-v36-visual img{
  z-index:3!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(107,232,255,.16)!important;
  background:rgba(5,11,23,.38)!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 76px rgba(24,201,245,.13)!important;
  animation:spxA844VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  z-index:4!important;
  border-radius:22px!important;
}

/* Optional stronger filled/outline transition, now that steps overlap. */
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.2px rgba(245,250,255,.32)!important;
}
html[data-theme="light"] .why-v36-step:not(.is-active) h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}

@keyframes spxA844NetworkBreathe{
  from{opacity:.72;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 13px),calc(var(--spx-home-mouse-y,0) * 8px),0) scale(.985)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 22px),calc(var(--spx-home-mouse-y,0) * 15px),0) scale(1.015)}
}
@keyframes spxA844NodePulse{
  from{opacity:.48;transform:scale(.82)}
  to{opacity:1;transform:scale(1.18)}
}
@keyframes spxA844LinePulse{
  from{opacity:.35;filter:brightness(.92)}
  to{opacity:.74;filter:brightness(1.18)}
}
@keyframes spxA844VisualFloat{
  from{transform:translate3d(0,-6px,0) rotate(.04deg)}
  to{transform:translate3d(0,7px,0) rotate(-.06deg)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
  }
  .why-v36-step{
    position:relative!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    padding:22px 0!important;
  }
  .why-v44-network{
    inset:8% 0 12% 0;
  }
}
@media(max-width:820px){
  .why-v41-step-progress{
    width:min(220px,80%)!important;
  }
  .why-v44-network{
    opacity:.55;
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v44-network,
  .why-v44-network .node,
  .why-v44-network .line,
  .why-v36-visual img{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.45 — network grid under screenshots + clearer hero + smoother left steps
   ========================================================================== */

/* 1) Background unify: remove local Why tinting entirely and soften hero tint. */
.spx-home-main,
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background-color:transparent!important;
}
.spx-home-main{
  background:#020711!important;
}
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-steps,
.spx-why-v36-sticky{
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-hero-tail,
.why-v36-grid,
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after{
  display:none!important;
  opacity:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
}

/* One fixed atmosphere for hero + Why. Keep it less vertical so the scroll does not reveal a color band. */
.spx-home-main::before{
  background:
    radial-gradient(1300px 820px at 72% 12%,rgba(37,99,235,.24),transparent 66%),
    radial-gradient(1150px 760px at 18% 48%,rgba(24,201,245,.17),transparent 68%),
    radial-gradient(960px 620px at 50% 36%,rgba(220,246,255,.105),transparent 68%),
    linear-gradient(115deg,
      transparent 0 19%,
      rgba(37,99,235,.040) 33%,
      rgba(24,201,245,.165) 42%,
      rgba(230,249,255,.19) 49%,
      rgba(82,181,230,.12) 56%,
      rgba(37,99,235,.050) 67%,
      transparent 82% 100%),
    radial-gradient(ellipse at 58% 38%,rgba(107,232,255,.13),transparent 60%),
    linear-gradient(180deg,#02050d 0%,#06111f 48%,#07111f 100%)!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -10px),
      calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * -7px)),
      0
    )
    scale(1.04)!important;
}
.spx-home-main::after{
  opacity:.32!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 8px),
      calc((var(--spx-bg-scroll,0) * -.026px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
}

/* Hero right preview: make it visually stronger while keeping local overlays subtle. */
.v26-product-atmosphere{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  filter:saturate(1.12) contrast(1.06) brightness(1.05)!important;
  transform:translate3d(28px,-8px,0) scale(1.035)!important;
}
.v26-builder-base{
  opacity:1!important;
  filter:saturate(1.10) contrast(1.05) brightness(1.04)!important;
  box-shadow:
    0 38px 130px rgba(0,0,0,.38),
    0 0 84px rgba(24,201,245,.13)!important;
}
.v26-product-layer{
  opacity:.96!important;
  filter:saturate(1.08) contrast(1.05)!important;
}
.v26-product-float,
.v26-asteroid-belt{
  opacity:.82!important;
}
.spx-v26-sky{
  opacity:.24!important;
  mix-blend-mode:screen!important;
}
.spx-v26-sky::before{
  opacity:.14!important;
}
.spx-v26-sky::after,
.v26-grid-plane,
.v26-cloud,
.v26-light-trace{
  opacity:.07!important;
}

/* 2) Left Why scroll: overlapping cards with softer in/out states. */
.spx-why-v36-journey{
  min-height:360vh!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  display:block!important;
  padding-left:0!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(560px,100%)!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  border-left:0!important;
  background:transparent!important;
  opacity:0!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
  pointer-events:none!important;
  filter:blur(.4px)!important;
  transition:
    opacity .58s var(--ease),
    transform .58s var(--ease),
    filter .58s var(--ease)!important;
}
.why-v36-step.is-before{
  opacity:.13!important;
  transform:translate3d(0,-34px,0) scale(.985)!important;
}
.why-v36-step.is-after{
  opacity:.13!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  filter:none!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
.why-v36-step:not(.is-active) h3{
  color:transparent!important;
  -webkit-text-stroke:1.2px rgba(245,250,255,.26)!important;
}

/* Horizontal progress per step, more obvious but still compact. */
.why-v41-step-progress{
  width:min(330px,82%)!important;
  height:4px!important;
  margin:16px 0 0!important;
  border-radius:999px!important;
  background:rgba(107,232,255,.15)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.07)!important;
}
.why-v41-step-progress::before{
  width:calc(var(--step-progress,0) * 100%)!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 20px rgba(24,201,245,.48)!important;
}

/* 3) Right Why visual: the network is now a structured grid/circuit field under the screenshot,
      not a cluster too far below it. */
.why-v36-stage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  perspective:1200px!important;
}
.why-v36-stage::before,
.why-v36-stage::after{
  display:none!important;
}
.why-v44-network{
  position:absolute!important;
  inset:0% -10% 2% 8%!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:.92!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 12px),
      0
    )!important;
  animation:spxA845NetworkBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network::before{
  content:""!important;
  position:absolute!important;
  inset:4% -2% 10% 4%!important;
  z-index:0!important;
  opacity:.62!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(rgba(107,232,255,.040) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.032) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 35%,rgba(24,201,245,.14) 48%,transparent 62%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.14),transparent 44%)!important;
  background-size:56px 56px,56px 56px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(54deg)!important;
  transform-origin:center bottom!important;
  animation:spxA845GridDrift 10s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 14%,black 88%,transparent 100%)!important;
}
.why-v44-network::after{
  content:""!important;
  position:absolute!important;
  inset:12% 0 12% 10%!important;
  z-index:1!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(54% + (var(--spx-home-mouse-x,0) * 13%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.22),transparent 45%),
    radial-gradient(circle at 78% 26%,rgba(37,99,235,.16),transparent 42%)!important;
  filter:blur(42px)!important;
  opacity:.72!important;
  animation:spxA845GlowBreathe 8s ease-in-out infinite alternate!important;
}

/* circuit nodes/lines placed through the middle of the screenshot area */
.why-v44-network .node{
  width:8px!important;
  height:8px!important;
  z-index:3!important;
  opacity:.95!important;
}
.why-v44-network .n1{left:17%!important;top:24%!important}
.why-v44-network .n2{left:38%!important;top:18%!important}
.why-v44-network .n3{left:64%!important;top:27%!important}
.why-v44-network .n4{left:23%!important;top:54%!important}
.why-v44-network .n5{left:50%!important;top:57%!important}
.why-v44-network .n6{left:78%!important;top:52%!important}

.why-v44-network .line{
  z-index:2!important;
  height:1px!important;
  opacity:.72!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.56),rgba(37,99,235,.18))!important;
}
.why-v44-network .l1{left:18%!important;top:25%!important;width:22%!important;transform:rotate(-14deg)!important}
.why-v44-network .l2{left:39%!important;top:20%!important;width:26%!important;transform:rotate(15deg)!important}
.why-v44-network .l3{left:24%!important;top:55%!important;width:28%!important;transform:rotate(5deg)!important}
.why-v44-network .l4{left:51%!important;top:58%!important;width:28%!important;transform:rotate(-8deg)!important}
.why-v44-network .l5{left:18%!important;top:25%!important;width:40%!important;transform:rotate(39deg)!important}
.why-v44-network .l6{left:38%!important;top:20%!important;width:39%!important;transform:rotate(44deg)!important}
.why-v44-network .l7{left:64%!important;top:28%!important;width:18%!important;transform:rotate(73deg)!important}

.why-v36-visual{
  z-index:4!important;
}
.why-v36-visual img{
  z-index:5!important;
  border-radius:28px!important;
  box-shadow:
    0 42px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 86px rgba(24,201,245,.16)!important;
}
.why-v36-visual figcaption{
  z-index:6!important;
}

/* Keep older pseudo grid very subtle; the new network owns the visual depth. */
.why-v36-visual::before{
  opacity:.16!important;
}
.why-v36-visual::after{
  opacity:.24!important;
}

@keyframes spxA845NetworkBreathe{
  from{opacity:.76;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 14px),calc(var(--spx-home-mouse-y,0) * 9px),0) scale(.99)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 22px),calc(var(--spx-home-mouse-y,0) * 15px),0) scale(1.018)}
}
@keyframes spxA845GridDrift{
  from{opacity:.48;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.72;background-position:56px 56px,56px 56px,0 0,0 0}
}
@keyframes spxA845GlowBreathe{
  from{opacity:.48;filter:blur(34px)}
  to{opacity:.78;filter:blur(48px)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
  }
  .why-v36-step,
  .why-v36-step.is-before,
  .why-v36-step.is-after,
  .why-v36-step.is-active{
    position:relative!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    filter:none!important;
    padding:22px 0!important;
  }
  .why-v44-network{
    inset:4% 0 10% 0!important;
  }
}
@media(max-width:820px){
  .v26-product-atmosphere{
    transform:none!important;
  }
  .why-v44-network{
    opacity:.58!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .why-v44-network,
  .why-v44-network::before,
  .why-v44-network::after{
    animation:none!important;
    transform:none!important;
  }
}


/* ==========================================================================
   A8.46 — hero angle restored + clear Why steps + visible circuit grid
   ========================================================================== */

/*
  Fixes after A8.45 feedback:
  - Hero right preview lost its angle and felt too transparent.
  - Hero still looked darker than Why because hero-only canvas/sky layers tinted it.
  - Other Why steps were visible under the active step.
  - Progress / outline heading state was not clear enough.
  - The right circuit/grid did not visibly come from behind the workflow screenshot.
  - Too many nested blocks made the Why visual feel unclear.
*/

/* HERO: restore product size, perspective angle and visual strength. */
.spx-hero-v26{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
.spx-hero-space{
  opacity:.22!important;
  mix-blend-mode:screen!important;
  filter:brightness(1.35) saturate(1.15)!important;
}
.spx-v26-sky{
  opacity:1!important; /* parent opacity was making the product transparent */
  mix-blend-mode:normal!important;
}
.spx-v26-sky::before{
  opacity:.13!important;
  mix-blend-mode:screen!important;
  filter:blur(34px) saturate(145%)!important;
}
.spx-v26-sky::after,
.v26-grid-plane,
.v26-cloud,
.v26-light-trace{
  opacity:.05!important;
}

/* Make the right hero screenshot large, angled and not washed out. */
.v26-product-atmosphere{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  left:50%!important;
  top:45.8%!important;
  width:min(1260px,84vw)!important;
  height:min(760px,53vw)!important;
  z-index:4!important;
  pointer-events:none!important;
  filter:
    drop-shadow(0 56px 140px rgba(0,0,0,.45))
    drop-shadow(0 0 72px rgba(24,201,245,.13))
    saturate(1.14)
    contrast(1.08)
    brightness(1.06)!important;
  transform:
    translate(-9%,-15%)
    perspective(1520px)
    rotateY(-11deg)
    rotateX(4deg)
    rotateZ(-1.2deg)
    translate3d(
      calc(var(--spx-v26-x,0px) * .16),
      calc(var(--spx-v26-y,0px) * .10),
      0
    )
    scale(1.08)!important;
  transform-origin:center!important;
}
.v26-product-atmosphere::before{
  opacity:.64!important;
  background:radial-gradient(circle at 55% 46%,rgba(24,201,245,.22),transparent 62%)!important;
}
.v26-product-atmosphere::after{
  opacity:.34!important;
  background:
    linear-gradient(90deg,rgba(2,5,13,.42) 0%,rgba(2,5,13,.18) 16%,rgba(2,5,13,.04) 42%,rgba(2,5,13,.06) 70%,rgba(2,5,13,.28) 100%),
    linear-gradient(180deg,rgba(2,5,13,.06),rgba(2,5,13,.02) 24%,rgba(2,5,13,.06) 100%)!important;
}
.v26-builder-base{
  opacity:1!important;
  padding:8px!important;
  border-radius:24px!important;
  border:1px solid rgba(107,232,255,.24)!important;
  background:rgba(5,11,23,.90)!important;
  filter:saturate(1.12) contrast(1.07) brightness(1.06)!important;
  box-shadow:
    0 36px 120px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.035) inset!important;
}
.v26-product-layer{
  opacity:1!important;
  border-radius:20px!important;
  filter:saturate(1.12) contrast(1.06) brightness(1.05)!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:0;
}

/* Keep the background identical through hero + Why.
   Any hero-only layer should add light, never darken. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.why-v36-hero-tail,
.why-v36-grid,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist{
  display:none!important;
  opacity:0!important;
  background:none!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Shared background moves even slower, so it feels like one large scene. */
.spx-home-main::before{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * -9px),
      calc((var(--spx-bg-scroll,0) * -.012px) + (var(--spx-home-mouse-y,0) * -6px)),
      0
    )
    scale(1.045)!important;
}
.spx-home-main::after{
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 7px),
      calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * 5px)),
      0
    )
    scale(1.02)!important;
  opacity:.34!important;
}

/* WHY LEFT: only one step visible. No ghost text below the active step. */
.spx-why-v36-journey{
  min-height:360vh!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  height:min(560px,68vh)!important;
  display:block!important;
  padding-left:0!important;
  overflow:hidden!important;
}
.why-v36-step{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:min(570px,100%)!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:28px 28px 28px 0!important;
  background:transparent!important;
  border:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,34px,0) scale(.985)!important;
  pointer-events:none!important;
  filter:blur(.6px)!important;
  transition:
    opacity .58s var(--ease),
    visibility .58s var(--ease),
    transform .58s var(--ease),
    filter .58s var(--ease)!important;
}
.why-v36-step.is-before,
.why-v36-step.is-after{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.why-v36-step.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
  filter:none!important;
}

/* Heading starts as outline by default and fills on active step. */
.why-v36-step h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.34)!important;
  text-shadow:none!important;
  transition:
    color .42s var(--ease),
    -webkit-text-stroke-color .42s var(--ease),
    opacity .42s var(--ease)!important;
}
.why-v36-step.is-active h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
html[data-theme="light"] .why-v36-step h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}

/* Make per-step progress obvious. */
.why-v41-step-progress{
  display:block!important;
  width:min(360px,86%)!important;
  height:5px!important;
  margin:18px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.18)!important;
  box-shadow:
    inset 0 0 0 1px rgba(107,232,255,.08),
    0 0 24px rgba(24,201,245,.08)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 22px rgba(24,201,245,.58)!important;
}

/* WHY RIGHT: remove block-in-block feeling and make the screenshot the main object. */
.why-v36-stage,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.why-v36-stage-top{
  display:none!important;
}
.why-v36-stage{
  overflow:visible!important;
  perspective:1400px!important;
}
.why-v36-visuals{
  overflow:visible!important;
}

/* Circuit/grid field: now visible behind and around the screenshot, not far below. */
.why-v44-network{
  position:absolute!important;
  inset:-1% -16% 0% 0%!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 20px),
      calc(var(--spx-home-mouse-y,0) * 13px),
      0
    )!important;
  animation:spxA846NetworkBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network::before{
  content:""!important;
  position:absolute!important;
  inset:4% -2% 10% 4%!important;
  z-index:0!important;
  opacity:.78!important;
  border:0!important;
  background:
    linear-gradient(rgba(107,232,255,.060) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.050) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 32%,rgba(24,201,245,.20) 48%,transparent 64%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.18),transparent 44%)!important;
  background-size:54px 54px,54px 54px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(52deg)!important;
  transform-origin:center bottom!important;
  animation:spxA846GridDrift 9s ease-in-out infinite alternate!important;
  mask-image:linear-gradient(180deg,transparent 0%,black 10%,black 90%,transparent 100%)!important;
}
.why-v44-network::after{
  content:""!important;
  position:absolute!important;
  inset:10% -1% 8% 10%!important;
  z-index:1!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at calc(54% + (var(--spx-home-mouse-x,0) * 13%)) calc(46% + (var(--spx-home-mouse-y,0) * 10%)),rgba(24,201,245,.24),transparent 45%),
    radial-gradient(circle at 78% 26%,rgba(37,99,235,.18),transparent 42%)!important;
  filter:blur(40px)!important;
  opacity:.76!important;
  animation:spxA846GlowBreathe 8s ease-in-out infinite alternate!important;
}
.why-v44-network .node{
  width:9px!important;
  height:9px!important;
  background:rgba(203,249,255,.96)!important;
  box-shadow:0 0 26px rgba(24,201,245,.72)!important;
}
.why-v44-network .line{
  height:1.5px!important;
  opacity:.92!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.78),rgba(37,99,235,.24))!important;
  box-shadow:0 0 18px rgba(24,201,245,.32)!important;
}

/* Place the circuit through the same vertical zone as the image. */
.why-v44-network .n1{left:12%!important;top:22%!important}
.why-v44-network .n2{left:35%!important;top:14%!important}
.why-v44-network .n3{left:63%!important;top:24%!important}
.why-v44-network .n4{left:18%!important;top:55%!important}
.why-v44-network .n5{left:49%!important;top:56%!important}
.why-v44-network .n6{left:82%!important;top:50%!important}
.why-v44-network .l1{left:13%!important;top:23%!important;width:24%!important;transform:rotate(-17deg)!important}
.why-v44-network .l2{left:36%!important;top:16%!important;width:29%!important;transform:rotate(17deg)!important}
.why-v44-network .l3{left:19%!important;top:56%!important;width:31%!important;transform:rotate(2deg)!important}
.why-v44-network .l4{left:50%!important;top:57%!important;width:33%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:13%!important;top:24%!important;width:43%!important;transform:rotate(41deg)!important}
.why-v44-network .l6{left:35%!important;top:16%!important;width:42%!important;transform:rotate(43deg)!important}
.why-v44-network .l7{left:63%!important;top:25%!important;width:22%!important;transform:rotate(70deg)!important}

/* Image floats above grid but is no longer inside a heavy shell. */
.why-v36-visual{
  z-index:5!important;
}
.why-v36-visual img{
  z-index:6!important;
  border-radius:30px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:rgba(5,11,23,.28)!important;
  box-shadow:
    0 48px 130px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 92px rgba(24,201,245,.18)!important;
  animation:spxA846VisualFloat 7.8s ease-in-out infinite alternate!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:clamp(34px,6vw,98px)!important;
  bottom:28px!important;
  width:min(320px,42vw)!important;
  padding:0!important;
  color:var(--text)!important;
}
.why-v36-visual figcaption b{
  display:block!important;
  font-size:clamp(24px,2.3vw,38px)!important;
}
.why-v36-visual figcaption span{
  color:var(--text-soft)!important;
  font-size:14px!important;
}

/* Old pseudo grids stay almost invisible; the network owns the visual depth. */
.why-v36-visual::before,
.why-v36-visual::after{
  opacity:.08!important;
}

@keyframes spxA846NetworkBreathe{
  from{opacity:.72;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 13px),calc(var(--spx-home-mouse-y,0) * 8px),0) scale(.99)}
  to{opacity:1;transform:translate3d(calc(var(--spx-home-mouse-x,0) * 24px),calc(var(--spx-home-mouse-y,0) * 16px),0) scale(1.02)}
}
@keyframes spxA846GridDrift{
  from{opacity:.58;background-position:0 0,0 0,0 0,0 0}
  to{opacity:.90;background-position:54px 54px,54px 54px,0 0,0 0}
}
@keyframes spxA846GlowBreathe{
  from{opacity:.46;filter:blur(34px)}
  to{opacity:.80;filter:blur(48px)}
}
@keyframes spxA846VisualFloat{
  from{transform:translate3d(0,-7px,0) rotate(.04deg)}
  to{transform:translate3d(0,8px,0) rotate(-.06deg)}
}

@media(max-width:1240px){
  .spx-why-v36-journey{
    min-height:auto!important;
  }
  .spx-why-v36-steps{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    display:grid!important;
    gap:18px!important;
    overflow:visible!important;
  }
  .why-v36-step,
  .why-v36-step.is-active{
    position:relative!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    height:auto!important;
    min-height:0!important;
    pointer-events:auto!important;
    filter:none!important;
    padding:22px 0!important;
  }
  .why-v36-step h3{
    color:var(--text)!important;
    -webkit-text-stroke:0 transparent!important;
  }
  .why-v44-network{
    inset:4% 0 10% 0!important;
  }
}
@media(max-width:900px){
  .v26-product-atmosphere{
    left:50%!important;
    top:60.2%!important;
    width:min(860px,100vw)!important;
    height:min(500px,62vw)!important;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-6deg) rotateX(2deg) scale(1.02)!important;
  }
}
@media(max-width:820px){
  .why-v44-network{
    opacity:.58!important;
  }
  .why-v41-step-progress{
    width:min(240px,82%)!important;
  }
}


/* ==========================================================================
   A8.47 — hero/why fluidity, smoother overlays, visible circuit frame
   ========================================================================== */

/* Use one shared atmospheric background for the whole hero + Why scene. */
.spx-home-main{
  overflow:visible!important;
  background:#050a14!important;
}
html[data-theme="light"] .spx-home-main{
  background:#eef3fa!important;
}
.spx-home-main::before,
.spx-home-main::after{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:0!important;
  height:100vh!important;
  background-repeat:no-repeat!important;
  will-change:transform!important;
}
.spx-home-main::before{
  background:
    radial-gradient(1260px 820px at 72% 10%,rgba(37,99,235,.20),transparent 66%),
    radial-gradient(1120px 720px at 16% 46%,rgba(24,201,245,.16),transparent 68%),
    linear-gradient(113deg,
      transparent 0 22%,
      rgba(37,99,235,.030) 34%,
      rgba(24,201,245,.12) 42%,
      rgba(215,244,255,.14) 49%,
      rgba(77,164,220,.08) 56%,
      transparent 76% 100%),
    linear-gradient(180deg,#02050d 0%,#06101d 48%,#07111f 100%)!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -10px),calc((var(--spx-bg-scroll,0) * -.012px) + (var(--spx-home-mouse-y,0) * -6px)),0) scale(1.035)!important;
}
.spx-home-main::after{
  opacity:.34!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.58) 0 1px,transparent 1.8px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.8px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.7px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    linear-gradient(rgba(107,232,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.014) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,96px 96px,96px 96px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 8px),calc((var(--spx-bg-scroll,0) * -.018px) + (var(--spx-home-mouse-y,0) * 5px)),0) scale(1.02)!important;
}
.spx-hero-v26,
.spx-hero-v26 .spx-hero-space,
.spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-sticky,
.spx-why-v36-steps{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.spx-hero-v26{
  overflow:visible!important;
}
.spx-hero-v26 .spx-hero-space{
  background:none!important;
  opacity:1!important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-grid,
.why-v36-hero-tail{
  display:none!important;
  opacity:0!important;
  background:none!important;
}
.spx-why-section.spx-why-v36{
  overflow:visible!important;
  margin-top:-600px!important;
  padding-top:600px!important;
}

/* Hero right preview: larger, more present, with calmer overlay cards. */
.v26-product-atmosphere{
  overflow:visible!important;
  top:45.2%!important;
  width:min(1320px,86vw)!important;
  height:min(800px,56vw)!important;
  transform:
    translate(-7%,-14%)
    perspective(1600px)
    rotateY(-11deg)
    rotateX(4deg)
    rotateZ(-1.15deg)
    translate3d(calc(var(--spx-v26-x,0px) * .15),calc(var(--spx-v26-y,0px) * .10),0)
    scale(1.1)!important;
}
.v26-builder-base{
  border-radius:22px!important;
}
.v26-product-layer{
  padding:4px!important;
  border-radius:18px!important;
  border-color:rgba(107,232,255,.16)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.03) inset!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:.92!important;
  filter:saturate(1.05) contrast(1.03)!important;
  animation-duration:8.8s!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
}
.v26-product-layer.layer-settings{
  right:3.0%!important;
  top:3.2%!important;
  width:27.5%!important;
  height:67%!important;
  animation-name:spxA847HeroPanelDriftA!important;
}
.v26-product-layer.layer-add{
  left:3.0%!important;
  top:10.6%!important;
  width:28.5%!important;
  height:63%!important;
  animation-name:spxA847HeroPanelDriftB!important;
}
@keyframes spxA847HeroPanelDriftA{
  from{opacity:.78;transform:translate3d(0,-6px,0) scale(.992)}
  to{opacity:.94;transform:translate3d(0,8px,0) scale(1.008)}
}
@keyframes spxA847HeroPanelDriftB{
  from{opacity:.82;transform:translate3d(0,8px,0) scale(.992)}
  to{opacity:.95;transform:translate3d(0,-7px,0) scale(1.008)}
}

/* WHY left: cleaner single-step stage with an always visible outlined step rail + clear progress. */
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,18vh,150px)!important;
  overflow:visible!important;
}
.spx-why-v36-steps::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:46px!important;
  width:380px!important;
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.22),rgba(107,232,255,.06))!important;
  box-shadow:0 0 22px rgba(24,201,245,.10)!important;
}
.why-v36-step{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,28px,0)!important;
  will-change:transform,opacity!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
}
.why-v36-step h3{
  color:transparent!important;
  -webkit-text-stroke:1.25px rgba(245,250,255,.34)!important;
}
html[data-theme="light"] .why-v36-step h3{
  -webkit-text-stroke-color:rgba(16,24,40,.30)!important;
}
.why-v36-step.is-active h3,
.why-v36-step[data-spx-active="1"] h3{
  color:var(--text)!important;
  -webkit-text-stroke:0 transparent!important;
}
.why-v41-step-progress{
  position:relative!important;
  display:block!important;
  width:min(380px,88%)!important;
  height:6px!important;
  margin:18px 0 0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(107,232,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.08),0 0 24px rgba(24,201,245,.08)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 22px rgba(24,201,245,.58)!important;
}

/* WHY right: one larger screenshot, lighter framing, circuit lines extending around it. */
.why-v36-stage,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage{
  min-height:700px!important;
  overflow:visible!important;
  perspective:1400px!important;
}
.why-v36-visual{
  transition:opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease)!important;
  transform:translate3d(26px,12px,0) scale(.992)!important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"]{
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual img{
  inset:34px -18px 96px 4px!important;
  width:calc(100% + 14px)!important;
  height:calc(100% - 130px)!important;
  object-fit:contain!important;
  border-radius:28px!important;
  border:1px solid rgba(107,232,255,.14)!important;
  background:rgba(5,11,23,.16)!important;
  box-shadow:0 44px 120px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.03) inset!important;
  z-index:6!important;
}
.why-v36-visual figcaption{
  left:auto!important;
  right:44px!important;
  bottom:22px!important;
  width:min(320px,42vw)!important;
  padding:0!important;
  z-index:9!important;
}
.why-v44-network{
  inset:-4% -20% -4% -10%!important;
  z-index:8!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
}
.why-v44-network::before{
  inset:8% -2% 8% -2%!important;
  opacity:.92!important;
  background:
    linear-gradient(rgba(107,232,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.058) 1px,transparent 1px),
    linear-gradient(115deg,transparent 0 34%,rgba(24,201,245,.18) 48%,transparent 62%),
    radial-gradient(circle at calc(50% + (var(--spx-home-mouse-x,0) * 18%)) calc(45% + (var(--spx-home-mouse-y,0) * 14%)),rgba(24,201,245,.18),transparent 44%)!important;
  background-size:56px 56px,56px 56px,100% 100%,100% 100%!important;
  transform:perspective(1050px) rotateX(52deg)!important;
}
.why-v44-network .node,
.why-v44-network .line{
  z-index:10!important;
}
.why-v44-network .node{
  width:9px!important;
  height:9px!important;
  box-shadow:0 0 26px rgba(24,201,245,.72)!important;
}
.why-v44-network .line{
  height:1.5px!important;
  opacity:.92!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.82),rgba(37,99,235,.28))!important;
  box-shadow:0 0 18px rgba(24,201,245,.32)!important;
}
/* extend around top / left / bottom of the image */
.why-v44-network .n1{left:5%!important;top:16%!important}
.why-v44-network .n2{left:29%!important;top:10%!important}
.why-v44-network .n3{left:68%!important;top:16%!important}
.why-v44-network .n4{left:2%!important;top:62%!important}
.why-v44-network .n5{left:40%!important;top:71%!important}
.why-v44-network .n6{left:86%!important;top:58%!important}
.why-v44-network .l1{left:6%!important;top:17%!important;width:24%!important;transform:rotate(-14deg)!important}
.why-v44-network .l2{left:30%!important;top:12%!important;width:40%!important;transform:rotate(8deg)!important}
.why-v44-network .l3{left:3%!important;top:63%!important;width:38%!important;transform:rotate(11deg)!important}
.why-v44-network .l4{left:41%!important;top:72%!important;width:46%!important;transform:rotate(-14deg)!important}
.why-v44-network .l5{left:6%!important;top:18%!important;width:50%!important;transform:rotate(45deg)!important}
.why-v44-network .l6{left:29%!important;top:12%!important;width:55%!important;transform:rotate(37deg)!important}
.why-v44-network .l7{left:68%!important;top:18%!important;width:18%!important;transform:rotate(77deg)!important}

@media(max-width:1240px){
  .spx-why-v36-steps::before{width:320px!important}
  .v26-product-atmosphere{width:min(1160px,86vw)!important;height:min(720px,58vw)!important}
}
@media(max-width:900px){
  .v26-product-atmosphere{
    left:50%!important;
    top:60.2%!important;
    width:min(860px,100vw)!important;
    height:min(500px,62vw)!important;
    transform:translate(-50%,-10%) perspective(1200px) rotateY(-6deg) rotateX(2deg) scale(1.02)!important;
  }
}


/* ==========================================================================
   A8.48 — larger Why visuals, square grid language, cleaner stage framing
   ========================================================================== */

html,body{overflow-x:hidden!important;}
body{background:var(--bg)!important;}

/* Left explanation cards: styled again, but integrated into the grid language. */
.spx-why-v36-steps::before{
  left:0!important;
  top:38px!important;
  width:420px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.32),rgba(107,232,255,.08))!important;
}
.why-v36-step{
  width:min(560px,100%)!important;
  padding:24px 28px 28px 0!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01)),
    linear-gradient(90deg,rgba(24,201,245,.06),rgba(24,201,245,0))!important;
  border-left:1px solid rgba(107,232,255,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.05)!important;
}
.why-v36-step.is-active::before,
.why-v36-step[data-spx-active="1"]::before{
  content:""!important;
  position:absolute!important;
  inset:18px auto 18px -1px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(24,201,245,.0),rgba(24,201,245,.95) 22%,rgba(37,99,235,.92) 78%,rgba(24,201,245,0))!important;
  box-shadow:0 0 18px rgba(24,201,245,.30)!important;
}
.why-v36-step.is-active::after,
.why-v36-step[data-spx-active="1"]::after{
  content:""!important;
  position:absolute!important;
  left:28px!important;
  top:0!important;
  width:164px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.36),rgba(107,232,255,0))!important;
}
.why-v36-step span{
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 0 10px!important;
  color:#bff4ff!important;
}
.why-v36-step span::after{
  content:""!important;
  width:44px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.55),rgba(107,232,255,0))!important;
}
.why-v36-step p,
.why-v36-step ul,
.why-v36-step small{position:relative;z-index:2!important;}
.why-v36-step ul{margin-top:16px!important;gap:9px!important;}
.why-v36-step li{padding-left:18px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.58em!important;}

/* Clearer per-step progress, integrated into the card. */
.why-v41-step-progress{
  width:min(410px,90%)!important;
  height:5px!important;
  margin:10px 0 16px!important;
  background:
    linear-gradient(90deg,rgba(107,232,255,.16),rgba(107,232,255,.04))!important;
}

/* Right stage: remove the amateuristic dark block feel. */
.spx-why-v36-sticky{
  width:min(1260px, calc(100vw - 10px))!important;
  margin-right:clamp(-220px,-14vw,-90px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-visual figcaption{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage{
  min-height:760px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.why-v36-visual{
  overflow:visible!important;
}

/* Bigger screenshot that may partially leave the right viewport, without horizontal scrolling. */
.why-v36-visual img{
  inset:26px -150px 82px -12px!important;
  width:calc(100% + 162px)!important;
  height:calc(100% - 108px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  background:rgba(4,10,20,.05)!important;
  border:1px solid rgba(107,232,255,.10)!important;
  box-shadow:0 36px 110px rgba(0,0,0,.26),0 0 0 1px rgba(255,255,255,.02) inset!important;
}
html[data-theme="light"] .why-v36-visual img{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(15,23,42,.08)!important;
}

/* Floating support blocks: subtle, never covering the image. */
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.12)!important;
  background:
    linear-gradient(rgba(107,232,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.026) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))!important;
  background-size:24px 24px,24px 24px,100% 100%!important;
  box-shadow:0 18px 46px rgba(0,0,0,.18)!important;
  animation:spxA848SupportBlockFloat 9s ease-in-out infinite alternate!important;
}
.why-v36-visual::before{
  left:18px!important;
  top:34px!important;
  width:116px!important;
  height:90px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -8px),calc(var(--spx-home-mouse-y,0) * -5px),0)!important;
}
.why-v36-visual::after{
  right:32px!important;
  bottom:120px!important;
  width:144px!important;
  height:112px!important;
  animation-delay:-2.2s!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 7px),calc(var(--spx-home-mouse-y,0) * 5px),0)!important;
}
@keyframes spxA848SupportBlockFloat{
  from{opacity:.45;transform:translate3d(0,-6px,0)}
  to{opacity:.78;transform:translate3d(0,7px,0)}
}

/* Caption becomes part of the circuit language, not a heavy block. */
.why-v36-visual figcaption{
  left:28px!important;
  right:auto!important;
  bottom:18px!important;
  width:min(360px,44vw)!important;
  padding:14px 16px 0!important;
}
.why-v36-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:118px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.42),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:1px!important;
  height:78px!important;
  background:linear-gradient(180deg,rgba(107,232,255,.44),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption b{
  display:block!important;
  margin-left:14px!important;
  font-size:clamp(24px,2.4vw,38px)!important;
}
.why-v36-visual figcaption span{
  display:block!important;
  margin:6px 0 0 14px!important;
  max-width:320px!important;
}

/* Square circuit grid and connectors around the screenshot, extending above/left/below. */
.why-v44-network{
  inset:-8% -22% -8% -18%!important;
  z-index:5!important;
  opacity:1!important;
}
.why-v44-network::before{
  inset:6% 2% 8% 2%!important;
  opacity:.92!important;
  background:
    linear-gradient(rgba(107,232,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.070) 1px,transparent 1px),
    radial-gradient(circle at calc(48% + (var(--spx-home-mouse-x,0) * 15%)) calc(42% + (var(--spx-home-mouse-y,0) * 12%)),rgba(24,201,245,.14),transparent 42%)!important;
  background-size:48px 48px,48px 48px,100% 100%!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 6px),calc(var(--spx-home-mouse-y,0) * 6px),0)!important;
  mask-image:none!important;
}
.why-v44-network::after{
  inset:8% 8% 10% 8%!important;
  opacity:.50!important;
}
.why-v44-network .node{width:8px!important;height:8px!important;}
.why-v44-network .line{
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.9),rgba(37,99,235,.32))!important;
}
/* more rectilinear layout */
.why-v44-network .n1{left:4%!important;top:14%!important}
.why-v44-network .n2{left:26%!important;top:14%!important}
.why-v44-network .n3{left:70%!important;top:16%!important}
.why-v44-network .n4{left:4%!important;top:62%!important}
.why-v44-network .n5{left:38%!important;top:72%!important}
.why-v44-network .n6{left:88%!important;top:58%!important}
.why-v44-network .l1{left:4%!important;top:15%!important;width:22%!important;transform:rotate(0deg)!important}
.why-v44-network .l2{left:26%!important;top:15%!important;width:44%!important;transform:rotate(0deg)!important}
.why-v44-network .l3{left:4%!important;top:63%!important;width:34%!important;transform:rotate(0deg)!important}
.why-v44-network .l4{left:38%!important;top:73%!important;width:50%!important;transform:rotate(0deg)!important}
.why-v44-network .l5{left:4%!important;top:15%!important;width:49%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:26%!important;top:15%!important;width:58%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:70%!important;top:16%!important;width:42%!important;transform:rotate(90deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-sticky{margin-right:clamp(-140px,-8vw,-40px)!important}
  .why-v36-visual img{inset:28px -80px 88px 0!important;width:calc(100% + 88px)!important}
}
@media(max-width:900px){
  .spx-why-v36-sticky{margin-right:0!important;width:100%!important}
  .why-v36-stage{min-height:620px!important}
  .why-v36-visual img{inset:18px -16px 92px 0!important;width:calc(100% + 16px)!important;height:calc(100% - 110px)!important}
  .why-v36-visual::before,.why-v36-visual::after{display:none!important}
  .why-v36-visual figcaption{width:min(320px,72vw)!important}
}


/* ==========================================================================
   A8.49 — hero calm overlays + full Why restructure
   ========================================================================== */

/* Hero overlay panels: keep them alive, but remove visible loop resets. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  animation-direction:alternate!important;
  animation-duration:14s!important;
  animation-timing-function:ease-in-out!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:both!important;
  will-change:transform,opacity!important;
}
.v26-product-atmosphere::after{
  opacity:.14!important;
  background:
    radial-gradient(110% 90% at 56% 48%,rgba(2,5,13,.03),rgba(2,5,13,.00) 52%,rgba(2,5,13,.10) 82%,rgba(2,5,13,.18) 100%),
    linear-gradient(180deg,rgba(2,5,13,.00) 0%,rgba(2,5,13,.02) 62%,rgba(2,5,13,.10) 100%)!important;
}
.v26-builder-base{
  background:rgba(5,11,23,.84)!important;
  box-shadow:0 28px 96px rgba(0,0,0,.24),0 0 0 1px rgba(255,255,255,.03) inset!important;
}

/* WHY: restructure to a cleaner split layout with all three steps always visible. */
.spx-why-v36-shell{position:relative!important;z-index:2!important;}
.spx-why-v36-head{max-width:920px!important;margin-bottom:34px!important;}
.spx-why-v36-journey{
  min-height:280vh!important;
  display:grid!important;
  grid-template-columns:minmax(320px, 500px) minmax(540px,1fr)!important;
  gap:clamp(24px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps{
  position:sticky!important;
  top:clamp(96px,15vh,138px)!important;
  display:grid!important;
  gap:16px!important;
  height:auto!important;
  overflow:visible!important;
  padding-right:12px!important;
}
.spx-why-v36-steps::before{display:none!important;}
.why-v36-step{
  position:relative!important;
  visibility:visible!important;
  opacity:.44!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
  height:auto!important;
  min-height:0!important;
  width:100%!important;
  padding:18px 20px 18px 18px!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006)),
    linear-gradient(90deg,rgba(24,201,245,.025),rgba(24,201,245,0) 52%)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.10)!important;
  transition:opacity .42s var(--ease), transform .42s var(--ease), border-color .42s var(--ease), box-shadow .42s var(--ease), background .42s var(--ease)!important;
}
.why-v36-step::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:16px!important;
  bottom:16px!important;
  width:2px!important;
  background:linear-gradient(180deg,rgba(24,201,245,0),rgba(24,201,245,.65),rgba(37,99,235,.65),rgba(24,201,245,0))!important;
  opacity:.22!important;
  transition:opacity .42s var(--ease), box-shadow .42s var(--ease)!important;
}
.why-v36-step span{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 12px!important;
  color:#bff4ff!important;
  letter-spacing:.02em!important;
}
.why-v36-step span::after{
  content:""!important;
  flex:0 0 44px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.46),rgba(107,232,255,0))!important;
}
.why-v36-step h3{
  margin:0 0 10px!important;
  color:transparent!important;
  -webkit-text-stroke:1.1px rgba(245,250,255,.30)!important;
  transition:color .42s var(--ease), -webkit-text-stroke-color .42s var(--ease)!important;
}
html[data-theme="light"] .why-v36-step h3{-webkit-text-stroke-color:rgba(16,24,40,.28)!important;}
.why-v36-step p{margin:0 0 12px!important;}
.why-v36-step ul{margin:0!important;display:grid!important;gap:8px!important;}
.why-v36-step li{padding-left:16px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.6em!important;}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  opacity:1!important;
  border-color:rgba(107,232,255,.24)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012)),
    linear-gradient(90deg,rgba(24,201,245,.08),rgba(24,201,245,.01) 56%,rgba(24,201,245,0) 100%)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.16), inset 0 0 0 1px rgba(107,232,255,.05)!important;
  transform:translate3d(0,-1px,0)!important;
}
.why-v36-step.is-active::before,
.why-v36-step[data-spx-active="1"]::before{opacity:1!important;box-shadow:0 0 18px rgba(24,201,245,.24)!important;}
.why-v36-step.is-active h3,
.why-v36-step[data-spx-active="1"] h3{color:var(--text)!important;-webkit-text-stroke:0 transparent!important;}
.why-v41-step-progress{
  position:relative!important;
  display:block!important;
  width:min(320px,86%)!important;
  height:5px!important;
  margin:0 0 12px!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:linear-gradient(90deg,rgba(107,232,255,.14),rgba(107,232,255,.04))!important;
  box-shadow:inset 0 0 0 1px rgba(107,232,255,.06)!important;
}
.why-v41-step-progress::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#18c9f5,#2563eb)!important;
  box-shadow:0 0 20px rgba(24,201,245,.42)!important;
}

/* Right stage: one clean large preview area, less clutter. */
.spx-why-v36-sticky{
  position:sticky!important;
  top:clamp(88px,13vh,132px)!important;
  width:min(1340px, calc(100vw - 20px))!important;
  margin-right:clamp(-240px,-15vw,-100px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-visual figcaption,
.why-v36-stage-top{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage{
  min-height:760px!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.why-v36-visuals{position:relative!important;min-height:760px!important;overflow:visible!important;}
.why-v36-visual{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  transition:opacity .62s var(--ease), transform .62s var(--ease), filter .62s var(--ease)!important;
}
.why-v36-visual img{
  position:absolute!important;
  inset:12px -190px 88px 0!important;
  width:calc(100% + 190px)!important;
  height:calc(100% - 120px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  border-radius:28px!important;
  background:rgba(4,10,20,.03)!important;
  border:1px solid rgba(107,232,255,.08)!important;
  box-shadow:0 34px 104px rgba(0,0,0,.22)!important;
  z-index:6!important;
}
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(rgba(107,232,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.018) 1px,transparent 1px) !important;
  background-size:22px 22px,22px 22px!important;
  box-shadow:0 16px 40px rgba(0,0,0,.10)!important;
  transition:transform .62s var(--ease), opacity .62s var(--ease)!important;
}
.why-v36-visual::before{
  left:24px!important;top:86px!important;width:104px!important;height:82px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -7px),calc(var(--spx-home-mouse-y,0) * -4px),0)!important;
}
.why-v36-visual::after{
  right:64px!important;bottom:132px!important;width:136px!important;height:104px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 6px),calc(var(--spx-home-mouse-y,0) * 4px),0)!important;
}
.why-v36-visual figcaption{
  position:absolute!important;
  left:26px!important;
  right:auto!important;
  bottom:20px!important;
  width:min(360px,44vw)!important;
  padding:14px 0 0 16px!important;
  z-index:9!important;
}
.why-v36-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;width:110px!important;height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.40),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:0!important;top:0!important;width:1px!important;height:72px!important;
  background:linear-gradient(180deg,rgba(107,232,255,.40),rgba(107,232,255,0))!important;
}
.why-v36-visual figcaption b{display:block!important;margin-left:14px!important;font-size:clamp(24px,2.4vw,38px)!important;}
.why-v36-visual figcaption span{display:block!important;margin:6px 0 0 14px!important;max-width:320px!important;}

/* Cleaner square grid: fewer lines, deliberate endpoints, no random stop feeling. */
.why-v44-network{
  position:absolute!important;
  inset:0 -18% 0 -10%!important;
  z-index:5!important;
  opacity:1!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}
.why-v44-network::before,
.why-v44-network::after{display:none!important;}
.why-v44-network .node,
.why-v44-network .line{
  position:absolute!important;
  z-index:5!important;
  opacity:.88!important;
}
.why-v44-network .node{
  width:8px!important;height:8px!important;border-radius:0!important;
  background:rgba(203,249,255,.92)!important;
  box-shadow:0 0 18px rgba(24,201,245,.36)!important;
}
.why-v44-network .line{
  height:2px!important;
  background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.92),rgba(37,99,235,.24))!important;
  box-shadow:0 0 14px rgba(24,201,245,.20)!important;
}
/* Top rail */
.why-v44-network .n1{left:6%!important;top:18%!important}
.why-v44-network .n2{left:29%!important;top:18%!important}
.why-v44-network .n3{left:75%!important;top:18%!important}
.why-v44-network .l1{left:6%!important;top:19%!important;width:23%!important;transform:none!important}
.why-v44-network .l2{left:29%!important;top:19%!important;width:46%!important;transform:none!important}
/* Left vertical frame */
.why-v44-network .n4{left:6%!important;top:68%!important}
.why-v44-network .l5{left:6%!important;top:19%!important;width:50%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
/* Bottom rail */
.why-v44-network .n5{left:42%!important;top:74%!important}
.why-v44-network .n6{left:88%!important;top:62%!important}
.why-v44-network .l3{left:6%!important;top:69%!important;width:36%!important;transform:none!important}
.why-v44-network .l4{left:42%!important;top:75%!important;width:46%!important;transform:none!important}
/* Right vertical tail */
.why-v44-network .l6{left:75%!important;top:19%!important;width:42%!important;transform:rotate(90deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:88%!important;top:62%!important;width:18%!important;transform:rotate(90deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-journey{grid-template-columns:minmax(300px,460px) minmax(480px,1fr)!important;gap:24px!important;}
  .spx-why-v36-sticky{margin-right:clamp(-150px,-9vw,-50px)!important;}
  .why-v36-visual img{inset:18px -110px 92px 0!important;width:calc(100% + 110px)!important;}
}
@media(max-width:980px){
  .spx-why-v36-journey{min-height:auto!important;grid-template-columns:1fr!important;}
  .spx-why-v36-steps,.spx-why-v36-sticky{position:relative!important;top:auto!important;}
  .spx-why-v36-sticky{width:100%!important;margin-right:0!important;}
  .why-v36-stage,.why-v36-visuals{min-height:620px!important;}
  .why-v36-visual img{inset:16px -20px 96px 0!important;width:calc(100% + 20px)!important;height:calc(100% - 118px)!important;}
}


/* ==========================================================================
   A8.50 — hero to why storyflow bridge + cleaner sticky step story
   ========================================================================== */

html,body{overflow-x:hidden!important;}

/* HERO: make the right side ease into the Why story on scroll. */
.spx-hero-v26{position:relative!important;overflow:visible!important;}
.v26-product-atmosphere{
  transform:
    translate(calc(-7% - (var(--spx-hero-progress,0) * 9%)), calc(-14% + (var(--spx-hero-progress,0) * 11%)))
    perspective(1600px)
    rotateY(calc(-11deg + (var(--spx-hero-progress,0) * 5deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress,0) * 2deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress,0) * .7deg)))
    scale(calc(1.10 - (var(--spx-hero-progress,0) * .13)))!important;
  opacity:calc(1 - (var(--spx-hero-progress,0) * .26))!important;
  transition:transform .18s linear, opacity .18s linear!important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add{
  opacity:calc(.92 - (var(--spx-hero-progress,0) * .30))!important;
}
.v26-product-layer.layer-settings{
  transform:translate3d(0, calc((var(--spx-hero-progress,0) * 18px) - 4px), 0) scale(calc(1 - (var(--spx-hero-progress,0) * .035)))!important;
}
.v26-product-layer.layer-add{
  transform:translate3d(0, calc((var(--spx-hero-progress,0) * -16px) + 4px), 0) scale(calc(1 - (var(--spx-hero-progress,0) * .03)))!important;
}
.v26-product-atmosphere::after{
  opacity:calc(.10 - (var(--spx-hero-progress,0) * .05))!important;
}

/* WHY: content remains still while scroll advances the step story. */
.spx-why-v36-shell{position:relative!important;z-index:2!important;}
.spx-why-v36-journey{
  min-height:320vh!important;
  display:grid!important;
  grid-template-columns:minmax(320px, 500px) minmax(580px, 1fr)!important;
  gap:clamp(26px,4vw,64px)!important;
  align-items:start!important;
}
.spx-why-v36-steps,
.spx-why-v36-sticky{
  position:sticky!important;
  top:clamp(94px, 13vh, 136px)!important;
}

/* Left story stage: single active panel in a stable frame. */
.spx-why-v36-steps{
  display:block!important;
  height:min(460px, 58vh)!important;
  overflow:hidden!important;
  padding-right:18px!important;
}
.spx-why-v36-steps::before{display:none!important;}
.why-v36-step{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:22px 24px 22px 18px!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(0,24px,0)!important;
  border:1px solid rgba(107,232,255,.10)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008)),
    linear-gradient(90deg,rgba(24,201,245,.04),rgba(24,201,245,0) 58%)!important;
  box-shadow:0 22px 56px rgba(0,0,0,.12), inset 0 0 0 1px rgba(107,232,255,.03)!important;
  transition:opacity .48s var(--ease), transform .48s var(--ease), visibility .48s var(--ease)!important;
}
.why-v36-step::before{
  content:""!important;
  position:absolute!important;
  left:-1px!important;
  top:16px!important;
  bottom:16px!important;
  width:2px!important;
  opacity:.9!important;
  background:linear-gradient(180deg,rgba(24,201,245,0),rgba(24,201,245,.75),rgba(37,99,235,.72),rgba(24,201,245,0))!important;
  box-shadow:0 0 18px rgba(24,201,245,.20)!important;
}
.why-v36-step::after{
  content:""!important;
  position:absolute!important;
  left:18px!important;
  top:0!important;
  width:140px!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(107,232,255,.34),rgba(107,232,255,0))!important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0)!important;
}
.why-v36-step span{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 12px!important;color:#bff4ff!important;}
.why-v36-step span::after{content:""!important;flex:0 0 44px!important;height:1px!important;background:linear-gradient(90deg,rgba(107,232,255,.50),rgba(107,232,255,0))!important;}
.why-v36-step h3{margin:0 0 10px!important;color:var(--text)!important;-webkit-text-stroke:0 transparent!important;}
.why-v36-step p{margin:0 0 14px!important;max-width:460px!important;}
.why-v36-step ul{display:grid!important;gap:9px!important;margin:0!important;}
.why-v36-step li{padding-left:16px!important;}
.why-v36-step li::before{width:6px!important;height:6px!important;top:.6em!important;}
.why-v41-step-progress{position:relative!important;display:block!important;width:min(330px,84%)!important;height:5px!important;margin:0 0 14px!important;border-radius:999px!important;overflow:hidden!important;background:linear-gradient(90deg,rgba(107,232,255,.16),rgba(107,232,255,.04))!important;box-shadow:inset 0 0 0 1px rgba(107,232,255,.05)!important;}
.why-v41-step-progress::before{content:""!important;position:absolute!important;inset:0 auto 0 0!important;width:calc(var(--step-progress,0) * 100%)!important;border-radius:999px!important;background:linear-gradient(90deg,#18c9f5,#2563eb)!important;box-shadow:0 0 18px rgba(24,201,245,.40)!important;}

/* Right story stage: only one preview visible, no confusing faded stack. */
.spx-why-v36-sticky{
  width:min(1360px, calc(100vw - 18px))!important;
  margin-right:clamp(-230px,-14vw,-92px)!important;
  overflow:visible!important;
}
.why-v36-stage,
.why-v36-visuals,
.why-v36-visual,
.why-v36-stage-top,
.why-v36-visual figcaption{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.why-v36-stage-top{display:none!important;}
.why-v36-stage,
.why-v36-visuals{min-height:760px!important;overflow:visible!important;isolation:isolate!important;}
.why-v36-visual{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:translate3d(28px,14px,0) scale(.992)!important;
  transition:opacity .56s var(--ease), transform .56s var(--ease), filter .56s var(--ease)!important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"]{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
.why-v36-visual img{
  position:absolute!important;
  inset:18px -180px 88px 0!important;
  width:calc(100% + 180px)!important;
  height:calc(100% - 120px)!important;
  object-fit:contain!important;
  object-position:center right!important;
  border-radius:28px!important;
  background:rgba(4,10,20,.03)!important;
  border:1px solid rgba(107,232,255,.08)!important;
  box-shadow:0 34px 104px rgba(0,0,0,.20)!important;
  z-index:8!important;
}

/* Cleaner, less rigid modern network: fewer deliberate lines + asymmetrical support blocks. */
.why-v36-visual::before,
.why-v36-visual::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  border:1px solid rgba(107,232,255,.09)!important;
  background:
    linear-gradient(rgba(107,232,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.016) 1px,transparent 1px)!important;
  background-size:24px 24px,24px 24px!important;
  box-shadow:0 12px 30px rgba(0,0,0,.08)!important;
  transition:transform .56s var(--ease), opacity .56s var(--ease)!important;
}
.why-v36-visual::before{
  left:30px!important;top:78px!important;width:102px!important;height:74px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * -6px),calc(var(--spx-home-mouse-y,0) * -4px),0)!important;
}
.why-v36-visual::after{
  right:70px!important;bottom:132px!important;width:132px!important;height:100px!important;
  transform:translate3d(calc(var(--spx-home-mouse-x,0) * 5px),calc(var(--spx-home-mouse-y,0) * 4px),0)!important;
}
.why-v36-visual figcaption{
  position:absolute!important;
  left:26px!important;
  bottom:18px!important;
  width:min(360px,44vw)!important;
  padding:14px 0 0 16px!important;
  z-index:10!important;
}
.why-v36-visual figcaption::before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:110px!important;height:1px!important;background:linear-gradient(90deg,rgba(107,232,255,.38),rgba(107,232,255,0))!important;}
.why-v36-visual figcaption::after{content:""!important;position:absolute!important;left:0!important;top:0!important;width:1px!important;height:70px!important;background:linear-gradient(180deg,rgba(107,232,255,.38),rgba(107,232,255,0))!important;}
.why-v36-visual figcaption b{display:block!important;margin-left:14px!important;font-size:clamp(24px,2.4vw,38px)!important;}
.why-v36-visual figcaption span{display:block!important;margin:6px 0 0 14px!important;max-width:320px!important;}

.why-v44-network{
  position:absolute!important;
  inset:2% -14% 6% -8%!important;
  z-index:5!important;
  pointer-events:none!important;
  mix-blend-mode:screen!important;
}
.why-v44-network::before,
.why-v44-network::after{display:none!important;}
.why-v44-network .node,
.why-v44-network .line{position:absolute!important;opacity:.86!important;z-index:5!important;}
.why-v44-network .node{width:8px!important;height:8px!important;border-radius:2px!important;background:rgba(203,249,255,.90)!important;box-shadow:0 0 14px rgba(24,201,245,.24)!important;}
.why-v44-network .line{height:2px!important;background:linear-gradient(90deg,rgba(107,232,255,0),rgba(107,232,255,.82),rgba(37,99,235,.20))!important;box-shadow:0 0 10px rgba(24,201,245,.12)!important;}
/* asymmetrical but deliberate frame */
.why-v44-network .n1{left:7%!important;top:21%!important}
.why-v44-network .n2{left:34%!important;top:15%!important}
.why-v44-network .n3{left:76%!important;top:20%!important}
.why-v44-network .n4{left:12%!important;top:66%!important}
.why-v44-network .n5{left:46%!important;top:74%!important}
.why-v44-network .n6{left:89%!important;top:58%!important}
.why-v44-network .l1{left:7%!important;top:22%!important;width:27%!important;transform:rotate(-6deg)!important}
.why-v44-network .l2{left:34%!important;top:16%!important;width:42%!important;transform:rotate(4deg)!important}
.why-v44-network .l3{left:12%!important;top:67%!important;width:34%!important;transform:rotate(8deg)!important}
.why-v44-network .l4{left:46%!important;top:75%!important;width:43%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:7%!important;top:22%!important;width:45%!important;transform:rotate(76deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:76%!important;top:20%!important;width:38%!important;transform:rotate(88deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:34%!important;top:16%!important;width:26%!important;transform:rotate(88deg)!important;transform-origin:left center!important}

@media(max-width:1240px){
  .spx-why-v36-journey{grid-template-columns:minmax(300px,460px) minmax(500px,1fr)!important;gap:26px!important;}
  .spx-why-v36-sticky{margin-right:clamp(-150px,-9vw,-44px)!important;}
  .why-v36-visual img{inset:24px -110px 90px 0!important;width:calc(100% + 110px)!important;}
}
@media(max-width:980px){
  .spx-why-v36-journey{min-height:auto!important;grid-template-columns:1fr!important;}
  .spx-why-v36-steps,.spx-why-v36-sticky{position:relative!important;top:auto!important;height:auto!important;}
  .spx-why-v36-steps{display:grid!important;overflow:visible!important;}
  .why-v36-step{position:relative!important;inset:auto!important;height:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;}
  .spx-why-v36-sticky{width:100%!important;margin-right:0!important;}
  .why-v36-stage,.why-v36-visuals{min-height:620px!important;}
  .why-v36-visual{position:relative!important;inset:auto!important;opacity:1!important;pointer-events:auto!important;transform:none!important;display:none!important;}
  .why-v36-visual.is-active,.why-v36-visual[data-spx-active="1"]{display:block!important;}
  .why-v36-visual img{inset:16px -20px 96px 0!important;width:calc(100% + 20px)!important;height:calc(100% - 118px)!important;}
}


/* ==========================================================================
   A8.51 — hero entry, looser panels, pinned Why story, ZIP report cleanup
   ========================================================================== */

/* Global safety: right-side visuals may leave the viewport, but never create horizontal scroll. */
html, body {
  overflow-x: hidden !important;
}

/* HERO: prevent glow clipping at the bottom and keep the whole product atmosphere alive. */
.spx-hero-v26,
.spx-v26-shell,
.spx-hero-space,
.spx-v26-visual {
  overflow: visible !important;
}
.spx-hero-v26 {
  padding-bottom: clamp(260px, 22vw, 420px) !important;
  margin-bottom: clamp(-260px, -18vw, -180px) !important;
}
.v26-product-atmosphere,
.v26-builder-base,
.v26-product-layer {
  overflow: visible !important;
}

/* A slightly bigger, clearer right hero object, with glow allowed to breathe. */
.v26-product-atmosphere {
  top: 44.5% !important;
  width: min(1380px, 88vw) !important;
  height: min(830px, 58vw) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(1.17)
    contrast(1.08)
    brightness(1.08) !important;
}
.v26-product-atmosphere::before {
  opacity: .72 !important;
  inset: -18% -14% -18% -12% !important;
  filter: blur(42px) !important;
}
.v26-product-atmosphere::after {
  opacity: .08 !important;
  background:
    radial-gradient(110% 92% at 56% 50%, rgba(2,5,13,0), rgba(2,5,13,.03) 62%, rgba(2,5,13,.10) 100%) !important;
}

/* Hero entry animation: one-time load motion without fighting scroll transforms. */
html.spx-hero-entry-ready .v26-builder-base {
  animation: spxA851HeroBaseEnter .92s cubic-bezier(.16,1,.3,1) both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-add {
  animation: spxA851HeroPanelEnterLeft 1.05s cubic-bezier(.16,1,.3,1) .12s both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-settings {
  animation: spxA851HeroPanelEnterRight 1.05s cubic-bezier(.16,1,.3,1) .18s both !important;
}

/* Make add/settings feel like separate floating elements, without looping reset animations. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  padding: 3px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(107,232,255,.13) !important;
  background: rgba(5,11,23,.58) !important;
  box-shadow:
    0 26px 68px rgba(0,0,0,.23),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 38px rgba(24,201,245,.055) !important;
  opacity: calc(.96 - (var(--spx-hero-progress,0) * .22)) !important;
  transition: opacity .18s linear, filter .18s linear !important;
  will-change: transform, opacity, filter !important;
}
.v26-product-layer.layer-settings {
  right: -1.6% !important;
  top: -1.2% !important;
  width: 30% !important;
  height: 72% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * 10px) + (var(--spx-hero-progress,0) * -10px)),
      calc((var(--spx-home-mouse-y,0) * 6px) + (var(--spx-hero-progress,0) * 12px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .035))) !important;
}
.v26-product-layer.layer-add {
  left: -2.2% !important;
  top: 6.5% !important;
  width: 30.5% !important;
  height: 65% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * -8px) + (var(--spx-hero-progress,0) * 10px)),
      calc((var(--spx-home-mouse-y,0) * -5px) + (var(--spx-hero-progress,0) * -10px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .03))) !important;
}

/* Keep section colors unified: no local block/fade may tint hero or Why differently. */
.spx-home-main .spx-hero-v26,
.spx-home-main .spx-why-section.spx-why-v36,
.spx-why-v36-shell,
.spx-why-v36-journey,
.spx-why-v36-sticky,
.spx-why-v36-steps {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.spx-v26-bottom-fade,
.spx-why-section.spx-why-v36::before,
.spx-why-section.spx-why-v36::after,
.spx-why-v36-bg,
.why-v36-glow,
.why-v36-mist,
.why-v36-grid,
.why-v36-hero-tail {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

/* WHY: true pinned story. The track scrolls, the content stays locked in place. */
.spx-why-section.spx-why-v36 {
  overflow: visible !important;
  margin-top: clamp(-360px, -22vw, -240px) !important;
  padding-top: clamp(420px, 28vw, 560px) !important;
  padding-bottom: clamp(110px, 8vw, 170px) !important;
}
.spx-why-v36-journey {
  position: relative !important;
  min-height: 300vh !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 500px) minmax(620px, 1fr) !important;
  gap: clamp(30px, 4.5vw, 72px) !important;
  align-items: start !important;
}
.spx-why-v36-steps,
.spx-why-v36-sticky {
  position: sticky !important;
  top: clamp(92px, 13vh, 132px) !important;
  align-self: start !important;
}
.spx-why-v36-steps {
  height: min(500px, 62vh) !important;
  overflow: hidden !important;
  display: block !important;
  padding: 0 12px 0 0 !important;
}
.why-v36-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 22px, 0) !important;
  padding: 24px 24px 24px 20px !important;
  border: 1px solid rgba(107,232,255,.11) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.008)),
    linear-gradient(90deg, rgba(24,201,245,.045), rgba(24,201,245,0) 62%) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.12), inset 0 0 0 1px rgba(107,232,255,.035) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}
.why-v36-step.is-active,
.why-v36-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) !important;
}
.why-v36-step::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.75), rgba(37,99,235,.72), rgba(24,201,245,0)) !important;
}
.why-v36-step::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  width: 146px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.36), rgba(107,232,255,0)) !important;
}
.why-v36-step h3 {
  color: var(--text) !important;
  -webkit-text-stroke: 0 transparent !important;
}
.why-v41-step-progress {
  width: min(340px, 86%) !important;
  height: 5px !important;
  margin: 0 0 14px !important;
}

/* WHY visual: one visible image only. Network supports the image, not overpowers it. */
.spx-why-v36-sticky {
  width: min(1380px, calc(100vw - 16px)) !important;
  margin-right: clamp(-230px, -14vw, -92px) !important;
  overflow: visible !important;
}
.why-v36-stage,
.why-v36-visuals {
  min-height: 760px !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.why-v36-stage-top { display: none !important; }
.why-v36-visual {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(24px, 12px, 0) scale(.994) !important;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    visibility .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
.why-v36-visual.is-active,
.why-v36-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.why-v36-visual img {
  position: absolute !important;
  inset: 18px -190px 88px 0 !important;
  width: calc(100% + 190px) !important;
  height: calc(100% - 120px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border-radius: 28px !important;
  background: rgba(4,10,20,.03) !important;
  border: 1px solid rgba(107,232,255,.08) !important;
  box-shadow: 0 34px 104px rgba(0,0,0,.20) !important;
  z-index: 8 !important;
}

/* Modernized, lightly randomized network: controlled, not chaotic. */
.why-v44-network {
  position: absolute !important;
  inset: 2% -14% 6% -8% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}
.why-v44-network::before,
.why-v44-network::after {
  display: none !important;
}
.why-v44-network .node,
.why-v44-network .line {
  position: absolute !important;
  opacity: .78 !important;
  z-index: 5 !important;
}
.why-v44-network .node {
  width: 8px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: rgba(203,249,255,.88) !important;
  box-shadow: 0 0 14px rgba(24,201,245,.24) !important;
}
.why-v44-network .line {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(107,232,255,0), rgba(107,232,255,.70), rgba(37,99,235,.16)) !important;
  box-shadow: 0 0 10px rgba(24,201,245,.12) !important;
}
/* asymmetric but readable layout */
.why-v44-network .n1{left:7%!important;top:21%!important}
.why-v44-network .n2{left:34%!important;top:15%!important}
.why-v44-network .n3{left:76%!important;top:20%!important}
.why-v44-network .n4{left:12%!important;top:66%!important}
.why-v44-network .n5{left:46%!important;top:74%!important}
.why-v44-network .n6{left:89%!important;top:58%!important}
.why-v44-network .l1{left:7%!important;top:22%!important;width:27%!important;transform:rotate(-6deg)!important}
.why-v44-network .l2{left:34%!important;top:16%!important;width:42%!important;transform:rotate(4deg)!important}
.why-v44-network .l3{left:12%!important;top:67%!important;width:34%!important;transform:rotate(8deg)!important}
.why-v44-network .l4{left:46%!important;top:75%!important;width:43%!important;transform:rotate(-10deg)!important}
.why-v44-network .l5{left:7%!important;top:22%!important;width:45%!important;transform:rotate(76deg)!important;transform-origin:left center!important}
.why-v44-network .l6{left:76%!important;top:20%!important;width:38%!important;transform:rotate(88deg)!important;transform-origin:left center!important}
.why-v44-network .l7{left:34%!important;top:16%!important;width:26%!important;transform:rotate(88deg)!important;transform-origin:left center!important}

@keyframes spxA851HeroBaseEnter {
  from { opacity: 0; filter: blur(10px) saturate(.9); }
  to { opacity: 1; filter: blur(0) saturate(1.12); }
}
@keyframes spxA851HeroPanelEnterLeft {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: .96; filter: blur(0); }
}
@keyframes spxA851HeroPanelEnterRight {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: .96; filter: blur(0); }
}

@media(max-width:980px){
  .spx-why-v36-journey {
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .spx-why-v36-steps,
  .spx-why-v36-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    width: 100% !important;
    margin-right: 0 !important;
  }
  .why-v36-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }
  .why-v36-stage,
  .why-v36-visuals {
    min-height: 620px !important;
  }
  .why-v36-visual {
    position: relative !important;
    inset: auto !important;
    display: none !important;
  }
  .why-v36-visual.is-active,
  .why-v36-visual[data-spx-active="1"] {
    display: block !important;
  }
  .why-v36-visual img {
    inset: 16px -20px 96px 0 !important;
    width: calc(100% + 20px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* ==========================================================================
   A8.52 — clean Why Spixor rebuild + hero right tune
   ========================================================================== */

/* Root safety */
html, body {
  overflow-x: hidden !important;
}

/* Hero tuning */
.spx-hero-v26,
.spx-v26-shell,
.spx-hero-space,
.spx-v26-visual {
  overflow: visible !important;
}
.spx-hero-v26 {
  padding-bottom: clamp(240px, 20vw, 380px) !important;
  margin-bottom: clamp(-250px, -17vw, -170px) !important;
}

/* Move hero image higher and keep it strong. */
.v26-product-atmosphere {
  top: 40.5% !important;
  left: 50% !important;
  width: min(1360px, 88vw) !important;
  height: min(820px, 58vw) !important;
  opacity: calc(1 - (var(--spx-hero-progress, 0) * .18)) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(1.16)
    contrast(1.08)
    brightness(1.08) !important;
  transform:
    translate(calc(-8% - (var(--spx-hero-progress, 0) * 7%)), calc(-20% + (var(--spx-hero-progress, 0) * 8%)))
    perspective(1600px)
    rotateY(calc(-11deg + (var(--spx-hero-progress, 0) * 4deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress, 0) * 1.8deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress, 0) * .5deg)))
    scale(calc(1.09 - (var(--spx-hero-progress, 0) * .10))) !important;
  transition: opacity .18s linear, transform .18s linear, filter .18s linear !important;
}
.v26-product-atmosphere::before {
  opacity: .72 !important;
  inset: -18% -14% -18% -12% !important;
  filter: blur(42px) !important;
}
.v26-product-atmosphere::after {
  opacity: .08 !important;
  background:
    radial-gradient(110% 92% at 56% 50%, rgba(2,5,13,0), rgba(2,5,13,.03) 62%, rgba(2,5,13,.10) 100%) !important;
}
.v26-builder-base {
  background: rgba(5,11,23,.84) !important;
  box-shadow: 0 28px 96px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.03) inset !important;
}

/* Settings panel was too far right; bring panels inward, let them feel separate without loop reset. */
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  padding: 3px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(107,232,255,.13) !important;
  background: rgba(5,11,23,.58) !important;
  box-shadow:
    0 26px 68px rgba(0,0,0,.23),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 38px rgba(24,201,245,.055) !important;
  opacity: calc(.96 - (var(--spx-hero-progress,0) * .20)) !important;
  will-change: transform, opacity, filter !important;
}
.v26-product-layer.layer-settings {
  right: 4.7% !important;
  top: .6% !important;
  width: 27.5% !important;
  height: 70% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * 9px) + (var(--spx-hero-progress,0) * -7px)),
      calc((var(--spx-home-mouse-y,0) * 6px) + (var(--spx-hero-progress,0) * 10px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .03))) !important;
}
.v26-product-layer.layer-add {
  left: .5% !important;
  top: 6.2% !important;
  width: 28% !important;
  height: 64% !important;
  transform:
    translate3d(
      calc((var(--spx-home-mouse-x,0) * -8px) + (var(--spx-hero-progress,0) * 7px)),
      calc((var(--spx-home-mouse-y,0) * -5px) + (var(--spx-hero-progress,0) * -8px)),
      0
    )
    scale(calc(1 - (var(--spx-hero-progress,0) * .028))) !important;
}

/* Hero entry, no transform fight */
html.spx-hero-entry-ready .v26-builder-base {
  animation: spxA852HeroBaseEnter .9s cubic-bezier(.16,1,.3,1) both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-add {
  animation: spxA852PanelOpacityIn .85s cubic-bezier(.16,1,.3,1) .10s both !important;
}
html.spx-hero-entry-ready .v26-product-layer.layer-settings {
  animation: spxA852PanelOpacityIn .85s cubic-bezier(.16,1,.3,1) .16s both !important;
}
@keyframes spxA852HeroBaseEnter {
  from { opacity: 0; filter: blur(10px) saturate(.9); }
  to { opacity: 1; filter: blur(0) saturate(1.12); }
}
@keyframes spxA852PanelOpacityIn {
  from { opacity: 0; filter: blur(7px); }
  to { opacity: .96; filter: blur(0); }
}

/* Full Why rebuild: neutralize old Why styles */
.spx-why-section.spx-why-v52,
.spx-why-section.spx-why-v52 * {
  box-sizing: border-box;
}
.spx-why-section.spx-why-v52 {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  margin-top: clamp(-340px, -20vw, -220px) !important;
  padding: clamp(430px, 28vw, 560px) var(--side) clamp(110px, 9vw, 180px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.spx-why-section.spx-why-v52::before,
.spx-why-section.spx-why-v52::after {
  display: none !important;
  content: none !important;
}
.spx-why-v52 .spx-why52-shell {
  position: relative;
  z-index: 2;
  width: min(1640px, 100%);
  margin: 0 auto;
}
.spx-why52-head {
  max-width: 850px;
  margin: 0 0 clamp(28px, 4vw, 54px);
}
.spx-why52-head h2 {
  margin: 14px 0 0;
  font-size: clamp(48px, 6vw, 92px);
  line-height: .9;
  letter-spacing: -.08em;
}
.spx-why52-head p {
  margin: 20px 0 0;
  max-width: 660px;
  color: var(--text-soft);
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.5;
}

/* Scroll track. The track scrolls; the inside stays pinned. */
.spx-why52-track {
  position: relative;
  min-height: 275vh;
}
.spx-why52-sticky {
  position: sticky;
  top: clamp(86px, 11vh, 124px);
  min-height: min(760px, 82vh);
  display: grid;
  grid-template-columns: minmax(320px, 500px) minmax(620px, 1fr);
  gap: clamp(30px, 4.6vw, 76px);
  align-items: center;
}

/* Left story cards */
.spx-why52-copy {
  display: grid;
  gap: 14px;
  align-self: center;
}
.why52-step {
  --step-progress: 0;
  position: relative;
  min-height: 116px;
  padding: 18px 20px 18px 18px;
  border: 1px solid rgba(107,232,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(255,255,255,.008)),
    linear-gradient(90deg, rgba(24,201,245,.035), rgba(24,201,245,0) 62%);
  color: var(--text);
  opacity: .48;
  transform: translate3d(0,0,0);
  transition:
    opacity .38s var(--ease),
    transform .38s var(--ease),
    min-height .38s var(--ease),
    border-color .38s var(--ease),
    background .38s var(--ease);
}
.why52-step::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  opacity: .22;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.72), rgba(37,99,235,.72), rgba(24,201,245,0));
  transition: opacity .38s var(--ease);
}
.why52-step::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.30), rgba(107,232,255,0));
}
.why52-step span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #bff4ff;
  font-size: 12px;
  font-weight: 980;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.why52-step span::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.48), rgba(107,232,255,0));
}
.why52-progress {
  position: relative;
  display: block;
  width: min(320px, 86%);
  height: 5px;
  margin: 12px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107,232,255,.15), rgba(107,232,255,.04));
  box-shadow: inset 0 0 0 1px rgba(107,232,255,.05);
}
.why52-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--step-progress,0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, #18c9f5, #2563eb);
  box-shadow: 0 0 18px rgba(24,201,245,.40);
}
.why52-step h3 {
  margin: 13px 0 0;
  font-size: clamp(23px, 2.05vw, 36px);
  line-height: 1.02;
  letter-spacing: -.055em;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(245,250,255,.30);
}
html[data-theme="light"] .why52-step h3 {
  -webkit-text-stroke-color: rgba(16,24,40,.28);
}
.why52-step p,
.why52-step ul {
  max-height: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .38s var(--ease), opacity .38s var(--ease), margin .38s var(--ease);
}
.why52-step p {
  color: var(--secondary);
  font-size: 15px;
  line-height: 1.45;
}
.why52-step ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.why52-step li {
  position: relative;
  padding-left: 16px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.42;
}
.why52-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--cyan-2);
  box-shadow: 0 0 14px rgba(24,201,245,.30);
}
.why52-step.is-active {
  min-height: 260px;
  opacity: 1;
  transform: translate3d(0,-2px,0);
  border-color: rgba(107,232,255,.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.012)),
    linear-gradient(90deg, rgba(24,201,245,.085), rgba(24,201,245,.01) 58%, rgba(24,201,245,0));
  box-shadow: 0 24px 64px rgba(0,0,0,.15), inset 0 0 0 1px rgba(107,232,255,.045);
}
.why52-step.is-active::before {
  opacity: 1;
}
.why52-step.is-active h3 {
  color: var(--text);
  -webkit-text-stroke: 0 transparent;
}
.why52-step.is-active p {
  max-height: 92px;
  opacity: 1;
  margin: 14px 0 0;
}
.why52-step.is-active ul {
  max-height: 130px;
  opacity: 1;
  margin: 16px 0 0;
}

/* Right stage */
.spx-why52-stage {
  position: relative;
  min-height: min(760px, 78vh);
  align-self: center;
  overflow: visible;
}
.why52-visuals {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.why52-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(26px, 12px, 0) scale(.994);
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1),
    filter .54s cubic-bezier(.16,1,.3,1);
}
.why52-visual.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0,0,0) scale(1);
}
.why52-visual img {
  position: absolute;
  inset: 12px -170px 82px 0;
  width: calc(100% + 170px);
  height: calc(100% - 106px);
  object-fit: contain;
  object-position: center right;
  border-radius: 28px;
  border: 1px solid rgba(107,232,255,.08);
  background: rgba(4,10,20,.03);
  box-shadow: 0 34px 104px rgba(0,0,0,.20);
  z-index: 6;
}
.why52-visual figcaption {
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: min(350px, 42vw);
  padding: 14px 0 0 16px;
  z-index: 10;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.why52-visual figcaption::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0));
}
.why52-visual figcaption::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 70px;
  background: linear-gradient(180deg, rgba(107,232,255,.38), rgba(107,232,255,0));
}
.why52-visual figcaption b {
  display: block;
  margin-left: 14px;
  color: var(--text);
  font-size: clamp(24px, 2.4vw, 38px);
  letter-spacing: -.055em;
  line-height: 1;
}
.why52-visual figcaption span {
  display: block;
  margin: 6px 0 0 14px;
  max-width: 300px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.42;
}

/* Controlled network behind + around visual */
.why52-network {
  position: absolute;
  inset: 3% -12% 8% -8%;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 9px), calc(var(--spx-home-mouse-y,0) * 6px), 0);
}
.why52-network .p {
  fill: none;
  stroke: rgba(107,232,255,.48);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(24,201,245,.14));
  stroke-dasharray: 280 720;
  animation: spxWhy52Network 8s ease-in-out infinite alternate;
}
.why52-network .p2,
.why52-network .p4 {
  stroke: rgba(37,99,235,.34);
  animation-delay: -2s;
}
.why52-network .p3,
.why52-network .p5 {
  animation-delay: -4s;
}
.why52-network .n {
  fill: rgba(203,249,255,.88);
  filter: drop-shadow(0 0 10px rgba(24,201,245,.36));
  animation: spxWhy52Node 4s ease-in-out infinite alternate;
}
.why52-float {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(107,232,255,.09);
  background:
    linear-gradient(rgba(107,232,255,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.016) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  opacity: .72;
}
.why52-float.f1 {
  left: 22px;
  top: 76px;
  width: 102px;
  height: 74px;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * -7px), calc(var(--spx-home-mouse-y,0) * -4px), 0);
}
.why52-float.f2 {
  right: 68px;
  bottom: 130px;
  width: 132px;
  height: 100px;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 5px), calc(var(--spx-home-mouse-y,0) * 4px), 0);
}
.why52-float.f3 {
  left: 42%;
  top: 18px;
  width: 84px;
  height: 56px;
  opacity: .48;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 4px), calc(var(--spx-home-mouse-y,0) * -4px), 0);
}
@keyframes spxWhy52Network {
  from { opacity: .36; stroke-dashoffset: 0; }
  to { opacity: .78; stroke-dashoffset: -110; }
}
@keyframes spxWhy52Node {
  from { opacity: .52; transform: scale(.9); }
  to { opacity: .98; transform: scale(1.12); }
}

@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(480px, 1fr);
    gap: 28px;
  }
  .why52-visual img {
    inset: 18px -92px 88px 0;
    width: calc(100% + 92px);
  }
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: -220px !important;
    padding-top: 300px !important;
  }
  .spx-why52-track {
    min-height: auto;
  }
  .spx-why52-sticky {
    position: relative;
    top: auto;
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .spx-why52-copy {
    gap: 16px;
  }
  .why52-step {
    min-height: 0;
    opacity: 1;
  }
  .why52-step p,
  .why52-step ul,
  .why52-step.is-active p,
  .why52-step.is-active ul {
    max-height: none;
    opacity: 1;
    margin-top: 12px;
  }
  .why52-step h3 {
    color: var(--text);
    -webkit-text-stroke: 0 transparent;
  }
  .spx-why52-stage {
    min-height: 620px;
  }
  .why52-visual {
    position: relative;
    display: none;
    min-height: 620px;
  }
  .why52-visual.is-active {
    display: block;
  }
  .why52-visual img {
    inset: 16px -18px 96px 0;
    width: calc(100% + 18px);
    height: calc(100% - 118px);
  }
}
@media (max-width: 760px) {
  .v26-product-atmosphere {
    top: 58% !important;
    width: min(880px, 108vw) !important;
    height: min(520px, 66vw) !important;
    transform:
      translate(-50%,-10%)
      perspective(1200px)
      rotateY(-6deg)
      rotateX(2deg)
      scale(1.02) !important;
  }
}


/* A8.52b — bring Why Spixor into view sooner */
.spx-why-section.spx-why-v52 {
  margin-top: clamp(-260px, -16vw, -160px) !important;
  padding-top: clamp(300px, 21vw, 420px) !important;
}
.spx-why52-head {
  margin-bottom: clamp(24px, 3.4vw, 44px) !important;
}
.spx-why52-track {
  min-height: 255vh !important;
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: -170px !important;
    padding-top: 240px !important;
  }
}


/* ==========================================================================
   A8.53 — Why fixed-stage steps + edge visuals
   ========================================================================== */

/*
  This pass fixes the Why Spixor section direction:
  - the text content stays pinned instead of scrolling down;
  - steps switch in one fixed card/stage;
  - right images are larger and may leave the viewport to the right;
  - visuals are not placed inside visible boxes;
  - network lines sit behind the image and extend from around the edges;
  - the Why use Spixor pill appears sooner/higher after the hero.
*/

html,
body {
  overflow-x: hidden !important;
}

/* Hero quick tune: settings panel slightly more inward, hero image still higher. */
.v26-product-atmosphere {
  top: 39.8% !important;
}
.v26-product-layer.layer-settings {
  right: 6.2% !important;
  top: 1.2% !important;
  width: 26.5% !important;
}
.v26-product-layer.layer-add {
  left: 1.2% !important;
  width: 27.5% !important;
}

/* Why section begins sooner and the pill/head sits higher in the story. */
.spx-why-section.spx-why-v52 {
  margin-top: clamp(-230px, -14vw, -145px) !important;
  padding-top: clamp(245px, 17vw, 370px) !important;
  padding-bottom: clamp(90px, 7vw, 140px) !important;
  background: transparent !important;
  overflow: visible !important;
}
.spx-why52-head {
  transform: translateY(clamp(-42px, -3.2vw, -24px)) !important;
  margin-bottom: clamp(4px, 1.6vw, 24px) !important;
}
.spx-why52-head .eyebrow {
  position: relative;
  z-index: 5;
}

/* Real pinned story track. */
.spx-why52-track {
  min-height: 305vh !important;
  margin-top: 0 !important;
}
.spx-why52-sticky {
  position: sticky !important;
  top: clamp(70px, 10vh, 108px) !important;
  min-height: min(780px, 82vh) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 500px) minmax(620px, 1fr) !important;
  gap: clamp(30px, 4.5vw, 74px) !important;
  align-items: center !important;
}

/* Left: one fixed content card. No downward content scroll. */
.spx-why52-copy {
  position: relative !important;
  display: block !important;
  height: min(430px, 56vh) !important;
  overflow: hidden !important;
  align-self: center !important;
}
.why52-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 22px 24px 22px 20px !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 24px, 0) !important;
  border: 1px solid rgba(107,232,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.010)),
    linear-gradient(90deg, rgba(24,201,245,.055), rgba(24,201,245,0) 64%) !important;
  box-shadow:
    0 22px 56px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(107,232,255,.035) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}
.why52-step.is-active,
.why52-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) !important;
}
.why52-step::before {
  content: "" !important;
  position: absolute !important;
  left: -1px !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 2px !important;
  background: linear-gradient(180deg, rgba(24,201,245,0), rgba(24,201,245,.78), rgba(37,99,235,.72), rgba(24,201,245,0)) !important;
  box-shadow: 0 0 18px rgba(24,201,245,.22) !important;
}
.why52-step::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  width: 145px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}
.why52-step span {
  margin: 0 0 12px !important;
}
.why52-step h3 {
  margin: 12px 0 0 !important;
  color: var(--text) !important;
  -webkit-text-stroke: 0 transparent !important;
}
.why52-step p,
.why52-step ul,
.why52-step.is-active p,
.why52-step.is-active ul {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}
.why52-step p {
  margin: 14px 0 0 !important;
  max-width: 455px !important;
}
.why52-step ul {
  margin: 16px 0 0 !important;
  max-width: 430px !important;
}
.why52-progress {
  width: min(360px, 88%) !important;
  height: 5px !important;
  margin: 12px 0 0 !important;
}

/* Right: bigger edge visual. No visible container/box around image. */
.spx-why52-stage {
  position: relative !important;
  min-height: min(800px, 80vh) !important;
  overflow: visible !important;
  align-self: center !important;
  isolation: isolate !important;
}
.why52-visuals {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}
.why52-visual {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(36px, 12px, 0) scale(.994) !important;
  transition:
    opacity .58s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    visibility .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
.why52-visual.is-active,
.why52-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}
.why52-visual img {
  position: absolute !important;
  inset: 0 -300px 70px -8px !important;
  width: calc(100% + 310px) !important;
  height: calc(100% - 70px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border-radius: 26px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow:
    0 42px 126px rgba(0,0,0,.24),
    0 0 90px rgba(24,201,245,.10) !important;
  z-index: 8 !important;
}

/* Caption is a light annotation, not a box. */
.why52-visual figcaption {
  position: absolute !important;
  left: 20px !important;
  bottom: 6px !important;
  width: min(340px, 42vw) !important;
  padding: 12px 0 0 16px !important;
  z-index: 10 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.why52-visual figcaption::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 110px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}
.why52-visual figcaption::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 68px !important;
  background: linear-gradient(180deg, rgba(107,232,255,.38), rgba(107,232,255,0)) !important;
}

/* Lines stay underneath image: visible from edges only, never through the image surface. */
.why52-network {
  position: absolute !important;
  inset: -2% -22% 2% -14% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transform: translate3d(calc(var(--spx-home-mouse-x,0) * 8px), calc(var(--spx-home-mouse-y,0) * 5px), 0) !important;
}
.why52-network .p {
  fill: none !important;
  stroke: rgba(107,232,255,.48) !important;
  stroke-width: 1.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 10px rgba(24,201,245,.14)) !important;
  stroke-dasharray: 220 760 !important;
  animation: spxWhy53Network 8.5s ease-in-out infinite alternate !important;
}
.why52-network .p2,
.why52-network .p4 {
  stroke: rgba(37,99,235,.30) !important;
}
.why52-network .n {
  fill: rgba(203,249,255,.84) !important;
  filter: drop-shadow(0 0 9px rgba(24,201,245,.30)) !important;
}

/* Keep the floating blocks near edges; they do not cover the image center. */
.why52-float {
  z-index: 6 !important;
  opacity: .58 !important;
  background:
    linear-gradient(rgba(107,232,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.014) 1px, transparent 1px) !important;
  background-size: 22px 22px, 22px 22px !important;
}
.why52-float.f1 {
  left: 4px !important;
  top: 78px !important;
}
.why52-float.f2 {
  right: 118px !important;
  bottom: 110px !important;
}
.why52-float.f3 {
  left: 47% !important;
  top: 0 !important;
  opacity: .34 !important;
}

@keyframes spxWhy53Network {
  from { opacity: .34; stroke-dashoffset: 0; }
  to { opacity: .74; stroke-dashoffset: -100; }
}

@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(500px, 1fr) !important;
  }
  .why52-visual img {
    inset: 12px -180px 78px -4px !important;
    width: calc(100% + 184px) !important;
  }
}
@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    margin-top: -170px !important;
    padding-top: 230px !important;
  }
  .spx-why52-track {
    min-height: auto !important;
  }
  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .spx-why52-copy {
    height: auto !important;
    display: grid !important;
    gap: 16px !important;
    overflow: visible !important;
  }
  .why52-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
  }
  .spx-why52-stage {
    min-height: 620px !important;
  }
  .why52-visual {
    position: relative !important;
    display: none !important;
    min-height: 620px !important;
  }
  .why52-visual.is-active,
  .why52-visual[data-spx-active="1"] {
    display: block !important;
  }
  .why52-visual img {
    inset: 16px -18px 96px 0 !important;
    width: calc(100% + 18px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* A8.53b — lift hero copy/buttons slightly */
.spx-hero-v26 .spx-v26-copy,
.spx-hero-v26 .hero-copy,
.spx-hero-v26 .spx-hero-copy {
  transform: translateY(clamp(-34px, -2.8vw, -18px)) !important;
}
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .hero-actions,
.spx-hero-v26 .spx-hero-actions {
  margin-top: clamp(18px, 2vw, 30px) !important;
}
@media (max-width: 900px) {
  .spx-hero-v26 .spx-v26-copy,
  .spx-hero-v26 .hero-copy,
  .spx-hero-v26 .spx-hero-copy {
    transform: translateY(-10px) !important;
  }
}


/* ==========================================================================
   A8.54 — Why pinning and edge visual correction
   ========================================================================== */

/*
  Fixes:
  - Why content must stay pinned while scrolling through the steps.
  - Right-side images must clearly come from / beyond the right side of the viewport.
  - Images should not sit in visible boxes.
  - Network lines should support from underneath/edges and not run across the screenshot.
*/

/* Keep all right-overflow visual work hidden from horizontal page scroll. */
html,
body,
.spx-home-main {
  overflow-x: hidden !important;
}

/* Make the Why track longer so the sticky content has enough room to stay locked. */
.spx-why-section.spx-why-v52 {
  overflow: visible !important;
  padding-bottom: clamp(120px, 9vw, 180px) !important;
}

.spx-why52-track {
  position: relative !important;
  min-height: 390vh !important;
  overflow: visible !important;
}

.spx-why52-sticky {
  position: sticky !important;
  top: clamp(58px, 8vh, 96px) !important;
  min-height: calc(100vh - clamp(74px, 10vh, 116px)) !important;
  height: calc(100vh - clamp(74px, 10vh, 116px)) !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 500px) minmax(700px, 1fr) !important;
  gap: clamp(28px, 4.5vw, 72px) !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Left copy is a fixed stage. Steps swap in-place and never travel upward out of sight. */
.spx-why52-copy {
  position: relative !important;
  align-self: center !important;
  height: min(455px, calc(100vh - 190px)) !important;
  min-height: 390px !important;
  overflow: hidden !important;
  display: block !important;
}

.why52-step {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, 18px, 0) !important;
  transition:
    opacity .54s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    visibility .54s cubic-bezier(.16,1,.3,1) !important;
}

.why52-step.is-active,
.why52-step[data-spx-active="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
}

.why52-step p,
.why52-step ul,
.why52-step.is-active p,
.why52-step.is-active ul {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.why52-step p {
  margin: 14px 0 0 !important;
}

.why52-step ul {
  margin: 16px 0 0 !important;
}

.why52-progress {
  width: min(380px, 90%) !important;
}

/* Right stage is anchored to the viewport edge. */
.spx-why52-stage {
  position: relative !important;
  justify-self: end !important;
  align-self: center !important;
  width: min(1320px, 76vw) !important;
  min-height: min(820px, calc(100vh - 96px)) !important;
  height: min(820px, calc(100vh - 96px)) !important;
  margin-right: calc(-1 * var(--side) - 240px) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.why52-visuals {
  position: absolute !important;
  inset: 0 !important;
  overflow: visible !important;
}

/* Only the active visual is visible. */
.why52-visual {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(56px, 10px, 0) scale(.992) !important;
  transition:
    opacity .56s cubic-bezier(.16,1,.3,1),
    transform .56s cubic-bezier(.16,1,.3,1),
    visibility .56s cubic-bezier(.16,1,.3,1),
    filter .56s cubic-bezier(.16,1,.3,1) !important;
}

.why52-visual.is-active,
.why52-visual[data-spx-active="1"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate3d(0,0,0) scale(1) !important;
}

/* Bigger images, intentionally pushed off the right edge. No visible box. */
.why52-visual img {
  position: absolute !important;
  inset: 0 -430px 62px -10px !important;
  width: calc(100% + 440px) !important;
  height: calc(100% - 62px) !important;
  object-fit: contain !important;
  object-position: center right !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow:
    0 42px 126px rgba(0,0,0,.22),
    0 0 90px rgba(24,201,245,.08) !important;
  z-index: 8 !important;
}

/* Network below and around the visual, never across the image surface. */
.why52-network {
  position: absolute !important;
  inset: 2% -28% 4% -18% !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: .88 !important;
  transform: translate3d(
    calc(var(--spx-home-mouse-x,0) * 7px),
    calc(var(--spx-home-mouse-y,0) * 5px),
    0
  ) !important;
}

.why52-network .p {
  fill: none !important;
  stroke: rgba(107,232,255,.42) !important;
  stroke-width: 1.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 9px rgba(24,201,245,.10)) !important;
  stroke-dasharray: 190 850 !important;
  animation: spxWhy54Network 9s ease-in-out infinite alternate !important;
}

/* Hide paths that cross the central image too much; keep edge lines. */
.why52-network .p1,
.why52-network .p2,
.why52-network .p4 {
  opacity: .78 !important;
}

.why52-network .p3,
.why52-network .p5 {
  opacity: .34 !important;
}

.why52-network .n {
  fill: rgba(203,249,255,.78) !important;
  filter: drop-shadow(0 0 8px rgba(24,201,245,.24)) !important;
}

/* Floating edge blocks only; no central obstruction. */
.why52-float {
  z-index: 6 !important;
  opacity: .46 !important;
  border-color: rgba(107,232,255,.075) !important;
  background:
    linear-gradient(rgba(107,232,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107,232,255,.010) 1px, transparent 1px) !important;
  background-size: 22px 22px, 22px 22px !important;
}

.why52-float.f1 {
  left: -24px !important;
  top: 86px !important;
}

.why52-float.f2 {
  right: 260px !important;
  bottom: 96px !important;
}

.why52-float.f3 {
  left: 52% !important;
  top: -8px !important;
  opacity: .24 !important;
}

/* Caption stays outside the image feeling, as a light annotation. */
.why52-visual figcaption {
  left: -4px !important;
  bottom: 0 !important;
  width: min(340px, 40vw) !important;
  z-index: 10 !important;
}

@keyframes spxWhy54Network {
  from { opacity: .28; stroke-dashoffset: 0; }
  to { opacity: .68; stroke-dashoffset: -95; }
}

/* Make section progression slower and more stable on desktop. */
@media (min-width: 981px) {
  .spx-why52-track {
    min-height: 410vh !important;
  }
}

/* Responsive fallback: no huge right overflow on tablet/mobile. */
@media (max-width: 1180px) {
  .spx-why52-sticky {
    grid-template-columns: minmax(290px, 430px) minmax(520px, 1fr) !important;
  }

  .spx-why52-stage {
    width: min(980px, 70vw) !important;
    margin-right: -130px !important;
  }

  .why52-visual img {
    inset: 12px -230px 78px -4px !important;
    width: calc(100% + 234px) !important;
  }
}

@media (max-width: 980px) {
  .spx-why52-track {
    min-height: auto !important;
  }

  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }

  .spx-why52-copy {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .why52-step {
    position: relative !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
  }

  .spx-why52-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 620px !important;
    margin-right: 0 !important;
  }

  .why52-visual {
    position: relative !important;
    display: none !important;
    min-height: 620px !important;
  }

  .why52-visual.is-active,
  .why52-visual[data-spx-active="1"] {
    display: block !important;
  }

  .why52-visual img {
    inset: 16px -18px 96px 0 !important;
    width: calc(100% + 18px) !important;
    height: calc(100% - 118px) !important;
  }
}


/* ==========================================================================
   A8.55 — reusable section entry + exit scroll animations
   ========================================================================== */

/*
  Generic section animation system:
  - Hero, Why Spixor and future homepage sections receive the same CSS variable API.
  - JS updates:
      --spx-section-entry : 0 → 1 while entering
      --spx-section-exit  : 0 → 1 while leaving
      --spx-section-progress : 0 → 1 through the section
  - The animations are subtle by default and specific sections can override targets.
*/

.spx-section-anim {
  --spx-section-entry: 0;
  --spx-section-exit: 0;
  --spx-section-progress: 0;
  --spx-section-enter-y: calc((1 - var(--spx-section-entry)) * 42px);
  --spx-section-exit-y: calc(var(--spx-section-exit) * -42px);
  --spx-section-opacity: max(.18, calc(var(--spx-section-entry) - (var(--spx-section-exit) * .54)));
  position: relative;
}

/* Hero entry/exit */
.spx-hero-v26.spx-section-anim .spx-v26-copy {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        clamp(-34px, -2.8vw, -18px)
        + var(--spx-section-enter-y)
        + var(--spx-section-exit-y)
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

.spx-hero-v26.spx-section-anim .spx-v26-kicker,
.spx-hero-v26.spx-section-anim h1,
.spx-hero-v26.spx-section-anim .spx-v26-lead,
.spx-hero-v26.spx-section-anim .spx-v26-support,
.spx-hero-v26.spx-section-anim .spx-v26-actions,
.spx-hero-v26.spx-section-anim .spx-v26-note {
  transform: translateY(calc((1 - var(--spx-section-entry)) * 14px)) !important;
  transition: transform .18s linear, opacity .18s linear !important;
}

.spx-hero-v26.spx-section-anim .spx-v26-kicker { transition-delay: 0ms; }
.spx-hero-v26.spx-section-anim h1 { transition-delay: 25ms; }
.spx-hero-v26.spx-section-anim .spx-v26-lead { transition-delay: 50ms; }
.spx-hero-v26.spx-section-anim .spx-v26-support { transition-delay: 75ms; }
.spx-hero-v26.spx-section-anim .spx-v26-actions { transition-delay: 100ms; }
.spx-hero-v26.spx-section-anim .spx-v26-note { transition-delay: 125ms; }

/* Hero product exits into the Why story instead of abruptly stopping. */
.spx-hero-v26.spx-section-anim .v26-product-atmosphere {
  opacity: calc((1 - (var(--spx-section-exit) * .24)) * (1 - (var(--spx-hero-progress, 0) * .18))) !important;
  filter:
    drop-shadow(0 62px 150px rgba(0,0,0,.42))
    drop-shadow(0 0 92px rgba(24,201,245,.18))
    saturate(calc(1.16 - (var(--spx-section-exit) * .05)))
    contrast(1.08)
    brightness(calc(1.08 - (var(--spx-section-exit) * .05))) !important;
}

/* Why entry/exit */
.spx-why-v52.spx-section-anim .spx-why52-head {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        clamp(-42px, -3.2vw, -24px)
        + (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -36px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

.spx-why-v52.spx-section-anim .spx-why52-sticky {
  opacity: max(.08, calc(var(--spx-section-entry) - (var(--spx-section-exit) * .70))) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 38px
        + var(--spx-section-exit) * -42px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

/* Why visuals get an additional depth shift on section exit. */
.spx-why-v52.spx-section-anim .spx-why52-stage {
  transform:
    translate3d(
      calc(var(--spx-section-exit) * 34px),
      calc((1 - var(--spx-section-entry)) * 18px + var(--spx-section-exit) * -20px),
      0
    ) !important;
  transition: transform .18s linear, opacity .18s linear !important;
  will-change: transform;
}

/* Future homepage sections: automatic default entry/exit for common section children. */
#main > section.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
.spx-home-main > section.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > * {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -34px
      )
    ) !important;
  transition: opacity .18s linear, transform .18s linear !important;
  will-change: opacity, transform;
}

/* Optional stagger hooks for future sections. */
.spx-section-anim [data-spx-animate="rise"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateY(
      calc(
        (1 - var(--spx-section-entry)) * 28px
        + var(--spx-section-exit) * -28px
      )
    ) !important;
}

.spx-section-anim [data-spx-animate="fade"] {
  opacity: var(--spx-section-opacity) !important;
}

.spx-section-anim [data-spx-animate="slide-right"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateX(
      calc(
        (1 - var(--spx-section-entry)) * -34px
        + var(--spx-section-exit) * 34px
      )
    ) !important;
}

.spx-section-anim [data-spx-animate="slide-left"] {
  opacity: var(--spx-section-opacity) !important;
  transform:
    translateX(
      calc(
        (1 - var(--spx-section-entry)) * 34px
        + var(--spx-section-exit) * -34px
      )
    ) !important;
}

/* Reduced motion: keep all sections visible and stable. */
@media (prefers-reduced-motion: reduce) {
  .spx-section-anim,
  .spx-section-anim *,
  .spx-hero-v26.spx-section-anim .spx-v26-copy,
  .spx-why-v52.spx-section-anim .spx-why52-head,
  .spx-why-v52.spx-section-anim .spx-why52-sticky,
  .spx-why-v52.spx-section-anim .spx-why52-stage {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================================================== 
   A8.56 — single smooth choreography pass: hero bridge, pinned Why, footer note
   ========================================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
}

/* Navigator brand collapse: Spixor text visually folds back into the logo when the navigator compacts. */
.spx-nav-v26 .brand {
  overflow: hidden;
  transition:
    gap .48s cubic-bezier(.16,1,.3,1),
    padding .48s cubic-bezier(.16,1,.3,1),
    transform .48s cubic-bezier(.16,1,.3,1),
    background .32s var(--ease) !important;
}
.spx-nav-v26 .brand img {
  position: relative;
  z-index: 2;
  transform-origin: center;
  transition:
    transform .52s cubic-bezier(.16,1,.3,1),
    box-shadow .52s cubic-bezier(.16,1,.3,1),
    border-radius .52s cubic-bezier(.16,1,.3,1) !important;
}
.spx-nav-v26 .brand span {
  display: inline-block;
  max-width: 92px;
  transform-origin: 0 50%;
  opacity: 1;
  filter: blur(0);
  clip-path: inset(-20% 0 -20% 0 round 8px);
  transition:
    max-width .52s cubic-bezier(.16,1,.3,1),
    opacity .34s ease,
    transform .52s cubic-bezier(.16,1,.3,1),
    filter .52s cubic-bezier(.16,1,.3,1),
    margin .52s cubic-bezier(.16,1,.3,1) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand,
.site-header.spx-nav-v26.is-open .brand {
  gap: 0 !important;
  padding-right: 0 !important;
}
.site-header.spx-nav-v26.is-scrolled .brand img,
.site-header.spx-nav-v26.is-open .brand img {
  transform: scale(1.055) rotate(-2deg) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(107,232,255,.26), 0 0 32px rgba(24,201,245,.22), 0 12px 30px rgba(0,0,0,.18) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  max-width: 0 !important;
  margin-left: -8px !important;
  opacity: 0 !important;
  filter: blur(5px) saturate(1.35) !important;
  transform: translate3d(-28px,0,0) scaleX(.08) scale(.88) !important;
}

/* Hero becomes a scroll-driven scene instead of static copy + image. */
.spx-hero-v26 {
  min-height: clamp(980px, 118svh, 1320px) !important;
  overflow: visible !important;
  z-index: 2;
  --spx-hero-copy-y: calc((1 - var(--spx-hero-load, 0)) * 34px - (var(--spx-hero-progress-smooth, 0) * 86px));
  --spx-hero-copy-x: calc(var(--spx-hero-progress-smooth, 0) * -20px);
  --spx-hero-copy-scale: calc(1 - (var(--spx-hero-progress-smooth, 0) * .035));
  --spx-hero-copy-opacity: clamp(.04, calc(var(--spx-hero-load, 0) - (var(--spx-hero-progress-smooth, 0) * .92)), 1);
}
.spx-hero-v26 .spx-v26-shell {
  position: relative;
  z-index: 5;
}
.spx-hero-v26.spx-section-anim .spx-v26-copy {
  opacity: var(--spx-hero-copy-opacity) !important;
  transform:
    translate3d(var(--spx-hero-copy-x), var(--spx-hero-copy-y), 0)
    scale(var(--spx-hero-copy-scale)) !important;
  transform-origin: left center;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-hero-v26 .spx-v26-kicker,
.spx-hero-v26 .spx-v26-copy h1,
.spx-hero-v26 .spx-v26-lead,
.spx-hero-v26 .spx-v26-support,
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .spx-v26-note {
  transition: none !important;
  will-change: opacity, transform, filter;
}
.spx-hero-v26 .spx-v26-kicker {
  opacity: clamp(.12, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.10), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 18px - var(--spx-hero-progress-smooth,0) * 18px), 0) !important;
}
.spx-hero-v26 .spx-v26-copy h1 {
  opacity: clamp(.08, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * .74), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 22px - var(--spx-hero-progress-smooth,0) * 34px), 0) !important;
  filter: blur(calc((1 - var(--spx-hero-load,0)) * 7px + var(--spx-hero-progress-smooth,0) * 1.5px));
}
.spx-hero-v26 .spx-v26-lead {
  opacity: clamp(.06, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * .90), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 28px - var(--spx-hero-progress-smooth,0) * 46px), 0) !important;
}
.spx-hero-v26 .spx-v26-support {
  opacity: clamp(.04, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.05), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 34px - var(--spx-hero-progress-smooth,0) * 58px), 0) !important;
}
.spx-hero-v26 .spx-v26-actions,
.spx-hero-v26 .spx-v26-note {
  opacity: clamp(0, calc(var(--spx-hero-load,0) - var(--spx-hero-progress-smooth,0) * 1.20), 1) !important;
  transform: translate3d(0, calc((1 - var(--spx-hero-load,0)) * 38px - var(--spx-hero-progress-smooth,0) * 72px), 0) !important;
}

/* Product screenshot expands into a large background before the Why story takes over. */
.v26-product-atmosphere {
  top: calc(39.8% + (var(--spx-hero-bridge-smooth,0) * 12%)) !important;
  left: calc(50% - (var(--spx-hero-bridge-smooth,0) * 13%)) !important;
  width: min(calc(1360px + (var(--spx-hero-bridge-smooth,0) * 620px)), 122vw) !important;
  height: min(calc(820px + (var(--spx-hero-bridge-smooth,0) * 360px)), 92vw) !important;
  z-index: 1 !important;
  opacity: calc((.98 - (var(--spx-hero-progress-smooth,0) * .14)) * (1 - (var(--spx-hero-bridge-smooth,0) * .38))) !important;
  filter:
    drop-shadow(0 68px 160px rgba(0,0,0,.42))
    drop-shadow(0 0 110px rgba(24,201,245,.18))
    saturate(calc(1.18 - (var(--spx-hero-bridge-smooth,0) * .10)))
    contrast(calc(1.08 - (var(--spx-hero-bridge-smooth,0) * .04)))
    brightness(calc(1.08 - (var(--spx-hero-bridge-smooth,0) * .06))) !important;
  transform:
    translate(calc(-8% - (var(--spx-hero-progress-smooth, 0) * 6%) - (var(--spx-hero-bridge-smooth,0) * 12%)), calc(-20% + (var(--spx-hero-progress-smooth, 0) * 7%) + (var(--spx-hero-bridge-smooth,0) * 3%)))
    perspective(1700px)
    rotateY(calc(-11deg + (var(--spx-hero-progress-smooth, 0) * 3deg) + (var(--spx-hero-bridge-smooth,0) * 8deg)))
    rotateX(calc(4deg - (var(--spx-hero-progress-smooth, 0) * 1.4deg) - (var(--spx-hero-bridge-smooth,0) * 1deg)))
    rotateZ(calc(-1.15deg + (var(--spx-hero-progress-smooth, 0) * .45deg)))
    scale(calc(1.09 + (var(--spx-hero-bridge-smooth,0) * .36) - (var(--spx-hero-progress-smooth, 0) * .08))) !important;
  transition: none !important;
  will-change: transform, opacity, filter, width, height;
}
.v26-product-atmosphere::after {
  opacity: calc(.08 + (var(--spx-hero-bridge-smooth,0) * .22)) !important;
}

/* Why hero echo: the hero UI appears as a full-page background beneath the Why story and dissolves while scrolling. */
.spx-why-section.spx-why-v52 {
  --why52-echo-opacity: clamp(0, calc(1 - (var(--why52-progress, 0) * 1.22)), .92);
  --why52-echo-scale: calc(1.05 + (var(--why52-progress, 0) * .08));
  --why52-stage-entry-y: calc((1 - var(--spx-section-entry-smooth, 0)) * 34px);
  --why52-stage-exit-y: calc(var(--spx-section-exit-smooth, 0) * -42px);
  z-index: 4 !important;
}
.spx-why52-hero-echo {
  position: sticky;
  top: 0;
  height: 100svh;
  margin: 0 0 -100svh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--why52-echo-opacity);
  transform: translate3d(0, calc(var(--why52-progress,0) * -28px), 0) scale(var(--why52-echo-scale));
  transform-origin: center;
  filter: saturate(calc(1.04 - var(--why52-progress,0) * .20)) brightness(calc(.92 - var(--why52-progress,0) * .12));
  transition: none;
  will-change: opacity, transform, filter;
}
.spx-why52-hero-echo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(760px 420px at 62% 30%, rgba(24,201,245,.12), transparent 70%),
    linear-gradient(90deg, rgba(2,5,13,.90) 0%, rgba(2,5,13,.60) 34%, rgba(2,5,13,.30) 62%, rgba(2,5,13,.70) 100%),
    linear-gradient(180deg, rgba(2,5,13,.25), rgba(2,5,13,.60) 82%, rgba(2,5,13,.95));
}
html[data-theme="light"] .spx-why52-hero-echo::before {
  background:
    radial-gradient(760px 420px at 62% 30%, rgba(14,165,233,.10), transparent 70%),
    linear-gradient(90deg, rgba(246,248,252,.86) 0%, rgba(246,248,252,.58) 34%, rgba(246,248,252,.28) 62%, rgba(246,248,252,.70) 100%),
    linear-gradient(180deg, rgba(246,248,252,.22), rgba(246,248,252,.58) 82%, rgba(246,248,252,.94));
}
.spx-why52-hero-echo img {
  position: absolute;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
.why52-echo-base {
  right: -22vw;
  top: 8vh;
  width: min(1320px, 104vw);
  height: 78vh;
  opacity: .84;
  filter: drop-shadow(0 62px 150px rgba(0,0,0,.30));
}
.why52-echo-layer {
  opacity: .72;
  filter: drop-shadow(0 30px 74px rgba(0,0,0,.28));
}
.why52-echo-add {
  right: 54vw;
  top: 18vh;
  width: min(410px, 31vw);
  height: 48vh;
  transform: rotateY(-8deg) rotateZ(-1.2deg);
}
.why52-echo-settings {
  right: -3vw;
  top: 15vh;
  width: min(430px, 32vw);
  height: 54vh;
  transform: rotateY(-8deg) rotateZ(1deg);
}
.spx-why-v52 .spx-why52-shell {
  position: relative;
  z-index: 4 !important;
}

/* Keep the actual sticky wrapper fixed; animate its inner content instead. */
.spx-why-v52.spx-section-anim .spx-why52-sticky,
.spx-why52-sticky {
  position: sticky !important;
  top: clamp(68px, 9vh, 104px) !important;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}
.spx-why-v52.spx-section-anim .spx-why52-copy,
.spx-why-v52.spx-section-anim .spx-why52-stage {
  opacity: clamp(.04, calc(var(--spx-section-entry-smooth, 0) - (var(--spx-section-exit-smooth, 0) * .78)), 1) !important;
  transform: translate3d(0, calc(var(--why52-stage-entry-y) + var(--why52-stage-exit-y)), 0) !important;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-why-v52.spx-section-anim .spx-why52-stage {
  transform: translate3d(calc(var(--spx-section-exit-smooth, 0) * 30px), calc(var(--why52-stage-entry-y) + var(--why52-stage-exit-y)), 0) !important;
}
.spx-why52-track {
  min-height: 430vh !important;
}
.spx-why52-copy {
  height: min(440px, 58vh) !important;
}
.why52-step,
.why52-visual {
  transition: none !important;
  will-change: opacity, transform, filter;
}
.why52-visual img {
  border: 0 !important;
  background: transparent !important;
  box-shadow:
    0 44px 130px rgba(0,0,0,.22),
    0 0 95px rgba(24,201,245,.075) !important;
}
.why52-network {
  opacity: calc(.30 + (var(--why52-progress, 0) * .40)) !important;
  transform:
    translate3d(
      calc(var(--spx-home-mouse-x,0) * 7px + var(--spx-section-exit-smooth,0) * 18px),
      calc(var(--spx-home-mouse-y,0) * 5px + var(--spx-section-exit-smooth,0) * -12px),
      0
    ) !important;
}

/* Nested section animation system for future content: direct children + marked nested elements. */
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) {
  --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 38px + var(--spx-section-exit-smooth,0) * -34px);
  --spx-nested-opacity: clamp(.06, calc(var(--spx-section-entry-smooth,0) - var(--spx-section-exit-smooth,0) * .74), 1);
}
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
.spx-section-anim [data-spx-animate] {
  opacity: var(--spx-nested-opacity, var(--spx-section-entry-smooth, 1)) !important;
  transform: translate3d(0, var(--spx-nested-y, 0), 0) !important;
  transition: none !important;
  will-change: opacity, transform;
}
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *:nth-child(2) { --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 48px + var(--spx-section-exit-smooth,0) * -38px); }
.spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *:nth-child(3) { --spx-nested-y: calc((1 - var(--spx-section-entry-smooth,0)) * 58px + var(--spx-section-exit-smooth,0) * -42px); }
.spx-section-anim [data-spx-animate="fade"] {
  transform: none !important;
}
.spx-section-anim [data-spx-animate="slide-right"] {
  transform: translate3d(calc((1 - var(--spx-section-entry-smooth,0)) * -42px + var(--spx-section-exit-smooth,0) * 32px), 0, 0) !important;
}
.spx-section-anim [data-spx-animate="slide-left"] {
  transform: translate3d(calc((1 - var(--spx-section-entry-smooth,0)) * 42px + var(--spx-section-exit-smooth,0) * -32px), 0, 0) !important;
}

/* Footer product credit. */
.site-footer {
  align-items: start !important;
}
.footer-main-copy {
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.footer-main-copy p {
  margin: 0;
}
.footer-built-with {
  margin-top: 8px !important;
  color: var(--text) !important;
  font-weight: 900;
  letter-spacing: -.015em;
}
.footer-release-note {
  display: block;
  max-width: 480px;
  color: var(--secondary);
  opacity: .70;
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .spx-hero-v26 {
    min-height: auto !important;
  }
  .spx-why52-hero-echo {
    display: none !important;
  }
  .spx-why52-sticky {
    position: relative !important;
    top: auto !important;
  }
  .spx-why-v52.spx-section-anim .spx-why52-copy,
  .spx-why-v52.spx-section-anim .spx-why52-stage {
    opacity: 1 !important;
    transform: none !important;
  }
  .spx-why52-track {
    min-height: auto !important;
  }
  .spx-why52-copy {
    height: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spx-nav-v26 .brand,
  .spx-nav-v26 .brand img,
  .spx-nav-v26 .brand span,
  .spx-hero-v26 .spx-v26-copy,
  .spx-hero-v26 .spx-v26-copy *,
  .spx-why52-hero-echo,
  .spx-section-anim,
  .spx-section-anim * {
    transition: none !important;
    animation: none !important;
  }
  .spx-hero-v26.spx-section-anim .spx-v26-copy,
  .spx-hero-v26 .spx-v26-copy *,
  .spx-why-v52.spx-section-anim .spx-why52-copy,
  .spx-why-v52.spx-section-anim .spx-why52-stage,
  .spx-section-anim:not(.spx-hero-v26):not(.spx-why-v52) > *,
  .spx-section-anim [data-spx-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ========================================================================== 
   A8.57 — hard-pinned Why story + calmer hero background bridge
   ========================================================================== */

/* Brand: keep the full word visible before it collapses into the logo. */
.spx-nav-v26 .brand {
  gap: 10px !important;
  min-width: 0 !important;
}
.spx-nav-v26 .brand span {
  max-width: 132px !important;
  min-width: max-content !important;
  overflow: visible !important;
  white-space: nowrap !important;
  letter-spacing: -.026em !important;
  line-height: 1 !important;
  padding-right: 1px !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Hero typography: still bold, but less crushed. */
.spx-hero-v26 .spx-v26-copy h1 {
  letter-spacing: clamp(-.082em, -0.72vw, -.052em) !important;
  line-height: .88 !important;
  max-width: 1040px !important;
}
.spx-hero-v26 .spx-v26-lead,
.spx-hero-v26 .spx-v26-support {
  letter-spacing: -.012em !important;
}

/* The hero image now expands more calmly and becomes a real background layer. */
.v26-product-atmosphere {
  top: calc(44% + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 7%)) !important;
  left: calc(52% - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 5%)) !important;
  width: min(1320px, 92vw) !important;
  height: min(790px, 58vw) !important;
  opacity: calc(.90 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .20)) !important;
  transform:
    translate(
      calc(-16% - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 26%)),
      calc(-20% + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 6%))
    )
    perspective(1800px)
    rotateY(calc(-8deg + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 7deg)))
    rotateX(calc(3deg - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 2.2deg)))
    rotateZ(calc(-.8deg + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .55deg)))
    scale(calc(1.04 + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .44))) !important;
}
.v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
  border-radius: clamp(18px, 2.2vw, 30px) !important;
  opacity: calc(.98 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .08)) !important;
}
.v26-product-atmosphere::after {
  opacity: calc(.10 + (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .30)) !important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  opacity: calc((1 - var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0))) * .70) !important;
  filter: blur(calc(var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * 10px)) saturate(.98) !important;
  transform: translate3d(0, calc(var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * -22px), 0) scale(calc(1 - (var(--spx-hero-bg-progress, var(--spx-hero-bridge-smooth, 0)) * .035))) !important;
  transition: none !important;
}

/* Why uses only the base hero image as the background echo; no add/settings panels during the background phase. */
.why52-echo-layer,
.why52-echo-add,
.why52-echo-settings {
  display: none !important;
  opacity: 0 !important;
}
.spx-why52-hero-echo {
  height: 100svh !important;
  opacity: var(--why52-echo-opacity) !important;
  transform: translate3d(0, calc(var(--why52-progress,0) * -18px), 0) scale(calc(1.015 + (var(--why52-progress,0) * .055))) !important;
}
.why52-echo-base {
  top: 0 !important;
  right: 50% !important;
  width: 100vw !important;
  height: 100svh !important;
  transform: translateX(50%) !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .58 !important;
}

/* Hard pin architecture: the track owns the scroll distance, the sticky frame owns the viewport. */
.spx-why-section.spx-why-v52 {
  overflow: clip !important;
  padding-bottom: clamp(72px, 7vw, 128px) !important;
  --why52-echo-opacity: clamp(0, calc(1 - (var(--why52-progress, 0) * 1.55)), .70) !important;
}
.spx-why52-shell {
  max-width: none !important;
}
.spx-why52-head {
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--side) !important;
  padding-right: var(--side) !important;
}
.spx-why52-track {
  position: relative !important;
  min-height: 330svh !important;
  height: 330svh !important;
  overflow: visible !important;
  contain: layout paint !important;
}
.spx-why52-sticky {
  top: 0 !important;
  min-height: 100svh !important;
  height: 100svh !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(88px, 10vh, 122px) var(--side) clamp(54px, 7vh, 84px) !important;
  align-items: center !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 8 !important;
}
.spx-why52-sticky.is-spx-hard-pinned {
  position: fixed !important;
  top: 0 !important;
  left: var(--spx-why-pin-left, 0px) !important;
  width: var(--spx-why-pin-width, 100vw) !important;
  height: 100svh !important;
  min-height: 100svh !important;
}
.spx-why52-sticky.is-spx-pin-after {
  position: absolute !important;
  top: calc(100% - 100svh) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
}
.spx-why-v52.spx-section-anim .spx-why52-sticky,
.spx-why-v52.spx-section-anim .spx-why52-copy,
.spx-why-v52.spx-section-anim .spx-why52-stage {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.spx-why52-copy {
  height: min(480px, 56svh) !important;
  min-height: min(430px, 50svh) !important;
  overflow: hidden !important;
}
.why52-step {
  justify-content: center !important;
  overflow: visible !important;
  padding-right: clamp(8px, 2vw, 24px) !important;
}
.why52-step p,
.why52-step ul {
  max-width: 465px !important;
}
.spx-why52-stage {
  height: min(800px, 82svh) !important;
  min-height: min(740px, 76svh) !important;
  width: min(1360px, 74vw) !important;
  margin-right: calc(-1 * var(--side) - 260px) !important;
}
.why52-visual img {
  inset: 0 -460px 64px -4px !important;
  width: calc(100% + 470px) !important;
  height: calc(100% - 64px) !important;
  object-fit: contain !important;
  object-position: center right !important;
}
.why52-network {
  z-index: 3 !important;
  opacity: calc(.20 + (var(--why52-progress, 0) * .38)) !important;
}
.why52-visuals,
.why52-visual {
  z-index: 8 !important;
}

@media (max-width: 980px) {
  .spx-why-section.spx-why-v52 {
    overflow: hidden !important;
  }
  .spx-why52-track {
    height: auto !important;
    min-height: auto !important;
    contain: none !important;
  }
  .spx-why52-sticky,
  .spx-why52-sticky.is-spx-hard-pinned,
  .spx-why52-sticky.is-spx-pin-after {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 24px var(--side) 0 !important;
  }
  .v26-product-layer.layer-settings,
  .v26-product-layer.layer-add {
    display: none !important;
  }
  .v26-builder-base {
    object-fit: contain !important;
  }
}

/* A8.57 safety override: do not create a paint/transform containing context around the hard-pinned story. */
.spx-why-section.spx-why-v52 {
  overflow: visible !important;
  overflow-x: clip !important;
}
.spx-why52-track {
  contain: none !important;
}


/* ========================================================================== 
   A8.58T — native hero-to-background handoff reset
   Built from A8.57. This pass intentionally does NOT rebuild Why yet.
   Goals:
   - keep the A8.54-style hero composition before scroll;
   - use the actual hero builder visual as the source of the background transition;
   - avoid top clipping / downward dragging / pop-in clones;
   - make the handoff full viewport width before Why content is placed above it;
   - keep Add and Settings aligned with the same product perspective and fade them away.
   ========================================================================== */

html,
body,
.spx-home-main {
  overflow-x: clip !important;
}

/* Navigator: never clip the S/wordmark; animate with transform/opacity rather than hard max-width clipping. */
.site-header.spx-nav-v26,
.spx-nav-v26 {
  overflow: visible !important;
}
.spx-nav-v26 .brand {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 172px !important;
  overflow: visible !important;
  transform-origin: left center !important;
}
.spx-nav-v26 .brand img {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border-radius: 999px !important;
  transform-origin: center !important;
  transition: transform .72s cubic-bezier(.16,1,.3,1), width .72s cubic-bezier(.16,1,.3,1), height .72s cubic-bezier(.16,1,.3,1), box-shadow .72s cubic-bezier(.16,1,.3,1) !important;
}
.spx-nav-v26 .brand span {
  display: inline-block !important;
  flex: 0 0 auto !important;
  min-width: 104px !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  padding: 0 8px 1px 2px !important;
  font-size: 20px !important;
  letter-spacing: -.036em !important;
  transform-origin: left center !important;
  transition: opacity .58s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand img,
.site-header.spx-nav-v26.is-open .brand img {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 1px rgba(107,232,255,.22), 0 18px 50px rgba(24,201,245,.20) !important;
}
.site-header.spx-nav-v26.is-scrolled .brand span,
.site-header.spx-nav-v26.is-open .brand span {
  opacity: 0 !important;
  transform: translate3d(-22px,0,0) scale(.72) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}
@media (max-width: 760px) {
  .spx-nav-v26 .brand { min-width: 58px !important; }
  .spx-nav-v26 .brand span { display: none !important; }
}

/* Hero base composition: restore the calmer A8.54-like stage before any scroll handoff. */
.spx-hero-v26 {
  overflow: clip !important;
  --spx-hero-handoff: 0;
}
.spx-hero-v26 .spx-v26-shell,
.spx-hero-v26 .spx-v26-copy {
  position: relative !important;
  z-index: 8 !important;
}
.v26-product-atmosphere:not(.spx-hero-handoff-product) {
  position: absolute !important;
  left: 55.5% !important;
  top: 39.4% !important;
  width: min(1220px, 87vw) !important;
  height: min(720px, 54vw) !important;
  opacity: .88 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  transform:
    translate(-15.5%,-19%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
  transition: none !important;
  will-change: transform, opacity !important;
}
.v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 7px !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: clamp(22px, 2vw, 30px) !important;
  border: 1px solid rgba(107,232,255,.22) !important;
  background: rgba(5,11,23,.86) !important;
  box-shadow:
    0 34px 112px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
}
.v26-product-layer.layer-settings,
.v26-product-layer.layer-add {
  animation: none !important;
  opacity: .76 !important;
  padding: 5px !important;
  border-radius: 19px !important;
  object-fit: contain !important;
  transform: translate3d(0,0,0) !important;
  transition: none !important;
  filter: saturate(1.03) contrast(1.02) !important;
}
.v26-product-layer.layer-add {
  left: 1.4% !important;
  top: 7.8% !important;
  width: 28.5% !important;
  height: 73.5% !important;
  z-index: 6 !important;
}
.v26-product-layer.layer-settings {
  right: 8.8% !important;
  top: 2.2% !important;
  width: 28.2% !important;
  height: 74.5% !important;
  z-index: 7 !important;
}

/* Handoff: the actual product DOM node is temporarily fixed and driven by JS vars.
   It starts at its measured hero rect, then fills beyond the viewport so it cannot crop short. */
.v26-product-atmosphere.spx-hero-handoff-product {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--spx-handoff-w, 100vw) !important;
  height: var(--spx-handoff-h, 100svh) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .92) !important;
  transform:
    translate3d(var(--spx-handoff-x, 0px), var(--spx-handoff-y, 0px), 0)
    perspective(1800px)
    rotateY(var(--spx-handoff-ry, -7deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: center center !important;
  filter:
    drop-shadow(0 54px 140px rgba(0,0,0,.34))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .92)) !important;
  transition: none !important;
  will-change: transform, width, height, opacity, filter !important;
}
.v26-product-atmosphere.spx-hero-handoff-product .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 28px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .20)) !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.06) contrast(1.05) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product::before {
  opacity: calc(.46 - (var(--spx-hero-handoff, 0) * .20)) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product::after {
  inset: 0 !important;
  border-radius: var(--spx-handoff-radius, 28px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.06 + var(--spx-hero-handoff, 0) * .54)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .32)) 36%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .42)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .28)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .36)) 70%,
      rgba(2,5,13, calc(.10 + var(--spx-hero-handoff, 0) * .54)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255, calc(.05 + var(--spx-hero-handoff, 0) * .05)) !important;
}
.v26-product-atmosphere.spx-hero-handoff-product .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-handoff-product .v26-product-layer.layer-settings {
  opacity: calc(.76 * (1 - var(--spx-hero-handoff, 0))) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 9px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .15)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -14px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .035)) !important;
}
html.spx-hero-handoff-on .spx-hero-v26 .spx-v26-copy {
  opacity: calc(1 - (var(--spx-hero-handoff, 0) * .46)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -26px), 0) !important;
}

@media (max-width: 980px) {
  .v26-product-atmosphere:not(.spx-hero-handoff-product) {
    left: 50% !important;
    top: auto !important;
    bottom: 8% !important;
    width: min(760px, 102vw) !important;
    height: min(440px, 58vw) !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
  }
  .v26-product-atmosphere.spx-hero-handoff-product {
    display: none !important;
  }
}

/* ========================================================================== 
   A8.58V — true same-element hero zoom handoff
   No duplicate image / no clone. The visible .v26-product-atmosphere itself
   becomes the fixed zoom layer and expands from its measured hero position.
   ========================================================================== */

/* Never show a leftover clone from A8.58U if cached markup/script created one. */
.v26-product-atmosphere.spx-hero-handoff-clone {
  display: none !important;
}

/* Hero still starts as the rounded A8.54-like product composition. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  left: 56.8% !important;
  top: 39.2% !important;
  width: min(1240px, 88vw) !important;
  height: min(724px, 54vw) !important;
  transform:
    translate(-15.2%,-18.8%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  opacity: .90 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
}

.v26-builder-base {
  border-radius: clamp(24px, 2.1vw, 32px) !important;
  overflow: hidden !important;
}

/* Add now truly sits on top of the left/layers area of the main builder image.
   It is moved further left and slightly down, with only subtle mouse float. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
  left: -3.8% !important;
  top: 6.6% !important;
  width: 38.6% !important;
  height: 83.6% !important;
  z-index: 12 !important;
  opacity: .86 !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .018), calc(var(--spx-v26-y, 0px) * .012), 0) !important;
  filter: saturate(1.04) contrast(1.03) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.24),
    0 0 0 1px rgba(107,232,255,.13) inset !important;
}

.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-settings {
  right: 9.4% !important;
  top: 3.6% !important;
  width: 28.8% !important;
  height: 74.8% !important;
  z-index: 11 !important;
  opacity: .79 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.012), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  filter: saturate(1.03) contrast(1.02) !important;
  box-shadow:
    0 24px 72px rgba(0,0,0,.18),
    0 0 0 1px rgba(107,232,255,.10) inset !important;
}

/* Same DOM element as hero product. It starts fixed at the measured hero rect
   and uses scale() to zoom from the original angle into the background. */
.v26-product-atmosphere.spx-hero-direct-handoff {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: var(--spx-handoff-w, 1000px) !important;
  height: var(--spx-handoff-h, 620px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .9) !important;
  transform:
    translate3d(var(--spx-handoff-x, 0px), var(--spx-handoff-y, 0px), 0)
    perspective(1680px)
    rotateY(var(--spx-handoff-ry, -7.2deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 150px rgba(0,0,0,.36))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .22)) !important;
  object-fit: cover !important;
  object-position: center top !important;
  filter: saturate(1.06) contrast(1.05) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::before {
  opacity: calc(.46 - (var(--spx-hero-handoff, 0) * .22)) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::after {
  inset: 0 !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.05 + var(--spx-hero-handoff, 0) * .60)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .34)) 38%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .48)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .30)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .40)) 70%,
      rgba(2,5,13, calc(.10 + var(--spx-hero-handoff, 0) * .60)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255, calc(.05 + var(--spx-hero-handoff, 0) * .05)) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-settings {
  opacity: var(--spx-handoff-panel-opacity, .84) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 10px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .16)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -6px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .026)) !important;
}

html.spx-hero-handoff-on .spx-hero-v26 .spx-v26-copy {
  opacity: calc(1 - (var(--spx-hero-handoff, 0) * .42)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -18px), 0) !important;
}

@media (max-width: 980px) {
  .v26-product-atmosphere.spx-hero-direct-handoff {
    position: absolute !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
  }
  .v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
    left: 1.5% !important;
    top: 7.5% !important;
    width: 34% !important;
    height: 74% !important;
    object-fit: contain !important;
  }
}


/* ========================================================================== 
   A8.58W — zero-pop same-element hero zoom correction
   Keeps the same DOM node, but starts fixed mode from the untransformed layout
   box so the first handoff frame cannot jump/reset upward.
   ========================================================================== */

/* Keep normal hero composition rounded and visually aligned. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  left: 56.8% !important;
  top: 39.2% !important;
  width: min(1240px, 88vw) !important;
  height: min(724px, 54vw) !important;
  transform:
    translate(-15.2%,-18.8%)
    perspective(1680px)
    rotateY(-7.2deg)
    rotateX(3deg)
    rotateZ(-.45deg)
    scale(1.035) !important;
  transform-origin: 52% 48% !important;
  opacity: .90 !important;
  overflow: visible !important;
  filter: drop-shadow(0 44px 118px rgba(0,0,0,.34)) !important;
}

/* The Add panel should read as the layer/sidebar takeover of the main builder. */
.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-add {
  left: -7.4% !important;
  top: 8.8% !important;
  width: 41.8% !important;
  height: 81.8% !important;
  z-index: 14 !important;
  opacity: .88 !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .014), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.25),
    0 0 0 1px rgba(107,232,255,.13) inset !important;
}

.v26-product-atmosphere:not(.spx-hero-direct-handoff) .v26-product-layer.layer-settings {
  right: 9.8% !important;
  top: 3.6% !important;
  width: 28.8% !important;
  height: 74.8% !important;
  z-index: 12 !important;
  opacity: .78 !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.010), calc(var(--spx-v26-y, 0px) * .009), 0) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff {
  position: fixed !important;
  left: var(--spx-handoff-left, 0px) !important;
  top: var(--spx-handoff-top, 0px) !important;
  width: var(--spx-handoff-w, 1000px) !important;
  height: var(--spx-handoff-h, 620px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-handoff-opacity, .9) !important;
  transform:
    translate3d(var(--spx-handoff-shift-x, 0px), var(--spx-handoff-shift-y, 0px), 0)
    translate3d(var(--spx-handoff-tx, -15.2%), var(--spx-handoff-ty, -18.8%), 0)
    perspective(1680px)
    rotateY(var(--spx-handoff-ry, -7.2deg))
    rotateX(var(--spx-handoff-rx, 3deg))
    rotateZ(var(--spx-handoff-rz, -.45deg))
    scale(var(--spx-handoff-scale, 1)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 150px rgba(0,0,0,.36))
    saturate(var(--spx-handoff-saturate, 1.04))
    brightness(var(--spx-handoff-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: var(--spx-handoff-padding, 7px) !important;
  border-radius: var(--spx-handoff-radius, 31px) !important;
  border-color: rgba(107,232,255, var(--spx-handoff-border, .22)) !important;
  object-fit: cover !important;
  object-position: center 54% !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff::after {
  border-radius: var(--spx-handoff-radius, 31px) !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, calc(.05 + var(--spx-hero-handoff, 0) * .62)) 0%,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .34)) 38%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .50)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, calc(.02 + var(--spx-hero-handoff, 0) * .28)) 0%,
      rgba(2,5,13, calc(.04 + var(--spx-hero-handoff, 0) * .36)) 68%,
      rgba(2,5,13, calc(.12 + var(--spx-hero-handoff, 0) * .58)) 100%) !important;
}

.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-add,
.v26-product-atmosphere.spx-hero-direct-handoff .v26-product-layer.layer-settings {
  opacity: var(--spx-handoff-panel-opacity, .84) !important;
  filter:
    blur(calc(var(--spx-hero-handoff, 0) * 10px))
    saturate(.98)
    brightness(calc(1 - var(--spx-hero-handoff, 0) * .16)) !important;
  transform: translate3d(0, calc(var(--spx-hero-handoff, 0) * -4px), 0) scale(calc(1 - var(--spx-hero-handoff, 0) * .024)) !important;
}


/* ========================================================================== 
   A8.58Z — sticky hero scrollstory retry from A8.58W
   No fixed handoff, no clone, no second image: the real hero product stays in
   one sticky stage and is animated only through CSS variables.
   ========================================================================== */
html {
  overflow-x: clip !important;
}
body {
  overflow-x: clip !important;
}

/* Navigator: keep all letters visible and collapse by visual opacity/scale only. */
html .site-header.spx-nav-v26 .brand {
  gap: 12px !important;
  overflow: visible !important;
  min-width: 184px !important;
  transform-origin: left center !important;
}
html .site-header.spx-nav-v26 .brand img {
  flex: 0 0 auto !important;
  width: 43px !important;
  height: 43px !important;
  transform-origin: center !important;
}
html .site-header.spx-nav-v26 .brand span {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 112px !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  clip-path: none !important;
  letter-spacing: -.035em !important;
  line-height: 1 !important;
  padding: 0 8px 1px 0 !important;
  transform-origin: left center !important;
  transition:
    opacity .46s cubic-bezier(.16,1,.3,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    filter .58s cubic-bezier(.16,1,.3,1) !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand,
html .site-header.spx-nav-v26.is-open .brand {
  min-width: 56px !important;
  gap: 0 !important;
  overflow: visible !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand img,
html .site-header.spx-nav-v26.is-open .brand img {
  transform: scale(1.16) rotate(-2deg) !important;
}
html .site-header.spx-nav-v26.is-scrolled .brand span,
html .site-header.spx-nav-v26.is-open .brand span {
  min-width: 112px !important;
  max-width: none !important;
  overflow: visible !important;
  opacity: 0 !important;
  filter: blur(6px) saturate(1.2) !important;
  transform: translate3d(-35px,0,0) scale(.64) !important;
  pointer-events: none !important;
}

/* Hero scrollstory: native page scroll, sticky viewport stage, no position switch. */
html .spx-home-main .spx-hero-v26[data-hero-scrollstory],
html .spx-hero-v26[data-hero-scrollstory] {
  min-height: clamp(1560px, 232svh, 2120px) !important;
  height: auto !important;
  padding: 0 !important;
  overflow: clip !important;
  isolation: isolate !important;
  --spx-hero-story: 0;
  --spx-hero-story-soft: 0;
  --spx-hero-copy-story-opacity: 1;
  --spx-hero-copy-story-y: 0px;
  --spx-hero-product-left: 56.4%;
  --spx-hero-product-top: 41.8%;
  --spx-hero-product-tx: -15.2%;
  --spx-hero-product-ty: -18.6%;
  --spx-hero-product-ry: -7.2deg;
  --spx-hero-product-rx: 3deg;
  --spx-hero-product-rz: -.45deg;
  --spx-hero-product-scale: 1.035;
  --spx-hero-product-opacity: .90;
  --spx-hero-product-radius: 30px;
  --spx-hero-panel-opacity: .88;
  --spx-hero-panel-blur: 0px;
  --spx-hero-explain-opacity: 0;
  --spx-hero-explain-y: 26px;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
  position: sticky !important;
  top: 0 !important;
  height: 100svh !important;
  min-height: 720px !important;
  width: 100% !important;
  overflow: clip !important;
  isolation: isolate !important;
  padding: clamp(138px, 12vw, 184px) var(--side) clamp(118px, 10vw, 178px) !important;
  display: grid !important;
  align-items: center !important;
  z-index: 2 !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
  position: absolute !important;
  inset: -8% -8% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: clip !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell {
  position: relative !important;
  z-index: 8 !important;
  width: min(1400px, 100%) !important;
  margin: 0 auto !important;
  pointer-events: auto !important;
}

html .spx-hero-v26[data-hero-scrollstory].spx-section-anim .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy {
  opacity: var(--spx-hero-copy-story-opacity, 1) !important;
  transform: translate3d(0, var(--spx-hero-copy-story-y, 0px), 0) scale(var(--spx-hero-copy-story-scale, 1)) !important;
  transform-origin: left center !important;
  filter: blur(var(--spx-hero-copy-story-blur, 0px)) !important;
  transition: none !important;
  will-change: opacity, transform, filter !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-kicker,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-note {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* The real product element remains absolute in the sticky stage for the whole animation. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  position: absolute !important;
  left: var(--spx-hero-product-left, 56.4%) !important;
  top: var(--spx-hero-product-top, 41.8%) !important;
  width: min(1220px, 86vw) !important;
  height: min(716px, 53vw) !important;
  z-index: 3 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: var(--spx-hero-product-opacity, .90) !important;
  transform:
    translate3d(var(--spx-hero-product-tx, -15.2%), var(--spx-hero-product-ty, -18.6%), 0)
    perspective(1680px)
    rotateY(var(--spx-hero-product-ry, -7.2deg))
    rotateX(var(--spx-hero-product-rx, 3deg))
    rotateZ(var(--spx-hero-product-rz, -.45deg))
    scale(var(--spx-hero-product-scale, 1.035)) !important;
  transform-origin: 52% 48% !important;
  filter:
    drop-shadow(0 56px 142px rgba(0,0,0,.35))
    saturate(var(--spx-hero-product-saturate, 1.04))
    brightness(var(--spx-hero-product-brightness, .98)) !important;
  transition: none !important;
  will-change: transform, opacity, filter !important;
  contain: layout style paint !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: var(--spx-hero-product-radius, 30px) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  border-color: rgba(107,232,255,.18) !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before {
  opacity: calc(.44 - (var(--spx-hero-story-soft, 0) * .20)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  border-radius: var(--spx-hero-product-radius, 30px) !important;
  opacity: 1 !important;
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .10)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .05)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .16)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .04)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .22)) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(107,232,255,.06) !important;
}

/* Add takes over the layers/sidebar area and settings remains part of the same angle. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add {
  left: -8.2% !important;
  top: 10.4% !important;
  width: 42.2% !important;
  height: 80.4% !important;
  z-index: 14 !important;
  opacity: var(--spx-hero-panel-opacity, .88) !important;
  object-fit: cover !important;
  object-position: left top !important;
  border-radius: 21px !important;
  animation: none !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * .012), calc(var(--spx-v26-y, 0px) * .010), 0) !important;
  filter: blur(var(--spx-hero-panel-blur, 0px)) saturate(.98) brightness(var(--spx-hero-panel-brightness, 1)) !important;
  transition: none !important;
  will-change: opacity, filter, transform !important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  right: 9.6% !important;
  top: 4.1% !important;
  width: 29.2% !important;
  height: 73.4% !important;
  z-index: 12 !important;
  opacity: calc(var(--spx-hero-panel-opacity, .88) * .88) !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 21px !important;
  animation: none !important;
  transform: translate3d(calc(var(--spx-v26-x, 0px) * -.010), calc(var(--spx-v26-y, 0px) * .009), 0) !important;
  filter: blur(var(--spx-hero-panel-blur, 0px)) saturate(.98) brightness(var(--spx-hero-panel-brightness, 1)) !important;
  transition: none !important;
  will-change: opacity, filter, transform !important;
}

/* Explanation copy over the product background. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
  position: absolute !important;
  left: max(var(--side), calc((100vw - 1400px) / 2 + var(--side))) !important;
  bottom: clamp(96px, 16vh, 170px) !important;
  z-index: 10 !important;
  width: min(660px, calc(100vw - (var(--side) * 2))) !important;
  color: var(--text) !important;
  opacity: var(--spx-hero-explain-opacity, 0) !important;
  transform: translate3d(0, var(--spx-hero-explain-y, 26px), 0) scale(var(--spx-hero-explain-scale, .985)) !important;
  filter: blur(var(--spx-hero-explain-blur, 8px)) !important;
  pointer-events: none !important;
  transition: none !important;
  will-change: opacity, transform, filter !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain span {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border: 1px solid rgba(107,232,255,.22);
  border-radius: 7px;
  background: rgba(24,201,245,.09);
  color: #bff4ff;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain h2 {
  margin: 0;
  max-width: 800px;
  font-size: clamp(44px, 5.8vw, 92px);
  line-height: .92;
  letter-spacing: -.07em;
  text-wrap: balance;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain p {
  margin: 20px 0 0;
  max-width: 590px;
  color: var(--text-soft);
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.55;
  font-weight: 750;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  z-index: 12 !important;
  height: 34vh !important;
  opacity: calc(.55 + (var(--spx-hero-story-soft, 0) * .45)) !important;
}

/* The image fades inside the hero; Why starts cleanly on the normal section background. */
html .spx-why-v52 .spx-why52-hero-echo {
  display: none !important;
  opacity: 0 !important;
}

@media (max-width: 980px) {
  html .spx-hero-v26[data-hero-scrollstory] {
    min-height: auto !important;
    padding: 118px 18px 148px !important;
    overflow: hidden !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
    position: absolute !important;
    inset: 0 !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
    display: none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
    left: 50% !important;
    top: auto !important;
    bottom: 9% !important;
    width: 100% !important;
    height: 292px !important;
    transform: translate(-50%,0) perspective(1200px) rotateY(-4deg) rotateX(2.5deg) scale(1) !important;
    opacity: .64 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html .spx-hero-v26[data-hero-scrollstory] {
    min-height: clamp(920px,104svh,1180px) !important;
    padding: clamp(148px,13vw,198px) var(--side) clamp(160px,14vw,230px) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
    position: relative !important;
    height: auto !important;
    min-height: inherit !important;
    padding: 0 !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain {
    display: none !important;
  }
}


/* ========================================================================== 
   A8.58ZA — sharper full-image hero background refinement
   Built on A8.58Z. Keeps the liked sticky scrollstory, but fixes the two
   visible issues: the builder screenshot was cropped/clipped and looked soft
   when it became the background.
   ========================================================================== */

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
  inset: -4% -3% !important;
  overflow: visible !important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage {
  overflow: clip !important;
}

/* Keep the screenshot in its real aspect ratio. A8.58Z used a taller frame and
   object-fit: cover, which cropped the actual builder image. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  width: min(1280px, 86vw) !important;
  height: min(606px, 40.75vw) !important;
  contain: layout style !important;
  filter:
    drop-shadow(0 58px 144px rgba(0,0,0,.34))
    saturate(var(--spx-hero-product-saturate, 1.08))
    contrast(1.055)
    brightness(var(--spx-hero-product-brightness, 1)) !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(4,9,20,.92) !important;
  filter: saturate(1.08) contrast(1.075) brightness(1.02) !important;
  image-rendering: auto !important;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* The filter over the background remains cinematic, but not so heavy that the
   builder UI becomes blurry/unclear. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .08)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .035)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .12)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .025)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .14)) 100%) !important;
}

/* Restore the floating panels as sharp foreground details while they are still
   visible, then let the JS-driven opacity/blur fade them out as before. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add,
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add {
  left: -7.6% !important;
  top: 10.8% !important;
  width: 41.2% !important;
  height: 79.6% !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings {
  right: 9.2% !important;
  top: 4.4% !important;
  width: 29.0% !important;
  height: 72.8% !important;
}

@media (max-width: 980px) {
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky {
    overflow: hidden !important;
  }
}


/* ========================================================================== 
   A8.58ZB — full-screen sharp hero background refinement
   Built on A8.58ZA. Keeps the approved sticky scrollstory and sharpened image,
   but the background phase now covers the full viewport instead of staying in a
   contain-style frame.
   ========================================================================== */

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
  width: min(1320px, 88vw) !important;
  height: min(624px, 41.6vw) !important;
  max-width: none !important;
  max-height: none !important;
}

html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base {
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* Once the product reaches background scale, keep the image crisp and cinematic
   without letting the overlay make the builder unreadable. */
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after {
  background:
    linear-gradient(90deg,
      rgba(2,5,13, var(--spx-hero-product-filter-left, .10)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-mid, .045)) 42%,
      rgba(2,5,13, var(--spx-hero-product-filter-right, .14)) 100%),
    linear-gradient(180deg,
      rgba(2,5,13, var(--spx-hero-product-filter-top, .035)) 0%,
      rgba(2,5,13, var(--spx-hero-product-filter-bottom, .18)) 100%) !important;
}

@media (min-width: 1420px) {
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky .v26-product-atmosphere:not(.spx-hero-direct-handoff):not(.spx-hero-handoff-clone):not(.spx-hero-handoff-product) {
    width: min(1440px, 88vw) !important;
    height: min(681px, 41.6vw) !important;
  }
}


/* A8.58ZW — clean hero/What/How transition layer.
   What is Spixor content is real HTML/CSS. Only its small topbar is an image. */
html.spx-hero-story-active{--spx-how-underlay-opacity:0;--spx-how-underlay-blur:5px;--spx-how-underlay-scale:.984;}
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-copy-story-opacity:1;--spx-hero-copy-story-y:0px;--spx-hero-copy-story-scale:1;--spx-hero-copy-story-blur:0px;
  --spx-hero-panel-opacity:.98;--spx-hero-panel-blur:0px;--spx-hero-panel-brightness:1;
  --spx-hero-view-old-opacity:1;--spx-hero-view-old-y:0px;--spx-hero-view-old-scale:1;--spx-hero-view-old-blur:0px;
  --spx-hero-view-new-opacity:0;--spx-hero-view-new-y:36px;--spx-hero-view-new-scale:.996;--spx-hero-view-new-blur:0px;
  --spx-hero-view-stack-scale:1;--spx-hero-bottom-fade-opacity:0;--spx-hero-console-mask-opacity:0;
  min-height:278vh!important;
  background:
    radial-gradient(circle at 21% 34%, rgba(27,210,255,.18), transparent 22%),
    radial-gradient(circle at 78% 17%, rgba(42,103,255,.20), transparent 26%),
    radial-gradient(circle at 58% 78%, rgba(10,184,255,.12), transparent 30%),
    linear-gradient(135deg,#020913 0%,#031426 44%,#061b34 100%)!important;
  overflow:clip!important;
}
html .spx-hero-v26[data-hero-scrollstory]::before{content:"";position:absolute;inset:-10%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 18% 72%,rgba(54,212,255,.14),transparent 42%),radial-gradient(ellipse at 78% 35%,rgba(75,105,255,.16),transparent 45%),linear-gradient(115deg,transparent 0%,rgba(76,209,255,.06) 42%,transparent 60%);opacity:.95;filter:saturate(1.15);}
html .spx-hero-v26[data-hero-scrollstory]::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,rgba(2,8,18,.06),rgba(2,8,18,.70));}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.92!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{display:block!important;position:absolute;border-radius:999px;filter:blur(34px);opacity:.32;pointer-events:none;mix-blend-mode:screen;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{left:9%;top:22%;width:28vw;height:18vw;background:rgba(38,215,255,.20);}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{right:12%;top:11%;width:26vw;height:18vw;background:rgba(75,100,255,.18);}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{left:45%;bottom:12%;width:33vw;height:20vw;background:rgba(25,146,255,.13);}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{display:block!important;position:absolute;height:1px;width:30vw;opacity:.28;background:linear-gradient(90deg,transparent,rgba(102,229,255,.8),transparent);filter:blur(.2px);transform:rotate(-12deg);}
html .spx-hero-v26[data-hero-scrollstory] .trace-a{left:54%;top:16%;}.spx-hero-v26[data-hero-scrollstory] .trace-b{left:18%;bottom:22%;width:22vw;opacity:.18;}
html .spx-hero-v26-stage{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;overflow:hidden!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{opacity:var(--spx-hero-copy-story-opacity)!important;transform:translate3d(0,var(--spx-hero-copy-story-y),0) scale(var(--spx-hero-copy-story-scale))!important;filter:blur(var(--spx-hero-copy-story-blur))!important;will-change:opacity,transform,filter;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{overflow:visible!important;z-index:1!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere{left:var(--spx-hero-product-left,58.55%)!important;top:var(--spx-hero-product-top,45.9%)!important;width:min(1146px,82.5vw)!important;aspect-ratio:1919 / 913!important;height:auto!important;border:0!important;border-radius:var(--spx-hero-product-radius,18px)!important;box-shadow:none!important;outline:0!important;overflow:hidden!important;transform-origin:50% 44%!important;transform:translate(var(--spx-hero-product-tx,-15.4%),var(--spx-hero-product-ty,-18.6%)) perspective(1480px) rotateY(var(--spx-hero-product-ry,-6deg)) rotateX(var(--spx-hero-product-rx,2.8deg)) rotateZ(var(--spx-hero-product-rz,-.35deg)) scale(var(--spx-hero-product-scale,1)) scaleY(var(--spx-hero-product-fold-scale-y,1)) translate3d(calc(var(--spx-v26-x,0px) * .025),calc(var(--spx-v26-y,0px) * .018 + var(--spx-hero-product-fold-y,0px)),0)!important;opacity:var(--spx-hero-product-opacity,.82)!important;filter:saturate(var(--spx-hero-product-saturate,1)) brightness(var(--spx-hero-product-brightness,.84))!important;will-change:transform,opacity,filter;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before{display:none!important;content:none!important;opacity:0!important;background:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::after{content:""!important;position:absolute!important;inset:0!important;z-index:9!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(2,5,13,var(--spx-hero-product-filter-left,.14)) 0%,rgba(2,5,13,var(--spx-hero-product-filter-mid,.06)) 18%,rgba(2,5,13,.015) 48%,rgba(2,5,13,var(--spx-hero-product-filter-right,.06)) 100%),linear-gradient(180deg,rgba(2,5,13,var(--spx-hero-product-filter-top,.05)),rgba(2,5,13,.01) 48%,rgba(2,5,13,var(--spx-hero-product-filter-bottom,.12)))!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-builder-base{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:left top!important;border:0!important;border-radius:inherit!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-console-mask{position:absolute!important;top:0!important;right:0!important;width:3.7%!important;height:100%!important;background:linear-gradient(90deg,rgba(4,8,16,0),rgba(4,8,16,.86) 24%,rgba(4,8,16,.98) 58%)!important;opacity:var(--spx-hero-console-mask-opacity,0)!important;pointer-events:none!important;z-index:6!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{position:absolute!important;left:17.6%!important;top:9.6%!important;width:49.8%!important;aspect-ratio:890 / 694!important;height:auto!important;z-index:7!important;transform:scale(var(--spx-hero-view-stack-scale,1))!important;pointer-events:none!important;will-change:opacity,transform,filter;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-layer{position:absolute!important;inset:0!important;overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-original{opacity:var(--spx-hero-view-old-opacity,1)!important;transform:translate3d(0,var(--spx-hero-view-old-y,0),0) scale(var(--spx-hero-view-old-scale,1))!important;filter:blur(var(--spx-hero-view-old-blur,0))!important;z-index:1!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-image{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{opacity:var(--spx-hero-view-new-opacity,0)!important;transform:translate3d(0,var(--spx-hero-view-new-y,36px),0) scale(var(--spx-hero-view-new-scale,.996))!important;filter:blur(var(--spx-hero-view-new-blur,0))!important;z-index:2!important;pointer-events:none!important;user-select:text!important;-webkit-user-select:text!important;}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-content{pointer-events:auto!important;}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-original{display:none!important;opacity:0!important;visibility:hidden!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content img:not(.spx-v26-builder-view-topbar),html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] img{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-shell{position:absolute!important;inset:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{position:absolute!important;left:128px!important;top:8px!important;width:126px!important;height:22px!important;object-fit:contain!important;object-position:left top!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))!important;z-index:4!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-page{position:absolute!important;inset:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{position:absolute!important;left:128px!important;right:30px!important;top:42px!important;bottom:20px!important;display:grid!important;grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr)!important;gap:24px!important;align-items:center!important;padding:32px 34px!important;background:linear-gradient(145deg,rgba(5,14,25,.94),rgba(4,9,18,.985) 62%,rgba(7,31,49,.86))!important;border:0!important;border-radius:18px!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:auto!important;user-select:text!important;-webkit-user-select:text!important;text-rendering:geometricPrecision!important;-webkit-font-smoothing:antialiased!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]::before{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(circle at 13% 14%,rgba(26,215,255,.14),transparent 30%),radial-gradient(circle at 92% 76%,rgba(72,111,255,.12),transparent 34%);opacity:.82;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{position:relative!important;user-select:text!important;-webkit-user-select:text!important;cursor:text!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{display:inline-flex!important;align-items:center!important;margin:0 0 14px!important;padding:8px 12px!important;border-radius:999px!important;background:rgba(27,214,255,.11)!important;border:1px solid rgba(91,228,255,.16)!important;color:#66e9ff!important;font-size:10px!important;font-weight:950!important;letter-spacing:.15em!important;text-transform:uppercase!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{margin:0!important;color:#fbfdff!important;font-size:clamp(25px,1.78vw,38px)!important;line-height:1.08!important;letter-spacing:-.045em!important;font-weight:950!important;max-width:620px!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] p{margin:14px 0 0!important;color:rgba(229,243,255,.82)!important;font-size:clamp(13px,.86vw,16px)!important;line-height:1.56!important;font-weight:650!important;max-width:630px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points article{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;column-gap:12px!important;align-items:start!important;min-height:0!important;padding:13px 14px!important;border:0!important;border-radius:14px!important;background:rgba(255,255,255,.04)!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points i{grid-row:1 / span 2!important;color:#1ed7ff!important;font-style:normal!important;font-size:10px!important;font-weight:950!important;letter-spacing:.12em!important;margin-top:2px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points b{display:block!important;color:#fff!important;font-size:14px!important;line-height:1.15!important;margin:0 0 5px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points span{display:block!important;color:rgba(218,238,255,.67)!important;font-size:12px!important;line-height:1.38!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-explain{display:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-add{left:.20%!important;top:5.8%!important;width:42.2%!important;opacity:var(--spx-hero-panel-opacity,.98)!important;filter:blur(var(--spx-hero-panel-blur,0)) brightness(var(--spx-hero-panel-brightness,1))!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:8!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-layer.layer-settings{right:3.8%!important;top:6.1%!important;width:25.5%!important;display:block!important;opacity:var(--spx-hero-panel-opacity,.98)!important;filter:blur(var(--spx-hero-panel-blur,0)) brightness(var(--spx-hero-panel-brightness,1))!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:8!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{height:54vh!important;opacity:var(--spx-hero-bottom-fade-opacity,0)!important;background:linear-gradient(180deg,transparent 0%,rgba(2,5,13,.20) 28%,var(--bg) 92%)!important;}
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory]{z-index:4;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{position:relative!important;z-index:1!important;margin-top:-54vh!important;padding-top:54vh!important;opacity:var(--spx-how-underlay-opacity)!important;transform:scale(var(--spx-how-underlay-scale))!important;filter:blur(var(--spx-how-underlay-blur))!important;transition:none!important;will-change:opacity,transform,filter;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:calc(.18 + (var(--spx-how-underlay-opacity,0) * .82));}
.spx-scroll-top-orbit{position:fixed;right:clamp(18px,2.2vw,34px);bottom:clamp(18px,2.2vw,34px);width:52px;height:52px;border-radius:999px;border:1px solid rgba(94,231,255,.28);background:linear-gradient(145deg,rgba(5,18,34,.86),rgba(8,31,56,.70));box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 28px rgba(23,196,255,.14);color:#e9fbff;font-size:24px;font-weight:900;display:grid;place-items:center;z-index:1200;opacity:0;transform:translate3d(0,16px,0) scale(.92);pointer-events:none;transition:opacity .26s ease,transform .26s ease,border-color .26s ease;background .26s ease;}
.spx-scroll-top-orbit.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);pointer-events:auto;}
.spx-scroll-top-orbit:hover{border-color:rgba(94,231,255,.60);background:linear-gradient(145deg,rgba(17,205,255,.88),rgba(47,102,255,.82));}
@media (min-width:981px) and (max-width:1500px){html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere{left:58.0%!important;width:min(1160px,85vw)!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{left:17.0%!important;width:50.2%!important;}html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:120px!important;right:24px!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{left:120px!important;}}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;overflow:hidden!important;}html .spx-hero-v26-stage{position:relative!important;height:auto!important;min-height:100svh!important;}html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}.spx-scroll-top-orbit{width:46px;height:46px;font-size:21px;}}


/* A8.58ZX: redesigned What is Spixor card + fade-only transition into How Spixor works. */
html .spx-hero-v26[data-hero-scrollstory]{--spx-hero-scene-opacity:1;--spx-how-underlay-opacity:0;--spx-how-underlay-blur:0px;--spx-how-underlay-scale:1;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{opacity:var(--spx-hero-scene-opacity)!important;transition:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere::before{display:none!important;content:none!important;background:none!important;opacity:0!important;}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  left:104px!important;
  right:28px!important;
  top:34px!important;
  bottom:20px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr)!important;
  gap:26px!important;
  align-items:center!important;
  padding:30px 34px 30px 34px!important;
  background:linear-gradient(145deg,rgba(5,14,25,.96),rgba(4,9,18,.985) 58%,rgba(7,24,39,.92))!important;
  border:0!important;
  border-radius:16px!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]::before{display:none!important;content:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-main{align-self:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 16px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  background:rgba(24,213,255,.13)!important;
  border:1px solid rgba(106,230,255,.18)!important;
  color:#69e8ff!important;
  font-size:10px!important;
  letter-spacing:.17em!important;
  text-transform:uppercase!important;
  font-weight:950!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{
  margin:0!important;
  max-width:620px!important;
  color:#fbfdff!important;
  font-size:clamp(22px,1.42vw,32px)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  font-weight:950!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] p{
  margin:14px 0 0!important;
  max-width:650px!important;
  color:rgba(228,243,255,.78)!important;
  font-size:clamp(13px,.78vw,15px)!important;
  line-height:1.58!important;
  font-weight:650!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary{
  margin-top:18px!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(111,229,255,.10)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary strong{display:block!important;color:#fff!important;font-size:13px!important;font-weight:950!important;margin-bottom:5px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary span{display:block!important;color:rgba(220,238,255,.68)!important;font-size:12px!important;line-height:1.48!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-self:stretch!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points article{
  min-height:118px!important;
  padding:16px 15px!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(111,229,255,.09)!important;
  box-shadow:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points i{display:block!important;margin-bottom:9px!important;color:#1ed7ff!important;font-style:normal!important;font-size:10px!important;font-weight:950!important;letter-spacing:.15em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points b{display:block!important;margin-bottom:7px!important;color:#fff!important;font-size:14px!important;line-height:1.18!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points span{display:block!important;color:rgba(218,238,255,.65)!important;font-size:12px!important;line-height:1.42!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-72vh!important;
  padding-top:20vh!important;
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
}
html.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{pointer-events:none!important;}
@media (min-width:981px) and (max-width:1500px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:96px!important;right:24px!important;grid-template-columns:minmax(0,1fr) minmax(270px,.92fr)!important;gap:20px!important;}
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] h3{font-size:clamp(20px,1.55vw,29px)!important;}
}


/* A8.58ZY: livelier space, redesigned What card, and fade-only How transition. */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-how-bridge-opacity:0;
  --spx-hero-how-bridge-blur:8px;
  --spx-hero-how-bridge-scale:.982;
  background:
    radial-gradient(circle at 14% 24%, rgba(55,224,255,.24), transparent 19%),
    radial-gradient(circle at 82% 14%, rgba(79,103,255,.28), transparent 24%),
    radial-gradient(circle at 58% 74%, rgba(7,182,255,.18), transparent 31%),
    radial-gradient(circle at 34% 91%, rgba(35,232,255,.10), transparent 28%),
    linear-gradient(135deg,#010711 0%,#041628 48%,#061c36 100%)!important;
}
html .spx-hero-v26[data-hero-scrollstory]::before{
  background:
    radial-gradient(ellipse at 18% 78%,rgba(56,221,255,.18),transparent 42%),
    radial-gradient(ellipse at 82% 36%,rgba(84,112,255,.22),transparent 46%),
    radial-gradient(ellipse at 48% 18%,rgba(24,202,255,.10),transparent 34%),
    repeating-radial-gradient(circle at 50% 45%,rgba(255,255,255,.13) 0 1px,transparent 1px 30px),
    linear-gradient(115deg,transparent 0%,rgba(76,209,255,.10) 42%,transparent 62%)!important;
  opacity:1!important;
  filter:saturate(1.28)!important;
}
html .spx-hero-v26[data-hero-scrollstory]::after{
  background:
    linear-gradient(180deg,rgba(2,8,18,.00),rgba(2,8,18,.55)),
    radial-gradient(circle at 50% 112%,rgba(34,194,255,.16),transparent 38%)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.96!important;mix-blend-mode:screen;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{opacity:.42!important;background:rgba(38,215,255,.25)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{opacity:.36!important;background:rgba(80,105,255,.23)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{opacity:.30!important;background:rgba(25,170,255,.20)!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{opacity:.38!important;}

html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  left:92px!important;
  right:18px!important;
  top:34px!important;
  bottom:18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:30px 34px 28px!important;
  background:linear-gradient(145deg,rgba(5,13,24,.965),rgba(4,9,18,.99) 56%,rgba(8,24,41,.94))!important;
  border:0!important;
  border-radius:18px!important;
  box-shadow:none!important;
  filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:16px!important;border-bottom:1px solid rgba(111,229,255,.10)!important;padding-bottom:16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-kicker{margin:0!important;padding:8px 13px!important;white-space:nowrap!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{display:block!important;color:#f8fcff!important;font-size:clamp(17px,1.08vw,22px)!important;line-height:1.25!important;letter-spacing:-.025em!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr)!important;gap:22px!important;align-items:stretch!important;min-height:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{margin:0!important;max-width:680px!important;color:rgba(228,243,255,.82)!important;font-size:clamp(14px,.93vw,17px)!important;line-height:1.62!important;font-weight:650!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important;margin-top:18px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow span{display:inline-flex!important;align-items:center!important;height:32px!important;padding:0 12px!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;color:rgba(234,248,255,.86)!important;font-size:11px!important;font-weight:850!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow i{display:block!important;width:18px!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(91,228,255,.65),transparent)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{display:grid!important;gap:10px!important;align-content:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{display:grid!important;grid-template-columns:76px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;padding:14px 15px!important;border-radius:15px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(111,229,255,.09)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row.is-active{background:linear-gradient(135deg,rgba(23,211,255,.16),rgba(53,92,255,.08))!important;border-color:rgba(94,231,255,.20)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row b{color:#fff!important;font-size:13px!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row span{color:rgba(220,238,255,.68)!important;font-size:12px!important;line-height:1.42!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important;border-top:1px solid rgba(111,229,255,.10)!important;padding-top:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer span{display:inline-flex!important;align-items:center!important;height:30px!important;padding:0 11px!important;border-radius:999px!important;background:rgba(27,214,255,.08)!important;color:rgba(220,245,255,.84)!important;font-size:11px!important;font-weight:800!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-main,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-points,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-card-summary{display:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(980px,82vw)!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-bridge-scale,.982))!important;
  opacity:var(--spx-hero-how-bridge-opacity,0)!important;
  filter:blur(var(--spx-hero-how-bridge-blur,8px))!important;
  z-index:2!important;
  text-align:center!important;
  pointer-events:none!important;
  color:#fff!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge .eyebrow{display:inline-flex!important;margin-bottom:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge h2{margin:0!important;font-size:clamp(42px,5.2vw,84px)!important;line-height:.96!important;letter-spacing:-.06em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge p{margin:18px auto 0!important;max-width:650px!important;color:rgba(220,238,255,.74)!important;font-size:clamp(15px,1.05vw,20px)!important;line-height:1.55!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-82vh!important;
  padding-top:34vh!important;
  opacity:var(--spx-how-underlay-opacity)!important;
  transform:none!important;
  filter:none!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:var(--spx-how-underlay-opacity)!important;transform:none!important;filter:none!important;}
@media (min-width:981px) and (max-width:1500px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{left:88px!important;right:18px!important;gap:14px!important;padding:24px 26px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{grid-template-columns:minmax(0,1fr) minmax(220px,.86fr)!important;gap:16px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{font-size:clamp(15px,1.15vw,20px)!important;}
}


/* A8.58ZZB: space background + How Spixor works left-aligned step scroller rework. */
html .spx-hero-v26[data-hero-scrollstory]::before{
  background:
    radial-gradient(ellipse at 18% 18%, rgba(52,205,255,.10), transparent 34%),
    radial-gradient(ellipse at 78% 24%, rgba(75,112,255,.08), transparent 38%),
    linear-gradient(118deg, transparent 0%, rgba(76,209,255,.035) 43%, transparent 62%)!important;
  opacity:.82!important;
  filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory]::after{
  background:
    radial-gradient(circle at 8% 16%, rgba(255,255,255,.46) 0 1px, transparent 1.45px),
    radial-gradient(circle at 26% 74%, rgba(134,226,255,.42) 0 1px, transparent 1.45px),
    radial-gradient(circle at 61% 38%, rgba(255,255,255,.36) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 68%, rgba(119,208,255,.34) 0 1px, transparent 1.4px),
    linear-gradient(180deg,rgba(2,8,18,.04),rgba(2,8,18,.58))!important;
  background-size: 190px 190px, 270px 270px, 230px 230px, 320px 320px, 100% 100%!important;
  opacity:.82!important;
}
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{
  border-radius:44% 56% 62% 38% / 42% 48% 52% 58%!important;
  filter:blur(54px)!important;
  opacity:.16!important;
  transform:scaleX(1.85) rotate(-9deg)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .cloud-a{width:18vw!important;height:7vw!important;left:5%!important;top:25%!important;background:rgba(41,210,255,.16)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-b{width:20vw!important;height:8vw!important;right:9%!important;top:14%!important;background:rgba(73,105,255,.14)!important;}
html .spx-hero-v26[data-hero-scrollstory] .cloud-c{width:24vw!important;height:8vw!important;left:46%!important;bottom:12%!important;background:rgba(25,145,255,.11)!important;}
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace{opacity:.30!important;width:36vw!important;}

html .spx-why-section.spx-why-v52{position:relative!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1180px, calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head{
  text-align:left!important;
  margin:0 0 clamp(30px,5vh,58px)!important;
  max-width:760px!important;
  align-items:flex-start!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-head .eyebrow{margin-left:0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head h2{max-width:720px!important;text-align:left!important;letter-spacing:-.06em!important;}
html .spx-why-section.spx-why-v52 .spx-why52-head p{max-width:680px!important;margin:14px 0 0!important;text-align:left!important;color:rgba(220,238,255,.72)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(1700px,220vh,2300px)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  display:grid!important;
  grid-template-columns:minmax(330px,.88fr) minmax(520px,1.12fr)!important;
  gap:clamp(30px,5vw,76px)!important;
  align-items:center!important;
  min-height:100svh!important;
  padding:clamp(40px,7vh,84px) 0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:block!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 18px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  appearance:none!important;
  border:1px solid rgba(111,229,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(220,238,255,.70)!important;
  border-radius:18px!important;
  min-height:62px!important;
  padding:12px 11px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px!important;
  cursor:pointer!important;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,color .25s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:12px!important;letter-spacing:.15em!important;color:#27d7ff!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{
  background:linear-gradient(135deg,rgba(27,214,255,.16),rgba(64,96,255,.08))!important;
  border-color:rgba(91,228,255,.34)!important;
  color:#fff!important;
  transform:translateY(-2px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  position:absolute!important;
  inset:auto 0 auto 0!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,18px,0) scale(.985)!important;
  transition:opacity .35s ease,transform .35s ease,filter .35s ease,visibility .35s ease!important;
  min-height:390px!important;
  padding:clamp(22px,2.4vw,34px)!important;
  border-radius:30px!important;
  background:linear-gradient(145deg,rgba(6,13,29,.84),rgba(4,8,19,.94))!important;
  border:1px solid rgba(111,229,255,.10)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;margin-bottom:14px!important;color:#59e5ff!important;font-size:12px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{font-size:clamp(30px,3.1vw,52px)!important;line-height:1.02!important;letter-spacing:-.055em!important;margin:0 0 14px!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step p{font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;color:rgba(220,238,255,.74)!important;max-width:520px!important;margin:0 0 22px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:9px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,248,255,.80)!important;font-weight:750!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.72em!important;width:9px!important;height:9px!important;border-radius:50%!important;background:#24d9ff!important;box-shadow:0 0 18px rgba(36,217,255,.55)!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;height:3px!important;border-radius:999px!important;margin:0 0 18px!important;background:rgba(255,255,255,.08)!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::before{content:""!important;display:block!important;height:100%!important;width:calc(var(--step-progress,0) * 100%)!important;background:linear-gradient(90deg,#23d9ff,#6376ff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{min-height:clamp(520px,72vh,760px)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(5,12,27,.72),rgba(3,7,16,.88))!important;border:1px solid rgba(111,229,255,.10)!important;box-shadow:0 35px 110px rgba(0,0,0,.26)!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .why52-visual{transition:opacity .38s ease,transform .38s ease,filter .38s ease!important;}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{display:block!important;padding:40px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:16px!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
}


/* A8.58ZZC: keep How Spixor works pinned, left-aligned, and fix blurry What handoff. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  text-shadow:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  opacity:1!important;
  backdrop-filter:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  transform:translate3d(0,var(--spx-hero-view-new-y,0),0) scale(var(--spx-hero-view-new-scale,1))!important;
  filter:none!important;
}

html .spx-why-section.spx-why-v52{
  overflow:visible!important;
  isolation:isolate!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1240px, calc(100% - 56px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  position:relative!important;
  height:clamp(2050px, 270vh, 3100px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr)!important;
  gap:clamp(34px,5vw,82px)!important;
  align-items:center!important;
  padding:clamp(82px,11vh,118px) 0 clamp(54px,8vh,84px)!important;
  transform:none!important;
  z-index:3!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:clamp(560px,74vh,760px)!important;
  min-width:0!important;
  z-index:5!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  margin:0 0 clamp(18px,2.2vh,28px)!important;
  max-width:700px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  margin:0!important;
  max-width:720px!important;
  text-align:left!important;
  font-size:clamp(44px,5.2vw,82px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  color:#fff!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  margin:16px 0 0!important;
  max-width:620px!important;
  text-align:left!important;
  color:rgba(220,238,255,.74)!important;
  font-size:clamp(15px,1.04vw,19px)!important;
  line-height:1.56!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  order:2!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  min-height:clamp(320px,39vh,420px)!important;
  padding:clamp(20px,2vw,30px)!important;
  border-radius:28px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,18px,0) scale(.986)!important;
  transition:opacity .42s ease, transform .42s ease, visibility .42s ease!important;
  backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  bottom:auto!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  font-size:clamp(30px,2.8vw,48px)!important;
  max-width:620px!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  max-width:640px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  min-height:clamp(560px,76vh,780px)!important;
  align-self:center!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:36px 0!important;
  }
  html .spx-why-section.spx-why-v52 .spx-why52-copy{min-height:0!important;display:block!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZD: How Spixor works left-aligned pinned story fix. */
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2100px, 285vh, 3300px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(430px,.92fr) minmax(540px,1.08fr)!important;
  gap:clamp(40px,5.2vw,92px)!important;
  align-items:start!important;
  justify-content:stretch!important;
  padding:clamp(92px,11vh,124px) 0 clamp(46px,6vh,72px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  align-self:start!important;
  justify-content:flex-start!important;
  min-height:0!important;
  height:auto!important;
  padding-top:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  align-self:stretch!important;
  max-width:720px!important;
  width:100%!important;
  margin:0 0 20px!important;
  padding:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  margin-left:0!important;
  margin-right:0!important;
  justify-content:flex-start!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2,
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-align:left!important;
  margin-left:0!important;
  margin-right:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  font-size:clamp(44px,4.65vw,76px)!important;
  max-width:700px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:640px!important;
  margin-top:14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  order:2!important;
  width:100%!important;
  max-width:700px!important;
  margin:0 0 14px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  text-align:left!important;
  justify-content:flex-start!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:700px!important;
  min-height:0!important;
  padding:clamp(22px,2vw,30px)!important;
  margin:0!important;
  border-radius:28px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,16px,0) scale(.988)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  font-size:clamp(28px,2.45vw,44px)!important;
  line-height:1.04!important;
  max-width:620px!important;
}
html .spx-why-section.spx-why-v52 .why52-step p,
html .spx-why-section.spx-why-v52 .why52-step ul{
  max-width:640px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  align-self:start!important;
  min-height:clamp(560px,76vh,780px)!important;
  margin-top:0!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:relative!important;display:block!important;min-height:0!important;padding:36px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;max-width:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZE: actual How Spixor works copy/layout correction */
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  max-width:min(1500px, calc(100vw - 56px))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2200px, 300vh, 3450px)!important;
  margin-top:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(440px, .88fr) minmax(560px, 1.12fr)!important;
  gap:clamp(42px, 5vw, 88px)!important;
  align-items:start!important;
  padding:clamp(84px, 10vh, 118px) 0 clamp(52px, 6vh, 74px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  align-self:start!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-height:0!important;
  height:auto!important;
  width:100%!important;
  max-width:720px!important;
  padding:0!important;
  margin:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  width:100%!important;
  max-width:720px!important;
  margin:0 0 18px!important;
  padding:0!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  width:auto!important;
  margin:0 0 18px!important;
  align-self:flex-start!important;
  justify-content:flex-start!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  text-align:left!important;
  margin:0!important;
  max-width:700px!important;
  font-size:clamp(42px, 4.2vw, 70px)!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-align:left!important;
  margin:18px 0 0!important;
  max-width:660px!important;
  font-size:clamp(16px, 1.05vw, 19px)!important;
  line-height:1.62!important;
  color:rgba(219,238,255,.76)!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  width:100%!important;
  max-width:700px!important;
  margin:6px 0 14px!important;
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0, 1fr))!important;
  gap:10px!important;
  order:2!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  padding:12px 13px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-align:left!important;
  border-radius:18px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  order:3!important;
  position:absolute!important;
  left:0!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:700px!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(22px, 2vw, 30px)!important;
  border-radius:26px!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,14px,0) scale(.99)!important;
  transition:opacity .42s ease, transform .42s ease, visibility .42s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{
  margin-bottom:12px!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  margin:0 0 12px!important;
  max-width:620px!important;
  font-size:clamp(26px, 2.25vw, 42px)!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  margin:0 0 18px!important;
  max-width:640px!important;
  font-size:clamp(15px, 1vw, 18px)!important;
  line-height:1.56!important;
  color:rgba(221,239,255,.74)!important;
}
html .spx-why-section.spx-why-v52 .why52-step ul{
  max-width:640px!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  align-self:start!important;
  min-height:clamp(560px, 74vh, 770px)!important;
  margin-top:0!important;
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:block!important;text-align:left!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
  html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:relative!important;display:block!important;min-height:0!important;padding:36px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;max-width:none!important;margin-bottom:16px!important;}
}


/* A8.58ZZF: remove duplicate centered How block and rebuild the real pinned How story. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-bridge{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52{position:relative!important;overflow:hidden!important;isolation:isolate!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-72vh!important;padding-top:42vh!important;opacity:var(--spx-how-underlay-opacity,1)!important;transform:scale(var(--spx-how-underlay-scale,1))!important;filter:blur(var(--spx-how-underlay-blur,0))!important;transition:none!important;will-change:opacity,transform,filter!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1240px,calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(1780px,238vh,2460px)!important;position:relative!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;display:grid!important;grid-template-columns:minmax(390px,.86fr) minmax(540px,1.14fr)!important;gap:clamp(34px,5vw,78px)!important;align-items:center!important;padding:clamp(54px,8vh,92px) 0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:block!important;text-align:left!important;margin:0 0 18px!important;max-width:680px!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 14px!important;align-self:flex-start!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;text-align:left!important;max-width:660px!important;color:#fff!important;font-size:clamp(42px,4.7vw,72px)!important;line-height:.94!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:16px 0 0!important;text-align:left!important;max-width:650px!important;color:rgba(222,238,255,.75)!important;font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:18px 0 14px!important;max-width:650px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{appearance:none!important;border:1px solid rgba(117,229,255,.12)!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;border-radius:17px!important;min-height:62px!important;padding:12px 13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;cursor:pointer!important;transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:11px!important;letter-spacing:.14em!important;color:rgba(116,232,255,.92)!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.18),rgba(65,102,255,.10))!important;border-color:rgba(116,232,255,.32)!important;color:#fff!important;transform:translateY(-1px)!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:clamp(338px,34vh,430px)!important;max-width:650px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:clamp(22px,2.2vw,32px)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,17,31,.88),rgba(5,9,18,.96) 58%,rgba(8,30,48,.78))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:0 28px 90px rgba(0,0,0,.24)!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;transition:none!important;}
html .spx-why-section.spx-why-v52 .why52-step::before{content:""!important;position:absolute!important;inset:-20%!important;background:linear-gradient(120deg,rgba(24,213,255,.12),transparent 38%,rgba(67,98,255,.10))!important;opacity:.7!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .why52-step > *{position:relative!important;}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;align-items:center!important;margin:0 0 12px!important;color:#65e8ff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;width:100%!important;height:3px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;margin:0 0 18px!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::after{content:""!important;display:block!important;width:calc(var(--step-progress,0) * 100%)!important;height:100%!important;background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{margin:0 0 12px!important;color:#fff!important;font-size:clamp(24px,2vw,36px)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .why52-step p{margin:0 0 16px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(14px,.95vw,17px)!important;line-height:1.55!important;max-width:580px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,246,255,.84)!important;font-size:13px!important;line-height:1.42!important;font-weight:700!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.48em!important;width:8px!important;height:8px!important;border-radius:99px!important;background:#18d5ff!important;box-shadow:0 0 16px rgba(24,213,255,.55)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(520px,68vh,760px)!important;border:0!important;background:transparent!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:4% -6% 0 -6%!important;opacity:.32!important;z-index:0!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:2!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -22vw clamp(24px,4vh,42px) 0!important;display:block!important;margin:0!important;opacity:0!important;visibility:visible!important;transition:none!important;filter:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{display:block!important;color:#fff!important;font-size:15px!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption span{display:block!important;margin-top:4px!important;color:rgba(220,238,255,.72)!important;font-size:12px!important;line-height:1.4!important;}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;filter:none!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;height:auto!important;min-height:0!important;display:block!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZG: real hero handoff into the How story — no empty gap, no bottom slide. */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-hero-how-preview-opacity:0;
  --spx-hero-how-preview-blur:10px;
  --spx-hero-how-preview-scale:.982;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(1240px,calc(100% - 64px))!important;
  display:grid!important;
  grid-template-columns:minmax(420px,.92fr) minmax(480px,1.08fr)!important;
  gap:clamp(32px,5vw,72px)!important;
  align-items:center!important;
  z-index:3!important;
  color:#fff!important;
  opacity:var(--spx-hero-how-preview-opacity)!important;
  transform:translate3d(-50%,-50%,0) scale(var(--spx-hero-how-preview-scale))!important;
  filter:blur(var(--spx-hero-how-preview-blur))!important;
  pointer-events:none!important;
  will-change:opacity,transform,filter!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy{text-align:left!important;max-width:660px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview h2{margin:0!important;color:#fff!important;font-size:clamp(42px,4.9vw,76px)!important;line-height:.94!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview p{margin:18px 0 0!important;max-width:630px!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.05vw,19px)!important;line-height:1.6!important;font-weight:650!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:24px 0 14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span{min-height:62px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;padding:12px 13px!important;border-radius:17px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(117,229,255,.13)!important;color:rgba(220,238,255,.78)!important;font-size:13px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps b{color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card{margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card strong{display:block!important;color:#fff!important;font-size:clamp(20px,1.45vw,30px)!important;line-height:1.12!important;letter-spacing:-.035em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card em{display:block!important;margin-top:10px!important;color:rgba(222,238,255,.73)!important;font-size:14px!important;line-height:1.5!important;font-style:normal!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel{display:grid!important;gap:14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel span{display:grid!important;grid-template-columns:54px minmax(0,1fr)!important;gap:14px!important;align-items:center!important;min-height:112px!important;padding:18px 20px!important;border-radius:24px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(116,232,255,.11)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel span.is-active{background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;border-color:rgba(116,232,255,.30)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel i{grid-row:1 / span 2!important;display:grid!important;place-items:center!important;width:44px!important;height:44px!important;border-radius:999px!important;color:#03131f!important;background:#18d5ff!important;font-style:normal!important;font-weight:950!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel b{color:#fff!important;font-size:18px!important;line-height:1.1!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-panel small{display:block!important;color:rgba(220,238,255,.67)!important;font-size:13px!important;line-height:1.42!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-100svh!important;padding-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;}}


/* A8.58ZZH: restore real How section visuals, remove duplicate handoff, slow the pinned story. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-100svh!important;padding-top:0!important;opacity:var(--spx-how-underlay-opacity,0)!important;transform:scale(var(--spx-how-underlay-scale,.988))!important;filter:blur(var(--spx-how-underlay-blur,8px))!important;transition:none!important;will-change:opacity,transform,filter!important;}
html .spx-why-section.spx-why-v52{position:relative!important;overflow:visible!important;isolation:auto!important;background:transparent!important;background-color:transparent!important;background-image:none!important;margin-bottom:0!important;}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo{display:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-shell{width:min(1260px,calc(100% - 48px))!important;margin:0 auto!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(2600px,355vh,3700px)!important;position:relative!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{position:sticky!important;top:0!important;min-height:100svh!important;height:100svh!important;display:grid!important;grid-template-columns:minmax(390px,.88fr) minmax(520px,1.12fr)!important;gap:clamp(34px,5vw,76px)!important;align-items:center!important;padding:clamp(48px,7.5vh,86px) 0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-copy{position:relative!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:center!important;min-width:0!important;z-index:4!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{display:block!important;text-align:left!important;margin:0 0 18px!important;max-width:680px!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 14px!important;align-self:flex-start!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;text-align:left!important;max-width:650px!important;color:#fff!important;font-size:clamp(42px,4.5vw,70px)!important;line-height:.96!important;letter-spacing:-.06em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:16px 0 0!important;text-align:left!important;max-width:635px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(15px,1vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:18px 0 14px!important;max-width:640px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{appearance:none!important;border:1px solid rgba(117,229,255,.12)!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;border-radius:17px!important;min-height:62px!important;padding:12px 13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:3px!important;cursor:pointer!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button b{font-size:11px!important;letter-spacing:.14em!important;color:rgba(116,232,255,.92)!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button span{font-size:13px!important;font-weight:900!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.18),rgba(65,102,255,.10))!important;border-color:rgba(116,232,255,.32)!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:clamp(338px,34vh,430px)!important;max-width:640px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:clamp(22px,2.2vw,32px)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(7,17,31,.88),rgba(5,9,18,.96) 58%,rgba(8,30,48,.78))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:0 28px 90px rgba(0,0,0,.22)!important;overflow:hidden!important;opacity:0!important;visibility:hidden!important;transition:none!important;}
html .spx-why-section.spx-why-v52 .why52-step > *{position:relative!important;}
html .spx-why-section.spx-why-v52 .why52-step > span{display:inline-flex!important;margin:0 0 12px!important;color:#65e8ff!important;font-size:11px!important;font-weight:950!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
html .spx-why-section.spx-why-v52 .why52-progress{display:block!important;width:100%!important;height:3px!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;margin:0 0 18px!important;overflow:hidden!important;}
html .spx-why-section.spx-why-v52 .why52-progress::after{content:""!important;display:block!important;width:calc(var(--step-progress,0) * 100%)!important;height:100%!important;background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;border-radius:inherit!important;}
html .spx-why-section.spx-why-v52 .why52-step h3{margin:0 0 12px!important;color:#fff!important;font-size:clamp(24px,2vw,36px)!important;line-height:1.04!important;letter-spacing:-.045em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .why52-step p{margin:0 0 16px!important;color:rgba(222,238,255,.76)!important;font-size:clamp(14px,.95vw,17px)!important;line-height:1.55!important;max-width:580px!important;}
html .spx-why-section.spx-why-v52 .why52-step ul{display:grid!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;}
html .spx-why-section.spx-why-v52 .why52-step li{position:relative!important;padding-left:22px!important;color:rgba(234,246,255,.84)!important;font-size:13px!important;line-height:1.42!important;font-weight:700!important;}
html .spx-why-section.spx-why-v52 .why52-step li::before{content:""!important;position:absolute!important;left:0!important;top:.48em!important;width:8px!important;height:8px!important;border-radius:99px!important;background:#18d5ff!important;box-shadow:0 0 16px rgba(24,213,255,.55)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(540px,70vh,780px)!important;border:0!important;background:transparent!important;overflow:visible!important;display:block!important;opacity:1!important;visibility:visible!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:4% -6% 0 -6%!important;opacity:.28!important;z-index:0!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:2!important;display:block!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -22vw clamp(24px,4vh,42px) 0!important;display:block!important;margin:0!important;opacity:0!important;visibility:visible!important;transition:none!important;filter:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
@media (max-width:980px){html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;filter:none!important;transform:none!important;}html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;height:auto!important;min-height:0!important;display:block!important;padding:64px 0!important;}html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}}


/* A8.58ZZI: restore visible hero-to-How handoff with right visuals, remove empty gap. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{display:none!important;opacity:0!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:min(1240px,calc(100% - 64px))!important;
  min-height:min(720px,82svh)!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-preview-scale,.985))!important;
  display:grid!important;
  grid-template-columns:minmax(410px,.9fr) minmax(520px,1.1fr)!important;
  gap:clamp(34px,5vw,76px)!important;
  align-items:center!important;
  z-index:7!important;
  opacity:var(--spx-hero-how-preview-opacity,0)!important;
  filter:blur(var(--spx-hero-how-preview-blur,8px))!important;
  visibility:visible!important;
  pointer-events:none!important;
  transition:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy{text-align:left!important;max-width:660px!important;align-self:center!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-copy .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview h2{margin:0!important;color:#fff!important;font-size:clamp(42px,4.9vw,74px)!important;line-height:.95!important;letter-spacing:-.065em!important;font-weight:950!important;text-align:left!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview p{margin:18px 0 0!important;max-width:640px!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.05vw,19px)!important;line-height:1.6!important;font-weight:650!important;text-align:left!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:24px 0 14px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span{min-height:62px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:4px!important;padding:12px 13px!important;border-radius:17px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(117,229,255,.13)!important;color:rgba(220,238,255,.78)!important;font-size:13px!important;font-weight:900!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps span.is-active{background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;border-color:rgba(116,232,255,.30)!important;color:#fff!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-steps b{color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card{margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card strong{display:block!important;color:#fff!important;font-size:clamp(20px,1.45vw,30px)!important;line-height:1.12!important;letter-spacing:-.035em!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-card em{display:block!important;margin-top:10px!important;color:rgba(222,238,255,.73)!important;font-size:14px!important;line-height:1.5!important;font-style:normal!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-stage{position:relative!important;min-height:clamp(520px,68vh,740px)!important;overflow:visible!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual{position:absolute!important;inset:clamp(18px,3vh,34px) -18vw clamp(22px,4vh,40px) 0!important;margin:0!important;opacity:0!important;transform:translate3d(24px,16px,0) scale(.985)!important;filter:none!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual.is-active{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption b{display:block!important;color:#fff!important;font-size:16px!important;margin-bottom:5px!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual figcaption span{display:block!important;color:rgba(222,238,255,.70)!important;font-size:12px!important;line-height:1.38!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:-16vh!important;padding-top:16vh!important;opacity:1!important;transform:none!important;filter:none!important;background:transparent!important;background-color:transparent!important;background-image:none!important;}
html.spx-hero-story-active .spx-why-section.spx-why-v52 .spx-why52-track{opacity:1!important;}
html .spx-why-section.spx-why-v52{margin-bottom:0!important;}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(2260px,305vh,3200px)!important;}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{padding-top:clamp(40px,7vh,74px)!important;padding-bottom:clamp(40px,7vh,74px)!important;}
@media (max-width:980px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{display:none!important;}html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;}}


/* A8.58ZZK: restore proper How Spixor works pinned scroller with right visuals and no blank handoff. */
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  position:relative!important;
  margin-top:0!important;
  padding-top:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  overflow:visible!important;
}
html.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity,1)!important;
  filter:blur(var(--spx-how-underlay-blur,0px))!important;
  transform:scale(var(--spx-how-underlay-scale,1))!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1280px,calc(100% - 48px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  position:relative!important;
  height:clamp(2400px,410vh,3600px)!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  min-height:100svh!important;
  height:100svh!important;
  display:grid!important;
  grid-template-columns:minmax(380px,.82fr) minmax(520px,1.18fr)!important;
  align-items:center!important;
  gap:clamp(28px,4vw,70px)!important;
  padding:clamp(88px,10vh,122px) 0 clamp(52px,7vh,82px)!important;
  transform:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  min-height:auto!important;
  display:block!important;
  text-align:left!important;
  max-width:560px!important;
  align-self:center!important;
  padding:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  display:block!important;
  text-align:left!important;
  margin:0 0 22px!important;
  max-width:560px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{
  display:inline-flex!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(38px,4.2vw,68px)!important;
  line-height:.96!important;
  letter-spacing:-.065em!important;
  font-weight:950!important;
  text-align:left!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  margin:18px 0 0!important;
  color:rgba(222,239,255,.76)!important;
  font-size:clamp(15px,1.05vw,19px)!important;
  line-height:1.6!important;
  font-weight:650!important;
  text-align:left!important;
  max-width:540px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0 0 14px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:4px!important;
  border:1px solid rgba(116,232,255,.14)!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(224,239,255,.74)!important;
  padding:10px 12px!important;
  cursor:pointer!important;
  transition:background .22s ease,border-color .22s ease,transform .22s ease!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{
  background:linear-gradient(135deg,rgba(24,213,255,.17),rgba(65,102,255,.09))!important;
  border-color:rgba(116,232,255,.32)!important;
  color:#fff!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav b{
  color:#6be8ff!important;
  font-size:11px!important;
  letter-spacing:.14em!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  position:relative!important;
  min-height:clamp(330px,38vh,430px)!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  padding:clamp(20px,2.1vw,32px)!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.95) 58%,rgba(8,30,48,.72))!important;
  border:1px solid rgba(116,232,255,.12)!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
  overflow:hidden!important;
  transform:translate3d(0,12px,0) scale(.988)!important;
}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-step > span{
  display:inline-flex!important;
  margin:0 0 12px!important;
  color:#65e8ff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html .spx-why-section.spx-why-v52 .why52-progress{
  display:block!important;
  height:3px!important;
  margin:0 0 17px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-progress::after{
  content:""!important;
  display:block!important;
  width:calc(var(--step-progress,0) * 100%)!important;
  height:100%!important;
  background:linear-gradient(90deg,#18d5ff,#7b8cff)!important;
}
html .spx-why-section.spx-why-v52 .why52-step h3{
  margin:0 0 12px!important;
  color:#fff!important;
  font-size:clamp(23px,1.85vw,34px)!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
html .spx-why-section.spx-why-v52 .why52-step p{
  margin:0 0 15px!important;
  color:rgba(222,238,255,.76)!important;
  font-size:clamp(14px,.95vw,17px)!important;
  line-height:1.55!important;
}
html .spx-why-section.spx-why-v52 .why52-step ul{
  display:grid!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step li{
  position:relative!important;
  padding-left:21px!important;
  color:rgba(234,246,255,.82)!important;
  font-size:13px!important;
  line-height:1.42!important;
  font-weight:720!important;
}
html .spx-why-section.spx-why-v52 .why52-step li::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:.48em!important;
  width:8px!important;
  height:8px!important;
  border-radius:999px!important;
  background:#18d5ff!important;
  box-shadow:0 0 16px rgba(24,213,255,.55)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(540px,72vh,800px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before{
  content:""!important;
  position:absolute!important;
  inset:4% -10% 0 -10%!important;
  background-image:linear-gradient(rgba(112,231,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(112,231,255,.08) 1px,transparent 1px)!important;
  background-size:68px 68px!important;
  mask-image:radial-gradient(circle at calc(var(--why-mx,.56) * 100%) calc(var(--why-my,.46) * 100%),#000 0%,rgba(0,0,0,.72) 34%,transparent 78%)!important;
  opacity:.38!important;
  pointer-events:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::after{
  content:""!important;
  position:absolute!important;
  width:32vw!important;
  height:32vw!important;
  left:calc(var(--why-mx,.56) * 100% - 16vw)!important;
  top:calc(var(--why-my,.46) * 100% - 16vw)!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(24,213,255,.16),rgba(85,112,255,.08) 36%,transparent 70%)!important;
  filter:blur(22px)!important;
  opacity:.58!important;
  pointer-events:none!important;
  animation:spxWhyBreathe 4.8s ease-in-out infinite!important;
}
@keyframes spxWhyBreathe{0%,100%{opacity:.38;transform:scale(.96)}50%{opacity:.72;transform:scale(1.04)}}
html .spx-why-section.spx-why-v52 .why52-network{
  position:absolute!important;
  inset:0 -8% 0 -8%!important;
  opacity:.34!important;
  z-index:1!important;
  pointer-events:none!important;
}
html .spx-why-section.spx-why-v52 .why52-network .p{
  stroke:rgba(111,232,255,.30)!important;
  stroke-width:1.35!important;
  stroke-dasharray:18 15!important;
  animation:spxWhyDash 11s linear infinite!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n{
  fill:#18d5ff!important;
  opacity:.85!important;
  filter:drop-shadow(0 0 12px rgba(24,213,255,.65))!important;
  animation:spxWhyNodePulse 3.6s ease-in-out infinite!important;
}
@keyframes spxWhyDash{to{stroke-dashoffset:-180}}
@keyframes spxWhyNodePulse{0%,100%{opacity:.45;r:4px}50%{opacity:1;r:6px}}
html .spx-why-section.spx-why-v52 .why52-float{
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  width:9px!important;height:9px!important;border-radius:50%!important;background:#18d5ff!important;box-shadow:0 0 24px rgba(24,213,255,.78)!important;
  opacity:.8!important;
  animation:spxWhyFloatDot 7s ease-in-out infinite!important;
}
html .spx-why-section.spx-why-v52 .why52-float.f1{left:18%!important;top:26%!important;}
html .spx-why-section.spx-why-v52 .why52-float.f2{right:18%!important;top:18%!important;animation-delay:-2s!important;}
html .spx-why-section.spx-why-v52 .why52-float.f3{right:10%!important;bottom:24%!important;animation-delay:-4s!important;}
@keyframes spxWhyFloatDot{0%,100%{transform:translate3d(0,0,0);opacity:.45}50%{transform:translate3d(18px,-14px,0);opacity:1}}
html .spx-why-section.spx-why-v52 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  position:absolute!important;
  inset:clamp(18px,3vh,36px) -24vw clamp(22px,4vh,44px) 0!important;
  margin:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(18px,14px,0) scale(.986)!important;
  transition:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual.is-active,
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:right center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  position:absolute!important;
  left:clamp(18px,3vw,42px)!important;
  bottom:clamp(18px,3vw,42px)!important;
  max-width:300px!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:rgba(3,10,20,.76)!important;
  border:1px solid rgba(116,232,255,.14)!important;
  backdrop-filter:blur(12px)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{display:block!important;color:#fff!important;font-size:16px!important;margin-bottom:5px!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption span{display:block!important;color:rgba(222,238,255,.70)!important;font-size:12px!important;line-height:1.38!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  opacity:var(--spx-hero-how-preview-opacity,0)!important;
  filter:blur(var(--spx-hero-how-preview-blur,8px))!important;
  transform:translate(-50%,-50%) scale(var(--spx-hero-how-preview-scale,.986))!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-stage{display:block!important;}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview-visual img{object-fit:contain!important;object-position:right center!important;border:0!important;box-shadow:none!important;background:transparent!important;}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;display:block!important;height:auto!important;min-height:0!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-copy{max-width:none!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZL: remove duplicate hero How preview and hand off to the real How section. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
  display:none!important;
  opacity:0!important;
}
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory]{
  position:relative!important;
  z-index:5!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  position:relative!important;
  z-index:6!important;
  margin-top:-100svh!important;
  padding-top:0!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  transform:scale(var(--spx-how-underlay-scale,.992))!important;
  filter:blur(var(--spx-how-underlay-blur,7px))!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  transition:none!important;
  overflow:hidden!important;
}
html.spx-how-visible-phase .spx-why-section.spx-why-v52{
  pointer-events:auto!important;
}
html .spx-why-section.spx-why-v52 > .spx-why52-shell > .spx-why52-head{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  width:min(1260px,calc(100% - 48px))!important;
  margin:0 auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(2860px,375vh,3900px)!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  width:100%!important;
  height:100svh!important;
  min-height:720px!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.88fr) minmax(520px,1.12fr)!important;
  align-items:center!important;
  gap:clamp(34px,5vw,76px)!important;
  padding:clamp(54px,8vh,92px) 0!important;
  transform:none!important;
  opacity:1!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  max-width:610px!important;
  text-align:left!important;
  margin:0!important;
  align-self:center!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{text-align:left!important;margin:0 0 22px!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head .eyebrow{display:inline-flex!important;margin:0 0 16px!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{margin:0!important;max-width:620px!important;text-align:left!important;color:#fff!important;font-size:clamp(42px,4.7vw,76px)!important;line-height:.95!important;letter-spacing:-.065em!important;font-weight:950!important;}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{margin:18px 0 0!important;max-width:600px!important;text-align:left!important;color:rgba(224,240,255,.76)!important;font-size:clamp(15px,1.02vw,18px)!important;line-height:1.58!important;font-weight:650!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 0 14px!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button{min-height:58px!important;padding:11px 12px!important;border:1px solid rgba(116,232,255,.12)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;color:rgba(220,238,255,.70)!important;text-align:left!important;cursor:pointer!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav button.is-active{background:linear-gradient(135deg,rgba(24,213,255,.16),rgba(64,108,255,.08))!important;border-color:rgba(116,232,255,.34)!important;color:#fff!important;}
html .spx-why-section.spx-why-v52 .why52-step-nav b{display:block!important;color:#6be8ff!important;font-size:11px!important;letter-spacing:.14em!important;margin-bottom:4px!important;}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative!important;min-height:300px!important;}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0!important;margin:0!important;padding:20px 22px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(7,17,31,.86),rgba(5,9,18,.94) 58%,rgba(8,30,48,.74))!important;border:1px solid rgba(116,232,255,.13)!important;box-shadow:none!important;}
html .spx-why-section.spx-why-v52 .why52-step.is-active,
html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{opacity:1!important;visibility:visible!important;transform:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage{position:relative!important;min-height:clamp(560px,72vh,800px)!important;border:0!important;background:transparent!important;overflow:visible!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before{content:""!important;position:absolute!important;inset:6% -10% 4% -4%!important;background:linear-gradient(rgba(122,232,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(122,232,255,.045) 1px,transparent 1px)!important;background-size:58px 58px!important;opacity:.55!important;mask-image:radial-gradient(circle at calc(var(--why-mx,.5)*100%) calc(var(--why-my,.5)*100%),#000 0%,rgba(0,0,0,.75) 34%,transparent 78%)!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .spx-why52-stage::after{content:""!important;position:absolute!important;inset:14% -8% 10% 10%!important;background:radial-gradient(circle at calc(var(--why-mx,.5)*100%) calc(var(--why-my,.5)*100%),rgba(24,213,255,.18),transparent 42%)!important;opacity:.78!important;pointer-events:none!important;}
html .spx-why-section.spx-why-v52 .why52-network{position:absolute!important;inset:2% -8% 2% -8%!important;opacity:.36!important;z-index:1!important;}
html .spx-why-section.spx-why-v52 .why52-network .p{stroke:rgba(80,220,255,.42)!important;stroke-width:1.8!important;filter:drop-shadow(0 0 10px rgba(24,213,255,.24))!important;}
html .spx-why-section.spx-why-v52 .why52-network .n{fill:#5ee7ff!important;filter:drop-shadow(0 0 14px rgba(24,213,255,.65))!important;animation:whyNodePulse 4.8s ease-in-out infinite!important;}
html .spx-why-section.spx-why-v52 .why52-visuals{position:absolute!important;inset:0!important;z-index:3!important;}
html .spx-why-section.spx-why-v52 .why52-visual{position:absolute!important;inset:clamp(18px,3vh,36px) -18vw clamp(24px,4vh,44px) 0!important;margin:0!important;opacity:0!important;visibility:hidden!important;transition:none!important;filter:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual.is-active,
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"]{opacity:1!important;visibility:visible!important;transform:none!important;}
html .spx-why-section.spx-why-v52 .why52-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
html .spx-why-section.spx-why-v52 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,42px)!important;bottom:clamp(18px,3vw,42px)!important;max-width:300px!important;padding:14px 16px!important;border-radius:18px!important;background:rgba(3,10,20,.76)!important;border:1px solid rgba(116,232,255,.14)!important;backdrop-filter:blur(12px)!important;}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{position:relative!important;display:block!important;height:auto!important;min-height:0!important;padding:64px 0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-stack{min-height:0!important;display:grid!important;gap:14px!important;}
  html .spx-why-section.spx-why-v52 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-stage{margin-top:28px!important;min-height:360px!important;}
}


/* A8.58ZZM: longer sharp What hold + stable real How scroller. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height:350vh!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-shadow:none!important;
  transform-style:flat!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  background:linear-gradient(145deg,rgba(5,14,25,.97),rgba(4,9,18,.99) 62%,rgba(7,31,49,.90))!important;
}
html.spx-hero-story-active .spx-why-section.spx-why-v52{
  margin-top:-135svh!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  transform:scale(var(--spx-how-underlay-scale,1))!important;
  filter:blur(var(--spx-how-underlay-blur,0px))!important;
  transition:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3300px,430vh,4550px)!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  position:sticky!important;
  top:0!important;
  height:100svh!important;
  min-height:720px!important;
  transform:none!important;
  opacity:1!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  opacity:var(--how-head-opacity,1)!important;
  transform:translate3d(0,var(--how-head-y,0px),0)!important;
  max-height:calc(260px * var(--how-head-collapse,1))!important;
  margin-bottom:calc(22px * var(--how-head-collapse,1))!important;
  overflow:hidden!important;
  pointer-events:calc(var(--how-head-collapse,1))!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav button{
  pointer-events:none!important;
  cursor:default!important;
  user-select:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  min-height:320px!important;
}
html .spx-why-section.spx-why-v52 .why52-step{
  transition:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual,
html .spx-why-section.spx-why-v52 .why52-visual img{
  transition:none!important;
}
@media (max-width:980px){
  html.spx-hero-story-active .spx-why-section.spx-why-v52{margin-top:0!important;opacity:1!important;transform:none!important;filter:none!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{opacity:1!important;transform:none!important;max-height:none!important;margin-bottom:22px!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav button{pointer-events:auto!important;}
}


/* A8.58ZZN: How scroller polish — title, visual crossfade and no left step blocks. */
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2{
  max-width:680px!important;
}
html .spx-why-section.spx-why-v52 .why52-step-nav{
  display:none!important;
}
html .spx-why-section.spx-why-v52 .why52-step-stack{
  display:none!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-copy{
  justify-content:center!important;
  padding-bottom:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  margin-bottom:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:650px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  --why-mx:.52;
  --why-my:.54;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  will-change:opacity,transform,filter!important;
  transition:opacity .72s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1), filter .72s cubic-bezier(.16,1,.3,1)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  transition:transform .95s cubic-bezier(.16,1,.3,1), filter .75s cubic-bezier(.16,1,.3,1)!important;
  transform:translate3d(calc(var(--visual-distance,0) * -10px), calc(var(--visual-distance,0) * 6px), 0) scale(calc(1 + (var(--visual-presence,1) * .012)))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  left:clamp(20px,3.2vw,48px)!important;
  bottom:clamp(18px,3vw,44px)!important;
  max-width:min(420px,52%)!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(4,12,24,.82),rgba(3,7,15,.92))!important;
  border:1px solid rgba(116,232,255,.13)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(10px)!important;
  transform:translate3d(calc((1 - var(--visual-presence,1)) * 16px), calc((1 - var(--visual-presence,1)) * 10px), 0)!important;
  opacity:calc(.2 + (var(--visual-presence,1) * .8))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  display:inline-flex!important;
  align-items:center!important;
  margin:0 0 10px!important;
  color:#62e8ff!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  display:block!important;
  color:#fff!important;
  font-size:clamp(18px,1.25vw,24px)!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
  margin:0 0 8px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  display:block!important;
  color:rgba(222,238,255,.76)!important;
  font-size:clamp(13px,.9vw,15px)!important;
  line-height:1.48!important;
  margin:0!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n{
  animation:spxWhyNodeBreathe 3.8s ease-in-out infinite!important;
  transform-origin:center!important;
}
html .spx-why-section.spx-why-v52 .why52-network .n:nth-of-type(2n){animation-delay:.55s!important;}
html .spx-why-section.spx-why-v52 .why52-network .n:nth-of-type(3n){animation-delay:1.1s!important;}
html .spx-why-section.spx-why-v52 .why52-float{
  animation:spxWhyFloatDrift 7.5s ease-in-out infinite!important;
  will-change:transform,opacity!important;
}
html .spx-why-section.spx-why-v52 .why52-float.f2{animation-delay:1.2s!important;}
html .spx-why-section.spx-why-v52 .why52-float.f3{animation-delay:2.1s!important;}
@keyframes spxWhyNodeBreathe{
  0%,100%{opacity:.52;filter:drop-shadow(0 0 8px rgba(24,213,255,.34));}
  50%{opacity:1;filter:drop-shadow(0 0 22px rgba(24,213,255,.78));}
}
@keyframes spxWhyFloatDrift{
  0%,100%{opacity:.28;transform:translate3d(-4px,3px,0) scale(.96);}
  48%{opacity:.62;transform:translate3d(9px,-8px,0) scale(1.04);}
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .why52-step-stack{display:grid!important;height:auto!important;min-height:0!important;}
  html .spx-why-section.spx-why-v52 .why52-step-nav{display:none!important;}
}


/* A8.58ZZO: hold step 01 longer and make the visual caption/card clearer. */
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3550px,465vh,4920px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  padding-top:clamp(58px,8.5vh,96px)!important;
  padding-bottom:clamp(58px,8vh,92px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  min-height:clamp(600px,76vh,840px)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  inset:clamp(12px,2vh,28px) -18vw clamp(18px,3vh,38px) 0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  left:clamp(24px,3.8vw,58px)!important;
  bottom:clamp(22px,4vw,58px)!important;
  max-width:min(500px,58%)!important;
  padding:clamp(20px,2vw,28px) clamp(22px,2.25vw,32px)!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg,rgba(6,18,32,.94),rgba(3,7,16,.97) 62%,rgba(5,28,45,.88)),
    radial-gradient(circle at 10% 0%,rgba(24,213,255,.14),transparent 42%)!important;
  border:1px solid rgba(112,232,255,.24)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card::before,
html .spx-why-section.spx-why-v52 .why52-visual figcaption::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:4px!important;
  background:linear-gradient(180deg,#18d5ff,#7c8cff)!important;
  opacity:.9!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  margin-bottom:12px!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  background:rgba(24,213,255,.10)!important;
  border:1px solid rgba(116,232,255,.18)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  font-size:clamp(21px,1.55vw,30px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  margin-bottom:10px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  font-size:clamp(14px,1vw,17px)!important;
  line-height:1.55!important;
  color:rgba(226,241,255,.82)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  filter:saturate(1.03) brightness(1.02)!important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  html .spx-why-section.spx-why-v52 .why52-visual-card,
  html .spx-why-section.spx-why-v52 .why52-visual figcaption{max-width:min(420px,84%)!important;}
}


/* A8.58ZZP: How-step copy/card polish and glow reset refinements. */
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  max-width:min(540px,62%)!important;
  padding:clamp(22px,2.25vw,32px) clamp(24px,2.5vw,36px)!important;
  background:
    linear-gradient(145deg,rgba(6,18,32,.96),rgba(3,7,16,.985) 58%,rgba(6,31,48,.92)),
    radial-gradient(circle at 12% 0%,rgba(24,213,255,.18),transparent 44%)!important;
  border-color:rgba(112,232,255,.30)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card::after,
html .spx-why-section.spx-why-v52 .why52-visual figcaption::after{
  content:""!important;
  position:absolute!important;
  left:clamp(24px,2.5vw,36px)!important;
  right:clamp(24px,2.5vw,36px)!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,rgba(24,213,255,.75),rgba(124,140,255,.35),transparent)!important;
  opacity:.8!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-kicker{
  margin-bottom:14px!important;
  background:rgba(24,213,255,.13)!important;
  border-color:rgba(116,232,255,.26)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption b{
  max-width:460px!important;
}
html .spx-why-section.spx-why-v52 .why52-visual figcaption p,
html .spx-why-section.spx-why-v52 .why52-visual figcaption span:not(.why52-visual-kicker){
  max-width:500px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage:not(:hover){
  --why-mx:.52!important;
  --why-my:.54!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage:not(:hover)::after{
  opacity:.36!important;
  transition:opacity .45s ease!important;
}


/* A8.58ZZQ: Start-step copy polish, rounded visuals, longer What/How hold and dashboard prep. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height:390vh!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  opacity:1;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  max-height:calc(390px * var(--how-head-collapse,1))!important;
  padding-bottom:calc(8px * var(--how-head-collapse,1))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  max-width:720px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,var(--how-exit-y,0px),0)!important;
  filter:blur(calc(var(--how-exit-opacity,0) * 5px))!important;
  transition:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border-radius:clamp(20px,2vw,34px)!important;
  overflow:hidden!important;
  box-shadow:0 34px 100px rgba(0,0,0,.28)!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] img{
  object-position:center center!important;
  transform:translate3d(-5.5%,0,0) scale(calc(1.01 + (var(--visual-presence,1) * .01)))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual[data-why52-visual="0"] figcaption{
  left:clamp(20px,2.8vw,44px)!important;
}
html .command-center{
  position:relative!important;
  overflow:hidden!important;
}
html .command-center::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(120deg,rgba(24,213,255,.08),transparent 36%,rgba(90,111,255,.07))!important;
  opacity:.85!important;
}
html .command-center > *,
html .command-grid{position:relative!important;z-index:1!important;}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-sticky{opacity:1!important;filter:none!important;transform:none!important;}
}


/* A8.58ZZR: How intro/step handoff polish.
   - Start. Build. Export. stays alone first.
   - Step 01 visual appears only after the intro fades.
   - How background is full-bleed and fades out without a dark block/line.
   - Removes square-looking frames around step visuals. */
html .spx-why-section.spx-why-v52{
  position:relative!important;
  isolation:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  opacity:0!important;
  z-index:0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-shell{
  position:relative!important;
  z-index:1!important;
  width:min(1280px,calc(100% - 48px))!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc((1 - var(--how-exit-opacity,0)) * 1)!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .35),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  opacity:var(--zzr-how-intro-opacity,1)!important;
  transform:translate3d(0,calc(-14px * (1 - var(--zzr-how-intro-opacity,1))),0)!important;
  max-height:calc(390px * var(--zzr-how-intro-opacity,1))!important;
  margin-bottom:calc(20px * var(--zzr-how-intro-opacity,1))!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:var(--zzr-how-steps-opacity,0)!important;
  transform:translate3d(0,calc(18px * (1 - var(--zzr-how-steps-opacity,0))),0) scale(calc(.988 + (.012 * var(--zzr-how-steps-opacity,0))))!important;
  transition:opacity .28s linear!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visual::before,
html .spx-why-section.spx-why-v52 .why52-visual::after,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  box-shadow:none!important;
  border:0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:clamp(22px,2vw,34px)!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  box-shadow:0 20px 56px rgba(0,0,0,.26)!important;
}
html .command-center{
  margin-top:0!important;
  border-top:0!important;
  box-shadow:none!important;
}
html .command-center::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .25 + .25)!important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52 .spx-why52-story-head{
    opacity:1!important;
    max-height:none!important;
    transform:none!important;
    margin-bottom:22px!important;
  }
  html .spx-why-section.spx-why-v52 .spx-why52-stage{
    opacity:1!important;
    transform:none!important;
  }
}


/* A8.58ZZS: remove the dark empty tail after How by keeping the story visible until the section handoff. */
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,var(--how-exit-y,0px),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .68)!important;
}
html .spx-why-section.spx-why-v52{
  margin-bottom:0!important;
  padding-bottom:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}
html .command-center{
  margin-top:-1px!important;
  border-top:0!important;
  box-shadow:none!important;
}
html .command-center::before{
  opacity:.42!important;
}


/* A8.58ZZT: hard fix for the dark empty tail after How.
   Keep the last How visual/content visible until the section actually hands off. */
html .spx-why-section.spx-why-v52{
  --how-exit-opacity:0;
  --how-exit-y:0px;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .18),0)!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:var(--zzr-how-steps-opacity,1)!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:calc((1 - var(--how-exit-opacity,0)) * .68)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  /* keep enough scroll room for the steps, but remove the excessive invisible tail */
  height:clamp(3300px,435vh,4620px)!important;
}
html .command-center{
  margin-top:0!important;
  border-top:0!important;
  box-shadow:none!important;
}


/* A8.58ZZU: synchronized How exit, sharp What view, normal space background and visible back-to-top. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content *,
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  text-shadow:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  filter:none!important;
  will-change:opacity,transform!important;
}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html .spx-why-section.spx-why-v52{
  --how-exit-opacity:0;
  --how-exit-y:0px;
  position:relative!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
html .spx-why-section.spx-why-v52::before{
  opacity:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(3180px,404vh,4300px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after{
  opacity:calc(1 - var(--how-exit-opacity,0))!important;
  transform:translate3d(0,calc(var(--how-exit-y,0px) * .16),0) scale(calc(1 - (var(--how-exit-opacity,0) * .006)))!important;
  filter:none!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  opacity:calc(var(--zzr-how-steps-opacity,1) * (1 - var(--how-exit-opacity,0)))!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual,
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  transition:opacity .18s linear, transform .18s linear!important;
}
html .command-center{
  margin-top:-1px!important;
  border-top:0!important;
  box-shadow:none!important;
  background:
    radial-gradient(1px 1px at 18% 22%,rgba(180,235,255,.52),transparent 60%),
    radial-gradient(1px 1px at 77% 38%,rgba(126,205,255,.42),transparent 60%),
    var(--bg)!important;
}
html .command-center::before{
  opacity:.28!important;
}
.spx-scroll-top{
  right:clamp(18px,2.3vw,34px)!important;
  bottom:clamp(18px,2.3vw,34px)!important;
  z-index:1300!important;
  width:54px!important;
  height:54px!important;
  border-radius:999px!important;
  border:1px solid rgba(99,226,255,.30)!important;
  background:linear-gradient(145deg,rgba(5,18,34,.90),rgba(8,32,58,.76))!important;
  color:#edfaff!important;
  box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 26px rgba(24,199,255,.16),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.spx-scroll-top.is-visible{
  opacity:1!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto!important;
}
.spx-scroll-top:hover,
.spx-scroll-top:focus-visible{
  border-color:rgba(99,226,255,.62)!important;
  background:linear-gradient(145deg,rgba(18,203,255,.90),rgba(47,102,255,.82))!important;
}


/* A8.58ZZX: transparent How Spixor Works background after the builder.
   The 3-step story should continue on the normal space background instead of
   sitting on a separate one-color/dark panel. */
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-stage{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo,
html .spx-why-section.spx-why-v52 .why52-echo-base,
html .spx-why-section.spx-why-v52 .why52-echo-layer{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html .spx-why-section.spx-why-v52{
  /* Keep only spacing/sticky behavior; visual background is inherited from the page/space scene. */
  isolation: auto !important;
}
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html .spx-why-section.spx-why-v52 .why52-network{
  opacity: .78 !important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card{
  background: linear-gradient(145deg, rgba(5, 12, 23, .58), rgba(5, 12, 23, .38)) !important;
  border-color: rgba(115, 226, 255, .12) !important;
  box-shadow: none !important;
}
html .command-center{
  margin-top: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-top: 0 !important;
  box-shadow: none !important;
}
html .command-center::before{
  opacity: .18 !important;
}


/* A8.58ZZY: one shared hero-space background for Hero -> How Spixor Works.
   Removes leftover section/block backgrounds so How continues on the same
   atmospheric layer instead of sitting on its own color panel. */
html .spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  background:#02050d!important;
}
html[data-theme="light"] .spx-home-main{background:#eef3fa!important;}
html .spx-home-main::before,
html .spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  pointer-events:none!important;
  z-index:0!important;
  transform:none!important;
  will-change:auto!important;
}
html .spx-home-main::before{
  background:
    radial-gradient(700px 420px at 72% 16%,rgba(33,117,221,.18),transparent 68%),
    radial-gradient(620px 380px at 18% 46%,rgba(24,201,245,.13),transparent 70%),
    linear-gradient(116deg,transparent 0 25%,rgba(24,201,245,.08) 43%,rgba(194,239,255,.10) 49%,rgba(69,111,255,.06) 59%,transparent 78% 100%),
    linear-gradient(180deg,#02050d 0%,#050d19 48%,#07111f 100%)!important;
  opacity:1!important;
}
html .spx-home-main::after{
  opacity:.58!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 55% 71%,rgba(120,219,255,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 12% 83%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    linear-gradient(rgba(107,232,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.012) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,610px 480px,420px 390px,96px 96px,96px 96px!important;
}
html .spx-home-main > *{
  position:relative!important;
  z-index:1!important;
}
html .spx-hero-v26[data-hero-scrollstory],
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52 .spx-why52-sticky.is-spx-pin-after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-stage,
html .command-center{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-shell::before,
html .spx-why-section.spx-why-v52 .spx-why52-shell::after,
html .spx-why-section.spx-why-v52 .spx-why52-track::before,
html .spx-why-section.spx-why-v52 .spx-why52-track::after,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::before,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::after,
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .spx-why52-hero-echo,
html .spx-why-section.spx-why-v52 .why52-echo-base,
html .spx-why-section.spx-why-v52 .why52-echo-layer,
html .command-center::before,
html .command-center::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
}
html .spx-why-section.spx-why-v52{
  isolation:auto!important;
  overflow:visible!important;
}
html .spx-why-section.spx-why-v52 .why52-network,
html .spx-why-section.spx-why-v52 .why52-visuals{
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  background:linear-gradient(145deg,rgba(5,12,23,.62),rgba(5,12,23,.42))!important;
  border-color:rgba(115,226,255,.12)!important;
}

/* A8.58ZZZ: final public-flow polish.
   One last, explicit layer to remove the remaining How panel backgrounds,
   keep the hero/space atmosphere continuous, sharpen the What view, slow the
   hero -> What -> How sequence, and polish the hero CTA hovers. */
html .spx-home-main{
  position:relative!important;
  isolation:isolate!important;
  background:#02050d!important;
  overflow:visible!important;
}
html[data-theme="light"] .spx-home-main{background:#eef3fa!important;}
html .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
  min-height:clamp(3100px,460svh,4800px)!important;
}
html .spx-home-main::before,
html .spx-home-main::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  pointer-events:none!important;
  transform:none!important;
  z-index:0!important;
}
html .spx-home-main::before{
  background:
    radial-gradient(760px 460px at 72% 16%,rgba(33,117,221,.18),transparent 68%),
    radial-gradient(680px 420px at 18% 46%,rgba(24,201,245,.13),transparent 70%),
    radial-gradient(820px 560px at 52% 88%,rgba(17,45,96,.28),transparent 72%),
    linear-gradient(116deg,transparent 0 25%,rgba(24,201,245,.075) 43%,rgba(194,239,255,.10) 49%,rgba(69,111,255,.055) 59%,transparent 78% 100%),
    linear-gradient(180deg,#02050d 0%,#050d19 48%,#07111f 100%)!important;
  opacity:1!important;
}
html .spx-home-main::after{
  opacity:.62!important;
  background:
    radial-gradient(circle at 8% 18%,rgba(255,255,255,.62) 0 1px,transparent 1.7px),
    radial-gradient(circle at 23% 12%,rgba(107,232,255,.50) 0 1px,transparent 1.6px),
    radial-gradient(circle at 72% 9%,rgba(255,255,255,.56) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 34%,rgba(107,232,255,.48) 0 1px,transparent 1.6px),
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.42) 0 1px,transparent 1.8px),
    radial-gradient(circle at 55% 71%,rgba(120,219,255,.42) 0 1px,transparent 1.7px),
    radial-gradient(circle at 12% 83%,rgba(255,255,255,.38) 0 1px,transparent 1.7px),
    linear-gradient(rgba(107,232,255,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,232,255,.011) 1px,transparent 1px)!important;
  background-size:470px 360px,390px 320px,520px 410px,460px 380px,540px 430px,610px 480px,420px 390px,96px 96px,96px 96px!important;
}
html[data-theme="light"] .spx-home-main::before{
  background:
    radial-gradient(760px 460px at 72% 16%,rgba(37,99,235,.12),transparent 68%),
    radial-gradient(680px 420px at 18% 46%,rgba(14,165,233,.10),transparent 70%),
    linear-gradient(116deg,transparent 0 25%,rgba(14,165,233,.055) 43%,rgba(255,255,255,.50) 49%,rgba(37,99,235,.045) 59%,transparent 78% 100%),
    linear-gradient(180deg,#eef6ff 0%,#f6f8fc 58%,#eef3fa 100%)!important;
}
html[data-theme="light"] .spx-home-main::after{opacity:.36!important;}
html .spx-home-main > *{position:relative!important;z-index:1!important;}

/* Keep the actual hero canvas as a shared atmosphere layer too, so How does not
   need its own block background after the product/building sequence. */
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100svh!important;
  z-index:0!important;
  opacity:.64!important;
  mix-blend-mode:screen!important;
  pointer-events:none!important;
}

/* The product mask was still drawn over the What view. Put the real DOM view
   above that mask and flatten the DOM view so text/topbar stay crisp. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-stack{
  z-index:28!important;
  backface-visibility:hidden!important;
  transform:none!important;
  will-change:opacity!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  display:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  position:absolute!important;
  left:50%!important;
  top:clamp(86px,10vh,112px)!important;
  width:min(1040px,calc(100vw - 72px))!important;
  z-index:44!important;
  opacity:var(--spx-hero-view-new-opacity,0)!important;
  transform:translate3d(-50%,0,0)!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  pointer-events:none!important;
  will-change:opacity!important;
  contain:layout style!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  position:relative!important;
  width:100%!important;
  min-height:clamp(520px,62vh,660px)!important;
  border:1px solid rgba(116,232,255,.16)!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(6,14,26,.96),rgba(4,9,18,.98) 62%,rgba(7,31,49,.88))!important;
  box-shadow:0 26px 86px rgba(0,0,0,.30),0 0 42px rgba(24,201,245,.08)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:48px;
  z-index:2;
  border-bottom:1px solid rgba(116,232,255,.14);
  background:
    radial-gradient(circle at 28px 24px,#ff5c7a 0 5px,transparent 6px),
    radial-gradient(circle at 46px 24px,#f5b85b 0 5px,transparent 6px),
    radial-gradient(circle at 64px 24px,#45e6a8 0 5px,transparent 6px),
    linear-gradient(90deg,rgba(24,201,245,.12),rgba(255,255,255,.035),transparent);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after{
  content:"spixor.site / visual-builder";
  position:absolute;
  left:94px;
  right:22px;
  top:12px;
  z-index:3;
  height:24px;
  display:flex;
  align-items:center;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(116,232,255,.14);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(238,246,255,.95))!important;
  box-shadow:0 26px 72px rgba(22,34,64,.14),0 0 36px rgba(14,165,233,.10)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer *{
  text-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  backface-visibility:visible!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  position:relative!important;
  inset:auto!important;
  min-height:clamp(488px,58vh,626px)!important;
  display:grid!important;
  align-items:center!important;
  padding:clamp(76px,8vw,108px) clamp(28px,6vw,82px) clamp(28px,5vw,62px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  max-width:820px!important;
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .v26-product-atmosphere::after{
  opacity:.16!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-view-content,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-dom-content="what-is-spixor"],
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-dom-content="what-is-spixor"] *{
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-shadow:none!important;
  transform:none!important;
  will-change:opacity!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:geometricPrecision!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-topbar{
  width:158px!important;
  height:auto!important;
  filter:none!important;
  opacity:1!important;
  image-rendering:auto!important;
  transform:none!important;
  backface-visibility:hidden!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  position:absolute!important;
  right:clamp(22px,3vw,34px)!important;
  left:auto!important;
  top:62px!important;
  width:174px!important;
  z-index:3!important;
  opacity:.88!important;
  border-radius:12px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.18)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px 12px;
  align-items:center;
  margin:18px 0 8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(245,184,91,.26);
  background:linear-gradient(135deg,rgba(245,184,91,.12),rgba(24,201,245,.055));
  color:var(--secondary);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice b{color:#f5b85b;font-size:12px;text-transform:uppercase;letter-spacing:.09em}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{font-size:13px;line-height:1.5}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{color:var(--cyan-2);font-weight:900;text-decoration:none;font-size:13px}
html .spx-hero-v26[data-hero-scrollstory] [data-spx-dom-content="what-is-spixor"]{
  background:linear-gradient(145deg,rgba(5,14,25,.955),rgba(4,9,18,.985) 62%,rgba(7,31,49,.88))!important;
  outline:1px solid rgba(116,232,255,.10)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.18)!important;
}

/* Real transparent How section: no self-contained section/stage/track panel.
   Only the content, network lines and small text cards remain visible. */
html .spx-why-section.spx-why-v52,
html .spx-why-section.spx-why-v52::before,
html .spx-why-section.spx-why-v52::after,
html .spx-why-section.spx-why-v52 .spx-why52-shell,
html .spx-why-section.spx-why-v52 .spx-why52-shell::before,
html .spx-why-section.spx-why-v52 .spx-why52-shell::after,
html .spx-why-section.spx-why-v52 .spx-why52-track,
html .spx-why-section.spx-why-v52 .spx-why52-track::before,
html .spx-why-section.spx-why-v52 .spx-why52-track::after,
html .spx-why-section.spx-why-v52 .spx-why52-sticky,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::before,
html .spx-why-section.spx-why-v52 .spx-why52-sticky::after,
html .spx-why-section.spx-why-v52 .spx-why52-copy,
html .spx-why-section.spx-why-v52 .spx-why52-copy::before,
html .spx-why-section.spx-why-v52 .spx-why52-copy::after,
html .spx-why-section.spx-why-v52 .spx-why52-stage,
html .spx-why-section.spx-why-v52 .spx-why52-stage::before,
html .spx-why-section.spx-why-v52 .spx-why52-stage::after,
html .spx-why-section.spx-why-v52 .why52-visuals,
html .spx-why-section.spx-why-v52 .why52-visuals::before,
html .spx-why-section.spx-why-v52 .why52-visuals::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
  outline:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-why-section.spx-why-v52{
  margin-top:-118svh!important;
  padding-top:28svh!important;
  opacity:var(--spx-how-underlay-opacity,0)!important;
  overflow:visible!important;
  isolation:auto!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-track{
  height:clamp(7600px,900vh,9800px)!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{
  min-height:100svh!important;
  padding:clamp(62px,9vh,112px) 0!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{
  max-width:720px!important;
}
html .spx-why-section.spx-why-v52 .spx-why52-story-head h2,
html .spx-why-section.spx-why-v52 .spx-why52-story-head p{
  text-shadow:none!important;
}
html .spx-why-section.spx-why-v52 .why52-network{
  opacity:calc(.56 * var(--zzr-how-steps-opacity,1))!important;
  background:transparent!important;
}
html .spx-why-section.spx-why-v52 .why52-float{
  opacity:calc(.34 * var(--zzr-how-steps-opacity,1))!important;
}
html .spx-why-section.spx-why-v52 .why52-visual img{
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:contain!important;
  object-position:right center!important;
  transform-origin:right center!important;
}
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"],
html .spx-why-section.spx-why-v52 .why52-visual[data-spx-active="1"] img{
  filter:none!important;
}
html .spx-why-section.spx-why-v52 .why52-visual-card,
html .spx-why-section.spx-why-v52 .why52-visual figcaption{
  background:linear-gradient(145deg,rgba(5,13,25,.58),rgba(5,13,25,.34))!important;
  border:1px solid rgba(116,232,255,.12)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.16)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .command-center,
html .command-center::before,
html .command-center::after{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border-top:0!important;
  box-shadow:none!important;
}

/* Hero CTA polish. Learn More keeps centered rest state, then makes room for
   an animated custom arrow bubble on hover. */
.spx-v26-actions .spx-learn-more{
  position:relative!important;
  min-width:158px!important;
  width:158px!important;
  box-sizing:border-box!important;
  padding:12px 18px!important;
  overflow:hidden!important;
  justify-content:center!important;
  gap:0!important;
  border-color:rgba(142,221,255,.20)!important;
  background:rgba(255,255,255,.052)!important;
  transition:transform .24s var(--ease), background .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease)!important;
}
.spx-v26-actions .spx-learn-more .label{
  position:relative!important;
  z-index:2!important;
  transform:translateX(0)!important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), color .22s var(--ease)!important;
}
.spx-v26-actions .spx-learn-more .arrowBubble{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(24,201,245,.96),rgba(37,99,235,.92))!important;
  color:#fff!important;
  font-style:normal!important;
  font-size:0!important;
  font-weight:950!important;
  line-height:1!important;
  opacity:0!important;
  transform:translate3d(14px,-50%,0) scale(.76)!important;
  box-shadow:0 14px 34px rgba(24,201,245,.28),inset 0 1px 0 rgba(255,255,255,.24)!important;
  transition:opacity .24s var(--ease), transform .34s cubic-bezier(.2,.85,.2,1.2)!important;
  pointer-events:none!important;
}
.spx-v26-actions .spx-learn-more .arrowIcon{
  position:relative!important;
  width:13px!important;
  height:13px!important;
  display:block!important;
}
.spx-v26-actions .spx-learn-more .arrowIcon path{fill:currentColor!important}
.spx-v26-actions .spx-learn-more:hover,
.spx-v26-actions .spx-learn-more:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(107,232,255,.44)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(24,201,245,.075))!important;
  box-shadow:0 20px 58px rgba(0,0,0,.22),0 0 34px rgba(24,201,245,.15)!important;
}
.spx-v26-actions .spx-learn-more:hover .label,
.spx-v26-actions .spx-learn-more:focus-visible .label{
  transform:translateX(-15px)!important;
  color:#fff!important;
}
.spx-v26-actions .spx-learn-more:hover .arrowBubble,
.spx-v26-actions .spx-learn-more:focus-visible .arrowBubble{
  opacity:1!important;
  transform:translate3d(0,-50%,0) scale(1)!important;
}
.spx-v26-actions .spx-primary-action:hover,
.spx-v26-actions .spx-primary-action:focus-visible,
.spx-nav-v26 .nav-actions .spx-primary-action:hover,
.spx-nav-v26 .nav-actions .spx-primary-action:focus-visible{
  color:#fff!important;
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{position:absolute!important;height:100%!important;}
  html .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important;opacity:1!important;}
  html .spx-why-section.spx-why-v52 .spx-why52-track{height:auto!important;}
  .spx-v26-actions .spx-learn-more{min-width:0!important;width:100%!important;}
}

/* A8.59 homepage flow: active replacement for the old post-How marketing
   sections. These classes are the only homepage blocks after How Spixor Works. */
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
.spx-dashboard-command,
.spx-export-section,
.spx-pricing-section,
.spx-summary-roadmap{
  position:relative;
  width:min(1180px,calc(100% - 32px));
  margin:clamp(64px,9vw,126px) auto;
  z-index:5;
}
.spx-dashboard-command{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  gap:clamp(24px,5vw,72px);
  align-items:center;
  min-height:clamp(2500px,335svh,3300px);
  --dash-focus:0;
  overflow:visible;
}
.spx-dash-visual{position:relative;align-self:stretch;display:grid;align-items:center}
.spx-dash-frame{
  position:sticky;
  top:78px;
  margin:0;
  width:calc(100% + ((100vw - 100%) * var(--dash-focus,0)));
  max-width:calc(100vw - 22px);
  border:1px solid rgba(116,232,255,.20);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(11,21,38,.88),rgba(5,10,22,.74));
  box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 50px rgba(24,201,245,.10);
  isolation:isolate;
  z-index:calc(20 + (var(--dash-focus,0) * 30));
  transform:translate3d(calc(var(--dash-focus,0) * -9vw),0,0) scale(calc(1 + (var(--dash-focus,0) * .055)));
  transform-origin:left center;
  transition:box-shadow .28s var(--ease), border-color .28s var(--ease), opacity .18s ease;
}
html[data-theme="light"] .spx-dash-frame{background:linear-gradient(145deg,#fff,#eef6ff);box-shadow:0 28px 70px rgba(22,34,64,.15)}
.spx-dash-frame::before{
  content:"";
  display:block;
  height:34px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(90deg,rgba(24,201,245,.16),rgba(37,99,235,.08),transparent);
}
.spx-dash-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  filter:none!important;
  transform:none!important;
  transition:opacity .2s ease;
}
.spx-dashboard-command.is-switching .spx-dash-frame img{opacity:.18}
.spx-dash-frame::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.55);
  background:rgba(24,201,245,.18);
  box-shadow:0 0 0 0 rgba(24,201,245,.24),0 12px 32px rgba(0,0,0,.28);
  opacity:0;
  transform:translate(-50%,-50%) scale(.72);
  pointer-events:none;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-frame::after,
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-frame::after{
  opacity:1;
  animation:spxDashClick 1.15s ease both;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-frame::after{left:12%;top:47%}
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-frame::after{left:12%;top:52%}
.spx-dash-cursor{
  position:absolute;
  z-index:4;
  left:70%;
  top:24%;
  width:22px;
  height:22px;
  clip-path:polygon(0 0,0 100%,28% 74%,44% 100%,62% 91%,47% 66%,82% 66%);
  background:#f4fbff;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.34));
  opacity:calc(.25 + var(--dash-focus,0) * .75);
  transform:translate3d(0,0,0) scale(calc(.92 + var(--dash-focus,0) * .12));
  transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
.spx-dashboard-command[data-dashboard-active="projects"] .spx-dash-cursor{left:12%;top:47%}
.spx-dashboard-command[data-dashboard-active="files"] .spx-dash-cursor{left:12%;top:52%}
@keyframes spxDashClick{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.68);box-shadow:0 0 0 0 rgba(24,201,245,.24)}
  28%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  56%{box-shadow:0 0 0 18px rgba(24,201,245,0)}
  100%{opacity:.72;transform:translate(-50%,-50%) scale(.92)}
}
.spx-dash-callout{
  position:absolute;
  z-index:2;
  max-width:180px;
  padding:10px 12px;
  border:1px solid rgba(107,232,255,.28);
  border-radius:14px;
  background:rgba(6,14,28,.78);
  color:#edfaff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
  opacity:.28;
  transform:translateY(8px) scale(.98);
  transition:opacity .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease);
}
html[data-theme="light"] .spx-dash-callout{background:rgba(255,255,255,.88);color:#101828;box-shadow:0 14px 32px rgba(22,34,64,.14)}
.callout-projects{left:7%;top:16%}.callout-files{right:7%;bottom:24%}.callout-export{left:12%;bottom:10%}
.spx-dashboard-command[data-dashboard-active="overview"] .callout-export,
.spx-dashboard-command[data-dashboard-active="projects"] .callout-projects,
.spx-dashboard-command[data-dashboard-active="files"] .callout-files{
  opacity:1;
  transform:translateY(0) scale(1);
  border-color:rgba(107,232,255,.52);
}
.spx-dash-copy,
.spx-summary-panel{
  border:1px solid rgba(218,236,255,.12);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50));
  padding:clamp(24px,4vw,44px);
  box-shadow:0 24px 80px rgba(0,0,0,.22);
}
.spx-dash-copy{
  position:relative;
  z-index:28;
  transform:translate3d(calc(var(--dash-focus,0) * -5vw),0,0);
  transition:transform .22s var(--ease), opacity .22s var(--ease);
}
html[data-theme="light"] .spx-dash-copy,
html[data-theme="light"] .spx-summary-panel{background:rgba(255,255,255,.78);border-color:rgba(15,23,42,.10);box-shadow:0 24px 70px rgba(22,34,64,.12)}
.spx-dash-copy h2,
.spx-section-kicker h2,
.spx-summary-panel h2{font-size:clamp(34px,4.8vw,64px);line-height:.98;letter-spacing:-.055em;margin:12px 0;color:var(--text)}
.spx-dash-copy p,
.spx-section-kicker p,
.spx-summary-panel p{color:var(--secondary);font-size:clamp(16px,1.45vw,20px);line-height:1.65}
.spx-dash-tabs,
.spx-price-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.spx-dash-tabs button,
.spx-price-tabs button{
  border:1px solid rgba(218,236,255,.13);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:12px 14px;
  cursor:pointer;
  font-weight:920;
  transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease);
}
.spx-dash-tabs button b{color:var(--cyan-2);margin-right:7px}
.spx-dash-tabs button.is-active,
.spx-price-tabs button.is-active{border-color:rgba(107,232,255,.42);background:rgba(24,201,245,.12);box-shadow:0 14px 34px rgba(24,201,245,.12)}
.spx-dash-panel{display:none}.spx-dash-panel.is-active{display:block}
.spx-dash-panel h3{font-size:24px;margin:0 0 8px;color:var(--text)}
.spx-section-kicker{max-width:840px;margin:0 0 28px}
.spx-export-grid,
.spx-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.spx-export-grid{grid-template-columns:repeat(3,minmax(0,1fr));transition:grid-template-columns .38s cubic-bezier(.2,.8,.2,1)}
.spx-export-grid:has(.spx-export-card:nth-child(1):hover),
.spx-export-grid:has(.spx-export-card:nth-child(1):focus-within){grid-template-columns:1.75fr .62fr .62fr}
.spx-export-grid:has(.spx-export-card:nth-child(2):hover),
.spx-export-grid:has(.spx-export-card:nth-child(2):focus-within){grid-template-columns:.62fr 1.75fr .62fr}
.spx-export-grid:has(.spx-export-card:nth-child(3):hover),
.spx-export-grid:has(.spx-export-card:nth-child(3):focus-within){grid-template-columns:.62fr .62fr 1.75fr}
.spx-export-card,
.spx-price-card,
.spx-roadmap-item{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(218,236,255,.12);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(12,23,41,.76),rgba(6,12,24,.58));
  padding:clamp(22px,3vw,34px);
  min-height:220px;
  box-shadow:0 22px 70px rgba(0,0,0,.20);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease);
}
html[data-theme="light"] .spx-export-card,
html[data-theme="light"] .spx-price-card,
html[data-theme="light"] .spx-roadmap-item{background:rgba(255,255,255,.80);border-color:rgba(15,23,42,.10);box-shadow:0 18px 52px rgba(22,34,64,.10)}
.spx-export-card::before{
  content:"";
  position:absolute;
  inset:-30% auto auto -60%;
  width:60%;
  height:160%;
  transform:rotate(18deg) translateX(-30%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  opacity:0;
  transition:transform .55s var(--ease),opacity .25s var(--ease);
}
.spx-export-card:hover{transform:translateY(-6px) rotateX(1deg);border-color:rgba(107,232,255,.42);box-shadow:0 28px 90px rgba(0,0,0,.28),0 0 32px rgba(24,201,245,.12)}
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover),
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within){padding-inline:18px}
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
.spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link,
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) p,
.spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) .spx-more-link{opacity:0;max-height:0;overflow:hidden;margin:0;pointer-events:none}
.spx-export-card p,.spx-export-card .spx-more-link{transition:opacity .28s ease,max-height .32s ease,margin .32s ease}
.spx-export-card:hover::before{opacity:1;transform:rotate(18deg) translateX(330%)}
.spx-export-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,rgba(24,201,245,.95),rgba(37,99,235,.90));color:#fff;font-weight:960;box-shadow:0 12px 34px rgba(24,201,245,.24);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spx-export-icon img{width:27px;height:27px;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18))}
.spx-export-card:hover .spx-export-icon{transform:translateY(-2px) scale(1.08) rotate(-2deg);box-shadow:0 16px 42px rgba(24,201,245,.32)}
.spx-export-card h3,
.spx-price-card h3{font-size:26px;line-height:1.05;margin:22px 0 10px;color:var(--text)}
.spx-export-card p,
.spx-price-card p,
.spx-roadmap-item b{color:var(--secondary);line-height:1.62}
.spx-more-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:var(--cyan-2);
  text-decoration:none;
  font-weight:950;
}
.spx-more-link::after{content:"";width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.spx-export-card:hover .spx-more-link::after{transform:translateX(4px) rotate(45deg)}
.spx-price-tabs button span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.spx-price-card{min-height:420px;display:flex;flex-direction:column}
.spx-plan-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  margin-bottom:14px;
  color:#fff;
  font-weight:1000;
  background:linear-gradient(135deg,rgba(69,230,168,.92),rgba(24,201,245,.82));
  box-shadow:0 14px 34px rgba(24,201,245,.18);
}
.spx-plan-icon.orbit{background:linear-gradient(135deg,rgba(24,201,245,.95),rgba(37,99,235,.92))}
.spx-plan-icon.enterprise{background:linear-gradient(135deg,rgba(47,128,255,.92),rgba(139,92,246,.72))}
.spx-price-card.is-active{border-color:rgba(107,232,255,.44);box-shadow:0 28px 90px rgba(24,201,245,.13)}
.spx-plan-status{align-self:flex-start;border:1px solid rgba(107,232,255,.24);border-radius:999px;padding:7px 10px;color:var(--cyan-2);font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:950}
.spx-plan-status.alpha{color:#f5b85b;border-color:rgba(245,184,91,.28)}.spx-plan-status.planned{color:#b8c2d6}
.spx-price-card strong{display:block;font-size:clamp(34px,4vw,54px);letter-spacing:-.05em;color:var(--text);margin:8px 0 10px}
.spx-price-card ul{display:grid;gap:10px;margin:12px 0 24px;padding:0;list-style:none;color:var(--secondary)}
.spx-price-card li::before{content:"+";color:var(--cyan-2);font-weight:950;margin-right:8px}
.spx-price-card .btn{margin-top:auto}.spx-pricing-note{color:var(--muted);font-size:13px;margin-top:16px}
.spx-summary-roadmap{display:grid;grid-template-columns:.82fr 1.18fr;gap:24px;align-items:start}
.spx-roadmap-flow{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spx-roadmap-flow::before{content:"";position:absolute;inset:10% 6%;border:1px solid rgba(107,232,255,.16);border-radius:50%;transform:rotate(-8deg);pointer-events:none}
.spx-roadmap-stage{position:relative;display:grid;gap:12px;min-width:0}
.spx-roadmap-stage header{
  min-height:118px;
  border:1px solid rgba(107,232,255,.16);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(145deg,rgba(24,201,245,.10),rgba(255,255,255,.035));
}
.spx-roadmap-stage header span{display:block;color:var(--cyan-2);font-weight:1000;letter-spacing:.02em}
.spx-roadmap-stage header p{margin:8px 0 0;color:var(--secondary);line-height:1.5}
.spx-roadmap-item{min-height:134px;padding:18px}
.spx-roadmap-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.13) 48%,transparent 62%);
  transform:translateX(-120%);
  opacity:0;
  transition:transform .55s var(--ease),opacity .25s var(--ease);
}
.spx-roadmap-item:hover{transform:translateY(-5px) rotateX(1deg);border-color:rgba(107,232,255,.36);box-shadow:0 28px 86px rgba(0,0,0,.24),0 0 28px rgba(24,201,245,.10)}
.spx-roadmap-item:hover::before{opacity:1;transform:translateX(120%)}
.spx-roadmap-item.is-active{border-color:rgba(107,232,255,.44);box-shadow:0 24px 78px rgba(24,201,245,.12)}
.spx-roadmap-item span{display:inline-flex;margin-bottom:14px;border-radius:999px;padding:6px 9px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.1em}
.spx-roadmap-item b{display:block;color:var(--text);font-size:18px}
.spx-footer-v2{grid-template-columns:minmax(260px,1.1fr) minmax(260px,.9fr);align-items:start;gap:26px}
.spx-footer-v2 .footer-main-copy p{max-width:580px}.footer-link-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
.footer-copyline{grid-column:1/-1;color:var(--muted);margin:0}
.footer-built-with{grid-column:1/-1;color:var(--muted);margin:0;padding:0;border:0;border-radius:0;background:transparent;width:max-content;max-width:100%;font-size:12px;opacity:.74}
.site-header.spx-nav-v26 .site-nav>a.is-active{color:var(--text)!important}
.site-header.spx-nav-v26 .site-nav>a.is-active::after{transform:scaleX(1)!important}
.spx-pricing-section.standalone{margin-top:42px}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{position:relative!important;left:auto!important;top:auto!important;width:100%!important;transform:none!important;opacity:1!important;margin:28px auto 0!important;padding:0 14px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{min-height:auto!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{min-height:auto!important;padding:64px 18px 18px!important;}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{grid-template-columns:1fr;}
  .spx-dashboard-command,.spx-summary-roadmap{grid-template-columns:1fr;min-height:auto}
  .spx-dash-frame{position:relative;top:auto;width:100%;max-width:100%;transform:none}
  .spx-dash-copy{transform:none}
  .spx-export-grid,.spx-export-grid:has(.spx-export-card:hover),.spx-export-grid:has(.spx-export-card:focus-within),.spx-price-grid,.spx-roadmap-flow{grid-template-columns:1fr}
  .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
  .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link{opacity:1;max-height:none;margin-top:16px;pointer-events:auto}
  .spx-footer-v2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .spx-dashboard-command,.spx-export-section,.spx-pricing-section,.spx-summary-roadmap{width:min(100% - 24px,1180px);margin:56px auto}
  .spx-dash-callout{position:relative;display:inline-flex;margin:8px 8px 0 0;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
  .spx-price-tabs{display:grid;grid-template-columns:1fr}
}

/* A8.59 auth and shared-file surfaces. Shared files keep their existing
   permission/backend logic; these styles replace the old visual shell. */
.spx-reset-page,
.spx-shared-file-modern{
  min-height:100svh;
  background:
    radial-gradient(720px 420px at 78% 12%,rgba(24,201,245,.16),transparent 70%),
    radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.14),transparent 72%),
    linear-gradient(180deg,#050711,#070a12 54%,#0b1020);
  color:var(--text);
}
html[data-theme="light"] .spx-reset-page,
html[data-theme="light"] .spx-shared-file-modern{
  background:
    radial-gradient(720px 420px at 78% 12%,rgba(14,165,233,.12),transparent 70%),
    radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.10),transparent 72%),
    linear-gradient(180deg,#eef6ff,#f6f8fc 54%,#fff);
}
.spx-reset-shell{min-height:100svh;padding-top:clamp(42px,7vw,92px)}
.spx-reset-page .auth-card,
.spx-reset-page .auth-story{
  border-radius:28px;
  border:1px solid rgba(218,236,255,.12);
  background:linear-gradient(145deg,rgba(11,21,38,.80),rgba(6,12,25,.60));
  box-shadow:0 28px 90px rgba(0,0,0,.24);
}
html[data-theme="light"] .spx-reset-page .auth-card,
html[data-theme="light"] .spx-reset-page .auth-story{background:rgba(255,255,255,.82);border-color:rgba(15,23,42,.10);box-shadow:0 24px 70px rgba(22,34,64,.12)}
.spx-reset-page .auth-form label{display:grid;gap:8px;color:var(--secondary);font-weight:850}
.spx-reset-page .auth-form input{
  width:100%;
  min-height:48px;
  border:1px solid rgba(218,236,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:0 14px;
}
html[data-theme="light"] .spx-reset-page .auth-form input{background:#fff;border-color:rgba(15,23,42,.12)}
.spx-shared-file-modern .spx-fv-indexTopbar,
.spx-shared-file-modern .spx-fv-header,
.spx-shared-file-modern .spx-fv-shell,
.spx-shared-file-modern .spx-fv-card,
.spx-shared-file-modern .spx-fv-panel{
  border-color:rgba(107,232,255,.18)!important;
  background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.24)!important;
}
html[data-theme="light"] .spx-shared-file-modern .spx-fv-indexTopbar,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-header,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-shell,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-card,
html[data-theme="light"] .spx-shared-file-modern .spx-fv-panel{
  background:rgba(255,255,255,.84)!important;
  border-color:rgba(15,23,42,.10)!important;
  box-shadow:0 24px 70px rgba(22,34,64,.12)!important;
}
.spx-shared-file-modern .spx-fv-title,
.spx-shared-file-modern h1,
.spx-shared-file-modern h2,
.spx-shared-file-modern h3{color:var(--text)!important;letter-spacing:-.035em}
.spx-shared-file-modern p,
.spx-shared-file-modern .spx-fv-meta,
.spx-shared-file-modern .spx-fv-subtitle{color:var(--secondary)!important}
.spx-shared-file-modern a,
.spx-shared-file-modern button{
  border-radius:14px!important;
}
.google-btn.is-disabled{cursor:not-allowed!important;opacity:.68!important;background:rgba(255,255,255,.035)!important;color:var(--muted)!important}
.spx-update-thumb,
.spx-update-detail-hero{
  min-height:170px;
  border-radius:20px;
  border:1px solid rgba(107,232,255,.16);
  margin:-4px -4px 18px;
  background:radial-gradient(circle at 18% 18%,rgba(24,201,245,.18),transparent 48%),radial-gradient(circle at 82% 22%,rgba(37,99,235,.16),transparent 46%),linear-gradient(145deg,rgba(12,23,41,.88),rgba(6,12,24,.74));
  background-size:cover;
  background-position:center;
}
.spx-update-detail{max-width:min(980px,calc(100% - 32px));margin:clamp(48px,7vw,92px) auto}
.spx-update-detail-hero{min-height:clamp(260px,42vw,460px);margin:18px 0 26px}
.spx-update-body{display:grid;gap:12px;color:var(--secondary);line-height:1.72}
.spx-update-body h2,.spx-update-body h3{color:var(--text);margin:20px 0 6px}
.spx-update-body a{color:var(--cyan-2);font-weight:850}
.spx-product-mega .mega-menu{width:min(980px,calc(100vw - 30px));padding:18px}
.spx-product-mega .nav-panel-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spx-product-mega .nav-feature-link{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:12px!important;
  border-radius:16px!important;
}
.spx-fa{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,rgba(24,201,245,.18),rgba(37,99,235,.10));
  color:var(--cyan-2);
}
.spx-fa::before{font-weight:1000;font-size:15px}
.fa-gauge-high::before{content:"D"}.fa-wand-magic-sparkles::before{content:"B"}.fa-share-nodes::before{content:"S"}.fa-file-zipper::before{content:"ZIP";font-size:11px!important}.fa-wordpress::before{content:"W"}.fa-folder-open::before{content:"F"}.fa-list-check::before{content:"✓"}.fa-chart-line::before{content:"↗"}.fa-newspaper::before{content:"N"}.fa-life-ring::before{content:"?"}
.nav-feature-text{display:grid;gap:3px;min-width:0}
.nav-feature-text small{color:var(--muted);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.10em}
.nav-feature-text b{color:var(--text);font-size:14px}
.nav-feature-text em{color:var(--secondary);font-style:normal;font-size:12px;line-height:1.35}
.nav-feature-link>strong{
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(107,232,255,.18);
  color:var(--cyan-2);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.spx-theme-switch{
  min-height:42px!important;
  padding:5px 8px!important;
  border-radius:14px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(24,201,245,.055))!important;
  gap:8px!important;
}
.spx-theme-switch .switch-track{
  width:42px!important;
  height:24px!important;
  border-radius:999px!important;
  padding:3px!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.spx-theme-switch .switch-track i{width:16px!important;height:16px!important;border-radius:999px!important;background:linear-gradient(135deg,#19d3ff,#2563eb)!important;box-shadow:0 0 18px rgba(24,201,245,.32)!important}
html[data-theme="light"] .spx-theme-switch .switch-track i{transform:translateX(18px)!important;background:linear-gradient(135deg,#078fc2,#0ea5e9)!important}
.spx-theme-switch .switch-label{font-size:12px!important;font-weight:950!important;color:var(--secondary)!important}
.auth-card{position:relative;overflow:hidden}
.auth-card.is-auth-loading .auth-form{opacity:.72;pointer-events:none;filter:saturate(.92)}
.auth-card.is-auth-success .auth-form,.auth-card.is-auth-success>.google-btn,.auth-card.is-auth-success>.auth-links{opacity:0;transform:translateY(10px) scale(.985);pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.auth-success-orb{position:absolute;inset:22px;z-index:8;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;border-radius:24px;border:1px solid rgba(74,222,128,.24);background:radial-gradient(circle at 50% 28%,rgba(74,222,128,.24),transparent 34%),linear-gradient(180deg,rgba(5,22,16,.92),rgba(2,8,15,.88));box-shadow:0 30px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);animation:spxAuthSuccessIn .34s ease both}
.auth-success-orb span{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;background:linear-gradient(135deg,#7ee787,#22c55e);color:#052e16;font-size:30px;font-weight:1000;box-shadow:0 18px 46px rgba(34,197,94,.28)}
.auth-success-orb strong{font-size:22px;color:#f0fff6}
.auth-success-orb small{font-size:13px;font-weight:850;color:rgba(220,252,231,.72)}
@keyframes spxAuthSuccessIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
html[data-theme="light"] .auth-success-orb{background:radial-gradient(circle at 50% 28%,rgba(34,197,94,.18),transparent 34%),linear-gradient(180deg,rgba(248,255,251,.96),rgba(238,246,255,.92));border-color:rgba(22,163,74,.22)}
html[data-theme="light"] .auth-success-orb strong{color:#10231a}
html[data-theme="light"] .auth-success-orb small{color:#475467}
.nav-user-trigger{
  border-radius:16px!important;
  border:1px solid rgba(107,232,255,.20)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(24,201,245,.06))!important;
  padding:6px 10px 6px 6px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.16)!important;
}
.nav-user-trigger img{width:32px!important;height:32px!important;border-radius:12px!important}
.nav-user-dropdown{
  border-radius:18px!important;
  border:1px solid rgba(107,232,255,.18)!important;
  background:linear-gradient(145deg,rgba(8,16,30,.96),rgba(5,10,22,.94))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.26)!important;
}
html[data-theme="light"] .nav-user-dropdown{background:rgba(255,255,255,.96)!important;box-shadow:0 24px 70px rgba(22,34,64,.13)!important}
@media (max-width:900px){.spx-product-mega .nav-panel-columns{grid-template-columns:1fr}.spx-product-mega .mega-menu{width:100%;padding:12px}.spx-product-mega .nav-feature-link{grid-template-columns:34px minmax(0,1fr);}.nav-feature-link>strong{grid-column:2;width:max-content}}

/* A8.60 public completion pass: auth, support, export, pricing, roadmap and light-mode hardening */
:root{
  --spx-a860-cyan:#22d3ee;
  --spx-a860-cyan-soft:rgba(34,211,238,.14);
  --spx-a860-blue:#3b82f6;
  --spx-a860-green:#34d399;
  --spx-a860-ink:#07111f;
  --spx-a860-panel:rgba(8,13,24,.78);
  --spx-a860-line:rgba(255,255,255,.12);
  --spx-a860-text:#f8fbff;
  --spx-a860-muted:rgba(232,241,255,.74);
}
html[data-theme="light"]{
  --spx-a860-panel:rgba(255,255,255,.82);
  --spx-a860-line:rgba(11,31,51,.13);
  --spx-a860-text:#0a1424;
  --spx-a860-muted:rgba(28,44,68,.74);
}
.spx-page-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}.spx-page-cta-row .btn{min-height:46px}.btn.primary.spx-primary-action:hover,.btn.primary:hover{color:#fff!important;text-shadow:0 1px 16px rgba(255,255,255,.22)}.btn-spinner{width:1.05em;height:1.05em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:spxBtnSpin .82s linear infinite}@keyframes spxBtnSpin{to{transform:rotate(360deg)}}
/* Auth */
.auth-shell-rich{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,.78fr);gap:26px;align-items:stretch;max-width:1180px;margin:0 auto;padding:clamp(96px,10vw,138px) 22px 78px}.auth-shell-rich::before{content:"";position:absolute;inset:52px 0 30px;background:radial-gradient(circle at 18% 12%,rgba(34,211,238,.17),transparent 34%),radial-gradient(circle at 88% 18%,rgba(59,130,246,.17),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);border-radius:42px;box-shadow:0 36px 120px rgba(0,0,0,.34);pointer-events:none;z-index:-1}.auth-story,.auth-card{border:1px solid var(--spx-a860-line);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.auth-story{border-radius:34px;padding:clamp(28px,4vw,46px);display:grid;align-content:end;min-height:520px;overflow:hidden;position:relative}.auth-story::before{content:"";position:absolute;inset:auto -12% -22% 12%;height:52%;background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.24),transparent 60%);filter:blur(8px);opacity:.8}.auth-story h2{font-size:clamp(32px,4vw,62px);line-height:.98;margin:12px 0;color:var(--spx-a860-text)}.auth-story p{color:var(--spx-a860-muted);line-height:1.76;max-width:640px}.auth-story-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.auth-story-points span{padding:9px 12px;border-radius:999px;border:1px solid rgba(34,211,238,.18);background:rgba(34,211,238,.075);font-size:12px;font-weight:900;color:var(--spx-a860-text)}.auth-card{border-radius:34px;padding:clamp(24px,3vw,36px);position:relative;overflow:hidden}.auth-card h1{margin:8px 0 10px;color:var(--spx-a860-text);font-size:clamp(28px,3vw,42px)}.auth-card>p{color:var(--spx-a860-muted);line-height:1.65}.auth-form{display:grid;gap:14px;margin-top:22px}.auth-form label,.spx-public-support-form label{display:grid;gap:8px;font-size:13px;font-weight:900;color:var(--spx-a860-text)}.auth-form input,.auth-form select,.auth-form textarea,.spx-public-support-form input,.spx-public-support-form select,.spx-public-support-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--spx-a860-line);border-radius:18px;background:rgba(255,255,255,.055);color:var(--spx-a860-text);padding:14px 15px;outline:0;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .2s ease}.auth-form input:focus,.auth-form select:focus,.auth-form textarea:focus,.spx-public-support-form input:focus,.spx-public-support-form select:focus,.spx-public-support-form textarea:focus{border-color:rgba(34,211,238,.46);box-shadow:0 0 0 4px rgba(34,211,238,.10);transform:translateY(-1px)}.auth-form select option,.spx-public-support-form select option{background:#0b1221;color:#f8fbff}.auth-form small,.captcha-box p{font-size:12px;color:var(--spx-a860-muted);line-height:1.5}.auth-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px}.auth-links a{color:var(--spx-a860-text);font-weight:850;text-decoration:none;opacity:.84}.auth-links a:hover{opacity:1;color:var(--spx-a860-cyan)}.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:13px;padding:13px 16px;border-radius:18px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.045);color:var(--spx-a860-text);font-weight:900;text-decoration:none}.google-btn.is-disabled{opacity:.68}.form-status{min-height:22px;margin:2px 0 0;padding:0;color:var(--spx-a860-muted);line-height:1.5}.form-status.is-error{padding:12px 14px;border-radius:16px;border:1px solid rgba(248,113,113,.24);background:rgba(248,113,113,.10);color:#ffdada}.form-status.is-ok{padding:12px 14px;border-radius:16px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#dfffee}.auth-card.is-auth-loading .auth-form{opacity:.55;filter:saturate(.72)}.auth-card.is-auth-success .auth-form,.auth-card.is-auth-success .google-btn,.auth-card.is-auth-success .auth-links,.auth-card.is-auth-success>p{opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .28s ease,transform .28s ease}.auth-success-orb{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:10px;padding:28px;background:radial-gradient(circle at 50% 42%,rgba(52,211,153,.18),rgba(8,13,24,.90) 62%);animation:spxSuccessIn .42s cubic-bezier(.2,.8,.2,1) both}.auth-success-orb span{width:76px;height:76px;margin:0 auto 4px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#6ee7b7,#22c55e);color:#052d1b;font-size:38px;font-weight:1000;box-shadow:0 22px 62px rgba(34,197,94,.34)}.auth-success-orb strong{font-size:26px;color:#fff}.auth-success-orb small{font-size:15px;color:rgba(233,255,246,.76)}@keyframes spxSuccessIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.steps span{height:9px;border-radius:999px;background:rgba(255,255,255,.10);font-size:0}.steps span.is-active{background:linear-gradient(90deg,var(--spx-a860-cyan),var(--spx-a860-blue));box-shadow:0 0 24px rgba(34,211,238,.22)}.register-step{display:none}.register-step.is-active{display:grid;gap:14px}.legal-consent{display:flex!important;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--spx-a860-line);border-radius:18px;background:rgba(255,255,255,.04);line-height:1.55}.legal-consent input{width:auto;margin-top:3px}.conditional-source[hidden],.captcha-box[hidden]{display:none!important}.captcha-box{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;padding:13px;border:1px solid rgba(34,211,238,.18);border-radius:20px;background:rgba(34,211,238,.065)}.captcha-box img{display:block;width:100%;max-width:420px;border-radius:16px}.login-captcha-box{animation:spxCaptchaIn .24s ease both}@keyframes spxCaptchaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Support */
.spx-support-hero{overflow:hidden}.spx-support-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,.72fr);gap:24px;align-items:start;max-width:1180px;margin:0 auto;padding:46px 22px}.spx-support-copy,.spx-public-support-form,.spx-feature-content,.spx-feature-status,.spx-related-links{border:1px solid var(--spx-a860-line);background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border-radius:30px;box-shadow:0 26px 80px rgba(0,0,0,.26);backdrop-filter:blur(18px)}.spx-support-copy{padding:30px}.spx-support-copy h2{font-size:clamp(28px,3vw,44px);line-height:1.05;margin:10px 0;color:var(--spx-a860-text)}.spx-support-copy p{color:var(--spx-a860-muted);line-height:1.75}.spx-support-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}.spx-support-topic-grid article{padding:16px;border-radius:20px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.04)}.spx-support-topic-grid b{display:block;color:var(--spx-a860-text);margin-bottom:6px}.spx-support-topic-grid span{display:block;color:var(--spx-a860-muted);font-size:13px;line-height:1.55}.spx-public-support-form{padding:24px;display:grid;gap:14px}.spx-form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-public-support-form textarea{resize:vertical;min-height:154px}.support-captcha-box{background:rgba(34,211,238,.06)}
/* Export selector */
.spx-export-grid{display:flex;align-items:stretch;gap:16px;max-width:1180px;margin-left:auto;margin-right:auto}.spx-export-card{flex:1 1 0;min-width:0;cursor:pointer;position:relative;overflow:hidden;transition:flex .42s cubic-bezier(.2,.8,.2,1),transform .24s ease,border-color .24s ease,background .24s ease}.spx-export-card::after{content:"";position:absolute;inset:auto 18px 16px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--spx-a860-cyan),transparent);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .24s ease,transform .34s ease}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active){flex:.48 1 0}.spx-export-card:hover,.spx-export-card:focus-within,.spx-export-card.is-active{flex:1.82 1 0;transform:translateY(-4px);border-color:rgba(34,211,238,.30)!important;background:linear-gradient(180deg,rgba(34,211,238,.10),rgba(255,255,255,.035))!important}.spx-export-card:hover::after,.spx-export-card:focus-within::after,.spx-export-card.is-active::after{opacity:1;transform:scaleX(1)}.spx-export-card p{transition:max-height .34s ease,opacity .24s ease}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{max-height:0;overflow:hidden;opacity:0}.spx-export-icon img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(34,211,238,.20))}.spx-more-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:900;color:var(--spx-a860-cyan);text-decoration:none}.spx-more-link::after{content:"→";transition:transform .18s ease}.spx-more-link:hover::after{transform:translateX(4px)}
/* Pricing */
.spx-price-tabs{padding:8px;border:1px solid var(--spx-a860-line);border-radius:999px;background:rgba(255,255,255,.05);width:max-content;max-width:calc(100% - 32px);margin:0 auto 20px}.spx-price-tabs button{border-radius:999px}.spx-price-card{position:relative;overflow:hidden}.spx-price-card::before{content:"";position:absolute;inset:-120px -80px auto auto;width:190px;height:190px;border-radius:999px;background:radial-gradient(circle,rgba(34,211,238,.16),transparent 65%);opacity:.8}.spx-plan-status{display:inline-flex!important;width:max-content;margin-bottom:10px}.spx-price-card h3{display:inline-flex;align-items:center;gap:10px}.spx-price-card[data-price-card="free"] h3::after{content:"Always free";font-size:11px;line-height:1;padding:7px 9px;border-radius:999px;border:1px solid rgba(52,211,153,.25);background:rgba(52,211,153,.10);color:#bdfbe0}.spx-price-card ul{display:grid;gap:9px}.spx-price-card li{line-height:1.45}
/* Roadmap */
.spx-summary-roadmap{position:relative;isolation:isolate}.spx-summary-roadmap::before{content:"";position:absolute;left:50%;top:18%;bottom:12%;width:2px;background:linear-gradient(180deg,transparent,var(--spx-a860-cyan),rgba(59,130,246,.45),transparent);opacity:.42;z-index:-1}.spx-roadmap-flow{position:relative}.spx-roadmap-stage{position:relative;transition:transform .3s ease,border-color .3s ease,background .3s ease}.spx-roadmap-stage::before{content:"";position:absolute;left:50%;top:-18px;width:14px;height:14px;border-radius:50%;background:var(--spx-a860-cyan);box-shadow:0 0 0 8px rgba(34,211,238,.10),0 0 34px rgba(34,211,238,.35);transform:translateX(-50%)}.spx-roadmap-stage.is-active,.spx-roadmap-stage:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.34)!important;background:linear-gradient(180deg,rgba(34,211,238,.095),rgba(255,255,255,.025))!important}.spx-roadmap-item{transition:transform .2s ease,border-color .2s ease}.spx-roadmap-item:hover,.spx-roadmap-item.is-active{transform:translateX(4px);border-color:rgba(34,211,238,.28)!important}
/* Feature pages */
.spx-feature-hero .product-frame img{image-rendering:auto}.spx-feature-content{max-width:1120px;margin:34px auto 0;padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.35fr);gap:18px}.spx-feature-main h2,.spx-related-links h2{font-size:clamp(25px,3vw,38px);margin:8px 0;color:var(--spx-a860-text)}.spx-feature-main p,.spx-feature-status p{color:var(--spx-a860-muted);line-height:1.72}.spx-feature-status{padding:20px;background:rgba(34,211,238,.06)}.spx-feature-status b,.spx-feature-status span{display:block}.spx-feature-status span{margin:7px 0 10px;color:var(--spx-a860-cyan);font-weight:950}.spx-related-links{max-width:1120px;margin:34px auto;padding:24px}.spx-related-links div{display:flex;flex-wrap:wrap;gap:10px}.spx-related-links a{padding:10px 13px;border-radius:999px;border:1px solid var(--spx-a860-line);background:rgba(255,255,255,.04);color:var(--spx-a860-text);text-decoration:none;font-weight:900}.spx-related-links a:hover{border-color:rgba(34,211,238,.32);color:var(--spx-a860-cyan)}
/* Settings clickability safety */
.spx-settings-subtab,.spx-accountSectionLine,.spx-themeChoiceCard{position:relative;z-index:2;pointer-events:auto!important}.spx-accountPane:not(.is-active){display:none!important}.spx-accountPane.is-active{display:block}.spx-settings-page--account[data-spx-theme-local="light"]{color:#101827}.spx-settings-page--account[data-spx-theme-local="light"] input,.spx-settings-page--account[data-spx-theme-local="light"] select{color:#101827;background:#fff}.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountSubtabs,.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountPane,.spx-settings-page--account[data-spx-theme-local="light"] .spx-accountIntro{background:rgba(255,255,255,.82);border-color:rgba(13,31,52,.12)}
/* Public file route light cleanup */
html[data-theme="light"] body .spx-fv-pageShell{color:#0a1424}html[data-theme="light"] body .spx-fv-indexTopbar{background:rgba(255,255,255,.72);border-color:rgba(10,31,51,.10)}
@media (max-width:980px){.auth-shell-rich,.spx-support-layout,.spx-feature-content{grid-template-columns:1fr}.auth-story{min-height:auto}.spx-export-grid{display:grid;grid-template-columns:1fr}.spx-export-card,.spx-export-card:hover,.spx-export-card:focus-within,.spx-export-card.is-active{flex:auto;transform:none}.spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{max-height:none;opacity:1}.spx-summary-roadmap::before,.spx-roadmap-stage::before{display:none}}@media (max-width:680px){.auth-shell-rich{padding:88px 14px 42px}.auth-card,.auth-story,.spx-public-support-form,.spx-support-copy{border-radius:24px;padding:20px}.spx-form-grid.two,.spx-support-topic-grid{grid-template-columns:1fr}.spx-price-tabs{width:100%;border-radius:24px;display:grid}.spx-page-cta-row .btn{width:100%}.spx-v26-actions{align-items:stretch}.spx-v26-actions .btn{width:100%}}
.spx-password-meter{display:block;position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin:2px 0 4px}.spx-password-meter i{display:block;height:100%;width:var(--strength,8%);border-radius:inherit;background:linear-gradient(90deg,#fb7185,#fbbf24);transition:width .22s ease,background .22s ease}.spx-password-meter[data-level="medium"] i{background:linear-gradient(90deg,#fbbf24,#22d3ee)}.spx-password-meter[data-level="strong"] i{background:linear-gradient(90deg,#22d3ee,#34d399)}
.spx-faq-list{display:grid;gap:12px;margin-top:18px}.spx-faq-item{border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden}.spx-faq-item summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:950;color:var(--spx-a860-text,#f8fbff);display:flex;justify-content:space-between;gap:16px}.spx-faq-item summary::-webkit-details-marker{display:none}.spx-faq-item summary::after{content:'+';color:var(--spx-a860-cyan,#22d3ee);font-size:20px;line-height:1}.spx-faq-item[open] summary::after{content:'–'}.spx-faq-item p{margin:0;padding:0 18px 18px;color:var(--spx-a860-muted,rgba(232,241,255,.74));line-height:1.7}
.spx-roadmap-page{position:relative;max-width:1120px;margin:36px auto;padding:18px 22px 62px;display:grid;gap:20px}.spx-roadmap-page-line{position:absolute;left:50%;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,transparent,var(--spx-a860-cyan,#22d3ee),rgba(59,130,246,.45),transparent);opacity:.46}.spx-roadmap-page-stage{position:relative;display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:18px;align-items:start;padding:22px;border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 22px 70px rgba(0,0,0,.24);backdrop-filter:blur(18px);transition:transform .28s ease,border-color .28s ease}.spx-roadmap-page-stage::before{content:"";position:absolute;left:50%;top:28px;width:16px;height:16px;border-radius:50%;background:var(--spx-a860-cyan,#22d3ee);box-shadow:0 0 0 8px rgba(34,211,238,.11),0 0 34px rgba(34,211,238,.36);transform:translateX(-50%)}.spx-roadmap-page-stage:hover,.spx-roadmap-page-stage.is-active{transform:translateY(-4px);border-color:rgba(34,211,238,.32)}.spx-roadmap-page-stage header span{display:inline-flex;padding:7px 10px;border-radius:999px;border:1px solid rgba(34,211,238,.24);background:rgba(34,211,238,.09);font-size:11px;font-weight:950;color:var(--spx-a860-cyan,#22d3ee);text-transform:uppercase;letter-spacing:.08em}.spx-roadmap-page-stage h2{margin:12px 0 8px;color:var(--spx-a860-text,#f8fbff);font-size:clamp(24px,3vw,38px);line-height:1.05}.spx-roadmap-page-stage p{margin:0;color:var(--spx-a860-muted,rgba(232,241,255,.74));line-height:1.65}.spx-roadmap-page-items{display:grid;gap:10px}.spx-roadmap-page-item{display:grid;gap:5px;padding:15px 16px;border-radius:20px;border:1px solid var(--spx-a860-line,rgba(255,255,255,.12));background:rgba(255,255,255,.04);transition:transform .2s ease,border-color .2s ease}.spx-roadmap-page-item:hover{transform:translateX(5px);border-color:rgba(34,211,238,.30)}.spx-roadmap-page-item b{color:var(--spx-a860-text,#f8fbff)}.spx-roadmap-page-item span{color:var(--spx-a860-muted,rgba(232,241,255,.74));font-size:13px;line-height:1.5}@media(max-width:860px){.spx-roadmap-page-line,.spx-roadmap-page-stage::before{display:none}.spx-roadmap-page-stage{grid-template-columns:1fr}}

/* A8.61 visual-flow rework: homepage motion, nav menus, auth, support, pricing and shared-file polish. */
.site-header.spx-nav-v26{z-index:1200!important}
.spx-product-menu-v61 .mega-menu{width:min(760px,calc(100vw - 28px))!important;padding:16px!important;gap:14px!important}
.spx-product-menu-v61 .nav-panel-lead{padding:14px 14px 12px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(24,201,245,.10),rgba(255,255,255,.035))!important}
.spx-mega-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spx-product-menu-v61 .nav-feature-link{min-height:68px!important;padding:11px!important;border-radius:15px!important;grid-template-columns:36px minmax(0,1fr) auto!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(218,236,255,.10)!important}
.spx-product-menu-v61 .nav-feature-link.is-primary{grid-column:1/-1;min-height:76px!important;background:linear-gradient(135deg,rgba(24,201,245,.12),rgba(37,99,235,.08))!important;border-color:rgba(107,232,255,.22)!important}
.spx-mega-secondary-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:4px}
.spx-mega-secondary-row a,.spx-resource-list a{display:grid;gap:4px;border:1px solid rgba(218,236,255,.10);border-radius:14px;padding:10px 12px;text-decoration:none;background:rgba(255,255,255,.03);color:var(--text)}
.spx-mega-secondary-row span,.spx-resource-list i{justify-self:start;border-radius:999px;padding:4px 7px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:10px;font-style:normal;font-weight:950;text-transform:uppercase;letter-spacing:.08em}
.spx-resource-menu-v61 .mega-menu{width:min(520px,calc(100vw - 28px))!important;padding:16px!important}
.spx-resource-list{display:grid;gap:8px}.spx-resource-list span{color:var(--secondary);font-size:12px}.nav-updates-link{position:relative}.nav-updates-link::before{content:"";width:7px;height:7px;border-radius:999px;background:#45e6a8;box-shadow:0 0 16px rgba(69,230,168,.7);margin-right:5px;display:inline-block;vertical-align:middle}

/* Hero/What: prevent the builder view from drifting down below the public nav. */
html .spx-hero-v26[data-hero-scrollstory]{--spx-hero-product-fold-y:0px!important;--spx-hero-product-fold-scale-y:1!important;--spx-v26-y:0px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{top:clamp(128px,15.5vh,172px)!important;width:min(1060px,calc(100vw - 68px))!important;transform:translate3d(-50%,0,0)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{min-height:clamp(560px,64vh,700px)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.90))!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before,html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after{display:none!important;content:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{position:absolute!important;left:22px!important;right:22px!important;top:18px!important;width:min(680px,calc(100% - 44px))!important;height:auto!important;max-height:50px!important;object-fit:contain!important;object-position:left center!important;z-index:8!important;border-radius:14px!important;box-shadow:0 16px 46px rgba(0,0,0,.24)!important;background:rgba(3,8,18,.42)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{padding:clamp(96px,10vw,126px) clamp(28px,6vw,82px) clamp(36px,5vw,62px)!important;align-items:end!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{max-width:850px!important;margin-top:60px!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(238,246,255,.96))!important}

/* How Spixor Works: remove flicker/blank tail and hold step 3 longer. */
html .spx-why-section.spx-why-v52{margin-top:-72svh!important;padding-top:18svh!important;margin-bottom:0!important;opacity:1!important;overflow:visible!important;--v61-how-intro:1;--v61-how-steps:0;--v61-how-exit:0}
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(4200px,560svh,5600px)!important}
html .spx-why-section.spx-why-v52 .spx-why52-sticky{padding:clamp(72px,10vh,116px) 0!important;opacity:calc(1 - var(--v61-how-exit,0))!important;transform:none!important;filter:none!important}
html .spx-why-section.spx-why-v52 .spx-why52-copy{opacity:1!important;transform:none!important;filter:none!important}
html .spx-why-section.spx-why-v52 .spx-why52-story-head{opacity:var(--v61-how-intro,1)!important;transform:translate3d(0,calc((1 - var(--v61-how-intro,1)) * -14px),0)!important;transition:none!important}
html .spx-why-section.spx-why-v52 .why52-step-stack{position:relative;min-height:430px;opacity:var(--v61-how-steps,0)!important}
html .spx-why-section.spx-why-v52 .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(620px,100%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,18px,0)!important;transition:opacity .36s ease,transform .36s ease!important}
html .spx-why-section.spx-why-v52 .why52-step.is-active,html .spx-why-section.spx-why-v52 .why52-step[data-spx-active="1"]{opacity:var(--v61-how-steps,1)!important;visibility:visible!important;transform:translate3d(0,0,0)!important}
html .spx-why-section.spx-why-v52 .why52-visual{transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1),filter .48s ease!important}
html .spx-why-section.spx-why-v52 .why52-visual img{max-width:min(760px,54vw)!important;transform-origin:right center!important}
html .spx-why-section.spx-why-v52 .why52-visual-card{max-width:390px!important}

/* Dashboard story: fullscreen, controlled and readable. */
.spx-dashboard-command-v61{width:100vw!important;max-width:none!important;margin:0 0 clamp(72px,8vw,120px) calc(50% - 50vw)!important;min-height:420svh!important;display:block!important;position:relative!important;overflow:clip!important;--dash-focus:0;--dash-copy-opacity:1}
.spx-dashboard-command-v61 .spx-dash-visual{position:sticky!important;top:72px!important;height:calc(100svh - 72px)!important;display:grid!important;place-items:center!important;align-items:center!important;overflow:hidden!important;z-index:20!important}
.spx-dashboard-command-v61 .spx-dash-frame{position:relative!important;top:auto!important;width:min(1520px,96vw)!important;max-width:none!important;margin:0!important;transform:none!important;transform-origin:center!important;border-radius:28px!important;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)!important}
.spx-dashboard-command-v61 .spx-dash-frame img{aspect-ratio:16/9!important;object-fit:cover!important;transition:opacity .46s ease!important}
.spx-dashboard-command-v61 .spx-dash-copy{position:sticky!important;top:calc(72px + 7vh)!important;z-index:80!important;width:min(430px,calc(100vw - 34px))!important;margin:-82svh clamp(18px,4vw,72px) 0 auto!important;transform:none!important;opacity:var(--dash-copy-opacity,1)!important;background:linear-gradient(145deg,rgba(7,16,32,.88),rgba(4,10,22,.74))!important;backdrop-filter:blur(18px) saturate(145%)!important}
html[data-theme="light"] .spx-dashboard-command-v61 .spx-dash-copy{background:rgba(255,255,255,.84)!important}
.spx-dashboard-command-v61 .spx-dash-callout{z-index:9!important}.spx-dashboard-command-v61.is-switching .spx-dash-frame img{opacity:.22!important}

/* Export selector: softer selected state instead of harsh hover collapse. */
.spx-export-section-v61 .spx-export-grid,.spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),.spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;transition:none!important}
.spx-export-section-v61 .spx-export-card{min-height:250px!important;cursor:pointer!important;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s ease,box-shadow .45s ease,background .45s ease!important}
.spx-export-section-v61 .spx-export-card:not(.is-active){opacity:.82;transform:translateY(0) scale(.985)!important}
.spx-export-section-v61 .spx-export-card.is-active{opacity:1;transform:translateY(-4px) scale(1.018)!important;border-color:rgba(107,232,255,.44)!important;box-shadow:0 28px 92px rgba(0,0,0,.24),0 0 36px rgba(24,201,245,.13)!important;background:linear-gradient(145deg,rgba(12,26,49,.84),rgba(6,12,24,.66))!important}
.spx-export-section-v61 .spx-export-grid .spx-export-card p,.spx-export-section-v61 .spx-export-grid .spx-export-card .spx-more-link{opacity:1!important;max-height:none!important;margin-top:16px!important;pointer-events:auto!important;overflow:visible!important}
.spx-export-section-v61 .spx-export-icon{color:#eaffff!important;background:linear-gradient(135deg,rgba(24,201,245,.16),rgba(37,99,235,.10))!important;border:1px solid rgba(107,232,255,.22)!important;box-shadow:0 14px 34px rgba(0,0,0,.16)!important}
.spx-export-section-v61 .spx-export-icon img{filter:none!important;color:currentColor!important;object-fit:contain!important}

/* Pricing: no tabs, icon/status in one row, professional list marks. */
.spx-pricing-section-v61 .spx-price-tabs{display:none!important}.spx-pricing-section-v61 .spx-price-grid{align-items:stretch!important}.spx-pricing-section-v61 .spx-plan-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.spx-pricing-section-v61 .spx-plan-icon{margin:0!important}.spx-pricing-section-v61 .spx-plan-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.spx-pricing-section-v61 .spx-plan-status{margin:0!important;align-self:center!important}.spx-pricing-section-v61 .spx-price-card li{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start}.spx-pricing-section-v61 .spx-price-card li::before{content:""!important;width:18px;height:18px;margin:2px 0 0!important;border-radius:999px;background:linear-gradient(135deg,rgba(69,230,168,.95),rgba(24,201,245,.9));box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 22px rgba(24,201,245,.18);content:"✓"!important;color:#021017;font-size:12px;font-weight:1000;display:grid;place-items:center;line-height:1}.spx-pricing-section-v61 .spx-price-card p b{color:var(--cyan-2)}

/* Roadmap rework. */
.spx-summary-roadmap-v61{grid-template-columns:.86fr 1.14fr!important;align-items:center!important}.spx-roadmap-orbit-v61{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px;border:1px solid rgba(107,232,255,.14);border-radius:30px;background:radial-gradient(ellipse at center,rgba(24,201,245,.08),transparent 68%)}.spx-roadmap-orbit-v61::before{content:"";position:absolute;inset:18px;border:1px solid rgba(107,232,255,.15);border-radius:50%;transform:rotate(-8deg);pointer-events:none}.spx-roadmap-orbit-card{position:relative;z-index:2;min-height:230px;border:1px solid rgba(218,236,255,.12);border-radius:24px;padding:22px;background:linear-gradient(145deg,rgba(12,23,41,.76),rgba(6,12,24,.58));box-shadow:0 22px 70px rgba(0,0,0,.20);transition:transform .34s var(--ease),border-color .34s var(--ease)}.spx-roadmap-orbit-card.is-active,.spx-roadmap-orbit-card:hover{transform:translateY(-5px);border-color:rgba(107,232,255,.38)}.spx-roadmap-orbit-card span,.spx-roadmap-phase-marker b{display:grid;place-items:center;width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,rgba(24,201,245,.18),rgba(37,99,235,.10));color:var(--cyan-2);font-weight:1000}.spx-roadmap-orbit-card h3{font-size:24px;line-height:1.08;color:var(--text);margin:22px 0 10px}.spx-roadmap-orbit-card p{color:var(--secondary);line-height:1.55}.spx-roadmap-hero-v61{width:min(1180px,calc(100% - 32px));margin:clamp(56px,8vw,110px) auto 28px;text-align:left}.spx-roadmap-hero-v61 h1{font-size:clamp(44px,7vw,86px);line-height:.95;letter-spacing:-.065em;color:var(--text);max-width:980px}.spx-roadmap-hero-v61 p{font-size:clamp(17px,1.7vw,22px);color:var(--secondary);line-height:1.6;max-width:790px}.spx-roadmap-board-v61{position:relative;width:min(1180px,calc(100% - 32px));margin:0 auto clamp(72px,9vw,130px);display:grid;gap:20px}.spx-roadmap-rail-v61{position:absolute;left:30px;top:20px;bottom:20px;width:3px;background:linear-gradient(180deg,var(--cyan-2),rgba(37,99,235,.3),rgba(69,230,168,.5));border-radius:999px;opacity:.65}.spx-roadmap-phase-v61{position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;padding:22px;border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(12,23,41,.72),rgba(6,12,24,.50));box-shadow:0 24px 80px rgba(0,0,0,.18)}.spx-roadmap-phase-marker{display:grid;align-content:start;gap:12px}.spx-roadmap-phase-marker span{color:var(--cyan-2);font-weight:1000}.spx-roadmap-phase-content h2{margin:0 0 8px;color:var(--text);font-size:clamp(28px,4vw,48px);letter-spacing:-.045em}.spx-roadmap-phase-content>p{margin:0 0 16px;color:var(--secondary);font-size:18px}.spx-roadmap-task-grid-v61{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-roadmap-task-v61{border:1px solid rgba(107,232,255,.12);border-radius:18px;padding:15px;background:rgba(255,255,255,.035)}.spx-roadmap-task-v61 span{display:inline-flex;margin-bottom:8px;border-radius:999px;padding:5px 8px;background:rgba(24,201,245,.10);color:var(--cyan-2);font-size:10px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.spx-roadmap-task-v61 b{display:block;color:var(--text);font-size:16px}.spx-roadmap-task-v61 p{color:var(--secondary);line-height:1.5;margin:6px 0 0}

/* Auth rework. */
.auth-shell-v61{min-height:calc(100svh - 92px)!important;padding:clamp(32px,5vw,64px) var(--side)!important;gap:18px!important}.auth-shell-v61 .auth-story,.auth-shell-v61 .auth-card{border-radius:28px!important;background:linear-gradient(145deg,rgba(11,21,38,.82),rgba(6,12,25,.66))!important;border:1px solid rgba(107,232,255,.14)!important;box-shadow:0 24px 80px rgba(0,0,0,.22)!important}.auth-shell-v61 .auth-story{padding:clamp(22px,3vw,34px)!important}.auth-shell-v61 .auth-card{padding:clamp(24px,3.2vw,40px)!important}.auth-shell-v61 .auth-card h1,.auth-shell-v61 .auth-story h2{font-size:clamp(34px,4.6vw,58px)!important}.auth-shell-v61 .auth-form input,.auth-shell-v61 .auth-form select,.auth-shell-v61 .auth-form textarea,.auth-shell-v61 .register-step select{border-radius:14px!important;background:rgba(255,255,255,.055)!important;border-color:rgba(218,236,255,.13)!important}.auth-register-v61.is-form-focus{grid-template-columns:minmax(320px,760px)!important;place-content:center!important}.auth-register-v61.is-form-focus .auth-story{display:none!important}.auth-register-v61.is-form-focus .register-card{width:min(760px,100%)!important}.auth-register-v61 .spx-form-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.spx-reset-page .spx-reset-shell{min-height:calc(100svh - 78px)!important;grid-template-columns:minmax(320px,620px)!important;place-content:center!important;padding:clamp(28px,5vw,62px) var(--side)!important}.spx-reset-page .auth-story{display:none!important}.spx-reset-page .auth-card{width:min(620px,100%)!important}.spx-auth-mini-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(1180px,calc(100% - 32px));margin:18px auto 0}.spx-auth-mini-nav a{color:var(--text);text-decoration:none;font-weight:900}.spx-auth-mini-nav .brand-link{display:flex;align-items:center;gap:10px}.spx-auth-mini-nav img{width:38px;height:38px;border-radius:999px}

/* Support rework. */
.spx-support-hero-v61,.spx-support-workspace-v61,.spx-support-faq-v61{width:min(1180px,calc(100% - 32px));margin:clamp(52px,7vw,100px) auto}.spx-support-hero-v61{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:24px;align-items:stretch}.spx-support-hero-v61>div,.spx-support-hero-v61 aside,.spx-support-copy-v61,.spx-public-support-form-v61{border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58));box-shadow:0 24px 80px rgba(0,0,0,.20);padding:clamp(24px,4vw,46px)}.spx-support-hero-v61 h1{font-size:clamp(44px,7vw,84px);line-height:.95;letter-spacing:-.065em;color:var(--text);margin:12px 0}.spx-support-hero-v61 p,.spx-support-copy-v61 p{color:var(--secondary);font-size:clamp(16px,1.5vw,20px);line-height:1.65}.spx-support-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.spx-support-hero-v61 aside{display:grid;align-content:center;gap:10px}.spx-support-hero-v61 aside b{font-size:22px;color:var(--text)}.spx-support-hero-v61 aside span{border:1px solid rgba(107,232,255,.13);border-radius:16px;padding:12px 14px;color:var(--secondary);background:rgba(255,255,255,.035)}.spx-support-workspace-v61{display:grid;grid-template-columns:.9fr 1.1fr;gap:22px;align-items:start}.spx-public-support-form-v61{display:grid;gap:14px}.spx-public-support-form-v61 label{display:grid;gap:8px;color:var(--secondary);font-weight:850}.spx-public-support-form-v61 input,.spx-public-support-form-v61 select,.spx-public-support-form-v61 textarea{width:100%;border-radius:15px;border:1px solid rgba(218,236,255,.13);background:rgba(255,255,255,.055);color:var(--text);padding:13px 14px;outline:0}.spx-support-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}.spx-support-topic-grid article{border:1px solid rgba(107,232,255,.12);border-radius:18px;padding:15px;background:rgba(255,255,255,.035)}.spx-support-topic-grid b{display:block;color:var(--text);margin-bottom:6px}.spx-support-topic-grid span{color:var(--secondary);font-size:14px;line-height:1.5}.spx-support-faq-v61{padding:clamp(24px,4vw,44px);border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50))}

/* Updates and public file surfaces. */
.spx-updates-grid .spx-update-card,.spx-update-detail{border:1px solid rgba(218,236,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(11,21,38,.76),rgba(6,12,25,.56));padding:clamp(20px,3vw,34px);box-shadow:0 24px 80px rgba(0,0,0,.20)}.spx-update-detail{max-width:min(1040px,calc(100% - 32px))!important}.spx-update-detail h1{font-size:clamp(42px,6vw,76px);line-height:.95;letter-spacing:-.06em}.spx-shared-file-modern .spx-fv-pageShell::before{background:radial-gradient(720px 420px at 78% 12%,rgba(24,201,245,.16),transparent 70%),radial-gradient(620px 380px at 12% 34%,rgba(37,99,235,.14),transparent 72%),linear-gradient(180deg,#050711,#070a12 54%,#0b1020)!important;filter:none!important;opacity:1!important;transform:none!important}.spx-shared-file-modern #spxScene{display:none!important}.spx-shared-file-modern .spx-fv-pageShell::after{background:radial-gradient(circle at 50% 50%,rgba(24,201,245,.16),rgba(37,99,235,.06) 46%,transparent 70%)!important}.spx-shared-file-modern .spx-fv-indexTopbar{background:rgba(5,10,22,.74)!important;border-color:rgba(107,232,255,.14)!important}.spx-shared-file-modern .spx-fv-root{margin-top:34px!important}.spx-shared-file-modern .spx-fv-header{border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;padding:clamp(22px,3vw,34px)!important;background:linear-gradient(145deg,rgba(11,21,38,.78),rgba(6,12,25,.58))!important;box-shadow:0 24px 80px rgba(0,0,0,.20)!important}.spx-shared-file-modern .spx-fv-main-grid{gap:22px!important}.spx-shared-file-modern .spx-preview-shell-block,.spx-shared-file-modern .spx-fv-sidebar,.spx-shared-file-modern .spx-fv-panel{border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;background:linear-gradient(145deg,rgba(11,21,38,.72),rgba(6,12,25,.50))!important;box-shadow:0 24px 80px rgba(0,0,0,.18)!important}
html[data-theme="light"] .spx-support-hero-v61>div,html[data-theme="light"] .spx-support-hero-v61 aside,html[data-theme="light"] .spx-support-copy-v61,html[data-theme="light"] .spx-public-support-form-v61,html[data-theme="light"] .spx-support-faq-v61,html[data-theme="light"] .spx-roadmap-phase-v61,html[data-theme="light"] .spx-roadmap-orbit-card,html[data-theme="light"] .spx-updates-grid .spx-update-card,html[data-theme="light"] .spx-update-detail,html[data-theme="light"] .auth-shell-v61 .auth-card,html[data-theme="light"] .auth-shell-v61 .auth-story{background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 70px rgba(22,34,64,.12)!important}
@media (max-width:980px){.spx-mega-compact-grid,.spx-mega-secondary-row,.spx-support-hero-v61,.spx-support-workspace-v61,.spx-summary-roadmap-v61,.spx-roadmap-orbit-v61,.spx-roadmap-phase-v61{grid-template-columns:1fr!important}.spx-product-menu-v61 .mega-menu,.spx-resource-menu-v61 .mega-menu{width:auto!important}.spx-dashboard-command-v61{min-height:auto!important;width:min(100% - 24px,1180px)!important;margin:56px auto!important;overflow:visible!important}.spx-dashboard-command-v61 .spx-dash-visual{position:relative!important;top:auto!important;height:auto!important}.spx-dashboard-command-v61 .spx-dash-copy{position:relative!important;top:auto!important;margin:18px 0 0!important;width:100%!important}.spx-export-section-v61 .spx-export-grid,.spx-pricing-section-v61 .spx-price-grid{grid-template-columns:1fr!important}.spx-auth-mini-nav{margin-top:12px}.auth-shell-v61,.auth-register-v61.is-form-focus{grid-template-columns:1fr!important}.auth-register-v61 .spx-form-grid.two,.spx-support-topic-grid,.spx-roadmap-task-grid-v61{grid-template-columns:1fr!important}html .spx-why-section.spx-why-v52{margin-top:0!important;padding-top:0!important}.spx-roadmap-rail-v61{display:none}}
@media (max-width:640px){html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{width:calc(100% - 28px)!important;left:14px!important;right:14px!important}.spx-support-hero-actions{display:grid}.spx-roadmap-hero-v61,.spx-roadmap-board-v61,.spx-support-hero-v61,.spx-support-workspace-v61,.spx-support-faq-v61{width:min(100% - 24px,1180px)}}

/* A8.61.1 final smoothing overrides. */
html .spx-why-section.spx-why-v52 .spx-why52-track{height:clamp(3800px,500svh,5000px)!important;min-height:0!important}
.spx-dashboard-command-v61 .spx-dash-frame{isolation:isolate!important;overflow:hidden!important}
.spx-dashboard-command-v61 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;z-index:3!important;opacity:1!important;transition:opacity .48s ease,transform .54s cubic-bezier(.2,.8,.2,1)!important;pointer-events:none!important}
.spx-dashboard-command-v61 .spx-dash-fade-ghost.is-fading{opacity:0!important;transform:scale(1.012)!important}
.spx-dashboard-command-v61 .spx-dash-frame .spx-dash-image{position:relative!important;z-index:2!important}
.spx-dashboard-command-v61.is-switching .spx-dash-frame img.spx-dash-image{opacity:1!important}
.spx-export-section-v61 .spx-export-card .spx-export-icon img{width:32px!important;height:32px!important;object-fit:contain!important;display:block!important}
.spx-export-section-v61 .spx-export-card:not(.is-active) .spx-more-link{opacity:.78!important}
.spx-export-section-v61 .spx-export-card:focus-visible{outline:3px solid rgba(24,201,245,.45)!important;outline-offset:5px!important}
.spx-forgot-v61{grid-template-columns:minmax(320px,620px)!important;place-content:center!important;min-height:calc(100svh - 92px)!important}.spx-forgot-v61 .auth-card{width:min(620px,100%)!important}

/* A8.62 targeted visual repair: homepage scroll sections, export cards, roadmap, auth and public support. */
html .spx-scroll-top{position:fixed!important;right:clamp(18px,2.2vw,34px)!important;bottom:clamp(18px,2.2vw,34px)!important;z-index:1500!important;width:52px!important;height:52px!important;border-radius:999px!important;display:grid!important;place-items:center!important;border:1px solid rgba(107,232,255,.35)!important;background:linear-gradient(145deg,rgba(8,20,37,.92),rgba(4,12,25,.88))!important;color:#eafcff!important;box-shadow:0 18px 54px rgba(0,0,0,.34),0 0 28px rgba(34,211,238,.18)!important;opacity:0!important;pointer-events:none!important;transform:translate3d(0,14px,0) scale(.94)!important;transition:opacity .26s ease,transform .26s ease,border-color .26s ease,background .26s ease!important}
html .spx-scroll-top.is-visible{opacity:1!important;pointer-events:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-scroll-top:hover{border-color:rgba(107,232,255,.72)!important;background:linear-gradient(145deg,rgba(23,181,255,.92),rgba(37,99,235,.88))!important}
html[data-theme="light"] .spx-scroll-top{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,244,255,.93))!important;color:#06334a!important;box-shadow:0 18px 44px rgba(15,23,42,.16)!important}

/* What is Spixor: topbar sits above the builder canvas, not inside the content card. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{top:clamp(130px,16vh,184px)!important;left:50%!important;width:min(1080px,calc(100vw - 64px))!important;transform:translate3d(-50%,0,0)!important;filter:none!important;will-change:opacity!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{position:relative!important;display:flex!important;flex-direction:column!important;gap:14px!important;min-height:clamp(560px,65vh,720px)!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{position:relative!important;top:auto!important;left:auto!important;right:auto!important;z-index:12!important;width:min(760px,calc(100% - 56px))!important;max-height:58px!important;margin:0 0 -2px 28px!important;display:block!important;object-fit:contain!important;object-position:left center!important;border-radius:18px!important;background:linear-gradient(180deg,rgba(7,15,30,.92),rgba(4,9,18,.86))!important;border:1px solid rgba(107,232,255,.18)!important;box-shadow:0 18px 52px rgba(0,0,0,.32),0 0 30px rgba(34,211,238,.08)!important;transform:none!important;filter:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{position:relative!important;flex:1!important;min-height:0!important;padding:clamp(34px,5vw,64px)!important;border-radius:30px!important;background:radial-gradient(720px 420px at 24% 0%,rgba(34,211,238,.15),transparent 65%),linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.92))!important;border:1px solid rgba(107,232,255,.16)!important;box-shadow:0 34px 120px rgba(0,0,0,.48)!important;overflow:hidden!important;align-items:center!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page::before{content:""!important;position:absolute!important;inset:18px!important;border-radius:24px!important;border:1px solid rgba(255,255,255,.06)!important;pointer-events:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{position:relative!important;z-index:2!important;max-width:920px!important;margin:0!important;border-radius:26px!important;padding:clamp(22px,3vw,34px)!important;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045))!important;border:1px solid rgba(218,236,255,.13)!important;box-shadow:0 24px 80px rgba(0,0,0,.26)!important;backdrop-filter:blur(14px)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{gap:10px!important;margin-bottom:18px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{font-size:clamp(24px,4vw,46px)!important;line-height:1.02!important;letter-spacing:-.045em!important;color:var(--text)!important;max-width:760px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{font-size:clamp(15px,1.2vw,18px)!important;line-height:1.65!important;color:var(--secondary)!important;max-width:620px!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;margin:18px 0!important;padding:12px 14px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(245,184,91,.16),rgba(34,211,238,.08))!important;border:1px solid rgba(245,184,91,.22)!important;color:rgba(255,247,228,.88)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice b{white-space:nowrap!important;color:#ffd796!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.1em!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{font-size:13px!important;line-height:1.45!important;color:rgba(247,252,255,.82)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{white-space:nowrap!important;color:#9eeeff!important;font-weight:950!important;text-decoration:none!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{background:radial-gradient(720px 420px at 24% 0%,rgba(14,165,233,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,246,255,.94))!important;box-shadow:0 34px 100px rgba(15,23,42,.16)!important;border-color:rgba(15,23,42,.12)!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card{background:rgba(255,255,255,.74)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 70px rgba(15,23,42,.12)!important}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice span{color:rgba(15,23,42,.72)!important}

/* How Spixor Works: stable v62 pinned story, no flickering intro loop and no long blank tail. */
html .spx-why-section.spx-why-v52{margin:0!important;padding:clamp(52px,7vw,88px) 0!important;background:transparent!important;min-height:auto!important;overflow:clip!important}
html .spx-why52-shell{width:min(1280px,calc(100% - 40px))!important;margin:0 auto!important}
html .spx-why52-track{height:clamp(1320px,250vh,2100px)!important;min-height:0!important;position:relative!important}
html .spx-why52-sticky{position:sticky!important;top:clamp(76px,10vh,110px)!important;min-height:calc(100svh - 130px)!important;display:grid!important;grid-template-columns:minmax(340px,.88fr) minmax(420px,1.12fr)!important;gap:clamp(24px,4vw,58px)!important;align-items:center!important;opacity:1!important;transform:none!important;filter:none!important}
html .spx-why52-copy{position:relative!important;display:grid!important;gap:18px!important;min-height:560px!important;align-content:center!important}
html .spx-why52-story-head{position:relative!important;opacity:calc(1 - var(--how-v62-steps,0))!important;transform:translate3d(0,calc(-12px * var(--how-v62-steps,0)),0)!important;transition:opacity .18s linear!important;pointer-events:none!important}
html .spx-why52-story-head h2{font-size:clamp(40px,6vw,78px)!important;line-height:.95!important;letter-spacing:-.06em!important;margin:12px 0!important;color:var(--text)!important}
html .spx-why52-story-head p{font-size:clamp(16px,1.5vw,21px)!important;line-height:1.62!important;color:var(--secondary)!important;max-width:620px!important}
html .why52-step-nav{position:absolute!important;top:0!important;left:0!important;display:flex!important;gap:10px!important;opacity:var(--how-v62-steps,0)!important;transform:translateY(calc(8px * (1 - var(--how-v62-steps,0))))!important;z-index:4!important}
html .why52-step-stack{position:absolute!important;inset:86px 0 0 0!important;min-height:430px!important;display:block!important;opacity:var(--how-v62-steps,0)!important;z-index:3!important}
html .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(100%,620px)!important;min-height:430px!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,24px,0)!important;transition:opacity .28s ease,transform .28s ease,visibility .28s ease!important;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:28px!important;padding:clamp(22px,3vw,34px)!important;box-shadow:0 22px 80px rgba(0,0,0,.22)!important;backdrop-filter:blur(16px)!important}
html .why52-step.is-active,html .why52-step[data-v62-active="1"]{opacity:var(--how-v62-steps,1)!important;visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0)!important}
html .why52-step h3{font-size:clamp(25px,3.2vw,44px)!important;line-height:1.05!important;letter-spacing:-.04em!important;color:var(--text)!important;margin:16px 0 12px!important}
html .why52-step p,html .why52-step ul{opacity:1!important;max-height:none!important;visibility:visible!important;color:var(--secondary)!important}
html .why52-progress{display:block!important;height:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#22d3ee,#2563eb)!important;transform-origin:left center!important;transform:scaleX(var(--how-v62-local,.1))!important;margin:14px 0!important}
html .spx-why52-stage{position:relative!important;height:min(70vh,680px)!important;min-height:540px!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
html .why52-network{position:absolute!important;inset:0!important;opacity:.32!important;filter:drop-shadow(0 0 22px rgba(34,211,238,.16))!important}
html .why52-visuals{position:absolute!important;inset:0!important;overflow:visible!important;perspective:1200px!important}
html .why52-visual{position:absolute!important;inset:0!important;margin:0!important;display:grid!important;place-items:center!important;opacity:0!important;visibility:hidden!important;transform:translate3d(16vw,24px,0) scale(.96)!important;transition:opacity .34s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility .34s ease!important;filter:none!important;pointer-events:none!important}
html .why52-visual.is-active,html .why52-visual[data-v62-active="1"]{opacity:var(--how-v62-steps,1)!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important}
html .why52-visual img{max-width:min(760px,54vw)!important;max-height:58vh!important;object-fit:contain!important;border-radius:26px!important;box-shadow:0 36px 120px rgba(0,0,0,.42)!important;filter:none!important}
html .why52-visual-card{position:absolute!important;left:clamp(16px,4vw,58px)!important;bottom:clamp(14px,4vh,42px)!important;width:min(420px,calc(100% - 32px))!important;border-radius:22px!important;padding:18px 20px!important;background:rgba(5,12,24,.74)!important;border:1px solid rgba(107,232,255,.18)!important;backdrop-filter:blur(14px)!important;box-shadow:0 20px 70px rgba(0,0,0,.28)!important}
html .why52-visual-card p{color:rgba(232,241,255,.74)!important;line-height:1.55!important;margin:8px 0 0!important}

/* Full-screen dashboard command center. */
html .spx-dashboard-command-v61{position:relative!important;width:100vw!important;max-width:none!important;margin:0 calc(50% - 50vw)!important;padding:0!important;min-height:240svh!important;border:0!important;border-radius:0!important;background:linear-gradient(180deg,rgba(3,7,16,.1),rgba(3,7,16,.72) 45%,rgba(3,7,16,.08))!important;overflow:visible!important;display:block!important;box-shadow:none!important}
html .spx-dashboard-command-v61::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(900px 520px at 78% 20%,rgba(34,211,238,.14),transparent 65%),radial-gradient(720px 420px at 12% 58%,rgba(37,99,235,.10),transparent 62%)!important;pointer-events:none!important}
html .spx-dashboard-command-v61 .spx-dash-visual{position:sticky!important;top:0!important;height:100svh!important;width:100vw!important;margin:0!important;display:block!important;z-index:1!important;overflow:hidden!important}
html .spx-dashboard-command-v61 .spx-dash-frame{position:absolute!important;inset:clamp(72px,8vh,96px) clamp(18px,3vw,48px) clamp(28px,4vh,48px)!important;margin:0!important;border-radius:34px!important;overflow:hidden!important;border:1px solid rgba(107,232,255,.18)!important;background:#060b16!important;box-shadow:0 44px 150px rgba(0,0,0,.48)!important}
html .spx-dashboard-command-v61 .spx-dash-frame img,html .spx-dashboard-command-v61 [data-dashboard-image]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;filter:none!important;transform:scale(calc(1 + var(--dash-focus,0) * .018))!important;transition:opacity .52s ease,transform .58s ease!important}
html .spx-dashboard-command-v61 .spx-dash-copy{position:sticky!important;top:clamp(105px,13vh,142px)!important;z-index:5!important;width:min(470px,calc(100vw - 42px))!important;margin:-100svh 0 0 clamp(20px,5vw,82px)!important;padding:clamp(20px,2.5vw,30px)!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(5,12,24,.78),rgba(3,7,16,.68))!important;border:1px solid rgba(107,232,255,.18)!important;box-shadow:0 30px 110px rgba(0,0,0,.42)!important;backdrop-filter:blur(18px)!important;color:var(--text)!important;min-height:auto!important}
html .spx-dashboard-command-v61 .spx-dash-copy h2{font-size:clamp(34px,4.2vw,58px)!important;line-height:1!important;letter-spacing:-.05em!important;margin:10px 0 12px!important}
html .spx-dashboard-command-v61 .spx-dash-copy p{color:rgba(232,241,255,.78)!important;line-height:1.6!important}
html .spx-dashboard-command-v61 .spx-dash-tabs{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:18px 0!important}
html .spx-dashboard-command-v61 .spx-dash-tabs button{display:flex!important;align-items:center!important;gap:12px!important;justify-content:flex-start!important;padding:10px 12px!important;border-radius:16px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;color:rgba(232,241,255,.76)!important;transition:background .25s ease,border-color .25s ease,transform .25s ease!important}
html .spx-dashboard-command-v61 .spx-dash-tabs button.is-active,html .spx-dashboard-command-v61 .spx-dash-tabs button.active{background:rgba(34,211,238,.12)!important;border-color:rgba(34,211,238,.34)!important;color:#effdff!important;transform:translateX(4px)!important}
html .spx-dashboard-command-v61 .spx-dash-panel{display:none!important}.spx-dashboard-command-v61 .spx-dash-panel.is-active,.spx-dashboard-command-v61 .spx-dash-panel.active{display:block!important}.spx-dashboard-command-v61 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;z-index:3!important;opacity:1!important;transition:opacity .7s ease!important}.spx-dashboard-command-v61 .spx-dash-fade-ghost.is-fading{opacity:0!important}

/* Export-first workflow v62: calm cards, colorable icons, no black img icons. */
html .spx-export-section-v61{width:min(1220px,calc(100% - 40px))!important;margin:clamp(70px,9vw,120px) auto!important;border-radius:36px!important;padding:clamp(26px,4vw,54px)!important;background:radial-gradient(800px 360px at 18% 0%,rgba(34,211,238,.12),transparent 64%),linear-gradient(180deg,rgba(8,15,29,.78),rgba(4,8,18,.64))!important;border:1px solid rgba(218,236,255,.11)!important;box-shadow:0 30px 100px rgba(0,0,0,.22)!important}
html .spx-export-section-v61 .spx-section-kicker p{max-width:740px!important;color:var(--secondary)!important}
html .spx-export-section-v61 .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;min-height:0!important}
html .spx-export-section-v61 .spx-export-card{position:relative!important;min-height:330px!important;padding:24px!important;border-radius:28px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;color:var(--text)!important;box-shadow:0 18px 60px rgba(0,0,0,.16)!important;transform:none!important;transition:transform .32s ease,border-color .32s ease,background .32s ease,box-shadow .32s ease!important;overflow:hidden!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;gap:14px!important}
html .spx-export-section-v61 .spx-export-card::before{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(320px 180px at 28px 28px,rgba(34,211,238,.14),transparent 68%)!important;opacity:0!important;transition:opacity .32s ease!important;pointer-events:none!important}
html .spx-export-section-v61 .spx-export-card:hover,html .spx-export-section-v61 .spx-export-card:focus-visible,html .spx-export-section-v61 .spx-export-card.is-active{transform:translateY(-5px)!important;border-color:rgba(107,232,255,.34)!important;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(255,255,255,.034))!important;box-shadow:0 26px 88px rgba(0,0,0,.24),0 0 30px rgba(34,211,238,.08)!important;outline:0!important}
html .spx-export-section-v61 .spx-export-card.is-active::before,html .spx-export-section-v61 .spx-export-card:hover::before{opacity:1!important}
html .spx-export-icon{width:70px!important;height:70px!important;border-radius:22px!important;display:grid!important;place-items:center!important;color:#8eeeff!important;background:linear-gradient(145deg,rgba(34,211,238,.15),rgba(37,99,235,.07))!important;border:1px solid rgba(107,232,255,.22)!important;box-shadow:0 16px 42px rgba(0,0,0,.18)!important;flex:0 0 auto!important}
html .spx-export-icon img{display:none!important}.spx-export-svg{width:34px!important;height:34px!important;display:block!important;fill:currentColor!important}.spx-export-svg-share{width:42px!important;height:42px!important}
html .spx-export-card h3{position:relative!important;z-index:2!important;margin:8px 0 0!important;font-size:clamp(23px,2.8vw,34px)!important;letter-spacing:-.035em!important;color:var(--text)!important}
html .spx-export-card p{position:relative!important;z-index:2!important;max-height:none!important;opacity:1!important;line-height:1.62!important;color:var(--secondary)!important;flex:1 1 auto!important}
html .spx-export-card .spx-more-link{position:relative!important;z-index:2!important;align-self:flex-start!important;margin-top:auto!important;color:#9eeeff!important;font-weight:950!important;text-decoration:none!important}

/* Homepage roadmap preview and full roadmap page. */
html .spx-summary-roadmap-v62{width:min(1220px,calc(100% - 40px))!important;margin:clamp(70px,10vw,130px) auto!important;display:grid!important;grid-template-columns:.82fr 1.18fr!important;gap:22px!important;align-items:stretch!important;border-radius:38px!important;padding:clamp(26px,4vw,54px)!important;border:1px solid rgba(218,236,255,.11)!important;background:radial-gradient(900px 360px at 100% 0%,rgba(37,99,235,.12),transparent 65%),linear-gradient(180deg,rgba(8,15,29,.72),rgba(4,8,18,.58))!important;box-shadow:0 30px 110px rgba(0,0,0,.20)!important}
html .spx-summary-roadmap-v62 .spx-summary-panel h2{font-size:clamp(36px,5vw,64px)!important;line-height:1!important;letter-spacing:-.055em!important;margin:12px 0!important;color:var(--text)!important}
html .spx-summary-roadmap-v62 .spx-summary-panel p{color:var(--secondary)!important;line-height:1.65!important;font-size:17px!important}
html .spx-roadmap-preview-v62{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important}
html .spx-roadmap-preview-v62 article{position:relative!important;min-height:280px!important;padding:22px!important;border-radius:26px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.026))!important;overflow:hidden!important;box-shadow:0 18px 58px rgba(0,0,0,.15)!important;transition:transform .28s ease,border-color .28s ease!important}
html .spx-roadmap-preview-v62 article:hover,html .spx-roadmap-preview-v62 article.is-active{transform:translateY(-4px)!important;border-color:rgba(107,232,255,.30)!important}
html .spx-roadmap-preview-v62 span{display:inline-flex!important;padding:7px 10px!important;border-radius:999px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.09em!important}
html .spx-roadmap-preview-v62 h3{font-size:clamp(23px,2.6vw,34px)!important;line-height:1.08!important;letter-spacing:-.035em!important;color:var(--text)!important;margin:40px 0 10px!important}
html .spx-roadmap-preview-v62 p{color:var(--secondary)!important;line-height:1.58!important}
html .spx-roadmap-hero-v62{width:min(1180px,calc(100% - 40px))!important;margin:clamp(58px,8vw,110px) auto 22px!important;padding:clamp(24px,4vw,48px)!important;border-radius:36px!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;border:1px solid rgba(218,236,255,.10)!important;box-shadow:0 24px 90px rgba(0,0,0,.18)!important}
html .spx-roadmap-hero-v62 h1{font-size:clamp(46px,7vw,92px)!important;line-height:.93!important;letter-spacing:-.07em!important;color:var(--text)!important;margin:14px 0!important}
html .spx-roadmap-hero-v62 p{font-size:clamp(17px,1.7vw,22px)!important;line-height:1.6!important;color:var(--secondary)!important;max-width:850px!important}
html .spx-roadmap-board-v62{width:min(1180px,calc(100% - 40px))!important;margin:0 auto clamp(70px,9vw,120px)!important;display:grid!important;gap:18px!important}
html .spx-roadmap-phase-v62{display:grid!important;grid-template-columns:.44fr .56fr!important;gap:22px!important;align-items:start!important;padding:clamp(22px,3.2vw,38px)!important;border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;box-shadow:0 24px 86px rgba(0,0,0,.18)!important;transition:transform .3s ease,border-color .3s ease!important}
html .spx-roadmap-phase-v62:hover,html .spx-roadmap-phase-v62.is-active{transform:translateY(-4px)!important;border-color:rgba(107,232,255,.28)!important}
html .spx-roadmap-phase-top span{display:inline-flex!important;padding:8px 11px!important;border-radius:999px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.09em!important}
html .spx-roadmap-phase-top h2{font-size:clamp(30px,4.5vw,56px)!important;line-height:1!important;letter-spacing:-.055em!important;margin:16px 0 10px!important;color:var(--text)!important}
html .spx-roadmap-phase-top p{color:var(--secondary)!important;line-height:1.6!important}
html .spx-roadmap-task-grid-v62{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
html .spx-roadmap-task-v62{padding:16px!important;border-radius:20px!important;border:1px solid rgba(218,236,255,.10)!important;background:rgba(255,255,255,.04)!important}
html .spx-roadmap-task-v62 b{display:block!important;color:var(--text)!important;font-size:16px!important}.spx-roadmap-task-v62 p{margin:8px 0 0!important;color:var(--secondary)!important;line-height:1.5!important;font-size:14px!important}

/* New public support and auth surfaces. */
html .spx-support-page-v62,html .spx-support-workspace-v62,html .spx-support-faq-v62{width:min(1220px,calc(100% - 40px))!important;margin:clamp(50px,7vw,98px) auto!important}
html .spx-support-hero-v62{display:grid!important;grid-template-columns:1.05fr .95fr!important;gap:22px!important;align-items:stretch!important}
html .spx-support-hero-copy,html .spx-support-status-card,html .spx-support-route-grid article,html .spx-support-form-intro,html .spx-public-support-form-v62{border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:linear-gradient(180deg,rgba(8,15,29,.78),rgba(4,8,18,.64))!important;box-shadow:0 24px 90px rgba(0,0,0,.22)!important;backdrop-filter:blur(18px)!important}
html .spx-support-hero-copy{padding:clamp(28px,5vw,62px)!important}.spx-support-hero-copy h1{font-size:clamp(46px,7vw,88px)!important;line-height:.94!important;letter-spacing:-.07em!important;color:var(--text)!important;margin:14px 0!important}.spx-support-hero-copy p{font-size:clamp(17px,1.5vw,21px)!important;line-height:1.62!important;color:var(--secondary)!important;max-width:780px!important}.spx-support-hero-actions{display:flex!important;gap:12px!important;flex-wrap:wrap!important;margin-top:22px!important}.spx-support-status-card{padding:clamp(24px,4vw,42px)!important;display:grid!important;align-content:end!important;gap:12px!important;background:radial-gradient(600px 260px at 0% 0%,rgba(34,211,238,.16),transparent 62%),linear-gradient(180deg,rgba(9,18,35,.82),rgba(4,9,18,.66))!important}.spx-support-status-card span{color:#9eeeff!important;font-size:12px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.1em!important}.spx-support-status-card b{font-size:clamp(26px,4vw,48px)!important;line-height:1!important;letter-spacing:-.045em!important;color:var(--text)!important}.spx-support-status-card p,.spx-support-status-card li{color:var(--secondary)!important;line-height:1.6!important}.spx-support-status-card ul{margin:0!important;padding-left:18px!important}.spx-support-route-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;margin-top:16px!important}.spx-support-route-grid article{padding:20px!important;min-height:150px!important}.spx-support-route-grid span{display:grid!important;place-items:center!important;width:40px!important;height:40px!important;border-radius:15px!important;background:rgba(34,211,238,.10)!important;color:#9eeeff!important;font-weight:950!important}.spx-support-route-grid b{display:block!important;color:var(--text)!important;margin:14px 0 8px!important}.spx-support-route-grid p{color:var(--secondary)!important;line-height:1.5!important;margin:0!important}.spx-support-workspace-v62{display:grid!important;grid-template-columns:.82fr 1.18fr!important;gap:22px!important;align-items:start!important}.spx-support-form-intro,.spx-public-support-form-v62{padding:clamp(22px,3.2vw,36px)!important}.spx-support-form-intro h2{font-size:clamp(34px,5vw,62px)!important;line-height:1!important;letter-spacing:-.055em!important;color:var(--text)!important;margin:12px 0!important}.spx-support-form-intro p{color:var(--secondary)!important;line-height:1.6!important}.spx-support-mini-list{display:grid!important;gap:10px!important;margin-top:18px!important}.spx-support-mini-list span{padding:10px 12px!important;border-radius:16px!important;border:1px solid rgba(107,232,255,.14)!important;background:rgba(34,211,238,.07)!important;color:#dffbff!important;font-weight:800!important}.spx-public-support-form-v62 label{display:grid!important;gap:8px!important;color:var(--text)!important;font-weight:850!important}.spx-public-support-form-v62 input,.spx-public-support-form-v62 select,.spx-public-support-form-v62 textarea,.auth-shell-v62 input,.auth-shell-v62 select,.auth-shell-v62 textarea{width:100%!important;border-radius:16px!important;border:1px solid rgba(218,236,255,.13)!important;background:rgba(255,255,255,.055)!important;color:var(--text)!important;padding:13px 14px!important;outline:0!important;box-shadow:none!important}.spx-public-support-form-v62 input:focus,.spx-public-support-form-v62 textarea:focus,.spx-public-support-form-v62 select:focus,.auth-shell-v62 input:focus,.auth-shell-v62 select:focus{border-color:rgba(107,232,255,.42)!important;box-shadow:0 0 0 4px rgba(34,211,238,.10)!important}.spx-public-support-form-v62 textarea{resize:vertical!important;min-height:170px!important}.spx-public-support-form-v62 .captcha-box,.auth-shell-v62 .captcha-box{border-radius:18px!important;border:1px solid rgba(245,184,91,.20)!important;background:rgba(245,184,91,.07)!important;padding:14px!important}
html .auth-shell-v62{position:relative!important;width:min(1180px,calc(100% - 40px))!important;margin:clamp(42px,7vw,88px) auto!important;min-height:calc(100svh - 170px)!important;padding:0!important;display:grid!important;grid-template-columns:minmax(380px,.88fr) minmax(360px,.78fr)!important;gap:22px!important;align-items:center!important;background:transparent!important}.auth-login-v62{grid-template-columns:minmax(360px,.78fr) minmax(380px,.88fr)!important}.auth-shell-v62 .auth-card,.auth-shell-v62 .auth-story{border-radius:32px!important;border:1px solid rgba(218,236,255,.11)!important;background:radial-gradient(680px 340px at 0% 0%,rgba(34,211,238,.10),transparent 66%),linear-gradient(180deg,rgba(8,15,29,.82),rgba(4,8,18,.66))!important;box-shadow:0 28px 100px rgba(0,0,0,.25)!important;backdrop-filter:blur(20px)!important;padding:clamp(24px,4vw,46px)!important;min-height:auto!important}.auth-shell-v62 .auth-card{order:1}.auth-shell-v62 .auth-story{order:2}.auth-register-v62 .auth-story{order:1}.auth-register-v62 .auth-card{order:2}.auth-shell-v62 .auth-card h1{font-size:clamp(40px,5.6vw,74px)!important;line-height:.95!important;letter-spacing:-.065em!important;color:var(--text)!important;margin:12px 0!important}.auth-shell-v62 .auth-card p,.auth-shell-v62 .auth-story p{color:var(--secondary)!important;line-height:1.6!important}.auth-shell-v62 .auth-form{display:grid!important;gap:14px!important;margin-top:20px!important}.auth-shell-v62 .auth-story h2{font-size:clamp(34px,5vw,66px)!important;line-height:.96!important;letter-spacing:-.06em!important;color:var(--text)!important}.auth-story-points{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:22px!important}.auth-story-points span{border-radius:999px!important;padding:8px 10px!important;background:rgba(34,211,238,.09)!important;border:1px solid rgba(107,232,255,.14)!important;color:#dffbff!important;font-weight:850!important;font-size:12px!important}.auth-shell-v62 .google-btn{width:100%!important;margin-top:12px!important;border-radius:16px!important}.auth-shell-v62 .auth-links{display:flex!important;justify-content:space-between!important;gap:12px!important;margin-top:18px!important}.auth-shell-v62 .steps{margin:18px 0!important}.auth-shell-v62 .register-step{display:none!important}.auth-shell-v62 .register-step.is-active,.auth-shell-v62 .register-step.active{display:grid!important;gap:14px!important}.auth-register-v62.is-form-focus{grid-template-columns:1fr!important;max-width:860px!important}.auth-register-v62.is-form-focus .auth-story{display:none!important}.auth-register-v62.is-form-focus .auth-card{width:100%!important}.auth-shell-v62 .spx-auth-choice{display:grid!important;gap:12px!important}.auth-shell-v62 .legal-consent{align-items:start!important;grid-template-columns:auto minmax(0,1fr)!important;display:grid!important}

html[data-theme="light"] .spx-export-section-v61,html[data-theme="light"] .spx-summary-roadmap-v62,html[data-theme="light"] .spx-roadmap-hero-v62,html[data-theme="light"] .spx-roadmap-phase-v62,html[data-theme="light"] .spx-support-hero-copy,html[data-theme="light"] .spx-support-status-card,html[data-theme="light"] .spx-support-route-grid article,html[data-theme="light"] .spx-support-form-intro,html[data-theme="light"] .spx-public-support-form-v62,html[data-theme="light"] .auth-shell-v62 .auth-card,html[data-theme="light"] .auth-shell-v62 .auth-story{background:rgba(255,255,255,.84)!important;border-color:rgba(15,23,42,.10)!important;box-shadow:0 24px 80px rgba(15,23,42,.12)!important;color:#0f172a!important}html[data-theme="light"] .spx-support-mini-list span,html[data-theme="light"] .auth-story-points span{color:#075985!important;background:rgba(14,165,233,.08)!important}html[data-theme="light"] .spx-public-support-form-v62 input,html[data-theme="light"] .spx-public-support-form-v62 textarea,html[data-theme="light"] .spx-public-support-form-v62 select,html[data-theme="light"] .auth-shell-v62 input,html[data-theme="light"] .auth-shell-v62 select{background:rgba(255,255,255,.74)!important;border-color:rgba(15,23,42,.12)!important;color:#0f172a!important}
@media(max-width:980px){html .spx-why52-track{height:auto!important}html .spx-why52-sticky{position:relative!important;top:auto!important;min-height:auto!important;grid-template-columns:1fr!important}.spx-why52-copy{min-height:auto!important}.spx-why52-story-head{opacity:1!important}.why52-step-nav,.why52-step-stack{position:relative!important;inset:auto!important;opacity:1!important}.why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin:12px 0!important}.why52-visuals,.why52-visual{position:relative!important;inset:auto!important}.why52-visual{opacity:1!important;visibility:visible!important;transform:none!important;margin:14px 0!important}.why52-visual img{max-width:100%!important}.why52-visual-card{position:relative!important;left:auto!important;bottom:auto!important;width:auto!important;margin-top:10px!important}.spx-dashboard-command-v61{min-height:auto!important;margin:60px auto!important;width:min(100% - 24px,1180px)!important;border-radius:32px!important;padding:18px!important}.spx-dashboard-command-v61 .spx-dash-visual,.spx-dashboard-command-v61 .spx-dash-copy{position:relative!important;top:auto!important;height:auto!important;width:100%!important;margin:0!important}.spx-dashboard-command-v61 .spx-dash-frame{position:relative!important;inset:auto!important;aspect-ratio:16/10!important}.spx-export-section-v61 .spx-export-grid,.spx-summary-roadmap-v62,.spx-roadmap-preview-v62,.spx-roadmap-phase-v62,.spx-roadmap-task-grid-v62,.spx-support-hero-v62,.spx-support-route-grid,.spx-support-workspace-v62,.auth-shell-v62{grid-template-columns:1fr!important}.auth-shell-v62,.auth-register-v62.is-form-focus{width:min(100% - 28px,860px)!important}.spx-v26-alpha-notice{grid-template-columns:1fr!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:min(100% - 24px,1080px)!important;margin:26px auto 0!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{margin-left:0!important;width:100%!important}.spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{grid-template-columns:1fr!important}}

/* A8.63 focused visual repairs: hero CTA, What view, How story, dashboard story, export cards and pricing copy polish. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions *{
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  z-index:72!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more{
  z-index:76!important;
  cursor:pointer!important;
  isolation:isolate!important;
  color:var(--text)!important;
  min-width:166px!important;
  width:166px!important;
  border-color:rgba(142,221,255,.25)!important;
  background:rgba(255,255,255,.06)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(135deg,rgba(24,201,245,.12),rgba(37,99,235,.10));
  opacity:0;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1);
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:hover::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:focus-visible::before{opacity:1}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .label,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowBubble{z-index:2!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more:focus-visible{
  transform:translateY(-2px)!important;
  border-color:rgba(107,232,255,.58)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.22),0 0 38px rgba(24,201,245,.16)!important;
}

/* What copy/fade polish only; the product animation remains owned by the
   original progress controller until .spx-what-product-locked is active. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  z-index:58!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page::before{
  display:none!important;
  content:none!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  width:min(760px,calc(100% - 68px))!important;
  max-height:56px!important;
  margin:0 0 0 clamp(34px,5vw,64px)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  object-fit:contain!important;
  object-position:left bottom!important;
  filter:none!important;
  opacity:.96!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  margin-top:12px!important;
  padding:clamp(34px,4.8vw,62px)!important;
  border-radius:30px!important;
  background:radial-gradient(720px 420px at 26% 0%,rgba(34,211,238,.15),transparent 65%),linear-gradient(145deg,rgba(8,16,31,.98),rgba(4,9,18,.98) 58%,rgba(7,31,49,.92))!important;
  border:1px solid rgba(107,232,255,.14)!important;
  box-shadow:0 34px 120px rgba(0,0,0,.44)!important;
  overflow:hidden!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:900px!important;
  margin:0!important;
  padding:clamp(22px,3vw,34px)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.088),rgba(255,255,255,.045))!important;
  border:1px solid rgba(218,236,255,.12)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.24)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  grid-template-columns:auto 1fr!important;
  align-items:start!important;
  gap:8px 12px!important;
  margin:18px 0 12px!important;
  padding:13px 15px!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,rgba(245,184,91,.13),rgba(24,201,245,.07))!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice a{
  grid-column:2!important;
  justify-self:start!important;
  margin-top:2px!important;
  color:#8ee8ff!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  background:radial-gradient(720px 420px at 26% 0%,rgba(14,165,233,.13),transparent 65%),linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,246,255,.94))!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 34px 96px rgba(15,23,42,.14)!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card{background:rgba(255,255,255,.76)!important}

/* Stable How Spixor Works v63: remove old scroll-fighting and rebuild one controlled story. */
html .spx-how-v63{
  position:relative!important;
  width:100%!important;
  min-height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:clip!important;
  background:transparent!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html .spx-how-v63 .spx-why52-hero-echo{display:none!important}
html .spx-how-v63 .spx-why52-shell{width:min(1240px,calc(100% - 48px))!important;margin:0 auto!important;padding:0!important;position:relative!important;z-index:3!important}
html .spx-how-v63 .spx-why52-track{height:330vh!important;min-height:2500px!important;position:relative!important}
html .spx-how-v63 .spx-why52-sticky{
  position:sticky!important;
  top:clamp(72px,9vh,98px)!important;
  min-height:calc(100svh - clamp(88px,11vh,120px))!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.9fr) minmax(540px,1.1fr)!important;
  gap:clamp(28px,5vw,76px)!important;
  align-items:center!important;
  opacity:1!important;
  transform:none!important;
}
html .spx-how-v63 .spx-why52-copy,
html .spx-how-v63 .spx-why52-stage{height:auto!important;min-height:0!important;opacity:1!important;transform:none!important;filter:none!important}
html .spx-how-v63 .spx-why52-story-head{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;margin-bottom:20px!important}
html .spx-how-v63 .spx-why52-story-head h2{font-size:clamp(42px,5.7vw,84px)!important;line-height:.92!important;letter-spacing:-.07em!important;margin:10px 0 12px!important}
html .spx-how-v63 .spx-why52-story-head p{max-width:540px!important;color:var(--text-soft)!important;font-size:clamp(16px,1.35vw,20px)!important;line-height:1.6!important}
html .spx-how-v63 .why52-step-nav{position:relative!important;display:flex!important;gap:10px!important;margin:20px 0 18px!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-how-v63 .why52-step-nav button{flex:0 0 auto!important;border-radius:999px!important;padding:10px 14px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(218,236,255,.10)!important;color:var(--text-soft)!important;transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)!important}
html .spx-how-v63 .why52-step-nav button b{display:none!important}
html .spx-how-v63 .why52-step-nav button.is-active{background:rgba(24,201,245,.13)!important;border-color:rgba(24,201,245,.34)!important;color:var(--text)!important;box-shadow:0 12px 34px rgba(24,201,245,.10)!important}
html .spx-how-v63 .why52-step-stack{position:relative!important;min-height:360px!important;overflow:visible!important}
html .spx-how-v63 .why52-step{position:absolute!important;inset:0 auto auto 0!important;width:min(540px,100%)!important;margin:0!important;padding:24px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;border:1px solid rgba(218,236,255,.12)!important;box-shadow:0 24px 78px rgba(0,0,0,.18)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate3d(0,22px,0) scale(.985)!important;transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s!important}
html .spx-how-v63 .why52-step.is-active{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-step span{color:#8ee8ff!important;font-size:12px!important;letter-spacing:.12em!important;text-transform:uppercase!important;font-weight:950!important}
html .spx-how-v63 .why52-step h3{margin:12px 0 10px!important;font-size:clamp(25px,2.5vw,38px)!important;line-height:1.05!important;letter-spacing:-.045em!important}
html .spx-how-v63 .why52-step p{font-size:16px!important;line-height:1.58!important;color:var(--text-soft)!important;margin:0 0 14px!important}
html .spx-how-v63 .why52-step ul{margin:0!important;padding:0!important;display:grid!important;gap:9px!important;color:var(--secondary)!important}
html .spx-how-v63 .why52-stage{position:relative!important;min-height:620px!important;border-radius:34px!important;background:radial-gradient(520px 320px at 84% 14%,rgba(24,201,245,.16),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;border:1px solid rgba(218,236,255,.10)!important;box-shadow:0 30px 100px rgba(0,0,0,.28)!important;overflow:hidden!important}
html .spx-how-v63 .why52-network{opacity:.42!important;inset:0!important;position:absolute!important;transform:none!important}
html .spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important;overflow:visible!important}
html .spx-how-v63 .why52-visual{position:absolute!important;inset:clamp(26px,4vw,54px)!important;margin:0!important;opacity:0!important;visibility:hidden!important;transform:translate3d(12vw,0,0) scale(.96)!important;filter:none!important;pointer-events:none!important;transition:opacity .48s cubic-bezier(.2,.8,.2,1),transform .52s cubic-bezier(.2,.8,.2,1),visibility .48s!important}
html .spx-how-v63 .why52-visual.is-active{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual img{width:100%!important;height:100%!important;object-fit:contain!important;border:0!important;background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 40px 90px rgba(0,0,0,.26))!important}
html .spx-how-v63 .why52-visual figcaption{position:absolute!important;left:clamp(18px,3vw,36px)!important;right:clamp(18px,3vw,36px)!important;bottom:clamp(18px,3vw,32px)!important;max-width:min(520px,78%)!important;padding:16px 18px!important;border-radius:22px!important;background:rgba(3,8,18,.62)!important;border:1px solid rgba(218,236,255,.12)!important;backdrop-filter:blur(16px)!important;box-shadow:0 18px 60px rgba(0,0,0,.22)!important}
html .spx-how-v63 .why52-float{display:none!important}

/* Dashboard Command Center v63: full screen visual with compact moving context cards. */
html .spx-dashboard-command-v63{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-height:330vh!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050914!important;
  overflow:clip!important;
  box-shadow:none!important;
}
html .spx-dashboard-command-v63 .spx-dash-visual{position:sticky!important;top:0!important;height:100svh!important;inset-inline:0!important;width:100%!important;margin:0!important;z-index:1!important;overflow:hidden!important}
html .spx-dashboard-command-v63 .spx-dash-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:#07101e!important;box-shadow:none!important;overflow:hidden!important}
html .spx-dashboard-command-v63 .spx-dash-frame img[data-dashboard-image]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;opacity:calc(.72 + var(--dash-focus,1) * .28)!important;filter:saturate(1.08) contrast(1.04) brightness(.88)!important;transition:opacity .42s var(--ease),filter .42s var(--ease)!important}
html .spx-dashboard-command-v63 .spx-dash-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(600px 420px at var(--dash-card-x,82%) var(--dash-card-y,78%),rgba(24,201,245,.18),transparent 66%),linear-gradient(90deg,rgba(2,6,14,.54),transparent 24%,transparent 76%,rgba(2,6,14,.44)),linear-gradient(180deg,rgba(2,6,14,.34),rgba(2,6,14,.04) 48%,rgba(2,6,14,.52));}
html .spx-dashboard-command-v63 .spx-dash-copy{position:sticky!important;top:0!important;height:100svh!important;z-index:5!important;width:0!important;margin:0!important;padding:0!important;pointer-events:none!important;transform:none!important}
html .spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html .spx-dashboard-command-v63 .spx-dash-copy > h2,
html .spx-dashboard-command-v63 .spx-dash-copy > p{position:absolute!important;left:clamp(22px,4vw,68px)!important;top:clamp(86px,12vh,126px)!important;width:min(430px,38vw)!important;margin:0!important;opacity:calc(.25 + var(--dash-focus,1) * .75)!important;pointer-events:none!important;text-shadow:0 2px 30px rgba(0,0,0,.38)!important}
html .spx-dashboard-command-v63 .spx-dash-copy > h2{top:clamp(116px,16vh,168px)!important;font-size:clamp(36px,5vw,76px)!important;line-height:.94!important;letter-spacing:-.07em!important;color:#fff!important}
html .spx-dashboard-command-v63 .spx-dash-copy > p{top:clamp(210px,30vh,286px)!important;color:rgba(218,236,255,.72)!important;line-height:1.55!important}
html .spx-dashboard-command-v63 .spx-dash-tabs{position:absolute!important;left:clamp(22px,4vw,68px)!important;bottom:clamp(22px,5vh,48px)!important;display:flex!important;gap:8px!important;z-index:8!important;pointer-events:auto!important;background:rgba(3,8,18,.48)!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:999px!important;padding:8px!important;backdrop-filter:blur(16px)!important}
html .spx-dashboard-command-v63 .spx-dash-tabs b{display:none!important}
html .spx-dashboard-command-v63 .spx-dash-tabs button{min-height:40px!important;padding:0 14px!important;border-radius:999px!important;background:transparent!important;border:0!important;color:rgba(218,236,255,.66)!important;transition:background .24s var(--ease),color .24s var(--ease),transform .24s var(--ease)!important}
html .spx-dashboard-command-v63 .spx-dash-tabs button.is-active{background:rgba(24,201,245,.14)!important;color:#fff!important;box-shadow:0 10px 28px rgba(24,201,245,.12)!important}
html .spx-dashboard-command-v63 .spx-dash-panel{position:absolute!important;z-index:9!important;width:min(350px,calc(100vw - 44px))!important;padding:18px 20px!important;border-radius:24px!important;background:rgba(3,8,18,.62)!important;border:1px solid rgba(218,236,255,.14)!important;box-shadow:0 24px 80px rgba(0,0,0,.34),0 0 44px rgba(24,201,245,.10)!important;backdrop-filter:blur(18px)!important;opacity:0!important;visibility:hidden!important;transform:translate3d(0,16px,0) scale(.98)!important;transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1),visibility .38s!important;pointer-events:none!important}
html .spx-dashboard-command-v63 .spx-dash-panel.is-active{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1)!important;pointer-events:auto!important}
html .spx-dashboard-command-v63[data-scene="overview"]{--dash-card-x:82%;--dash-card-y:78%}
html .spx-dashboard-command-v63[data-scene="projects"]{--dash-card-x:82%;--dash-card-y:18%}
html .spx-dashboard-command-v63[data-scene="files"]{--dash-card-x:16%;--dash-card-y:18%}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="overview"]{right:clamp(22px,5vw,80px)!important;bottom:clamp(24px,8vh,92px)!important}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="projects"]{right:clamp(22px,5vw,80px)!important;top:clamp(86px,13vh,130px)!important}
html .spx-dashboard-command-v63 .spx-dash-panel[data-dashboard-panel="files"]{left:clamp(22px,5vw,80px)!important;top:clamp(86px,13vh,130px)!important}
html .spx-dashboard-command-v63 .spx-dash-callout{display:none!important}
html .spx-dashboard-command-v63 .spx-dash-cursor{z-index:7!important;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s var(--ease)!important}
html .spx-dashboard-command-v63[data-scene="overview"] .spx-dash-cursor{transform:translate3d(76vw,72vh,0)!important}
html .spx-dashboard-command-v63[data-scene="projects"] .spx-dash-cursor{transform:translate3d(84vw,18vh,0)!important}
html .spx-dashboard-command-v63[data-scene="files"] .spx-dash-cursor{transform:translate3d(12vw,20vh,0)!important}
html .spx-dashboard-command-v63 .spx-dash-fade-ghost{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center top!important;z-index:1!important;opacity:1!important;transition:opacity .7s cubic-bezier(.2,.8,.2,1)!important}
html .spx-dashboard-command-v63 .spx-dash-fade-ghost.is-fading{opacity:0!important}

/* Export-first v63: stable cards, logo-based Share mark and hover-revealed More info. */
html .spx-export-section-v61{padding-block:clamp(70px,10vw,132px)!important}
html .spx-export-section-v61 .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;align-items:stretch!important}
html .spx-export-section-v61 .spx-export-card{position:relative!important;min-height:320px!important;display:flex!important;flex-direction:column!important;gap:14px!important;overflow:hidden!important;transform:none!important;transition:transform .34s cubic-bezier(.2,.8,.2,1),border-color .34s var(--ease),background .34s var(--ease),box-shadow .34s var(--ease)!important}
html .spx-export-section-v61 .spx-export-card:hover,
html .spx-export-section-v61 .spx-export-card:focus-within,
html .spx-export-section-v61 .spx-export-card.is-active{transform:translateY(-6px)!important;border-color:rgba(24,201,245,.32)!important;box-shadow:0 28px 92px rgba(0,0,0,.28),0 0 58px rgba(24,201,245,.10)!important}
html .spx-export-section-v61 .spx-export-icon{width:62px!important;height:62px!important;display:grid!important;place-items:center!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(24,201,245,.14),rgba(37,99,235,.10))!important;color:#66dcff!important;box-shadow:inset 0 0 0 1px rgba(107,232,255,.14)!important;overflow:hidden!important}
html .spx-export-section-v61 .spx-export-icon img{width:48px!important;height:48px!important;object-fit:cover!important;border-radius:50%!important;display:block!important;filter:none!important;opacity:1!important;transform:scale(1.14)!important}
html .spx-export-section-v61 .spx-export-svg{width:32px!important;height:32px!important;color:#76e4ff!important;fill:currentColor!important;display:block!important}
html .spx-export-section-v61 .spx-export-svg path{fill:currentColor!important}
html .spx-export-section-v61 .spx-more-link{margin-top:auto!important;display:inline-flex!important;align-items:center!important;gap:9px!important;align-self:flex-start!important;min-height:36px!important;padding:8px 11px!important;border-radius:999px!important;background:rgba(24,201,245,.10)!important;border:1px solid rgba(24,201,245,.20)!important;color:#c9f8ff!important;text-decoration:none!important;font-weight:900!important;opacity:0!important;visibility:hidden!important;transform:translate3d(0,10px,0)!important;transition:opacity .26s var(--ease),visibility .26s var(--ease),transform .32s cubic-bezier(.2,.8,.2,1),background .24s var(--ease)!important}
html .spx-export-section-v61 .spx-more-link svg{width:14px!important;height:14px!important;transition:transform .26s cubic-bezier(.2,.8,.2,1)!important}
html .spx-export-section-v61 .spx-export-card:hover .spx-more-link,
html .spx-export-section-v61 .spx-export-card:focus-within .spx-more-link{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0)!important}
html .spx-export-section-v61 .spx-more-link:hover svg{transform:translateX(3px)!important}
html .spx-export-section-v61 .spx-export-card.is-active:not(:hover):not(:focus-within) .spx-more-link{opacity:0!important;visibility:hidden!important;transform:translate3d(0,10px,0)!important}

.spx-public-editor-bar{
  position:fixed!important;
  left:50%!important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  transform:translateX(-50%)!important;
  z-index:2200!important;
  width:min(760px,calc(100vw - 24px))!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px!important;
  border-radius:20px!important;
  border:1px solid rgba(107,232,255,.22)!important;
  background:rgba(3,8,18,.86)!important;
  box-shadow:0 24px 90px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(18px)!important;
}
.spx-public-editor-bar strong{color:#fff!important}
.spx-public-editor-bar span{color:rgba(232,241,255,.72)!important}
.spx-public-editor-bar .form-status{margin:0!important;min-width:140px!important}
.spx-public-editable{
  outline:2px solid rgba(24,201,245,.36)!important;
  outline-offset:4px!important;
  border-radius:8px!important;
  cursor:text!important;
}
.spx-public-editable:focus{
  outline-color:rgba(245,184,91,.72)!important;
  background:rgba(245,184,91,.08)!important;
}
html[data-theme="light"] .spx-public-editor-bar{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(15,23,42,.12)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.16)!important;
}
html[data-theme="light"] .spx-public-editor-bar strong{color:#0f172a!important}
html[data-theme="light"] .spx-public-editor-bar span{color:#475467!important}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{width:100%!important;margin-left:0!important}
  html .spx-how-v63 .spx-why52-track{height:auto!important;min-height:auto!important}
  html .spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:1fr!important;min-height:auto!important;padding:60px 0!important}
  html .spx-how-v63 .why52-step-stack{min-height:auto!important;display:grid!important;gap:12px!important}
  html .spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;width:100%!important}
  html .spx-how-v63 .spx-why52-stage{min-height:auto!important;padding:14px!important}
  html .spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:14px!important}
  html .spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
  html .spx-how-v63 .why52-visual img{height:auto!important}
  html .spx-how-v63 .why52-visual figcaption{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;max-width:100%!important;margin-top:10px!important}
  html .spx-dashboard-command-v63{min-height:auto!important;padding:52px 14px!important;border-radius:0!important}
  html .spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;height:auto!important;border-radius:28px!important;overflow:hidden!important}
  html .spx-dashboard-command-v63 .spx-dash-frame{position:relative!important;height:auto!important;aspect-ratio:16/10!important;border-radius:28px!important}
  html .spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;height:auto!important;width:100%!important;margin-top:18px!important;display:grid!important;gap:12px!important}
  html .spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html .spx-dashboard-command-v63 .spx-dash-copy > h2,
  html .spx-dashboard-command-v63 .spx-dash-copy > p,
  html .spx-dashboard-command-v63 .spx-dash-tabs,
  html .spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
  html .spx-dashboard-command-v63 .spx-dash-panel{display:none!important}
  html .spx-dashboard-command-v63 .spx-dash-panel.is-active{display:block!important}
  html .spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr!important}
  .spx-public-editor-bar{align-items:stretch!important;flex-direction:column!important}
}

@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip}
  html .spx-hero-v26[data-hero-scrollstory]{min-height:auto!important;padding-bottom:36px!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{
    display:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    order:1!important;
    position:relative!important;
    width:min(100% - 28px,680px)!important;
    margin:0 auto!important;
    padding:calc(88px + env(safe-area-inset-top,0px)) 0 22px!important;
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(38px,12vw,54px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    max-width:100%!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:wrap!important;
    white-space:normal!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead strong,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-note{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
    font-size:16px!important;
    line-height:1.5!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
    order:2!important;
    display:block!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    width:min(100% - 28px,680px)!important;
    max-width:680px!important;
    margin:10px auto 0!important;
    padding:0!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:4!important;
    filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
    position:relative!important;
    min-height:auto!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-height:44px!important;
    margin:0!important;
    object-fit:contain!important;
    object-position:left bottom!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    position:relative!important;
    width:100%!important;
    min-height:auto!important;
    padding:18px!important;
    margin-top:8px!important;
    border-radius:24px!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px!important;
    border-radius:20px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
    font-size:clamp(26px,8.4vw,38px)!important;
    line-height:1.03!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
    font-size:15px!important;
    line-height:1.58!important;
    overflow-wrap:anywhere!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  html .spx-support-page-v62,
  html .spx-support-workspace-v62,
  html .spx-support-faq-v62{
    width:min(100% - 28px,680px)!important;
    margin:34px auto!important;
  }
  html .spx-support-page-v62 *,
  html .spx-support-workspace-v62 *,
  html .spx-support-faq-v62 *{
    min-width:0!important;
  }
  html .spx-support-page-v62 > *,
  html .spx-support-workspace-v62 > *,
  html .spx-support-faq-v62 > *{
    width:100%!important;
    max-width:100%!important;
  }
  html .spx-support-hero-v62,
  html .spx-support-workspace-v62,
  html .spx-support-route-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  html .spx-support-hero-copy,
  html .spx-support-status-card,
  html .spx-support-form-intro,
  html .spx-public-support-form-v62{
    padding:20px!important;
    border-radius:24px!important;
  }
  html .spx-support-hero-copy h1,
  html .spx-support-form-intro h2{
    font-size:clamp(34px,10vw,44px)!important;
    line-height:1!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    text-wrap:wrap!important;
    white-space:normal!important;
  }
  html .spx-support-status-card b{
    font-size:clamp(24px,7vw,32px)!important;
    line-height:1.08!important;
    overflow-wrap:anywhere!important;
  }
  html .spx-support-hero-copy p,
  html .spx-support-status-card p,
  html .spx-support-status-card li,
  html .spx-support-route-grid p,
  html .spx-support-form-intro p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    white-space:normal!important;
  }
  html .spx-support-hero-actions,
  html .spx-page-cta-row{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  html .spx-support-hero-actions .btn,
  html .spx-page-cta-row .btn{
    width:100%!important;
  }
}

/* Visual blocker pass: calm hero, locked What preview, stable How split, dashboard interaction, export arrows and mobile crops. */
html .spx-hero-v26[data-hero-scrollstory] .v26-grid-plane,
html .spx-hero-v26[data-hero-scrollstory] .v26-light-trace,
html .spx-hero-v26[data-hero-scrollstory] .v26-horizon,
html .spx-hero-v26[data-hero-scrollstory] .v26-cloud{display:none!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{opacity:.72!important;background:radial-gradient(900px 540px at 74% 20%,rgba(37,99,235,.16),transparent 62%),radial-gradient(780px 500px at 16% 76%,rgba(24,201,245,.12),transparent 68%),linear-gradient(180deg,#020711 0%,#061124 72%,#07111f 100%)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-hero-space[data-spx-hero-canvas-retired="1"]{opacity:0!important;visibility:hidden!important;mix-blend-mode:normal!important;}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-hero-space{background:radial-gradient(900px 540px at 74% 20%,rgba(37,99,235,.11),transparent 62%),radial-gradient(780px 500px at 16% 76%,rgba(14,165,233,.10),transparent 68%),linear-gradient(180deg,#eef6ff 0%,#f7fbff 72%,#eef3fa 100%)!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions{pointer-events:auto!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more{position:relative!important;z-index:160!important;pointer-events:auto!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowBubble{width:32px!important;height:32px!important;right:10px!important;display:grid!important;place-items:center!important;overflow:hidden!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-actions .spx-learn-more .arrowIcon{width:13px!important;height:13px!important;display:block!important}

html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory].spx-what-copy-hidden .spx-v26-trust{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,-18px,0)!important;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1),transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{transition:opacity .46s cubic-bezier(.2,.8,.2,1),filter .46s cubic-bezier(.2,.8,.2,1)!important}
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer{opacity:0!important;visibility:hidden!important}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{opacity:1!important;visibility:visible!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;margin-left:0!important}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;padding:12px 14px!important;border-radius:16px!important;margin:14px 0!important}

html .spx-how-v63{background:transparent!important;overflow:visible!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-how-v63 .spx-why52-shell{width:min(1240px,calc(100% - 56px))!important}
html .spx-how-v63 .spx-why52-track{height:380vh!important;min-height:2850px!important}
html .spx-how-v63 .spx-why52-sticky{grid-template-columns:minmax(360px,.82fr) minmax(560px,1.18fr)!important;gap:clamp(34px,5.5vw,86px)!important;align-items:center!important}
html .spx-how-v63 .spx-why52-copy{position:relative!important;z-index:4!important}
html .spx-how-v63 .spx-why52-stage{position:relative!important;z-index:3!important;min-height:min(680px,calc(100svh - 150px))!important;width:100%!important;max-width:100%!important;margin:0!important;overflow:hidden!important;transform:none!important;background:radial-gradient(560px 340px at 82% 15%,rgba(24,201,245,.15),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important}
html .spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important}
html .spx-how-v63 .why52-step-stack .why52-step.is-active{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;width:min(540px,100%)!important;height:auto!important;transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual{inset:34px!important;width:auto!important;max-width:none!important;transform:translate3d(34px,0,0) scale(.985)!important}
html .spx-how-v63 .why52-visual.is-active{transform:translate3d(0,0,0) scale(1)!important}
html .spx-how-v63 .why52-visual img{width:100%!important;height:100%!important;object-fit:contain!important}

/* Stabilized How fallback: one readable split layout, no scroll-fighting sticky gap. */
html .spx-how-v63{
  padding:clamp(72px,9vw,120px) 0!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-track{
  height:auto!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-sticky{
  position:relative!important;
  top:auto!important;
  min-height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr)!important;
  align-items:start!important;
}
html .spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:0!important;
  display:grid!important;
  gap:14px!important;
}
html .spx-how-v63 .why52-step-stack .why52-step,
html .spx-how-v63 .why52-step-stack .why52-step.is-active{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html .spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  gap:18px!important;
}
html .spx-how-v63 .why52-visual,
html .spx-how-v63 .why52-visual.is-active{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(300px,30vw,420px)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html .spx-how-v63 .why52-visual img{
  height:clamp(260px,28vw,390px)!important;
  object-fit:contain!important;
}

/* A8.67: How is no longer a sticky scrollstory. This resets the old v52/v61/v62/v63
   transform/opacity contract so following content renders on a normal crisp layer. */
html .spx-how-v63,
html .spx-how-v63.is-visible{
  display:block!important;
  position:relative!important;
  z-index:4!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
  background:transparent!important;
  overflow:visible!important;
  padding:clamp(76px,9vw,118px) 0!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-shell,
html .spx-how-v63 .spx-why52-track,
html .spx-how-v63 .spx-why52-sticky,
html .spx-how-v63 .spx-why52-copy,
html .spx-how-v63 .spx-why52-stage,
html .spx-how-v63 .why52-step-stack,
html .spx-how-v63 .why52-visuals{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  perspective:none!important;
  will-change:auto!important;
}
html .spx-how-v63 .spx-why52-shell{
  width:min(1240px,calc(100% - 56px))!important;
  margin:0 auto!important;
}
html .spx-how-v63 .spx-why52-track{
  display:block!important;
  height:auto!important;
  min-height:auto!important;
}
html .spx-how-v63 .spx-why52-sticky{
  position:relative!important;
  top:auto!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr)!important;
  gap:clamp(32px,5vw,76px)!important;
  align-items:start!important;
  min-height:auto!important;
  height:auto!important;
}
html .spx-how-v63 .spx-why52-story-head{
  position:relative!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin-bottom:18px!important;
}
html .spx-how-v63 .why52-step-nav{
  position:relative!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  margin:18px 0!important;
}
html .spx-how-v63 .why52-step-stack{
  position:relative!important;
  display:grid!important;
  gap:14px!important;
  min-height:auto!important;
}
html .spx-how-v63 .why52-step,
html .spx-how-v63 .why52-step.is-active,
html .spx-how-v63 .why52-step.active{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
}
html .spx-how-v63 .spx-why52-stage{
  position:relative!important;
  display:block!important;
  min-height:auto!important;
  height:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:22px!important;
  border-radius:34px!important;
  overflow:hidden!important;
  background:radial-gradient(560px 340px at 82% 15%,rgba(24,201,245,.15),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  border:1px solid rgba(218,236,255,.10)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.18)!important;
}
html .spx-how-v63 .why52-network,
html .spx-how-v63 .why52-float{
  display:none!important;
}
html .spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:18px!important;
  overflow:visible!important;
}
html .spx-how-v63 .why52-visual,
html .spx-how-v63 .why52-visual.is-active,
html .spx-how-v63 .why52-visual.active{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:minmax(240px,.56fr) minmax(220px,.44fr)!important;
  align-items:center!important;
  gap:18px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:clamp(250px,24vw,330px)!important;
  margin:0!important;
  padding:18px!important;
  border-radius:28px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(218,236,255,.09)!important;
}
html .spx-how-v63 .why52-visual img{
  width:100%!important;
  height:auto!important;
  max-height:300px!important;
  object-fit:contain!important;
  filter:none!important;
}
html .spx-how-v63 .why52-visual figcaption,
html .spx-how-v63 .why52-visual-card{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html .spx-dashboard-command-v63,
html .spx-export-section-v61,
html .spx-pricing-preview-v62,
html .spx-roadmap-preview-v62{
  filter:none!important;
  transform:none;
  perspective:none!important;
}

/* A8.67B: beat the older high-specificity v52 sticky rules without adding a
   new controller. How is now one normal split section, so the long pinned
   track, sticky child and absolute visual stack are explicitly retired. */
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  height:auto!important;
  min-height:0!important;
  position:relative!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky.is-spx-hard-pinned,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky.is-spx-pin-after{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(320px,.78fr) minmax(520px,1.22fr)!important;
  gap:clamp(32px,5vw,76px)!important;
  align-items:start!important;
  padding:0!important;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  top:auto!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  gap:14px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  pointer-events:auto!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
  padding:clamp(18px,2vw,24px)!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.026))!important;
  border:1px solid rgba(218,236,255,.10)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  display:grid!important;
  grid-template-columns:minmax(240px,.56fr) minmax(220px,.44fr)!important;
  align-items:center!important;
  gap:18px!important;
  padding:18px!important;
  min-height:clamp(250px,24vw,330px)!important;
}

html .spx-dashboard-command-v63{min-height:390vh!important;background:#040914!important;opacity:1!important;visibility:visible!important;transform:none!important}
html .spx-dashboard-command-v63 .spx-dash-frame img[data-dashboard-image],
html .spx-dashboard-command-v63 .spx-dash-fade-ghost{object-fit:cover!important;object-position:center top!important}
html .spx-dashboard-command-v63 .spx-dash-panel{width:min(310px,calc(100vw - 40px))!important;padding:15px 16px!important;border-radius:20px!important}
html .spx-dashboard-command-v63 .spx-dash-panel b,
html .spx-dashboard-command-v63 .spx-dash-tabs b{opacity:.42!important;font-size:10px!important}
html .spx-dashboard-command-v63 .spx-dash-cursor{width:24px!important;height:24px!important;border-radius:999px!important;box-shadow:0 0 0 8px rgba(24,201,245,.10),0 0 30px rgba(24,201,245,.34)!important}

html .spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr 1fr 1fr!important;transition:grid-template-columns .36s cubic-bezier(.2,.8,.2,1)!important}
html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),
html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within){grid-template-columns:1.55fr .72fr .72fr!important}
html .spx-export-section-v61 .spx-export-card{min-width:0!important}
html .spx-export-section-v61 .spx-more-link{min-height:38px!important;padding:8px 12px!important}
html .spx-export-section-v61 .spx-more-link svg{width:13px!important;height:13px!important;flex:0 0 13px!important}

html .spx-support-hero-v62{grid-template-columns:minmax(0,1fr) minmax(320px,.58fr)!important}
html .spx-support-route-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html .spx-support-hero-copy h1{max-width:780px!important}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product]{position:relative!important;top:auto!important;left:auto!important;transform:none!important}
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{opacity:1!important;visibility:visible!important}
  html .spx-how-v63 .spx-why52-shell{width:min(100% - 28px,760px)!important}
  html .spx-how-v63 .spx-why52-track{height:auto!important;min-height:auto!important}
  html .spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;min-height:auto!important;display:grid!important;grid-template-columns:1fr!important;padding:46px 0!important}
  html .spx-how-v63 .spx-why52-copy,
  html .spx-how-v63 .spx-why52-stage{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    transform:none!important;
  }
  html .spx-how-v63 .spx-why52-stage{
    overflow:hidden!important;
    margin:18px 0 0!important;
  }
  html .spx-how-v63 .why52-network,
  html .spx-how-v63 .why52-network svg,
  html .spx-how-v63 svg{
    max-width:100%!important;
    overflow:hidden!important;
  }
  html .spx-how-v63 .why52-step,
  html .spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;margin:0!important;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important}
  html .spx-how-v63 .why52-visuals{width:100%!important;max-width:100%!important;margin:0!important}
  html .spx-how-v63 .why52-visual img{max-width:100%!important}
  html .spx-dashboard-command-v63{min-height:auto!important;padding:46px 14px!important}
  html .spx-dashboard-command-v63 .spx-dash-cursor{display:none!important}
  html .spx-export-section-v61 .spx-export-grid,
  html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:hover),
  html .spx-export-section-v61 .spx-export-grid:has(.spx-export-card:focus-within),
  html .spx-support-hero-v62,
  html .spx-support-route-grid,
  html .spx-summary-roadmap-v62,
  html .spx-roadmap-preview-v62{grid-template-columns:1fr!important}
  html .spx-roadmap-preview-v62{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    margin:18px 0 0!important;
    transform:none!important;
    overflow:hidden!important;
  }
  html .spx-roadmap-preview-v62 article{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    margin:0!important;
  }
  html .spx-export-section-v61 .spx-more-link{opacity:1!important;visibility:visible!important;transform:none!important}
}
@media(max-width:760px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{font-size:clamp(34px,10.5vw,43px)!important;line-height:1.04!important;max-width:100%!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead strong,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support{font-size:15px!important;line-height:1.5!important;max-width:100%!important}
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-what-head strong{font-size:clamp(24px,7.4vw,32px)!important}
  html .spx-support-hero-copy h1{font-size:clamp(31px,9.2vw,39px)!important;line-height:1.04!important}
  html .spx-support-route-grid article{min-height:auto!important}
}

/* A8.64 focused What-scene fix: only the word "Your" is gradient, the What view is compact, and the hero product fades before sticky release instead of drifting. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1 .spx-hero-gradient-word{
  display:inline-block!important;
  background:linear-gradient(105deg,#ffffff 0%,#dff8ff 24%,#18c9f5 58%,#2563eb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:0 0 34px rgba(24,201,245,.20)!important;
  padding:.02em .055em .075em 0!important;
  margin:-.02em -.025em -.075em 0!important;
}
html[data-theme="light"] .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1 .spx-hero-gradient-word{
  background:linear-gradient(105deg,#101828 0%,#075985 32%,#0ea5e9 65%,#2563eb 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:none!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(108px,12vh,132px)!important;
  width:min(900px,calc(100vw - 72px))!important;
  transform:translate3d(-50%,0,0)!important;
  transition:opacity .34s cubic-bezier(.2,.8,.2,1),visibility .34s step-end!important;
}
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:.98!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(420px,52vh,570px)!important;
  gap:8px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(520px,calc(100% - 34px))!important;
  max-height:40px!important;
  margin:0 0 -1px 17px!important;
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  object-fit:contain!important;
  object-position:left center!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(385px,48vh,520px)!important;
  padding:clamp(22px,3.2vw,38px)!important;
  border-radius:24px!important;
  align-items:center!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:700px!important;
  padding:clamp(17px,2.2vw,24px)!important;
  border-radius:22px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head{
  margin-bottom:12px!important;
  gap:7px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(22px,3.1vw,34px)!important;
  line-height:1.02!important;
  max-width:590px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-body{
  gap:clamp(14px,2vw,22px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(13.5px,1vw,15.5px)!important;
  line-height:1.55!important;
  max-width:500px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:10px 0!important;
  padding:9px 11px!important;
  border-radius:14px!important;
  font-size:12px!important;
  line-height:1.42!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-flow,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer{
  margin-top:10px!important;
}

@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] [data-spx-hero-product],
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active [data-spx-hero-product]{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    opacity:.64!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    width:min(100% - 24px,760px)!important;
    margin:22px auto 0!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
    min-height:auto!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
    width:100%!important;
    max-height:34px!important;
    margin-left:0!important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    min-height:auto!important;
    padding:20px!important;
  }
}

/* A8.65 — focused What-scene correction + public maintenance bar.
   The What builder background must lock in viewport while active and fade only; the panel enters earlier with a subtle motion. */
html{
  --spx-public-header-height:74px;
  --spx-maintenance-banner-height:0px;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(126px,14.2vh,164px)!important;
  width:min(860px,calc(100vw - 84px))!important;
  transform:translate3d(-50%,18px,0) scale(.985)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .42s cubic-bezier(.18,.82,.18,1),transform .42s cubic-bezier(.18,.82,.18,1),visibility 0s linear .42s!important;
  will-change:opacity,transform!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:.98!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(-50%,0,0) scale(1)!important;
  transition:opacity .42s cubic-bezier(.18,.82,.18,1),transform .42s cubic-bezier(.18,.82,.18,1),visibility 0s!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(400px,49vh,540px)!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(500px,calc(100% - 32px))!important;
  max-height:38px!important;
  margin:0 0 -1px 16px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(365px,45vh,496px)!important;
  padding:clamp(20px,3vw,34px)!important;
  border-radius:22px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:650px!important;
  padding:clamp(16px,2vw,22px)!important;
  border-radius:20px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(21px,2.75vw,30px)!important;
  max-width:540px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(13px,.92vw,14.5px)!important;
  max-width:470px!important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:9px 0!important;
  padding:8px 10px!important;
  border-radius:13px!important;
  font-size:11.5px!important;
}
@media(max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
  html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    width:min(100% - 24px,760px)!important;
    margin:26px auto 0!important;
  }
}

/* Public maintenance/update notice: one fixed, premium bar directly below the navigator. */
.maintenance-banner{
  position:fixed!important;
  left:50%!important;
  top:calc(var(--spx-public-header-height,74px) + 10px)!important;
  transform:translateX(-50%)!important;
  z-index:89!important;
  width:min(1180px,calc(100vw - 32px))!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 12px 10px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  border:1px solid rgba(245,184,91,.26)!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,rgba(8,17,31,.92),rgba(11,28,44,.90))!important;
  box-shadow:0 16px 48px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.04) inset!important;
  color:var(--text)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
}
.maintenance-banner::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:999px;
  background:#f5b85b;
  box-shadow:0 0 18px rgba(245,184,91,.72);
}
.maintenance-banner strong{color:#ffe9bd!important;font-weight:950!important;white-space:nowrap!important;}
.maintenance-banner span{color:rgba(236,248,255,.82)!important;font-weight:720!important;min-width:0!important;}
.maintenance-banner a{margin-left:auto!important;color:#06101e!important;background:linear-gradient(135deg,#f5b85b,#ffd897)!important;text-decoration:none!important;border-radius:999px!important;padding:8px 12px!important;font-weight:950!important;box-shadow:0 8px 22px rgba(245,184,91,.22)!important;}
html[data-theme="light"] .maintenance-banner{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(238,247,255,.92))!important;border-color:rgba(217,119,6,.22)!important;box-shadow:0 16px 42px rgba(20,34,62,.14)!important;}
html[data-theme="light"] .maintenance-banner strong{color:#7a3d00!important;}
html[data-theme="light"] .maintenance-banner span{color:#334155!important;}
@media(max-width:720px){
  .maintenance-banner{
    top:calc(var(--spx-public-header-height,68px) + 8px)!important;
    width:calc(100vw - 24px)!important;
    border-radius:22px!important;
    justify-content:flex-start!important;
    padding:11px 12px!important;
  }
  .maintenance-banner a{width:100%!important;text-align:center!important;margin-left:0!important;}
}

/* ==========================================================================
   A8.66 — What lock/fade correction + full-width maintenance update bar
   ========================================================================== */
html .spx-hero-v26[data-hero-scrollstory]{
  --spx-what-scene-opacity:0;
}

/* The crisp What layer is the only visible What copy. Keep the duplicate DOM
   layer inside the product stack hidden so no dark block remains after fade. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
}

html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(136px,15.8vh,178px)!important;
  opacity:var(--spx-what-scene-opacity,0)!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(-50%,10px,0) scale(.992)!important;
  transition:opacity .38s cubic-bezier(.18,.82,.18,1),transform .38s cubic-bezier(.18,.82,.18,1),visibility 0s linear .38s!important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  opacity:var(--spx-what-scene-opacity,0)!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translate3d(-50%,0,0) scale(1)!important;
  transition:opacity .38s cubic-bezier(.18,.82,.18,1),transform .38s cubic-bezier(.18,.82,.18,1),visibility 0s!important;
}

/* Topbar slightly left, as requested. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  margin-left:8px!important;
}

/* During the What focus stage the product uses the restored fullscreen transform,
   then fixes only after that transform is reached so the hero animation stays owned
   by the progress controller. */
@media (min-width:981px){
  .v26-product-atmosphere.spx-what-product-locked{
    position:fixed!important;
    left:var(--spx-hero-product-left,58.55%)!important;
    top:var(--spx-hero-product-top,45.9%)!important;
    width:min(1146px,82.5vw)!important;
    height:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    aspect-ratio:1919 / 913!important;
    transform-origin:50% 44%!important;
    transform:translate(var(--spx-hero-product-tx,-15.4%),var(--spx-hero-product-ty,-18.6%)) perspective(1480px) rotateY(var(--spx-hero-product-ry,-6deg)) rotateX(var(--spx-hero-product-rx,2.8deg)) rotateZ(var(--spx-hero-product-rz,-.35deg)) scale(var(--spx-hero-product-scale,1)) scaleY(var(--spx-hero-product-fold-scale-y,1)) translate3d(calc(var(--spx-v26-x,0px) * .025),calc(var(--spx-v26-y,0px) * .018 + var(--spx-hero-product-fold-y,0px)),0)!important;
    opacity:var(--spx-hero-product-opacity,.82)!important;
    filter:saturate(var(--spx-hero-product-saturate,1)) brightness(var(--spx-hero-product-brightness,.84))!important;
    pointer-events:none!important;
    will-change:opacity,filter!important;
  }
}

/* Fade every visual piece together; do not leave a dark What card/background
   behind when the product image disappears. */
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory]:not(.spx-dom-view-active) .spx-v26-what-crisp-layer *{
  pointer-events:none!important;
}

/* Public maintenance/update notice: full-width yellow bar directly below nav,
   not a pill. It remains fixed during scroll. */
.maintenance-banner{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:var(--spx-public-header-height,74px)!important;
  transform:none!important;
  z-index:89!important;
  width:100%!important;
  min-height:42px!important;
  margin:0!important;
  padding:9px var(--side)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  flex-wrap:nowrap!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,#f6c453,#ffd777)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.20)!important;
  color:#241400!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.maintenance-banner::before{
  content:""!important;
  width:8px!important;
  height:8px!important;
  flex:0 0 8px!important;
  border-radius:999px!important;
  background:#3a2400!important;
  box-shadow:none!important;
}
.maintenance-banner strong,
html[data-theme="light"] .maintenance-banner strong{
  color:#241400!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
.maintenance-banner span,
html[data-theme="light"] .maintenance-banner span{
  color:#3b2600!important;
  font-weight:760!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.maintenance-banner a,
html[data-theme="light"] .maintenance-banner a{
  margin-left:8px!important;
  color:#241400!important;
  background:rgba(255,255,255,.38)!important;
  border:1px solid rgba(36,20,0,.16)!important;
  text-decoration:none!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  font-weight:950!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.maintenance-banner a:hover{background:rgba(255,255,255,.58)!important;}
@media(max-width:720px){
  .maintenance-banner{
    top:var(--spx-public-header-height,68px)!important;
    width:100%!important;
    border-radius:0!important;
    justify-content:flex-start!important;
    padding:9px 14px!important;
    gap:9px!important;
  }
  .maintenance-banner span{white-space:normal!important;line-height:1.28!important;}
  .maintenance-banner a{margin-left:auto!important;width:auto!important;text-align:center!important;}
}

/* ========================================================================== 
   A8.67 — Screen consistency + What view polish + How stabilization
   Goal: keep 1080p/1440p/ultrawide visually comparable without touching
   builder-performance internals.
   ========================================================================== */
:root{
  --spx-public-max: 1240px;
  --spx-public-wide-max: 1440px;
  --spx-hero-title-fluid: clamp(62px, min(7.75vw, 11.25vh), 126px);
  --spx-hero-lead-fluid: clamp(16px, min(1.18vw, 2.05vh), 20px);
}

/* Screen consistency: cap hero copy and type so 2560x1440 does not feel like a
   different, oversized website compared with 1920x1080. */
html .spx-hero-v26[data-hero-scrollstory]{
  min-height: clamp(860px, 104svh, 1120px) !important;
  padding-top: clamp(132px, 11svh, 182px) !important;
  padding-bottom: clamp(150px, 14svh, 218px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
  width:min(var(--spx-public-max), 100%) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  max-width:min(700px, 64vw) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
  font-size:var(--spx-hero-title-fluid) !important;
  line-height:.86 !important;
  letter-spacing:clamp(-.085em, -.072em, -.06em) !important;
  max-width:780px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-lead{
  font-size:var(--spx-hero-lead-fluid) !important;
  max-width:600px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-support{
  max-width:590px !important;
}

@media (min-width: 2200px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    width:min(1280px, 100%) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:120px !important;
  }
}
@media (max-width: 1180px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:min(680px, 72vw) !important;
  }
}
@media (max-width: 720px){
  html .spx-hero-v26[data-hero-scrollstory]{
    min-height:auto !important;
    padding-top:112px !important;
    padding-bottom:128px !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:100% !important;
  }
}

/* What view: keep the current hero animation owner intact, but make the DOM view
   smaller, sharper and higher so it reads like a builder canvas instead of a
   large low-floating card. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(96px, 10.8vh, 138px) !important;
  width:min(760px, calc(100vw - 96px)) !important;
  transform:translate3d(-50%, 6px, 0) scale(.994) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer{
  transform:translate3d(-50%, 0, 0) scale(1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(340px, 42vh, 472px) !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(420px, calc(100% - 28px)) !important;
  max-height:32px !important;
  margin:0 0 -1px 6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(318px, 39vh, 430px) !important;
  padding:clamp(16px, 2.25vw, 26px) !important;
  border-radius:20px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  max-width:560px !important;
  padding:clamp(14px, 1.55vw, 18px) !important;
  border-radius:18px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  font-size:clamp(20px, 2.1vw, 26px) !important;
  line-height:1.06 !important;
  max-width:490px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  font-size:clamp(12.5px, .82vw, 13.8px) !important;
  line-height:1.5 !important;
  max-width:430px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice{
  margin:7px 0 !important;
  padding:7px 9px !important;
  font-size:11px !important;
  line-height:1.34 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  gap:7px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  padding:8px 9px !important;
}

/* How Spixor Works final stable layout. This intentionally avoids another heavy
   rebuild: the existing markup stays, but the active step/visual becomes a clear
   desktop split and mobile becomes stacked. */
html .spx-why-section.spx-why-v52.spx-how-v63{
  margin-top:clamp(-210px, -11vw, -120px) !important;
  padding:clamp(260px, 20vw, 390px) var(--side) clamp(96px, 9vw, 150px) !important;
  background:transparent !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
  perspective:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63::before,
html .spx-why-section.spx-why-v52.spx-how-v63::after{
  display:none !important;
  content:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
  width:min(var(--spx-public-wide-max), 100%) !important;
  margin-inline:auto !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  min-height:clamp(1780px, 245vh, 2500px) !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:sticky !important;
  top:clamp(72px, 9vh, 104px) !important;
  height:calc(100svh - clamp(92px, 11vh, 124px)) !important;
  min-height:620px !important;
  display:grid !important;
  grid-template-columns:minmax(330px, 460px) minmax(560px, 1fr) !important;
  gap:clamp(30px, 4vw, 64px) !important;
  align-items:center !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
  position:relative !important;
  height:min(500px, calc(100svh - 180px)) !important;
  min-height:410px !important;
  overflow:hidden !important;
  display:block !important;
  filter:none !important;
  transform:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head{
  position:relative !important;
  z-index:3 !important;
  margin-bottom:18px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-nav{
  position:relative !important;
  z-index:3 !important;
  margin-bottom:14px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack{
  position:relative !important;
  height:calc(100% - 168px) !important;
  min-height:245px !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-height:0 !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(0, 18px, 0) !important;
  filter:none !important;
  transition:opacity .42s cubic-bezier(.16,1,.3,1), transform .42s cubic-bezier(.16,1,.3,1), visibility .42s !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate3d(0,0,0) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step p,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step ul{
  opacity:1 !important;
  visibility:visible !important;
  max-height:none !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  position:relative !important;
  width:min(100%, 980px) !important;
  height:min(720px, calc(100svh - 116px)) !important;
  min-height:560px !important;
  justify-self:end !important;
  overflow:visible !important;
  filter:none !important;
  transform:none !important;
  perspective:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate3d(48px, 18px, 0) scale(.985) !important;
  filter:none !important;
  transition:opacity .48s cubic-bezier(.16,1,.3,1), transform .48s cubic-bezier(.16,1,.3,1), visibility .48s !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
  position:absolute !important;
  inset:clamp(10px, 2vh, 24px) clamp(-160px, -9vw, -80px) clamp(72px, 8vh, 104px) 0 !important;
  width:calc(100% + clamp(88px, 9vw, 170px)) !important;
  height:calc(100% - clamp(92px, 10vh, 126px)) !important;
  object-fit:contain !important;
  object-position:center right !important;
  border:0 !important;
  box-shadow:0 34px 98px rgba(0,0,0,.20), 0 0 70px rgba(24,201,245,.08) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual figcaption{
  left:18px !important;
  bottom:8px !important;
  width:min(340px, 44vw) !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 + *{
  filter:none !important;
  transform:none !important;
  perspective:none !important;
  opacity:1 !important;
}

@media (max-width: 1180px){
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(310px, 430px) minmax(480px, 1fr) !important;
    gap:34px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    min-height:520px !important;
  }
}
@media (max-width: 980px){
  html .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:-110px !important;
    padding:170px var(--side) 76px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
    min-height:auto !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:22px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step-stack{
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    gap:14px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    min-height:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    padding:16px !important;
    border-radius:18px !important;
    background:rgba(7,14,28,.52) !important;
    border:1px solid rgba(107,232,255,.13) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visuals{
    position:relative !important;
    inset:auto !important;
    display:grid !important;
    gap:16px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    min-height:360px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    max-height:300px !important;
    object-fit:contain !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual figcaption{
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    width:100% !important;
    margin-top:10px !important;
  }
}


/* ==========================================================================
   A8.69 — hero title sizing + capture-based What product lock
   --------------------------------------------------------------------------
   Keep the hero copy in the same visual position, but make the headline more
   present across 1080p/1440p. The product lock itself is now captured in JS, so
   this CSS only provides the normal animated state and avoids forcing a second
   fixed geometry when .spx-what-product-locked is added.
   ========================================================================== */
:root{
  --spx-hero-title-fluid: clamp(76px, min(8.9vw, 12.8vh), 148px);
}
html .spx-hero-v26[data-hero-scrollstory]{
  padding-top: clamp(118px, 9.6svh, 158px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
  transform: translate3d(0,-12px,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
  font-size: var(--spx-hero-title-fluid) !important;
  line-height: .84 !important;
  max-width: 860px !important;
}
@media (min-width: 2200px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size: 142px !important;
  }
}
@media (max-width: 980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    transform:none !important;
  }
}
@media (max-width: 720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size: clamp(40px, 12vw, 56px) !important;
    line-height: .98 !important;
  }
}

@media (min-width:981px){
  /* The fixed What-lock geometry is written inline by JS from the exact rendered
     rect. Do not let legacy class rules snap the product to a different top/left
     at the lock moment. */
  .v26-product-atmosphere.spx-what-product-locked{
    left: var(--spx-what-lock-left, auto);
    top: var(--spx-what-lock-top, auto);
  }
}


/* ==========================================================================
   A8.70 — What lock return + interactive What content polish
   ========================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  background:
    radial-gradient(circle at 18% 16%, rgba(31,211,255,.13), transparent 34%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head strong{
  letter-spacing:-.035em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-copy p{
  max-width:58ch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  gap:8px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  border:1px solid rgba(111,229,255,.10) !important;
  cursor:pointer !important;
  text-align:left !important;
  color:inherit !important;
  transition:background .24s ease,border-color .24s ease,transform .24s ease,box-shadow .24s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:focus-visible{
  border-color:rgba(111,229,255,.26) !important;
  transform:translate3d(2px,0,0) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.025) !important;
  outline:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row.is-active{
  background:linear-gradient(135deg,rgba(25,211,255,.19),rgba(87,112,255,.09)) !important;
  border-color:rgba(94,231,255,.30) !important;
  box-shadow:0 16px 38px rgba(7,20,42,.20), inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card[data-spx-what-state="structure"]{
  background:
    radial-gradient(circle at 86% 22%, rgba(121,117,255,.13), transparent 35%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-content-card[data-spx-what-state="launch"]{
  background:
    radial-gradient(circle at 82% 20%, rgba(255,208,86,.13), transparent 34%),
    linear-gradient(145deg, rgba(7,13,28,.76), rgba(8,12,24,.56)) !important;
}
@media (max-width:720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:hover,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row:focus-visible{
    transform:none !important;
  }
}

/* ========================================================================
   A8.71 — What content rework + smoother hero → How handoff
   ------------------------------------------------------------------------
   Keep the repaired hero animation, but make the What layer feel like a
   compact interactive builder command view. Also let How fade in while the
   builder/What layer fades out instead of leaving a dark pause.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(92px, 10.2vh, 128px) !important;
  width:min(720px, calc(100vw - 96px)) !important;
  transition:
    opacity .52s cubic-bezier(.16,1,.3,1),
    transform .52s cubic-bezier(.16,1,.3,1),
    visibility .52s step-end !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-phase-what-fade-out .spx-v26-what-crisp-layer{
  transform:translate3d(-50%, -8px, 0) scale(.992) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-shell{
  min-height:clamp(316px, 38vh, 438px) !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{
  width:min(410px, calc(100% - 28px)) !important;
  max-height:31px !important;
  margin-left:4px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
  min-height:clamp(292px, 34vh, 394px) !important;
  padding:clamp(14px, 1.9vw, 22px) !important;
  display:grid !important;
  align-items:center !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
  width:min(100%, 540px) !important;
  max-width:540px !important;
  padding:clamp(14px, 1.55vw, 18px) !important;
  display:grid !important;
  gap:12px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.045)) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head-a871{
  margin:0 !important;
  gap:6px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-head-a871 strong{
  font-size:clamp(21px, 1.95vw, 28px) !important;
  line-height:1.02 !important;
  max-width:430px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-console{
  display:grid !important;
  grid-template-columns:minmax(0, 1.05fr) minmax(170px, .8fr) !important;
  gap:12px !important;
  align-items:stretch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card{
  position:relative !important;
  min-height:128px !important;
  border-radius:18px !important;
  padding:15px 15px 14px !important;
  background:
    radial-gradient(160px 120px at 18% 0%, rgba(34,211,238,.18), transparent 68%),
    linear-gradient(145deg, rgba(6,14,28,.82), rgba(10,22,41,.55)) !important;
  border:1px solid rgba(147,231,255,.16) !important;
  overflow:hidden !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.16) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card::after{
  content:"" !important;
  position:absolute !important;
  right:14px !important;
  bottom:14px !important;
  width:64px !important;
  height:36px !important;
  border-radius:13px !important;
  border:1px solid rgba(107,232,255,.18) !important;
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(37,99,235,.10)) !important;
  opacity:.9 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-preview-dot{
  display:inline-flex !important;
  width:9px !important;
  height:9px !important;
  border-radius:999px !important;
  background:#22d3ee !important;
  box-shadow:0 0 18px rgba(34,211,238,.55) !important;
  margin-bottom:16px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card b{
  display:block !important;
  color:var(--text) !important;
  font-size:14px !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card p{
  margin:7px 0 0 !important;
  max-width:270px !important;
  color:var(--secondary) !important;
  font-size:12.2px !important;
  line-height:1.45 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-panel{
  display:grid !important;
  gap:7px !important;
  align-content:stretch !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row{
  display:grid !important;
  gap:3px !important;
  text-align:left !important;
  min-height:0 !important;
  padding:10px 11px !important;
  border-radius:15px !important;
  cursor:pointer !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row b{
  font-size:12px !important;
  letter-spacing:.02em !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-row span{
  font-size:11px !important;
  line-height:1.24 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 !important;
  padding:7px 9px !important;
  border-radius:14px !important;
  font-size:11px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871 span{
  flex:1 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer-a871{
  margin-top:0 !important;
  gap:7px !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-footer-a871 span{
  font-size:10.5px !important;
  padding:5px 7px !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity, 1) !important;
  transform:scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-head,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track{
  opacity:calc(.08 + (var(--spx-how-underlay-opacity,0) * .92)) !important;
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-console{
    grid-template-columns:1fr !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-preview-card{
    min-height:112px !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871{
    flex-wrap:wrap !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-alpha-notice-a871 span{
    white-space:normal !important;
  }
}

/* ========================================================================
   A8.72 — What placement, How CTA and smoother builder → How handoff
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
  top:clamp(118px, 12.8vh, 168px) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:34px !important;
  margin-top:2px !important;
  padding:8px 12px 8px 14px !important;
  border-radius:999px !important;
  text-decoration:none !important;
  color:#03131f !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  background:linear-gradient(135deg, #7eeaff, #42b7ff 52%, #8d8cff) !important;
  box-shadow:0 12px 30px rgba(19,190,255,.16), inset 0 1px 0 rgba(255,255,255,.44) !important;
  overflow:hidden !important;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px auto -2px -34% !important;
  width:34% !important;
  transform:skewX(-18deg) translateX(-120%) !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent) !important;
  opacity:.8 !important;
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  position:relative !important;
  z-index:1 !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  width:12px !important;
  height:12px !important;
  transition:transform .22s ease !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible{
  transform:translate3d(0,-1px,0) !important;
  filter:saturate(1.05) brightness(1.04) !important;
  box-shadow:0 18px 42px rgba(19,190,255,.24), inset 0 1px 0 rgba(255,255,255,.55) !important;
  outline:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link:focus-visible svg{
  transform:translate3d(2px,0,0) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52{
  opacity:var(--spx-how-underlay-opacity, 0) !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:calc(.02 + (var(--spx-how-underlay-opacity,0) * .98)) !important;
  transform:none !important;
  filter:none !important;
}
@media (max-width:720px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer{
    top:clamp(84px, 10vh, 118px) !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
    width:100% !important;
    min-height:42px !important;
  }
}


/* ========================================================================
   A8.73 — What CTA interaction + real scroll handoff to How
   ------------------------------------------------------------------------
   Keep the How section as the next physical section. The What CTA must be
   clickable even inside the crisp overlay, and How should not fade in under
   the builder while the hero scene is still pinned.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-builder-content-card,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link{
  pointer-events:auto !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  z-index:30 !important;
  pointer-events:auto !important;
  user-select:none !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
  content:"" !important;
  position:absolute !important;
  inset:-8px !important;
  border-radius:inherit !important;
  pointer-events:auto !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52 .spx-why52-sticky{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63{
  scroll-margin-top:calc(var(--spx-public-header-height, 84px) + 18px) !important;
}

/* ========================================================================
   A8.75 — Reliable What → How CTA without touching the repaired builder lock
   ------------------------------------------------------------------------
   The CTA inside the preview can sit below pointer-event safety layers. This
   body-level floating button is visually aligned over it and is the real hit
   target, so the preview overlay can no longer swallow the click. A8.74's
   heavier physical-handoff overrides are intentionally not carried forward,
   keeping the A8.73 builder-image position intact.
   ======================================================================== */
.spx-floating-how-cta{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  z-index:2147483000 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:0 !important;
  border-radius:999px !important;
  padding:0 14px !important;
  margin:0 !important;
  color:#03131f !important;
  font-size:11.5px !important;
  font-weight:900 !important;
  letter-spacing:.02em !important;
  line-height:1 !important;
  background:linear-gradient(135deg, #7eeaff, #42b7ff 52%, #8d8cff) !important;
  box-shadow:0 12px 30px rgba(19,190,255,.18), inset 0 1px 0 rgba(255,255,255,.46) !important;
  cursor:pointer !important;
  pointer-events:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  touch-action:manipulation !important;
  transform:translate3d(-9999px,-9999px,0) !important;
  transition:opacity .18s ease, filter .22s ease, box-shadow .22s ease !important;
}
.spx-floating-how-cta.is-visible{
  pointer-events:auto !important;
  opacity:1 !important;
  visibility:visible !important;
}
.spx-floating-how-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px auto -2px -34% !important;
  width:34% !important;
  transform:skewX(-18deg) translateX(-120%) !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.56), transparent) !important;
  opacity:.8 !important;
  transition:transform .52s cubic-bezier(.16,1,.3,1) !important;
  pointer-events:none !important;
}
.spx-floating-how-cta span,
.spx-floating-how-cta svg{
  position:relative !important;
  z-index:1 !important;
}
.spx-floating-how-cta svg{
  width:12px !important;
  height:12px !important;
  transition:transform .22s ease !important;
}
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.05) brightness(1.04) !important;
  box-shadow:0 18px 42px rgba(19,190,255,.25), inset 0 1px 0 rgba(255,255,255,.55) !important;
  outline:none !important;
}
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(2px,0,0) !important;
}
@media (max-width:720px){
  .spx-floating-how-cta{
    min-height:42px !important;
    font-size:12px !important;
  }
}

/* ========================================================================
   A8.76 — What CTA click shield fix
   ------------------------------------------------------------------------
   The hero copy/actions layer can remain in the same visual stacking context
   while fully transparent. During the What state it must not receive pointer
   events, otherwise it can swallow clicks meant for the How CTA.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions{
  pointer-events:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions *{
  pointer-events:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-what-crisp-layer *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link{
  pointer-events:auto !important;
}
.spx-floating-how-cta{
  z-index:2147483647 !important;
  isolation:isolate !important;
}
.spx-floating-how-cta.is-visible{
  pointer-events:auto !important;
}

/* ========================================================================
   A8.77 — What CTA hover feedback + hidden hero selection shield
   ------------------------------------------------------------------------
   The body-level CTA is the real click target while the visual CTA remains in
   the pinned What preview. Bridge hover/focus states to both elements and make
   the now-transparent hero copy non-selectable while the What view is active.
   ======================================================================== */
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy *,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-actions *{
  -webkit-user-select:none !important;
  user-select:none !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-copy{
  cursor:default !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.1) brightness(1.075) !important;
  box-shadow:0 20px 48px rgba(19,190,255,.30), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.62) !important;
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) scale(1.025) !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(470%) !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  filter:saturate(1.08) brightness(1.06) !important;
  box-shadow:0 18px 44px rgba(19,190,255,.26), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}


/* ========================================================================
   A8.78 — Keep What → How CTA label on one line
   ------------------------------------------------------------------------
   The floating CTA is wider than the visual source button on some breakpoints.
   Keep label/icon as a single-line pill and prevent hover scale from forcing
   the text into two rows.
   ======================================================================== */
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  white-space:nowrap !important;
  flex-wrap:nowrap !important;
  min-width:clamp(148px, 10.5vw, 174px) !important;
}
.spx-floating-how-cta span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  line-height:1 !important;
}
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  flex:0 0 auto !important;
}
@media (max-width:720px){
  .spx-floating-how-cta,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
    min-width:154px !important;
  }
}

/* ========================================================================
   A8.79 — Make the working What → How CTA feel animated, not just brighter
   ------------------------------------------------------------------------
   Keep the A8.76/A8.77 click + selection shields intact. This only improves
   hover/focus feedback on the body-level CTA and mirrors it to the visible
   CTA inside the What card. The label remains one line.
   ======================================================================== */
@keyframes spxHowCtaArrowNudgeA879{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(5px,0,0)}
}
@keyframes spxHowCtaHaloA879{
  0%,100%{opacity:.24;transform:translate3d(0,-50%,0) scale(.86)}
  50%{opacity:.42;transform:translate3d(0,-50%,0) scale(1.04)}
}
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  background-size:180% 100% !important;
  background-position:0% 50% !important;
  transition:
    opacity .18s ease,
    filter .24s ease,
    box-shadow .24s ease,
    background-position .38s cubic-bezier(.16,1,.3,1),
    transform .30s cubic-bezier(.16,1,.3,1) !important;
}
.spx-floating-how-cta::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
  content:"" !important;
  position:absolute !important;
  right:7px !important;
  top:50% !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35) !important;
  opacity:.18 !important;
  transform:translate3d(0,-50%,0) scale(.82) !important;
  transition:opacity .28s ease, transform .34s cubic-bezier(.16,1,.3,1), background .28s ease !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.spx-floating-how-cta span,
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link span,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  transition:transform .30s cubic-bezier(.16,1,.3,1), opacity .24s ease !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  background-position:100% 50% !important;
  filter:saturate(1.18) brightness(1.11) !important;
  box-shadow:
    0 18px 48px rgba(19,190,255,.34),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 34px rgba(95,136,255,.18),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) translate3d(0,-2px,0) scale(1.055) !important;
}
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after{
  opacity:.42 !important;
  background:rgba(255,255,255,.30) !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
  animation:spxHowCtaHaloA879 1.15s ease-in-out infinite !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before{
  transform:skewX(-18deg) translateX(520%) !important;
  opacity:.95 !important;
}
.spx-floating-how-cta.is-hovered span,
.spx-floating-how-cta:hover span,
.spx-floating-how-cta:focus-visible span{
  transform:translate3d(-2px,0,0) !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg{
  transform:translate3d(5px,0,0) !important;
  animation:spxHowCtaArrowNudgeA879 .86s ease-in-out infinite !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  background-position:100% 50% !important;
  filter:saturate(1.16) brightness(1.09) !important;
  box-shadow:
    0 18px 46px rgba(19,190,255,.30),
    0 0 0 1px rgba(255,255,255,.22),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
  transform:translate3d(0,-2px,0) scale(1.035) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:.36 !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible span{
  transform:translate3d(-2px,0,0) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(5px,0,0) !important;
}
@media (prefers-reduced-motion: reduce){
  .spx-floating-how-cta,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link,
  .spx-floating-how-cta::before,
  .spx-floating-how-cta::after,
  .spx-floating-how-cta svg,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::before,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
    animation:none !important;
    transition:none !important;
  }
}

/* ========================================================================
   A8.80 — Stable What → How CTA hover polish
   ------------------------------------------------------------------------
   A8.79 made the CTA feel more animated, but animating the root transform of
   the body-level floating button can fight with the JS transform that aligns
   it over the visible CTA. Keep the button position completely stable and make
   the interaction feel alive through glow, sheen, arrow and halo motion only.
   ======================================================================== */
@keyframes spxHowCtaGlowA880{
  0%,100%{opacity:.28; transform:translate3d(0,-50%,0) scale(.86)}
  50%{opacity:.54; transform:translate3d(0,-50%,0) scale(1.08)}
}
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) !important;
  transition:
    opacity .18s ease,
    filter .28s ease,
    box-shadow .34s cubic-bezier(.16,1,.3,1),
    background-position .45s cubic-bezier(.16,1,.3,1) !important;
}
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transform:none !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  transform:var(--spx-floating-how-transform, translate3d(-9999px,-9999px,0)) !important;
  background-position:100% 50% !important;
  filter:saturate(1.16) brightness(1.1) !important;
  box-shadow:
    0 18px 44px rgba(19,190,255,.34),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 36px rgba(95,136,255,.20),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  transform:none !important;
  background-position:100% 50% !important;
  filter:saturate(1.14) brightness(1.08) !important;
  box-shadow:
    0 16px 40px rgba(19,190,255,.28),
    0 0 0 1px rgba(255,255,255,.24),
    0 0 30px rgba(95,136,255,.16),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:.46 !important;
  background:rgba(255,255,255,.32) !important;
  transform:translate3d(0,-50%,0) scale(1) !important;
  animation:spxHowCtaGlowA880 1.35s ease-in-out infinite !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::before{
  transform:skewX(-18deg) translateX(520%) !important;
  opacity:.95 !important;
}
.spx-floating-how-cta.is-hovered span,
.spx-floating-how-cta:hover span,
.spx-floating-how-cta:focus-visible span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover span,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible span{
  transform:none !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(4px,0,0) !important;
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  .spx-floating-how-cta::after,
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after{
    animation:none !important;
  }
}

/* ========================================================================
   A8.81 — Softer What → How CTA hover glow
   ------------------------------------------------------------------------
   Keep the working body-level CTA position/click shield from A8.80, but make
   the hover less abrupt and remove the circular halo behind the arrow/button.
   ======================================================================== */
.spx-floating-how-cta,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link{
  transition:
    opacity .22s ease,
    filter .42s cubic-bezier(.16,1,.3,1),
    box-shadow .52s cubic-bezier(.16,1,.3,1),
    background-position .58s cubic-bezier(.16,1,.3,1) !important;
}
.spx-floating-how-cta.is-hovered,
.spx-floating-how-cta:hover,
.spx-floating-how-cta:focus-visible{
  filter:saturate(1.08) brightness(1.045) !important;
  box-shadow:
    0 14px 34px rgba(19,190,255,.22),
    0 0 0 1px rgba(255,255,255,.20),
    0 0 22px rgba(95,136,255,.11),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible{
  filter:saturate(1.06) brightness(1.04) !important;
  box-shadow:
    0 12px 30px rgba(19,190,255,.19),
    0 0 0 1px rgba(255,255,255,.18),
    0 0 18px rgba(95,136,255,.09),
    inset 0 1px 0 rgba(255,255,255,.54) !important;
}
.spx-floating-how-cta::after,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link::after,
.spx-floating-how-cta.is-hovered::after,
.spx-floating-how-cta:hover::after,
.spx-floating-how-cta:focus-visible::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::after,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::after{
  opacity:0 !important;
  animation:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.spx-floating-how-cta.is-hovered::before,
.spx-floating-how-cta:hover::before,
.spx-floating-how-cta:focus-visible::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover::before,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible::before{
  opacity:.62 !important;
  transform:skewX(-18deg) translateX(420%) !important;
  transition:transform .72s cubic-bezier(.16,1,.3,1), opacity .48s ease !important;
}
.spx-floating-how-cta svg,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-link svg{
  transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .38s ease !important;
}
.spx-floating-how-cta.is-hovered svg,
.spx-floating-how-cta:hover svg,
.spx-floating-how-cta:focus-visible svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link.is-hovered svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:hover svg,
html .spx-hero-v26[data-hero-scrollstory].spx-dom-view-active .spx-v26-how-link:focus-visible svg{
  transform:translate3d(3px,0,0) !important;
}

/* ========================================================================
   A8.82 — remove empty gap between What fade-out and How Spixor Works
   ------------------------------------------------------------------------
   A8.81 leaves the physical How section intact, but the final How layout still
   had a large transparent top padding/overlap buffer. When the builder fades
   out, users first see that empty transparent area. Keep How as the next real
   section, but pull its visible content closer to the handoff.
   ======================================================================== */
html .spx-why-section.spx-why-v52.spx-how-v63{
  margin-top:clamp(-92px, -4.6vw, -44px) !important;
  padding-top:clamp(86px, 9.5vh, 132px) !important;
  opacity:1 !important;
  visibility:visible !important;
  background:transparent !important;
  transform:none !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
  min-height:clamp(1680px, 230vh, 2380px) !important;
}
html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  top:clamp(78px, 8.8vh, 104px) !important;
}
html .spx-hero-story-active .spx-why-section.spx-why-v52.spx-how-v63{
  opacity:1 !important;
  visibility:visible !important;
}
@media (max-width:980px){
  html .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:-46px !important;
    padding-top:72px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track{
    min-height:auto !important;
  }
}

/* ========================================================================
   A8.83 — Immediate builder → How visual handoff
   ------------------------------------------------------------------------
   When the builder/What scene fades out, How Spixor Works must already be
   visible in the same viewport. This is only a temporary visual handoff while
   the hero scrollstory is pinned; the real #why-spixor section remains the
   physical next section after the hero releases.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  top:calc(var(--spx-public-header-height, 84px) + 8px) !important;
  bottom:0 !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:clamp(34px, 5.4vh, 62px) var(--side) clamp(42px, 5.8vh, 72px) !important;
  opacity:var(--spx-how-underlay-opacity, 0) !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:14 !important;
  overflow:hidden !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  background:transparent !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  min-height:0 !important;
  height:100% !important;
  width:min(var(--spx-public-wide-max), 100%) !important;
  margin:0 auto !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  overflow:visible !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(330px, 455px) minmax(520px, 1fr) !important;
  align-items:center !important;
  gap:clamp(26px, 3.8vw, 56px) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  width:min(100%, 900px) !important;
  height:min(600px, calc(100svh - var(--spx-public-header-height, 84px) - 130px)) !important;
  min-height:430px !important;
  justify-self:end !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"],
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
  inset:clamp(8px, 1.5vh, 18px) clamp(-120px, -7vw, -58px) clamp(58px, 6vh, 88px) 0 !important;
  width:calc(100% + clamp(64px, 7vw, 130px)) !important;
  height:calc(100% - clamp(72px, 8vh, 108px)) !important;
}
@media (max-width:980px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    opacity:1 !important;
    transform:none !important;
    padding:120px var(--side) 72px !important;
    overflow:visible !important;
  }
}


/* ========================================================================
   A8.84 — real immediate How handoff during builder fade-out
   ------------------------------------------------------------------------
   A8.83 defined the visual handoff CSS, but the active JS controller still
   removed the phase class. These rules make the handoff visually explicit
   once that phase is active: How is fixed in the viewport, above the fading
   hero scene but below the public nav, so there is no empty gap after the
   builder fades.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase{
  --spx-how-underlay-opacity:var(--spx-how-underlay-opacity,1);
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:fixed !important;
  inset:calc(var(--spx-public-header-height,84px) + 10px) 0 0 0 !important;
  width:100vw !important;
  height:calc(100svh - var(--spx-public-header-height,84px) - 10px) !important;
  min-height:0 !important;
  margin:0 !important;
  padding:clamp(34px,5vh,58px) var(--side) clamp(42px,5vh,68px) !important;
  opacity:var(--spx-how-underlay-opacity,1) !important;
  visibility:visible !important;
  pointer-events:none !important;
  z-index:95 !important;
  background:transparent !important;
  overflow:hidden !important;
  transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
  filter:none !important;
  transition:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  width:min(var(--spx-public-wide-max,1240px),calc(100vw - (var(--side) * 2))) !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  overflow:visible !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(340px,460px) minmax(520px,1fr) !important;
  align-items:center !important;
  gap:clamp(28px,4vw,60px) !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  width:min(100%,900px) !important;
  min-height:clamp(430px,58svh,610px) !important;
  height:min(610px,calc(100svh - var(--spx-public-header-height,84px) - 128px)) !important;
  justify-self:end !important;
}
@media (max-width:980px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    opacity:1 !important;
    transform:none !important;
    overflow:visible !important;
    padding:72px var(--side) !important;
    z-index:auto !important;
  }
}

/* ========================================================================
   A8.85 — smooth How handoff without physical section jump
   ------------------------------------------------------------------------
   Keep the real How section in normal document flow. A separate cloned overlay
   now handles the pinned visual handoff while the builder/What view fades out.
   This prevents the real #why-spixor section from snapping down when the phase
   ends, and keeps the floating What CTA fading with the rest of the view.
   ======================================================================== */
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin-top:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  z-index:2 !important;
  pointer-events:auto !important;
}
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  filter:none !important;
}
.spx-how-handoff-overlay{
  --spx-how-handoff-opacity:0;
  --spx-how-handoff-y:18px;
  --spx-how-handoff-scale:.992;
  position:fixed;
  inset:calc(var(--spx-public-header-height,84px) + 10px) 0 0 0;
  z-index:94;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(34px,5vh,58px) var(--side) clamp(42px,5vh,68px);
  opacity:var(--spx-how-handoff-opacity);
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(0,var(--spx-how-handoff-y),0) scale(var(--spx-how-handoff-scale));
  transform-origin:50% 48%;
  filter:none;
  transition:visibility 0s linear .22s;
  overflow:hidden;
  contain:layout paint style;
}
.spx-how-handoff-overlay.is-visible{
  visibility:visible;
  transition:none;
}
.spx-how-handoff-shell{
  width:min(var(--spx-public-wide-max,1240px), calc(100vw - (var(--side) * 2)));
  max-height:calc(100svh - var(--spx-public-header-height,84px) - 32px);
  margin:0 auto;
}
.spx-how-handoff-shell .spx-why52-track,
.spx-how-handoff-shell .spx-why52-sticky{
  position:relative !important;
  inset:auto !important;
  height:auto !important;
  min-height:0 !important;
  width:100% !important;
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
  visibility:visible !important;
}
.spx-how-handoff-shell .spx-why52-sticky{
  display:grid !important;
  grid-template-columns:minmax(340px,460px) minmax(520px,1fr) !important;
  align-items:center !important;
  gap:clamp(28px,4vw,60px) !important;
}
.spx-how-handoff-shell .spx-why52-stage{
  width:min(100%,900px) !important;
  min-height:clamp(430px,58svh,610px) !important;
  height:min(610px,calc(100svh - var(--spx-public-header-height,84px) - 128px)) !important;
  justify-self:end !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
.spx-how-handoff-shell .why52-step:not(.is-active):not([data-spx-active="1"]),
.spx-how-handoff-shell .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
}
.spx-how-handoff-shell .why52-step.is-active,
.spx-how-handoff-shell .why52-step[data-spx-active="1"],
.spx-how-handoff-shell .why52-visual.is-active,
.spx-how-handoff-shell .why52-visual[data-spx-active="1"]{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:none !important;
}
.spx-how-handoff-shell .why52-visual img{
  inset:clamp(8px,1.5vh,18px) clamp(-120px,-7vw,-58px) clamp(58px,6vh,88px) 0 !important;
  width:calc(100% + clamp(64px,7vw,130px)) !important;
  height:calc(100% - clamp(72px,8vh,108px)) !important;
}
html.spx-how-visible-phase .spx-floating-how-cta,
html.spx-how-visible-phase .spx-v26-how-link{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .22s ease, visibility 0s linear .22s !important;
}
@media (max-width:980px){
  .spx-how-handoff-overlay{display:none !important;}
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    opacity:1 !important;
    transform:none !important;
    overflow:visible !important;
    z-index:auto !important;
    pointer-events:auto !important;
  }
}

/* ========================================================================
   A8.86 — single visible How handoff guard
   ------------------------------------------------------------------------
   A8.85 introduced a cloned handoff overlay while the real #why-spixor section
   remained visible in the document flow. That can look like two separate
   "How Spixor Works" sections. Keep the overlay as the only visible handoff
   during the pinned builder fade, then reveal the real section only after the
   hero/What handoff phase is finished. Mobile keeps the normal physical flow.
   ======================================================================== */
@media (min-width:981px){
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .spx-how-handoff-overlay.is-visible{
    opacity:var(--spx-how-handoff-opacity, 1) !important;
    visibility:visible !important;
  }
}

html:not(.spx-how-visible-phase) .spx-how-handoff-overlay{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ========================================================================
   A8.87 — single-source How handoff, no clone overlay
   ------------------------------------------------------------------------
   The A8.85/A8.86 cloned overlay made the transition look like two separate
   "How Spixor Works" sections: first the clone faded in, then the real section
   scrolled up from below. This guard disables the clone and makes the real
   #why-spixor section the only visual source during the builder fade-out.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    /* Pull the physical How section upward so that when the pinned hero scene
       releases, the real section is already aligned near the viewport top.
       This prevents the fixed handoff from being followed by a second How from
       below. */
    margin-top:calc(-100svh + var(--spx-public-header-height,84px) + 18px) !important;
    padding-top:clamp(42px,5.8vh,68px) !important;
    position:relative !important;
    z-index:1 !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63{
    position:fixed !important;
    inset:calc(var(--spx-public-header-height,84px) + 10px) 0 auto 0 !important;
    width:100vw !important;
    height:calc(100svh - var(--spx-public-header-height,84px) - 10px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:clamp(42px,5.8vh,68px) var(--side) clamp(42px,5vh,68px) !important;
    opacity:var(--spx-how-underlay-opacity,1) !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:94 !important;
    background:transparent !important;
    overflow:hidden !important;
    transform:translate3d(0,var(--spx-how-underlay-y,0px),0) scale(var(--spx-how-underlay-scale,1)) !important;
    filter:none !important;
    transition:none !important;
  }
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:none !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  html.spx-how-physical-ready .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}
@media (max-width:980px){
  .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ========================================================================
   A8.88 — single physical How crossfade handoff
   ------------------------------------------------------------------------
   Remove the fixed/clone handoff behavior. The real #why-spixor section is
   the only visual source and is pulled into the end of the hero scrollstory.
   This lets builder/What fade out while the same physical How section fades
   in, so there is no overlay-to-real jump and no second How from below.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:calc(-118svh + var(--spx-public-header-height,84px) + 34px) !important;
    padding-top:clamp(48px,6vh,76px) !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    z-index:3 !important;
    background:transparent !important;
    overflow:visible !important;
    filter:none !important;
    will-change:opacity, transform !important;
    transition:opacity .42s cubic-bezier(.22,.72,.22,1), transform .42s cubic-bezier(.22,.72,.22,1) !important;
  }

  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translate3d(0,28px,0) scale(.992) !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:calc(-118svh + var(--spx-public-header-height,84px) + 34px) !important;
    padding:clamp(48px,6vh,76px) var(--side) clamp(78px,8vh,112px) !important;
    opacity:var(--spx-how-underlay-opacity,1) !important;
    visibility:visible !important;
    pointer-events:none !important;
    z-index:3 !important;
    transform:translate3d(0,calc(var(--spx-how-underlay-y,0px) * .32),0) scale(calc(.996 + (var(--spx-how-underlay-scale,1) - .985) * .35)) !important;
    filter:none !important;
    overflow:visible !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }

  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    will-change:auto !important;
  }

  html.spx-hero-story-active.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-hero-story-active.spx-how-visible-phase .spx-v26-how-link{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .24s ease, visibility 0s linear .24s !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    overflow:visible !important;
  }
}


/* ========================================================================
   A8.89 — Clean single-source How handoff reset
   ------------------------------------------------------------------------
   The A8.83–A8.88 handoff experiments mixed fixed positioning, clone overlays,
   negative margins, opacity and transforms on the physical #why-spixor section.
   That caused the visible "scrolls up, then clicks into place" artifact and a
   transparent layer over subsequent content. This reset makes How a normal
   physical section again and keeps the step-controller as the only animation
   owner inside the section.
   ======================================================================== */
.spx-how-handoff-overlay,
.spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:0 !important;
    padding:clamp(68px,8vh,118px) var(--side) clamp(86px,9vh,130px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:3 !important;
    transform:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    perspective:none !important;
    will-change:auto !important;
    transition:none !important;
    background:transparent !important;
    overflow:visible !important;
  }
  html.spx-hero-story-active:not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active:not(.spx-how-visible-phase):not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    visibility:visible !important;
    filter:none !important;
    backdrop-filter:none !important;
    perspective:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky{
    opacity:1 !important;
    transform:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    filter:none !important;
    backdrop-filter:initial;
    opacity:revert-layer;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding-top:54px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    overflow:visible !important;
  }
}

/* ========================================================================
   A8.90 — Crisp physical How handoff reset
   ------------------------------------------------------------------------
   Remove the remaining visual-filter side effects from the old What→How
   experiments. Keep #why-spixor as a normal physical section, never as a
   fixed/overlay/underlay handoff layer. The builder/What scene fades out; the
   real How section follows crisply without inherited blur/opacity/transform.
   ======================================================================== */
html.spx-hero-story-active{
  --spx-how-underlay-opacity:1 !important;
  --spx-how-underlay-blur:0px !important;
  --spx-how-underlay-scale:1 !important;
  --spx-how-underlay-y:0px !important;
}
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
html.spx-hero-story-active .spx-home-main > section:not(.spx-hero-v26),
html.spx-hero-story-active main > section:not(.spx-hero-v26),
html.spx-hero-story-active .spx-page-main > section:not(.spx-hero-v26){
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  opacity:1 !important;
}
@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin:0 !important;
    padding:clamp(72px,8.5vh,124px) var(--side) clamp(90px,9.5vh,136px) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:3 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    will-change:auto !important;
    transition:none !important;
    background:transparent !important;
    overflow:visible !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    transform:none !important;
    will-change:auto !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html.spx-how-visible-phase .spx-floating-how-cta,
  html.spx-how-visible-phase .spx-v26-how-link{
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin:0 !important;
    padding:54px var(--side) 72px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
  }
}

/* ========================================================================
   A8.91 — Crisp Why/How handoff without overlay/filter
   ------------------------------------------------------------------------
   The previous handoff experiments left the old hero-echo layer active inside
   How Spixor Works. That layer created the dark transparent wash visible over
   the How content and later sections. Keep one real How section only: no echo
   background, no clone, no fixed handoff, no filter/opacity inherited into
   subsequent content.
   ======================================================================== */
.spx-why52-hero-echo,
.spx-why52-hero-echo *,
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
  position:relative !important;
  isolation:isolate !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  perspective:none !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63::before,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63::after{
  opacity:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  pointer-events:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  perspective:none !important;
  mix-blend-mode:normal !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage{
  transform:none !important;
  will-change:auto !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

@media (min-width:981px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    /* Pull the real How content closer to the outgoing builder scene without
       changing positioning modes. This creates a natural crossfade zone while
       avoiding the previous fixed/clone snap. */
    margin-top:clamp(-72px, -5.2vh, -38px) !important;
    padding-top:clamp(58px, 7vh, 96px) !important;
  }
}

@media (max-width:980px){
  .spx-why52-hero-echo{display:none !important;}
}

/* ========================================================================
   A8.92 — hard cleanup for real How handoff (no hero wash over How)
   ------------------------------------------------------------------------
   The previous A8.83–A8.91 layers left hero/What visuals composited above the
   physical How section while it was entering the viewport. That made How look
   dimmed/filtered and caused the builder screenshot to sit behind the content.
   Keep How as the only visible foreground once it reaches the handoff zone and
   fade the outgoing hero visuals with a simple progress variable.
   ======================================================================== */
html{
  --spx-clean-handoff-progress:0;
}

/* No clone/underlay/fixed How attempts. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (min-width:981px){
  /* The real How section must stay a normal section. No negative pull-up, no
     fixed positioning, no transform/opacity handoff on the physical section. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active.spx-how-visible-phase .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-height:auto !important;
    height:auto !important;
    margin-top:0 !important;
    padding:clamp(72px,8vh,112px) var(--side) clamp(96px,10vh,148px) !important;
    z-index:80 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    transition:none !important;
    will-change:auto !important;
    isolation:isolate !important;
    background:transparent !important;
    overflow:visible !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    z-index:120 !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory]{
    z-index:10 !important;
  }

  /* Fade the outgoing hero/What visuals as a group only when How actually
     enters the handoff zone. This removes the dark hero wash over How while
     preserving the earlier hero/What animation. */
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    opacity:calc(1 - var(--spx-clean-handoff-progress,0)) !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:opacity .18s linear !important;
  }

  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff-complete .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Restore full clarity to How and everything after it. */
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 *,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    mix-blend-mode:normal !important;
  }

  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual.is-active{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    text-shadow:none !important;
  }

  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step:not(.is-active):not([data-spx-active="1"]),
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Remove residual local stage veils that can read like a filter on top. */
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    opacity:.14 !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding:54px var(--side) 72px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

/* ========================================================================
   A8.95 — restore A8.92 builder position + remove blank handoff beat
   ------------------------------------------------------------------------
   No cloned/fixed/underlay How. Keep the builder/What scene visible until the
   end of the pinned hero scene, then fade it in the final band so the physical
   How section follows immediately. This avoids the A8.93/A8.94 low builder
   lock and avoids a long empty transparent gap.
   ======================================================================== */
@media (min-width:981px){
  html .spx-how-handoff-overlay,
  html .spx-how-handoff-overlay.is-visible{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    margin-top:0 !important;
    padding-top:clamp(54px,6.5vh,92px) !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  html.spx-hero-story-active:not(.spx-how-physical-ready) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
  }

  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
    transition:opacity .14s linear !important;
  }
}


/* ========================================================================
   A8.96 — clean What -> How crossfade and crisp How refresh
   ------------------------------------------------------------------------
   Single-source transition: no cloned/fixed How. The real #why-spixor content
   fades in while the outgoing builder/What scene fades out. Also removes the
   hard horizontal bottom-fade band that was visible during the transition.
   ======================================================================== */
html{
  --spx-a896-crossfade:0;
  --spx-a896-hero-out:1;
  --spx-a896-how-in:1;
}

/* The old bottom fade made a hard horizontal bar during the handoff. */
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
}

/* Keep old handoff/echo layers permanently out of the stack. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media (min-width:981px){
  /* Keep How physical, transparent and crisp. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    margin-top:0 !important;
    padding-top:clamp(46px,5.6vh,78px) !important;
    padding-bottom:clamp(96px,9vh,138px) !important;
    z-index:90 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
    overflow:visible !important;
    will-change:auto !important;
    transition:none !important;
  }

  /* Fade outgoing builder/What visuals only during the overlap. This creates
     the actual crossfade without moving or duplicating How. */
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .v26-product-atmosphere,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-what-crisp-layer,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-v26-builder-view-content{
    opacity:var(--spx-a896-hero-out,1) !important;
    transition:opacity .18s linear !important;
  }

  /* How fades in as one single physical section. The section itself remains
     normal-flow; only the inner shell gets the subtle entry. */
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:calc(.08 + (var(--spx-a896-how-in,0) * .92)) !important;
    transform:translate3d(0, calc((1 - var(--spx-a896-how-in,0)) * 18px), 0) scale(calc(.992 + (var(--spx-a896-how-in,0) * .008))) !important;
    filter:none !important;
    -webkit-filter:none !important;
    transition:none !important;
    will-change:opacity, transform !important;
  }
  html.spx-a896-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html:not(.spx-a896-what-how-crossfade) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    will-change:auto !important;
  }

  /* Remove the old horizontal section-edge feeling. */
  html .spx-why-section.spx-why-v52.spx-how-v63::before,
  html .spx-why-section.spx-why-v52.spx-how-v63::after,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* How content visual polish: less heavy text block, cleaner cards and crisper
     imagery. */
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head .eyebrow{
    display:inline-flex !important;
    align-items:center !important;
    width:max-content !important;
    padding:9px 15px !important;
    border-radius:999px !important;
    border:1px solid rgba(94,231,255,.26) !important;
    background:linear-gradient(90deg, rgba(24,201,245,.14), rgba(45,99,255,.08)) !important;
    color:#8ff0ff !important;
    box-shadow:0 0 28px rgba(24,201,245,.08) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head h2{
    color:#f8fbff !important;
    text-shadow:0 18px 58px rgba(0,0,0,.24) !important;
    max-width:620px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-story-head p{
    color:rgba(221,238,255,.76) !important;
    max-width:560px !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step{
    border-radius:22px !important;
    border-color:rgba(107,232,255,.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
      linear-gradient(120deg, rgba(24,201,245,.080), rgba(23,93,255,.022) 62%, rgba(24,201,245,0)) !important;
    box-shadow:0 18px 54px rgba(0,0,0,.16), inset 0 0 0 1px rgba(107,232,255,.04) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step.is-active,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step[data-spx-active="1"]{
    border-color:rgba(107,232,255,.30) !important;
    box-shadow:0 28px 76px rgba(0,0,0,.20), 0 0 48px rgba(24,201,245,.07), inset 0 0 0 1px rgba(107,232,255,.08) !important;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img{
    border:0 !important;
    background:transparent !important;
    box-shadow:0 38px 112px rgba(0,0,0,.22), 0 0 78px rgba(24,201,245,.08) !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade{display:none !important;}
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

/* ========================================================================
   A8.97 — definitive single-source What -> How crossfade
   ------------------------------------------------------------------------
   Remove the accumulated A8.83-A8.96 handoff behaviors from the visual stack.
   The real #why-spixor section is the only How source. It is gently overlapped
   into the last hero-scrollstory band while the outgoing builder/What stage
   fades out. No clones, no fixed How, no underlay blur, no global wash.
   ======================================================================== */
html{
  --spx-a897-crossfade:0;
  --spx-a897-hero-out:1;
  --spx-a897-how-in:0;
}

/* Old handoff artifacts must never re-enter the compositor stack. */
html .spx-how-handoff-overlay,
html .spx-how-handoff-overlay.is-visible,
html .spx-why52-hero-echo,
html .spx-why52-hero-echo *,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-bottom-fade,
html .spx-hero-v26[data-hero-scrollstory] .spx-v26-how-preview{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

@media (min-width:981px){
  /* Keep the physical How section close enough to the final hero range for a
     natural crossfade, but do not use the huge -100svh offsets that created
     snap/jump behavior. */
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-how-physical-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a892-how-handoff .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a896-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:auto !important;
    min-height:auto !important;
    margin-top:calc(-1 * clamp(96px, 12svh, 176px)) !important;
    padding:clamp(74px, 8.4svh, 118px) var(--side) clamp(108px, 10svh, 154px) !important;
    z-index:7 !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
    isolation:isolate !important;
    overflow:visible !important;
    background:transparent !important;
    background-image:none !important;
    transition:none !important;
    will-change:auto !important;
  }

  /* The hero stage fades out as one piece in the last band. This prevents the
     visible hard horizontal strip and makes the transition read as a single
     outgoing scene rather than several layers fading at different times. */
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:calc(.06 + (var(--spx-a897-hero-out,1) * .94)) !important;
    transition:none !important;
    will-change:opacity !important;
  }
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Make How enter as the same real section while the hero leaves. The section
     itself does not move; only the inner shell gets a tiny, local entry motion. */
  html.spx-a897-what-how-crossfade .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:calc(.10 + (var(--spx-a897-how-in,0) * .90)) !important;
    transform:translate3d(0, calc((1 - var(--spx-a897-how-in,0)) * 16px), 0) !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    will-change:opacity, transform !important;
    transition:none !important;
  }
  html.spx-a897-what-how-ready .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell,
  html:not(.spx-a897-what-how-crossfade) .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-shell{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    will-change:auto !important;
  }

  /* Full crisp reset for How and everything after it. */
  html .spx-why-section.spx-why-v52.spx-how-v63,
  html .spx-why-section.spx-why-v52.spx-how-v63 *,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section *{
    -webkit-font-smoothing:antialiased;
  }
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-head,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-track,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-sticky,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-copy,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-step,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual,
  html .spx-why-section.spx-why-v52.spx-how-v63 .why52-visual img,
  html .spx-why-section.spx-why-v52.spx-how-v63 ~ section{
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    perspective:none !important;
    mix-blend-mode:normal !important;
  }

  /* Keep the old decorative section-edge pseudo elements from recreating a
     horizontal handoff line. */
  html .spx-why-section.spx-why-v52.spx-how-v63::before,
  html .spx-why-section.spx-why-v52.spx-how-v63::after,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::before,
  html .spx-why-section.spx-why-v52.spx-how-v63 .spx-why52-stage::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}

@media (max-width:980px){
  html .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63,
  html.spx-hero-story-active .spx-hero-v26[data-hero-scrollstory] + .spx-why-section.spx-why-v52.spx-how-v63{
    margin-top:0 !important;
    padding:54px var(--side) 74px !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    opacity:1 !important;
  }
}

/* ========================================================================== 
   GPT A8.101 repair layer — restore Spixor font/visual consistency and polish
   sections without reintroducing duplicate How/fixed handoff layers.
   ========================================================================== */
html body.spx-public,
html body.spx-public button,
html body.spx-public input,
html body.spx-public select,
html body.spx-public textarea{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body.spx-public h1,
html body.spx-public h2,
html body.spx-public h3,
html body.spx-public .brand,
html body.spx-public .btn{
  font-family: inherit !important;
}
html body.spx-public .spx-alpha-nav-link{gap:8px!important;}
html body.spx-public .spx-alpha-help{
  display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;border-radius:50%!important;
  border:1px solid rgba(126,231,255,.28)!important;background:rgba(126,231,255,.10)!important;color:#b9f7ff!important;
  font-size:11px!important;font-weight:950!important;line-height:1!important;
}

/* Restore a cleaner hero feel on large screens. */
@media (min-width:981px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    max-width:min(760px,58vw)!important;
    transform:translate3d(0,clamp(-24px,-2.2vh,-8px),0) scale(var(--spx-hero-copy-story-scale,1))!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(78px,min(8.3vw,11.8vh),138px)!important;
    line-height:.84!important;
    letter-spacing:-.095em!important;
  }
}
@media (min-width:1920px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    font-size:clamp(84px,min(7.55vw,11.2vh),142px)!important;
  }
}

/* How Spixor Works: keep one physical section, restore real visuals, remove solid block. */
html body.spx-public #why-spixor.spx-how-v63,
html.spx-a897-what-how-crossfade body.spx-public #why-spixor.spx-how-v63,
html.spx-a897-what-how-ready body.spx-public #why-spixor.spx-how-v63{
  position:relative!important;
  inset:auto!important;
  background:transparent!important;
  background-image:
    radial-gradient(780px 360px at 72% 18%,rgba(24,201,245,.075),transparent 72%),
    linear-gradient(180deg,rgba(3,7,18,0),rgba(5,12,24,.22) 38%,rgba(3,7,18,0))!important;
  filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  opacity:1!important;visibility:visible!important;mix-blend-mode:normal!important;
  margin-top:0!important;
  padding-top:clamp(74px,8vh,118px)!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63::before,
html body.spx-public #why-spixor.spx-how-v63::after,
html body.spx-public #why-spixor .spx-v26-bottom-fade,
html body.spx-public #why-spixor .spx-why52-hero-echo{content:none!important;display:none!important;opacity:0!important;visibility:hidden!important;}
html body.spx-public #why-spixor .spx-why52-shell{width:min(1380px,calc(100vw - 72px))!important;margin-inline:auto!important;}
html body.spx-public #why-spixor .spx-why52-sticky{
  display:grid!important;grid-template-columns:minmax(340px,.86fr) minmax(520px,1.14fr)!important;gap:clamp(28px,4vw,72px)!important;align-items:center!important;
}
html body.spx-public #why-spixor .spx-why52-copy{
  min-height:auto!important;padding:clamp(22px,2.6vw,34px)!important;border:1px solid rgba(218,236,255,.13)!important;border-radius:28px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.070),rgba(255,255,255,.026)),radial-gradient(420px 220px at 0 0,rgba(24,201,245,.12),transparent 70%)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
html body.spx-public #why-spixor .spx-why52-story-head{transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease)!important;}
html body.spx-public #why-spixor.is-step-flow .spx-why52-story-head{opacity:0!important;transform:translateY(-8px)!important;max-height:0!important;overflow:hidden!important;pointer-events:none!important;margin:0!important;}
html body.spx-public #why-spixor .spx-why52-story-head h2{font-size:clamp(32px,3.9vw,56px)!important;line-height:1.04!important;letter-spacing:-.045em!important;}
html body.spx-public #why-spixor .spx-why52-story-head p{font-size:16px!important;line-height:1.68!important;color:rgba(226,241,255,.82)!important;}
html body.spx-public #why-spixor .why52-step-stack{min-height:330px!important;}
html body.spx-public #why-spixor .why52-step{border-radius:22px!important;background:rgba(3,8,18,.42)!important;border:1px solid rgba(218,236,255,.12)!important;padding:22px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s var(--ease)!important;}
html body.spx-public #why-spixor .why52-step:not(.is-active){opacity:0!important;transform:translateY(16px)!important;visibility:hidden!important;}
html body.spx-public #why-spixor .why52-step.is-active{opacity:1!important;transform:translateY(0)!important;visibility:visible!important;}
html body.spx-public #why-spixor .why52-step-nav{display:flex!important;gap:10px!important;margin:18px 0!important;}
html body.spx-public #why-spixor .why52-step-nav button{border-radius:16px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(230,245,255,.82)!important;padding:10px 12px!important;transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)!important;}
html body.spx-public #why-spixor .why52-step-nav button.is-active{background:rgba(24,201,245,.14)!important;border-color:rgba(126,231,255,.36)!important;color:#fff!important;transform:translateY(-1px)!important;}
html body.spx-public #why-spixor .spx-why52-stage{
  min-height:clamp(520px,58vh,760px)!important;border-radius:32px!important;border:1px solid rgba(218,236,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065)!important;
  overflow:hidden!important;filter:none!important;backdrop-filter:none!important;
}
html body.spx-public #why-spixor .why52-visual img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:28px!important;filter:none!important;}
html body.spx-public #why-spixor .why52-visual{inset:24px!important;transition:opacity .62s var(--ease),transform .62s var(--ease),visibility .62s var(--ease)!important;}
html body.spx-public #why-spixor .why52-visual:not(.is-active){opacity:0!important;transform:translateY(18px) scale(.985)!important;visibility:hidden!important;}
html body.spx-public #why-spixor .why52-visual.is-active{opacity:1!important;transform:translateY(0) scale(1)!important;visibility:visible!important;}
html body.spx-public #why-spixor .why52-visual-card{max-width:min(360px,calc(100% - 44px))!important;border-radius:22px!important;background:rgba(4,10,22,.76)!important;border:1px solid rgba(218,236,255,.16)!important;box-shadow:0 18px 52px rgba(0,0,0,.24)!important;backdrop-filter:none!important;}

/* Dashboard Command Center: hero-like product demo, not a left-aligned debug pane. */
html body.spx-public #dashboard.spx-dashboard-command-v63{
  min-height:330vh!important;padding:0 var(--side)!important;margin:0!important;position:relative!important;isolation:isolate!important;background:transparent!important;filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:sticky!important;top:clamp(78px,10vh,108px)!important;height:calc(100vh - 120px)!important;display:grid!important;place-items:center!important;pointer-events:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:min(1240px,88vw)!important;height:min(72vh,760px)!important;border-radius:32px!important;box-shadow:0 32px 96px rgba(0,0,0,.34)!important;transform:scale(calc(.86 + var(--dash-focus,0) * .14)) translateY(calc((1 - var(--dash-focus,0)) * 28px))!important;transition:box-shadow .35s var(--ease)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:5!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{position:absolute!important;left:var(--side)!important;top:clamp(96px,13vh,150px)!important;max-width:420px!important;opacity:calc(1 - var(--dash-intro-focus,0))!important;transform:translateY(calc(var(--dash-intro-focus,0) * -18px))!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2{top:clamp(128px,18vh,196px)!important;font-size:clamp(36px,4.4vw,66px)!important;line-height:1.02!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{top:clamp(216px,29vh,304px)!important;color:rgba(226,241,255,.80)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:absolute!important;width:min(360px,calc(100vw - 48px))!important;border:1px solid rgba(218,236,255,.16)!important;background:rgba(4,10,22,.78)!important;border-radius:24px!important;padding:18px 20px!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important;backdrop-filter:none!important;opacity:0!important;visibility:hidden!important;transform:translateY(14px)!important;transition:opacity .42s var(--ease),transform .42s var(--ease),visibility .42s var(--ease)!important;pointer-events:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="overview"]{right:calc(var(--side) + 32px)!important;bottom:clamp(96px,15vh,160px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="projects"]{right:calc(var(--side) + 32px)!important;top:clamp(96px,15vh,150px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="files"]{left:calc(var(--side) + 32px)!important;top:clamp(96px,15vh,150px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{display:block!important;opacity:var(--dash-focus,0)!important;transform:translate3d(var(--dash-cursor-x,55%),var(--dash-cursor-y,45%),0)!important;}

/* Export workflow — stable cards with one arrow behavior. */
html body.spx-public #export.spx-export-section-v61{filter:none!important;backdrop-filter:none!important;box-shadow:0 22px 72px rgba(0,0,0,.16)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-card{min-height:300px!important;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-export-card:hover,
html body.spx-public #export.spx-export-section-v61 .spx-export-card:focus-within{transform:translateY(-6px)!important;box-shadow:0 26px 76px rgba(0,0,0,.24)!important;border-color:rgba(126,231,255,.30)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link::before,
html body.spx-public #export.spx-export-section-v61 .spx-more-link::after{content:none!important;display:none!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link svg{width:14px!important;height:14px!important;flex:0 0 14px!important;transition:transform .22s var(--ease)!important;}
html body.spx-public #export.spx-export-section-v61 .spx-more-link:hover svg{transform:translateX(3px)!important;}

/* Pricing polish from the current direction, but with stable typography. */
html body.spx-public #pricing.spx-pricing-section-v61 .spx-section-kicker h2{font-size:clamp(34px,4.6vw,62px)!important;letter-spacing:-.045em!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="free"]{position:relative!important;border-color:rgba(62,230,165,.34)!important;box-shadow:0 24px 76px rgba(62,230,165,.12),inset 0 1px 0 rgba(255,255,255,.06)!important;animation:spxFreeSoftFloat 7s ease-in-out infinite!important;}
html body.spx-public #pricing.spx-pricing-section-v61 [data-price-card="free"]::before{content:""!important;position:absolute!important;inset:-1px!important;border-radius:inherit!important;background:radial-gradient(520px 240px at 50% -12%,rgba(62,230,165,.18),transparent 72%)!important;pointer-events:none!important;z-index:-1!important;}
@keyframes spxFreeSoftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
html body.spx-public .spx-orbit-notify{display:grid!important;gap:9px!important;margin-top:16px!important;}
html body.spx-public .spx-orbit-notify label{display:grid!important;gap:6px!important;color:rgba(226,241,255,.78)!important;font-size:12px!important;font-weight:850!important;}
html body.spx-public .spx-orbit-notify input{min-height:42px!important;border-radius:14px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:var(--text)!important;padding:0 12px!important;}
html body.spx-public .spx-orbit-notify small{color:rgba(226,241,255,.58)!important;font-size:12px!important;}

/* Alpha feedback — remove roadmap feeling and make it a story panel. */
html body.spx-public #roadmap.spx-alpha-story-section{display:grid!important;grid-template-columns:minmax(0,.64fr) minmax(280px,.36fr)!important;gap:clamp(26px,4vw,62px)!important;align-items:center!important;background:linear-gradient(145deg,rgba(255,255,255,.044),rgba(255,255,255,.014)),radial-gradient(720px 360px at 5% 10%,rgba(245,158,11,.075),transparent 70%)!important;border:1px solid rgba(218,236,255,.11)!important;border-radius:34px!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{background:rgba(255,255,255,.045)!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:26px!important;padding:24px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list{display:flex!important;flex-wrap:wrap!important;gap:9px!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{display:inline-flex!important;align-items:center!important;border-radius:999px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.050)!important;padding:8px 11px!important;font-size:13px!important;color:rgba(238,248,255,.84)!important;}

/* Global anti-wash guard for later content. */
html body.spx-public #dashboard,
html body.spx-public #export,
html body.spx-public #pricing,
html body.spx-public #roadmap,
html body.spx-public footer{filter:none!important;-webkit-filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;mix-blend-mode:normal!important;opacity:1;}

@media (max-width:980px){
  html body.spx-public #why-spixor .spx-why52-sticky,
  html body.spx-public #dashboard.spx-dashboard-command-v63{display:block!important;min-height:auto!important;padding:54px var(--side)!important;}
  html body.spx-public #why-spixor .spx-why52-shell{width:min(100%,calc(100vw - 36px))!important;}
  html body.spx-public #why-spixor .spx-why52-copy{padding:20px!important;margin-bottom:18px!important;}
  html body.spx-public #why-spixor .spx-why52-stage{min-height:0!important;aspect-ratio:1/1.06!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;height:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:100%!important;height:auto!important;aspect-ratio:16/10.5!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;display:grid!important;gap:14px!important;margin-top:20px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{display:none!important;}
  html body.spx-public #export.spx-export-section-v61 .spx-export-grid{grid-template-columns:1fr!important;}
  html body.spx-public #roadmap.spx-alpha-story-section{grid-template-columns:1fr!important;}
}

/* ========================================================================== 
   GPT A8.102 targeted repair: What->How, How UX, Dashboard demo, footer restore
   This layer intentionally avoids clone/bridge/fixed How sections.
   ========================================================================== */
:root{
  --spx-a102-ease: cubic-bezier(.22,.78,.18,1);
}
html body.spx-public,
html body.spx-public *{
  text-rendering: geometricPrecision;
}
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* What -> How: keep the physical How section close and remove the visible seam. */
@media (min-width:981px){
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63{
    margin-top:clamp(-42px,-4.2svh,-26px)!important;
    padding-top:clamp(58px,6.2svh,86px)!important;
    background:linear-gradient(180deg,rgba(3,7,18,0) 0%,rgba(4,9,20,.22) 18%,rgba(3,7,18,0) 100%)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63::before,
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] + #why-spixor.spx-how-v63::after{
    content:none!important;
    display:none!important;
  }
}

/* How Spixor Works: single physical section, real images, premium but no image-border block. */
html body.spx-public #why-spixor.spx-how-v63{
  --how-step-progress:0;
  position:relative!important;
  overflow:visible!important;
  isolation:isolate!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
  visibility:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:min(1400px,calc(100vw - 72px))!important;
  margin:0 auto!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
  min-height:clamp(1520px,225vh,2140px)!important;
  height:auto!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  position:sticky!important;
  top:clamp(86px,10vh,118px)!important;
  min-height:calc(100vh - clamp(112px,13vh,152px))!important;
  display:grid!important;
  grid-template-columns:minmax(360px,.82fr) minmax(560px,1.18fr)!important;
  gap:clamp(34px,4.8vw,82px)!important;
  align-items:center!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  position:relative!important;
  min-height:clamp(430px,54vh,600px)!important;
  padding:clamp(24px,2.6vw,38px)!important;
  border:1px solid rgba(218,236,255,.12)!important;
  border-radius:30px!important;
  background:linear-gradient(150deg,rgba(255,255,255,.074),rgba(255,255,255,.024)),radial-gradient(440px 220px at 10% 0%,rgba(126,231,255,.12),transparent 70%)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07)!important;
  overflow:hidden!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.065) 45%,transparent 54%);
  opacity:.22;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  display:block!important;
  max-width:560px!important;
  transition:opacity .62s var(--spx-a102-ease),transform .62s var(--spx-a102-ease),max-height .62s var(--spx-a102-ease),margin .62s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
  margin:.18em 0 .34em!important;
  font-size:clamp(34px,4.2vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.058em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
  max-width:520px!important;
  color:rgba(226,241,255,.82)!important;
  line-height:1.7!important;
  font-size:clamp(15px,1.05vw,18px)!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
  opacity:0!important;
  transform:translateY(-14px)!important;
  max-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack,
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-nav{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(18px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:18px 0 20px!important;
  transition:opacity .56s var(--spx-a102-ease),transform .56s var(--spx-a102-ease),visibility .56s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button{
  min-width:92px!important;
  border-radius:999px!important;
  border:1px solid rgba(218,236,255,.14)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(232,246,255,.78)!important;
  padding:10px 13px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  transition:transform .28s var(--spx-a102-ease),background .28s var(--spx-a102-ease),border-color .28s var(--spx-a102-ease),color .28s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button b{
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(126,231,255,.10);font-size:11px;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav button.is-active{
  background:rgba(24,201,245,.15)!important;
  border-color:rgba(126,231,255,.34)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:clamp(300px,37vh,430px)!important;
  transition:opacity .56s var(--spx-a102-ease),transform .56s var(--spx-a102-ease),visibility .56s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  padding:clamp(22px,2.1vw,34px)!important;
  border-radius:24px!important;
  border:1px solid rgba(218,236,255,.13)!important;
  background:linear-gradient(150deg,rgba(4,10,22,.64),rgba(8,20,38,.40))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(18px)!important;
  transition:opacity .62s var(--spx-a102-ease),transform .62s var(--spx-a102-ease),visibility .62s var(--spx-a102-ease)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step > span{
  color:#7ee7ff!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  font-size:12px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  font-size:clamp(27px,2.7vw,42px)!important;
  letter-spacing:-.04em!important;
  line-height:1.05!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step p,
html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
  color:rgba(226,241,255,.80)!important;
  line-height:1.6!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(560px,64vh,780px)!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  filter:none!important;
  backdrop-filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  opacity:.18!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:absolute!important;inset:0!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  inset:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(22px) scale(.982)!important;
  transition:opacity .72s var(--spx-a102-ease),transform .72s var(--spx-a102-ease),visibility .72s var(--spx-a102-ease)!important;
  filter:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:34px!important;
  border:0!important;
  outline:0!important;
  box-shadow:0 34px 110px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.10)!important;
  filter:none!important;
  display:block!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  left:clamp(22px,2.2vw,34px)!important;
  bottom:clamp(22px,2.2vw,34px)!important;
  max-width:min(390px,calc(100% - 44px))!important;
  border-radius:24px!important;
  background:linear-gradient(145deg,rgba(4,10,22,.78),rgba(9,21,39,.64))!important;
  border:1px solid rgba(218,236,255,.14)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.065)!important;
  backdrop-filter:none!important;
}

/* Dashboard Command Center: hero-like fullscreen scroll demo. */
html body.spx-public #dashboard.spx-dashboard-command-v63{
  --dash-focus:0;
  --dash-intro:1;
  --dash-cursor-x:66%;
  --dash-cursor-y:72%;
  min-height:clamp(2500px,350vh,3600px)!important;
  padding:0 var(--side)!important;
  margin:0!important;
  position:relative!important;
  background:transparent!important;
  filter:none!important;
  backdrop-filter:none!important;
  mix-blend-mode:normal!important;
  isolation:isolate!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63::before,
html body.spx-public #dashboard.spx-dashboard-command-v63::after{content:none!important;display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{
  position:sticky!important;
  top:clamp(70px,8vh,98px)!important;
  height:calc(100vh - clamp(86px,10vh,118px))!important;
  width:100%!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:none!important;
  z-index:2!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
  position:relative!important;
  width:min(calc(720px + var(--dash-focus) * 560px), 92vw)!important;
  height:min(calc(420px + var(--dash-focus) * 330px), 76vh)!important;
  margin-left:calc((1 - var(--dash-focus)) * -28vw)!important;
  border-radius:calc(34px - var(--dash-focus) * 8px)!important;
  overflow:hidden!important;
  background:#07101f!important;
  box-shadow:0 38px 120px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.10)!important;
  transform:translate3d(calc((1 - var(--dash-focus)) * -2vw), calc((1 - var(--dash-focus)) * 18px),0) scale(1)!important;
  transition:width .12s linear,height .12s linear,margin-left .12s linear,border-radius .12s linear!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img{
  width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important;opacity:1!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  mix-blend-mode:normal!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
  position:sticky!important;
  left:auto!important;
  margin-left:auto!important;
  margin-right:clamp(28px,7vw,120px)!important;
  max-width:430px!important;
  top:clamp(120px,18vh,190px)!important;
  opacity:calc(1 - var(--dash-focus))!important;
  transform:translateY(calc(var(--dash-focus) * -18px))!important;
  transition:none!important;
  display:block!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2{font-size:clamp(38px,4.8vw,72px)!important;line-height:.98!important;letter-spacing:-.06em!important;margin-top:34px!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{margin-top:18px!important;color:rgba(225,241,255,.82)!important;line-height:1.65!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{display:none!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
  position:fixed!important;
  z-index:12!important;
  width:min(360px,calc(100vw - 48px))!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(218,236,255,.14)!important;
  background:linear-gradient(145deg,rgba(5,12,26,.82),rgba(10,22,40,.68))!important;
  box-shadow:0 24px 74px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(16px) scale(.985)!important;
  transition:opacity .46s var(--spx-a102-ease),transform .46s var(--spx-a102-ease),visibility .46s var(--spx-a102-ease)!important;
  pointer-events:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-panel="overview"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-panel="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-panel="files"]{
  opacity:calc(var(--dash-focus) * 1)!important;
  visibility:visible!important;
  transform:translateY(0) scale(1)!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="overview"]{right:clamp(26px,7vw,128px)!important;bottom:clamp(34px,10vh,110px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="projects"]{right:clamp(26px,7vw,128px)!important;top:clamp(110px,16vh,170px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-panel="files"]{left:clamp(26px,7vw,128px)!important;top:clamp(110px,16vh,170px)!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
  position:absolute!important;
  left:var(--dash-cursor-x)!important;
  top:var(--dash-cursor-y)!important;
  z-index:6!important;
  width:26px!important;height:26px!important;
  opacity:calc(var(--dash-focus) * 1)!important;
  transform:translate(-8px,-6px) rotate(-12deg)!important;
  transition:left .52s var(--spx-a102-ease),top .52s var(--spx-a102-ease),opacity .28s var(--spx-a102-ease)!important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::before{
  content:"";display:block;width:0;height:0;border-left:0 solid transparent;border-right:15px solid transparent;border-top:24px solid #e8fbff;filter:drop-shadow(0 0 10px rgba(126,231,255,.35));
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::after{
  content:"";position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(126,231,255,.45);opacity:0;transform:scale(.55);
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{animation:spxDashClickPulse .72s var(--spx-a102-ease) both;}
@keyframes spxDashClickPulse{0%{opacity:.75;transform:scale(.45)}100%{opacity:0;transform:scale(1.8)}}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{display:none!important;}

/* Export: smoother entry/hover without width jumps. */
html body.spx-public .spx-export-section-v61{position:relative!important;filter:none!important;backdrop-filter:none!important;overflow:visible!important;}
html body.spx-public .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(18px,2vw,28px)!important;align-items:stretch!important;}
html body.spx-public .spx-export-card{min-height:320px!important;transition:transform .34s var(--spx-a102-ease),border-color .34s var(--spx-a102-ease),box-shadow .34s var(--spx-a102-ease),background .34s var(--spx-a102-ease)!important;will-change:auto!important;}
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{transform:translateY(-8px)!important;box-shadow:0 24px 78px rgba(0,0,0,.28),0 0 40px rgba(24,201,245,.10)!important;border-color:rgba(126,231,255,.28)!important;}
html body.spx-public .spx-more-link svg{width:13px!important;height:13px!important;flex:0 0 13px!important;}

/* Pricing polish: maintain good layout with a softer Free highlight. */
html body.spx-public #pricing .spx-price-card[data-price-card="free"]{box-shadow:0 28px 82px rgba(0,0,0,.24),0 0 70px rgba(66,255,175,.12)!important;animation:spxFreeFloat 5.8s ease-in-out infinite!important;}
@keyframes spxFreeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){html body.spx-public #pricing .spx-price-card[data-price-card="free"]{animation:none!important;}}

/* Footer v3 restore. */
html body.spx-public .spx-footer-v3{position:relative!important;margin:clamp(80px,10vh,140px) var(--side) 24px!important;padding:0!important;border:1px solid rgba(218,236,255,.12)!important;border-radius:34px!important;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.022)),radial-gradient(760px 280px at 12% 0%,rgba(24,201,245,.12),transparent 72%)!important;box-shadow:0 28px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.065)!important;overflow:hidden!important;}
html body.spx-public .spx-footer-shell{display:grid!important;grid-template-columns:minmax(260px,.9fr) minmax(520px,1.6fr)!important;gap:clamp(28px,5vw,76px)!important;padding:clamp(30px,4vw,56px)!important;}
html body.spx-public .spx-footer-brand-col p{max-width:420px!important;color:rgba(226,241,255,.78)!important;line-height:1.7!important;}
html body.spx-public .spx-footer-columns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;}
html body.spx-public .spx-footer-col{display:flex!important;flex-direction:column!important;gap:10px!important;}
html body.spx-public .spx-footer-col strong{color:#fff!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:4px!important;}
html body.spx-public .spx-footer-col a{color:rgba(226,241,255,.72)!important;text-decoration:none!important;transition:color .2s ease,transform .2s ease!important;}
html body.spx-public .spx-footer-col a:hover{color:#fff!important;transform:translateX(3px)!important;}
html body.spx-public .spx-footer-bottom{display:flex!important;justify-content:space-between!important;gap:18px!important;padding:18px clamp(30px,4vw,56px)!important;border-top:1px solid rgba(218,236,255,.10)!important;color:rgba(226,241,255,.62)!important;}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{padding-top:56px!important;margin-top:0!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{width:min(100%,calc(100vw - 34px))!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{position:relative!important;top:auto!important;display:grid!important;grid-template-columns:1fr!important;gap:24px!important;min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{min-height:auto!important;padding:20px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{opacity:1!important;max-height:none!important;transform:none!important;margin-bottom:18px!important;}
  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack,
  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-nav{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{min-height:auto!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{height:auto!important;aspect-ratio:16/10!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63{min-height:auto!important;padding:54px var(--side)!important;display:grid!important;gap:22px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{position:relative!important;top:auto!important;height:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{width:100%!important;height:auto!important;aspect-ratio:16/10!important;margin:0!important;transform:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{position:relative!important;inset:auto!important;display:grid!important;gap:14px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{position:relative!important;top:auto!important;margin:0!important;opacity:1!important;transform:none!important;max-width:none!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important;transform:none!important;width:100%!important;}
  html body.spx-public .spx-export-grid{grid-template-columns:1fr!important;}
  html body.spx-public .spx-footer-shell{grid-template-columns:1fr!important;}
  html body.spx-public .spx-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html body.spx-public .spx-footer-bottom{flex-direction:column!important;}
}
@media (max-width:560px){
  html body.spx-public .spx-footer-columns{grid-template-columns:1fr!important;}
}


/* A8.103 — How Spixor Works refinement: smoother handoff, larger visuals, cleaner step flow. */
html body.spx-public .spx-v26-bottom-fade{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;}
html body.spx-public #why-spixor.spx-how-v63{
  margin-top:clamp(-72px,-5vh,-24px)!important;
  padding-top:clamp(24px,3.5vh,56px)!important;
  background:transparent!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:min(100%,calc(100vw - 32px))!important;
  max-width:1440px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
  min-height:clamp(3000px,380vh,4200px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  top:clamp(72px,9vh,112px)!important;
  min-height:calc(100vh - clamp(96px,11vh,136px))!important;
  grid-template-columns:minmax(340px,.84fr) minmax(640px,1.16fr)!important;
  align-items:center!important;
  gap:clamp(34px,4.6vw,74px)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  position:relative!important;
  min-height:clamp(520px,58vh,700px)!important;
  padding:clamp(22px,2.6vw,34px) clamp(22px,2.9vw,36px)!important;
  border-radius:28px!important;
  background:linear-gradient(155deg,rgba(7,16,31,.78),rgba(8,18,36,.50))!important;
  border:1px solid rgba(219,236,255,.10)!important;
  box-shadow:0 28px 84px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  margin:0 0 clamp(18px,2vh,26px)!important;
  max-width:560px!important;
  transition:opacity .55s cubic-bezier(.22,.65,.2,1),transform .55s cubic-bezier(.22,.65,.2,1),max-height .55s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
  font-size:clamp(34px,4.35vw,60px)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
  max-width:520px!important;
  color:rgba(224,240,255,.78)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translate3d(0,20px,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  position:relative!important;
  min-height:clamp(320px,35vh,420px)!important;
  transition:opacity .55s cubic-bezier(.22,.65,.2,1),transform .55s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  inset:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,24px,0)!important;
  transition:opacity .75s cubic-bezier(.22,.65,.2,1),transform .75s cubic-bezier(.22,.65,.2,1),visibility .75s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-step::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-progress{display:none!important;content:none!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-step > span{display:none!important;}
html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  font-size:clamp(28px,3.1vw,42px)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  margin:0 0 14px!important;
  max-width:12ch!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step p,
html body.spx-public #why-spixor.spx-how-v63 .why52-step ul,
html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
  font-size:clamp(15px,1.02vw,18px)!important;
  line-height:1.68!important;
  color:rgba(220,238,255,.83)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
  margin-top:14px!important;
  max-width:560px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  position:relative!important;
  min-height:clamp(540px,66vh,790px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  opacity:.12!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  inset:0 0 0 auto!important;
  width:min(100%,920px)!important;
  margin-left:auto!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(10vw,24px,0) scale(.985)!important;
  transition:opacity .82s cubic-bezier(.22,.65,.2,1),transform .82s cubic-bezier(.22,.65,.2,1),visibility .82s cubic-bezier(.22,.65,.2,1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  height:100%!important;
  min-height:clamp(520px,60vh,740px)!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  outline:0!important;
  border-radius:30px!important;
  box-shadow:0 46px 120px rgba(0,0,0,.34)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  right:clamp(18px,2vw,28px)!important;
  bottom:clamp(18px,2vw,30px)!important;
  left:auto!important;
  max-width:min(380px,calc(100% - 48px))!important;
  padding:18px 20px!important;
  border-radius:12px 24px 24px 12px!important;
  background:linear-gradient(145deg,rgba(6,14,28,.84),rgba(8,20,38,.72))!important;
  border:1px solid rgba(218,236,255,.12)!important;
  box-shadow:0 22px 54px rgba(0,0,0,.28)!important;
  transform:translate3d(8px,0,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card b{
  display:block!important;
  font-size:20px!important;
  line-height:1.15!important;
  margin-bottom:8px!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card p{
  margin:0!important;
  font-size:14px!important;
  line-height:1.58!important;
  color:rgba(224,240,255,.76)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-kicker{
  display:inline-flex!important;
  margin-bottom:10px!important;
}
html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .why52-visual-card{opacity:.96!important;}
html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public #dashboard.spx-dashboard-command-v63 *,
html body.spx-public #export,
html body.spx-public #export *,
html body.spx-public #pricing,
html body.spx-public #pricing *,
html body.spx-public #roadmap,
html body.spx-public #roadmap *{
  filter:none!important;
  backdrop-filter:none!important;
}
@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{
    margin-top:0!important;
    padding-top:36px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{grid-template-columns:1fr!important;gap:22px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{padding:20px!important;background:linear-gradient(155deg,rgba(7,16,31,.74),rgba(8,18,36,.52))!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{display:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;min-height:auto!important;display:grid!important;gap:18px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{min-height:auto!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{position:relative!important;display:grid!important;gap:16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{position:relative!important;inset:auto!important;width:100%!important;opacity:1!important;visibility:visible!important;transform:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{min-height:auto!important;aspect-ratio:16/10!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{position:relative!important;right:auto!important;bottom:auto!important;max-width:none!important;transform:none!important;margin-top:12px!important;border-radius:16px!important;}
}


/* A8.104 — remove remaining frame/container feel around How Spixor Works right-side visuals.
   Keep the actual screenshot/image as the hero visual, but remove wrapper panels, borders,
   stage glass surfaces and artificial container outlines. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  filter:none!important;
  backdrop-filter:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage::before,
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals::after,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::after{
  content:none!important;
  display:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:0 34px 90px rgba(0,0,0,.22)!important;
  border-radius:24px!important;
}

/* Make the overlay explanation card feel like it belongs on top of the image,
   not like a second container under/in front of a framed visual. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(10px,1.4vw,22px)!important;
  bottom:clamp(14px,1.8vw,26px)!important;
  border-radius:10px 24px 24px 10px!important;
  border:1px solid rgba(218,236,255,.10)!important;
  background:linear-gradient(145deg,rgba(5,13,27,.78),rgba(8,19,37,.64))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24)!important;
}

/* Prevent any older global figure/product-frame rules from reintroducing a frame. */
html body.spx-public #why-spixor.spx-how-v63 figure.why52-visual{
  padding:0!important;
  overflow:visible!important;
  isolation:auto!important;
}

/* Mobile keeps the screenshot clean and unframed as well. */
@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    box-shadow:0 22px 56px rgba(0,0,0,.20)!important;
    border-radius:20px!important;
  }
}


/* A8.105 — push How Spixor Works visuals to the right viewport edge and animate them in from off-screen.
   This keeps the image unframed, but makes it feel like it slides in from the right side of the screen. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(330px,.72fr) minmax(720px,1.28fr)!important;
  gap:clamp(28px,3.2vw,56px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  width:calc(100% + var(--side, 48px) + 4vw)!important;
  margin-right:calc(var(--side, 48px) * -1)!important;
  justify-self:end!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  inset:0!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  right:calc(var(--side, 48px) * -1)!important;
  left:auto!important;
  width:min(980px, calc(62vw + var(--side, 48px)))!important;
  max-width:none!important;
  transform:translate3d(18vw,24px,0) scale(.985)!important;
  transform-origin:center right!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(0,0,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  width:100%!important;
  min-height:clamp(540px,64vh,760px)!important;
  object-fit:cover!important;
  object-position:center left!important;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
  box-shadow:-34px 38px 105px rgba(0,0,0,.28)!important;
}

/* Keep the overlay card inside the visible part of the image, not outside the viewport edge. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(26px,3.2vw,58px)!important;
}

/* 1440p+ gets a stronger edge-hugging image, without breaking 1080p. */
@media (min-width:1500px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    width:calc(100% + var(--side, 64px) + 6vw)!important;
    margin-right:calc((var(--side, 64px) + 2vw) * -1)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1080px, calc(64vw + var(--side, 64px)))!important;
    right:calc((var(--side, 64px) + 2vw) * -1)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    width:100%!important;
    margin-right:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    right:auto!important;
    width:100%!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    border-top-right-radius:20px!important;
    border-bottom-right-radius:20px!important;
    object-position:center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
  }
}


/* A8.106 — true full-bleed right visual lane for How Spixor Works + anti text clipping.
   The visual column now breaks out of the centered shell so the image can touch the viewport edge.
   The left copy area gets more room and visible overflow so long text cannot be clipped. */
html body.spx-public #why-spixor.spx-how-v63{
  overflow:clip!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  padding-left:max(clamp(22px,4.6vw,76px), calc((100vw - 1440px) / 2 + 32px))!important;
  padding-right:0!important;
  grid-template-columns:minmax(360px,520px) minmax(0,1fr)!important;
  gap:clamp(30px,4vw,64px)!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  max-width:520px!important;
  min-height:clamp(610px,68vh,760px)!important;
  height:auto!important;
  align-self:center!important;
  overflow:visible!important;
  z-index:5!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
  min-height:clamp(430px,46vh,560px)!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step{
  overflow:visible!important;
  max-height:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
  max-width:13.5ch!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step p{
  max-width:500px!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
  max-width:500px!important;
  padding-bottom:10px!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  width:100%!important;
  min-width:0!important;
  margin-right:0!important;
  justify-self:stretch!important;
  min-height:clamp(600px,72vh,820px)!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
  position:absolute!important;
  inset:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  position:absolute!important;
  top:50%!important;
  right:0!important;
  bottom:auto!important;
  left:auto!important;
  width:min(1040px,68vw)!important;
  height:min(760px,72vh)!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(28vw,-50%,0) scale(.985)!important;
  transform-origin:center right!important;
  transition:opacity .84s cubic-bezier(.22,.65,.2,1),transform .84s cubic-bezier(.22,.65,.2,1),visibility .84s cubic-bezier(.22,.65,.2,1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,-50%,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual::before,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual::after{
  content:none!important;
  display:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  object-fit:cover!important;
  object-position:center left!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  border-radius:28px 0 0 28px!important;
  box-shadow:-38px 42px 110px rgba(0,0,0,.30)!important;
}

/* Remove every remaining stage decoration that reads as a container. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage,
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage *,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals,
html body.spx-public #why-spixor.spx-how-v63 .why52-visuals *{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-network,
html body.spx-public #why-spixor.spx-how-v63 .why52-float{
  display:none!important;
}

/* Overlay explanation card sits on the image, away from the edge, with small left corner radii. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  right:clamp(28px,4vw,72px)!important;
  bottom:clamp(24px,4vh,52px)!important;
  left:auto!important;
  max-width:min(390px,calc(100% - 90px))!important;
  border-radius:10px 24px 24px 10px!important;
  background:linear-gradient(145deg,rgba(5,13,27,.82),rgba(8,20,38,.68))!important;
  border:1px solid rgba(218,236,255,.11)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.26)!important;
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1160px,66vw)!important;
    height:min(820px,74vh)!important;
  }
}

@media (max-width:1180px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(330px,460px) minmax(0,1fr)!important;
    padding-left:clamp(22px,4vw,54px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:64vw!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63{
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:min(100%,calc(100vw - 34px))!important;
    margin:0 auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100%!important;
    margin-left:0!important;
    padding:0!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:none!important;
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    height:auto!important;
    aspect-ratio:16/10!important;
    border-radius:20px!important;
    box-shadow:0 22px 56px rgba(0,0,0,.20)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    max-width:none!important;
    margin-top:12px!important;
    border-radius:16px!important;
  }
}


/* A8.107 — larger, more right-pushed How Spixor Works visuals.
   The right visual should feel like it enters from outside the viewport and fills the right side,
   not like a normal image inside the page grid. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(340px,500px) minmax(0,1fr)!important;
  gap:clamp(22px,2.6vw,46px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
  max-width:500px!important;
  z-index:6!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  min-height:clamp(680px,78vh,900px)!important;
  width:100%!important;
  overflow:visible!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  width:min(1700px,86vw)!important;
  height:min(920px,82vh)!important;
  right:clamp(-260px,-10vw,-90px)!important;
  transform:translate3d(34vw,-50%,0) scale(.985)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(0,-50%,0) scale(1)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  height:100%!important;
  min-height:clamp(650px,76vh,880px)!important;
  object-fit:cover!important;
  object-position:center left!important;
  border-radius:30px 0 0 30px!important;
  box-shadow:-42px 48px 130px rgba(0,0,0,.34)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(120px,12vw,250px)!important;
  bottom:clamp(28px,5vh,64px)!important;
}

/* Wider screens may use a truly cinematic image size. */
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1860px,84vw)!important;
    height:min(980px,82vh)!important;
    right:clamp(-360px,-11vw,-150px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:clamp(700px,78vh,940px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(150px,13vw,310px)!important;
  }
}

/* On shorter desktop screens, stay large but avoid clipping the top/bottom too much. */
@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 110px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 130px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 130px)!important;
  }
}

@media (max-width:1180px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(310px,440px) minmax(0,1fr)!important;
    gap:24px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:88vw!important;
    right:clamp(-180px,-9vw,-70px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(86px,10vw,180px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:100%!important;
    height:auto!important;
    right:auto!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
    bottom:auto!important;
  }
}


/* A8.108 — correct How visual direction: bigger AND visually pushed to the right.
   A8.107 increased width, which made the left edge move left. This pass keeps the image large
   but translates the active visual to the right so it really feels attached to / coming from the right edge. */
html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
  grid-template-columns:minmax(330px,480px) minmax(0,1fr)!important;
  gap:clamp(18px,2.2vw,38px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
  min-height:clamp(720px,82vh,980px)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
  width:min(1880px,96vw)!important;
  height:min(1040px,88vh)!important;
  right:clamp(-520px,-22vw,-260px)!important;
  transform:translate3d(52vw,-50%,0) scale(1.02)!important;
  transform-origin:center right!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
  transform:translate3d(clamp(130px,12vw,260px),-50%,0) scale(1.075)!important;
}

html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
  min-height:clamp(700px,84vh,980px)!important;
  object-position:center left!important;
  border-radius:32px 0 0 32px!important;
  box-shadow:-46px 54px 150px rgba(0,0,0,.34)!important;
}

/* Move the overlay card with the now right-shifted image so it remains visible. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  right:clamp(260px,24vw,520px)!important;
  bottom:clamp(34px,5.5vh,72px)!important;
}

/* Ultra-wide can go even bigger, but still stays clipped by the viewport edge. */
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(2120px,98vw)!important;
    height:min(1120px,88vh)!important;
    right:clamp(-680px,-24vw,-360px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(220px,15vw,390px),-50%,0) scale(1.09)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(360px,28vw,680px)!important;
  }
}

/* 1080p/medium desktop: still push right, but avoid hiding too much of the useful screenshot. */
@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1500px,94vw)!important;
    right:clamp(-380px,-20vw,-210px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(90px,9vw,170px),-50%,0) scale(1.06)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:clamp(190px,20vw,360px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 86px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 86px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    width:100%!important;
    height:auto!important;
    right:auto!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:auto!important;
    border-radius:20px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    right:auto!important;
    bottom:auto!important;
  }
}


/* ==========================================================================
   A8.109 — How Spixor Works final edge-flow pass
   - Intro is copy-only: no right image during the intro beat.
   - Step 1 brings the image in from the real right viewport edge.
   - Step cards crossfade in one controlled flow.
   - Visual explanation cards move inward over the image instead of sitting off-screen.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    --spx-how-a109-stage-opacity:0;
    overflow:clip!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1420px,205vh,1980px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(24px,5vw,82px),calc((100vw - 1440px) / 2 + 34px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(330px,500px) minmax(0,1fr)!important;
    gap:clamp(28px,4vw,72px)!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:500px!important;
    min-height:clamp(500px,60vh,690px)!important;
    overflow:visible!important;
    z-index:10!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    will-change:opacity,transform,max-height!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:clamp(390px,44vh,540px)!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    justify-content:center!important;
    transform:translate3d(0,26px,0) scale(.982)!important;
    transition:opacity .74s cubic-bezier(.22,.78,.18,1),transform .74s cubic-bezier(.22,.78,.18,1),visibility .74s cubic-bezier(.22,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-progress{
    transform-origin:left center!important;
    transform:scaleX(var(--spx-how-local,0))!important;
    transition:transform .18s linear!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    position:relative!important;
    justify-self:stretch!important;
    width:100%!important;
    min-height:clamp(680px,80vh,940px)!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(8vw,0,0) scale(.985)!important;
    transition:opacity .72s cubic-bezier(.22,.78,.18,1),transform .72s cubic-bezier(.22,.78,.18,1),visibility .72s cubic-bezier(.22,.78,.18,1)!important;
    z-index:4!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    top:50%!important;
    left:auto!important;
    bottom:auto!important;
    right:calc(-1 * clamp(260px,18vw,560px))!important;
    width:min(1780px,76vw)!important;
    height:min(1040px,88vh)!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(50vw,-50%,0) scale(1.015)!important;
    transition:opacity .86s cubic-bezier(.2,.82,.18,1),transform .92s cubic-bezier(.2,.82,.18,1),visibility .86s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(clamp(70px,7vw,170px),-50%,0) scale(1.055)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:clamp(660px,82vh,940px)!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:26px 0 0 26px!important;
    background:transparent!important;
    box-shadow:-38px 48px 138px rgba(0,0,0,.34)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(34px,4vw,86px)!important;
    right:auto!important;
    bottom:clamp(28px,5vh,68px)!important;
    max-width:min(420px,calc(100% - 140px))!important;
    border-radius:10px 24px 24px 10px!important;
    transform:translate3d(-10px,10px,0)!important;
    opacity:.96!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
    transition:transform .78s cubic-bezier(.2,.82,.18,1),opacity .78s cubic-bezier(.2,.82,.18,1)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1960px,74vw)!important;
    right:calc(-1 * clamp(420px,20vw,720px))!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(120px,8vw,230px),-50%,0) scale(1.06)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(42px,4.4vw,104px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(300px,440px) minmax(0,1fr)!important;
    gap:clamp(20px,3vw,46px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:440px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1280px,75vw)!important;
    right:calc(-1 * clamp(210px,16vw,360px))!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    transform:translate3d(clamp(48px,6vw,110px),-50%,0) scale(1.045)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(28px,3.5vw,64px)!important;
    max-width:min(390px,calc(100% - 110px))!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 96px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 100px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:calc(100vh - 100px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{
    display:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:auto!important;
    right:auto!important;
    transform:none!important;
  }
}

/* ========================================================================== 
   A8.110 — How Spixor Works edge/tempo correction
   - Screenshots are slightly smaller/lower, but locked harder to the right edge.
   - The intro card is shorter and wider so it no longer feels mega tall.
   - Step visuals keep a stronger hold while fast scrolling.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    overflow:clip!important;
    padding-top:clamp(18px,3vh,46px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1760px,248vh,2680px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(22px,4.6vw,78px),calc((100vw - 1440px) / 2 + 30px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(360px,570px) minmax(0,1fr)!important;
    gap:clamp(24px,3.6vw,62px)!important;
    align-items:center!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:570px!important;
    min-height:clamp(380px,44vh,540px)!important;
    padding:clamp(18px,2.15vw,30px) clamp(22px,2.7vw,38px)!important;
    align-self:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:640px!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(30px,3.35vw,52px)!important;
    line-height:1.02!important;
    letter-spacing:-.052em!important;
    max-width:13.5ch!important;
    margin:10px 0 12px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:620px!important;
    font-size:clamp(15px,.95vw,17px)!important;
    line-height:1.55!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:clamp(290px,32vh,390px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    transition:opacity .82s cubic-bezier(.2,.78,.18,1),transform .82s cubic-bezier(.2,.78,.18,1),visibility .82s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(560px,70vh,800px)!important;
    align-self:center!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    top:50%!important;
    left:auto!important;
    bottom:auto!important;
    right:-18px!important;
    width:min(1540px,68vw)!important;
    height:min(800px,74vh)!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(34vw,-50%,0) scale(.985)!important;
    transition:opacity .94s cubic-bezier(.2,.82,.18,1),transform 1.02s cubic-bezier(.2,.82,.18,1),visibility .94s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,-50%,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:24px 0 0 24px!important;
    background:transparent!important;
    box-shadow:-32px 40px 116px rgba(0,0,0,.31)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(8px,1.7vw,32px)!important;
    right:auto!important;
    bottom:clamp(24px,4.2vh,54px)!important;
    max-width:min(410px,calc(100% - 78px))!important;
    border-radius:10px 22px 22px 10px!important;
    transform:translate3d(-8px,8px,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
    transition:transform .84s cubic-bezier(.2,.82,.18,1),opacity .84s cubic-bezier(.2,.82,.18,1)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1680px,66vw)!important;
    height:min(820px,72vh)!important;
    right:-22px!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(320px,500px) minmax(0,1fr)!important;
    gap:clamp(18px,2.8vw,42px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:500px!important;
    min-height:clamp(360px,43vh,520px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    width:min(1180px,70vw)!important;
    height:min(720px,70vh)!important;
    right:-18px!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 150px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    height:calc(100vh - 154px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    min-height:0!important;
  }
}

/* ========================================================================== 
   A8.111 — How Spixor Works true viewport-edge handoff
   - The visual layer is no longer limited by the grid column during desktop steps.
   - Screenshots are anchored beyond the real viewport right edge, not merely the stage edge.
   - Intro is compact and wide; step stack only takes space when the step-flow starts.
   - What -> How uses a soft opacity/translate handoff instead of a hard section reveal.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63{
    --spx-how-handoff:1;
    overflow:visible!important;
    background:transparent!important;
    padding-top:clamp(8px,1.6vh,24px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(1940px,282vh,3040px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    padding-left:max(clamp(22px,4.4vw,78px),calc((100vw - 1440px) / 2 + 28px))!important;
    padding-right:0!important;
    grid-template-columns:minmax(380px,640px) minmax(0,1fr)!important;
    gap:clamp(20px,3vw,54px)!important;
    align-items:center!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:640px!important;
    min-height:0!important;
    align-self:center!important;
    padding:clamp(18px,2vw,28px) clamp(24px,3vw,42px)!important;
    overflow:visible!important;
    z-index:20!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:640px!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    max-height:260px!important;
    overflow:hidden!important;
    transition:opacity .62s cubic-bezier(.2,.78,.18,1),transform .62s cubic-bezier(.2,.78,.18,1),max-height .62s cubic-bezier(.2,.78,.18,1),margin .62s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,-18px,0)!important;
    max-height:0!important;
    margin:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin-bottom:10px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(32px,3.05vw,50px)!important;
    line-height:1.03!important;
    letter-spacing:-.052em!important;
    max-width:18ch!important;
    margin:6px 0 10px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:620px!important;
    font-size:clamp(15px,.92vw,17px)!important;
    line-height:1.48!important;
    margin:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    min-height:0!important;
    max-height:0!important;
    opacity:0!important;
    visibility:hidden!important;
    overflow:visible!important;
    transform:translate3d(0,18px,0)!important;
    transition:opacity .62s cubic-bezier(.2,.78,.18,1),transform .62s cubic-bezier(.2,.78,.18,1),max-height .62s cubic-bezier(.2,.78,.18,1),visibility .62s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
    min-height:clamp(292px,32vh,396px)!important;
    max-height:520px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    width:min(560px,100%)!important;
    padding:clamp(20px,2.1vw,28px)!important;
    transition:opacity .9s cubic-bezier(.2,.78,.18,1),transform .9s cubic-bezier(.2,.78,.18,1),visibility .9s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(520px,62vh,740px)!important;
    height:clamp(520px,62vh,740px)!important;
    align-self:center!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    transition:opacity .68s cubic-bezier(.2,.78,.18,1),visibility .68s cubic-bezier(.2,.78,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .spx-why52-stage{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-network,
  html body.spx-public #why-spixor.spx-how-v63 .why52-float{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:absolute!important;
    inset:0!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:50vh!important;
    right:clamp(-420px,-20vw,-230px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(980px,76vw,1560px)!important;
    height:clamp(520px,62vh,720px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    overflow:visible!important;
    transform-origin:center right!important;
    transform:translate3d(38vw,0,0) scale(.982)!important;
    transition:opacity 1.02s cubic-bezier(.2,.82,.18,1),transform 1.08s cubic-bezier(.2,.82,.18,1),visibility 1.02s cubic-bezier(.2,.82,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center left!important;
    border:0!important;
    outline:0!important;
    border-radius:24px 0 0 24px!important;
    background:transparent!important;
    box-shadow:-32px 40px 116px rgba(0,0,0,.31)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-128px,-5vw,-62px)!important;
    right:auto!important;
    bottom:clamp(24px,4.5vh,58px)!important;
    max-width:min(420px,calc(100vw - 86px))!important;
    border-radius:10px 22px 22px 10px!important;
    transform:translate3d(-12px,10px,0)!important;
    opacity:.96!important;
    transition:transform .9s cubic-bezier(.2,.82,.18,1),opacity .9s cubic-bezier(.2,.82,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual.is-active .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual[data-spx-active="1"] .why52-visual-card{
    transform:translate3d(0,0,0)!important;
  }

  html.spx-how-handoff-active body.spx-public .spx-v26-explain{
    opacity:calc(1 - min(.92,var(--spx-how-handoff,0)))!important;
    transform:translate3d(0,calc(var(--spx-how-handoff,0) * -26px),0) scale(calc(1 - (var(--spx-how-handoff,0) * .018)))!important;
    transition:none!important;
  }

  html.spx-how-handoff-active body.spx-public #why-spixor.spx-how-v63{
    opacity:clamp(.18,var(--spx-how-handoff,1),1)!important;
    transform:translate3d(0,calc((1 - var(--spx-how-handoff,1)) * 32px),0)!important;
    transition:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    right:clamp(-520px,-22vw,-330px)!important;
    width:clamp(1180px,74vw,1680px)!important;
    height:clamp(540px,60vh,760px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-150px,-5.2vw,-82px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(320px,520px) minmax(0,1fr)!important;
    gap:clamp(16px,2.6vw,38px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:520px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    right:clamp(-330px,-20vw,-220px)!important;
    width:clamp(900px,76vw,1180px)!important;
    height:clamp(500px,60vh,660px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    left:clamp(-96px,-5vw,-48px)!important;
    max-width:min(390px,calc(100vw - 74px))!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:calc(100vh - 178px)!important;
    height:calc(100vh - 178px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    height:calc(100vh - 178px)!important;
  }
}

/* A8.111b — keep the viewport-fixed visual truly viewport-fixed.
   A transformed ancestor would turn position:fixed into section-relative positioning,
   which is exactly what created the visible right-side gap. */
@media (min-width:981px){
  html.spx-how-handoff-active body.spx-public #why-spixor.spx-how-v63{
    opacity:clamp(.18,var(--spx-how-handoff,1),1)!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  html.spx-how-handoff-active body.spx-public .spx-v26-explain{
    opacity:clamp(.08,calc(1 - var(--spx-how-handoff,0)),1)!important;
  }
}

/* ========================================================================== 
   A8.112 — How Spixor Works: edge-lock, fade-only steps and no blank handoff
   - Step visuals no longer slide between 01/02/03; they crossfade in place.
   - The fixed visual lane is pushed much further to the real viewport right edge.
   - Visuals sit higher and slightly calmer in height.
   - What is Spixor -> How Spixor Works uses a direct crossfade, no empty dark screen.
   - Intro copy is compact, wider and shorter; step 01 starts sooner.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public .spx-v26-bottom-fade,
  html body.spx-public .spx-how-handoff-overlay,
  html body.spx-public .spx-how-handoff-overlay.is-visible{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:clamp(2600px,398svh,4200px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63{
    margin-top:clamp(-96px,-8svh,-42px)!important;
    padding-top:0!important;
    background:transparent!important;
    opacity:var(--spx-a112-how-opacity,1)!important;
    transform:translate3d(0,calc((1 - var(--spx-a112-how-opacity,1)) * 18px),0)!important;
    filter:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(2140px,310svh,3380px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    padding-top:clamp(34px,5vh,66px)!important;
    padding-bottom:clamp(34px,5vh,66px)!important;
    grid-template-columns:minmax(400px,680px) minmax(0,1fr)!important;
    gap:clamp(16px,2.8vw,50px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    max-width:700px!important;
    padding:clamp(14px,1.7vw,24px) clamp(22px,2.7vw,38px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:700px!important;
    max-height:176px!important;
    margin:0!important;
    padding:0!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    max-height:0!important;
    opacity:0!important;
    transform:translate3d(0,-12px,0)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin-bottom:8px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    max-width:26ch!important;
    margin:4px 0 8px!important;
    font-size:clamp(30px,2.68vw,46px)!important;
    line-height:1.02!important;
    letter-spacing:-.052em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:680px!important;
    margin:0!important;
    font-size:clamp(14px,.86vw,16px)!important;
    line-height:1.42!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .why52-step-stack{
    min-height:clamp(284px,31vh,380px)!important;
    max-height:480px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(430px,54vh,620px)!important;
    height:clamp(430px,54vh,620px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:42.5vh!important;
    right:clamp(-650px,-30vw,-360px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(980px,68vw,1400px)!important;
    height:clamp(430px,54vh,620px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    filter:none!important;
    transition:opacity .86s cubic-bezier(.22,.76,.18,1)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:22px 0 0 22px!important;
    box-shadow:-28px 34px 92px rgba(0,0,0,.28)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-182px,-8vw,-92px)!important;
    right:auto!important;
    bottom:clamp(18px,3.4vh,42px)!important;
    max-width:min(408px,calc(100vw - 86px))!important;
    padding:clamp(16px,1.55vw,22px) clamp(18px,1.8vw,26px)!important;
    border-radius:10px 22px 22px 10px!important;
    opacity:1!important;
    transform:none!important;
    transition:opacity .86s cubic-bezier(.22,.76,.18,1)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]) .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active):not([data-spx-active="1"]) figcaption{
    opacity:0!important;
  }

  html.spx-a112-handoff body.spx-public .spx-v26-explain,
  html.spx-a112-handoff body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--spx-a112-how-in,0))!important;
    transform:translate3d(-50%,calc(var(--spx-a112-how-in,0) * -18px),0) scale(calc(1 - (var(--spx-a112-how-in,0) * .012)))!important;
    filter:none!important;
    transition:none!important;
  }

  html.spx-a112-handoff body.spx-public .spx-v26-explain{
    transform:translate3d(0,calc(var(--spx-a112-how-in,0) * -18px),0) scale(calc(1 - (var(--spx-a112-how-in,0) * .012)))!important;
  }

  html.spx-a112-handoff body.spx-public #why-spixor.spx-how-v63{
    --spx-a112-how-opacity:clamp(.08,var(--spx-a112-how-in,1),1);
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:42vh!important;
    right:clamp(-780px,-32vw,-520px)!important;
    width:clamp(1160px,67vw,1540px)!important;
    height:clamp(470px,53vh,660px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-220px,-8.2vw,-128px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(340px,560px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.5vh!important;
    right:clamp(-500px,-31vw,-330px)!important;
    width:clamp(880px,68vw,1120px)!important;
    height:clamp(420px,54vh,590px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-150px,-8vw,-82px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:43vh!important;
    height:calc(100vh - 230px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    height:calc(100vh - 230px)!important;
    min-height:calc(100vh - 230px)!important;
  }
}

/* ========================================================================== 
   GPT A8.113 — How Spixor Works intro + scroll-crossfade + Dashboard handoff
   - The How intro is the first visible element after What is Spixor.
   - Intro is bigger, wider and no longer reads like a small boxed card.
   - Step content gets a stronger Spixor/HUD glass card style.
   - Step visuals are slightly larger and fade by scroll progress, not by slide.
   - How fades out while Dashboard Command Center starts fading in.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:clamp(2780px,420svh,4460px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63{
    --a113-how-in:1;
    --a113-how-exit:0;
    --a113-intro-opacity:1;
    --a113-steps-opacity:0;
    margin-top:clamp(-150px,-13svh,-86px)!important;
    padding-top:0!important;
    opacity:var(--a113-how-in)!important;
    transform:translate3d(0,calc((1 - var(--a113-how-in)) * 18px - var(--a113-how-exit) * 18px),0)!important;
    filter:blur(calc(var(--a113-how-exit) * 5px))!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:clamp(2750px,395svh,4300px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(54px,8vh,96px)!important;
    padding-bottom:clamp(54px,8vh,96px)!important;
    padding-left:max(clamp(28px,6vw,96px),calc((100vw - 1440px) / 2 + 40px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(430px,700px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(24px,3.2vw,56px)!important;
    opacity:calc(1 - var(--a113-how-exit))!important;
    transform:translate3d(0,calc(var(--a113-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy{
    width:min(700px,calc(100vw - 72px))!important;
    max-width:700px!important;
    min-height:clamp(500px,62vh,700px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:24!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-copy{
    width:min(880px,calc(100vw - 96px))!important;
    max-width:880px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-width:860px!important;
    max-height:clamp(340px,44vh,440px)!important;
    margin:0!important;
    padding:clamp(10px,1.2vw,18px) 0!important;
    opacity:var(--a113-intro-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a113-intro-opacity)) * -18px),0) scale(calc(.986 + (.014 * var(--a113-intro-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-step-flow .spx-why52-story-head{
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    opacity:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:-34px!important;
    top:-22px!important;
    width:min(540px,66vw)!important;
    height:clamp(190px,25vh,280px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 28% 36%,rgba(24,213,255,.17),transparent 66%)!important;
    filter:blur(12px)!important;
    opacity:.8!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head .eyebrow{
    margin:0 0 18px!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    max-width:12.5ch!important;
    margin:0 0 20px!important;
    font-size:clamp(52px,6vw,94px)!important;
    line-height:.92!important;
    letter-spacing:-.072em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head p{
    max-width:760px!important;
    margin:0!important;
    font-size:clamp(17px,1.32vw,23px)!important;
    line-height:1.62!important;
    color:rgba(226,241,255,.78)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(440px,50vh,610px)!important;
    height:clamp(440px,50vh,610px)!important;
    margin:0!important;
    opacity:var(--a113-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a113-steps-opacity)) * 24px),0) scale(calc(.982 + (.018 * var(--a113-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(30px,3.2vw,48px)!important;
    border-radius:30px!important;
    border:1px solid rgba(117,229,255,.18)!important;
    background:
      linear-gradient(145deg,rgba(7,17,31,.82),rgba(5,10,22,.68) 56%,rgba(6,25,43,.54)),
      radial-gradient(420px 220px at 16% 10%,rgba(24,213,255,.13),transparent 70%)!important;
    box-shadow:0 28px 88px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.075),0 0 0 1px rgba(255,255,255,.025)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,18px,0) scale(.985)!important;
    transition:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(115deg,rgba(255,255,255,.10),transparent 26%,transparent 76%,rgba(24,213,255,.08))!important;
    opacity:.65!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:22px!important;
    right:22px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.55),transparent)!important;
    opacity:.7!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step.is-active,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step[data-spx-active="1"]{
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step span{
    display:inline-flex!important;
    width:max-content!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:2px!important;
    padding:8px 11px!important;
    border-radius:999px!important;
    border:1px solid rgba(107,232,255,.22)!important;
    background:rgba(24,213,255,.075)!important;
    color:#79ecff!important;
    font-size:12px!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
    font-weight:950!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step h3{
    margin:4px 0 2px!important;
    font-size:clamp(30px,2.8vw,46px)!important;
    line-height:1.02!important;
    letter-spacing:-.048em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step p{
    max-width:620px!important;
    font-size:clamp(15px,1vw,18px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.76)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step ul{
    display:grid!important;
    gap:10px!important;
    margin:8px 0 0!important;
    padding:0!important;
    list-style:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step li{
    position:relative!important;
    padding-left:25px!important;
    color:rgba(226,241,255,.72)!important;
    font-size:14px!important;
    line-height:1.45!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-step li::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:.62em!important;
    width:8px!important;
    height:8px!important;
    border-radius:999px!important;
    background:#6be8ff!important;
    box-shadow:0 0 18px rgba(107,232,255,.58)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    min-height:clamp(520px,64vh,740px)!important;
    height:clamp(520px,64vh,740px)!important;
    opacity:var(--a113-steps-opacity)!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:45.5vh!important;
    right:clamp(-720px,-32vw,-420px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1060px,72vw,1540px)!important;
    height:clamp(500px,62vh,750px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a113-steps-opacity) * (1 - var(--a113-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual.is-active,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual[data-spx-active="1"]{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-34px 42px 112px rgba(0,0,0,.31)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-210px,-9.2vw,-112px)!important;
    right:auto!important;
    bottom:clamp(22px,3.6vh,52px)!important;
    max-width:min(430px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.6vw,24px) clamp(20px,1.9vw,28px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.84),rgba(3,8,18,.72))!important;
    border:1px solid rgba(116,232,255,.18)!important;
    box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.065)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63 .why52-network,
  html body.spx-public #why-spixor.spx-how-v63 .why52-float{
    opacity:calc(var(--a113-steps-opacity) * .72)!important;
  }

  html.spx-a113-what-how body.spx-public .spx-v26-explain,
  html.spx-a113-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a113-how-in,0))!important;
    filter:none!important;
    transition:none!important;
  }

  html.spx-a113-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a113-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a113-dashboard-in,0)) * 24px),0)!important;
    filter:blur(calc((1 - var(--a113-dashboard-in,0)) * 4px))!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63{
    transition:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:45vh!important;
    right:clamp(-900px,-35vw,-620px)!important;
    width:clamp(1240px,72vw,1720px)!important;
    height:clamp(540px,62vh,800px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-260px,-10vw,-150px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-intro-flow .spx-why52-copy{
    max-width:760px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:45.5vh!important;
    right:clamp(-640px,-34vw,-420px)!important;
    width:clamp(980px,73vw,1300px)!important;
    height:clamp(480px,62vh,700px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    left:clamp(-184px,-9.2vw,-104px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    min-height:660px!important;
    padding-top:42px!important;
    padding-bottom:42px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{
    font-size:clamp(46px,5.4vw,78px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63.is-how-active-viewport.is-step-flow .why52-visuals{
    top:46vh!important;
    height:calc(100vh - 176px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    height:calc(100vh - 176px)!important;
    min-height:calc(100vh - 176px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-step,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ========================================================================== 
   GPT A8.114 — How Spixor Works animation stabilization
   - Retires visual flicker by letting opacity, not visibility/class switches, do the fade.
   - Intro becomes a larger, unboxed zoom-fade scene before the steps appear.
   - Step cards/screenshots crossfade by scroll progress with longer overlap windows.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]{
    --a114-how-in:1;
    --a114-intro-opacity:1;
    --a114-intro-out:0;
    --a114-steps-opacity:0;
    --a114-how-exit:0;
    --a114-dashboard-in:0;
    margin-top:clamp(-130px,-10svh,-72px)!important;
    padding-top:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    background:transparent!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-track{
    min-height:clamp(2920px,420svh,4520px)!important;
    height:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(48px,7vh,88px)!important;
    padding-bottom:clamp(48px,7vh,88px)!important;
    padding-left:max(clamp(30px,6vw,104px),calc((100vw - 1480px) / 2 + 42px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(440px,720px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(28px,3.6vw,62px)!important;
    opacity:calc(1 - var(--a114-how-exit))!important;
    transform:translate3d(0,calc(var(--a114-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-sticky{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-copy{
    width:min(720px,calc(100vw - 76px))!important;
    max-width:720px!important;
    min-height:clamp(500px,60vh,690px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:26!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-copy{
    width:min(1080px,calc(100vw - 128px))!important;
    max-width:1080px!important;
    min-height:clamp(470px,58vh,660px)!important;
    justify-content:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head{
    position:relative!important;
    width:min(1040px,calc(100vw - 128px))!important;
    max-width:1040px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:var(--a114-intro-opacity)!important;
    visibility:visible!important;
    transform:translate3d(0,var(--a114-intro-y,0px),0) scale(calc(1 + (var(--a114-intro-out) * .075)))!important;
    filter:blur(calc(var(--a114-intro-out) * 5px))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-step-flow .spx-why52-story-head{
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:clamp(-90px,-6vw,-34px)!important;
    top:clamp(-86px,-7vh,-38px)!important;
    width:min(780px,72vw)!important;
    height:clamp(300px,38vh,430px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 34% 38%,rgba(24,213,255,.20),rgba(37,99,235,.085) 42%,transparent 72%)!important;
    filter:blur(18px)!important;
    opacity:.88!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:clamp(-30px,-3vh,-12px)!important;
    width:min(520px,52vw)!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(107,232,255,.58),rgba(107,232,255,.16),transparent)!important;
    opacity:calc(.24 + var(--a114-intro-opacity) * .52)!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head .eyebrow{
    margin:0 0 20px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    background:rgba(24,213,255,.085)!important;
    border:1px solid rgba(107,232,255,.20)!important;
    color:#8eefff!important;
    box-shadow:0 18px 48px rgba(24,213,255,.08)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head h2{
    max-width:13.8ch!important;
    margin:0 0 22px!important;
    font-size:clamp(66px,7.1vw,118px)!important;
    line-height:.89!important;
    letter-spacing:-.082em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head p{
    max-width:820px!important;
    margin:0!important;
    font-size:clamp(18px,1.45vw,25px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.80)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step-nav{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(450px,52vh,630px)!important;
    height:clamp(450px,52vh,630px)!important;
    margin:0!important;
    opacity:var(--a114-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a114-steps-opacity)) * 24px),0) scale(calc(.984 + (.016 * var(--a114-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(32px,3.4vw,52px)!important;
    border-radius:32px!important;
    border:1px solid rgba(121,236,255,.22)!important;
    background:
      radial-gradient(520px 260px at 12% 6%,rgba(24,213,255,.16),transparent 66%),
      linear-gradient(145deg,rgba(8,19,34,.88),rgba(5,10,22,.72) 54%,rgba(7,31,51,.58))!important;
    box-shadow:0 30px 92px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.028)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,14px,0) scale(.988)!important;
    filter:blur(1.6px)!important;
    transition:none!important;
    pointer-events:none!important;
    overflow:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(116deg,rgba(255,255,255,.12),transparent 27%,transparent 74%,rgba(24,213,255,.10))!important;
    opacity:.70!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:24px!important;
    right:24px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.64),transparent)!important;
    opacity:.78!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step h3{
    margin:4px 0 4px!important;
    font-size:clamp(31px,2.9vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-step p{
    max-width:650px!important;
    font-size:clamp(15px,1.04vw,18px)!important;
    line-height:1.6!important;
    color:rgba(226,241,255,.78)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-stage{
    min-height:clamp(545px,66vh,780px)!important;
    height:clamp(545px,66vh,780px)!important;
    opacity:var(--a114-steps-opacity)!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"]:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:44.5vh!important;
    right:clamp(-780px,-34vw,-470px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1140px,76vw,1660px)!important;
    height:clamp(535px,66vh,805px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a114-steps-opacity) * (1 - var(--a114-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:scale(.992)!important;
    filter:blur(1.1px)!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,filter,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-36px 46px 118px rgba(0,0,0,.32)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual figcaption{
    left:clamp(-220px,-9.4vw,-124px)!important;
    right:auto!important;
    bottom:clamp(24px,3.8vh,58px)!important;
    max-width:min(446px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.7vw,25px) clamp(20px,2vw,30px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.86),rgba(3,8,18,.74))!important;
    border:1px solid rgba(116,232,255,.20)!important;
    box-shadow:0 28px 74px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(13px)!important;
    -webkit-backdrop-filter:blur(13px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html.spx-a114-what-how body.spx-public .spx-v26-explain,
  html.spx-a114-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a114-how-in,0))!important;
    filter:blur(calc(var(--a114-how-in,0) * 2.5px))!important;
    transition:none!important;
  }

  html.spx-a114-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a114-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a114-dashboard-in,0)) * 22px),0)!important;
    filter:blur(calc((1 - var(--a114-dashboard-in,0)) * 3.2px))!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44vh!important;
    right:clamp(-940px,-36vw,-660px)!important;
    width:clamp(1320px,76vw,1840px)!important;
    height:clamp(590px,66vh,860px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual figcaption{
    left:clamp(-282px,-10.4vw,-164px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44.5vh!important;
    right:clamp(-660px,-35vw,-430px)!important;
    width:clamp(1040px,76vw,1380px)!important;
    height:clamp(505px,65vh,740px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky{
    min-height:660px!important;
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-story-head h2{
    font-size:clamp(54px,6.2vw,92px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:44vh!important;
    height:calc(100vh - 190px)!important;
  }
}

/* ========================================================================== 
   GPT A8.115 — How Spixor Works anti-flicker + paced scroll refinement
   - A8.114 is retired in JS; this block becomes the single visual contract.
   - Intro/steps remain mounted; opacity and transform vars do the full fade.
   - Visuals move slightly left and upward; visual cards move upward too.
   ========================================================================== */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    --a115-how-in:1;
    --a115-intro-opacity:1;
    --a115-intro-out:0;
    --a115-steps-opacity:0;
    --a115-how-exit:0;
    --a115-dashboard-in:0;
    margin-top:clamp(-130px,-10svh,-72px)!important;
    padding-top:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    background:transparent!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track{
    min-height:clamp(3600px,545svh,5900px)!important;
    height:auto!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    height:100svh!important;
    min-height:720px!important;
    padding-top:clamp(46px,6.8vh,86px)!important;
    padding-bottom:clamp(46px,6.8vh,86px)!important;
    padding-left:max(clamp(30px,6vw,104px),calc((100vw - 1480px) / 2 + 42px))!important;
    padding-right:0!important;
    display:grid!important;
    grid-template-columns:minmax(440px,720px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:clamp(28px,3.6vw,62px)!important;
    opacity:calc(1 - var(--a115-how-exit))!important;
    transform:translate3d(0,calc(var(--a115-how-exit) * -18px),0)!important;
    filter:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-sticky{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-copy{
    width:min(720px,calc(100vw - 76px))!important;
    max-width:720px!important;
    min-height:clamp(500px,60vh,690px)!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:26!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    width:min(1100px,calc(100vw - 128px))!important;
    max-width:1100px!important;
    min-height:clamp(470px,58vh,660px)!important;
    justify-content:center!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    position:relative!important;
    width:min(1060px,calc(100vw - 128px))!important;
    max-width:1060px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    opacity:var(--a115-intro-opacity)!important;
    visibility:visible!important;
    transform:translate3d(0,var(--a115-intro-y,0px),0) scale(calc(1 + (var(--a115-intro-out) * .072)))!important;
    filter:blur(calc(var(--a115-intro-out) * 4.2px))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-story-head{
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    visibility:visible!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head::before{
    content:""!important;
    position:absolute!important;
    left:clamp(-90px,-6vw,-34px)!important;
    top:clamp(-86px,-7vh,-38px)!important;
    width:min(780px,72vw)!important;
    height:clamp(300px,38vh,430px)!important;
    border-radius:999px!important;
    background:radial-gradient(circle at 34% 38%,rgba(24,213,255,.20),rgba(37,99,235,.085) 42%,transparent 72%)!important;
    filter:blur(18px)!important;
    opacity:.88!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    bottom:clamp(-30px,-3vh,-12px)!important;
    width:min(520px,52vw)!important;
    height:1px!important;
    background:linear-gradient(90deg,rgba(107,232,255,.58),rgba(107,232,255,.16),transparent)!important;
    opacity:calc(.24 + var(--a115-intro-opacity) * .52)!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head .eyebrow{
    margin:0 0 20px!important;
    padding:9px 13px!important;
    border-radius:999px!important;
    background:rgba(24,213,255,.085)!important;
    border:1px solid rgba(107,232,255,.20)!important;
    color:#8eefff!important;
    box-shadow:0 18px 48px rgba(24,213,255,.08)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    max-width:13.9ch!important;
    margin:0 0 22px!important;
    font-size:clamp(66px,7.1vw,118px)!important;
    line-height:.89!important;
    letter-spacing:-.082em!important;
    text-wrap:balance!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head p{
    max-width:840px!important;
    margin:0!important;
    font-size:clamp(18px,1.45vw,25px)!important;
    line-height:1.58!important;
    color:rgba(226,241,255,.80)!important;
    text-wrap:pretty!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-nav{
    display:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-stack{
    display:block!important;
    position:relative!important;
    min-height:clamp(450px,52vh,630px)!important;
    height:clamp(450px,52vh,630px)!important;
    margin:0!important;
    opacity:var(--a115-steps-opacity)!important;
    transform:translate3d(0,calc((1 - var(--a115-steps-opacity)) * 22px),0) scale(calc(.986 + (.014 * var(--a115-steps-opacity))))!important;
    overflow:visible!important;
    pointer-events:auto!important;
    will-change:opacity,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]:not(.is-step-flow) .why52-step-stack{
    opacity:0!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:12px!important;
    padding:clamp(32px,3.4vw,52px)!important;
    border-radius:32px!important;
    border:1px solid rgba(121,236,255,.22)!important;
    background:
      radial-gradient(520px 260px at 12% 6%,rgba(24,213,255,.16),transparent 66%),
      linear-gradient(145deg,rgba(8,19,34,.88),rgba(5,10,22,.72) 54%,rgba(7,31,51,.58))!important;
    box-shadow:0 30px 92px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.085),0 0 0 1px rgba(255,255,255,.028)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,10px,0) scale(.992)!important;
    filter:blur(.9px)!important;
    transition:none!important;
    pointer-events:none!important;
    overflow:hidden!important;
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:linear-gradient(116deg,rgba(255,255,255,.12),transparent 27%,transparent 74%,rgba(24,213,255,.10))!important;
    opacity:.70!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::after{
    content:""!important;
    position:absolute!important;
    left:24px!important;
    right:24px!important;
    top:0!important;
    height:1px!important;
    background:linear-gradient(90deg,transparent,rgba(107,232,255,.64),transparent)!important;
    opacity:.78!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step > *{
    position:relative!important;
    z-index:1!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3{
    margin:4px 0 4px!important;
    font-size:clamp(31px,2.9vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p{
    max-width:650px!important;
    font-size:clamp(15px,1.04vw,18px)!important;
    line-height:1.6!important;
    color:rgba(226,241,255,.78)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage{
    min-height:clamp(545px,66vh,780px)!important;
    height:clamp(545px,66vh,780px)!important;
    opacity:var(--a115-steps-opacity)!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]:not(.is-step-flow) .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-stage{
    opacity:0!important;
    visibility:hidden!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    position:fixed!important;
    top:41.8vh!important;
    right:clamp(-660px,-30vw,-410px)!important;
    left:auto!important;
    bottom:auto!important;
    width:clamp(1120px,75vw,1640px)!important;
    height:clamp(540px,67vh,805px)!important;
    transform:translate3d(0,-50%,0)!important;
    z-index:14!important;
    opacity:calc(var(--a115-steps-opacity) * (1 - var(--a115-how-exit)))!important;
    visibility:visible!important;
    pointer-events:none!important;
    contain:layout style!important;
    overflow:visible!important;
    will-change:opacity!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    opacity:0!important;
    visibility:visible!important;
    pointer-events:none!important;
    transform:scale(.994)!important;
    filter:blur(.72px)!important;
    transition:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    will-change:opacity,filter,transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:left center!important;
    transform:none!important;
    transition:none!important;
    border-radius:24px 0 0 24px!important;
    box-shadow:-34px 44px 112px rgba(0,0,0,.30)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-190px,-8.2vw,-104px)!important;
    right:auto!important;
    bottom:clamp(92px,11vh,142px)!important;
    max-width:min(446px,calc(100vw - 92px))!important;
    padding:clamp(17px,1.7vw,25px) clamp(20px,2vw,30px)!important;
    border-radius:10px 24px 24px 10px!important;
    background:linear-gradient(145deg,rgba(4,12,24,.86),rgba(3,8,18,.74))!important;
    border:1px solid rgba(116,232,255,.20)!important;
    box-shadow:0 28px 74px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:blur(13px)!important;
    -webkit-backdrop-filter:blur(13px)!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  html.spx-a115-what-how body.spx-public .spx-v26-explain,
  html.spx-a115-what-how body.spx-public .spx-v26-what-crisp-layer{
    opacity:calc(1 - var(--a115-how-in,0))!important;
    filter:blur(calc(var(--a115-how-in,0) * 2px))!important;
    transition:none!important;
  }

  html.spx-a115-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
    opacity:var(--a115-dashboard-in,0)!important;
    transform:translate3d(0,calc((1 - var(--a115-dashboard-in,0)) * 22px),0)!important;
    filter:blur(calc((1 - var(--a115-dashboard-in,0)) * 2.8px))!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:41.4vh!important;
    right:clamp(-790px,-31.5vw,-560px)!important;
    width:clamp(1300px,75vw,1820px)!important;
    height:clamp(600px,67vh,865px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-238px,-8.8vw,-132px)!important;
    bottom:clamp(108px,12vh,160px)!important;
  }
}

@media (max-width:1400px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    grid-template-columns:minmax(380px,620px) minmax(0,1fr)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42vh!important;
    right:clamp(-540px,-30vw,-345px)!important;
    width:clamp(1010px,75vw,1360px)!important;
    height:clamp(510px,66vh,750px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    bottom:clamp(84px,10vh,128px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    min-height:660px!important;
    padding-top:38px!important;
    padding-bottom:38px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    font-size:clamp(54px,6.2vw,92px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:40.8vh!important;
    height:calc(100vh - 180px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    bottom:clamp(66px,9vh,104px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track{
    min-height:auto!important;
  }
}


/* =========================================================
   GPT A8.116 — How intro/step vertical rhythm correction
   Keeps A8.115 no-flicker/crossfade owner, but fixes the
   vertical staging: intro lower/stabler, step card higher.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    top:0!important;
    align-items:center!important;
    padding-top:clamp(58px,7.8vh,104px)!important;
    padding-bottom:clamp(42px,6.2vh,82px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    min-height:clamp(430px,53vh,610px)!important;
    justify-content:center!important;
    transform:translate3d(0,clamp(34px,5.2vh,66px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    max-width:min(1120px,calc(100vw - 128px))!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    min-height:clamp(410px,48vh,580px)!important;
    justify-content:flex-start!important;
    transform:translate3d(0,clamp(-96px,-8.6vh,-58px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .why52-step-stack{
    min-height:clamp(405px,47vh,570px)!important;
    height:clamp(405px,47vh,570px)!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    transform:translate3d(0,clamp(44px,5.6vh,78px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(-108px,-9vh,-70px),0)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow .spx-why52-copy{
    transform:translate3d(0,clamp(20px,3.8vh,42px),0)!important;
    min-height:clamp(380px,50vh,510px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(-74px,-8vh,-46px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .why52-step-stack{
    min-height:clamp(360px,45vh,500px)!important;
    height:clamp(360px,45vh,500px)!important;
  }
}

/* =========================================================
   GPT A8.117 — How intro sticky drift + visual vertical nudge
   Keeps the good A8.116 rhythm, but prevents the intro headline
   from creeping upward during the first sticky scroll phase.
   Also nudges the right screenshots slightly lower again.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    min-height:clamp(430px,53vh,610px)!important;
    justify-content:center!important;
    transform:translate3d(0,clamp(34px,5.2vh,66px),0)!important;
    will-change:transform!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.6vh!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(44px,5.6vh,78px),0)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.2vh!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow.is-step-flow .spx-why52-copy{
    transform:translate3d(0,clamp(20px,3.8vh,42px),0)!important;
    min-height:clamp(380px,50vh,510px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:42.8vh!important;
  }
}

/* =========================================================
   GPT A8.121 — safe How intro center lock
   ---------------------------------------------------------
   Restores the visible A8.119 How section and fixes the remaining
   intro drift by fixing the real intro element to the viewport only
   while it is still visible. No cloned/duplicate overlay is used.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head{
    will-change:opacity,transform,filter!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    justify-content:flex-start!important;
  }
}

/* =========================================================
   Homepage cleanup foundation
   ---------------------------------------------------------
   One visual language and one controller contract per section.
   Keeps existing images/screenshots; removes legacy wash/blur
   leftovers without introducing clone/bridge sections.
   ========================================================= */
:root{
  --spx-public-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html body.spx-public,
html body.spx-public :where(h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,select,label,span,li,strong,b,small,em):not(.spx-fa):not(.fa):not([class*="fa-"]){
  font-family:var(--spx-public-font)!important;
}

html body.spx-public{
  text-rendering:optimizeLegibility!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}

html body.spx-public .nav-group>a::after{content:none!important;display:none!important;}
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html.spx-a115-what-how body.spx-public .spx-v26-explain,
html.spx-a115-what-how body.spx-public .spx-v26-what-crisp-layer,
html.spx-a115-how-exit body.spx-public #dashboard.spx-dashboard-command-v63{
  filter:none!important;
  -webkit-filter:none!important;
}

@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    min-height:clamp(2700px,365vh,3900px)!important;
    background:transparent!important;
    filter:none!important;
    -webkit-filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    width:min(calc(700px + var(--dash-focus,0) * 650px), 92vw)!important;
    height:min(calc(410px + var(--dash-focus,0) * 355px), 78vh)!important;
    margin-left:calc((1 - var(--dash-focus,0)) * -29vw)!important;
    background:#07101f!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    filter:none!important;
    object-fit:cover!important;
    object-position:center top!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > .eyebrow,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    margin-right:clamp(34px,8vw,150px)!important;
    max-width:450px!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    width:min(370px,calc(100vw - 56px))!important;
    padding:20px 22px!important;
    border-radius:24px!important;
    border-color:rgba(126,231,255,.20)!important;
    background:linear-gradient(145deg,rgba(5,13,27,.86),rgba(8,20,38,.72))!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

html body.spx-public .spx-export-section-v61{
  box-shadow:none!important;
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body.spx-public .spx-export-section-v61 .spx-section-kicker{
  max-width:900px!important;
}

html body.spx-public .spx-export-grid{
  gap:clamp(16px,1.8vw,24px)!important;
}

html body.spx-public .spx-export-card{
  min-height:0!important;
  padding:clamp(22px,2vw,30px)!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
}

html body.spx-public .spx-export-status{
  display:inline-flex!important;
  width:max-content!important;
  align-items:center!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.18)!important;
  background:rgba(126,231,255,.08)!important;
  color:rgba(210,247,255,.86)!important;
  font-size:12px!important;
  font-weight:850!important;
  padding:6px 10px!important;
}

html body.spx-public .spx-export-card h3{margin-top:2px!important;}
html body.spx-public .spx-export-card p{font-size:15px!important;line-height:1.58!important;}
html body.spx-public .spx-export-icon{width:54px!important;height:54px!important;}
html body.spx-public .spx-export-card:hover .spx-export-icon,
html body.spx-public .spx-export-card:focus-within .spx-export-icon{transform:translateY(-2px) scale(1.03)!important;}

html body.spx-public .spx-price-card{
  min-height:auto!important;
  padding:clamp(22px,2.2vw,32px)!important;
  gap:13px!important;
}

html body.spx-public .spx-price-card ul{gap:8px!important;margin:4px 0 10px!important;}
html body.spx-public .spx-price-card p{line-height:1.55!important;}
html body.spx-public .spx-hp-field{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

html body.spx-public .spx-orbit-notify input:not(.spx-hp-field):focus{
  outline:0!important;
  border-color:rgba(126,231,255,.42)!important;
  box-shadow:0 0 0 4px rgba(24,201,245,.12)!important;
}

html body.spx-public .spx-orbit-notify[data-state="success"] small{color:#8ef5bd!important;}
html body.spx-public .spx-orbit-notify[data-state="error"] small{color:#ffb4b4!important;}
html body.spx-public .spx-orbit-notify button[disabled]{opacity:.62!important;cursor:wait!important;}

html body.spx-public #roadmap.spx-alpha-story-section{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:
    radial-gradient(720px 360px at 8% 8%,rgba(245,158,11,.08),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018))!important;
}

html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel h2{
  font-size:clamp(42px,5.8vw,86px)!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
}

html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{
  background:linear-gradient(145deg,rgba(8,18,34,.74),rgba(5,12,25,.58))!important;
  border-color:rgba(218,236,255,.13)!important;
}

html body.spx-public .spx-footer-v3{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  color:rgba(226,241,255,.72)!important;
  transition:color .22s var(--ease),transform .22s var(--ease),text-shadow .22s var(--ease)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:100%!important;
  bottom:-3px!important;
  height:1px!important;
  background:linear-gradient(90deg,#7ee7ff,transparent)!important;
  transition:right .22s var(--ease)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#f4fbff!important;
  transform:translateX(3px)!important;
  text-shadow:0 0 18px rgba(126,231,255,.20)!important;
}

html body.spx-public .spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .spx-footer-v3 .spx-footer-col a:focus-visible::after{
  right:0!important;
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    padding-top:48px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-story-head h2{
    font-size:clamp(38px,11vw,60px)!important;
    line-height:.98!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    position:relative!important;
    padding:22px!important;
    margin-bottom:14px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    object-fit:contain!important;
    background:#06101f!important;
  }
  html body.spx-public .spx-export-grid,
  html body.spx-public #pricing .spx-price-grid,
  html body.spx-public .spx-footer-shell,
  html body.spx-public .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   How visual lane correction
   ---------------------------------------------------------
   Keep the existing open/full-bleed How visuals. This only
   restores the unboxed screenshot lane and nudges it lower.
   ========================================================= */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.6vh + 42px)!important;
    right:clamp(-660px,-30vw,-410px)!important;
    width:clamp(1120px,75vw,1640px)!important;
    height:clamp(540px,67vh,805px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport .why52-visual img{
    object-fit:cover!important;
    object-position:left center!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-190px,-8.2vw,-104px)!important;
    bottom:clamp(92px,11vh,142px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.2vh + 42px)!important;
    right:clamp(-790px,-31.5vw,-560px)!important;
    width:clamp(1300px,75vw,1820px)!important;
    height:clamp(600px,67vh,865px)!important;
  }

  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-238px,-8.8vw,-132px)!important;
    bottom:clamp(108px,12vh,160px)!important;
  }
}

@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(42.8vh + 30px)!important;
  }
}

@media (max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
}


/* =========================================================
   A8.123 GPT repair pass — stable public homepage foundation
   ---------------------------------------------------------
   This block intentionally avoids wrapping How screenshots in
   cards/frames. It only corrects choreography, vertical rhythm,
   blur leaks and polished section affordances after the Codex
   partial run.
   ========================================================= */
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-v26-bottom-fade::before,
html body.spx-public .spx-v26-bottom-fade::after{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
html.spx-hero-story-active body.spx-public #why-spixor.spx-how-v63,
html body.spx-public #why-spixor.spx-how-v63{
  filter:none!important;
  -webkit-filter:none!important;
}
html.spx-a115-what-how body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{
  opacity:var(--a115-intro-opacity,1)!important;
}
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    --spx-how-card-pad:clamp(30px,3vw,46px);
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky{
    align-items:center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-step-flow .spx-why52-copy{
    padding-top:clamp(14px,3vh,34px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-stack{
    min-height:clamp(360px,44vh,520px)!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    min-height:0!important;
    padding:var(--spx-how-card-pad)!important;
    overflow:visible!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.16)!important;
    background:
      radial-gradient(260px 160px at 100% 0%,rgba(126,231,255,.10),transparent 70%),
      linear-gradient(145deg,rgba(7,16,31,.74),rgba(7,14,27,.48))!important;
    box-shadow:0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    pointer-events:none!important;
    background:
      linear-gradient(135deg,rgba(126,231,255,.45),transparent 18%) top left/96px 96px no-repeat,
      linear-gradient(315deg,rgba(126,231,255,.20),transparent 16%) bottom right/120px 120px no-repeat!important;
    opacity:.38!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    position:absolute!important;
    top:-16px!important;
    left:clamp(24px,2.3vw,34px)!important;
    width:56px!important;
    height:56px!important;
    border-radius:18px 18px 18px 6px!important;
    display:grid!important;
    place-items:center!important;
    color:#06101f!important;
    background:linear-gradient(135deg,#9ff2ff,#67e8f9 52%,#d6fbff)!important;
    border:1px solid rgba(255,255,255,.56)!important;
    box-shadow:0 18px 44px rgba(24,201,245,.20)!important;
    font-weight:1000!important;
    letter-spacing:.04em!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3{
    margin-top:10px!important;
    font-size:clamp(31px,2.75vw,48px)!important;
    letter-spacing:-.055em!important;
    line-height:1.02!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step li{
    line-height:1.65!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visuals,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    outline:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    /* Only vertical correction: keep the open/full-bleed lane, but drop it down. */
    top:calc(43.8vh + 58px)!important;
    right:clamp(-640px,-29vw,-390px)!important;
    width:clamp(1140px,76vw,1660px)!important;
    height:clamp(560px,67vh,805px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:22px 0 0 22px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:0 34px 90px rgba(0,0,0,.32)!important;
    object-fit:cover!important;
    object-position:left center!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption{
    left:clamp(-198px,-8vw,-116px)!important;
    bottom:clamp(86px,10vh,134px)!important;
    width:min(360px,32vw)!important;
    padding:0 0 0 18px!important;
    color:rgba(235,249,255,.94)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card::before,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual figcaption::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:2px!important;
    bottom:2px!important;
    width:2px!important;
    border-radius:99px!important;
    background:linear-gradient(180deg,#9ff2ff,rgba(126,231,255,.12))!important;
    box-shadow:0 0 22px rgba(126,231,255,.35)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card b{
    display:block!important;
    font-size:clamp(22px,1.8vw,34px)!important;
    line-height:1.05!important;
    letter-spacing:-.045em!important;
    text-shadow:0 18px 36px rgba(0,0,0,.42)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card p{
    max-width:330px!important;
    color:rgba(226,241,255,.78)!important;
    text-shadow:0 12px 26px rgba(0,0,0,.45)!important;
  }
}
@media (min-width:1800px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(43.6vh + 64px)!important;
    right:clamp(-780px,-31vw,-540px)!important;
    width:clamp(1320px,76vw,1840px)!important;
    height:clamp(620px,67vh,880px)!important;
  }
}
@media (max-height:820px) and (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{top:calc(43vh + 38px)!important;}
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{padding:28px 32px!important;}
}

html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public .spx-export-section-v61,
html body.spx-public #pricing.spx-pricing-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63{
  --dash-progress:0;
  --dash-focus:0;
  --dash-cursor-x:58%;
  --dash-cursor-y:68%;
  --dash-cursor-on:0;
  min-height:clamp(2100px,245vh,2900px)!important;
  position:relative!important;
  isolation:isolate!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
  will-change:width,height,transform,border-radius!important;
  transition:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
  opacity:clamp(0,var(--dash-cursor-on,0),1)!important;
  left:var(--dash-cursor-x)!important;
  top:var(--dash-cursor-y)!important;
  transform:translate(-10px,-8px) scale(calc(.92 + var(--dash-cursor-on,0) * .08))!important;
  transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1),opacity .24s ease,transform .24s ease!important;
  z-index:7!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  top:7px!important;
  width:42px!important;
  height:42px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.65)!important;
  animation:spxDashClickPulse .62s ease-out both!important;
}
@keyframes spxDashClickPulse{from{opacity:.95;transform:translate(-50%,-50%) scale(.45)}to{opacity:0;transform:translate(-50%,-50%) scale(1.55)}}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
  opacity:0!important;
  transform:translate3d(0,8px,0)!important;
  transition:opacity .42s ease,transform .42s ease!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-hotspot="overview"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-hotspot="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-hotspot="files"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-callout="files"]{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
  opacity:0!important;
  transform:translate3d(0,12px,0)!important;
  pointer-events:none!important;
  transition:opacity .55s ease,transform .55s ease!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-dash-fade-ghost{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:opacity .86s ease!important;
}
html body.spx-public .spx-dash-fade-ghost.is-fading{opacity:0!important;}

html body.spx-public .spx-export-section-v61{position:relative!important;overflow:hidden!important;}
html body.spx-public .spx-export-section-v61::before{
  content:""!important;position:absolute!important;inset:8% auto auto 50%!important;width:min(900px,80vw)!important;height:340px!important;transform:translateX(-50%)!important;background:radial-gradient(closest-side,rgba(126,231,255,.10),transparent 72%)!important;pointer-events:none!important;opacity:var(--export-glow,.75)!important;
}
html body.spx-public .spx-export-card{position:relative!important;overflow:hidden!important;transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease),opacity .28s ease!important;}
html body.spx-public .spx-export-card::after{content:""!important;position:absolute!important;left:24px!important;right:24px!important;bottom:0!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(126,231,255,.42),transparent)!important;opacity:0!important;transition:opacity .25s ease!important;}
html body.spx-public .spx-export-card.is-active,html body.spx-public .spx-export-card:hover,html body.spx-public .spx-export-card:focus-within{transform:translateY(-5px)!important;border-color:rgba(126,231,255,.28)!important;box-shadow:0 26px 76px rgba(0,0,0,.22),0 0 0 1px rgba(126,231,255,.08)!important;}
html body.spx-public .spx-export-card.is-active::after,html body.spx-public .spx-export-card:hover::after{opacity:1!important;}
html body.spx-public .spx-export-flowline span{transition:background .24s ease,border-color .24s ease,color .24s ease,transform .24s ease!important;}
html body.spx-public .spx-export-flowline span.is-active{transform:translateY(-2px)!important;background:rgba(126,231,255,.12)!important;border-color:rgba(126,231,255,.34)!important;color:#f5fdff!important;}

html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{min-height:0!important;}
html body.spx-public .spx-orbit-notify small[data-orbit-notify-status]{display:inline-flex!important;width:max-content!important;max-width:100%!important;align-items:center!important;gap:8px!important;margin-top:8px!important;padding:8px 12px!important;border-radius:999px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(226,241,255,.72)!important;line-height:1.25!important;transition:background .24s ease,border-color .24s ease,color .24s ease!important;}
html body.spx-public .spx-orbit-notify[data-state="success"] small[data-orbit-notify-status]{background:rgba(69,230,168,.12)!important;border-color:rgba(69,230,168,.32)!important;color:#b8ffd7!important;}
html body.spx-public .spx-orbit-notify[data-state="error"] small[data-orbit-notify-status]{background:rgba(255,93,93,.10)!important;border-color:rgba(255,93,93,.32)!important;color:#ffd0d0!important;}

html body.spx-public #roadmap.spx-alpha-story-section{overflow:hidden!important;position:relative!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{cursor:pointer!important;transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button:hover,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button.is-active{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.30)!important;background:rgba(126,231,255,.10)!important;color:#f6fdff!important;}

html body.spx-public .spx-product-mega,
html body.spx-public .resources-mega{position:relative!important;}
html body.spx-public .spx-product-mega::after,
html body.spx-public .resources-mega::after{content:""!important;position:absolute!important;left:-18px!important;right:-18px!important;top:100%!important;height:18px!important;}
html body.spx-public .spx-product-mega .mega-menu,
html body.spx-public .resources-mega .mega-menu{margin-top:8px!important;transition:opacity .2s ease,transform .2s ease,visibility .2s step-end!important;}
html body.spx-public .nav-feature-link:hover{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.26)!important;box-shadow:0 16px 44px rgba(0,0,0,.20)!important;}
html body.spx-public .nav-toggle span{transition:transform .22s ease,opacity .18s ease!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(2){opacity:0!important;}
html body.spx-public .site-header.is-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)!important;}
@media (max-width:980px){
  html body.spx-public .site-header.spx-nav-v26 .nav-menu{display:none!important;opacity:1!important;visibility:visible!important;transform:none!important;position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin:8px 0!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open .nav-menu{display:block!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a{width:100%!important;justify-content:space-between!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63{min-height:auto!important;}
}
html[data-theme="light"] body.spx-public .spx-export-card,
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel,
html[data-theme="light"] body.spx-public .spx-price-card{
  color:#122033!important;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(241,247,255,.70))!important;
  border-color:rgba(40,93,130,.16)!important;
}
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step p,
html[data-theme="light"] body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step li,
html[data-theme="light"] body.spx-public .spx-export-card p,
html[data-theme="light"] body.spx-public .spx-price-card p,
html[data-theme="light"] body.spx-public .spx-price-card li{color:rgba(18,32,51,.78)!important;}

/* ========================================================================
   A8.124 — visible public flow rework from Dashboard Command Center onward
   ------------------------------------------------------------------------
   This pass deliberately starts at Dashboard Command Center. It gives the
   section a real left-image/right-copy intro, a controlled fullscreen grow,
   animated cursor/click states, a clearer Export workflow, stronger Alpha
   interaction and a more professional footer without reintroducing blur/waas.
   ======================================================================== */
html body.spx-public #dashboard.spx-dashboard-command-v63,
html body.spx-public .spx-export-section-v61,
html body.spx-public #pricing.spx-pricing-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section,
html body.spx-public .site-footer{
  filter:none!important;
  -webkit-filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    --dash-focus:0;
    --dash-copy-opacity:1;
    --dash-left-start:clamp(30px,5.2vw,96px);
    --dash-right-start:clamp(520px,42vw,760px);
    --dash-top-start:clamp(98px,12vh,138px);
    --dash-bottom-start:clamp(78px,9vh,118px);
    width:100vw!important;
    max-width:none!important;
    margin:0 calc(50% - 50vw)!important;
    min-height:clamp(6000px,820svh,9600px)!important;
    padding:0!important;
    position:relative!important;
    display:block!important;
    overflow:clip!important;
    isolation:isolate!important;
    background:
      radial-gradient(1100px 680px at 10% 28%,rgba(20,190,230,.16),transparent 66%),
      radial-gradient(980px 620px at 84% 64%,rgba(38,102,255,.12),transparent 68%),
      linear-gradient(180deg,rgba(3,7,16,0),rgba(4,9,20,.70) 18%,rgba(4,8,18,.86) 72%,rgba(3,7,16,0))!important;
    border:0!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    background:
      linear-gradient(90deg,rgba(126,231,255,.07) 1px,transparent 1px),
      linear-gradient(180deg,rgba(126,231,255,.045) 1px,transparent 1px)!important;
    background-size:72px 72px!important;
    mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)!important;
    opacity:.22!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual{
    position:sticky!important;
    top:0!important;
    height:100svh!important;
    width:100vw!important;
    margin:0!important;
    z-index:1!important;
    overflow:hidden!important;
    display:block!important;
    pointer-events:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    position:absolute!important;
    left:calc(var(--dash-left-start) * (1 - var(--dash-focus,0)))!important;
    right:calc(var(--dash-right-start) * (1 - var(--dash-focus,0)))!important;
    top:calc(var(--dash-top-start) * (1 - var(--dash-focus,0)) + 10px * var(--dash-focus,0))!important;
    bottom:calc(var(--dash-bottom-start) * (1 - var(--dash-focus,0)) + 12px * var(--dash-focus,0))!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    max-width:none!important;
    min-width:0!important;
    transform:translate3d(calc((1 - var(--dash-intro-in,1)) * -62px),0,0) scale(calc(.965 + var(--dash-intro-in,1) * .035))!important;
    transform-origin:left center!important;
    border-radius:calc(34px * (1 - var(--dash-focus,0)) + 15px * var(--dash-focus,0))!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:1px solid rgba(126,231,255,calc(.26 - var(--dash-focus,0) * .10))!important;
    background:#050b17!important;
    box-shadow:0 42px 130px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.035) inset!important;
    will-change:left,right,top,bottom,border-radius,transform!important;
    transition:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    z-index:4!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 18%,transparent 78%,rgba(0,0,0,.22))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame::after{
    content:none!important;
    display:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame img,
  html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-image],
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center top!important;
    filter:none!important;
    -webkit-filter:none!important;
    transform:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    position:sticky!important;
    top:clamp(112px,13vh,152px)!important;
    z-index:6!important;
    width:min(470px,32vw)!important;
    margin:-100svh clamp(32px,6vw,112px) 0 auto!important;
    min-height:auto!important;
    padding:clamp(24px,2.7vw,34px)!important;
    transform:translate3d(calc((1 - var(--dash-intro-in,1)) * 34px),0,0)!important;
    opacity:var(--dash-copy-opacity,1)!important;
    pointer-events:auto!important;
    border-radius:30px!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(126,231,255,.14),transparent 38%),
      linear-gradient(145deg,rgba(8,18,36,.84),rgba(5,10,22,.68))!important;
    border:1px solid rgba(126,231,255,.18)!important;
    box-shadow:0 32px 110px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08)!important;
    backdrop-filter:blur(16px) saturate(145%)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2{
    font-size:clamp(36px,3.75vw,62px)!important;
    line-height:.95!important;
    letter-spacing:-.055em!important;
    margin:10px 0 14px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    font-size:15.5px!important;
    line-height:1.65!important;
    color:rgba(232,241,255,.76)!important;
    max-width:46ch!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{
    display:grid!important;
    gap:10px!important;
    margin:20px 0 18px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    justify-content:flex-start!important;
    padding:12px 14px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.045)!important;
    border:1px solid rgba(255,255,255,.09)!important;
    color:rgba(232,241,255,.70)!important;
    overflow:hidden!important;
    transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button::before{
    content:""!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    width:3px!important;
    background:linear-gradient(180deg,#7ee7ff,#9ad0ff)!important;
    opacity:0!important;
    transition:opacity .25s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active{
    transform:translateX(6px)!important;
    border-color:rgba(126,231,255,.34)!important;
    background:rgba(126,231,255,.12)!important;
    color:#f5fdff!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active::before{opacity:1!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    display:block!important;
    min-height:136px!important;
    padding:18px!important;
    border-radius:22px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
    opacity:0!important;
    transform:translate3d(0,14px,0) scale(.985)!important;
    pointer-events:none!important;
    transition:opacity .54s ease,transform .54s cubic-bezier(.2,.8,.2,1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){position:absolute!important;left:-9999px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    position:relative!important;
    left:auto!important;
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
    pointer-events:auto!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel span{
    color:#7ee7ff!important;
    font-size:12px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.12em!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel h3{margin:8px 0 8px!important;font-size:20px!important;line-height:1.1!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:rgba(232,241,255,.72)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor{
    opacity:clamp(0,var(--dash-cursor-on,0),1)!important;
    left:var(--dash-cursor-x,58%)!important;
    top:var(--dash-cursor-y,68%)!important;
    width:34px!important;
    height:34px!important;
    z-index:12!important;
    clip-path:none!important;
    background:transparent!important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))!important;
    transform:translate(-3px,-2px) rotate(-6deg) scale(calc(.92 + var(--dash-cursor-on,0) * .08))!important;
    transition:opacity .22s ease,transform .18s ease,filter .18s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    clip-path:polygon(8% 0,92% 58%,54% 64%,39% 100%)!important;
    background:linear-gradient(135deg,#fff,#9eeaff)!important;
    border:1px solid rgba(5,20,32,.35)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor{transform:translate(-3px,-2px) rotate(-6deg) scale(.86)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor{
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(126,231,255,.58))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-click="1"] .spx-dash-cursor::after{
    content:""!important;
    position:absolute!important;
    left:5px!important;
    top:5px!important;
    width:64px!important;
    height:64px!important;
    border-radius:999px!important;
    border:1px solid rgba(126,231,255,.72)!important;
    background:rgba(126,231,255,.08)!important;
    animation:spxDashClickPulseA124 .82s ease-out infinite!important;
  }
  @keyframes spxDashClickPulseA124{
    0%{opacity:.92;transform:translate(-50%,-50%) scale(.36)}
    68%{opacity:.24;transform:translate(-50%,-50%) scale(1.48)}
    100%{opacity:.42;transform:translate(-50%,-50%) scale(.82)}
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot{
    z-index:10!important;
    opacity:0!important;
    transform:translate3d(0,0,0)!important;
    border:1px solid transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    color:transparent!important;
    font-size:0!important;
    text-indent:-9999px!important;
    overflow:hidden!important;
    transition:opacity .36s ease,transform .36s ease!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    z-index:11!important;
    width:min(510px,38vw)!important;
    max-width:none!important;
    padding:34px 36px!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.66)!important;
    background:
      radial-gradient(circle at 16% 0%,rgba(126,231,255,.18),transparent 42%),
      linear-gradient(145deg,rgba(6,17,34,.96),rgba(5,10,22,.84))!important;
    box-shadow:0 42px 132px rgba(0,0,0,.56),0 0 96px rgba(126,231,255,.24),inset 0 1px 0 rgba(255,255,255,.17)!important;
    color:#effdff!important;
    opacity:0!important;
    transform:translate3d(0,12px,0) scale(.97)!important;
    pointer-events:none!important;
    overflow:hidden!important;
    transition:opacity .44s ease,transform .44s cubic-bezier(.2,.8,.2,1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:20px!important;
    bottom:20px!important;
    width:4px!important;
    border-radius:0 999px 999px 0!important;
    background:linear-gradient(180deg,#7ee7ff,#5b8cff)!important;
    box-shadow:0 0 24px rgba(126,231,255,.46)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout::after{
    content:""!important;
    position:absolute!important;
    right:-1px!important;
    top:-1px!important;
    width:64px!important;
    height:64px!important;
    border-top:1px solid rgba(126,231,255,.58)!important;
    border-right:1px solid rgba(126,231,255,.58)!important;
    border-radius:0 28px 0 0!important;
    opacity:.88!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout b{display:block!important;font-size:24px!important;line-height:1.08!important;margin:0 0 14px!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout b::before{
    content:"Product tour"!important;
    display:block!important;
    width:max-content!important;
    margin:0 0 12px!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:rgba(126,231,255,.12)!important;
    border:1px solid rgba(126,231,255,.24)!important;
    color:#7ee7ff!important;
    font-size:11px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout small{display:block!important;font-size:17px!important;line-height:1.62!important;color:rgba(232,241,255,.92)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-home{left:clamp(34px,4vw,72px)!important;bottom:clamp(38px,7vh,80px)!important;top:auto!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-projects{left:clamp(82px,9vw,156px)!important;top:clamp(104px,15vh,168px)!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-files{left:clamp(340px,22vw,460px)!important;top:clamp(300px,36vh,430px)!important;right:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-export{right:clamp(42px,5vw,96px)!important;bottom:clamp(44px,8vh,92px)!important;left:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-callout="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-callout="files"]{
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="projects"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="projects"]{
    opacity:0!important;
    transform:translate3d(0,10px,0) scale(.96)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-files"] [data-dashboard-hotspot="files"]{
    opacity:.38!important;
    border-color:rgba(126,231,255,.40)!important;
    background:linear-gradient(90deg,rgba(24,201,245,.28),rgba(24,201,245,.07))!important;
    box-shadow:inset 4px 0 0 rgba(24,201,245,.88),0 0 28px rgba(24,201,245,.15)!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-exiting .spx-dash-frame,
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-exiting .spx-dash-copy{opacity:calc(1 - var(--dash-exit,0))!important;}
}

html body.spx-public .spx-export-section-v61{
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,140px) auto!important;
  padding:clamp(28px,4vw,54px)!important;
  border-radius:36px!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 12% 4%,rgba(126,231,255,.13),transparent 34%),
    radial-gradient(circle at 88% 22%,rgba(86,125,255,.11),transparent 42%),
    linear-gradient(145deg,rgba(7,15,30,.62),rgba(4,8,18,.38))!important;
  box-shadow:0 30px 120px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
  opacity:calc(.38 + var(--export-in,1) * .62)!important;
  transform:translate3d(0,calc((1 - var(--export-in,1)) * 34px),0)!important;
}
html body.spx-public .spx-export-explainer{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin:clamp(22px,3vw,34px) auto clamp(18px,2vw,26px)!important;
  max-width:920px!important;
}
html body.spx-public .spx-export-explainer span{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(232,241,255,.76)!important;
}
html body.spx-public .spx-export-explainer b{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(126,231,255,.22),rgba(92,123,255,.12))!important;
  color:#f7fdff!important;
}
html body.spx-public .spx-export-explainer small{font-size:13px!important;font-weight:700!important;letter-spacing:.01em!important;}
html body.spx-public .spx-export-flowline{
  width:min(760px,100%)!important;
  margin:0 auto clamp(24px,3vw,36px)!important;
}
html body.spx-public .spx-export-grid{gap:18px!important;align-items:stretch!important;}
html body.spx-public .spx-export-card{
  min-height:0!important;
  padding:clamp(22px,2.6vw,32px)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  opacity:.76!important;
  transform:translate3d(0,0,0) scale(.985)!important;
}
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{
  opacity:1!important;
  transform:translate3d(0,-8px,0) scale(1)!important;
  border-color:rgba(126,231,255,.32)!important;
  background:linear-gradient(180deg,rgba(126,231,255,.09),rgba(255,255,255,.04))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.26),0 0 0 1px rgba(126,231,255,.08) inset!important;
}
html body.spx-public .spx-export-card h3{font-size:clamp(22px,2vw,30px)!important;letter-spacing:-.025em!important;}
html body.spx-public .spx-export-card p{font-size:15px!important;line-height:1.62!important;color:rgba(232,241,255,.74)!important;}
html body.spx-public .spx-export-card ul{margin-top:14px!important;padding-left:0!important;list-style:none!important;display:grid!important;gap:8px!important;}
html body.spx-public .spx-export-card li{position:relative!important;padding-left:20px!important;color:rgba(232,241,255,.70)!important;font-size:13.5px!important;}
html body.spx-public .spx-export-card li::before{content:""!important;position:absolute!important;left:0!important;top:.55em!important;width:7px!important;height:7px!important;border-radius:999px!important;background:#7ee7ff!important;box-shadow:0 0 14px rgba(126,231,255,.45)!important;}

html body.spx-public #pricing.spx-pricing-section-v61{
  opacity:calc(.32 + var(--pricing-in,1) * .68)!important;
  transform:translate3d(0,calc((1 - var(--pricing-in,1)) * 28px),0)!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{
  padding:clamp(20px,2.2vw,28px)!important;
  min-height:0!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card strong{font-size:clamp(34px,3.6vw,52px)!important;}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card ul{gap:7px!important;}
html body.spx-public .spx-orbit-notify small[data-orbit-notify-status]{white-space:normal!important;}

html body.spx-public #roadmap.spx-alpha-story-section{
  width:min(1240px,calc(100% - 44px))!important;
  margin:clamp(84px,9vw,140px) auto!important;
  padding:clamp(26px,4vw,48px)!important;
  border-radius:36px!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 18% 8%,rgba(126,231,255,.12),transparent 36%),
    radial-gradient(circle at 82% 74%,rgba(94,112,255,.13),transparent 42%),
    linear-gradient(145deg,rgba(7,16,31,.62),rgba(4,8,18,.38))!important;
  box-shadow:0 30px 120px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important;
  opacity:calc(.35 + var(--alpha-in,1) * .65)!important;
  transform:translate3d(0,calc((1 - var(--alpha-in,1)) * 30px),0)!important;
}
html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel{position:relative!important;overflow:hidden!important;}
html body.spx-public .spx-alpha-signal-orbit{
  position:absolute!important;
  right:18px!important;
  top:18px!important;
  width:86px!important;
  height:86px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  opacity:.72!important;
  pointer-events:none!important;
}
html body.spx-public .spx-alpha-signal-orbit i{position:absolute!important;inset:12px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.16)!important;animation:spxAlphaOrbit 5s linear infinite!important;}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(2){inset:24px!important;animation-duration:7s!important;animation-direction:reverse!important;}
html body.spx-public .spx-alpha-signal-orbit i:nth-child(3){inset:38px!important;background:#7ee7ff!important;box-shadow:0 0 22px rgba(126,231,255,.55)!important;}
@keyframes spxAlphaOrbit{to{transform:rotate(360deg)}}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list{display:flex!important;flex-wrap:wrap!important;gap:9px!important;}
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list button,
html body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-theme-list span{
  border-radius:999px!important;
  padding:10px 13px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.10)!important;
}

html body.spx-public .site-footer.spx-footer-v3{
  display:block!important;
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,140px) auto 28px!important;
  padding:0!important;
  border-radius:36px!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(126,231,255,.11),transparent 36%),
    linear-gradient(145deg,rgba(7,16,31,.74),rgba(4,8,18,.55))!important;
  border:1px solid rgba(126,231,255,.13)!important;
  box-shadow:0 28px 110px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
  padding:clamp(26px,4vw,48px)!important;
  display:grid!important;
  grid-template-columns:minmax(280px,.92fr) minmax(0,1.55fr)!important;
  gap:clamp(30px,5vw,72px)!important;
  align-items:start!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand img{border-radius:999px!important;}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:clamp(16px,2vw,28px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  display:block!important;
  margin-bottom:12px!important;
  color:#f4fbff!important;
  letter-spacing:.02em!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:8px 0!important;
  color:rgba(232,241,255,.66)!important;
  text-decoration:none!important;
  transition:color .22s ease,transform .22s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a::after{
  content:"→"!important;
  opacity:0!important;
  transform:translateX(-6px)!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#f7fdff!important;
  transform:translateX(3px)!important;
  outline:none!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible::after{opacity:1!important;transform:translateX(0)!important;}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  padding:18px clamp(26px,4vw,48px)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.028)!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:16px!important;
}
@media (max-width:980px){
  html body.spx-public #dashboard.spx-dashboard-command-v63{
    width:min(100% - 24px,1120px)!important;
    margin:60px auto!important;
    min-height:auto!important;
    border-radius:30px!important;
    overflow:hidden!important;
    z-index:80!important;
    isolation:isolate!important;
    padding:14px!important;
    background:
      radial-gradient(520px 300px at 20% 0%,rgba(126,231,255,.12),transparent 68%),
      linear-gradient(180deg,rgba(5,13,28,.96),rgba(5,12,24,.90))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-visual,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    aspect-ratio:16/10!important;
    border-radius:24px!important;
    z-index:2!important;
    background:#05101f!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    z-index:3!important;
    padding:22px!important;
    margin-top:16px!important;
    border-radius:24px!important;
    background:linear-gradient(145deg,rgba(8,18,36,.88),rgba(5,10,22,.72))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-cursor,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    display:none!important;
  }
  html body.spx-public .spx-export-explainer,
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell,
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{grid-template-columns:1fr!important;}
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{flex-direction:column!important;}
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63,
html[data-theme="light"] body.spx-public .spx-export-section-v61,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3{
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(238,247,255,.72))!important;
  border-color:rgba(40,93,130,.16)!important;
  color:#122033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel,
html[data-theme="light"] body.spx-public #roadmap.spx-alpha-story-section .spx-alpha-feedback-panel,
html[data-theme="light"] body.spx-public .spx-export-card,
html[data-theme="light"] body.spx-public .spx-export-explainer span{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(241,247,255,.72))!important;
  border-color:rgba(40,93,130,.16)!important;
  color:#122033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p,
html[data-theme="light"] body.spx-public .spx-export-card p,
html[data-theme="light"] body.spx-public .spx-export-card li,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  color:rgba(18,32,51,.76)!important;
}

/* =========================================================
   A8.124 repair QC
   Consolidates the public v124 flow without boxed How visuals,
   duplicate scroll owners, or global blur/wash layers.
   ========================================================= */
html body.spx-public .spx-v26-bottom-fade,
html body.spx-public .spx-v26-bottom-fade::before,
html body.spx-public .spx-v26-bottom-fade::after,
html body.spx-public .spx-why52-hero-echo,
html body.spx-public .spx-how-handoff-overlay,
html body.spx-public .spx-a898-how-bridge{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

html body.spx-public .spx-nav-v26 .nav-group-mega .mega-menu::before{
  display:none!important;
}
html body.spx-public .spx-product-mega .mega-menu,
html body.spx-public .resources-mega .mega-menu{
  top:calc(100% - 10px)!important;
  margin-top:0!important;
}
html body.spx-public .spx-product-mega::after,
html body.spx-public .resources-mega::after{
  top:calc(100% - 12px)!important;
  height:34px!important;
}
html body.spx-public .nav-feature-link,
html body.spx-public .spx-resource-list a{
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,color .22s ease!important;
}

@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]{
    margin-top:-1px!important;
    border-top:0!important;
    background:transparent!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]::before,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"]::after{
    display:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step{
    padding:clamp(34px,3vw,48px)!important;
    padding-top:clamp(42px,3.4vw,58px)!important;
    border-radius:30px!important;
    border:1px solid rgba(126,231,255,.20)!important;
    background:
      radial-gradient(300px 180px at 98% 0%,rgba(126,231,255,.12),transparent 68%),
      linear-gradient(145deg,rgba(8,18,34,.72),rgba(5,12,26,.44))!important;
    box-shadow:0 26px 82px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step::before{
    background:
      linear-gradient(135deg,rgba(126,231,255,.46),transparent 18%) top right/120px 120px no-repeat,
      linear-gradient(315deg,rgba(126,231,255,.15),transparent 16%) bottom left/110px 110px no-repeat!important;
    opacity:.46!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    top:0!important;
    right:0!important;
    left:auto!important;
    width:74px!important;
    height:58px!important;
    border-radius:0 30px 0 22px!important;
    background:linear-gradient(135deg,#d6fbff,#67e8f9 55%,#7ee7ff)!important;
    color:#06101f!important;
    box-shadow:0 18px 48px rgba(24,201,245,.18)!important;
    letter-spacing:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step h3,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card b,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
  html body.spx-public .spx-section-kicker h2,
  html body.spx-public #roadmap.spx-alpha-story-section .spx-summary-panel h2{
    letter-spacing:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-how-active-viewport.is-step-flow .why52-visuals{
    top:calc(43.6vh + 56px)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-stage,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:24px 0 0 24px!important;
    box-shadow:0 34px 95px rgba(0,0,0,.30)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual-card{
    width:min(390px,32vw)!important;
    padding-left:20px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  html body.spx-public #dashboard.spx-dashboard-command-v63{
    background:
      radial-gradient(1100px 680px at 10% 28%,rgba(20,190,230,.12),transparent 66%),
      radial-gradient(980px 620px at 84% 64%,rgba(38,102,255,.09),transparent 68%),
      linear-gradient(180deg,rgba(3,7,16,0),rgba(4,9,20,.58) 20%,rgba(4,8,18,.70) 72%,rgba(3,7,16,0))!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-hotspot{
    position:absolute!important;
    display:block!important;
    width:11.2%!important;
    min-width:0!important;
    height:3.6%!important;
    padding:0!important;
    border-radius:13px!important;
    color:transparent!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px!important;
    border:1px solid transparent!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-home{left:var(--dash-hotspot-overview-left,1.7%)!important;top:var(--dash-hotspot-overview-top,37.9%)!important;width:var(--dash-hotspot-overview-width,11.2%)!important;height:var(--dash-hotspot-overview-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-projects{left:var(--dash-hotspot-projects-left,1.7%)!important;top:var(--dash-hotspot-projects-top,41.2%)!important;width:var(--dash-hotspot-projects-width,11.2%)!important;height:var(--dash-hotspot-projects-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .hotspot-files{left:var(--dash-hotspot-files-left,1.7%)!important;top:var(--dash-hotspot-files-top,46.2%)!important;width:var(--dash-hotspot-files-width,11.2%)!important;height:var(--dash-hotspot-files-height,3.6%)!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-home{right:clamp(54px,5.8vw,112px)!important;bottom:clamp(66px,9vh,112px)!important;left:auto!important;top:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-projects{left:clamp(900px,52vw,1160px)!important;top:clamp(128px,18vh,210px)!important;right:auto!important;bottom:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .callout-files{left:clamp(650px,36vw,790px)!important;top:clamp(460px,58vh,760px)!important;right:auto!important;bottom:auto!important;}
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:clamp(24px,2vw,34px)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    position:relative!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-frame{
    box-shadow:0 36px 120px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035) inset!important;
  }
}

html body.spx-public .spx-export-section-v61,
html body.spx-public #roadmap.spx-alpha-story-section,
html body.spx-public .site-footer.spx-footer-v3{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
html body.spx-public .spx-export-card .spx-more-link svg{
  width:14px!important;
  height:14px!important;
  flex:0 0 14px!important;
  transition:transform .22s ease!important;
}
html body.spx-public .spx-export-card:hover .spx-more-link svg,
html body.spx-public .spx-export-card:focus-within .spx-more-link svg{
  transform:translateX(3px)!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card{
  opacity:calc(.55 + var(--pricing-in,1) * .45)!important;
  transform:translate3d(0,calc((1 - var(--pricing-in,1)) * 18px),0)!important;
  transition:opacity .32s ease,transform .32s ease,border-color .24s ease,box-shadow .24s ease!important;
}
html body.spx-public #pricing.spx-pricing-section-v61 .spx-price-card[data-price-card="free"]{
  box-shadow:0 26px 90px rgba(0,0,0,.18),0 0 80px rgba(69,230,168,.13)!important;
  animation:spxFreePlanFloat 6.8s ease-in-out infinite!important;
}
@keyframes spxFreePlanFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}

html body.spx-public .spx-faq-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:12px!important;
}
html body.spx-public .spx-faq-card{
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  border:1px solid rgba(126,231,255,.14)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03))!important;
  color:var(--text)!important;
  cursor:pointer!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease!important;
}
html body.spx-public .spx-faq-card:hover,
html body.spx-public .spx-faq-card:focus-visible{
  transform:translateY(-3px)!important;
  border-color:rgba(126,231,255,.34)!important;
  outline:none!important;
}
html body.spx-public .spx-faq-card span{font-weight:900!important;}
html body.spx-public .spx-faq-card small{color:var(--secondary)!important;font-weight:800!important;}
html body.spx-public .spx-faq-modal{
  position:fixed!important;
  inset:0!important;
  z-index:220!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:rgba(2,6,18,.58)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .2s ease,visibility .2s ease!important;
}
html body.spx-public .spx-faq-modal.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-faq-dialog{
  position:relative!important;
  width:min(620px,100%)!important;
  padding:clamp(24px,4vw,40px)!important;
  border-radius:30px!important;
  border:1px solid rgba(126,231,255,.20)!important;
  background:linear-gradient(145deg,rgba(8,18,34,.96),rgba(5,10,22,.92))!important;
  box-shadow:0 34px 120px rgba(0,0,0,.42)!important;
}
html body.spx-public .spx-faq-close{
  position:absolute!important;
  right:16px!important;
  top:16px!important;
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.06)!important;
  color:inherit!important;
  cursor:pointer!important;
}
html body.spx-public .spx-faq-dialog h3{font-size:clamp(26px,3vw,42px)!important;line-height:1.05!important;letter-spacing:0!important;margin:10px 0 14px!important;}
html body.spx-public .spx-faq-dialog p{font-size:16px!important;line-height:1.72!important;color:rgba(232,241,255,.78)!important;}

@media (max-width:980px){
  html body.spx-public .spx-product-mega .mega-menu,
  html body.spx-public .resources-mega .mega-menu{top:auto!important;margin-top:8px!important;}
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-step-number{
    top:0!important;
    right:0!important;
    left:auto!important;
    border-radius:0 22px 0 18px!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img{
    border-radius:22px!important;
    box-shadow:0 20px 60px rgba(0,0,0,.20)!important;
  }
}

html[data-theme="light"] body.spx-public .spx-faq-dialog{
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,255,.96))!important;
  color:#122033!important;
  box-shadow:0 34px 100px rgba(22,34,64,.18)!important;
}
html[data-theme="light"] body.spx-public .spx-faq-dialog p{color:rgba(18,32,51,.78)!important;}
html[data-theme="light"] body.spx-public .spx-faq-modal{background:rgba(230,240,250,.62)!important;}

html body.spx-public main:not(.spx-home-main) .page-hero{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body.spx-public .spx-feature-content,
html body.spx-public .spx-related-links,
html body.spx-public .faq-block,
html body.spx-public .article,
html body.spx-public .maintenance-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:
    radial-gradient(720px 260px at 8% 0%,rgba(126,231,255,.10),transparent 64%),
    linear-gradient(145deg,rgba(7,16,31,.56),rgba(4,9,20,.30))!important;
  border-color:rgba(126,231,255,.13)!important;
}
html body.spx-public .product-frame{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html body.spx-public .spx-support-hero-copy,
html body.spx-public .spx-support-status-card,
html body.spx-public .spx-support-route-grid article,
html body.spx-public .spx-support-form-intro,
html body.spx-public .spx-public-support-form-v62{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html[data-theme="light"] body.spx-public .spx-feature-content,
html[data-theme="light"] body.spx-public .spx-related-links,
html[data-theme="light"] body.spx-public .faq-block,
html[data-theme="light"] body.spx-public .article,
html[data-theme="light"] body.spx-public .maintenance-card{
  background:
    radial-gradient(720px 260px at 8% 0%,rgba(14,165,233,.10),transparent 64%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(240,247,255,.58))!important;
  color:#122033!important;
}

/* A8.124 QA repair: remove old sticky/absolute dashboard copy remnants and
   keep the product-demo interaction readable in dark and light mode. */
@media (min-width:981px){
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:min(430px,30vw)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100svh - 190px)!important;
    overflow:visible!important;
    padding:clamp(22px,2.3vw,30px)!important;
    background:linear-gradient(145deg,rgba(8,18,36,.88),rgba(5,10,22,.76))!important;
    border:1px solid rgba(126,231,255,.18)!important;
    box-shadow:0 28px 88px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    opacity:1!important;
    transform:none!important;
    text-shadow:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2{
    font-size:clamp(34px,3.05vw,52px)!important;
    line-height:1!important;
    margin:10px 0 12px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p{
    margin:0 0 18px!important;
    font-size:15px!important;
    line-height:1.62!important;
    color:rgba(232,241,255,.76)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs{
    position:static!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
    min-height:42px!important;
    width:100%!important;
    border-radius:16px!important;
    padding:10px 12px!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:16px 17px!important;
    border-radius:20px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.032))!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel:not(.is-active){
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,10px,0) scale(.985)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel.is-active{
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
    display:block!important;
    opacity:0!important;
    visibility:visible!important;
    transform:translate3d(0,10px,0) scale(.97)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63:not(.is-dashboard-focused) .spx-dash-callout{
    opacity:0!important;
    transform:translate3d(0,10px,0) scale(.97)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused .spx-dash-copy{
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(24px,0,0) scale(.985)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="overview"] [data-dashboard-callout="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="projects"] [data-dashboard-callout="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63.is-dashboard-focused[data-dashboard-active="files"] [data-dashboard-callout="files"]{
    opacity:1!important;
    transform:translate3d(0,0,0) scale(1)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 [data-dashboard-hotspot]{
    opacity:0!important;
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="overview"] [data-dashboard-hotspot="overview"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-active="files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-intent="files"] [data-dashboard-hotspot="files"]{
    opacity:0!important;
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-projects"] [data-dashboard-hotspot="projects"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="hover-files"] [data-dashboard-hotspot="files"],
  html body.spx-public #dashboard.spx-dashboard-command-v63[data-dashboard-action="click-files"] [data-dashboard-hotspot="files"]{
    opacity:.30!important;
    border-color:rgba(126,231,255,.40)!important;
    background:linear-gradient(90deg,rgba(24,201,245,.24),rgba(24,201,245,.06))!important;
    box-shadow:inset 4px 0 0 rgba(24,201,245,.82),0 0 28px rgba(24,201,245,.14)!important;
  }
  html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost{
    transition:opacity .52s ease!important;
  }
}

html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63{
  background:
    radial-gradient(1100px 680px at 10% 28%,rgba(14,165,233,.10),transparent 66%),
    radial-gradient(980px 620px at 84% 64%,rgba(37,99,235,.08),transparent 68%),
    linear-gradient(180deg,rgba(246,248,252,0),rgba(234,241,249,.72) 20%,rgba(226,235,245,.78) 72%,rgba(246,248,252,0))!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout{
  color:#122033!important;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(240,247,255,.94))!important;
  border-color:rgba(40,93,130,.16)!important;
  box-shadow:0 30px 86px rgba(22,34,64,.16),0 0 72px rgba(24,201,245,.14),inset 0 1px 0 rgba(255,255,255,.82)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy h2,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel h3{
  color:#102033!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-copy > p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-panel p,
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-callout small{
  color:rgba(18,32,51,.76)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button{
  color:rgba(18,32,51,.70)!important;
  background:rgba(15,94,135,.045)!important;
  border-color:rgba(40,93,130,.14)!important;
}
html[data-theme="light"] body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-tabs button.is-active{
  color:#0b3f58!important;
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(14,165,233,.30)!important;
}

/* How intro handoff repair: the intro is fixed by the active A8.115 owner.
   Identity transforms on ancestors still create a containing block, which made
   the intro wait below the viewport and caused the visible dark gap. */
@media (min-width:981px){
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-copy{
    transform:none!important;
    will-change:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"].is-intro-flow:not(.is-step-flow) .spx-why52-story-head{
    transform:translate3d(0,-50%,0) scale(calc(1 + (var(--a115-intro-out,0) * .072)))!important;
  }
}

/* Export workflow repair: keep the A8.124 active-state owner, but remove the
   old cramped tab row and hover width-jumps so the section reads as three calm
   steps instead of a selector widget. */
html body.spx-public .spx-export-section-v61{
  overflow:visible!important;
}
html body.spx-public .spx-export-section-v61 .spx-section-kicker{
  max-width:860px!important;
  margin-inline:auto!important;
}
html body.spx-public .spx-export-section-v61 .spx-section-kicker h2{
  max-width:820px!important;
}
html body.spx-public .spx-export-explainer{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(12px,1.4vw,18px)!important;
  width:min(920px,100%)!important;
  margin:clamp(28px,3.2vw,42px) auto 18px!important;
}
html body.spx-public .spx-export-explainer span{
  min-height:58px!important;
  padding:13px 16px!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;
  border:1px solid rgba(126,231,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body.spx-public .spx-export-explainer b{
  display:inline-grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border-radius:12px!important;
  background:rgba(126,231,255,.12)!important;
  color:#dff8ff!important;
  margin-right:10px!important;
}
html body.spx-public .spx-export-flowline{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:min(680px,100%)!important;
  margin:0 auto clamp(24px,3vw,34px)!important;
  color:rgba(226,241,255,.68)!important;
  white-space:normal!important;
}
html body.spx-public .spx-export-flowline span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:102px!important;
  min-height:34px!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,231,255,.15)!important;
  background:rgba(255,255,255,.045)!important;
  color:rgba(226,241,255,.70)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  line-height:1!important;
}
html body.spx-public .spx-export-flowline span.is-active{
  color:#f6fdff!important;
  background:rgba(126,231,255,.14)!important;
  border-color:rgba(126,231,255,.36)!important;
  box-shadow:0 0 0 1px rgba(126,231,255,.06) inset!important;
}
html body.spx-public .spx-export-flowline i{
  display:block!important;
  flex:0 1 54px!important;
  min-width:22px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(126,231,255,.38),transparent)!important;
}
html body.spx-public .spx-export-grid,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover),
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within),
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(16px,1.8vw,22px)!important;
  align-items:start!important;
  max-width:1160px!important;
  margin-inline:auto!important;
}
html body.spx-public .spx-export-card,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within,
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active){
  flex:initial!important;
  min-width:0!important;
  padding:clamp(20px,2vw,28px)!important;
  transform:translate3d(0,0,0)!important;
  transition:transform .26s var(--ease),opacity .26s ease,border-color .26s ease,box-shadow .26s ease,background .26s ease!important;
}
html body.spx-public .spx-export-card{
  min-height:340px!important;
  opacity:.88!important;
  box-shadow:0 22px 68px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html body.spx-public .spx-export-card.is-active,
html body.spx-public .spx-export-card:hover,
html body.spx-public .spx-export-card:focus-within{
  opacity:1!important;
  transform:translate3d(0,-5px,0)!important;
  box-shadow:0 26px 78px rgba(0,0,0,.22),0 0 0 1px rgba(126,231,255,.10) inset!important;
}
html body.spx-public .spx-export-card p,
html body.spx-public .spx-export-card .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) p,
html body.spx-public .spx-export-grid:has(.spx-export-card:hover) .spx-export-card:not(:hover) .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) p,
html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within) .spx-export-card:not(:focus-within) .spx-more-link,
html body.spx-public .spx-export-grid:has(.spx-export-card.is-active) .spx-export-card:not(.is-active) p{
  opacity:1!important;
  max-height:none!important;
  overflow:visible!important;
  margin-top:0!important;
  pointer-events:auto!important;
}
html body.spx-public .spx-export-card .spx-more-link{
  margin-top:auto!important;
  width:max-content!important;
}
html body.spx-public .spx-more-link::after{
  content:none!important;
  display:none!important;
}
html body.spx-public .spx-export-card .spx-more-link svg{
  display:block!important;
}
html body.spx-public .spx-export-card .spx-export-icon{
  flex:0 0 auto!important;
}
html body.spx-public .spx-export-card:hover .spx-export-icon,
html body.spx-public .spx-export-card:focus-within .spx-export-icon,
html body.spx-public .spx-export-card.is-active .spx-export-icon{
  transform:translateY(-2px) scale(1.035)!important;
}
@media (max-width:980px){
  html body.spx-public .spx-export-section-v61{
    width:min(100% - 28px,1180px)!important;
    padding:26px 18px!important;
    border-radius:28px!important;
  }
  html body.spx-public .spx-export-explainer,
  html body.spx-public .spx-export-grid,
  html body.spx-public .spx-export-grid:has(.spx-export-card:hover),
  html body.spx-public .spx-export-grid:has(.spx-export-card:focus-within),
  html body.spx-public .spx-export-grid:has(.spx-export-card.is-active){
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-export-flowline{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    justify-content:stretch!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }
  html body.spx-public .spx-export-flowline span{
    min-width:0!important;
    width:100%!important;
    padding-inline:8px!important;
    font-size:11px!important;
  }
  html body.spx-public .spx-export-flowline i{
    display:none!important;
  }
  html body.spx-public .spx-export-card{
    min-height:0!important;
  }
}
html[data-theme="light"] body.spx-public .spx-export-flowline span{
  color:rgba(18,32,51,.70)!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(40,93,130,.16)!important;
}
html[data-theme="light"] body.spx-public .spx-export-flowline span.is-active{
  color:#0d4058!important;
  background:rgba(14,165,233,.12)!important;
  border-color:rgba(14,165,233,.32)!important;
}
html[data-theme="light"] body.spx-public .spx-export-flowline i{
  background:linear-gradient(90deg,transparent,rgba(14,93,135,.24),transparent)!important;
}
html[data-theme="light"] body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-more-link{
  color:#07526f!important;
  background:rgba(14,165,233,.10)!important;
  border-color:rgba(14,165,233,.28)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-grid{
  align-items:start!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card{
  min-height:0!important;
  align-self:start!important;
  gap:10px!important;
  padding:clamp(18px,1.8vw,24px)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card p{
  flex:0 0 auto!important;
  margin:0!important;
  line-height:1.52!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-more-link{
  min-height:34px!important;
  margin-top:8px!important;
  padding:7px 11px!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
html body.spx-public #dashboard.spx-dashboard-command-v63 .spx-dash-fade-ghost.is-fading{
  opacity:0!important;
}

/* Footer repair: older footer variants left the column nav in inline flow, which
   collapsed headings and links together. This restores a clean SaaS footer. */
html body.spx-public .site-footer.spx-footer-v3{
  width:min(1280px,calc(100% - 44px))!important;
  margin:clamp(80px,9vw,130px) auto 0!important;
  padding:clamp(30px,4vw,52px)!important;
  border-radius:36px 36px 0 0!important;
  border:1px solid rgba(126,231,255,.13)!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(126,231,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(8,17,33,.82),rgba(4,9,19,.74))!important;
  box-shadow:0 -22px 90px rgba(0,0,0,.20)!important;
  overflow:hidden!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
  display:grid!important;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.65fr)!important;
  gap:clamp(32px,5vw,70px)!important;
  align-items:start!important;
  width:100%!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-brand-col{
  display:grid!important;
  gap:16px!important;
  max-width:340px!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:12px!important;
  width:max-content!important;
  text-decoration:none!important;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:950!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-brand img{
  width:38px!important;
  height:38px!important;
  object-fit:contain!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-main-copy p{
  max-width:30ch!important;
  margin:0!important;
  color:rgba(232,241,255,.82)!important;
  line-height:1.65!important;
}
html body.spx-public .site-footer.spx-footer-v3 .footer-release-note{
  display:block!important;
  color:rgba(232,241,255,.56)!important;
  line-height:1.55!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(126px,1fr))!important;
  gap:clamp(18px,2.4vw,34px)!important;
  align-items:start!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col{
  display:grid!important;
  gap:10px!important;
  min-width:0!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  display:block!important;
  margin:0 0 4px!important;
  color:rgba(246,252,255,.92)!important;
  font-size:12px!important;
  line-height:1.2!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  width:max-content!important;
  max-width:100%!important;
  color:rgba(232,241,255,.66)!important;
  text-decoration:none!important;
  font-size:15px!important;
  line-height:1.35!important;
  transition:color .2s ease,transform .2s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a::after{
  content:""!important;
  width:5px!important;
  height:5px!important;
  border-top:1.5px solid currentColor!important;
  border-right:1.5px solid currentColor!important;
  transform:translateX(-2px) rotate(45deg)!important;
  opacity:0!important;
  transition:opacity .2s ease,transform .2s ease!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#9eeeff!important;
  transform:translateX(3px)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover::after,
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible::after{
  opacity:1!important;
  transform:translateX(1px) rotate(45deg)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-top:clamp(30px,4vw,48px)!important;
  padding-top:22px!important;
  border-top:1px solid rgba(126,231,255,.12)!important;
  color:rgba(232,241,255,.58)!important;
}
html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom p{
  margin:0!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3{
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,247,255,.76))!important;
  border-color:rgba(40,93,130,.16)!important;
  box-shadow:0 -20px 70px rgba(22,34,64,.10)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-brand,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col strong{
  color:#102033!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-main-copy p,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a{
  color:rgba(18,32,51,.72)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .footer-release-note,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
  color:rgba(18,32,51,.58)!important;
}
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:hover,
html[data-theme="light"] body.spx-public .site-footer.spx-footer-v3 .spx-footer-col a:focus-visible{
  color:#07526f!important;
}
@media (max-width:900px){
  html body.spx-public .site-footer.spx-footer-v3{
    width:min(100% - 28px,1280px)!important;
    padding:28px 20px!important;
    border-radius:28px 28px 0 0!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-shell{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-bottom{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}
@media (max-width:520px){
  html body.spx-public .site-footer.spx-footer-v3 .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-export-status{
  min-height:0!important;
  padding:7px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card .spx-export-icon{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card h3{
  margin:4px 0 0!important;
  font-size:clamp(22px,1.7vw,27px)!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card ul{
  margin:6px 0 0!important;
  gap:6px!important;
}
html body.spx-public #export.spx-export-section-v61 .spx-export-card li{
  font-size:13px!important;
  line-height:1.42!important;
}

/* A8.126 launch-focus repair: keep Dashboard Command Center out of the public flow while it is refined. */
html body.spx-public #dashboard[hidden],
html body.spx-public [data-launch-hidden="dashboard"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  min-height:0!important;
  height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
html body.spx-public .spx-public-layout-managed{display:flex!important;flex-direction:column!important;}
html body.spx-public .spx-public-section-hidden{display:none!important;}
html body.spx-public [data-theme-toggle],
html body.spx-public .spx-theme-switch{display:none!important;}

/* Website edit mode */
html body.spx-public .spx-public-editor-bar{position:fixed!important;z-index:99999!important;left:50%!important;bottom:18px!important;transform:translateX(-50%)!important;width:min(980px,calc(100vw - 28px))!important;display:flex!important;align-items:center!important;gap:12px!important;padding:12px 14px!important;border:1px solid rgba(126,231,255,.22)!important;border-radius:22px!important;background:rgba(5,10,22,.94)!important;box-shadow:0 22px 60px rgba(0,0,0,.34),0 0 34px rgba(83,225,255,.12)!important;backdrop-filter:blur(18px)!important;color:#eaf7ff!important;}
html body.spx-public .spx-public-editor-bar strong{font-weight:950!important;white-space:nowrap!important;}
html body.spx-public .spx-public-editor-bar span{color:rgba(232,245,255,.72)!important;font-size:13px!important;}
html body.spx-public .spx-public-editor-bar .form-status{margin:0 0 0 auto!important;font-size:12px!important;}
html body.spx-public .spx-public-editable{outline:1.5px dashed rgba(126,231,255,.34)!important;outline-offset:5px!important;border-radius:8px!important;cursor:text!important;}
html body.spx-public .spx-public-editable:focus{outline-color:rgba(126,231,255,.86)!important;background:rgba(126,231,255,.07)!important;}
html body.spx-public .spx-section-edit-controls{position:absolute!important;z-index:35!important;top:16px!important;left:16px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:7px!important;border:1px solid rgba(126,231,255,.22)!important;border-radius:999px!important;background:rgba(5,10,22,.82)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;backdrop-filter:blur(14px)!important;color:#eaf7ff!important;}
html body.spx-public .spx-section-edit-controls strong{padding:0 8px!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#8eeaff!important;}
html body.spx-public .spx-section-edit-controls button{min-width:32px!important;min-height:28px!important;border:1px solid rgba(218,236,255,.14)!important;border-radius:999px!important;background:rgba(255,255,255,.07)!important;color:#eaf7ff!important;font-weight:900!important;cursor:pointer!important;}
html body.spx-public [data-public-section]{position:relative;}

/* Export-first launch rework: compact, calmer, and aligned with the current Spixor tone. */
html body.spx-public #export.spx-export-launch-rework{width:min(1180px,calc(100% - 48px))!important;margin:clamp(64px,8vw,112px) auto!important;padding:clamp(34px,4.5vw,58px)!important;border-radius:34px!important;border:1px solid rgba(126,231,255,.13)!important;background:linear-gradient(145deg,rgba(8,15,31,.84),rgba(5,10,22,.64))!important;box-shadow:0 30px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important;filter:none!important;backdrop-filter:none!important;}
html body.spx-public #export .spx-section-kicker{max-width:760px!important;margin:0 auto 22px!important;text-align:center!important;}
html body.spx-public #export .spx-section-kicker h2{font-size:clamp(34px,4vw,58px)!important;line-height:.96!important;margin:0 0 12px!important;}
html body.spx-public #export .spx-section-kicker p{font-size:clamp(15px,1.15vw,18px)!important;line-height:1.65!important;color:rgba(232,241,255,.74)!important;}
html body.spx-public #export .spx-export-explainer{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 auto 18px!important;max-width:850px!important;}
html body.spx-public #export .spx-export-explainer span{display:flex!important;align-items:center!important;gap:10px!important;min-height:54px!important;padding:10px 13px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(232,241,255,.82)!important;}
html body.spx-public #export .spx-export-explainer b{display:grid!important;place-items:center!important;width:31px!important;height:31px!important;border-radius:11px!important;background:rgba(126,231,255,.12)!important;color:#92f0ff!important;font-size:12px!important;}
html body.spx-public #export .spx-export-flowline{max-width:720px!important;margin:0 auto 20px!important;display:grid!important;grid-template-columns:auto 1fr auto 1fr auto!important;align-items:center!important;gap:10px!important;color:rgba(232,241,255,.56)!important;}
html body.spx-public #export .spx-export-flowline span{padding:7px 11px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.12)!important;background:rgba(255,255,255,.035)!important;font-size:12px!important;font-weight:900!important;}
html body.spx-public #export .spx-export-flowline span.is-active{color:#102033!important;background:linear-gradient(135deg,#8ff0ff,#53d8ff)!important;border-color:transparent!important;}
html body.spx-public #export .spx-export-flowline i{height:1px!important;background:linear-gradient(90deg,rgba(126,231,255,.12),rgba(126,231,255,.44),rgba(126,231,255,.12))!important;}
html body.spx-public #export .spx-export-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;}
html body.spx-public #export .spx-export-card{display:grid!important;grid-template-rows:auto auto auto 1fr auto!important;gap:10px!important;min-height:0!important;padding:20px!important;border-radius:25px!important;border:1px solid rgba(218,236,255,.10)!important;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.032))!important;box-shadow:none!important;transform:none!important;transition:transform .22s ease,border-color .22s ease,background .22s ease!important;overflow:hidden!important;}
html body.spx-public #export .spx-export-card:hover,
html body.spx-public #export .spx-export-card.is-active{transform:translateY(-4px)!important;border-color:rgba(126,231,255,.28)!important;background:linear-gradient(145deg,rgba(126,231,255,.10),rgba(255,255,255,.045))!important;}
html body.spx-public #export .spx-export-card p{margin:0!important;color:rgba(232,241,255,.75)!important;line-height:1.55!important;font-size:14px!important;}
html body.spx-public #export .spx-more-link{align-self:end!important;margin-top:8px!important;}

/* Compact pricing + modal notify. */
html body.spx-public #pricing.spx-pricing-launch-compact{width:min(1180px,calc(100% - 48px))!important;margin:clamp(58px,7vw,100px) auto!important;padding:0!important;}
html body.spx-public #pricing .spx-price-grid--compact{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;}
html body.spx-public #pricing .spx-price-card{min-height:0!important;padding:22px!important;border-radius:28px!important;gap:11px!important;display:flex!important;flex-direction:column!important;}
html body.spx-public #pricing .spx-plan-head{display:grid!important;grid-template-columns:auto 1fr!important;grid-template-areas:"icon title" "icon status"!important;align-items:center!important;column-gap:12px!important;row-gap:3px!important;margin:0!important;}
html body.spx-public #pricing .spx-plan-icon{grid-area:icon!important;width:44px!important;height:44px!important;border-radius:15px!important;}
html body.spx-public #pricing .spx-plan-head h3{grid-area:title!important;margin:0!important;font-size:22px!important;line-height:1.05!important;}
html body.spx-public #pricing .spx-plan-status{grid-area:status!important;width:max-content!important;margin:0!important;padding:4px 9px!important;font-size:10px!important;}
html body.spx-public #pricing .spx-price-card strong{font-size:clamp(32px,3.1vw,44px)!important;line-height:1!important;margin:8px 0 0!important;}
html body.spx-public #pricing .spx-price-card p{font-size:14px!important;line-height:1.5!important;margin:0!important;color:rgba(232,241,255,.72)!important;}
html body.spx-public #pricing .spx-price-card ul{margin:0!important;padding:0!important;display:grid!important;gap:7px!important;}
html body.spx-public #pricing .spx-price-card li{font-size:13px!important;line-height:1.35!important;}
html body.spx-public #pricing .spx-price-card .btn{margin-top:auto!important;}
html body.spx-public #pricing .spx-orbit-note{display:block!important;margin-top:6px!important;color:rgba(232,241,255,.55)!important;font-size:12px!important;line-height:1.35!important;}
html body.spx-public .spx-orbit-modal[hidden]{display:none!important;}
html body.spx-public .spx-orbit-modal{position:fixed!important;inset:0!important;z-index:99998!important;display:grid!important;place-items:center!important;padding:22px!important;}
html body.spx-public .spx-orbit-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(1,5,13,.72)!important;backdrop-filter:blur(12px)!important;}
html body.spx-public .spx-orbit-modal-card{position:relative!important;z-index:1!important;width:min(540px,100%)!important;display:grid!important;gap:13px!important;padding:26px!important;border-radius:30px!important;border:1px solid rgba(126,231,255,.20)!important;background:linear-gradient(145deg,rgba(9,17,34,.98),rgba(5,10,22,.96))!important;box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 34px rgba(80,220,255,.13)!important;color:#eaf7ff!important;}
html body.spx-public .spx-orbit-modal-card h3{margin:0!important;font-size:clamp(26px,3vw,38px)!important;line-height:1!important;}
html body.spx-public .spx-orbit-modal-card p{margin:0!important;color:rgba(232,241,255,.72)!important;line-height:1.55!important;}
html body.spx-public .spx-orbit-modal-card label{display:grid!important;gap:7px!important;font-size:12px!important;font-weight:900!important;color:rgba(232,241,255,.75)!important;}
html body.spx-public .spx-orbit-modal-card input:not(.spx-hp-field),
html body.spx-public .spx-orbit-modal-card textarea{width:100%!important;border:1px solid rgba(218,236,255,.13)!important;border-radius:16px!important;background:rgba(255,255,255,.055)!important;color:#fff!important;padding:12px 13px!important;resize:vertical!important;}
html body.spx-public .spx-modal-close{position:absolute!important;right:14px!important;top:14px!important;width:36px!important;height:36px!important;border:1px solid rgba(218,236,255,.14)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;color:#eaf7ff!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;}
html body.spx-public.spx-modal-open{overflow:hidden!important;}

/* Alpha story rework. */
html body.spx-public #roadmap.spx-alpha-launch-story{width:min(1180px,calc(100% - 48px))!important;margin:clamp(62px,8vw,110px) auto!important;padding:clamp(30px,4.4vw,56px)!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr)!important;gap:24px!important;border-radius:34px!important;border:1px solid rgba(126,231,255,.14)!important;background:radial-gradient(circle at 18% 18%,rgba(77,214,255,.12),transparent 35%),linear-gradient(145deg,rgba(8,15,31,.88),rgba(5,10,22,.66))!important;box-shadow:0 34px 100px rgba(0,0,0,.30)!important;}
html body.spx-public #roadmap .spx-alpha-story-copy{display:grid!important;align-content:center!important;gap:18px!important;}
html body.spx-public #roadmap .spx-alpha-story-copy h2{font-size:clamp(34px,4vw,60px)!important;line-height:.96!important;margin:0!important;}
html body.spx-public #roadmap .spx-alpha-story-copy p{max-width:64ch!important;margin:0!important;color:rgba(232,241,255,.74)!important;line-height:1.68!important;}
html body.spx-public #roadmap .spx-alpha-story-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin-top:4px!important;}
html body.spx-public #roadmap .spx-alpha-story-steps span{display:grid!important;gap:7px!important;padding:13px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.13)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public #roadmap .spx-alpha-story-steps b{color:#8eeaff!important;font-size:12px!important;letter-spacing:.08em!important;}
html body.spx-public #roadmap .spx-alpha-story-steps small{color:rgba(232,241,255,.75)!important;font-weight:850!important;line-height:1.35!important;}
html body.spx-public #roadmap .spx-alpha-feedback-panel{border-radius:30px!important;border:1px solid rgba(126,231,255,.18)!important;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 70px rgba(0,0,0,.22)!important;padding:22px!important;}
html body.spx-public #roadmap .spx-alpha-theme-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
html body.spx-public #roadmap .spx-alpha-theme-list button{min-height:44px!important;border-radius:16px!important;border:1px solid rgba(218,236,255,.12)!important;background:rgba(255,255,255,.045)!important;color:rgba(232,241,255,.78)!important;font-weight:900!important;}
html body.spx-public #roadmap .spx-alpha-theme-list button.is-active,
html body.spx-public #roadmap .spx-alpha-theme-list button:hover{background:rgba(126,231,255,.12)!important;border-color:rgba(126,231,255,.30)!important;color:#eafaff!important;}

@media (max-width:900px){
  html body.spx-public #export.spx-export-launch-rework,
  html body.spx-public #pricing.spx-pricing-launch-compact,
  html body.spx-public #roadmap.spx-alpha-launch-story{width:calc(100% - 28px)!important;padding:24px 18px!important;border-radius:28px!important;}
  html body.spx-public #export .spx-export-explainer,
  html body.spx-public #export .spx-export-grid,
  html body.spx-public #pricing .spx-price-grid--compact,
  html body.spx-public #roadmap.spx-alpha-launch-story,
  html body.spx-public #roadmap .spx-alpha-story-steps{grid-template-columns:1fr!important;}
  html body.spx-public #export .spx-export-flowline{display:none!important;}
  html body.spx-public .spx-public-editor-bar{align-items:flex-start!important;flex-direction:column!important;bottom:10px!important;}
}

/* A8.128 — launch polish + stronger public website editor. */
html body.spx-public .spx-export-launch-rework-v128{position:relative!important;display:grid!important;gap:24px!important;max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,8vw,110px) auto!important;padding:clamp(22px,4vw,42px)!important;border:1px solid rgba(126,231,255,.15)!important;border-radius:32px!important;background:radial-gradient(circle at 8% 0%,rgba(61,220,255,.14),transparent 34%),radial-gradient(circle at 96% 16%,rgba(82,119,255,.12),transparent 34%),linear-gradient(180deg,rgba(8,14,28,.76),rgba(7,11,22,.52))!important;box-shadow:0 24px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;overflow:hidden!important;}
html body.spx-public .spx-export-head-v128{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:22px!important;align-items:end!important;}
html body.spx-public .spx-export-head-v128 .spx-section-kicker{margin:0!important;max-width:760px!important;text-align:left!important;}
html body.spx-public .spx-export-head-v128 h2{font-size:clamp(32px,4.4vw,58px)!important;line-height:.96!important;margin:8px 0 10px!important;}
html body.spx-public .spx-export-head-v128 p{font-size:clamp(15px,1.4vw,18px)!important;line-height:1.62!important;max-width:68ch!important;}
html body.spx-public .spx-export-proof-v128{display:flex!important;gap:10px!important;align-items:stretch!important;}
html body.spx-public .spx-export-proof-v128 span{min-width:124px!important;display:grid!important;gap:2px!important;padding:13px 14px!important;border-radius:20px!important;border:1px solid rgba(126,231,255,.16)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public .spx-export-proof-v128 b{font-size:24px!important;color:#7ee7ff!important;line-height:1!important;}
html body.spx-public .spx-export-proof-v128 small{color:rgba(232,245,255,.72)!important;font-weight:800!important;line-height:1.25!important;}
html body.spx-public .spx-export-timeline-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
html body.spx-public .spx-export-step-v128{position:relative!important;display:grid!important;grid-template-columns:auto 1fr auto!important;gap:12px!important;align-items:center!important;padding:14px!important;border-radius:22px!important;border:1px solid rgba(255,255,255,.095)!important;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;transition:transform .25s ease,border-color .25s ease,background .25s ease!important;}
html body.spx-public .spx-export-step-v128:hover{transform:translateY(-2px)!important;border-color:rgba(126,231,255,.28)!important;background:linear-gradient(180deg,rgba(126,231,255,.08),rgba(255,255,255,.03))!important;}
html body.spx-public .spx-export-step-no{display:grid!important;place-items:center!important;width:38px!important;height:38px!important;border-radius:14px!important;background:rgba(126,231,255,.10)!important;border:1px solid rgba(126,231,255,.20)!important;color:#9ff0ff!important;font-weight:950!important;font-size:12px!important;}
html body.spx-public .spx-export-step-v128 b{display:block!important;color:#fff!important;font-size:14px!important;font-weight:950!important;margin:0 0 3px!important;}
html body.spx-public .spx-export-step-v128 p{margin:0!important;color:rgba(232,245,255,.72)!important;font-size:12.5px!important;line-height:1.42!important;}
html body.spx-public .spx-export-step-v128 i{width:8px!important;height:8px!important;border-radius:999px!important;background:#7ee7ff!important;box-shadow:0 0 20px rgba(126,231,255,.55)!important;}
html body.spx-public .spx-export-grid-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important;}
html body.spx-public .spx-export-card-v128{min-height:0!important;padding:18px!important;border-radius:24px!important;display:flex!important;flex-direction:column!important;gap:12px!important;border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;box-shadow:none!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important;}
html body.spx-public .spx-export-card-v128:hover{transform:translateY(-4px)!important;border-color:rgba(126,231,255,.26)!important;box-shadow:0 18px 46px rgba(0,0,0,.18),0 0 28px rgba(126,231,255,.10)!important;}
html body.spx-public .spx-export-card-top{display:flex!important;justify-content:space-between!important;gap:12px!important;align-items:center!important;}
html body.spx-public .spx-export-card-v128 h3{margin:0!important;font-size:21px!important;color:#fff!important;}
html body.spx-public .spx-export-card-v128 p{margin:0!important;line-height:1.55!important;color:rgba(232,245,255,.76)!important;}
html body.spx-public .spx-export-card-v128 .spx-more-link{margin-top:auto!important;opacity:1!important;transform:none!important;}
html body.spx-public .spx-pricing-launch-balanced{max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,7vw,96px) auto!important;padding:clamp(20px,3.6vw,38px)!important;border-radius:32px!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.09)!important;}
html body.spx-public .spx-price-grid--balanced{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;align-items:stretch!important;}
html body.spx-public .spx-price-card-v128{min-height:430px!important;padding:22px!important;gap:13px!important;border-radius:26px!important;display:flex!important;flex-direction:column!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head{display:flex!important;align-items:center!important;gap:12px!important;margin:0!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head h3{margin:0!important;font-size:20px!important;}
html body.spx-public .spx-price-card-v128 .spx-plan-head .spx-plan-status{display:inline-flex!important;margin-top:4px!important;}
html body.spx-public .spx-price-card-v128 strong{font-size:clamp(30px,3.2vw,42px)!important;line-height:1!important;margin:4px 0 2px!important;}
html body.spx-public .spx-price-card-v128 p{line-height:1.52!important;margin:0!important;}
html body.spx-public .spx-price-card-v128 ul{display:grid!important;gap:8px!important;margin:2px 0 8px!important;padding:0!important;}
html body.spx-public .spx-price-card-v128 li{font-size:13.5px!important;line-height:1.35!important;}
html body.spx-public .spx-price-card-v128 .btn{margin-top:auto!important;}
html body.spx-public .spx-orbit-modal-v128[hidden]{display:none!important;}
html body.spx-public .spx-orbit-modal-v128{position:fixed!important;inset:0!important;z-index:100000!important;display:grid!important;place-items:center!important;padding:22px!important;}
html body.spx-public .spx-orbit-modal-backdrop{position:absolute!important;inset:0!important;background:rgba(3,6,14,.72)!important;backdrop-filter:blur(14px)!important;}
html body.spx-public .spx-orbit-modal-card{position:relative!important;width:min(620px,calc(100vw - 28px))!important;display:grid!important;gap:14px!important;padding:24px!important;border-radius:30px!important;border:1px solid rgba(126,231,255,.20)!important;background:radial-gradient(circle at 8% 0%,rgba(126,231,255,.16),transparent 34%),linear-gradient(180deg,rgba(10,17,32,.98),rgba(6,10,20,.96))!important;box-shadow:0 30px 100px rgba(0,0,0,.48)!important;color:#eaf7ff!important;}
html body.spx-public .spx-orbit-modal-head{display:flex!important;align-items:center!important;gap:14px!important;padding-right:34px!important;}
html body.spx-public .spx-orbit-modal-head h3{margin:3px 0 0!important;font-size:clamp(24px,4vw,34px)!important;line-height:1.04!important;color:#fff!important;}
html body.spx-public .spx-orbit-modal-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
html body.spx-public .spx-orbit-modal-card label{display:grid!important;gap:7px!important;}
html body.spx-public .spx-orbit-modal-card label span{font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:rgba(232,245,255,.70)!important;}
html body.spx-public .spx-orbit-modal-card input,html body.spx-public .spx-orbit-modal-card textarea{width:100%!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:12px 14px!important;outline:none!important;}
html body.spx-public .spx-orbit-modal-card input:focus,html body.spx-public .spx-orbit-modal-card textarea:focus{border-color:rgba(126,231,255,.50)!important;box-shadow:0 0 0 4px rgba(126,231,255,.10)!important;}
html body.spx-public .spx-orbit-modal-actions{display:flex!important;gap:12px!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;}
html body.spx-public .spx-alpha-story-v128{max-width:min(1180px,calc(100vw - 36px))!important;margin:clamp(54px,7vw,100px) auto!important;padding:clamp(22px,4vw,42px)!important;border-radius:34px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 0% 20%,rgba(126,231,255,.13),transparent 32%),radial-gradient(circle at 95% 0%,rgba(116,104,255,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr)!important;gap:22px!important;align-items:stretch!important;}
html body.spx-public .spx-alpha-narrative-v128{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:22px 0!important;}
html body.spx-public .spx-alpha-narrative-v128 span{padding:14px!important;border-radius:18px!important;border:1px solid rgba(126,231,255,.14)!important;background:rgba(255,255,255,.045)!important;}
html body.spx-public .spx-alpha-narrative-v128 b{display:block!important;color:#fff!important;font-size:13px!important;margin:0 0 6px!important;}
html body.spx-public .spx-alpha-narrative-v128 small{color:rgba(232,245,255,.70)!important;line-height:1.42!important;}
html body.spx-public .spx-alpha-panel-v128{border-radius:28px!important;padding:22px!important;border:1px solid rgba(126,231,255,.18)!important;background:linear-gradient(180deg,rgba(5,11,25,.88),rgba(10,18,34,.72))!important;box-shadow:0 24px 70px rgba(0,0,0,.24)!important;}
html body.spx-public .spx-alpha-panel-v128 h3{font-size:28px!important;line-height:1.08!important;margin:7px 0 14px!important;}
html body.spx-public .site-footer.spx-footer-v3{max-width:min(1180px,calc(100vw - 36px))!important;margin:70px auto 24px!important;border-radius:34px!important;border:1px solid rgba(255,255,255,.10)!important;background:radial-gradient(circle at 8% 0%,rgba(126,231,255,.12),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;box-shadow:0 22px 80px rgba(0,0,0,.22)!important;padding:28px!important;}
html body.spx-public .spx-footer-shell{display:grid!important;grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr)!important;gap:28px!important;align-items:start!important;}
html body.spx-public .spx-footer-columns{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;}
html body.spx-public .spx-footer-col{display:grid!important;gap:8px!important;}
html body.spx-public .spx-footer-col strong{color:#fff!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.12em!important;margin-bottom:5px!important;}
html body.spx-public .spx-footer-col a{position:relative!important;color:rgba(232,245,255,.70)!important;text-decoration:none!important;font-weight:750!important;font-size:13px!important;padding:7px 0!important;transition:color .2s ease,transform .2s ease!important;}
html body.spx-public .spx-footer-col a::after{content:'›'!important;opacity:0!important;margin-left:6px!important;transition:opacity .2s ease,transform .2s ease!important;color:#7ee7ff!important;}
html body.spx-public .spx-footer-col a:hover{color:#fff!important;transform:translateX(2px)!important;}
html body.spx-public .spx-footer-col a:hover::after{opacity:1!important;transform:translateX(2px)!important;}
html body.spx-public .spx-footer-bottom{display:flex!important;justify-content:space-between!important;gap:16px!important;align-items:center!important;margin-top:24px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.08)!important;color:rgba(232,245,255,.58)!important;font-size:12px!important;}
html body.spx-public .spx-public-editor-bar--pro{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:12px!important;align-items:center!important;}
html body.spx-public .spx-public-editor-main{display:grid!important;gap:2px!important;}
html body.spx-public .spx-public-editor-actions{display:flex!important;gap:8px!important;align-items:center!important;flex-wrap:wrap!important;}
html body.spx-public .spx-section-edit-controls{position:absolute!important;z-index:9999!important;top:10px!important;left:10px!important;display:flex!important;gap:6px!important;align-items:center!important;padding:7px!important;border-radius:14px!important;border:1px solid rgba(126,231,255,.25)!important;background:rgba(5,10,22,.88)!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important;}
html body.spx-public .spx-section-edit-controls strong{color:#8ff0ff!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.08em!important;}
html body.spx-public .spx-section-edit-controls button,.spx-public-media-head button{border:1px solid rgba(255,255,255,.13)!important;border-radius:999px!important;background:rgba(255,255,255,.06)!important;color:#fff!important;font-weight:850!important;padding:6px 9px!important;cursor:pointer!important;}
html body.spx-public .spx-public-editable-image{outline:2px dashed rgba(155,233,255,.35)!important;outline-offset:4px!important;}
html body.spx-public .spx-image-edit-button{display:inline-flex!important;position:relative!important;z-index:9998!important;margin:6px!important;padding:6px 9px!important;border-radius:999px!important;border:1px solid rgba(126,231,255,.26)!important;background:rgba(5,12,24,.86)!important;color:#dffaff!important;font-size:11px!important;font-weight:900!important;cursor:pointer!important;}
html body.spx-public .spx-public-media-drawer{position:fixed!important;right:18px!important;bottom:100px!important;z-index:100001!important;width:min(420px,calc(100vw - 28px))!important;max-height:min(540px,calc(100vh - 140px))!important;overflow:auto!important;padding:14px!important;border-radius:22px!important;border:1px solid rgba(126,231,255,.24)!important;background:rgba(5,10,22,.96)!important;box-shadow:0 24px 90px rgba(0,0,0,.44)!important;color:#eaf7ff!important;}
html body.spx-public .spx-public-media-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important;}
html body.spx-public .spx-public-media-list{display:grid!important;gap:10px!important;}
html body.spx-public .spx-public-media-list label{display:grid!important;gap:6px!important;}
html body.spx-public .spx-public-media-list span{font-size:11px!important;font-weight:900!important;color:rgba(232,245,255,.68)!important;}
html body.spx-public .spx-public-media-list input{width:100%!important;border-radius:13px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:10px 12px!important;}
@media(max-width:900px){html body.spx-public .spx-export-head-v128,html body.spx-public .spx-alpha-story-v128,html body.spx-public .spx-footer-shell{grid-template-columns:1fr!important;}html body.spx-public .spx-export-proof-v128,html body.spx-public .spx-export-timeline-v128,html body.spx-public .spx-export-grid-v128,html body.spx-public .spx-price-grid--balanced,html body.spx-public .spx-alpha-narrative-v128,html body.spx-public .spx-footer-columns{grid-template-columns:1fr!important;}html body.spx-public .spx-orbit-modal-grid{grid-template-columns:1fr!important;}html body.spx-public .spx-price-card-v128{min-height:0!important;}html body.spx-public .spx-public-editor-bar--pro{grid-template-columns:1fr!important;bottom:8px!important;}html body.spx-public .spx-footer-bottom{display:grid!important;}}

/* A8.128 mobile repair: stable navigator and non-sticky public flow. */
html body.spx-public .nav-mobile-actions{display:none;}

@media(max-width:1100px){
  html,html body.spx-public{overflow-x:clip!important;}
  html body.spx-public .site-header.spx-nav-v26{
    min-height:74px!important;
    height:74px!important;
    padding:10px 14px!important;
    grid-template-columns:auto 1fr auto!important;
    gap:10px!important;
    align-items:center!important;
    background:rgba(3,7,18,.86)!important;
    border-bottom-color:rgba(218,236,255,.10)!important;
    box-shadow:0 14px 44px rgba(0,0,0,.30)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .brand img{width:34px!important;height:34px!important;border-radius:11px!important;}
  html body.spx-public .site-header.spx-nav-v26 .brand span{font-size:18px!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle{
    display:grid!important;
    place-items:center!important;
    justify-self:end!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    order:3!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:not(.sr-only){
    grid-area:1/1!important;
    margin:0!important;
    width:20px!important;
    transform-origin:center!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(1){transform:translateY(-6px)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(2){transform:translateY(0)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-toggle span:nth-child(3){transform:translateY(6px)!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(1){transform:rotate(45deg)!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(2){opacity:0!important;}
  html body.spx-public .site-header.spx-nav-v26.is-open .nav-toggle span:nth-child(3){transform:rotate(-45deg)!important;}
  html body.spx-public .site-header.spx-nav-v26 .nav-actions{display:none!important;}
  html body.spx-public .site-header.spx-nav-v26 .site-nav{
    position:fixed!important;
    left:14px!important;
    right:14px!important;
    top:84px!important;
    bottom:auto!important;
    width:auto!important;
    max-height:calc(100svh - 98px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start!important;
    justify-content:stretch!important;
    gap:8px!important;
    padding:14px!important;
    border-radius:24px!important;
    border:1px solid rgba(126,231,255,.18)!important;
    background:radial-gradient(circle at 12% 0%,rgba(126,231,255,.14),transparent 34%),linear-gradient(180deg,rgba(7,14,28,.98),rgba(4,8,18,.98))!important;
    box-shadow:0 28px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(0,-10px,0) scale(.985)!important;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s step-end!important;
    z-index:91!important;
  }
  html body.spx-public .site-header.spx-nav-v26.is-open .site-nav{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s step-start!important;
  }
  html body.spx-public.spx-mobile-nav-open{overflow:hidden!important;}
  html body.spx-public .site-header.spx-nav-v26 .site-nav>a,
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a{
    width:100%!important;
    min-height:46px!important;
    justify-content:space-between!important;
    padding:11px 13px!important;
    border-radius:16px!important;
    color:rgba(235,246,255,.86)!important;
    background:rgba(255,255,255,.035)!important;
    border:1px solid rgba(255,255,255,.07)!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .site-nav>a:hover,
  html body.spx-public .site-header.spx-nav-v26 .nav-group>a:hover,
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open>a{
    background:rgba(126,231,255,.10)!important;
    border-color:rgba(126,231,255,.20)!important;
    transform:none!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-menu,
  html body.spx-public .site-header.spx-nav-v26 .nav-group-mega .mega-menu,
  html body.spx-public .site-header.spx-nav-v26 .resources-mega .mega-menu{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    display:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:8px 0 4px!important;
    padding:10px!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    border-radius:20px!important;
    background:rgba(1,6,15,.54)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-group.is-mobile-open>.nav-menu{display:grid!important;}
  html body.spx-public .spx-mega-compact-grid,
  html body.spx-public .spx-resource-list,
  html body.spx-public .spx-mega-secondary-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  html body.spx-public .nav-feature-link,
  html body.spx-public .spx-resource-list a,
  html body.spx-public .spx-mega-secondary-row a{
    min-width:0!important;
    width:100%!important;
  }
  html body.spx-public .nav-mobile-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:4px!important;
  }
  html body.spx-public .nav-mobile-actions .btn{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
  }

  html body.spx-public .spx-home-main .spx-hero-v26[data-hero-scrollstory]{
    min-height:auto!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#020611 0%,#07111f 100%)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-hero-v26-stage{
    position:relative!important;
    min-height:auto!important;
    height:auto!important;
    display:grid!important;
    gap:22px!important;
    padding:104px 18px 38px!important;
    overflow:hidden!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-sky{
    position:relative!important;
    inset:auto!important;
    order:2!important;
    height:clamp(220px,48vw,320px)!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:28px!important;
    border:1px solid rgba(126,231,255,.13)!important;
    background:radial-gradient(circle at 70% 12%,rgba(126,231,255,.18),transparent 40%),rgba(255,255,255,.035)!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-shell{
    position:relative!important;
    order:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:3!important;
    transform:none!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy{
    width:100%!important;
    max-width:680px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-kicker{
    font-size:11px!important;
    letter-spacing:.08em!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1{
    width:100%!important;
    max-width:12ch!important;
    font-size:clamp(42px,12vw,72px)!important;
    line-height:.93!important;
    letter-spacing:-.065em!important;
    margin:14px 0 14px!important;
  }
  html body.spx-public .spx-hero-v26[data-hero-scrollstory] .spx-v26-copy h1::after{margin-top:18px!important;width:58%!important;}
  html body.spx-public .spx-v26-lead,
  html body.spx-public .spx-v26-support{
    max-width:62ch!important;
    font-size:15.5px!important;
    line-height:1.55!important;
  }
  html body.spx-public .spx-v26-support{margin-top:12px!important;}
  html body.spx-public .spx-v26-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:18px!important;
  }
  html body.spx-public .spx-v26-actions .btn{width:100%!important;min-height:48px!important;white-space:normal!important;}
  html body.spx-public .spx-v26-note{font-size:12.5px!important;margin-top:12px!important;}
  html body.spx-public .v26-product-atmosphere{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:min(720px,150vw)!important;
    height:clamp(220px,48vw,320px)!important;
    transform:translate(-50%,-50%)!important;
    opacity:.64!important;
    filter:none!important;
  }
  html body.spx-public .v26-product-layer{display:none!important;}
  html body.spx-public .spx-v26-what-crisp-layer{
    position:relative!important;
    order:3!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:720px!important;
    height:auto!important;
    margin:0 auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
    z-index:4!important;
  }
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-shell,
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-page{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    transform:none!important;
  }
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-view-topbar{display:none!important;}
  html body.spx-public .spx-v26-what-crisp-layer .spx-v26-builder-content-card{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    padding:18px!important;
    border-radius:24px!important;
    transform:none!important;
    overflow:visible!important;
  }
  html body.spx-public .spx-v26-what-console{grid-template-columns:1fr!important;gap:12px!important;}
  html body.spx-public .spx-v26-what-panel{grid-template-columns:1fr!important;}
  html body.spx-public .spx-v26-what-footer{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
  html body.spx-public .spx-v26-explain,
  html body.spx-public .spx-v26-bottom-fade{display:none!important;}

  html body.spx-public #why-spixor.spx-how-v63{
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:42px 18px!important;
    overflow:hidden!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-shell{
    min-height:0!important;
    height:auto!important;
    width:100%!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:22px!important;
    transform:none!important;
    opacity:1!important;
    overflow:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-copy,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-stage{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head{max-height:none!important;opacity:1!important;transform:none!important;margin:0 0 16px!important;}
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-story-head h2{font-size:clamp(32px,9vw,52px)!important;line-height:1!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-nav{display:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step-stack{display:grid!important;gap:12px!important;min-height:0!important;max-height:none!important;}
  html body.spx-public #why-spixor.spx-how-v63 .why52-step,
  html body.spx-public #why-spixor.spx-how-v63 .why52-step:not(.is-active){
    position:relative!important;
    inset:auto!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    min-height:0!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visuals{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    display:grid!important;
    gap:14px!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual:not(.is-active){
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    width:100%!important;
    height:auto!important;
    max-height:360px!important;
    object-fit:cover!important;
    border-radius:22px!important;
    box-shadow:0 18px 52px rgba(0,0,0,.24)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual figcaption{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    margin:-12px 0 0!important;
    padding:16px!important;
    border-radius:20px!important;
    opacity:1!important;
    transform:none!important;
  }

  html body.spx-public #export.spx-export-launch-rework-v128,
  html body.spx-public #pricing.spx-pricing-launch-balanced,
  html body.spx-public #roadmap.spx-alpha-story-v128,
  html body.spx-public .site-footer.spx-footer-v3{
    max-width:calc(100vw - 28px)!important;
    width:calc(100vw - 28px)!important;
    margin:44px auto!important;
    padding:20px!important;
    border-radius:26px!important;
  }
  html body.spx-public .spx-export-head-v128,
  html body.spx-public .spx-export-proof-v128,
  html body.spx-public .spx-export-timeline-v128,
  html body.spx-public .spx-export-grid-v128,
  html body.spx-public .spx-price-grid--balanced,
  html body.spx-public .spx-alpha-story-v128,
  html body.spx-public .spx-alpha-narrative-v128,
  html body.spx-public .spx-footer-shell,
  html body.spx-public .spx-footer-columns{
    grid-template-columns:1fr!important;
  }
  html body.spx-public .spx-export-proof-v128{display:grid!important;}
  html body.spx-public .spx-export-step-v128,
  html body.spx-public .spx-export-card-v128,
  html body.spx-public .spx-price-card-v128{padding:16px!important;border-radius:22px!important;}
  html body.spx-public .spx-price-card-v128{min-height:0!important;}
  html body.spx-public .spx-orbit-modal-v128{align-items:start!important;place-items:start center!important;padding:12px!important;overflow:auto!important;}
  html body.spx-public .spx-orbit-modal-card{
    width:100%!important;
    max-height:calc(100svh - 24px)!important;
    overflow:auto!important;
    padding:18px!important;
    border-radius:24px!important;
  }
  html body.spx-public .spx-orbit-modal-grid,
  html body.spx-public .spx-orbit-modal-actions{grid-template-columns:1fr!important;display:grid!important;}
  html body.spx-public .spx-orbit-modal-actions .btn{width:100%!important;}
  html body.spx-public .spx-public-editor-bar,
  html body.spx-public .spx-public-editor-bar--pro{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    width:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
  }
  html body.spx-public .spx-public-editor-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;}
  html body.spx-public .spx-public-media-drawer{
    left:8px!important;
    right:8px!important;
    bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-height:calc(100svh - 132px)!important;
  }
}

@media(min-width:1101px){
  html body.spx-public .site-header.spx-nav-v26 .nav-group > .nav-menu{
    transition:opacity .2s ease,transform .2s ease!important;
  }
  html body.spx-public .site-header.spx-nav-v26 .nav-group:hover > .nav-menu,
  html body.spx-public .site-header.spx-nav-v26 .nav-group:focus-within > .nav-menu{
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate(-50%,0)!important;
  }
}

@media(max-width:1100px){
  html body.spx-public header.site-header.spx-nav-v26 nav.site-nav[data-site-nav]{
    left:14px!important;
    right:auto!important;
    width:calc(100vw - 28px)!important;
    min-width:0!important;
    max-width:calc(100vw - 28px)!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-track,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-track{
    min-height:0!important;
    height:auto!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .spx-why52-sticky,
  html body.spx-public #why-spixor.spx-how-v63 .spx-why52-sticky{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    height:auto!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    padding:0!important;
    grid-template-columns:1fr!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual{
    position:relative!important;
    inset:auto!important;
    min-height:0!important;
    height:auto!important;
    opacity:1!important;
    transform:none!important;
  }
  html body.spx-public #why-spixor.spx-how-v63[data-a115-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63[data-a114-how="1"] .why52-visual img,
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual img{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-height:320px!important;
  }
}

/* A8.125 — Login email 2FA step + deployment-safe panel styling */
html body.spx-public .spx-login-2fa-panel[hidden],
html body.spx-public [data-login-primary-fields][hidden]{display:none!important}
html body.spx-public .spx-login-2fa-panel{display:grid!important;gap:12px!important;padding:16px!important;border-radius:22px!important;border:1px solid rgba(107,232,255,.20)!important;background:radial-gradient(420px 180px at 0% 0%,rgba(34,211,238,.13),transparent 64%),rgba(255,255,255,.045)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}
html body.spx-public .spx-login-2fa-panel .spx-login-2fa-kicker{display:inline-flex!important;align-items:center!important;width:max-content!important;padding:7px 10px!important;border-radius:999px!important;border:1px solid rgba(107,232,255,.20)!important;background:rgba(34,211,238,.08)!important;color:#9eeeff!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase!important;letter-spacing:.11em!important}
html body.spx-public .spx-login-2fa-panel strong{color:var(--text)!important;font-size:18px!important;line-height:1.25!important}
html body.spx-public .spx-login-2fa-panel p{margin:0!important;color:var(--secondary)!important;line-height:1.55!important}
html body.spx-public .spx-login-2fa-panel input[data-login-2fa-code]{text-align:center!important;font-size:24px!important;font-weight:950!important;letter-spacing:.28em!important;font-variant-numeric:tabular-nums!important;padding-left:calc(14px + .28em)!important}
html body.spx-public .spx-login-2fa-back{appearance:none!important;border:0!important;background:transparent!important;color:var(--secondary)!important;width:max-content!important;padding:0!important;font-weight:900!important;text-decoration:none!important;cursor:pointer!important}
html body.spx-public .spx-login-2fa-back:hover{color:var(--spx-a860-cyan,var(--cyan))!important;text-decoration:underline!important}

/* A8.124.1 — route-safe How cards: keep right-side explanation blocks styled even after older override layers. */
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
  position:absolute!important;
  left:clamp(18px,3.2vw,56px)!important;
  right:auto!important;
  bottom:clamp(18px,4vh,46px)!important;
  z-index:30!important;
  display:grid!important;
  gap:7px!important;
  width:min(390px,calc(100% - 46px))!important;
  max-width:min(390px,calc(100% - 46px))!important;
  margin:0!important;
  padding:18px 20px!important;
  border-radius:22px!important;
  color:#f4fbff!important;
  background:
    linear-gradient(135deg,rgba(9,17,34,.88),rgba(4,10,22,.74))!important;
  border:1px solid rgba(126,236,255,.24)!important;
  box-shadow:
    0 24px 76px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(12,24,48,.20)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.12)!important;
  backdrop-filter:blur(16px) saturate(1.12)!important;
  overflow:hidden!important;
  opacity:.98!important;
  transform:translate3d(0,0,0)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(220px 120px at 18% 0%,rgba(34,211,238,.18),transparent 68%),
    linear-gradient(90deg,rgba(34,211,238,.22),transparent 58%)!important;
  opacity:.72!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  bottom:16px!important;
  width:3px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(34,211,238,.95),rgba(99,102,241,.42))!important;
  box-shadow:0 0 22px rgba(34,211,238,.38)!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-kicker{
  position:relative!important;
  z-index:1!important;
  display:inline-flex!important;
  width:max-content!important;
  max-width:100%!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(126,236,255,.22)!important;
  background:rgba(34,211,238,.08)!important;
  color:#9eeeff!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card b{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#f7fcff!important;
  font-size:clamp(17px,1.35vw,22px)!important;
  line-height:1.15!important;
  letter-spacing:-.035em!important;
}
html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card p{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  color:rgba(228,241,255,.76)!important;
  font-size:clamp(13px,1vw,15px)!important;
  line-height:1.52!important;
}
@media(max-width:980px){
  html body.spx-public #why-spixor.spx-how-v63 .why52-visual-card{
    position:relative!important;
    left:auto!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:12px 0 0!important;
    padding:16px!important;
    border-radius:18px!important;
  }
}