/* Native system surfaces replace only the baked-in UI, not the banner artwork. */
.system-demo{position:absolute;z-index:3;color:#edf6ff;box-sizing:border-box}
.build-demo{left:41.3%;top:59.9%;width:22.85%;height:31.5%;padding:calc(13 * var(--u)) calc(15 * var(--u));border:1px solid #759ac5;border-radius:calc(13 * var(--u));background:linear-gradient(125deg,#091628,#11213a 72%,#0c1d33);box-shadow:inset 0 0 25px #397bc214,0 7px 22px #00102038;display:flex;flex-direction:column;justify-content:space-between;font-size:calc(11.6 * var(--u))}
.build-heading{display:flex;gap:calc(11 * var(--u));align-items:center}
.build-code{display:grid;place-items:center;flex:none;width:calc(32 * var(--u));height:calc(34 * var(--u));font:700 calc(19 * var(--u))/1 monospace;color:white;border:1px solid #45648a66;background:#1d365355;border-radius:calc(8 * var(--u))}
.build-heading>div{flex:1;min-width:0}
.build-heading small{font:calc(5.3 * var(--u))/1.3 Arial,sans-serif;letter-spacing:.1em;color:#7e9ab9;display:flex;justify-content:space-between;margin-bottom:calc(3 * var(--u))}
.build-heading small span{color:#b3c9df}
.build-heading strong{display:block;font-size:calc(10.1 * var(--u));font-weight:600;white-space:nowrap}
.build-meter{display:flex;align-items:center;gap:calc(9 * var(--u));margin-top:calc(6 * var(--u))}
.build-meter>span{flex:1;overflow:hidden;height:calc(5 * var(--u));background:#071323;border:1px solid #3e577555;border-radius:50px}
.build-meter i,.terminal-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#087dff,#40bbff,#b5edff);transform-origin:left;transform:scaleX(1);box-shadow:0 0 8px #35baff}
.build-meter b{font:400 calc(10 * var(--u))/1 Arial,sans-serif;color:#58c9ff;width:3ch;text-align:right}
.build-steps{display:grid;gap:calc(6 * var(--u));list-style:none;padding:0;margin:calc(8 * var(--u)) 0 0}
.build-steps li{display:flex;align-items:center;gap:calc(10 * var(--u));color:#5f738b;white-space:nowrap;transition:color .35s}
.build-steps li>i{position:relative;flex:none;width:calc(14 * var(--u));height:calc(14 * var(--u));border:calc(1.6 * var(--u)) solid #385373;border-radius:50%;box-sizing:border-box}
.build-steps .is-active{color:#d2f1ff}
.build-steps .is-active i{border-color:#1e476f;border-top-color:#87d9ff;animation:system-spin 1s linear infinite}
.build-steps .is-done{color:#fff}
.build-steps .is-done i{background:#08b868;border-color:#08b868;box-shadow:0 0 8px #08b86820}
.build-steps .is-done i:after{content:'';position:absolute;left:23%;top:12%;width:35%;height:56%;border:solid white;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.build-demo[data-complete=true] .build-meter i{background:linear-gradient(90deg,#059969,#51efad)}

.deploy-terminal{left:32.65%;top:15.55%;width:34.65%;height:65.1%;border:1px solid #4fbeff;border-radius:calc(10 * var(--u));background:linear-gradient(125deg,#07141f,#020b14 68%,#07172a);box-shadow:inset 0 0 18px #248efa30,0 0 8px #008aff45;overflow:hidden;display:flex;flex-direction:column;font:calc(9.2 * var(--u))/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.terminal-chrome{flex:none;display:flex;align-items:center;gap:calc(12 * var(--u));height:calc(26 * var(--u));padding:0 calc(10 * var(--u));background:linear-gradient(#18324b,#0c1826);border-bottom:1px solid #294967;font-size:calc(8 * var(--u));letter-spacing:.01em}
.terminal-dots{display:flex;gap:calc(5 * var(--u))}
.terminal-dots i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:#ff625e}
.terminal-dots i:nth-child(2){background:#f8ce4d}.terminal-dots i:nth-child(3){background:#30d577}
.terminal-replay{margin-left:auto;border:0;background:transparent;color:#9fc4e9;display:grid;place-items:center;padding:0;width:calc(25 * var(--u));height:100%;flex:none}
.terminal-replay svg{width:calc(12 * var(--u));height:calc(12 * var(--u))}
.terminal-replay:hover{color:#fff;background:#3ba5ff25}.terminal-replay:focus-visible{outline:2px solid #71d5ff;outline-offset:-3px}.terminal-replay:disabled{opacity:.25;cursor:default}
.terminal-output{padding:calc(8 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u));flex:1;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden;min-height:0}
.terminal-line{display:flex;align-items:baseline;gap:calc(7 * var(--u));min-height:1.55em;white-space:nowrap;opacity:1;color:#d5e0ed}
.terminal-line .line-time{color:#7489a1;font-size:.78em;flex:none}
.terminal-line b{font-weight:500;width:1ch;flex:none;color:#4bbaff}
.terminal-line code{font:inherit;min-width:0;white-space:pre}
.terminal-line.command code{color:#8ed5ff}.terminal-line.success,.terminal-line.success b{color:#4fe98b}
.terminal-line.is-waiting{visibility:hidden}
.terminal-line.is-typing code:after{content:'';display:inline-block;width:.55em;height:1.05em;background:#73caff;vertical-align:-.15em;margin-left:2px;animation:system-cursor .8s steps(1) infinite}
.terminal-line.success.is-typing code:after{background:#4fe98b}
.terminal-footer{height:calc(22 * var(--u));flex:none;display:flex;align-items:center;gap:calc(8 * var(--u));margin:0 calc(12 * var(--u));border-top:1px solid #203748;color:#7e9db8;font-size:calc(6.2 * var(--u));letter-spacing:.055em}
.deploy-state{display:flex;align-items:center;gap:calc(5 * var(--u));flex:1;color:#75cbff;white-space:nowrap}.deploy-state i{width:calc(4 * var(--u));height:calc(4 * var(--u));border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.terminal-footer small{font:inherit;white-space:nowrap;opacity:.65}.terminal-footer b{font-weight:400;color:#98c5e5;min-width:3ch;text-align:right}
.terminal-progress{height:2px;flex:none;background:#172d3f}
.deploy-terminal[data-complete=true] .deploy-state{color:#49e69a}
.deploy-terminal[data-complete=true] .terminal-progress i{background:linear-gradient(90deg,#059c77,#61f5b8)}
.deploy-globe-mobile{display:none}
.deploy-network{position:absolute;left:66.4%;top:4%;width:29.5%;height:83%;z-index:2;pointer-events:none;overflow:visible}
.network-packets path{stroke-dasharray:4 96;stroke-dashoffset:100;opacity:0}
.system-running .network-packets path{opacity:.9;animation:system-packet 4s linear infinite}
.network-packets path:nth-child(2){animation-delay:-1.3s}.network-packets path:nth-child(3){animation-delay:-2.6s}
.network-nodes circle{fill:url(#network-glow);opacity:.2;transform-box:fill-box;transform-origin:center}
.system-running .network-nodes circle{animation:system-node 2.8s ease-in-out infinite}
.network-nodes circle:nth-child(2){animation-delay:-.7s}.network-nodes circle:nth-child(3){animation-delay:-1.4s}.network-nodes circle:nth-child(4){animation-delay:-2.1s}
.system-demo:not(.system-running) .is-active i,.system-demo:not(.system-running) .is-typing code:after{animation-play-state:paused}
.deployment:not(.system-running) .network-packets path,.deployment:not(.system-running) .network-nodes circle{animation-play-state:paused}

@keyframes system-spin{to{transform:rotate(360deg)}}
@keyframes system-cursor{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes system-packet{to{stroke-dashoffset:0}}
@keyframes system-node{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}

@media(max-width:760px){
  /* Reflow the live terminal instead of shrinking its text with the full poster. */
  .hero .build-demo{position:relative;left:auto;top:auto;width:86%;height:auto;margin:-6px auto 0;padding:16px 18px;gap:12px;font-size:13px;transform:translateY(-12px);border-radius:15px;box-shadow:0 8px 25px #0004}
  .hero-actions{top:calc(100vw * .506)}
  .build-heading{gap:12px}.build-code{width:37px;height:40px;font-size:23px;border-radius:9px}.build-heading small{font-size:7px;margin-bottom:4px}.build-heading strong{font-size:12px}.build-meter{gap:10px;margin-top:7px}.build-meter>span{height:6px}.build-meter b{font-size:11px}.build-steps{gap:9px;margin:0}.build-steps li{gap:11px}.build-steps li>i{width:16px;height:16px;border-width:1.8px}
  .deployment{padding-bottom:0;background:#021121}
  .deployment>picture{height:39vw;overflow:hidden}
  .deployment>picture img{width:100%;height:auto}
  .deploy-terminal{position:relative;left:auto;top:auto;width:88%;height:clamp(244px,66vw,320px);margin:4px auto 0;border-radius:12px;font-size:clamp(9px,2.9vw,15px)}
  .terminal-chrome{height:36px;padding:0 12px;gap:10px;font-size:10px}.terminal-dots{gap:5px}.terminal-dots i{width:8px;height:8px}.terminal-replay{width:40px;height:36px;margin-right:-8px}.terminal-replay svg{width:17px;height:17px}
  .terminal-output{padding:10px 12px 4px}.terminal-line{gap:7px;min-height:1.6em}.terminal-line .line-time{display:none}.terminal-footer{height:28px;margin:0 12px;font-size:6.8px;gap:8px}.deploy-state{gap:6px}.deploy-state i{width:5px;height:5px}
  .deploy-globe-mobile{display:block;position:relative;height:49vw;overflow:hidden}.deploy-globe-mobile img{position:absolute;left:0;bottom:0;width:100%;height:auto}.deploy-globe-mobile:after{content:'';position:absolute;inset:0;background:linear-gradient(#021121,transparent 18%);pointer-events:none}
  .deploy-network{left:24%;top:auto;bottom:7.5vw;width:70%;height:49vw}
}
@media(min-width:500px) and (max-width:760px){.deploy-terminal{height:320px;font-size:14px}.terminal-chrome{font-size:12px;height:42px}.terminal-footer{height:34px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.network-packets path{opacity:0!important}.network-nodes circle{animation:none!important}.terminal-line.is-typing code:after{display:none}}