/* ORSLON infrastructure illustration: real CSS 3D geometry, no WebGL runtime.
   All faces share one coordinate system. Official logo artwork is unchanged;
   its chip placement follows the same perspective as the processor surface. */
.hero-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: -2; overflow: hidden; }
.hero-atmosphere > span:first-child { position: absolute; width: 720px; height: 720px; top: -210px; right: -100px; border-radius: 50%; background: radial-gradient(circle,#e4864935,#e486490d 42%,transparent 70%); }
.hero-atmosphere > span:last-child { position: absolute; width: 720px; height: 700px; bottom: -460px; left: 10%; background: radial-gradient(ellipse,#5e8aa22b,transparent 65%); }
.hero-visual { position: relative; min-width: 0; align-self: center; isolation:isolate; }
.hero-visual::before { content:''; position:absolute; inset:3% -2% 4% 3%; z-index:-1; border:1px solid #ffffff8f; border-radius:38px 0 0 38px; background:radial-gradient(circle at 64% 40%,#31475d 0,transparent 46%),radial-gradient(circle at 88% 12%,#6a493a66 0,transparent 32%),linear-gradient(135deg,#0b1a2a,#172b40); box-shadow:0 38px 100px -38px #10263bc7,inset 0 1px #ffffff30,inset 24px 0 70px -52px #ff9a5a; }
.hero-visual::after { content:''; position:absolute; z-index:2; left:7%; right:3%; top:3%; height:1px; background:linear-gradient(90deg,transparent,#ff9a61 34%,#ffffffb0 58%,transparent); background-size:180% 100%; opacity:.8; pointer-events:none; }
@keyframes hero-frame-scan { from { background-position:120% 0; } to { background-position:-80% 0; } }
@keyframes hero-brand-float { 50% { transform:translateY(-4px); } }
@media (prefers-reduced-motion:no-preference) { .hero-visual::after { animation:hero-frame-scan 5.5s linear infinite; } .scene-stage.video-active .scene-overlay-brand { animation:hero-brand-float 4s ease-in-out infinite; } }
/* Full-bleed treatment: the scene leaves the grid column and fills the whole
   hero behind the copy. The text column keeps its own width, so line lengths
   are unchanged — only the artwork grows. */
@media (min-width: 901px) {
  /* Becomes the containing block for the absolutely placed scene, so the
     artwork is bounded by this row instead of the whole hero stage. */
  .hero-grid { position: relative; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  /* Anchored to the right half so the composition sits clear of the headline
     while still bleeding to the section edges. */
  /* Stays pointer-reactive: the parallax listener lives here, and the copy sits
     on a higher layer so its links keep priority where the two overlap. */
  /* The artwork spans the grid row only, not the whole stage, so it can never
     reach the pillar row below — circuit traces were otherwise drawing straight
     through the pillar headings. Sized by the grid rather than a fixed inset,
     which drifts as the pillar block changes height across breakpoints. */
  /* `overflow: clip` matters: the scene's own min-height makes its content
     taller than this row, and without clipping that surplus spills over the
     pillar headings below as stray circuit traces. Clip, unlike hidden, does
     not create a scroll container. */
  /* Bleeds past the grid's right gutter to the section edge. The grid is capped
     at --content-width, so on wide screens stopping at its edge left a visibly
     empty band between the artwork and the viewport. */
  .hero-visual { position:absolute; inset:0 calc(-1 * var(--gutter)) 0 45%; z-index:0; display:grid; place-items:center; margin:0; overflow:clip;
    /* The scene's own min-height would otherwise stretch this box past the
       bottom inset and back over the pillars; cap it at the row it lives in. */
    height: 100%; max-height: 100%; }
  .hero-visual .scene-stage { position:absolute; inset:0; width:100%; height:auto; min-height:0; max-height:none; }
  .hero-visual .scene-art { width:100%; height:100%; }
  /* The artwork itself must not intercept clicks meant for the pillars and the
     scroll link it now covers; the visual still receives pointermove for parallax. */
  .hero-visual .scene-stage { pointer-events: none; }
  /* No min-height here: it is what pushed the visual past its bottom inset. */
  .infrastructure-scene { height: 100%; min-height: 0; }
  /* The camera is a fixed-size 3D rig; scale rather than resize it so the
     perspective and every translateZ level stay proportional. */
  .scene-camera { scale: 1.5; }
  /* Bounded to the copy it holds. Left full width it would cover the scene and
     swallow the pointer events the 3D parallax listens for. */
  .hero-content { position:relative; z-index:2; width:fit-content; max-width:min(100%,620px); }
  /* No grid placement: for an absolutely positioned grid child the containing
     block is its grid AREA, which is taller than the row and pushes the artwork
     down over the pillars. Without placement it resolves against the grid's
     padding box instead, which is the bound we actually want. */
  /* Copy must stay readable over the artwork behind it. The scrim is a linear
     wash rather than an ellipse: a radial gradient's far edge lands inside the
     hero and reads as a vertical seam, while this one resolves to fully
     transparent well before the scene. */
  .hero-content::before { content:''; position:absolute; inset:-18% -66% -18% -60%; z-index:-1;
    background:linear-gradient(90deg,#f2f6f6f8 0 40%,#edf2f3df 58%,#edf2f36b 74%,transparent 88%);
    /* Feathered vertically too, so the wash cannot dim the topline or pillars
       that sit outside this column. */
    -webkit-mask-image: linear-gradient(#0000, #000 16%, #000 84%, #0000);
    mask-image: linear-gradient(#0000, #000 16%, #000 84%, #0000); }
  /* The control belongs to the scene, not the pillars it now sits over, and must
     clear the scroll affordance parked in the same corner. */
  /* The render is square but this slot is wide, so `contain` letterboxed it and
     left roughly 37% of the width empty. `cover` fills the slot; the crop takes
     only the render's own margins — the stack, all three cards and the ORSLON
     lockup stay inside the frame. Nudged up slightly so the lockup is not the
     first thing to go. */
}
.scene-heading, .scene-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 8px/1.5 var(--f-mono); letter-spacing: .13em; color: #9baab9; }
.scene-heading { padding: 0 10px 18px; border-bottom: 1px solid #ffffff12; }
.scene-kicker { color: #b6c6d4; }
.scene-coordinates { color: #f5a276; }
.infrastructure-scene { height: 480px; position: relative; perspective: 1000px; isolation: isolate; }
.scene-halo { position: absolute; width: 390px; height: 330px; top: 120px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, #fa6f2829 0%, #ff793208 45%, transparent 70%); pointer-events: none; }
.scene-camera { --scene-x: 0deg; --scene-y: 0deg; width: 420px; height: 420px; position: absolute; top: 50%; left: 50%; margin: -210px 0 0 -210px; transform-style: preserve-3d; transform: rotateX(var(--scene-y, 0deg)) rotateY(var(--scene-x, 0deg)); transition: transform 600ms var(--ease); }
.scene-world { width: 420px; height: 420px; position: relative; transform-style: preserve-3d; transform: rotateX(57deg) rotateZ(-37deg); }
.circuit-floor { position: absolute; width: 520px; height: 520px; top: -50px; left: -50px; transform: translateZ(-85px); background: radial-gradient(#96b4c929 1px, transparent 1px); background-size: 22px 22px; border: 1px solid #728ea513; border-radius: 30px; }
.circuit-floor svg { width: 100%; height: 100%; overflow: visible; }
.circuit-track { stroke: #91a5bd32; stroke-width: 1.5; }
.circuit-signal { stroke: #ff9d5a; stroke-width: 2; stroke-dasharray: 12 180; stroke-dashoffset: 0; }
.circuit-nodes { fill: #b55e32; stroke: #ffd8a660; stroke-width: 2; }
.compute-layer { --level: 0px; --delay: 0ms; position: absolute; width: 232px; height: 232px; left: 94px; top: 94px; transform: translateZ(var(--level)); transform-style: preserve-3d; animation: layer-assemble 1500ms var(--ease) var(--delay) both; }
.layer-top { position: absolute; inset: 0; border: 1px solid #8da8c56b; border-radius: 9px; background: linear-gradient(135deg, #36516adb, #1a3047eb 50%, #415770d9); box-shadow: inset 0 0 0 7px #b5c4d407, inset 0 0 32px #a9c9e514; transform-style: preserve-3d; }
.layer-front { position: absolute; height: 17px; left: 0; right: 0; top: 100%; transform-origin: top; transform: rotateX(-90deg); background: linear-gradient(#294057, #142338); border: 1px solid #7896ad40; border-radius: 0 0 3px 3px; display: flex; align-items: center; gap: 5px; padding-inline: 13px; }
.layer-front i { width: 3px; height: 3px; background: #eaaa73; border-radius: 50%; box-shadow: 0 0 5px #ff904359; }
.layer-front > span { margin-left: auto; font: 6px var(--f-mono); letter-spacing: .1em; color: #cbd5df; }
.layer-side { position: absolute; width: 17px; top: 0; bottom: 0; left: 100%; transform-origin: left; transform: rotateY(90deg); background: linear-gradient(90deg, #1c3045, #0e1c2d); border: 1px solid #8ca5bb42; border-radius: 0 3px 3px 0; }
.layer-foundation { --level: -65px; --delay: 0ms; }
.layer-foundation .layer-top { box-shadow: 15px 20px 45px #0009, inset 0 0 0 8px #aebac609; background: linear-gradient(135deg, #2a4058, #111e31); }
.board-grid { position: absolute; inset: 15px; border: 1px solid #bfd7e31f; border-radius: 4px; background: repeating-linear-gradient(0deg, transparent 0 15px, #b1c5d50a 16px), repeating-linear-gradient(90deg, transparent 0 15px, #b1c5d50a 16px); }
.layer-platform { --level: -10px; --delay: 100ms; }
.layer-security { --level: 45px; --delay: 200ms; }
.layer-security .layer-top { background: linear-gradient(135deg, #69869f63, #2d485d91); border-color: #d1e5f280; }
.board-traces { position: absolute; inset: 26px; border: 1px solid #e0eff13b; border-radius: 6px; }
.board-traces::before, .board-traces::after { content: ''; position: absolute; inset: 18px -27px; border-block: 1px solid #d6eaf03d; }
.board-traces::after { inset: -27px 18px; border-block: 0; border-inline: 1px solid #d6eaf03d; }
.layer-intelligence { --level: 102px; --delay: 300ms; }
.layer-intelligence .layer-top { border-color: #ffe9cacc; background: linear-gradient(135deg, #faf0d59c, #7c6c5882 45%, #d7ae7470); box-shadow: inset 0 0 0 8px #fff6, 0 0 35px #ffa35418; }
.layer-intelligence .layer-front { background: linear-gradient(#bda687, #67564b); border-color: #f8d5a480; }
.layer-intelligence .layer-side { background: linear-gradient(90deg, #a49075, #635347); border-color: #f8d5a480; }
.layer-intelligence .layer-front > span { color: #fff7e7; }
.chip-socket { position: absolute; inset: 53px; background: repeating-linear-gradient(0deg, transparent 0 8px, #ffd69788 8px 10px, transparent 10px 15px), repeating-linear-gradient(90deg, transparent 0 8px, #ffd69788 8px 10px, transparent 10px 15px); padding: 11px; transform: translateZ(2px); transform-style: preserve-3d; }
.chip-core { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(145deg, #ffc477, #fc6416 65%, #c94309); border: 2px solid #ffe7c0; border-radius: 8px; box-shadow: 5px 6px 0 #8b3c16, 6px 7px 0 #ffb76c, 0 0 40px #ff8d446b; transform: translateZ(9px); }
.chip-logo { display: grid; place-items: center; width: 70px; height: 70px; object-fit: contain; padding: 6px; border-radius: 50%; background: #fff8eb; box-shadow: 0 1px 0 #ffffff, 0 3px 9px #87381030; overflow: hidden; }
.logo-build { width: 100%; height: 100%; }
/* Each piece rotates about the mark's own centre, not its own bounding box, so
   the four fragments converge on one point instead of spinning independently. */
.lb-piece { transform-origin: 500px 500px; transform-box: view-box; }
.scene-pillar { position: absolute; width: 5px; height: 5px; background: #ffd0a680; border: 1px solid #ffdfb77a; box-shadow: 0 0 8px #ff9a4c5e; transform: translateZ(106px); }
.pillar-one { left: 112px; top: 112px; }.pillar-two { left: 306px; top: 112px; }.pillar-three { left: 112px; top: 306px; }
.scene-node { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #9ab1c136; border-top-color: #b8ced757; border-radius: 9px; background: linear-gradient(130deg, #304050e8, #122232f2); box-shadow: 0 14px 30px #0004, inset 0 1px 0 #ffffff0a; backdrop-filter: blur(12px); }
.node-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff29; border-radius: 7px; background: #ffffff07; color: #f5cda7; }
.node-icon svg { width: 19px; height: 19px; }
.scene-node > span:nth-child(2) { font: 500 11px/1.4 var(--f-display); color: #edf1f3; }
.scene-node small { display: block; font: 6px/1.5 var(--f-mono); letter-spacing: .08em; color: #b5c0ca; margin-top: 5px; }
.scene-node > i { display: block; width: 4px; height: 4px; border-radius: 50%; background: #ffc283; margin-left: 7px; }
.node-cloud { top: 40px; left: 4%; }.node-security { top: 160px; right: -2%; }.node-ai { bottom: 44px; left: 0; }
.node-infra { top: 34px; right: 6%; }
/* Full-bleed placement. Declared after the boxed positions above, which would
   otherwise win on source order: at those percentages the labels drifted over
   the headline on the left and clipped the section edge on the right. */
@media (min-width: 901px) {
  .node-cloud { top: 46px; left: 20%; right: auto; }
  .node-infra { top: 30px; right: 8%; left: auto; }
  .node-security { top: 216px; right: 4%; left: auto; }
  .node-ai { bottom: 56px; left: 18%; right: auto; }
}
/* Connectors from each label to the circuit endpoint it belongs to. Drawn in
   screen space over the 3D world: the endpoints live inside a rotated,
   perspective-projected floor, so their on-screen position can only be measured,
   not written down. preserveAspectRatio="none" lets the 0-100 viewBox act as
   percentages; non-scaling-stroke keeps the hairline even under that stretch. */
.scene-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.scene-links line { stroke: #ffa96b8c; stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200); }
.scene-links circle { fill: #ff9d5a; stroke: #ffd8a6; stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.scene-brand { position: absolute; right: 10%; bottom: 21px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.scene-brand-name { display:block; color:#dae3e9; font-size:15px; line-height:1; animation:brand-entrance 1100ms var(--ease) both; }
.scene-brand small { display: block; font: 6px var(--f-mono); letter-spacing: .04em; color: #aebcc9; }
.scene-footer { padding: 18px 10px 0; border-top: 1px solid #ffffff12; font-size: 7px; }
.scene-footer > span:first-child { display: flex; gap: 7px; align-items: center; }.scene-footer i { width: 4px; height: 4px; background: #ff9f62; border-radius: 50%; }
.scene-interaction { display: flex; align-items: center; gap: 6px; }
/* The exported loop sits over the live geometry. Both occupy the same box, so
   swapping between them never reflows the hero. */
.scene-stage { position: relative; }
/* The render is square and carries its own dark backdrop. `contain` keeps the
   whole composition — chip included — inside the hero slot, and the feathered
   edge stops the square frame reading as a pasted-on rectangle. */
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease);
  -webkit-mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 58%, transparent 92%);
  mask-image: radial-gradient(ellipse 68% 68% at 50% 48%, #000 58%, transparent 92%); }
.scene-stage.video-active .scene-video { opacity: 1; }
.scene-stage.video-active .scene-art { opacity: 0; transition: opacity 500ms var(--ease); }
.scene-stage.video-active::after { content:''; position:absolute; inset:auto 0 0; z-index:3; height:18%; background:linear-gradient(0deg,#071523 0 58%,transparent); pointer-events:none; }
.scene-overlay-brand { position:absolute; right:clamp(36px,9%,88px); bottom:7%; z-index:4; display:flex; align-items:center; padding:10px 13px; border:1px solid #ffffffa8; border-radius:9px; background:#fffaf2ec; box-shadow:0 14px 30px #0005,inset 0 1px #fff; backdrop-filter:blur(14px); opacity:0; transform:translateY(8px); transition:opacity 450ms var(--ease),transform 450ms var(--ease); pointer-events:none; }
.scene-overlay-brand .scene-overlay-wordmark { width:150px; height:auto; padding:0; border:0; border-radius:0; background:transparent; }
.scene-stage.video-active .scene-overlay-brand { opacity:1; transform:none; }
/* The fallback keeps its box so the swap is a crossfade, not a jump. */
.scene-stage.video-active .scene-art { pointer-events: none; }
html:not(.js-enabled) .scene-video { display: none; }
/* Full-bleed sizing. Declared after the base rule above, which sets `inset: 0`
   and `object-fit: contain` and would otherwise win on source order.
   `cover` on a square source centres the crop, leaving the render's own dark
   margins at the right edge on a hard vertical seam. Oversizing pushes real
   artwork out to the edge; .hero-visual clips the surplus and the feather
   dissolves what is left. */
@media (min-width: 901px) {
  .scene-video { inset: auto; left: -2%; top: -6%; width: 106%; height: 112%;
    object-fit:cover; object-position:50% 54%;
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 30%, #000 76%, transparent 98%),
                        linear-gradient(0deg, transparent 4%, #000 24%, #000 84%, transparent 98%);
    mask-image: linear-gradient(90deg, transparent 2%, #000 30%, #000 76%, transparent 98%),
                linear-gradient(0deg, transparent 4%, #000 24%, #000 84%, transparent 98%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}

/* Motion details are flat children; opacity must never flatten a 3D ancestor. */
.scene-art { position: relative; }
.layer-sheen { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; transform: translateZ(1px); }
.layer-sheen > i { display: block; width: 100%; height: 100%; background: linear-gradient(110deg, transparent 30%, #fff9db08 43%, #fff9db6b 50%, #fff9db08 57%, transparent 70%); transform: translateX(-130%); }
.node-highlight { position: absolute; inset: -1px; pointer-events: none; border: 1px solid #ffb478; border-radius: inherit; box-shadow: 0 0 20px #ff99591c, inset 0 0 12px #ff995912; opacity: 0; }
/* Pointer-reactive cards. Custom properties default to a centred, untilted rest
   state so a card that never sees a pointer still renders correctly. */
.scene-node, .case-card, .engage-card { --mx: 50%; --my: 50%; --tilt-x: 0deg; --tilt-y: 0deg; }
.scene-node.is-tilting { transform: perspective(700px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform var(--duration) var(--ease); }
.scene-node::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--duration); background: radial-gradient(220px circle at var(--mx) var(--my), #ffb06e2e, transparent 68%); }
.scene-node.is-tilting::before { opacity: 1; }

/* Human product-engineering preview. The selected row updates its caption and
   the same pointer variables used by the solution cards drive its depth. */
.practice-preview { --mx:50%; --my:50%; --tilt-x:0deg; --tilt-y:0deg; position:relative; isolation:isolate; height:285px; margin-top:34px; border:1px solid #ffffffc7; border-radius:20px; background:#dce5e8; color:#fff; overflow:hidden; box-shadow:0 28px 55px -28px #18364a8c,inset 0 1px #fff; transform-style:preserve-3d; transition:transform .55s var(--ease),box-shadow .55s var(--ease); }
.practice-preview.is-tilting { transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px); box-shadow:0 38px 68px -27px #18364ab8,inset 0 1px #fff; }
.practice-preview > img { position:absolute; inset:-3%; width:106%; max-width:none; height:106%; object-fit:cover; object-position:54% 50%; filter:saturate(.82) contrast(1.02); z-index:-2; transition:transform .7s var(--ease),filter .7s; }
.practice-preview:hover > img { transform:scale(1.035); filter:saturate(.96) contrast(1.04); }
.practice-preview::before { content:''; position:absolute; inset:0; z-index:2; opacity:0; background:radial-gradient(280px circle at var(--mx) var(--my),#ffffff38,transparent 64%); transition:opacity .3s; pointer-events:none; }
.practice-preview.is-tilting::before { opacity:1; }
.practice-preview::after { position:absolute; content:''; inset:0; z-index:-1; background:linear-gradient(180deg,#0a1b2d24 0 28%,transparent 53%,#071727e8 100%),linear-gradient(90deg,#07172755,transparent 58%); }
.preview-topline { position:absolute; inset:18px 18px auto; z-index:3; display:flex; justify-content:space-between; padding:8px 10px; border:1px solid #ffffff30; border-radius:999px; background:#10243870; font:7px var(--f-mono); letter-spacing:.1em; color:#edf4f7; backdrop-filter:blur(12px); }
.preview-number { color:#ffb17b; }
.preview-chip { position:absolute; z-index:3; padding:8px 10px; border:1px solid #ffffff4a; border-radius:7px; background:#102438a3; color:#f2f6f8; box-shadow:0 12px 25px #06111d45,inset 0 1px #ffffff1f; font:7px var(--f-mono); letter-spacing:.08em; backdrop-filter:blur(12px); }
.preview-chip-a { top:69px; right:17px; }
.preview-chip-a i { display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:#94d7a9; box-shadow:0 0 0 4px #94d7a920; }
.preview-chip-b { right:17px; bottom:61px; color:#ffd0ad; }
.preview-service-rail { position:absolute; z-index:3; left:18px; bottom:18px; display:flex; gap:6px; }
.preview-point { position:relative; display:block; width:15px; height:3px; border-radius:999px; background:#ffffff5c; transition:width .35s var(--ease),background .35s,box-shadow .35s; }
.preview-point.selected { width:30px; background:#ff7b39; box-shadow:0 0 14px #ff7b3975; }
.preview-caption { position:absolute; z-index:3; bottom:48px; left:18px; max-width:70%; padding:13px 15px; border:1px solid #ffffff38; border-radius:10px; background:#0b1d2e9e; box-shadow:0 16px 30px #07131f40,inset 0 1px #ffffff1f; backdrop-filter:blur(14px); }
.preview-caption-kicker { display:block; margin-bottom:5px; color:#ffb27c; font:7px var(--f-mono); letter-spacing:.12em; }
.preview-name { display:block; font:500 20px/1.25 var(--f-display); letter-spacing:-.025em; }
.preview-stack { display:block; margin-top:6px; color:#c7d3dc; font:7px/1.6 var(--f-mono); }
@keyframes layer-assemble { from { transform: translateZ(calc(var(--level) - 100px)); } to { transform: translateZ(var(--level)); } }

@media (min-width: 1600px) { .infrastructure-scene { height: 520px; }.scene-camera { scale: 1.08; }.node-cloud { top: 55px; }.node-security { top: 190px; } }
@media (max-width: 1100px) { .scene-camera { scale: .83; }.infrastructure-scene { height: 420px; }.scene-node { padding: 10px; gap: 8px; }.scene-node > span:nth-child(2) { font-size: 10px; }.scene-node small { font-size: 5.5px; }.node-cloud { left: 0; top: 28px; }.node-security { right: -3%; top: 150px; }.node-ai { bottom: 38px; }.scene-brand { right: 0; bottom: 10px; }.scene-interaction { display: none; } }
@media (max-width: 900px) and (min-width: 701px) { .infrastructure-scene { height: 460px; }.scene-camera { scale: .88; }.node-cloud { left: 12%; }.node-security { right: 7%; }.node-ai { left: 10%; bottom: 50px; }.scene-brand { right: 12%; }.hero-visual { max-width: 620px; width: 100%; justify-self: center; }.practice-preview { grid-column: 1 / -1; margin-top: 0; height: 220px; }.preview-diagram { top: 38px; }.preview-caption { left: auto; right: 30px; bottom: 35px; max-width: 43%; }.preview-diagram { left: 28%; }.preview-topline { inset: 20px 30px auto; } }
@media (max-width: 700px) {
  .hero-visual { margin-top: 38px; }.scene-heading { font-size: 7px; padding-inline: 0; }.scene-footer { font-size: 6px; padding-inline: 0; }
  .infrastructure-scene { height: 360px; }.scene-camera { scale: .72; }.scene-halo { width: 100%; height: 260px; top: 80px; }
  .node-cloud { top: 20px; left: 0; }.node-security { top: 135px; right: -6px; }.node-ai { bottom: 33px; left: -4px; }
  .scene-node { padding: 9px 10px; gap: 7px; border-radius: 7px; }.node-icon { width: 24px; height: 24px; border-radius: 5px; }.node-icon svg { width: 16px; height: 16px; }.scene-node > span:nth-child(2) { font-size: 9px; }.scene-node small { font-size: 5px; }.scene-node > i { margin-left: 2px; width: 3px; height: 3px; }
  .scene-brand { right: 0; bottom: 13px; }.scene-brand-name { font-size: 12px; }.scene-brand small { font-size: 5px; }
  .practice-preview { height: 230px; margin-top: 26px; }.preview-diagram { top: 39px; }.preview-caption { bottom: 18px; }
}
@media (max-width: 380px) { .scene-camera { scale: .6; }.infrastructure-scene { height: 320px; }.node-cloud { top: 15px; }.node-security { top: 120px; }.node-ai { bottom: 25px; }.scene-brand-name { font-size:10px; }.scene-brand { right: 20px; bottom: 26px; } }
@media (max-width:900px) { .hero-visual::before { inset:2% -5% 3% 5%; border-radius:30px; } .hero-visual::after { left:10%; right:5%; top:2%; } }
@media (max-width:900px) { .scene-overlay-brand { display:none; } }
@media (max-width:900px) { .scene-stage.video-active::after { display:none; } }
@media (hover: none), (prefers-reduced-motion: reduce) { .scene-interaction { display: none; } }
@media (prefers-reduced-motion: reduce) { .compute-layer, .circuit-signal, .scene-brand-name { animation: none; }.scene-camera { transform: none !important; transition: none; }.preview-point { transition: none; } }
@media print { .hero-visual, .practice-preview { display: none; } }