/* APRUMO — a product portrait, lit like machined hardware. */
.hero{min-height:max(700px,100svh);padding-top:100px;padding-bottom:24px;background:#080f1a}
.hero-bg{background:radial-gradient(ellipse at 78% 42%,#24344780 0%,#101c2e44 35%,transparent 66%),linear-gradient(120deg,#080f1a,#0c1625)}
.hero-grid{opacity:.15;background-size:25% 100%}
.hero-g{display:grid;grid-template-columns:43% 57%;gap:0;min-height:0}
.hero-t{grid-column:1;gap:28px;padding-bottom:20px}
.hero-eyebrow .lab{font-size:12px;letter-spacing:.17em;line-height:1.6}
.hero-eyebrow .tick{background:#db6545;width:24px;flex:none}
.hero-h{font-size:clamp(64px,6.4vw,112px);font-weight:550;font-stretch:80%;line-height:.94;letter-spacing:-.035em}
.hero-h .hero-second{color:#a2adb9}
.hero .lede{font-size:18px;line-height:1.65;max-width:34ch;color:#a7b1bd}
.hero-ctas{gap:20px;align-items:center;margin-top:8px}
.hero-ctas .btn{font-size:12px;letter-spacing:.08em;min-height:54px;padding-inline:22px}
.hero-ctas .btn-ghost{padding-inline:0;border-color:transparent;min-height:44px}
.hero-v{grid-column:2;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;margin-left:-12px}
.hero-act{width:116%;max-width:none;height:clamp(390px,58svh,620px);aspect-ratio:auto;flex:none;align-self:center;position:relative;isolation:isolate;outline-offset:-8px;cursor:grab;touch-action:pan-y}
.hero-act:active{cursor:grabbing}
.hero-act canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;transition:opacity .5s}
.hero-act .hero-poster{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.hero-act.is-ready .hero-poster,.hero-act.is-ready>svg{visibility:hidden}
.hero-act.is-unavailable canvas{visibility:hidden}
.hero-figure-meta{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b2bbc5;position:relative;z-index:2;margin-top:-12px;padding-inline:22px}
.hero-figure-meta .mono{font-size:12px;letter-spacing:.08em}
.hero-figure-meta .concept{font-family:var(--f-sans);font-size:12px;color:#8895a4;text-transform:none;letter-spacing:0}
.hero-controls{display:flex;align-items:center;justify-content:center;width:100%;gap:24px;padding:22px 22px 0;position:relative;z-index:3;flex-wrap:wrap}
.hero-controls .hero-orbit{margin-top:0;justify-content:flex-start;padding-right:0;gap:10px}
.hero-controls .hero-orbit button{min-width:40px;min-height:40px}
/* Reset is a distinct action from rotation, so it sits apart with its own gap and a divider. */
.hero-orbit .hero-reset{margin-left:18px}
.assembly-control{display:flex;border:1px solid #a7b7cb33;padding:4px;gap:4px;border-radius:3px;background:#0b152166}
.assembly-control button{padding:11px 14px;font-size:12px;line-height:1.2;letter-spacing:.02em;border-radius:1px;color:#9fabb8;min-height:40px;transition:background .25s,color .25s}
.assembly-control button[aria-pressed="true"]{background:#dce2e9;color:#101721}
.assembly-control button:disabled{opacity:.45;cursor:default}

.hero-hint{position:absolute;top:35px;left:34px;font-size:12px;color:#8493a3;z-index:2;pointer-events:none;display:flex;align-items:center;gap:10px}
.hero-hint:before{content:'↔';font-size:20px;color:#b4c0cc}
.hero-foot{margin-top:22px;padding-top:20px}
.hero-foot .lab,.hero-foot .mono{font-size:12px}
.hero-foot .scope{gap:48px}
.hero-foot .scroll-cue{font-size:12px;color:#a2aebb}
.hero-foot .scope div{flex-direction:row;align-items:center;gap:14px}
.hero-foot .scope .mono{color:#8493a3}
.hero-status{font-size:12px;color:#aebaca;text-align:center;position:absolute;bottom:12px;left:12px;right:12px;z-index:3}
.hero-act.is-ready .hero-status{display:none}
@media(min-width:1700px){.hero-act{height:680px}.hero-g{min-height:690px}}
@media(max-width:1199px){.hero-h{font-size:clamp(58px,6.5vw,80px)}.hero .lede{font-size:16px}.hero-act{height:510px}.hero-g{min-height:560px}.hero-controls,.hero-figure-meta{padding-inline:10px}.hero-ctas{gap:8px 20px}.hero-figure-meta{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:820px){.hero{padding-top:112px;min-height:0;padding-bottom:26px}.hero-g{display:flex;flex-direction:column;align-items:stretch;min-height:0}.hero-t{gap:22px;padding-bottom:0}.hero-h{font-size:clamp(58px,10.7vw,88px)}.hero .lede{max-width:44ch}.hero-v{margin:4px 0 0;align-self:stretch}.hero-act{width:100%;height:470px;align-self:center}.hero-hint{top:22px;left:0}.hero-controls{padding:20px 0 0}.hero-figure-meta{flex-direction:row;padding:0;margin-top:0}.hero-foot{margin-top:32px}.hero-foot .scope{gap:18px;flex-wrap:wrap}.hero-foot .scope div{flex-direction:column;align-items:flex-start;gap:6px}.hero-foot .scroll-cue{display:none}}
@media(max-width:480px){.hero-act{height:365px;width:calc(100% + 32px)}.hero-hint{left:16px;top:16px;font-size:12px}.hero-h{font-size:clamp(51px,12.7vw,64px)}.hero-eyebrow .lab{font-size:12px;letter-spacing:.07em}.hero-figure-meta{flex-direction:column;gap:6px}.hero-controls{gap:10px}.assembly-control button{padding:10px;font-size:12px}.hero .btn{font-size:12px}.hero-foot .scope{column-gap:18px}.hero-foot .scope .lab{letter-spacing:.07em}.hero-foot .scope .mono{font-size:12px}}
/* Below 640px the hero CTAs become full-width blocks, so the secondary one keeps
   its outline instead of the borderless text treatment it has beside the primary. */
@media(max-width:640px){.hero-ctas .btn-ghost{border-color:var(--line-2);padding-inline:22px;min-height:54px}}
@media(prefers-reduced-motion:reduce){.hero-act canvas,.assembly-control button{transition:none}.hero .scroll-cue i{animation:none}}