:root{--sys-ink:#071326;--sys-deep:#04101f;--sys-panel:#091c33;--sys-blue:#1668e3;--sys-cyan:#16b8d4;--sys-lime:#b7ec55;--sys-orange:#ffaf5a;--sys-muted:#8da3ba}
body.system-demo-page{overflow-x:clip;background:#fff;color:var(--sys-ink)}
.system-demo-page .breadcrumbs{border-bottom-color:rgba(255,255,255,.08);background:var(--sys-deep);color:#7f94ab}.system-demo-page .breadcrumbs a{color:#9fb1c4}
.system-hero{position:relative;overflow:hidden;min-height:calc(100vh - 116px);background:radial-gradient(circle at 77% 44%,rgba(22,104,227,.23),transparent 25%),radial-gradient(circle at 84% 62%,rgba(22,184,212,.12),transparent 23%),linear-gradient(145deg,#04101f 0%,#071a31 62%,#071526 100%);color:#fff}
.system-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent 5%,#000 55%,transparent 100%)}
.system-hero:after{content:"";position:absolute;right:-12%;bottom:-38%;width:70vw;aspect-ratio:1;border:1px solid rgba(255,255,255,.06);border-radius:50%;box-shadow:0 0 0 8vw rgba(255,255,255,.012),0 0 0 18vw rgba(255,255,255,.008)}
.system-hero-glow{position:absolute;top:20%;left:42%;width:340px;height:340px;border-radius:50%;background:rgba(183,236,85,.08);filter:blur(110px)}
.system-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(470px,.95fr);gap:clamp(3rem,7vw,8rem);align-items:center;min-height:calc(100vh - 116px);padding-block:7rem}
.system-hero-copy h1{max-width:820px;margin:.85rem 0 1.35rem;color:#fff;font-size:clamp(4.3rem,7.4vw,8.5rem);line-height:.86;letter-spacing:-.065em}.system-hero-copy h1 span{display:block;background:linear-gradient(95deg,#fff 5%,var(--sys-cyan) 54%,var(--sys-lime));-webkit-background-clip:text;background-clip:text;color:transparent}
.system-hero-copy .lead{max-width:720px;color:#aebed0;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.68}.system-hero-copy .cta-row{margin-top:2rem}.system-hero-copy .btn.ghost{border-color:rgba(255,255,255,.16);color:#fff}
.demo-label{display:inline-flex;gap:.6rem;align-items:center;color:#9fb5cb;font-size:.73rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.demo-label i{width:8px;height:8px;border-radius:50%;background:var(--sys-lime);box-shadow:0 0 0 6px rgba(183,236,85,.1),0 0 20px rgba(183,236,85,.55)}
.system-hero-meta{display:flex;gap:1.5rem;margin-top:2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);color:#738aa1;font-size:.7rem;font-weight:750;text-transform:uppercase}.system-hero-meta span{display:flex;gap:.42rem;align-items:baseline}.system-hero-meta b{color:#fff;font-size:1rem}
.system-hero-orbit{position:relative;justify-self:end;width:min(43vw,580px);aspect-ratio:1;border:1px solid rgba(255,255,255,.11);border-radius:50%;box-shadow:inset 0 0 80px rgba(22,104,227,.06)}.system-hero-orbit:before,.system-hero-orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}.system-hero-orbit:before{inset:15%}.system-hero-orbit:after{inset:32%}
.hero-core{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:116px;aspect-ratio:1;border:1px solid rgba(255,255,255,.23);border-radius:34px;background:linear-gradient(145deg,#173c68,#07192d);box-shadow:0 0 0 10px rgba(22,184,212,.04),0 28px 70px rgba(0,0,0,.35);transform:translate(-50%,-50%) rotate(7deg)}.hero-core span{font-size:1.25rem;font-weight:950;letter-spacing:.08em;transform:rotate(-7deg)}.hero-core i{position:absolute;right:12px;bottom:12px;width:9px;height:9px;border-radius:50%;background:var(--sys-lime);box-shadow:0 0 18px var(--sys-lime)}
.hero-node{position:absolute;display:grid;place-items:center;width:76px;aspect-ratio:1;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(8,27,49,.88);box-shadow:0 18px 45px rgba(0,0,0,.25);color:#c9d6e4;font-size:.65rem;font-weight:900;letter-spacing:.08em}.hero-node-1{top:2%;left:43%}.hero-node-2{top:27%;right:-3%}.hero-node-3{right:9%;bottom:10%}.hero-node-4{bottom:-3%;left:27%}.hero-node-5{top:32%;left:-5%}
.system-scroll-cue{position:absolute;z-index:3;bottom:1.4rem;left:50%;display:grid;justify-items:center;gap:.55rem;color:#6f879e;font-size:.62rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;transform:translateX(-50%)}.system-scroll-cue i{display:block;width:1px;height:30px;background:linear-gradient(var(--sys-cyan),transparent)}
.system-disclosure{padding:1.2rem 0;background:#edf4fb}.system-disclosure .demo-disclosure{margin:0}
.system-story{position:relative;overflow:clip;padding:7rem 0;background:radial-gradient(circle at 70% 18%,rgba(22,104,227,.12),transparent 28%),linear-gradient(180deg,#061326,#07192d 75%,#061326);color:#fff}.system-story:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}
.system-story-intro{position:relative;z-index:2;display:grid;grid-template-columns:minmax(190px,.35fr) 1fr .7fr;gap:1.2rem 3rem;align-items:end;margin-bottom:3rem}.system-story-intro .eyebrow{grid-column:1;grid-row:1}.system-story-intro h2{grid-column:2;grid-row:1/3;max-width:720px;margin:0;color:#fff;font-size:clamp(2.4rem,4vw,4.8rem);line-height:.98}.system-story-intro>p{grid-column:3;grid-row:1/3;margin:0;color:#91a7bd;line-height:1.65}.system-skip{grid-column:1;grid-row:2;color:#7f98b1;font-size:.7rem;text-decoration:underline;text-underline-offset:4px}
.system-story-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(250px,.62fr) minmax(610px,1.38fr);gap:clamp(3rem,6vw,7rem)}
.system-chapter{display:flex;flex-direction:column;justify-content:center;min-height:78vh;padding:5rem 0;opacity:.24;transition:opacity .35s ease}.system-chapter.is-active{opacity:1}.chapter-index{color:var(--sys-cyan);font-size:.69rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.system-chapter h3{max-width:470px;margin:.85rem 0 1rem;color:#fff;font-size:clamp(1.75rem,2.5vw,2.8rem);line-height:1.05}.system-chapter>p{max-width:460px;margin:0;color:#9eb0c3;font-size:.95rem;line-height:1.72}.system-chapter dl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1.6rem 0 0}.system-chapter dl div{padding:.8rem;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035)}.system-chapter dt{color:#6f879e;font-size:.58rem;font-weight:850;text-transform:uppercase}.system-chapter dd{margin:.3rem 0 0;color:#dce7f2;font-size:.72rem;font-weight:850}
.system-stage-wrap{position:sticky;top:82px;align-self:start;padding-top:4vh}.system-stage{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:30px;background:linear-gradient(145deg,#06172b,#0a203a);box-shadow:0 42px 110px rgba(0,0,0,.38)}
.stage-chrome{display:flex;justify-content:space-between;gap:1rem;padding:.82rem 1rem;border-bottom:1px solid rgba(255,255,255,.09);color:#6f879f;font-size:.62rem;font-weight:900;letter-spacing:.09em}.stage-chrome>div{display:flex;gap:.6rem;align-items:center}.stage-chrome i{width:7px;height:7px;border-radius:50%;background:var(--sys-lime);box-shadow:0 0 14px var(--sys-lime)}.stage-chrome strong{color:var(--sys-cyan)}
.stage-meter{height:3px;background:rgba(255,255,255,.06)}.stage-meter span{display:block;width:14.285%;height:100%;background:linear-gradient(90deg,var(--sys-blue),var(--sys-cyan),var(--sys-lime));transform-origin:left}
.system-canvas-wrap{position:relative;min-height:min(67vh,650px);background:radial-gradient(circle at 50% 48%,rgba(22,104,227,.1),transparent 47%)}#system-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}.canvas-fallback{position:absolute;inset:13% 8%;display:none;grid-template-columns:repeat(3,1fr);gap:1rem;place-items:center}.canvas-fallback>*{display:grid;place-items:center;width:90px;aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:24px;color:#a8bdd2;font-size:.65rem}.canvas-fallback strong{background:var(--sys-blue);color:#fff}
.stage-status{position:absolute;top:1.2rem;left:1.2rem;z-index:3;max-width:265px;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(4,16,31,.78);box-shadow:0 18px 40px rgba(0,0,0,.23);backdrop-filter:blur(12px)}.status-label{color:#637f99;font-size:.52rem;font-weight:900;letter-spacing:.1em}.stage-status strong{display:block;margin:.35rem 0;color:#fff;font-size:.76rem}.stage-status p{margin:0;color:#7f97af;font-size:.62rem;line-height:1.5}
.exception-card,.approval-card,.result-panel{position:absolute;z-index:5;opacity:0;pointer-events:none}.exception-card{right:1.2rem;bottom:4rem;width:min(330px,43%);padding:1rem;border:1px solid rgba(255,175,90,.42);border-radius:16px;background:rgba(43,29,19,.94);box-shadow:0 24px 60px rgba(0,0,0,.35)}.exception-card>span{color:var(--sys-orange);font-size:.53rem;font-weight:900;letter-spacing:.08em}.exception-card>strong{display:block;margin:.45rem 0 .8rem;color:#fff0dc;font-size:.78rem}.exception-card>div{display:grid;grid-template-columns:55px 1fr;gap:.5rem;padding:.4rem 0;border-top:1px solid rgba(255,175,90,.16)}.exception-card small{color:#b88659}.exception-card b{color:#ffe4c3;font-size:.62rem}
.approval-card{top:50%;left:50%;width:min(390px,65%);padding:1.2rem;border:1px solid rgba(183,236,85,.32);border-radius:19px;background:rgba(8,31,48,.95);box-shadow:0 28px 70px rgba(0,0,0,.4);transform:translate(-50%,-50%)}.approval-card span{color:var(--sys-lime);font-size:.54rem;font-weight:900;letter-spacing:.09em}.approval-card strong{display:block;margin:.5rem 2.6rem .35rem 0;color:#fff;font-size:.88rem}.approval-card p{margin:0;color:#829ab2;font-size:.62rem}.approval-card i{position:absolute;top:50%;right:1.2rem;display:grid;place-items:center;width:35px;aspect-ratio:1;border-radius:50%;background:var(--sys-lime);color:#10251a;font-style:normal;font-weight:950;transform:translateY(-50%)}
.result-panel{right:1.2rem;bottom:1.2rem;left:1.2rem;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(5,19,36,.88);backdrop-filter:blur(13px)}.result-panel div{padding:.8rem}.result-panel div+div{border-left:1px solid rgba(255,255,255,.08)}.result-panel span{display:block;color:#627f99;font-size:.5rem;font-weight:900;letter-spacing:.08em}.result-panel strong{display:block;margin-top:.3rem;color:#fff;font-size:.68rem}.result-panel div:first-child strong{color:var(--sys-lime)}
.stage-key{position:absolute;right:1.1rem;top:1.1rem;z-index:3;display:flex;gap:.8rem;color:#657f98;font-size:.5rem;font-weight:800}.stage-key span{display:flex;gap:.32rem;align-items:center}.stage-key i{width:6px;height:6px;border-radius:50%}.key-live{background:var(--sys-cyan);box-shadow:0 0 9px var(--sys-cyan)}.key-control{background:var(--sys-orange)}.key-human{background:var(--sys-lime)}
.stage-footer{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.8rem 1rem;border-top:1px solid rgba(255,255,255,.09);background:rgba(4,14,28,.72)}.stage-footer p{margin:0;color:#849aaf;font-size:.67rem}.stage-footer>div{display:flex;align-items:center;gap:.65rem;color:#6c849b;font-size:.61rem}.stage-footer button{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.04);color:#d9e5f1;cursor:pointer}.stage-footer button:disabled{opacity:.3;cursor:not-allowed}.stage-footer b{color:#fff}
.system-results{padding-block:7rem;background:linear-gradient(180deg,#f2f7fc,#fff)}.system-value-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.4rem;border-top:1px solid #d8e3ef;border-bottom:1px solid #d8e3ef}.system-value-grid article{padding:1.6rem}.system-value-grid article+article{border-left:1px solid #d8e3ef}.system-value-grid span{color:var(--sys-blue);font-size:.66rem;font-weight:950}.system-value-grid h3{margin:.7rem 0 .6rem;font-size:1.15rem}.system-value-grid p{margin:0;color:#617188;font-size:.78rem;line-height:1.65}
.system-blueprint{position:relative;overflow:hidden}.system-blueprint:after{content:"";position:absolute;top:-40%;right:-15%;width:55vw;aspect-ratio:1;border:1px solid rgba(255,255,255,.05);border-radius:50%;box-shadow:0 0 0 8vw rgba(255,255,255,.012),0 0 0 17vw rgba(255,255,255,.008)}.system-blueprint .wrap{position:relative;z-index:2}.system-patterns{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2.3rem}.system-patterns article{padding:1.4rem;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.04)}.system-patterns span{color:var(--sys-cyan);font-size:.6rem;font-weight:900;letter-spacing:.08em}.system-patterns h3{margin:.65rem 0 .5rem;color:#fff;font-size:1.1rem}.system-patterns p{margin:0;color:#91a6ba;font-size:.78rem;line-height:1.62}
.system-related{padding-block:7rem}.system-related .card{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.system-related .card:hover{border-color:rgba(22,104,227,.35);box-shadow:0 24px 55px rgba(10,48,90,.11);transform:translateY(-5px)}.system-final{padding-top:0}
body.system-demo-ready .system-hero-orbit{animation:orbitDrift 8s ease-in-out infinite alternate}body.system-demo-ready .hero-core{animation:coreFloat 4.8s ease-in-out infinite alternate}body.system-demo-ready .system-scroll-cue i{animation:scrollCue 1.8s ease-in-out infinite}@keyframes orbitDrift{to{transform:rotate(3deg) translateY(-7px)}}@keyframes coreFloat{to{transform:translate(-50%,-54%) rotate(4deg)}}@keyframes scrollCue{0%,100%{opacity:.35;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:1100px){.system-hero-grid{grid-template-columns:1fr minmax(380px,.75fr)}.system-story-grid{grid-template-columns:minmax(220px,.5fr) minmax(540px,1.5fr);gap:3rem}.system-canvas-wrap{min-height:570px}.system-value-grid{grid-template-columns:1fr 1fr}.system-value-grid article:nth-child(3){border-left:0;border-top:1px solid #d8e3ef}.system-value-grid article:nth-child(4){border-top:1px solid #d8e3ef}}
@media(max-width:860px){.system-hero{min-height:auto}.system-hero-grid{grid-template-columns:1fr;min-height:auto;padding-block:5rem 8rem}.system-hero-orbit{justify-self:center;width:min(76vw,520px)}.system-story-intro{grid-template-columns:1fr}.system-story-intro .eyebrow,.system-story-intro h2,.system-story-intro>p,.system-skip{grid-column:1;grid-row:auto}.system-story-grid{display:flex;flex-direction:column}.system-stage-wrap{top:66px;z-index:5;order:1;padding-top:0}.system-chapters{order:2}.system-chapter{min-height:64vh;padding:13rem 0 3rem}.system-canvas-wrap{min-height:520px}.system-patterns{grid-template-columns:1fr}.system-hero-copy h1{font-size:clamp(4rem,13vw,7rem)}}
@media(max-width:580px){.system-hero-grid{padding-top:3.5rem}.system-hero-copy h1{font-size:clamp(3.4rem,18vw,5.6rem)}.system-hero-meta{flex-wrap:wrap;gap:.75rem 1.2rem}.system-hero-orbit{width:88vw}.hero-node{width:58px;border-radius:17px;font-size:.52rem}.hero-core{width:90px;border-radius:27px}.system-story{padding-top:4.5rem}.system-story-intro h2{font-size:2.45rem}.system-stage{border-radius:20px}.system-canvas-wrap{min-height:390px}.stage-key{display:none}.stage-status{top:.7rem;left:.7rem;max-width:210px;padding:.65rem}.exception-card{right:.7rem;bottom:.7rem;width:62%;padding:.7rem}.exception-card>strong{font-size:.62rem}.approval-card{width:88%}.result-panel{right:.6rem;bottom:.6rem;left:.6rem;grid-template-columns:1fr 1fr}.result-panel div{padding:.55rem}.result-panel div:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.08)}.result-panel div:nth-child(4){border-top:1px solid rgba(255,255,255,.08)}.stage-footer{align-items:flex-start;flex-direction:column}.stage-footer>div{align-self:flex-end}.system-chapter{min-height:56vh;padding-top:10rem}.system-value-grid{grid-template-columns:1fr}.system-value-grid article+article{border-left:0;border-top:1px solid #d8e3ef}.system-related{padding-block:5rem}}
@media(prefers-reduced-motion:reduce){body.system-demo-ready .system-hero-orbit,body.system-demo-ready .hero-core,body.system-demo-ready .system-scroll-cue i{animation:none}.system-chapter{min-height:0;padding:2.5rem 0;opacity:1}.system-story-grid{display:flex;flex-direction:column}.system-stage-wrap{position:relative;top:auto;order:1}.system-chapters{order:2}.system-stage-wrap{display:none}}
@supports not (overflow:clip){body.system-demo-page,.system-story{overflow-x:hidden}}