.spatial-hero{display:grid;grid-template-columns:1fr 1.12fr;gap:40px;align-items:center;margin-top:36px}.spatial-copy h1{font-size:clamp(66px,7.5vw,106px);margin:0 0 28px}.spatial-copy>p{font-size:19px;line-height:1.6;max-width:425px;margin-bottom:28px}.spatial-copy .hero-actions{gap:20px;flex-wrap:wrap}.hero-scenarios{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px}.hero-scenarios button{border:1px solid #c9d0c3;border-radius:20px;padding:9px 13px;background:transparent;font-size:13px}.hero-scenarios [aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--lime)}.spatial-copy .interaction-hint{font-size:12px;line-height:1.6;color:var(--muted);margin-top:14px;margin-bottom:0}
.spatial-stage{--accent:#d7ff3f;position:relative;isolation:isolate;background:#151e19;color:#e9f1e5;min-height:565px;border:1px solid #455343;border-radius:8px;overflow:hidden;background-image:linear-gradient(#a5bb8910 1px,transparent 1px),linear-gradient(90deg,#a5bb8910 1px,transparent 1px);background-size:38px 38px}.spatial-stage:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#7c9c3636,transparent 65%);pointer-events:none}.stage-topline{display:flex;align-items:center;justify-content:space-between;padding:22px;position:relative;z-index:3;gap:14px}.stage-topline>span{font:10px var(--mono);letter-spacing:.08em;color:#bbcab1}.stage-topline button{background:#253326;border:1px solid #556c43;color:#e0eacb;padding:7px 10px;font-size:11px;border-radius:3px}.stage-coordinate{font:9px var(--mono);letter-spacing:.14em;color:#7f9077;position:absolute;top:230px;left:16px;writing-mode:vertical-rl;transform:rotate(180deg)}
.volume-space{position:absolute;inset:95px 15px 128px;perspective:1100px;display:grid;place-items:center}.volume-rig{width:290px;height:220px;position:relative;transform-style:preserve-3d;transform:translateY(48px) rotateX(calc(48deg + var(--pointer-y,0deg))) rotateZ(calc(-30deg + var(--pointer-x,0deg)));transition:transform .25s ease-out}.volume-layer{position:absolute;inset:0;border:1px solid #9fb979;border-radius:9px;text-align:left;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;box-shadow:0 14px 0 -1px #30432b,0 15px 0 0 #789658,0 26px 30px #0006;transition:transform .6s cubic-bezier(.22,1,.36,1),background .4s,box-shadow .4s;backface-visibility:hidden}.layer-number{font:11px var(--mono);letter-spacing:.08em}.volume-layer strong{font:500 44px 'Space Grotesk',sans-serif;letter-spacing:-.055em}.plane-meta{font:11px var(--mono)}.volume-layer i{width:10px;height:10px;border:1px solid currentColor;position:absolute;right:24px;bottom:25px;border-radius:50%}.layer-receipt{background:#24372e;color:#b6cca5;transform:translateZ(0px)}.layer-vault{background:#8da47b;color:#17201b;transform:translateZ(70px)}.layer-policy{background:var(--accent);color:#172015;transform:translateZ(140px);border-color:#edffb4}.layer-policy strong{font-size:72px;font-weight:700;letter-spacing:-.09em}.volume-layer[aria-pressed=true]{box-shadow:0 14px 0 -1px #536338,0 15px 0 #d3f994,0 0 28px #b6e16a26,0 25px 40px #0008}.spatial-stage[data-expanded=false] .layer-vault{transform:translateZ(20px)}.spatial-stage[data-expanded=false] .layer-policy{transform:translateZ(40px)}.spatial-stage[data-layer=vault][data-expanded=true] .layer-vault{transform:translateZ(92px) translateX(-20px)}.spatial-stage[data-layer=receipt][data-expanded=true] .layer-receipt{transform:translateZ(10px) translateX(-35px)}
.request-chip,.route-chip{position:absolute;z-index:2;padding:13px 16px;background:#24352be8;border:1px solid #5d754c;box-shadow:0 12px 25px #0004;border-radius:5px;max-width:230px;backdrop-filter:blur(12px)}.request-chip{top:78px;left:24px;transform:rotate(-3deg)}.request-chip>span,.route-chip>span:first-child{display:block;font:9px/1.5 var(--mono);letter-spacing:.08em;color:#b7c8a5;margin-bottom:7px}.request-chip b{font-weight:400;color:var(--accent)}.request-chip code{font:12px var(--mono);overflow-wrap:anywhere}.route-chip{right:22px;bottom:122px;transform:rotate(3deg);background:#d7ff3f;color:#182319;border-color:#d7ff3f;padding-right:30px}.route-chip>span:first-child{color:#3d5125}.route-chip strong{font-size:14px;font-weight:500}.route-signal{position:absolute;width:6px;height:6px;right:13px;bottom:18px;background:#263a1d;border-radius:50%;animation:signal 2.4s infinite}.layer-picker{display:flex;gap:7px;position:absolute;bottom:75px;left:22px;right:22px;z-index:3}.layer-picker button{flex:1;white-space:nowrap;padding:9px 8px;background:#1b291f;border:1px solid #425b34;border-radius:3px;color:#bcccaa;font:11px var(--mono)}.layer-picker button[aria-pressed=true]{background:#405535;color:#f0ffd9;border-color:#a6c783}.layer-readout{position:absolute;bottom:19px;left:24px;right:24px;display:flex;flex-direction:column;gap:6px;min-height:40px}.layer-readout span{font-size:12px;color:#c4d3b8}.layer-readout code{font:11px/1.5 var(--mono);color:var(--accent);overflow-wrap:anywhere}.spatial-stage[data-scenario=restricted]{--accent:#ffa181}.spatial-stage[data-scenario=restricted] .route-chip{background:#ffa181;border-color:#ffb999}.spatial-stage[data-scenario=confidential]{--accent:#b8c9ff}.spatial-stage[data-scenario=confidential] .route-chip{background:#b8c9ff;border-color:#b8c9ff}.spatial-stage[data-scenario=general]{--accent:#edf4e8}.spatial-stage[data-scenario=general] .route-chip{background:#edf4e8;border-color:#edf4e8}
.network-spatial{background:#172219;position:relative;min-height:420px;border-radius:7px;margin-top:40px;overflow:hidden;color:#e3ecd9;perspective:1000px}.network-spatial:before{content:'';position:absolute;inset:15px;background-image:linear-gradient(#829d5420 1px,transparent 1px),linear-gradient(90deg,#829d5420 1px,transparent 1px);background-size:45px 45px;transform:rotateX(45deg) rotateZ(-12deg) scale(1.3);transform-origin:center 60%}.network-orbit{position:absolute;width:420px;height:240px;left:50%;top:80px;transform:translateX(-50%) rotate(-12deg);border:1px solid #789951;border-radius:50%;box-shadow:0 24px 0 -1px #263c26,0 25px 0 #50663e;pointer-events:none}.network-orbit:before{content:'';width:10px;height:10px;background:var(--lime);box-shadow:0 0 20px #d7ff3f;position:absolute;left:22%;top:4%;border-radius:50%;animation:signal 2s infinite}.network-hub{position:absolute;top:143px;left:50%;transform:translateX(-50%) rotate(-8deg);width:190px;padding:28px 15px;background:var(--lime);color:var(--ink);box-shadow:0 12px 0 #749638,0 13px 0 #b9dc6b,0 22px 45px #0008;text-align:center;border-radius:5px}.network-hub strong{font:700 44px 'Space Grotesk',sans-serif;letter-spacing:-.055em}.network-hub span{display:block;font:10px var(--mono);margin-top:6px}.network-node{position:absolute;padding:18px 22px;text-align:left;border:1px solid #627b4c;background:#263829;color:#d4e1c9;border-radius:5px;box-shadow:0 8px 0 #132419,0 9px 0 #5a7542,0 17px 25px #0004;transition:transform .25s,background .25s,border-color .25s}.network-node span{display:block;font:10px var(--mono);color:#afc896;margin-bottom:8px}.network-node strong{font:500 18px 'Space Grotesk',sans-serif}.network-node:nth-of-type(1){left:8%;top:55px;transform:rotate(-5deg)}.network-node:nth-of-type(2){right:8%;top:55px;transform:rotate(5deg)}.network-node:nth-of-type(3){left:8%;bottom:55px;transform:rotate(-5deg)}.network-node:nth-of-type(4){right:8%;bottom:55px;transform:rotate(5deg)}.network-node[aria-pressed=true]{background:#405a32;border-color:#d7ff3f;box-shadow:0 8px 0 #1a301d,0 9px 0 #bde871,0 17px 30px #0005;transform:translateY(-5px)}.network-node:hover{background:#3a5030}.network-caption{position:absolute;bottom:15px;left:20px;right:20px;text-align:center;font:11px var(--mono);color:#aebda2}.motion-paused .route-signal,.motion-paused .network-orbit:before{animation-play-state:paused}
@keyframes signal{0%,100%{opacity:.45}50%{opacity:1}}
@media(max-width:1100px){.spatial-hero{gap:25px;grid-template-columns:1fr 1.05fr}.spatial-copy h1{font-size:clamp(66px,8vw,90px)}.spatial-copy .hero-actions{flex-direction:column;align-items:flex-start}.volume-rig{width:255px;height:205px}.spatial-stage{min-height:575px}.volume-layer{padding:20px}.request-chip{left:18px}.network-node:nth-of-type(1),.network-node:nth-of-type(3){left:4%}.network-node:nth-of-type(2),.network-node:nth-of-type(4){right:4%}}
@media(max-width:850px){.spatial-hero{grid-template-columns:1fr}.spatial-copy h1{font-size:clamp(70px,12vw,98px)}.spatial-copy .hero-actions{flex-direction:row;align-items:center}.spatial-copy>p{max-width:580px}.hero-scenarios{margin-top:28px}.spatial-stage{min-height:565px}.volume-rig{width:300px;height:220px}.network-node{padding:16px;max-width:180px}.network-node strong{font-size:16px}.network-orbit{width:380px}.network-hub{width:150px}.network-node:nth-of-type(1),.network-node:nth-of-type(3){left:3%}.network-node:nth-of-type(2),.network-node:nth-of-type(4){right:3%}}
@media(max-width:560px){.spatial-hero{margin-top:28px;gap:28px}.spatial-copy h1{font-size:clamp(62px,17vw,90px)}.spatial-copy>p{font-size:18px}.spatial-stage{min-height:540px}.stage-topline{padding:17px 14px;gap:7px}.stage-topline>span{font-size:9px}.stage-topline button{font-size:10px;padding:7px}.volume-rig{width:220px;height:190px;transform:translateY(38px) rotateX(calc(48deg + var(--pointer-y,0deg))) rotateZ(calc(-30deg + var(--pointer-x,0deg)))}.volume-layer{padding:17px}.volume-layer strong{font-size:35px}.layer-policy strong{font-size:58px}.layer-number,.plane-meta{font-size:9px}.layer-vault{transform:translateZ(58px)}.layer-policy{transform:translateZ(116px)}.request-chip{left:15px;top:68px;max-width:205px;padding:10px 13px}.request-chip code{font-size:11px}.route-chip{right:14px;bottom:135px;max-width:200px;padding:12px 25px 12px 13px}.route-chip strong{font-size:12px}.layer-picker{left:14px;right:14px;bottom:84px}.layer-picker button{font-size:10px;padding:9px 5px}.layer-readout{left:16px;right:16px;bottom:18px;min-height:48px}.layer-readout span{font-size:11px}.layer-readout code{font-size:10px}.stage-coordinate{font-size:8px;left:9px}.network-spatial{min-height:460px}.network-node{width:44%;max-width:none;padding:14px}.network-node strong{font-size:15px}.network-node span{font-size:9px}.network-node:nth-of-type(1),.network-node:nth-of-type(2){top:34px}.network-node:nth-of-type(3),.network-node:nth-of-type(4){bottom:64px}.network-orbit{width:250px;height:240px;top:95px}.network-hub{top:175px;width:145px;padding:18px 10px}.network-caption{font-size:10px;line-height:1.5}.spatial-copy .hero-actions .text-link{max-width:120px}}
@media(prefers-reduced-motion:reduce){.volume-rig,.volume-layer,.network-node{transition:none}.route-signal,.network-orbit:before{animation:none}}