/* ===== hx: dense & immersive hero deck. Every rule scoped to .hx (see tests/hero-check.php) ===== */
/* 88px = sticky .site-header height from app.css */
.hx{position:relative;height:calc(100svh - 88px);min-height:600px;overflow:hidden;background:#04060d;color:#fff;isolation:isolate;
  --hx-pad:clamp(18px,4vw,72px);--hx-glass:rgba(255,255,255,.06);--hx-edge:rgba(255,255,255,.14);
  font-family:'Onest',system-ui,sans-serif}
.hx *{box-sizing:border-box}
.hx-stage{position:absolute;inset:0;perspective:1600px;transform-style:preserve-3d}
.hx-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;display:flex}
.hx-slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.hx-slide h2{max-width:100%;margin:0;padding-bottom:.06em;font-weight:800;line-height:.98;letter-spacing:-.04em;overflow-wrap:break-word;text-wrap:balance}
.hx-slide p{margin:0}
.hx-slide a{color:inherit;text-decoration:none}
.hx b,.hx strong{font-weight:700}

/* ---- shared texture / depth primitives ---- */
.hx-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>")}
.hx-mesh-bg{position:absolute;inset:-30%;z-index:0;filter:blur(64px);opacity:.85}
.hx-mesh-bg i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.hx-gridlines{position:absolute;inset:0;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,transparent 100%)}
.hx-vign{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(110% 85% at 50% 45%,transparent 40%,rgba(0,0,0,.72) 100%)}
.hx-glass{background:var(--hx-glass);border:1px solid var(--hx-edge);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16)}
.hx-glow{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}
.hx-eyebrow{display:inline-flex;align-items:center;gap:.7em;font:600 clamp(10px,.72vw,12px)/1 'Space Grotesk',ui-monospace,monospace;letter-spacing:.36em;text-transform:uppercase}
.hx-eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.6}
/* `.hx-slide a{color:inherit}` outranks a single class, so the CTA keeps the slide scope */
.hx-slide .hx-cta{display:inline-flex;align-items:center;gap:.55em;padding:13px 22px;border-radius:999px;font:600 14px/1 'Onest',system-ui,sans-serif;background:#fff;color:#07101f;transition:transform .3s,box-shadow .3s}
.hx-slide .hx-cta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(255,255,255,.22)}
.hx-slide .hx-cta-ghost{background:transparent;color:#fff;border:1px solid var(--hx-edge)}
.hx-slide .hx-cta-ghost:hover{box-shadow:0 16px 40px rgba(0,0,0,.4)}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hx-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hx-chip{padding:7px 13px;border-radius:999px;font:600 11px/1 'Space Grotesk',monospace;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.07);border:1px solid var(--hx-edge)}
.hx-kpi{display:flex;gap:clamp(16px,2.4vw,40px);margin-top:26px}
.hx-kpi div{display:flex;flex-direction:column;gap:6px}
.hx-kpi b{font:800 clamp(20px,2vw,32px)/1 'Onest',sans-serif;letter-spacing:-.03em}
.hx-kpi span{font:500 10px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
@keyframes hx-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@keyframes hx-dash{to{stroke-dashoffset:-260}}
@keyframes hx-spin{to{transform:rotate(360deg)}}

/* ---- navigation / chrome ---- */
.hx-nav{position:absolute;right:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:3px}
.hx-nav button{position:relative;appearance:none;background:none;border:0;cursor:pointer;padding:5px 9px;font:600 11px/1 'Space Grotesk',ui-monospace,monospace;letter-spacing:.14em;color:currentColor;opacity:.4;transition:opacity .35s,transform .35s;transform-origin:right center}
.hx-nav button:hover{opacity:.85}
.hx-nav button.is-active{opacity:1;transform:scale(1.6)}
.hx-nav button::after{content:'';display:block;height:1px;margin-top:4px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s}
.hx-nav button.is-active::after{transform:scaleX(1)}
.hx-arrows{position:absolute;left:var(--hx-pad);bottom:clamp(14px,2.4vw,30px);z-index:60;display:flex;gap:8px}
.hx-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid currentColor;background:rgba(0,0,0,.2);backdrop-filter:blur(10px);color:currentColor;opacity:.55;cursor:pointer;font-size:15px;line-height:1;transition:opacity .3s,transform .3s}
.hx-arrows button:hover{opacity:1;transform:translateY(-2px)}
.hx-progress{position:absolute;left:0;top:0;height:2px;width:100%;z-index:61;background:rgba(255,255,255,.1)}
.hx-progress i{display:block;height:100%;width:0;background:var(--hx-progress-gradient,linear-gradient(90deg,#22d3ee,#60a5fa,#a78bfa));box-shadow:0 0 12px color-mix(in srgb,var(--hx-progress-glow,#60a5fa) 75%,transparent),0 0 22px color-mix(in srgb,var(--hx-progress-glow,#a78bfa) 35%,transparent)}
.hx-mask{position:absolute;inset:0;z-index:55;pointer-events:none;opacity:0;background:#0b1020}
.hx-mask::after{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(255,255,255,.22),transparent 70%)}
.hx :focus-visible{outline:2px solid #6ea8ff;outline-offset:3px}
.hx.is-light .hx-nav,.hx.is-light .hx-arrows{color:#0a0a0a}
.hx.is-light .hx-progress{background:rgba(0,0,0,.12)}
.hx.is-light .hx-progress i{background:#0a0a0a}
.hx.is-invert .hx-nav,.hx.is-invert .hx-arrows{mix-blend-mode:difference;color:#fff}

/* =========================================================
   01 THE TECH HUB — full-screen SaaS control room
   ========================================================= */
.hx-s1{background:radial-gradient(120% 100% at 78% 10%,#123064,#050a17 55%,#03050d)}
.hx-s1 .hx-hud{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);gap:10px;padding:var(--hx-pad)}
.hx-s1 .hx-panel{position:relative;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.hx-s1 .hx-panel h4{margin:0;font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.24em;text-transform:uppercase;color:#8fb6ff;display:flex;justify-content:space-between;align-items:center}
.hx-s1 .hx-live{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 12px #34d399;animation:hx-pulse 1.8s infinite}
.hx-s1 .hx-copy{grid-column:1/7;grid-row:3/7;display:flex;flex-direction:column;justify-content:center;min-width:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.hx-s1 .hx-copy h2{max-width:100%;font-size:clamp(34px,min(5.2vw,9.5vh),88px);background:linear-gradient(100deg,#fff,#9ec7ff 60%,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-s1 .hx-copy .hx-lead{margin-top:18px;max-width:46ch;font-size:clamp(13px,1.02vw,16px);line-height:1.65;color:#a9bedd}
.hx-s1 .hx-p-chart{grid-column:7/13;grid-row:1/4}
.hx-s1 .hx-p-term{grid-column:7/11;grid-row:4/9}
.hx-s1 .hx-p-stats{grid-column:11/13;grid-row:4/7;justify-content:space-between}
.hx-s1 .hx-p-ring{grid-column:11/13;grid-row:7/9;align-items:center;justify-content:center;flex-direction:row;gap:14px}
.hx-s1 .hx-p-log{grid-column:1/7;grid-row:7/9}
.hx-s1 .hx-p-top{grid-column:1/7;grid-row:1/3}
.hx-s1 svg.hx-spark{width:100%;flex:1;overflow:visible}
.hx-s1 svg.hx-spark path{fill:none;stroke:url(#hxSpark);stroke-width:2.2;stroke-linecap:round}
.hx-s1 svg.hx-spark .hx-area{fill:url(#hxSparkFill);stroke:none}
.hx-s1 .hx-bars{display:flex;align-items:flex-end;gap:5px;height:100%;min-height:54px}
.hx-s1 .hx-bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#60a5fa,#1e3a8a)}
.hx-s1 .hx-term{font:12px/1.75 ui-monospace,'Space Grotesk',monospace;color:#7ee7bd;overflow:hidden;flex:1}
.hx-s1 .hx-term span{display:block;white-space:nowrap}
.hx-s1 .hx-term span em{color:#8fb6ff;font-style:normal}
.hx-s1 .hx-term span b{color:#fbbf24;font-weight:400}
.hx-s1 .hx-stat b{font:800 clamp(18px,1.8vw,30px)/1 'Onest',sans-serif;display:block}
.hx-s1 .hx-stat small{font:500 9px/1 'Space Grotesk',monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.hx-s1 .hx-ring{width:62px;height:62px;border-radius:50%;background:conic-gradient(#5eead4 0 var(--hx-deg,306deg),rgba(255,255,255,.09) 0);display:grid;place-items:center;flex:none}
.hx-s1 .hx-ring::after{content:'99.9%';width:46px;height:46px;border-radius:50%;background:#081226;display:grid;place-items:center;font:700 11px/1 'Space Grotesk',monospace}
.hx-s1 .hx-log{display:flex;flex-direction:column;gap:7px;overflow:hidden}
.hx-s1 .hx-log div{display:flex;align-items:center;gap:10px;font:500 11px/1 'Space Grotesk',monospace;letter-spacing:.06em;color:#9fb4d4}
.hx-s1 .hx-log i{width:6px;height:6px;border-radius:50%;background:#60a5fa;flex:none}
.hx-s1 .hx-log b{margin-left:auto;color:#34d399;font-weight:500}
.hx-s1 .hx-float{position:absolute;z-index:4;padding:12px 15px;font:11px/1.7 ui-monospace,monospace;color:#cfe0ff;pointer-events:none}
.hx-s1 .hx-f1{left:34%;top:14%}
.hx-s1 .hx-f2{left:46%;bottom:9%}

/* =========================================================
   02 3D ISOMETRIC STACK
   ========================================================= */
.hx-s2{background:radial-gradient(100% 100% at 50% 0%,#1b1440,#070517 60%,#04030c)}
.hx-s2 .hx-iso{position:absolute;left:50%;top:52%;z-index:3;width:min(760px,72vw);height:min(560px,60vh);transform:translate(-50%,-50%);transform-style:preserve-3d;perspective:1600px}
.hx-s2 .hx-layer{position:absolute;left:50%;top:50%;width:min(460px,46vw);height:min(230px,24vw);margin:-115px 0 0 -230px;border-radius:16px;
  transform:rotateX(58deg) rotateZ(-45deg) translateZ(var(--z,0px));transform-style:preserve-3d;
  background:linear-gradient(135deg,rgba(129,140,248,.22),rgba(56,189,248,.1));border:1px solid rgba(160,190,255,.4);
  box-shadow:0 0 60px rgba(99,102,241,.35),inset 0 0 40px rgba(56,189,248,.14);backdrop-filter:blur(6px)}
.hx-s2 .hx-layer::before{content:attr(data-label);position:absolute;left:18px;top:14px;font:600 11px/1 'Space Grotesk',monospace;letter-spacing:.24em;text-transform:uppercase;color:#c7d2fe}
.hx-s2 .hx-layer::after{content:'';position:absolute;inset:14px 14px 14px 14px;top:40px;border-radius:8px;
  background-image:linear-gradient(rgba(199,210,254,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(199,210,254,.16) 1px,transparent 1px);background-size:22px 22px}
.hx-s2 .hx-l1{--z:-150px}.hx-s2 .hx-l2{--z:-50px}.hx-s2 .hx-l3{--z:50px}.hx-s2 .hx-l4{--z:150px}
.hx-s2 .hx-node{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:#a5f3fc;box-shadow:0 0 16px #22d3ee;transform:rotateX(58deg) rotateZ(-45deg) translate3d(var(--nx,0),var(--ny,0),var(--nz,0));animation:hx-pulse 2.6s infinite}
.hx-s2 svg.hx-wires{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.hx-s2 svg.hx-wires path{fill:none;stroke:url(#hxWire);stroke-width:1.6;stroke-dasharray:6 10;animation:hx-dash 4s linear infinite}
.hx-s2 .hx-copy{position:absolute;left:var(--hx-pad);top:50%;transform:translateY(-50%);z-index:5;max-width:min(430px,38vw)}
.hx-s2 .hx-copy h2{font-size:clamp(30px,4.2vw,70px);color:#f2f4ff}
.hx-s2 .hx-copy .hx-lead{margin-top:16px;font-size:clamp(13px,1vw,16px);line-height:1.65;color:#b6b8d8}
.hx-s2 .hx-eyebrow{color:#a5b4fc}
.hx-s2 .hx-side{position:absolute;right:calc(var(--hx-pad) + 46px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:10px;width:min(230px,24vw)}
.hx-s2 .hx-side div{padding:13px 15px;display:flex;justify-content:space-between;align-items:center;font:500 11px/1 'Space Grotesk',monospace;letter-spacing:.12em;text-transform:uppercase;color:#dbe1ff}
.hx-s2 .hx-side b{color:#67e8f9}

/* =========================================================
   03 HOLOGRAPHIC CORE — CSS 3D architecture, radar rings, floating labels
   ========================================================= */
.hx-s3{background:radial-gradient(80% 90% at 50% 48%,#171044,#08051a 55%,#03030b);perspective:1000px}
.hx-s3::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(91,216,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(91,216,255,.06) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(72% 82% at 50% 48%,#000,transparent 92%)}
.hx-s3 .hx-core-scene{position:absolute;left:50%;top:50%;z-index:4;width:min(620px,58vw);height:min(620px,68vh);transform:translate(-50%,-50%);transform-style:preserve-3d;pointer-events:none}
.hx-s3 .hx-core-axis{position:absolute;inset:0;transform-style:preserve-3d}
.hx-s3 .hx-core-orb{position:absolute;left:50%;top:50%;width:min(220px,22vw);height:min(220px,25vh);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 36% 30%,#d7fbff 0 3%,#4de9ff 9%,#7c3aed 38%,transparent 69%);filter:saturate(150%);box-shadow:0 0 24px #4de9ff,0 0 100px rgba(124,58,237,.85),inset -22px -18px 34px rgba(0,0,0,.55);mix-blend-mode:screen}
.hx-s3 .hx-core-orb::before{content:'';position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(215,251,255,.75);box-shadow:inset 0 0 24px #4de9ff}
.hx-s3 .hx-core-orb::after{content:'CORE / ACTIVE';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.23em;color:#e5fbff;white-space:nowrap;text-shadow:0 0 14px #4de9ff}
.hx-s3 .hx-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(77,233,255,.62);border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg);box-shadow:0 0 18px rgba(77,233,255,.22),inset 0 0 18px rgba(124,58,237,.16)}
.hx-s3 .hx-ring::before,.hx-s3 .hx-ring::after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:#d7fbff;box-shadow:0 0 15px #4de9ff}
.hx-s3 .hx-ring::before{left:8%;top:-4px}.hx-s3 .hx-ring::after{right:16%;bottom:-4px;background:#c4b5fd;box-shadow:0 0 15px #8b5cf6}
.hx-s3 .hx-r1{width:76%;height:42%;transform:translate(-50%,-50%) rotateX(66deg) rotateZ(14deg)}
.hx-s3 .hx-r2{width:92%;height:55%;transform:translate(-50%,-50%) rotateX(70deg) rotateZ(-28deg);border-color:rgba(139,92,246,.62)}
.hx-s3 .hx-r3{width:64%;height:92%;transform:translate(-50%,-50%) rotateY(68deg) rotateZ(18deg);border-color:rgba(77,233,255,.48)}
.hx-s3 .hx-r4{width:108%;height:72%;transform:translate(-50%,-50%) rotateX(76deg) rotateZ(58deg);border-style:dashed;border-color:rgba(196,181,253,.46)}
.hx-s3 .hx-radar{position:absolute;left:50%;top:50%;width:116%;height:116%;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,transparent 0 76%,rgba(77,233,255,.26) 81%,transparent 88%);mask-image:radial-gradient(transparent 0 48%,#000 49% 50%,transparent 51%)}
.hx-s3 .hx-data{position:absolute;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.18em;text-transform:uppercase;color:#9befff;text-shadow:0 0 12px #4de9ff;white-space:nowrap}
.hx-s3 .hx-d1{left:4%;top:14%}.hx-s3 .hx-d2{right:2%;top:26%;color:#c4b5fd;text-shadow:0 0 12px #8b5cf6}.hx-s3 .hx-d3{left:0;bottom:18%}.hx-s3 .hx-d4{right:3%;bottom:11%;color:#c4b5fd;text-shadow:0 0 12px #8b5cf6}
.hx-s3 .hx-core-copy{position:absolute;left:var(--hx-pad);bottom:12%;z-index:2;max-width:min(410px,36vw);opacity:.65}
.hx-s3 .hx-core-copy h2{font-size:clamp(30px,4vw,68px);color:rgba(238,246,255,.54);text-shadow:0 0 32px rgba(77,233,255,.25)}
.hx-s3 .hx-core-copy .hx-lead{margin-top:15px;font-size:clamp(12px,1vw,16px);line-height:1.65;color:#9aa6d0}
.hx-s3 .hx-eyebrow{color:#4de9ff}
.hx-s3 .hx-label{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:10px;background:rgba(8,6,29,.52);border:1px solid rgba(77,233,255,.32);backdrop-filter:blur(12px);font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.14em;text-transform:uppercase;color:#d9faff;white-space:nowrap}
.hx-s3 .hx-label::before{content:'';width:7px;height:7px;border-radius:50%;background:#4de9ff;box-shadow:0 0 12px #4de9ff;animation:hx-pulse 1.8s infinite}
.hx-s3 .hx-label::after{content:'';position:absolute;width:clamp(28px,4vw,70px);height:1px;background:linear-gradient(90deg,#4de9ff,transparent);opacity:.8}
.hx-s3 .hx-l1{left:7%;top:24%}.hx-s3 .hx-l1::after{right:-70px;top:50%;transform:rotate(16deg);transform-origin:left}
.hx-s3 .hx-l2{right:9%;top:18%;color:#eee7ff;border-color:rgba(196,181,253,.36)}.hx-s3 .hx-l2::before{background:#a78bfa;box-shadow:0 0 12px #8b5cf6}.hx-s3 .hx-l2::after{left:-70px;top:50%;transform:rotate(154deg);transform-origin:right;background:linear-gradient(90deg,transparent,#a78bfa)}
.hx-s3 .hx-l3{left:10%;bottom:22%}.hx-s3 .hx-l3::after{right:-70px;top:50%;transform:rotate(-12deg);transform-origin:left}
.hx-s3 .hx-l4{right:7%;bottom:29%;color:#eee7ff;border-color:rgba(196,181,253,.36)}.hx-s3 .hx-l4::before{background:#a78bfa;box-shadow:0 0 12px #8b5cf6}.hx-s3 .hx-l4::after{left:-70px;top:50%;transform:rotate(192deg);transform-origin:right;background:linear-gradient(90deg,transparent,#a78bfa)}

/* =========================================================
   04 THE NEURAL NETWORK — canvas graph (150 nodes), mouse repel + glow
   ========================================================= */
.hx-s4{background:radial-gradient(95% 95% at 32% 48%,#0b1f3d,#03060f 72%)}
.hx-s4 canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.hx-s4 .hx-ui{position:relative;z-index:4;width:100%;height:100%;padding:var(--hx-pad);display:grid;
  grid-template-columns:minmax(300px,38%) 1fr auto;grid-template-rows:auto 1fr auto;gap:clamp(10px,1.4vw,22px);align-items:center}
.hx-s4 .hx-brain{grid-column:1;grid-row:2;padding:clamp(20px,2.2vw,34px);border-radius:26px;
  background:rgba(8,18,38,.42);border:1px solid rgba(148,197,255,.24);backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.hx-s4 .hx-brain h2{font-size:clamp(28px,3.6vw,62px);background:linear-gradient(100deg,#e0f2fe,#5eead4 48%,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-s4 .hx-brain .hx-lead{margin-top:16px;font-size:clamp(12px,.98vw,16px);line-height:1.68;color:#a8c0dd}
.hx-s4 .hx-eyebrow{color:#5eead4}
.hx-s4 .hx-readout{grid-column:3;grid-row:1;display:flex;gap:8px}
.hx-s4 .hx-readout div{padding:11px 15px;border-radius:14px;min-width:96px;background:rgba(6,16,34,.5);border:1px solid rgba(148,197,255,.22);backdrop-filter:blur(14px)}
.hx-s4 .hx-readout small{display:block;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;color:#6f93bd}
.hx-s4 .hx-readout b{display:block;margin-top:7px;font:800 clamp(15px,1.4vw,22px)/1 'Onest',sans-serif;color:#dbeafe}
.hx-s4 .hx-rail{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:6px;width:min(210px,22vw)}
.hx-s4 .hx-rail div{position:relative;padding:11px 14px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;
  background:rgba(6,16,34,.46);border:1px solid rgba(148,197,255,.18);backdrop-filter:blur(12px);
  font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.18em;text-transform:uppercase;color:#9dbede}
.hx-s4 .hx-rail div::before{content:'';position:absolute;left:-14px;top:50%;width:14px;height:1px;background:rgba(148,197,255,.4)}
.hx-s4 .hx-rail b{color:#5eead4;font-weight:700}
.hx-s4 .hx-rail .hx-hot{border-color:rgba(94,234,212,.5);box-shadow:0 0 26px rgba(94,234,212,.22)}
.hx-s4 .hx-legend{grid-column:1/3;grid-row:3;display:flex;flex-wrap:wrap;gap:8px;align-self:end}
.hx-s4 .hx-legend span{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:rgba(6,16,34,.5);border:1px solid rgba(148,197,255,.2);backdrop-filter:blur(12px);
  font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.18em;text-transform:uppercase;color:#a9c6e4}
.hx-s4 .hx-legend i{width:7px;height:7px;border-radius:50%;background:var(--d,#5eead4);box-shadow:0 0 10px var(--d,#5eead4)}
.hx-s4 .hx-matrix{grid-column:2;grid-row:1;display:flex;gap:3px;align-self:start;justify-self:center;flex-wrap:wrap;width:min(260px,26vw)}
.hx-s4 .hx-matrix i{width:11px;height:11px;border-radius:2px;background:rgba(94,234,212,.16)}

/* =========================================================
   05 MULTI-LAYERED SOFTWARE SHOWCASE
   ========================================================= */
.hx-s5{background:linear-gradient(160deg,#0d1b3e,#070d20 50%,#140b26)}
.hx-s5 .hx-scene{position:absolute;inset:0;z-index:3;perspective:1500px}
.hx-s5 .hx-dev{position:absolute;transform-style:preserve-3d;overflow:hidden;padding:0}
.hx-s5 .hx-bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.08);border-bottom:1px solid var(--hx-edge)}
.hx-s5 .hx-bar i{width:8px;height:8px;border-radius:50%;background:#ef4444}
.hx-s5 .hx-bar i:nth-child(2){background:#f59e0b}.hx-s5 .hx-bar i:nth-child(3){background:#22c55e}
.hx-s5 .hx-bar span{margin-left:10px;font:500 10px/1 'Space Grotesk',monospace;letter-spacing:.14em;color:#9fb4d4;text-transform:uppercase}
.hx-s5 .hx-screen{position:relative;height:calc(100% - 26px);padding:14px;display:flex;flex-direction:column;gap:9px;background:linear-gradient(150deg,rgba(37,99,235,.24),rgba(6,12,30,.7))}
.hx-s5 .hx-skel{height:9px;border-radius:5px;background:rgba(255,255,255,.16)}
.hx-s5 .hx-skel.w70{width:70%}.hx-s5 .hx-skel.w45{width:45%}.hx-s5 .hx-skel.w90{width:90%}
.hx-s5 .hx-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.hx-s5 .hx-tiles i{border-radius:8px;background:linear-gradient(150deg,rgba(125,211,252,.3),rgba(99,102,241,.16));border:1px solid rgba(255,255,255,.12)}
.hx-s5 .hx-mac{left:34%;top:16%;width:min(48vw,620px);height:min(42vh,360px);transform:rotateY(-14deg) rotateX(6deg)}
.hx-s5 .hx-tab{left:9%;bottom:12%;width:min(24vw,290px);height:min(46vh,380px);transform:rotateY(16deg) rotateX(4deg)}
.hx-s5 .hx-phone{right:12%;bottom:8%;width:min(15vw,190px);height:min(48vh,390px);border-radius:30px;transform:rotateY(-18deg)}
.hx-s5 .hx-phone .hx-bar{justify-content:center;background:transparent;border:0}
.hx-s5 .hx-phone .hx-bar::after{content:'';width:64px;height:6px;border-radius:99px;background:rgba(255,255,255,.35)}
.hx-s5 .hx-phone .hx-bar i,.hx-s5 .hx-phone .hx-bar span{display:none}
.hx-s5 .hx-note{position:absolute;z-index:6;padding:11px 15px;border-radius:14px;font:600 11px/1.5 'Space Grotesk',monospace;letter-spacing:.1em;text-transform:uppercase;color:#dbeafe;white-space:nowrap}
.hx-s5 .hx-note::before{content:'';position:absolute;left:-26px;top:50%;width:26px;height:1px;background:rgba(255,255,255,.4)}
.hx-s5 .hx-n1{left:63%;top:12%}.hx-s5 .hx-n2{left:26%;bottom:38%}.hx-s5 .hx-n3{right:30%;bottom:14%}
.hx-s5 .hx-copy{position:absolute;left:var(--hx-pad);top:14%;z-index:7;max-width:min(400px,34vw)}
.hx-s5 .hx-copy h2{font-size:clamp(28px,3.8vw,64px)}
.hx-s5 .hx-copy .hx-lead{margin-top:14px;font-size:clamp(12px,.95vw,15px);line-height:1.65;color:#a9bedd}
.hx-s5 .hx-eyebrow{color:#7dd3fc}

/* =========================================================
   06 THE ALGORITHM STREAM — code tunnel rushing at the viewer
   ========================================================= */
.hx-s6{background:radial-gradient(60% 60% at 50% 50%,#0a1a3c,#010409 74%)}
.hx-s6 canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%}
.hx-s6 .hx-tunnel{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);pointer-events:none}
.hx-s6 .hx-tunnel i{position:absolute;left:50%;top:50%;border:1px solid rgba(96,165,250,.22);border-radius:22px;transform:translate(-50%,-50%)}
.hx-s6 .hx-core{position:absolute;left:50%;top:50%;z-index:2;width:min(30vmin,260px);height:min(30vmin,260px);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(147,197,253,.35),transparent 66%);filter:blur(26px)}
.hx-s6 .hx-copy{position:relative;z-index:5;margin:auto;width:100%;padding:0 var(--hx-pad);text-align:center}
.hx-s6 h2{font-size:clamp(44px,10.5vw,190px);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.4px rgba(191,219,254,.85);text-transform:uppercase;
  filter:drop-shadow(0 0 34px rgba(59,130,246,.5))}
.hx-s6 .hx-ms{display:block;margin-top:-.06em;font:800 clamp(56px,13vw,240px)/1 'Onest',sans-serif;letter-spacing:-.06em;
  background:linear-gradient(100deg,#bfdbfe,#5eead4 46%,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-s6 .hx-ms sup{font-size:.24em;letter-spacing:.1em;vertical-align:super;-webkit-text-fill-color:#93c5fd}
.hx-s6 .hx-sub{margin-top:10px;font:600 clamp(11px,1.15vw,20px)/1.3 'Space Grotesk',monospace;letter-spacing:.44em;text-transform:uppercase;color:#93c5fd}
.hx-s6 .hx-lead{margin:18px auto 0;max-width:56ch;font-size:clamp(12px,1vw,16px);line-height:1.7;color:#93a9c9}
.hx-s6 .hx-actions{justify-content:center}
.hx-s6 .hx-hud{position:absolute;left:var(--hx-pad);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:8px;width:min(210px,22vw)}
.hx-s6 .hx-hud div{padding:12px 14px;border-radius:14px;background:rgba(4,12,30,.5);border:1px solid rgba(96,165,250,.22);backdrop-filter:blur(14px)}
.hx-s6 .hx-hud small{display:block;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;color:#6a8cb8}
.hx-s6 .hx-hud b{display:block;margin-top:6px;font:800 clamp(15px,1.4vw,24px)/1 'Onest',sans-serif;color:#e0ecff}
.hx-s6 .hx-hud .hx-meter{margin-top:9px;height:4px;border-radius:2px;background:rgba(148,197,255,.16);overflow:hidden}
.hx-s6 .hx-hud .hx-meter i{display:block;height:100%;width:60%;background:linear-gradient(90deg,#60a5fa,#5eead4)}
.hx-s6 .hx-warp{position:absolute;right:var(--hx-pad);top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.hx-s6 .hx-warp span{font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.24em;text-transform:uppercase;color:#4d6d99}
.hx-s6 .hx-warp span.is-on{color:#5eead4;text-shadow:0 0 14px rgba(94,234,212,.7)}
.hx-s6 .hx-ticker{position:absolute;left:0;right:0;bottom:0;z-index:6;height:44px;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(147,197,253,.2);background:rgba(2,10,28,.6);backdrop-filter:blur(10px)}
.hx-s6 .hx-ticker div{display:flex;white-space:nowrap;gap:38px;font:500 11px/1 'Space Grotesk',monospace;letter-spacing:.2em;text-transform:uppercase;color:#9fc6f5;padding-right:38px}
.hx-s6 .hx-ticker em{color:#5eead4;font-style:normal}

/* =========================================================
   07 CYBER-INDUSTRIAL
   ========================================================= */
.hx-s7{background:linear-gradient(115deg,#14171c,#0a0c10 45%,#1a1206)}
.hx-s7 .hx-plate{position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.4) 0 1px,transparent 1px 7px)}
.hx-s7 .hx-hazard{position:absolute;left:0;right:0;height:16px;z-index:4;background:repeating-linear-gradient(45deg,#f97316 0 14px,#0a0c10 14px 28px);opacity:.85}
.hx-s7 .hx-hazard-top{top:0}.hx-s7 .hx-hazard-bot{bottom:0}
.hx-s7 .hx-body{position:relative;z-index:5;margin:auto;width:100%;padding:0 var(--hx-pad);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,56px);align-items:center}
.hx-s7 h2{font-family:'Space Grotesk','Onest',sans-serif;font-size:clamp(32px,5.6vw,102px);color:#f5f3ef;text-transform:uppercase;text-shadow:0 22px 44px rgba(0,0,0,.8)}
.hx-s7 h2 em{font-style:normal;color:#f97316}
.hx-s7 .hx-lead{margin-top:18px;max-width:44ch;font-size:clamp(13px,1vw,16px);line-height:1.65;color:#a8a29e}
.hx-s7 .hx-eyebrow{color:#f97316}
.hx-s7 .hx-gauges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hx-s7 .hx-gauge{padding:16px;border-radius:14px;background:linear-gradient(150deg,#1c1f26,#0d1014);border:1px solid #2b3038;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.6)}
.hx-s7 .hx-gauge small{display:block;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.24em;text-transform:uppercase;color:#78716c}
.hx-s7 .hx-gauge b{display:block;margin-top:8px;font:800 clamp(18px,1.9vw,30px)/1 'Onest',sans-serif;color:#fafaf9}
 .hx-s7 .hx-meter{display:block;margin-top:10px;height:5px;border-radius:3px;background:#22262e;overflow:hidden}
.hx-s7 .hx-meter i{display:block;height:100%;width:var(--v,70%);background:linear-gradient(90deg,#f97316,#38bdf8)}
.hx-s7 .hx-rivets{position:absolute;inset:26px;z-index:4;pointer-events:none;border:1px solid rgba(255,255,255,.07);border-radius:8px}
.hx-s7 .hx-rivets i{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#6b7280,#1f2328)}
.hx-s7 .hx-rivets i:nth-child(1){left:-3px;top:-3px}.hx-s7 .hx-rivets i:nth-child(2){right:-3px;top:-3px}
.hx-s7 .hx-rivets i:nth-child(3){left:-3px;bottom:-3px}.hx-s7 .hx-rivets i:nth-child(4){right:-3px;bottom:-3px}
.hx-s7 .hx-scanline{position:absolute;left:0;right:0;height:2px;z-index:6;background:linear-gradient(90deg,transparent,#f97316,transparent);opacity:.55}

/* =========================================================
   08 INFINITE SCROLL 3D GALLERY
   ========================================================= */
.hx-s8{background:radial-gradient(80% 80% at 50% 46%,#1a2246,#05060f 68%)}
.hx-s8 .hx-ring3d{position:absolute;left:50%;top:50%;z-index:3;width:min(300px,26vw);height:min(370px,44vh);margin:0;transform:translate(-50%,-50%);transform-style:preserve-3d;perspective:1400px}
.hx-s8 .hx-ring-inner{position:absolute;inset:0;transform-style:preserve-3d}
.hx-s8 .hx-cardx{position:absolute;inset:0;border-radius:18px;overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(10,16,38,.62));border:1px solid var(--hx-edge);backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.hx-s8 .hx-cardx::before{content:'';position:absolute;inset:0;background:linear-gradient(150deg,var(--c1,#3b82f6),var(--c2,#a855f7));opacity:.45}
.hx-s8 .hx-cardx::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:100% 14px;opacity:.5}
.hx-s8 .hx-cardx small,.hx-s8 .hx-cardx b{position:relative;z-index:2}
.hx-s8 .hx-cardx small{font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.hx-s8 .hx-cardx b{font:800 clamp(15px,1.4vw,22px)/1.1 'Onest',sans-serif}
.hx-s8 .hx-floor{position:absolute;left:0;right:0;bottom:0;height:44%;z-index:2;background:linear-gradient(180deg,transparent,rgba(99,102,241,.16));
  mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hx-s8 .hx-copy{position:absolute;left:var(--hx-pad);top:12%;z-index:5;max-width:min(380px,32vw)}
.hx-s8 h2{font-size:clamp(28px,3.8vw,66px)}
.hx-s8 .hx-lead{margin-top:14px;font-size:clamp(12px,.95vw,15px);line-height:1.65;color:#a5b0d0}
.hx-s8 .hx-eyebrow{color:#c4b5fd}
.hx-s8 .hx-legend{position:absolute;right:calc(var(--hx-pad) + 46px);bottom:12%;z-index:5;display:flex;flex-direction:column;gap:8px;text-align:right;font:500 10px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;color:#8f9ac0}

/* =========================================================
   09 3D WIREFRAME EXPLODED VIEW — UI layers suspended on the Z axis
   ========================================================= */
.hx-s9{background:radial-gradient(80% 80% at 62% 44%,#151b3d,#05060f 72%)}
.hx-s9 .hx-blueprint{position:absolute;inset:0;z-index:1;opacity:.5;
  background-image:linear-gradient(rgba(129,140,248,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(129,140,248,.09) 1px,transparent 1px);background-size:38px 38px;
  mask-image:radial-gradient(90% 80% at 62% 46%,#000 30%,transparent 100%)}
.hx-s9 .hx-explode{position:absolute;right:6%;top:50%;z-index:3;width:min(560px,46vw);height:min(430px,54vh);transform:translateY(-50%);perspective:1500px}
.hx-s9 .hx-exp-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(54deg) rotateZ(-38deg)}
.hx-s9 .hx-plate2{position:absolute;left:0;right:0;height:var(--h,64px);top:var(--t,0);border-radius:14px;transform-style:preserve-3d;
  transform:translateZ(var(--z,0px));background:linear-gradient(140deg,rgba(129,140,248,.24),rgba(15,23,52,.44));
  border:1px solid rgba(165,190,255,.45);box-shadow:0 0 44px rgba(99,102,241,.3),inset 0 0 26px rgba(56,189,248,.12);backdrop-filter:blur(5px)}
.hx-s9 .hx-plate2::before{content:attr(data-label);position:absolute;left:14px;top:11px;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.24em;text-transform:uppercase;color:#c7d2fe}
.hx-s9 .hx-plate2 u{position:absolute;right:12px;top:9px;text-decoration:none;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.16em;color:#67e8f9}
.hx-s9 .hx-wf{position:absolute;left:14px;right:14px;top:30px;bottom:12px;display:flex;gap:7px}
.hx-s9 .hx-wf i{flex:1;border-radius:6px;border:1px solid rgba(199,210,254,.34);background:rgba(129,140,248,.12)}
.hx-s9 .hx-wf.hx-wf-rows{flex-direction:column;gap:6px}
.hx-s9 .hx-wf.hx-wf-rows i{flex:none;height:7px;border-radius:4px}
.hx-s9 .hx-wf.hx-wf-rows i:nth-child(2){width:64%}.hx-s9 .hx-wf.hx-wf-rows i:nth-child(3){width:82%}
.hx-s9 .hx-pillar{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(129,140,248,.5),transparent);transform:translateX(-50%)}
.hx-s9 .hx-tick{position:absolute;left:50%;display:flex;align-items:center;gap:8px;transform:translateX(14px);
  font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.2em;text-transform:uppercase;color:#8b96c9;white-space:nowrap}
.hx-s9 .hx-tick::before{content:'';width:16px;height:1px;background:rgba(139,150,201,.6)}
.hx-s9 .hx-copy{position:absolute;left:var(--hx-pad);top:50%;transform:translateY(-50%);z-index:5;max-width:min(420px,36vw)}
.hx-s9 h2{font-size:clamp(28px,3.9vw,68px);color:#eef0ff}
.hx-s9 .hx-lead{margin-top:16px;font-size:clamp(12px,1vw,16px);line-height:1.68;color:#a8adcf}
.hx-s9 .hx-eyebrow{color:#a5b4fc}
.hx-s9 .hx-specs{position:absolute;left:var(--hx-pad);bottom:11%;z-index:5;display:flex;gap:10px}
.hx-s9 .hx-specs div{padding:12px 16px;border-radius:14px;background:rgba(12,18,44,.5);border:1px solid rgba(165,180,252,.24);backdrop-filter:blur(14px)}
.hx-s9 .hx-specs small{display:block;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;color:#7b83b5}
.hx-s9 .hx-specs b{display:block;margin-top:6px;font:800 clamp(14px,1.3vw,22px)/1 'Onest',sans-serif;color:#e8eaff}
.hx-s9 .hx-assemble{position:absolute;right:6%;bottom:8%;z-index:6;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;cursor:pointer;
  background:rgba(12,18,44,.6);border:1px solid rgba(165,180,252,.34);backdrop-filter:blur(14px);color:#dbe1ff;
  font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.2em;text-transform:uppercase;transition:border-color .3s,box-shadow .3s}
.hx-s9 .hx-assemble:hover{border-color:rgba(165,180,252,.8);box-shadow:0 0 30px rgba(129,140,248,.35)}
.hx-s9 .hx-assemble i{width:7px;height:7px;border-radius:50%;background:#67e8f9;box-shadow:0 0 12px #67e8f9}

/* =========================================================
   10 GLOBAL CONNECTIVITY
   ========================================================= */
.hx-s10{background:radial-gradient(70% 70% at 50% 55%,#062036,#020610 72%)}
.hx-s10 canvas{position:absolute;left:50%;top:52%;z-index:3;width:min(74vmin,660px);height:min(74vmin,660px);transform:translate(-50%,-50%)}
.hx-s10 .hx-halo{position:absolute;left:50%;top:52%;z-index:2;width:min(88vmin,780px);height:min(88vmin,780px);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(56,189,248,.22),transparent 62%);filter:blur(28px)}
.hx-s10 .hx-orbit-ring{position:absolute;left:50%;top:52%;z-index:2;border-radius:50%;border:1px solid rgba(125,211,252,.16);transform:translate(-50%,-50%) rotateX(74deg)}
.hx-s10 .hx-o1{width:min(84vmin,740px);height:min(84vmin,740px)}
.hx-s10 .hx-o2{width:min(96vmin,860px);height:min(96vmin,860px);border-style:dashed;opacity:.6}
.hx-s10 .hx-copy{position:absolute;left:var(--hx-pad);top:50%;transform:translateY(-50%);z-index:6;max-width:min(400px,34vw)}
.hx-s10 h2{font-size:clamp(30px,4.4vw,74px);color:#eaf6ff}
.hx-s10 .hx-lead{margin-top:16px;font-size:clamp(12px,1vw,16px);line-height:1.68;color:#9fbdd6}
.hx-s10 .hx-eyebrow{color:#38bdf8}
.hx-s10 .hx-pins{position:absolute;inset:0;z-index:6;pointer-events:none}
.hx-s10 .hx-pin{position:absolute;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:999px;font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.18em;text-transform:uppercase;color:#cbeafe;background:rgba(6,20,36,.6);border:1px solid rgba(125,211,252,.3);backdrop-filter:blur(10px)}
.hx-s10 .hx-pin::before{content:'';width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 12px #38bdf8;animation:hx-pulse 2.2s infinite}
.hx-s10 .hx-p1{right:16%;top:20%}.hx-s10 .hx-p2{right:10%;top:52%}.hx-s10 .hx-p3{right:22%;bottom:18%}.hx-s10 .hx-p4{left:38%;top:14%}
.hx-s10 .hx-stats{position:absolute;left:var(--hx-pad);bottom:11%;z-index:6;display:flex;gap:clamp(14px,2vw,34px)}

/* ===== responsive ===== */
@media (max-width:1100px){
  .hx-s1 .hx-copy{grid-column:1/13;grid-row:3/6}
  .hx-s1 .hx-p-chart{grid-column:1/13;grid-row:1/3}
  .hx-s1 .hx-p-term{grid-column:1/8;grid-row:6/9}
  .hx-s1 .hx-p-stats{grid-column:8/13;grid-row:6/8}
  .hx-s1 .hx-p-ring{grid-column:8/13;grid-row:8/9}
  .hx-s1 .hx-p-log,.hx-s1 .hx-p-top,.hx-s1 .hx-float{display:none}
  .hx-s2 .hx-side{display:none}
  .hx-s2 .hx-copy{max-width:min(420px,60vw)}
  .hx-s5 .hx-tab,.hx-s5 .hx-note{display:none}
  .hx-s5 .hx-mac{left:26%;top:26%;width:66vw}
  .hx-s7 .hx-body{grid-template-columns:1fr}
  .hx-s7 .hx-gauges{grid-template-columns:repeat(4,1fr)}
  .hx-s8 .hx-legend{display:none}
  .hx-s4 .hx-ui{grid-template-columns:minmax(280px,46%) 1fr}
  .hx-s4 .hx-matrix,.hx-s4 .hx-rail{display:none}
  .hx-s4 .hx-readout{grid-column:2;justify-self:end}
  .hx-s6 .hx-warp{display:none}
  .hx-s9 .hx-explode{right:3%;width:50vw}
  .hx-s9 .hx-copy{max-width:min(360px,42vw)}
  .hx-s10 .hx-copy{max-width:min(360px,52vw)}
  .hx-s10 .hx-p4{display:none}
}
@media (max-width:760px){
  .hx{height:auto;min-height:640px}
  .hx-slide{padding-bottom:64px}
  .hx-s1 .hx-hud{grid-template-rows:repeat(10,1fr)}
  .hx-s1 .hx-p-stats,.hx-s1 .hx-p-ring{display:none}
  .hx-s3 .hx-core-scene{width:96vw;height:60vh;top:42%}
  .hx-s3 .hx-core-orb{width:170px;height:170px}
  .hx-s3 .hx-core-copy{left:var(--hx-pad);bottom:8%;max-width:74vw}
  .hx-s3 .hx-core-copy h2{font-size:clamp(26px,8vw,46px)}
  .hx-s3 .hx-label{font-size:8px;padding:7px 9px;letter-spacing:.1em}
  .hx-s3 .hx-l1{left:4%;top:20%}.hx-s3 .hx-l2{right:3%;top:16%}.hx-s3 .hx-l3{left:3%;bottom:18%}.hx-s3 .hx-l4{right:3%;bottom:24%}
  .hx-s5 .hx-phone,.hx-s6 .hx-hud,.hx-s8 .hx-copy,.hx-s10 .hx-pin,.hx-s10 .hx-stats{display:none}
  .hx-s4 .hx-ui{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .hx-s4 .hx-brain{grid-column:1;grid-row:2}
  .hx-s4 .hx-readout{grid-column:1;grid-row:1;justify-self:start}
  .hx-s4 .hx-legend{grid-column:1;grid-row:3}
  .hx-s5 .hx-copy{max-width:80vw}
  .hx-s7 .hx-gauges{grid-template-columns:repeat(2,1fr)}
  .hx-s9 .hx-explode{position:relative;right:auto;top:auto;transform:none;width:82vw;height:34vh;margin:auto auto 0}
  .hx-s9 .hx-copy{position:relative;left:auto;top:auto;transform:none;margin:auto var(--hx-pad) 0;max-width:82vw}
  .hx-s9 .hx-specs,.hx-s9 .hx-assemble,.hx-s9 .hx-tick{display:none}
  .hx-s10 .hx-copy{position:relative;left:auto;top:auto;transform:none;margin:auto var(--hx-pad);max-width:80vw}
  .hx-nav{gap:0;right:6px}
  .hx-nav button{padding:4px 6px;font-size:10px}
}

/* 03 System Architect overrides legacy Bento rules. */
.hx-s3{background:radial-gradient(90% 120% at 70% 48%,#102d43,#07111b 52%,#03070c);padding:0;align-items:stretch;perspective:1000px}
.hx-s3-bg,.hx-s3-grid,.hx-s3-glow{position:absolute;inset:0;pointer-events:none}
.hx-s3-grid{background-image:linear-gradient(rgba(96,165,250,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 75%,transparent)}
.hx-s3-glow{inset:auto;border-radius:50%;filter:blur(70px);opacity:.3;mix-blend-mode:screen}.hx-s3-glow-a{width:40vmin;height:40vmin;left:48%;top:8%;background:#0ea5e9}.hx-s3-glow-b{width:35vmin;height:35vmin;right:2%;bottom:0;background:#334155}
.hx-s3-load{position:absolute;inset:0 0 auto 0;height:39%;z-index:1;padding:clamp(20px,3vw,46px) var(--hx-pad) 0;opacity:.62}.hx-s3-load p{font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.22em;text-transform:uppercase;color:#6ee7b7}.hx-s3-load p b{color:#d1fae5}.hx-s3-load svg{position:absolute;left:0;bottom:0;width:100%;height:80%;opacity:.65}.hx-s3-load path{fill:none;stroke:#38bdf8;stroke-width:1}.hx-s3-load .hx-s3-load-area{fill:rgba(14,165,233,.08);stroke:none}.hx-s3-load .hx-s3-load-line{filter:drop-shadow(0 0 5px #38bdf8)}
.hx-s3-ide{position:absolute;right:var(--hx-pad);top:10%;z-index:5;width:min(340px,28vw);min-height:190px;padding:0;overflow:hidden;border-color:rgba(125,211,252,.24);background:rgba(8,20,31,.72);transform-style:preserve-3d;box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 35px rgba(14,165,233,.12)}
.hx-s3-idebar{position:absolute;left:0;top:0;bottom:0;width:31px;padding-top:42px;background:rgba(2,8,14,.6);display:flex;flex-direction:column;align-items:center;gap:14px}.hx-s3-idebar i{width:9px;height:9px;border-radius:2px;background:#334155}.hx-s3-idebar i:first-child{background:#38bdf8;box-shadow:0 0 10px #38bdf8}.hx-s3-titlebar{height:30px;margin-left:31px;padding:0 11px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(148,163,184,.15);font:500 9px/1 'Space Grotesk',monospace;color:#94a3b8}.hx-s3-titlebar span{width:7px;height:7px;border-radius:50%;background:#4ade80}.hx-s3-titlebar b{margin-left:auto;color:#4ade80;font-size:8px}.hx-s3-ide pre{margin:0;padding:18px 14px 18px 48px;color:#93c5fd;font:500 11px/1.8 ui-monospace,monospace}.hx-s3-ide pre em{color:#6ee7b7;font-style:normal}.hx-s3-ide pre strong{color:#facc15;font-weight:500}
.hx-s3-arch{position:absolute;left:45%;top:51%;z-index:3;width:min(620px,49vw);height:min(420px,52vh);transform:translate(-50%,-50%) rotateX(55deg) rotateZ(-28deg);transform-style:preserve-3d;perspective:1000px}.hx-s3-arch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hx-s3-arch path{fill:none;stroke:#38bdf8;stroke-width:1.4;stroke-dasharray:7 9;filter:drop-shadow(0 0 5px #0ea5e9);animation:hx-dash 5s linear infinite}.hx-s3-node{position:absolute;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;padding:12px;border:1px solid rgba(125,211,252,.58);background:linear-gradient(145deg,rgba(14,116,144,.5),rgba(8,20,31,.8));box-shadow:0 0 28px rgba(14,165,233,.24),inset 0 1px rgba(255,255,255,.16);transform-style:preserve-3d}.hx-s3-node b{width:100%;text-align:center;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.12em;color:#dbeafe}.hx-s3-api{left:35%;top:7%;width:145px}.hx-s3-db{left:5%;top:55%;width:135px}.hx-s3-worker{right:2%;top:54%;width:150px}.hx-s3-cache{left:38%;bottom:2%;width:135px}.hx-s3-server{width:26px;height:18px;border-radius:2px;background:linear-gradient(180deg,#38bdf8,#164e63);box-shadow:0 0 9px rgba(56,189,248,.6);position:relative}.hx-s3-server::after{content:'';position:absolute;right:4px;top:6px;width:5px;height:5px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 5px #6ee7b7}.hx-s3-cylinder{display:block;width:35px;height:27px;border-radius:50%/18%;background:linear-gradient(90deg,#1e7492,#7dd3fc,#155e75);box-shadow:0 0 13px rgba(56,189,248,.55);position:relative}.hx-s3-cylinder::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:18px;border:2px solid #38bdf8;border-top:0;border-radius:0 0 50% 50%}.hx-s3-packet{position:absolute;z-index:5;width:7px;height:7px;border-radius:50%;background:#d1fae5;box-shadow:0 0 14px #4ade80;animation:hx-s3-packet 3s linear infinite}.hx-s3-packet-a{left:14%;top:55%}.hx-s3-packet-b{left:39%;top:18%;animation-delay:-1s}.hx-s3-packet-c{left:65%;top:55%;animation-delay:-2s}@keyframes hx-s3-packet{0%{transform:translate(0,0);opacity:0}15%,80%{opacity:1}100%{transform:translate(260px,-120px);opacity:0}}
.hx-s3-copy{position:absolute;left:var(--hx-pad);bottom:11%;z-index:7;max-width:min(430px,38vw)}.hx-s3-copy h2{font-size:clamp(30px,4.1vw,70px);color:#e2e8f0;text-shadow:0 15px 35px rgba(0,0,0,.65)}.hx-s3-copy .hx-lead{margin-top:16px;font-size:clamp(12px,1vw,16px);line-height:1.65;color:#94a3b8}.hx-s3 .hx-eyebrow{color:#38bdf8}.hx-s3-label{position:absolute;z-index:8;padding:9px 12px;border:1px solid rgba(110,231,183,.34);border-radius:7px;background:rgba(4,18,25,.7);backdrop-filter:blur(10px);font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.14em;text-transform:uppercase;color:#bbf7d0}.hx-s3-label::before{content:'';display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80}.hx-s3-label::after{content:'';position:absolute;width:45px;height:1px;background:#4ade80;opacity:.6}.hx-s3-label-a{left:10%;top:33%}.hx-s3-label-a::after{right:-45px;top:50%;transform:rotate(12deg);transform-origin:left}.hx-s3-label-b{right:7%;top:43%;color:#bae6fd}.hx-s3-label-b::before{background:#38bdf8;box-shadow:0 0 10px #38bdf8}.hx-s3-label-b::after{left:-45px;top:50%;transform:rotate(164deg);transform-origin:right;background:#38bdf8}.hx-s3-label-c{left:15%;bottom:14%}.hx-s3-label-c::after{right:-45px;top:50%;transform:rotate(-12deg);transform-origin:left}.hx-s3-label-d{right:14%;bottom:14%;color:#bae6fd}.hx-s3-label-d::before{background:#38bdf8;box-shadow:0 0 10px #38bdf8}.hx-s3-label-d::after{left:-45px;top:50%;transform:rotate(190deg);transform-origin:right;background:#38bdf8}
@media (max-width:760px){.hx-s3-ide{right:var(--hx-pad);top:8%;width:45vw;min-height:150px}.hx-s3-ide pre{font-size:8px;padding-left:40px}.hx-s3-arch{left:53%;top:48%;width:92vw;height:42vh}.hx-s3-copy{left:var(--hx-pad);bottom:7%;max-width:75vw}.hx-s3-copy h2{font-size:clamp(25px,7vw,42px)}.hx-s3-label{font-size:8px;padding:7px 8px}.hx-s3-label-a{left:3%;top:29%}.hx-s3-label-b{right:2%;top:38%}.hx-s3-label-c{left:3%;bottom:19%}.hx-s3-label-d{right:4%;bottom:19%}}

/* 03 Marketplace & Listing Solutions. Replaces all former architecture/core styling. */
.hx-s3{background:radial-gradient(90% 110% at 68% 44%,#123b5a,#071521 54%,#03070c);padding:0;align-items:stretch;perspective:none}
.hx-s3-market-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#7dd3fc;opacity:.08;font:400 clamp(100px,18vw,280px)/1 'Onest',sans-serif}.hx-s3-market-bg span{position:absolute;transform:rotate(-18deg);animation:hx-market-drift 24s linear infinite}.hx-s3-market-bg span:nth-child(1){left:6%;top:-6%}.hx-s3-market-bg span:nth-child(2){right:3%;top:8%;animation-delay:-8s}.hx-s3-market-bg span:nth-child(3){left:38%;bottom:-18%;animation-delay:-14s}.hx-s3-market-bg span:nth-child(4){right:22%;bottom:-10%;animation-delay:-19s}.hx-s3-market-bg span:nth-child(5){left:20%;top:42%;animation-delay:-4s}@keyframes hx-market-drift{0%,100%{transform:translate3d(0,0,0) rotate(-18deg)}50%{transform:translate3d(20px,-28px,0) rotate(-10deg)}}
.hx-s3-copy{position:absolute;left:var(--hx-pad);bottom:11%;z-index:7;max-width:min(400px,34vw)}.hx-s3-copy h2{font-size:clamp(29px,4vw,68px);color:#e0f2fe;text-shadow:0 18px 40px rgba(0,0,0,.6)}.hx-s3-copy .hx-lead{margin-top:15px;font-size:clamp(12px,1vw,16px);line-height:1.65;color:#a7bed0}.hx-s3 .hx-eyebrow{color:#7dd3fc}
.hx-s3-market-ui{position:absolute;right:var(--hx-pad);top:8%;z-index:5;width:min(650px,52vw);transform-style:preserve-3d}.hx-s3-search{height:52px;padding:0 15px;display:flex;align-items:center;gap:12px;border-radius:13px;background:rgba(8,28,43,.8);border-color:rgba(125,211,252,.32);box-shadow:0 18px 45px rgba(0,0,0,.4)}.hx-s3-search>span{font-size:25px;color:#7dd3fc}.hx-s3-search b{font:500 13px/1 'Space Grotesk',monospace;color:#dbeafe;min-width:0}.hx-s3-search b::after{content:'|';color:#4ade80;animation:hx-pulse 1s infinite}.hx-s3-search i{margin-left:auto;font:500 10px/1 'Space Grotesk',monospace;color:#64748b;font-style:normal}
.hx-s3-filters{display:flex;align-items:center;gap:7px;margin:10px 0}.hx-s3-filters button{appearance:none;cursor:pointer;padding:9px 12px;border:1px solid rgba(148,163,184,.22);border-radius:8px;background:rgba(15,35,50,.7);color:#cbd5e1;font:500 10px/1 'Space Grotesk',monospace;transition:background .25s,border-color .25s,transform .25s}.hx-s3-filters button:hover,.hx-s3-filters button.is-open{background:rgba(14,116,144,.45);border-color:#38bdf8;transform:translateY(-2px)}.hx-s3-filters button b{margin-left:9px;color:#7dd3fc}.hx-s3-filters>span{margin-left:auto;font:500 10px/1 'Space Grotesk',monospace;letter-spacing:.1em;color:#64748b}
.hx-s3-listings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hx-s3-card{overflow:hidden;border-radius:14px;background:rgba(9,27,41,.78);border-color:rgba(148,197,253,.24);box-shadow:0 22px 45px rgba(0,0,0,.4);transition:border-color .3s,box-shadow .3s}.hx-s3-card:hover{border-color:#7dd3fc;box-shadow:0 25px 55px rgba(14,165,233,.22)}.hx-s3-photo{position:relative;height:145px;overflow:hidden;background:linear-gradient(145deg,var(--photo),#0b2233 62%)}.hx-s3-photo::before{content:'';position:absolute;inset:25% -10% -25%;border-radius:50% 50% 0 0;background:linear-gradient(145deg,rgba(226,232,240,.55),rgba(100,116,139,.18));transform:skewX(-12deg)}.hx-s3-photo::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:45%;background:linear-gradient(90deg,rgba(15,23,42,.65) 0 18%,transparent 18% 25%,rgba(15,23,42,.55) 25% 43%,transparent 43% 51%,rgba(15,23,42,.5) 51% 70%,transparent 70%);clip-path:polygon(0 18%,100% 0,100% 100%,0 100%)}.hx-s3-photo i{position:absolute;z-index:1;display:block;width:16px;height:16px;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(255,255,255,.2)}.hx-s3-photo i:nth-of-type(1){left:24%;top:48%}.hx-s3-photo i:nth-of-type(2){left:52%;top:36%}.hx-s3-photo i:nth-of-type(3){right:18%;top:57%}.hx-s3-badge{position:absolute;z-index:3;left:9px;top:9px;padding:6px 8px;border-radius:5px;background:rgba(5,20,30,.78);color:#bbf7d0;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.1em;text-transform:uppercase}.hx-s3-card-body{padding:12px 13px;display:flex;flex-direction:column;gap:7px}.hx-s3-card-body small{font:500 11px/1.2 'Onest',sans-serif;color:#cbd5e1}.hx-s3-card-body strong{font:800 17px/1 'Onest',sans-serif;color:#f0f9ff}.hx-s3-card-body>span{font:500 9px/1 'Space Grotesk',monospace;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.hx-s3-map{position:absolute;right:0;top:180px;width:116px;height:90px;border-radius:12px;background:linear-gradient(140deg,rgba(30,64,175,.45),rgba(8,47,73,.8));border:1px solid rgba(125,211,252,.25);overflow:hidden}.hx-s3-map::before{content:'';position:absolute;inset:0;background-image:linear-gradient(35deg,transparent 46%,rgba(125,211,252,.18) 47% 49%,transparent 50%),linear-gradient(120deg,transparent 46%,rgba(125,211,252,.18) 47% 49%,transparent 50%);background-size:34px 28px}.hx-s3-map span{position:absolute;width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80;animation:hx-pulse 1.6s infinite}.hx-s3-map span:nth-child(1){left:23%;top:36%}.hx-s3-map span:nth-child(2){left:65%;top:54%}.hx-s3-map span:nth-child(3){left:42%;top:72%}.hx-s3-map i{position:absolute;left:8px;bottom:7px;font:600 8px/1 'Space Grotesk',monospace;color:#bae6fd;font-style:normal}
@media (max-width:760px){.hx-s3-market-ui{right:var(--hx-pad);top:7%;width:calc(100% - var(--hx-pad)*2)}.hx-s3-copy{left:var(--hx-pad);bottom:8%;max-width:78vw}.hx-s3-copy h2{font-size:clamp(25px,7vw,43px)}.hx-s3-listings{gap:6px}.hx-s3-photo{height:105px}.hx-s3-card-body{padding:9px}.hx-s3-card-body strong{font-size:13px}.hx-s3-map{display:none}.hx-s3-filters>span{display:none}}

/* 03 The Listing Ecosystem: three floating product surfaces, not one property card. */
.hx-s3{--hx-s3-gap:clamp(1rem,3vw,5rem);overflow:hidden}
.hx-s3-copy{width:min(32vw,26rem)}
.hx-s3-ecosystem{width:min(58vw,46rem);right:var(--hx-pad)}
.hx-s3-screen,.hx-s3-float,.hx-s3-ai{will-change:transform}
.hx-s3-smart-search{will-change:transform}
.hx-s3{background:radial-gradient(90% 120% at 68% 42%,#17405b,#071521 54%,#03070c);padding:0;align-items:stretch;perspective:1300px}.hx-s3-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:#7dd3fc;opacity:.07;font:400 clamp(100px,17vw,260px)/1 'Onest',sans-serif}.hx-s3-ambient span{position:absolute;animation:hx-market-drift 24s linear infinite}.hx-s3-ambient span:nth-child(1){left:3%;top:-7%}.hx-s3-ambient span:nth-child(2){right:4%;top:3%;animation-delay:-8s}.hx-s3-ambient span:nth-child(3){left:39%;bottom:-20%;animation-delay:-14s}.hx-s3-ambient span:nth-child(4){right:24%;bottom:-12%;animation-delay:-19s}.hx-s3-ambient span:nth-child(5){left:18%;top:42%;animation-delay:-4s}
.hx-s3-copy{position:absolute;left:var(--hx-pad);bottom:10%;z-index:8;max-width:min(375px,31vw)}.hx-s3-copy h2{font-size:clamp(29px,3.7vw,64px);color:#e0f2fe;text-shadow:0 18px 40px rgba(0,0,0,.6)}.hx-s3-copy .hx-lead{margin-top:15px;font-size:clamp(12px,1vw,16px);line-height:1.65;color:#a7bed0}.hx-s3 .hx-eyebrow{color:#7dd3fc}
.hx-s3-ecosystem{position:absolute;right:var(--hx-pad);top:7%;z-index:5;width:min(700px,57vw);height:82%;transform-style:preserve-3d}.hx-s3-smart-search{position:absolute;left:4%;right:16%;top:0;height:48px;z-index:10;border-radius:12px;padding:0 14px;display:flex;align-items:center;gap:11px;background:rgba(7,24,38,.84);border-color:rgba(125,211,252,.35);box-shadow:0 16px 45px rgba(0,0,0,.4)}.hx-s3-smart-search>span{font-size:23px;color:#7dd3fc}.hx-s3-smart-search b{font:500 12px/1 'Space Grotesk',monospace;color:#e0f2fe}.hx-s3-smart-search b::after{content:'|';color:#4ade80;animation:hx-pulse 1s infinite}.hx-s3-smart-search i{margin-left:auto;font:500 9px/1 'Space Grotesk',monospace;color:#64748b;font-style:normal}
.hx-s3-stack{position:absolute;left:2%;right:0;top:13%;bottom:10%;transform-style:preserve-3d}.hx-s3-screen{position:absolute;overflow:hidden;border-radius:14px;background:rgba(7,25,39,.86);border-color:rgba(125,211,252,.3);box-shadow:0 28px 65px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.13)}.hx-s3-screen header{height:29px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid rgba(148,163,184,.16);font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.11em;color:#cbd5e1;text-transform:uppercase}.hx-s3-screen header em{margin-left:auto;color:#86efac;font-style:normal}.hx-s3-admin{left:0;right:15%;top:2%;height:55%;z-index:1;transform:translateZ(-100px) rotateY(6deg)}.hx-s3-admin-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:15px}.hx-s3-admin-kpis div{padding:9px;border-radius:8px;background:rgba(30,64,175,.22);border:1px solid rgba(125,211,252,.13)}.hx-s3-admin-kpis small,.hx-s3-card-body small{display:block;font:500 8px/1 'Space Grotesk',monospace;letter-spacing:.14em;text-transform:uppercase;color:#7d9bb3}.hx-s3-admin-kpis strong{display:block;margin-top:7px;font:800 19px/1 'Onest',sans-serif;color:#e0f2fe}.hx-s3-admin-chart{height:65px;margin:0 15px;display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid rgba(125,211,252,.2);background:linear-gradient(rgba(125,211,252,.05) 1px,transparent 1px);background-size:100% 22px}.hx-s3-admin-chart i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(#38bdf8,#164e63);height:var(--h,50%);animation:hx-admin-bars 2.5s ease-in-out infinite alternate}.hx-s3-admin-chart i:nth-child(1){--h:35%}.hx-s3-admin-chart i:nth-child(2){--h:52%}.hx-s3-admin-chart i:nth-child(3){--h:42%}.hx-s3-admin-chart i:nth-child(4){--h:75%}.hx-s3-admin-chart i:nth-child(5){--h:59%}.hx-s3-admin-chart i:nth-child(6){--h:87%}.hx-s3-admin-chart i:nth-child(7){--h:68%}.hx-s3-admin-chart i:nth-child(8){--h:94%}@keyframes hx-admin-bars{to{height:calc(var(--h) + 8%)}}.hx-s3-admin footer{display:flex;justify-content:space-between;padding:12px 15px;font:500 9px/1 'Space Grotesk',monospace;color:#7896ad}.hx-s3-admin footer b{color:#4ade80}
.hx-s3-desktop{left:9%;right:0;top:17%;height:60%;z-index:2;transform:translateZ(0) rotateY(-3deg)}.hx-s3-dots{display:flex;gap:4px}.hx-s3-dots i{width:6px;height:6px;border-radius:50%;background:#f87171}.hx-s3-dots i:nth-child(2){background:#facc15}.hx-s3-dots i:nth-child(3){background:#4ade80}.hx-s3-desktop header em{color:#7dd3fc}.hx-s3-desktop-body{position:relative;height:calc(100% - 29px);padding:12px;display:grid;grid-template-columns:1.1fr .9fr;gap:12px}.hx-s3-property-art{position:relative;overflow:hidden;border-radius:9px;background:linear-gradient(145deg,#2563eb,#0e7490 52%,#164e63);min-height:145px}.hx-s3-property-art::before{content:'';position:absolute;inset:22% -5% 0;background:linear-gradient(150deg,rgba(240,249,255,.65),rgba(100,116,139,.18));clip-path:polygon(0 34%,23% 17%,42% 33%,64% 3%,100% 20%,100% 100%,0 100%)}.hx-s3-property-art::after{content:'';position:absolute;left:12%;right:12%;bottom:0;height:44%;background:linear-gradient(90deg,#172554 0 17%,transparent 17% 25%,#1e293b 25% 45%,transparent 45% 51%,#172554 51% 69%,transparent 69%)}.hx-s3-property-art>b{position:absolute;z-index:2;left:9px;top:9px;padding:5px 7px;background:#14532d;border-radius:4px;color:#bbf7d0;font:600 8px/1 'Space Grotesk',monospace;text-transform:uppercase}.hx-s3-detail{display:flex;flex-direction:column;gap:8px;padding:4px}.hx-s3-detail small{font:600 12px/1.2 'Onest',sans-serif;color:#dbeafe}.hx-s3-detail strong{font:800 23px/1 'Onest',sans-serif;color:#f0f9ff}.hx-s3-detail>span{font:500 9px/1.4 'Space Grotesk',monospace;letter-spacing:.08em;color:#7d9bb3;text-transform:uppercase}.hx-s3-detail-buttons{display:flex;gap:6px;margin-top:auto}.hx-s3-detail-buttons i{padding:7px 9px;border-radius:6px;background:rgba(14,116,144,.4);font:600 8px/1 'Space Grotesk',monospace;color:#bae6fd;font-style:normal}.hx-s3-mapline{position:absolute;left:12px;right:12px;bottom:10px;height:27px;border-top:1px solid rgba(125,211,252,.25);background:repeating-linear-gradient(20deg,transparent 0 17px,rgba(125,211,252,.15) 18px 19px)}.hx-s3-mapline span{position:absolute;width:5px;height:5px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80}.hx-s3-mapline span:nth-child(1){left:25%;top:8px}.hx-s3-mapline span:nth-child(2){left:56%;top:16px}.hx-s3-mapline span:nth-child(3){left:78%;top:5px}.hx-s3-mapline b{position:absolute;right:0;top:9px;font:600 8px/1 'Space Grotesk',monospace;color:#7dd3fc}
.hx-s3-mobile{left:auto;right:-4%;top:22%;width:156px;height:300px;z-index:4;transform:translateZ(150px) rotateY(-12deg) rotateZ(3deg);border-radius:22px}.hx-s3-mobile header{justify-content:space-between}.hx-s3-mobile-photo{height:118px;margin:0 9px;background:linear-gradient(145deg,#0f766e,#67e8f9 57%,#155e75);position:relative;overflow:hidden}.hx-s3-mobile-photo::after{content:'';position:absolute;inset:35% -15% 0;background:linear-gradient(150deg,rgba(240,249,255,.58),rgba(71,85,105,.2));clip-path:polygon(0 30%,30% 8%,57% 34%,83% 0,100% 18%,100% 100%,0 100%)}.hx-s3-mobile-photo>b{position:absolute;z-index:2;left:8px;top:8px;padding:5px;background:#14532d;border-radius:4px;color:#dcfce7;font:600 8px/1 'Space Grotesk',monospace}.hx-s3-mobile-body{padding:11px;display:flex;flex-direction:column;gap:7px}.hx-s3-mobile-body small{font:600 8px/1 'Space Grotesk',monospace;text-transform:uppercase;color:#7dd3fc}.hx-s3-mobile-body strong{font:800 20px/1 'Onest',sans-serif;color:#f0f9ff}.hx-s3-mobile-body span{font:500 8px/1.4 'Space Grotesk',monospace;color:#94a3b8}.hx-s3-mobile-body button{margin-top:5px;border:0;border-radius:7px;padding:9px;background:#0e7490;color:#e0f2fe;font:700 9px/1 'Space Grotesk',monospace;cursor:pointer;box-shadow:0 5px 16px rgba(14,116,144,.4)}
.hx-s3-float{position:absolute;z-index:8;border-radius:10px;padding:11px 13px;background:rgba(6,25,38,.84);border-color:rgba(125,211,252,.3)}.hx-s3-float small{display:block;font:500 8px/1 'Space Grotesk',monospace;text-transform:uppercase;letter-spacing:.12em;color:#7896ad}.hx-s3-float b{display:block;margin-top:5px;font:800 16px/1 'Onest',sans-serif;color:#4ade80}.hx-s3-price-chart{left:-3%;top:33%;width:155px}.hx-s3-price-chart svg{width:100%;height:34px;margin-top:5px}.hx-s3-price-chart path{fill:none;stroke:#4ade80;stroke-width:2;filter:drop-shadow(0 0 4px #4ade80)}.hx-s3-doping{left:3%;bottom:8%;width:152px}.hx-s3-doping b{color:#bae6fd;font-size:11px}.hx-s3-doping span{position:absolute;right:12px;bottom:11px;color:#4ade80}.hx-s3-ai{position:absolute;right:1%;top:47%;z-index:8;padding:10px 12px;border-radius:10px;background:rgba(6,25,38,.82);border-color:rgba(110,231,183,.3);display:grid;grid-template-columns:24px 1fr;column-gap:8px}.hx-s3-ai>span{grid-row:span 2;display:grid;place-items:center;color:#4ade80;font-size:19px}.hx-s3-ai small{font:500 8px/1 'Space Grotesk',monospace;color:#7896ad}.hx-s3-ai b{margin-top:5px;font:700 10px/1 'Onest',sans-serif;color:#d1fae5}.hx-s3-ticker{position:absolute;left:-3%;right:3%;bottom:0;height:31px;z-index:9;overflow:hidden;border-top:1px solid rgba(125,211,252,.22);background:rgba(5,18,29,.8);backdrop-filter:blur(8px)}.hx-s3-ticker>div{height:100%;display:flex;align-items:center;gap:28px;width:max-content;white-space:nowrap;font:500 8px/1 'Space Grotesk',monospace;letter-spacing:.16em;color:#9fc6f5}.hx-s3-ticker b{color:#4ade80}
@media (max-width:760px){.hx-s3-ecosystem{right:var(--hx-pad);top:7%;width:calc(100% - var(--hx-pad)*2);height:82%}.hx-s3-copy{left:var(--hx-pad);bottom:7%;max-width:72vw}.hx-s3-copy h2{font-size:clamp(24px,7vw,42px)}.hx-s3-stack{top:15%;height:59%}.hx-s3-admin{right:8%}.hx-s3-mobile{right:-7%;width:112px;height:225px}.hx-s3-mobile-photo{height:88px}.hx-s3-mobile-body{padding:8px;gap:5px}.hx-s3-mobile-body strong{font-size:15px}.hx-s3-price-chart,.hx-s3-doping,.hx-s3-ai{display:none}.hx-s3-ticker{bottom:1%}.hx-s3-desktop-body{gap:7px;padding:8px}.hx-s3-detail strong{font-size:16px}}
.hx-s3 .hx-cta,.hx-s3 button{min-height:44px}
@media (max-width:760px){.hx-s3{min-height:680px}.hx-s3-copy{width:auto;max-width:calc(100% - 2 * var(--hx-pad))}.hx-s3-ecosystem{height:66%}.hx-s3-stack{top:17%;height:61%}.hx-s3-admin{left:3%;right:11%;top:4%;height:57%}.hx-s3-desktop{left:8%;right:-2%;top:16%;height:62%}.hx-s3-mobile{right:0;top:26%;width:105px;height:218px}.hx-s3-smart-search{left:0;right:0}.hx-s3-ticker{left:0;right:0}.hx-s3-market-bg,.hx-s3-map{display:none}}
@media (max-width:430px){.hx-s3-copy h2{font-size:clamp(24px,8vw,34px)}.hx-s3-copy .hx-lead{font-size:13px}.hx-s3-admin-kpis{gap:4px;padding:9px}.hx-s3-admin-kpis strong{font-size:14px}.hx-s3-desktop-body{grid-template-columns:1fr 1fr}.hx-s3-mobile{display:none}.hx-s3-detail-buttons{display:none}}

/* Digital control center and bounded responsive surfaces. */
.hx-s3{background:radial-gradient(90% 120% at 52% 48%,#102d43,#07111b 55%,#02050b);perspective:1500px;overflow:hidden}
.hx-s3-grid{position:absolute;inset:0;z-index:0;opacity:.55;background-image:linear-gradient(rgba(96,165,250,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(90% 100% at 50% 50%,#000,transparent 96%)}
.hx-s3-watermark{position:absolute;left:3%;top:3%;z-index:1;color:rgba(125,211,252,.06);font:800 clamp(100px,23vw,320px)/.8 'Space Grotesk',monospace;letter-spacing:-.08em;pointer-events:none;white-space:nowrap}.hx-s3-watermark span{display:block;margin-left:1em;font-size:clamp(9px,1vw,14px);letter-spacing:.42em;color:rgba(125,211,252,.18)}
.hx-s3-code-bg{position:absolute;left:8%;top:10%;z-index:4;width:min(680px,55vw);height:66%;padding:0 0 20px;border:1px solid rgba(125,211,252,.32);border-radius:18px;background:rgba(3,16,29,.67);box-shadow:0 35px 90px rgba(0,0,0,.55),0 0 50px rgba(14,165,233,.12);backdrop-filter:blur(12px);transform:rotateY(8deg) rotateZ(-2deg);transform-style:preserve-3d;will-change:transform,opacity}.hx-s3-code-bg header,.hx-s3-code-bg footer{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(125,211,252,.16);font:600 10px/1 'Space Grotesk',monospace;letter-spacing:.16em;color:#8eb4c9}.hx-s3-code-bg header span{color:#6ee7b7}.hx-s3-code-bg footer{border:0;color:#5eead4}.hx-s3-code-bg pre{height:calc(100% - 90px);margin:0;padding:24px 28px;overflow:hidden;color:#9ac8e8;font:500 clamp(11px,1vw,14px)/1.9 ui-monospace,monospace}.hx-s3-code-bg pre i{color:#f0abfc;font-style:normal}.hx-s3-code-bg pre em{color:#6ee7b7;font-style:normal}.hx-s3-code-bg pre b{color:#7dd3fc}.hx-s3-code-bg pre strong{color:#facc15;font-weight:500}
.hx-s3-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 52% 52%,rgba(34,211,238,.08),transparent 34%)}.hx-s3-particles i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;border-radius:50%;background:#a5f3fc;box-shadow:0 0 10px #22d3ee;opacity:.45;animation:hx-s3-particle 7s linear infinite;animation-delay:var(--d)}
.hx-s3-links{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}.hx-s3-links path{fill:none;stroke:#39d9ff;stroke-width:1.2;stroke-dasharray:3 14;filter:drop-shadow(0 0 7px #22d3ee);opacity:.75}.hx-s3-links path:nth-child(2){stroke:#a78bfa}.hx-s3-links path:nth-child(3){stroke:#6ee7b7;stroke-width:1.8}
.hx-s3-network{position:absolute;inset:0;z-index:4;pointer-events:none}.hx-s3-node{position:absolute;width:8px;height:8px;border-radius:50%;background:#d1fae5;box-shadow:0 0 18px 5px #22d3ee;will-change:transform,opacity}.hx-s3-n1{left:23%;top:26%}.hx-s3-n2{left:43%;top:50%}.hx-s3-n3{left:66%;top:35%;background:#ddd6fe;box-shadow:0 0 18px 5px #8b5cf6}.hx-s3-n4{left:81%;top:70%;background:#bbf7d0;box-shadow:0 0 18px 5px #10b981}
.hx-s3-copy{position:absolute;left:var(--hx-pad);bottom:12%;z-index:8;min-width:0;width:min(390px,33vw);max-width:calc(100% - var(--hx-pad) * 2)}.hx-s3-copy h2{max-width:100%;font-size:clamp(32px,min(4.4vw,9.5vh),72px);color:#e0f2fe;text-shadow:0 18px 40px rgba(0,0,0,.6)}.hx-s3-copy .hx-lead{margin-top:16px;font-size:clamp(13px,1vw,16px);line-height:1.65;color:#a7bed0}
.hx-s3-stats,.hx-s3-uptime,.hx-s3-security{position:absolute;z-index:8;padding:14px 17px;border-radius:14px;background:rgba(5,22,35,.74);border-color:rgba(125,211,252,.28);will-change:transform,opacity}.hx-s3-stats{left:39%;top:12%;min-width:170px}.hx-s3-stats small,.hx-s3-uptime small,.hx-s3-security small{display:block;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.18em;text-transform:uppercase;color:#7d9bb3}.hx-s3-stats b{display:inline-block;margin-top:9px;font:800 25px/1 'Onest',sans-serif;color:#e0f2fe}.hx-s3-stats span{margin-left:8px;color:#6ee7b7;font:600 10px/1 'Space Grotesk',monospace}.hx-s3-uptime{right:8%;top:11%;width:190px}.hx-s3-uptime b{display:block;margin-top:8px;color:#6ee7b7;font:800 20px/1 'Onest',sans-serif}.hx-s3-uptime svg{width:100%;height:38px;margin-top:6px}.hx-s3-uptime path{fill:none;stroke:#6ee7b7;stroke-width:2;stroke-dasharray:4 6;filter:drop-shadow(0 0 5px #6ee7b7)}.hx-s3-security{left:39%;bottom:13%;display:flex;align-items:center;gap:12px}.hx-s3-security>i{display:grid;place-items:center;width:34px;height:38px;color:#6ee7b7;border:1px solid #6ee7b7;clip-path:polygon(50% 0,92% 17%,84% 72%,50% 100%,16% 72%,8% 17%);font:700 18px/1 'Onest';font-style:normal;transform-style:preserve-3d}.hx-s3-security b{display:block;margin-top:6px;color:#6ee7b7;font:700 11px/1 'Space Grotesk',monospace}.hx-s3-map{position:absolute;right:3%;bottom:7%;z-index:3;width:300px;height:180px;opacity:.2;background:radial-gradient(ellipse at 35% 45%,transparent 0 20%,#38bdf8 21% 21.5%,transparent 22%),radial-gradient(ellipse at 65% 55%,transparent 0 20%,#38bdf8 21% 21.5%,transparent 22%);border:1px solid rgba(125,211,252,.25);border-radius:50%;transform:scaleY(.58);will-change:transform,opacity}.hx-s3-map::before{content:'';position:absolute;inset:15%;border:1px dashed rgba(125,211,252,.35);border-radius:50%}.hx-s3-map span{position:absolute;width:7px;height:7px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 12px #6ee7b7;animation:hx-pulse 1.6s infinite}.hx-s3-map span:nth-child(1){left:25%;top:36%}.hx-s3-map span:nth-child(2){left:54%;top:53%}.hx-s3-map span:nth-child(3){left:75%;top:29%}.hx-s3-map span:nth-child(4){left:42%;top:70%}
.hx-s3-devices{position:absolute;right:3%;top:25%;z-index:9;width:min(610px,49vw);height:57%;transform-style:preserve-3d;will-change:transform,opacity}.hx-s3-tablet{position:absolute;left:4%;top:0;width:82%;height:82%;padding:0 18px 15px;border-radius:20px;background:linear-gradient(145deg,rgba(24,73,98,.9),rgba(5,20,34,.93));border-color:rgba(125,211,252,.45);transform:rotateY(-18deg) rotateX(5deg);box-shadow:0 40px 85px rgba(0,0,0,.65),0 0 35px rgba(34,211,238,.18)}.hx-s3-tablet header,.hx-s3-phone header{height:38px;display:flex;align-items:center;justify-content:space-between;font:600 9px/1 'Space Grotesk',monospace;letter-spacing:.16em;color:#dbeafe}.hx-s3-tablet header b{color:#6ee7b7}.hx-s3-dash{height:calc(100% - 70px);display:flex;align-items:flex-end;gap:12px;padding:24px 16px;border:1px solid rgba(125,211,252,.18);border-radius:12px;background:linear-gradient(rgba(125,211,252,.06) 1px,transparent 1px);background-size:100% 28px}.hx-s3-dash i{flex:1;height:var(--h,60%);border-radius:4px 4px 0 0;background:linear-gradient(#67e8f9,#2563eb);box-shadow:0 0 12px rgba(34,211,238,.4)}.hx-s3-dash i:nth-child(1){--h:35%}.hx-s3-dash i:nth-child(2){--h:62%}.hx-s3-dash i:nth-child(3){--h:48%}.hx-s3-dash i:nth-child(4){--h:80%}.hx-s3-dash i:nth-child(5){--h:66%}.hx-s3-dash i:nth-child(6){--h:92%}.hx-s3-tablet footer{display:flex;justify-content:space-between;margin-top:12px;font:600 9px/1 'Space Grotesk',monospace;color:#7d9bb3}.hx-s3-tablet footer b{color:#6ee7b7}.hx-s3-phone{position:absolute;right:0;bottom:-10%;z-index:3;width:160px;height:300px;padding:0 11px 16px;border-radius:25px;background:linear-gradient(145deg,rgba(42,111,132,.96),rgba(7,18,31,.98));border-color:rgba(165,243,252,.7);transform:rotateY(18deg) rotateX(4deg) rotateZ(3deg);box-shadow:0 35px 75px rgba(0,0,0,.7),0 0 35px rgba(34,211,238,.35)}.hx-s3-phone header{height:32px}.hx-s3-phone header i{width:40px;height:5px;border-radius:10px;background:#bae6fd}.hx-s3-list{display:flex;flex-direction:column;gap:9px}.hx-s3-list i{height:55px;border-radius:8px;background:linear-gradient(135deg,rgba(103,232,249,.5),rgba(30,64,175,.25));border:1px solid rgba(255,255,255,.15)}.hx-s3-phone strong{display:block;margin-top:12px;color:#e0f2fe;font:700 10px/1 'Space Grotesk',monospace}
.hx-s3{background:radial-gradient(85% 110% at 74% 48%,#123b5a,#071521 56%,#03070c);perspective:1400px}
.hx-s3-copy{position:absolute;left:var(--hx-pad);bottom:12%;z-index:8;min-width:0;width:min(390px,34vw);max-width:calc(100% - var(--hx-pad) * 2)}
.hx-s3-copy h2{max-width:100%;font-size:clamp(32px,min(4.5vw,9.5vh),72px);color:#e0f2fe;text-shadow:0 18px 40px rgba(0,0,0,.6)}
.hx-s3-copy .hx-lead{margin-top:16px;font-size:clamp(13px,1vw,16px);line-height:1.65;color:#a7bed0}
.hx-s3-cluster{position:absolute;right:var(--hx-pad);top:9%;z-index:5;width:min(650px,56vw);height:min(560px,76vh);transform-style:preserve-3d;perspective:1400px}
.hx-s3-circuits{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.hx-s3-circuits path{fill:none;stroke:#4de9ff;stroke-width:1.2;stroke-dasharray:5 10;filter:drop-shadow(0 0 6px #22d3ee);animation:hx-dash 4s linear infinite}
.hx-s3-module,.hx-s3-core{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(16px,2vw,25px);border:1px solid rgba(125,211,252,.55);background:linear-gradient(145deg,rgba(14,116,144,.52),rgba(8,20,31,.9));box-shadow:0 25px 55px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.18),0 0 28px rgba(14,165,233,.25);transform-style:preserve-3d;aspect-ratio:1.55;will-change:transform,opacity}
.hx-s3-module::after{content:'';position:absolute;inset:8px;border:1px solid rgba(125,211,252,.12);pointer-events:none}
.hx-s3-module b,.hx-s3-core b{font:800 clamp(14px,1.5vw,22px)/1 'Space Grotesk',monospace;letter-spacing:.16em;color:#e0f2fe}
.hx-s3-module small,.hx-s3-core small{font:500 clamp(9px,.8vw,11px)/1.3 'Space Grotesk',monospace;letter-spacing:.08em;color:#8eb4c9;text-transform:uppercase}
.hx-s3-api{left:7%;top:18%;width:36%;transform:translateZ(90px) rotateY(8deg)}
.hx-s3-ui{right:5%;top:17%;width:36%;transform:translateZ(40px) rotateY(-8deg)}
.hx-s3-db{left:9%;bottom:15%;width:36%;transform:translateZ(35px) rotateY(8deg)}
.hx-s3-cloud{right:4%;bottom:14%;width:36%;transform:translateZ(100px) rotateY(-8deg)}
.hx-s3-core{left:35%;top:39%;z-index:3;width:30%;aspect-ratio:1;border-radius:50%;align-items:center;text-align:center;padding:12px;background:radial-gradient(circle at 35% 25%,#bffcff,#0891b2 17%,#312e81 58%,#080c1d 76%);border-color:#67e8f9;box-shadow:0 0 55px rgba(34,211,238,.65),inset 0 0 25px rgba(255,255,255,.28);will-change:transform,opacity}
.hx-s3-core small{color:#c4b5fd}
.hx-s3-watermark{position:absolute;left:4%;top:4%;z-index:1;color:rgba(125,211,252,.055);font:800 clamp(100px,22vw,300px)/.8 'Space Grotesk',monospace;letter-spacing:-.08em;pointer-events:none;white-space:nowrap}.hx-s3-watermark span{display:block;margin-left:1em;font-size:clamp(9px,1vw,14px);letter-spacing:.42em;color:rgba(125,211,252,.18)}
.hx-s3-blueprint{position:absolute;inset:5% 0 0;z-index:1;opacity:.4;pointer-events:none;background-image:linear-gradient(rgba(125,211,252,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.06) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(65% 75% at 55% 46%,#000,transparent 90%)}
.hx-s3-blueprint span,.hx-s3-blueprint i{position:absolute;display:block;border:1px solid rgba(125,211,252,.28);transform:rotate(45deg);}.hx-s3-blueprint span{width:clamp(90px,13vw,210px);height:clamp(90px,13vw,210px)}.hx-s3-blueprint span:nth-child(1){left:6%;top:12%}.hx-s3-blueprint span:nth-child(2){left:31%;top:3%;width:90px;height:90px}.hx-s3-blueprint span:nth-child(3){right:8%;top:15%;width:140px;height:140px}.hx-s3-blueprint span:nth-child(4){left:18%;bottom:10%;width:120px;height:120px}.hx-s3-blueprint i{width:24%;height:1px;border-width:1px 0 0;transform:rotate(-18deg)}.hx-s3-blueprint i:nth-of-type(1){left:2%;top:44%}.hx-s3-blueprint i:nth-of-type(2){right:3%;bottom:26%;transform:rotate(18deg)}
.hx-s3-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 52% 52%,rgba(34,211,238,.08),transparent 34%)}.hx-s3-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#a5f3fc;box-shadow:0 0 10px #22d3ee;opacity:.45;animation:hx-s3-particle 7s linear infinite;animation-delay:var(--d)}@keyframes hx-s3-particle{0%{transform:translate3d(0,-18px,0);opacity:.08}40%{opacity:.7}100%{transform:translate3d(18px,28px,0);opacity:.12}}
.hx-s3-cluster{width:min(720px,62vw);right:clamp(5%,var(--hx-pad),10%);}
.hx-s3-circuits path{stroke-width:1.35}.hx-s3-circuits .hx-s3-trace{stroke:#a5f3fc;stroke-width:2;stroke-dasharray:2 18;filter:drop-shadow(0 0 8px #67e8f9)}
.hx-s3-orbits{position:absolute;left:27%;top:30%;width:46%;height:40%;z-index:2;transform-style:preserve-3d;pointer-events:none}.hx-s3-orbits i{position:absolute;inset:-10%;border:1px solid rgba(103,232,249,.42);border-radius:50%;transform:rotateX(68deg) rotateZ(24deg);box-shadow:0 0 16px rgba(34,211,238,.2);will-change:transform}.hx-s3-orbits i:nth-child(2){inset:5% -14%;transform:rotateX(72deg) rotateZ(-43deg);border-color:rgba(196,181,253,.4)}.hx-s3-orbits i:nth-child(3){inset:-17% 14%;transform:rotateY(65deg) rotateZ(20deg);border-color:rgba(125,211,252,.32)}
.hx-s3-module em,.hx-s3-core em{font:600 clamp(7px,.65vw,9px)/1 'Space Grotesk',monospace;letter-spacing:.12em;color:#6ee7b7;font-style:normal}.hx-s3-module em{position:absolute;right:12px;bottom:10px}.hx-s3-module i,.hx-s3-module span{display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:#67e8f9;box-shadow:0 0 8px #22d3ee}.hx-s3-module i:nth-of-type(1),.hx-s3-module span:nth-of-type(1){right:13px;top:14px}.hx-s3-module i:nth-of-type(2),.hx-s3-module span:nth-of-type(2){right:23px;top:14px;opacity:.55}.hx-s3-module i:nth-of-type(3),.hx-s3-module span:nth-of-type(3){right:33px;top:14px;opacity:.25}
.hx-slide,.hx-slide > *{max-width:100%;box-sizing:border-box}
.hx-slide,.hx-slide > *{will-change:transform,opacity}
.hx-slide{touch-action:pan-y}
.hx.is-transitioning .hx-nav button{pointer-events:none;cursor:wait}
.hx.is-transitioning .hx-nav button{opacity:.25}
.hx.is-transitioning .hx-arrows{pointer-events:none;cursor:wait}
/* incoming slide's inner blocks stay hidden while the box slides in; enter[] reveals them once it lands */
.hx-slide.is-incoming>*{opacity:0!important}
.hx-s3-ecosystem{perspective:1400px;transform-style:preserve-3d;max-width:calc(100% - var(--hx-pad) * 2);overflow:visible}
.hx-s3-stack{display:block;transform-style:preserve-3d;isolation:isolate}
.hx-s3-screen{will-change:transform,opacity;backface-visibility:hidden}

@media (max-width:767px){
  .hx{--hx-scale:clamp(.72,calc(100vw / 480),.8);width:100%;max-width:100vw}
  .hx-slide{width:100%;max-width:100vw}
  .hx-s3{display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
  .hx-s3-copy{position:relative;left:auto;bottom:auto;width:auto;max-width:100%;margin:clamp(26px,7vh,56px) var(--hx-pad) 0;z-index:8}
  .hx-s3-cluster{position:relative;right:auto;top:auto;width:calc(100% - var(--hx-pad) * 2);height:auto;min-height:clamp(290px,62vw,420px);margin:clamp(18px,4vh,36px) var(--hx-pad) 64px;}
  .hx-s3-module{padding:clamp(11px,3vw,18px);}
  .hx-s3-core{width:25%;left:37.5%}
  .hx-s3-module b,.hx-s3-core b{font-size:clamp(10px,2.5vw,16px)}
  .hx-s3-module small,.hx-s3-core small{font-size:clamp(7px,1.8vw,10px)}
  .hx-s3-copy h2{font-size:clamp(30px,8vw,48px)}
  .hx-s3-copy .hx-lead{font-size:clamp(13px,3.5vw,16px)}
  .hx-s3-watermark{left:var(--hx-pad);top:3%;font-size:clamp(82px,24vw,150px);opacity:.8}.hx-s3-watermark span{font-size:8px}
  .hx-s3-blueprint{opacity:.2}.hx-s3-particles{opacity:.65}.hx-s3-orbits{opacity:.45}.hx-s3-circuits{opacity:.5}
}

@media (max-width:1024px){
  .hx{height:auto;min-height:clamp(640px,100svh,900px);overflow:hidden}
  .hx-stage,.hx-slide{min-height:inherit}
  .hx-slide{flex-direction:column;max-width:100vw;overflow:hidden;padding:clamp(20px,4vw,40px) var(--hx-pad) 76px}
  .hx-slide > *{max-width:100%;min-width:0}
  .hx-s1 .hx-hud{position:relative;inset:auto;width:100%;height:100%;display:flex;flex-direction:column;gap:12px;padding:0}
  .hx-s1 .hx-copy{order:1;display:flex;max-width:100%;padding:0;min-height:260px}
  .hx-s1 .hx-p-chart{order:2;display:flex;height:150px}
  .hx-s1 .hx-p-term{order:3;height:180px}
  .hx-s1 .hx-p-stats,.hx-s1 .hx-p-ring,.hx-s1 .hx-p-log,.hx-s1 .hx-p-top,.hx-s1 .hx-float{display:none}
  .hx-s2 .hx-copy,.hx-s2 .hx-iso{position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:100%;max-width:100%}
  .hx-s2 .hx-copy{order:1;max-width:600px;padding:0;}
  .hx-s2 .hx-iso{order:2;height:clamp(300px,45vw,460px);margin-top:20px}
  .hx-s2 .hx-side{display:none}
  .hx-s4 .hx-ui{position:relative;width:100%;height:auto;display:flex;flex-direction:column;gap:14px;padding:0}
  .hx-s4 .hx-brain{order:1;width:100%;}
  .hx-s4 .hx-readout{order:2;align-self:flex-start}
  .hx-s4 .hx-legend{order:3}
  .hx-s5 .hx-copy{position:relative;left:auto;top:auto;order:1;max-width:100%;padding:0}
  .hx-s5 .hx-scene{position:relative;order:2;inset:auto;height:clamp(300px,52vw,460px);margin-top:20px}
  .hx-s5 .hx-tab,.hx-s5 .hx-phone,.hx-s5 .hx-note{display:none}
  .hx-s5 .hx-mac{left:10%;top:8%;width:80%;height:76%}
  .hx-s6 .hx-copy,.hx-s7 .hx-body,.hx-s8 .hx-copy,.hx-s9 .hx-copy,.hx-s10 .hx-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:100%;margin:0;padding:0}
  .hx-s6 .hx-copy,.hx-s7 .hx-body,.hx-s8 .hx-copy,.hx-s9 .hx-copy,.hx-s10 .hx-copy{z-index:7}
  .hx-s6 .hx-copy{margin:auto 0}
  .hx-s6 .hx-hud,.hx-s6 .hx-warp{display:none}
  .hx-s7 .hx-body{display:flex;flex-direction:column;gap:22px;margin:auto 0}
  .hx-s7 .hx-gauges{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-s8 .hx-ring3d{position:relative;left:auto;top:auto;order:2;width:min(280px,60vw);height:clamp(300px,52vw,390px);margin:28px auto 0;transform:none}
  .hx-s8 .hx-copy{order:1}
  .hx-s9 .hx-explode{position:relative;right:auto;top:auto;order:2;width:100%;height:clamp(260px,45vw,420px);margin:24px 0 0;transform:none}
  .hx-s9 .hx-specs,.hx-s9 .hx-assemble,.hx-s9 .hx-tick{display:none}
  .hx-s10 .hx-copy{margin:auto 0}
  .hx-s10 canvas{width:min(70vw,500px);height:min(70vw,500px);}
  .hx-nav{right:8px}
}

@media (max-width:767px){
  .hx-s3{min-height:720px;padding:0 18px 70px;justify-content:center}
  .hx-s3-code-bg{left:2%;top:7%;width:96%;height:60%;opacity:.1;transform:scale(.7) rotateY(5deg);transform-origin:50% 0}
  .hx-s3-grid{opacity:.22}.hx-s3-links{opacity:.3}.hx-s3-map{opacity:.12;right:0;bottom:16%;width:230px;height:140px}
  .hx-s3-watermark{left:8%;top:7%;font-size:clamp(80px,27vw,140px);opacity:.5}
  .hx-s3-copy{position:relative;left:auto;bottom:auto;width:100%;max-width:100%;margin:0;text-align:center;z-index:12}
  .hx-s3-copy .hx-actions{justify-content:center}.hx-s3-copy h2{font-size:clamp(32px,10vw,50px)}
  .hx-s3-devices{position:relative;right:auto;top:auto;width:82%;height:300px;margin:24px auto 0;transform:scale(.7);transform-origin:50% 0;z-index:12}
  .hx-s3-tablet{opacity:.2}.hx-s3-phone{right:12%;bottom:0;width:155px;height:290px;transform:rotateY(10deg) rotateZ(2deg)}
  .hx-s3-stats,.hx-s3-uptime,.hx-s3-security{opacity:.2;transform:scale(.7)}
  .hx-s3-stats{left:3%;top:29%}.hx-s3-uptime{right:2%;top:57%}.hx-s3-security{left:4%;bottom:12%}
  .hx-s3-network{opacity:.22}.hx-s3-particles{opacity:.55}
  .hx-s2 .hx-copy{position:relative;top:auto;left:auto;transform:none;order:1;width:100%;max-width:100%;margin:0;padding:0;text-align:center;z-index:6}
  .hx-s2 .hx-copy .hx-actions{justify-content:center}
  .hx-s2 .hx-iso{order:2;margin-top:12px}
  .hx-s8 .hx-ring3d{order:2;margin-top:8px}
  .hx-s8 .hx-copy{display:block;position:relative;left:auto;top:auto;transform:none;order:1;width:100%;max-width:100%;margin:0;padding:0;text-align:center;z-index:8}
  .hx-s8 .hx-copy .hx-actions{justify-content:center}
  .hx-s8 .hx-ring3d{margin-top:clamp(34px,7vh,62px)}
}

/* Final responsive guardrails. Keep copy and visual surfaces inside viewport. */
@media (min-width:1025px) and (max-height:760px){
  .hx{min-height:560px}
  .hx-slide h2{font-size:clamp(30px,min(4.4vw,8.5vh),72px)}
  .hx-s1 .hx-copy h2{font-size:clamp(32px,min(4.8vw,8.5vh),78px)}
  .hx-s1 .hx-copy{grid-row:2/7}
  .hx-s8 .hx-ring3d{height:min(330px,42vh)}
}

@media (max-width:1024px){
  .hx{height:auto;min-height:clamp(640px,100svh,920px);overflow:hidden}
  .hx-stage{position:relative;min-height:inherit}
  .hx-slide{position:absolute;inset:0;width:100%;min-height:inherit;height:auto;overflow:hidden}
  .hx-slide h2{font-size:clamp(30px,6vw,64px);line-height:.98}
  .hx-copy,.hx-s3-copy,.hx-brain,.hx-body,.hx-ui,.hx-scene,.hx-iso,.hx-ring3d,.hx-explode{min-width:0}
  .hx-s1 .hx-copy h2{font-size:clamp(34px,7vw,72px)}
  .hx-s1 .hx-copy{min-height:0}
  .hx-s2 .hx-iso,.hx-s5 .hx-scene,.hx-s8 .hx-ring3d,.hx-s9 .hx-explode{max-width:100%;}
  .hx-s10 canvas{display:block;max-width:100%;height:auto}
}

@media (max-width:600px){
  .hx{min-height:clamp(680px,100svh,900px);--hx-pad:clamp(16px,5vw,24px)}
  .hx-slide{padding:clamp(18px,5vw,28px) var(--hx-pad) 72px}
  .hx-slide h2{font-size:clamp(28px,9vw,48px);line-height:1;letter-spacing:-.035em}
  .hx-slide .hx-lead{max-width:100%;font-size:clamp(13px,3.7vw,16px);line-height:1.55}
  .hx-actions{flex-wrap:wrap;max-width:100%}
  .hx-cta{max-width:100%;white-space:normal;text-align:center}
  .hx-s1 .hx-copy{min-height:0;justify-content:flex-start;margin-top:clamp(8px,3vh,24px)}
  .hx-s1 .hx-copy h2{font-size:clamp(32px,10vw,52px)}
  .hx-s2 .hx-iso{height:clamp(250px,62vw,360px);margin-top:12px;top:auto}
  .hx-s2 .hx-iso{display:block;position:relative;left:50%;width:min(92vw,420px);transform:translateX(-50%);perspective:1100px}
  .hx-s2 .hx-layer{width:min(300px,70vw);height:min(150px,35vw);margin:-75px 0 0 -150px}
  .hx-s2 .hx-node{transform:rotateX(58deg) rotateZ(-45deg) translate3d(calc(var(--nx,0px) * .55),calc(var(--ny,0px) * .55),calc(var(--nz,0px) * .55))}
  .hx-s5 .hx-scene{height:clamp(250px,64vw,360px)}
  .hx-s8 .hx-ring3d{width:100%;height:clamp(320px,55vh,480px);margin:clamp(34px,7vh,62px) auto 0;overflow:visible;perspective:1100px}
  .hx-s8 .hx-ring-inner{transform-style:preserve-3d}
  .hx-s8 .hx-cardx{inset:auto;left:50%;top:50%;width:min(50vw,190px);height:clamp(230px,34vh,320px);margin:calc(clamp(-160px,-17vh,-115px)) 0 0 min(-95px,-25vw);padding:16px;backface-visibility:hidden}
  .hx-s8 .hx-cardx b{font-size:clamp(14px,4.2vw,19px)}
  .hx-s8 .hx-legend{display:none}
  .hx-s9 .hx-explode{height:clamp(220px,58vw,340px)}
  .hx-s10 canvas{width:min(72vw,360px);margin-inline:auto}
  .hx-nav{bottom:14px;right:var(--hx-pad);max-width:calc(100% - 2 * var(--hx-pad))}
}