/* A transparent stage: one photo, one background composition, no foreground decoration. */
.hero-stage{background:transparent!important;border:0!important;box-shadow:none!important;margin-bottom:58px;height:570px}
.hero-ambient{inset:5%;opacity:.55;background:radial-gradient(ellipse at 50% 55%,#10b98117,transparent 65%),radial-gradient(ellipse at 65% 35%,#6366f119,transparent 65%)}
.parallax-layer{isolation:isolate;overflow:visible}
.hero-effects{z-index:0;opacity:1;transition:opacity .22s ease;mask-image:radial-gradient(ellipse at 50% 48%,#000 38%,#000c 62%,transparent 85%)}
.hero-effects:after{display:none}
.hero-stage #hero-portrait{z-index:2;animation:none;filter:none;transition:opacity .28s ease,translate .45s cubic-bezier(.16,1,.3,1);width:104%;left:-2%;height:96%;bottom:5px;object-fit:contain;object-position:center bottom;mask-image:radial-gradient(ellipse 68% 73% at 50% 43%,#000 49%,#000 67%,transparent 91%);-webkit-mask-image:radial-gradient(ellipse 68% 73% at 50% 43%,#000 49%,#000 67%,transparent 91%)}
.hero-stage[data-pose=close] #hero-portrait{height:91%;width:108%;left:-4%;bottom:12px}
.hero-stage[data-pose=folded] #hero-portrait{height:100%;width:100%;left:0;bottom:0}
.hero-stage[data-pose=seated] #hero-portrait{height:100%;width:100%;left:0;bottom:0}
.hero-stage[data-pose=laptop] #hero-portrait{height:87%;width:118%;left:-9%;bottom:4%;mask-image:radial-gradient(ellipse 65% 77% at 52% 44%,#000 45%,#000 67%,transparent 91%);-webkit-mask-image:radial-gradient(ellipse 65% 77% at 52% 44%,#000 45%,#000 67%,transparent 91%)}
.hero-stage[data-pose=standing] #hero-portrait{height:100%;width:100%;left:0;bottom:0}
.hero-stage .glass-code,.hero-photo-caption{display:none!important}
.hero-stage .aura-disc{width:86%;left:7%;top:9%;box-shadow:none;background:radial-gradient(ellipse,#10b98109,transparent 68%);border:0;opacity:0;animation:none}
.hero-stage .aura-disc:before{animation-duration:32s;filter:none;opacity:.75}
.hero-stage[data-hero-variant=aura] .aura-disc{opacity:1;background:radial-gradient(ellipse,#6366f10e,#10b98112 40%,transparent 69%);animation:aura-breathe 10s ease-in-out infinite}
.hero-stage .orbit{top:29%;height:43%;left:-2%;width:104%;border-color:#10b98190;box-shadow:0 0 15px #10b9810d;animation-duration:16s}
.hero-stage .orbit-two{top:16%;left:13%;width:76%;height:71%;border-color:#6366f16b}
.hero-stage .orbit i{width:5px;height:5px;box-shadow:0 0 12px #38bdf8}
.hero-stage .code-layer{top:16%;left:17%;height:57%;width:72%;padding:0;border-radius:26px;border-color:#6366f142;backdrop-filter:none;background:linear-gradient(140deg,#6366f116,transparent 70%);transform:rotate(-17deg);color:transparent;font-size:0;animation-duration:13s}
.hero-stage .layer-two{top:30%;left:3%;height:48%;border-color:#10b98145;background:linear-gradient(150deg,#10b98112,transparent 65%);transform:rotate(15deg);animation-delay:-6s}
.hero-stage .network{left:-4%;top:2%;width:108%;height:90%}
.hero-stage .network path{stroke-width:.8;stroke-dasharray:3 16;opacity:.65;animation-duration:24s}
.hero-stage .network circle{r:4;filter:drop-shadow(0 0 6px #10b98180)}
.hero-stage .workflow{left:0;right:0;top:18%;justify-content:center;gap:12px;transform:rotate(-12deg)}
.hero-stage .workflow span{padding:14px 12px;box-shadow:none;backdrop-filter:none;background:#12121680;border-color:#10b98166;font-size:8px;letter-spacing:1px}
.hero-stage .workflow i{animation:pipeline-step 3s ease-in-out infinite}
.hero-stage .workflow i:nth-of-type(2){animation-delay:1.5s}
.hero-controls{position:absolute;left:0;right:0;bottom:-49px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;padding:6px 0;background:transparent}
.portrait-next{display:inline-flex;align-items:center;gap:15px;padding:9px 15px;border:1px solid #10b98155;border-radius:30px;background:#121216a0;font:11px 'JetBrains Mono',monospace;color:#d7e3dd;transition:border-color .2s,background .2s,box-shadow .2s}
.portrait-next:hover{border-color:#10b981;background:#10b98112;box-shadow:0 0 22px #10b98117}.portrait-next span{color:#10b981}.portrait-next:disabled{opacity:.5;cursor:wait}
.portrait-label{flex-basis:100%;text-align:center;color:#879294;font:9px 'JetBrains Mono',monospace;letter-spacing:.5px;min-height:14px;order:3}
.hero-controls .motion-toggle{position:static;border-color:#ffffff12;padding:8px 11px;font-size:9px;background:transparent;color:#8f9b9c}
.hero-stage.portrait-switching #hero-portrait{opacity:0;translate:0 7px}.hero-stage.portrait-switching .hero-effects{opacity:0}
@keyframes pipeline-step{0%,100%{opacity:.3}50%{opacity:1;text-shadow:0 0 10px #38bdf8}}
@media(max-width:1023px){.hero-stage{height:500px}.hero-controls{gap:10px}}
@media(max-width:767px){.hero-stage{height:440px;margin-bottom:76px}.hero-controls{bottom:-64px;gap:10px 14px}.hero-stage[data-pose=close] #hero-portrait{height:94%}.hero-stage[data-pose=laptop] #hero-portrait{height:90%;width:116%;left:-8%;bottom:0}.hero-stage .hero-effects{inset:0 4%}.hero-stage .aura-disc{width:84%;left:8%;top:9%}.hero-stage .workflow{gap:7px;top:17%}.hero-stage .workflow span{font-size:7px;padding:12px 8px}.portrait-next{padding:10px 16px}}
@media(max-width:380px){.hero-stage{height:390px}}
@media(prefers-reduced-motion:reduce){.hero-stage #hero-portrait,.hero-effects{transition:none}.hero-stage.portrait-switching #hero-portrait{translate:none}.hero-controls .motion-toggle{display:none}}
.hero-stage[data-hero-variant]:not([data-hero-variant=aura]) .aura-disc{opacity:0;animation:none}
.hero-stage[data-pose=laptop]{height:500px}.hero-stage[data-pose=laptop] .workflow{top:28%}@media(max-width:767px){.hero-stage[data-pose=laptop]{height:340px}.hero-stage[data-pose=laptop] #hero-portrait{width:124%;left:-12%;height:100%;bottom:0}.hero-stage[data-pose=laptop] .workflow{top:24%}}