/* Stationary optical curves: only the highlight advances along each outline. */
.fixed-optical{width:100%;height:100%;overflow:visible;fill:none;stroke-width:1}.fixed-optical .optical-green{color:#10b981}.fixed-optical .optical-purple{color:#6366f1}.fixed-optical .optical-blue{color:#38bdf8}.curve-base{stroke:currentColor;opacity:.28}.curve-light{stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:65 935;filter:drop-shadow(0 0 4px currentColor);animation:curve-travel 25s linear infinite}.optical-purple .curve-light{animation-duration:32s;animation-delay:-12s}.optical-blue .curve-light{animation-duration:38s;animation-delay:-24s}.pose-optical,.fixed-optical g{animation:none!important}
@keyframes curve-travel{to{stroke-dashoffset:-1000}}
/* A compact end-to-end product flow, without card-shaped containers. */
.hero-stage[data-hero-variant=architecture] .live-pipeline{display:flex;left:3%;top:9%;width:36%;align-items:flex-start;gap:0}.pipeline-caption{font:8px 'JetBrains Mono',monospace;color:#889c9b;letter-spacing:1px;margin:0 0 14px}.flow-node{display:flex;align-items:center;gap:11px;color:#94a7ad;min-height:33px;width:100%;font:10px 'JetBrains Mono',monospace;background:none;border:0;animation:flow-node-glow 12s ease-in-out infinite;animation-delay:calc(var(--step)*1.1s)}.flow-node svg{width:24px;height:24px;flex:none;color:#38bdf8}.flow-node:nth-of-type(3n) svg{color:#10b981}.flow-node:nth-of-type(4n) svg{color:#9395ff}.flow-node small{display:block;font-size:7px;color:#687e83;margin-top:4px}.live-pipeline>.flow-link{width:1px;height:19px;min-height:19px;margin-left:12px;background:#38bdf827;position:relative;overflow:hidden}.live-pipeline>.flow-link:after{height:8px;background:#38bdf8;box-shadow:0 0 7px #38bdf8;animation:flow-event 4.5s linear infinite;animation-delay:calc(var(--step)*.55s)}
@keyframes flow-node-glow{0%,35%,100%{filter:none;color:#94a7ad}12%{color:#dcfff2;filter:drop-shadow(0 0 6px #10b98145)}}@keyframes flow-event{0%{transform:translateY(-9px);opacity:0}15%,75%{opacity:1}100%{transform:translateY(28px);opacity:0}}
/* Three fixed glass squares, with restrained perimeter light. */
@property --code-edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero-stage .code-pane{aspect-ratio:1;width:43%;height:auto;animation:none;border-radius:13px;background:linear-gradient(135deg,#233d453d,#17192262);backdrop-filter:blur(13px);overflow:visible}.code-pane:after{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:conic-gradient(from var(--code-edge-angle),transparent 55%,#38bdf8 72%,#10b981 82%,transparent 95%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:code-edge-cycle 14s linear infinite}.code-pane header{border-radius:13px 13px 0 0}.code-pane code{font-size:9px;padding:13px 10px;line-height:2}.hero-stage .pane-a{left:-2%;top:8%;transform:rotate(-6deg)}.hero-stage .pane-b{right:-1%;top:33%;transform:rotate(7deg)}.hero-stage .pane-c{left:0;top:59%;transform:rotate(-3deg)}.pane-b:after{animation-delay:-5s}.pane-c:after{animation-delay:-9s}
@keyframes code-edge-cycle{to{--code-edge-angle:360deg}}
/* A sparse, hover-responsive microservices constellation. */
.hero-stage .pose-particles{display:none!important}.event-cosmos{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-stage[data-pose=folded] .event-cosmos{display:block}.hero-stage[data-pose=folded] .hero-effects{mask-image:radial-gradient(ellipse,#000 50%,transparent 98%)}
/* The seated portrait gets soft aurora ribbons, distinct from the technical views. */
.hero-stage[data-pose=seated] .network{display:none!important}.seated-atmosphere{display:none;position:absolute;inset:0;overflow:hidden;mask-image:radial-gradient(ellipse,#000 42%,transparent 78%)}.hero-stage[data-pose=seated] .seated-atmosphere{display:block}.seated-atmosphere i{position:absolute;width:31%;height:85%;top:2%;left:9%;background:linear-gradient(175deg,transparent,#10b9811f 30%,#10b98108 64%,transparent);filter:blur(16px);transform:rotate(25deg);animation:aurora-breathe 15s ease-in-out infinite alternate}.seated-atmosphere i:nth-child(2){left:55%;top:8%;transform:rotate(-27deg);background:linear-gradient(175deg,transparent,#6366f124 35%,#38bdf80b 70%,transparent);animation-delay:-7s}.seated-atmosphere i:nth-child(3){width:15%;height:67%;left:79%;top:20%;transform:rotate(14deg);background:linear-gradient(transparent,#38bdf828,transparent);animation-delay:-11s}.seated-atmosphere span{position:absolute;top:18%;left:15%;width:2px;height:2px;border-radius:50%;background:#38bdf8;box-shadow:0 0 7px #38bdf8;animation:star-shimmer 6s ease-in-out infinite}.seated-atmosphere span:nth-last-child(2){left:80%;top:28%;animation-delay:-2s}.seated-atmosphere span:last-child{left:88%;top:62%;animation-delay:-4s}@keyframes aurora-breathe{to{translate:0 14px;opacity:.4}}@keyframes star-shimmer{50%{opacity:.2}}
@media(max-width:767px){.hero-stage[data-hero-variant=architecture] .live-pipeline{top:5%;left:0;width:41%}.pipeline-caption{font-size:7px;margin-bottom:10px}.flow-node{min-height:29px;font-size:9px;gap:8px}.flow-node svg{width:21px;height:21px}.flow-node small{font-size:6px}.live-pipeline>.flow-link{height:14px;min-height:14px;margin-left:10px}.hero-stage .code-pane{width:46%}.code-pane code{font-size:7px;padding:10px 8px}.code-pane small{font-size:6px}.hero-stage .pane-a{top:9%;left:-1%}.hero-stage .pane-b{top:34%;right:-3%}.hero-stage .pane-c{top:61%;left:0}}
@media(prefers-reduced-motion:reduce){.curve-light,.code-pane:after,.live-pipeline *,.seated-atmosphere *{animation:none!important}.curve-light{stroke-dashoffset:-200}.event-cosmos{opacity:.8}}