/* Product introduction: one stable message, three cinematic device views. */
.hero.hero-showcase{display:block;min-height:760px;height:auto;max-height:none;padding:138px 5% 76px;overflow:clip}
.hero-showcase .stage{opacity:.27;object-position:74% center}
.hero-showcase .hero-shade{background:linear-gradient(90deg,#07121ef5,#07121eb8 48%,#10172c75),linear-gradient(0deg,#07121e,transparent 65%)}
.hero-layout{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:34px;max-width:1600px;margin:auto}
.hero-showcase .hero-copy{width:100%;margin:0;min-width:0}
.hero-showcase h1{font-size:clamp(55px,4.8vw,84px);line-height:1.02;letter-spacing:-.025em;margin-bottom:25px}
.hero-showcase .hero-copy>p{font-size:15px;line-height:1.8;max-width:490px}
.hero-showcase .eyebrow{font-size:9px;letter-spacing:1.5px;max-width:400px}
.hero-showcase .actions{gap:22px;flex-wrap:wrap;margin-top:28px}
.hero-showcase .button{padding:14px 20px;gap:20px;font-size:12px}
.hero-showcase .text-button{font-size:12px;gap:10px}
.hero-showcase .hero-foot{font-size:10px;line-height:1.8;flex-wrap:wrap;gap:4px;margin-top:24px}
.hero-showcase .hero-foot span{display:block;width:100%}
.hero-showcase .hero-foot span+span{border:0;padding:0;color:#7f96a9}
.hero-showcase .scroll-cue{bottom:24px;z-index:4}
.hero-visual{position:relative;min-width:0;isolation:isolate}
.hero-visual-top{display:flex;align-items:center;justify-content:space-between;padding:0 12px 15px;color:#9db4c6;font-size:9px;letter-spacing:1.8px}
.hero-visual-top span:last-child{letter-spacing:0;font-variant-numeric:tabular-nums;color:#6d899e}
.hero-visual-depth{position:relative;perspective:1500px}
.hero-deck{position:relative;aspect-ratio:1.35;width:100%;isolation:isolate}
.hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:52px;margin:0;opacity:0;transform:translate3d(38px,28px,0) scale(.94);pointer-events:none;transition:opacity 700ms var(--ease-out),transform 1100ms var(--ease-out)}
.hero-slide::before{content:"";position:absolute;inset:4% -10%;z-index:-1;background:radial-gradient(ellipse,#21b8f325,transparent 66%);pointer-events:none}
.hero-slide[data-hero-slide="1"]::before{background:radial-gradient(ellipse,#b496ef30,transparent 66%)}
.hero-slide[data-hero-slide="2"]::before{background:radial-gradient(ellipse,#ffbb6920,transparent 66%)}
.hero-slide.is-current{opacity:1;transform:translate3d(0,0,0) scale(1);z-index:2}
.hero-slide.is-leaving{transform:translate3d(-22px,-18px,0) scale(.97)}
.hero-device-drift{width:100%;position:relative}
.hero-cursor-float{width:100%;position:relative;transform-origin:50% 50%;transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.hero-cursor-float{transform:none!important}}
.hero-slide.is-current .hero-device-drift{animation:hero-device-float 7s var(--ease-in-out) infinite;animation-play-state:paused}
.hero-visual[data-running="true"] .is-current .hero-device-drift{animation-play-state:running}
@keyframes hero-device-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
.hero-hardware{position:relative;box-shadow:8px 28px 45px -15px #000a;transform:perspective(1500px) rotateY(-9deg) rotateX(4deg) rotateZ(2deg);background:linear-gradient(145deg,#677784,#111922 16%,#19212a 85%,#637582);padding:7px;border:1px solid #69818f85;border-radius:15px}
.hero-display{position:relative;overflow:hidden;border-radius:9px;background:#09141e}
.hero-display>img{display:block;width:100%;height:auto}
.hero-desktop .hero-display{aspect-ratio:1.61}
.hero-desktop .hero-display>img{height:100%;object-fit:cover}
.hero-desktop::after{content:"";position:absolute;left:-2%;bottom:-9px;width:104%;height:10px;background:linear-gradient(#81919f,#26313b);border-radius:1px 1px 65% 65%}
.hero-tablet{width:82%;margin:auto;padding:10px;border-radius:23px;transform:perspective(1500px) rotateY(-8deg) rotateX(3deg) rotateZ(-4deg)}
.hero-tablet .hero-display{border-radius:14px}
.hero-tablet::before{content:"";position:absolute;top:3px;left:50%;height:3px;width:3px;background:#04080c;border-radius:50%}
.hero-tablet .device-logo{width:17.5%;left:2.2%;top:3.1%}
.hero-phone{padding:7px;border-radius:27px;transform:perspective(1500px) rotateY(-7deg) rotateX(3deg) rotateZ(-5deg)}
.hero-phone .hero-display{border-radius:20px}
.hero-phone::before{content:"";position:absolute;left:1.5%;top:50%;transform:translateY(-50%);width:1.8%;height:28%;border-radius:14px;background:#03070b;z-index:3}
.hero-phone .device-logo{width:12.5%;left:6.3%;top:2.8%}
.hero-slide figcaption{position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:12px;color:#b5cad8;line-height:1.5}
.hero-slide figcaption strong{font-weight:500;color:#e8f4fc}
.hero-slide figcaption span{display:block;font-size:9px;color:#8ca1b4;margin-top:3px}
.hero-controls{display:flex;align-items:center;gap:20px;margin:20px 100px 0 0}
.hero-selectors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;flex:1}
.hero-selector{position:relative;min-height:48px;padding:9px 0 14px;text-align:left;color:#7792a6;border:0;background:none;font-size:11px;transition:color 180ms ease}
.hero-selector::after,.hero-progress{position:absolute;bottom:3px;left:0;width:100%;height:2px;content:"";background:#354a5b}
.hero-progress{background:#6cd7ff;transform:scaleX(0);transform-origin:left;z-index:1}
.hero-selector[aria-pressed="true"]{color:#e0f5ff}
.hero-selector.is-current .hero-progress{animation:hero-view-progress 6500ms linear both;animation-play-state:paused}
.hero-visual[data-running="true"] .is-current .hero-progress{animation-play-state:running}
.hero-visual[data-manual="true"] .is-current .hero-progress{animation:none;transform:scaleX(1)}
@keyframes hero-view-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-pause{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border:1px solid #68869970;border-radius:50%;background:#11273870;color:#b9d5e6}
.hero-pause svg{width:15px;height:15px}
.hero-switch-instant .hero-slide{transition:none}
.hero-showcase .hero-visual:focus-visible{outline:2px solid #99e2ff;outline-offset:10px}
@media(hover:hover) and (pointer:fine){.hero-selector:hover{color:#e0f5ff}.hero-pause:hover{background:#264558}}
@media(min-width:1550px){.hero.hero-showcase{min-height:900px;padding-top:180px}}
@media(max-width:1050px){
 .hero.hero-showcase{padding-top:140px;min-height:740px}
 .hero-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px}
 .hero-showcase h1{font-size:59px}
 .hero-showcase .hero-copy>p{font-size:14px}
 .hero-showcase .eyebrow{font-size:8px;letter-spacing:1.1px}
 .hero-showcase .actions{gap:15px}
 .hero-visual-top{font-size:8px;letter-spacing:1px;padding-inline:0}
 .hero-deck{aspect-ratio:1.13}
 .hero-tablet{width:92%}
 .hero-selector{font-size:10px}
 .hero-selectors{gap:12px}.hero-controls{gap:12px}
}
@media(max-width:760px){
 .hero.hero-showcase{padding:125px 6% 75px;min-height:0}
 .hero-layout{grid-template-columns:1fr;gap:36px;max-width:600px}
 .hero-showcase h1{font-size:clamp(51px,9.5vw,72px);max-width:590px;margin-bottom:22px}
 .hero-showcase .hero-copy>p{font-size:14px;max-width:530px}
 .hero-showcase .eyebrow{font-size:8px;max-width:none}
 .hero-showcase .actions{flex-direction:row;align-items:center;gap:20px;margin-top:24px}
 .hero-showcase .hero-foot{font-size:9px;margin-top:21px}
 .hero-showcase .hero-foot span+span{display:none}
 .hero-visual{margin:0 -1%}
 .hero-deck{aspect-ratio:1.2}
 .hero-visual-top{padding-bottom:4px}
 .hero-tablet{width:76%}
 .hero-slide figcaption{bottom:0;font-size:11px}
 .hero-slide figcaption span{font-size:8px}
 .hero-controls{margin:17px 0 0}
 .hero-showcase .scroll-cue{left:6%;bottom:18px;font-size:8px}
 .hero-showcase .stage{object-position:65% center;opacity:.22}
 .hero-showcase .hero-shade{background:linear-gradient(#07121ea8,#07121e 85%)}
}
@media(max-width:400px){.hero-showcase h1{font-size:49px}.hero-showcase .actions{gap:14px}.hero-showcase .button{padding:12px 15px;font-size:11px}.hero-showcase .text-button{font-size:11px;gap:8px}.hero-showcase .play-mini{width:30px;height:30px}.hero-controls{gap:10px}.hero-selectors{gap:10px}.hero-selector{font-size:9px}}
.motion-paused .hero-slide,.motion-paused .hero-visual-depth{transition:none;transform:none}
.motion-paused .hero-device-drift,.motion-paused .hero-progress{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.hero-slide{transform:none;transition:opacity 150ms ease}.hero-device-drift,.hero-progress{animation:none!important}.hero-visual-depth{transform:none!important}.hero-selector.is-current .hero-progress{transform:scaleX(1)}}

/* Photographic hardware shells keep the actual interface as a crisp HTML layer. */
.hero-showcase .hero-backdrops{opacity:1;overflow:hidden}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;opacity:0;transition:opacity 1100ms var(--ease-in-out)}
.hero-backdrop.is-current{opacity:.76}
.hero-showcase .hero-shade{background:linear-gradient(90deg,#07121eea,#07121eb0 42%,#07121e40),linear-gradient(0deg,#07121e,transparent 72%)}
.hero[data-backdrop="1"] .hero-progress{background:#c6a7ee}
.hero[data-backdrop="2"] .hero-progress{background:#ffcd8d}
.hero-hardware.hardware-photo{padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(8px 24px 20px #0008)}
.hardware-photo .hero-shell{display:block;width:100%;height:auto;max-width:none}
.hardware-photo .hero-display{position:absolute;aspect-ratio:auto;overflow:hidden;background:#09141e}
.hardware-photo .hero-display>img{width:100%;height:100%;object-fit:fill}
.hero-desktop.hardware-photo{width:98%;margin:auto;transform:perspective(1500px) rotateY(-6deg) rotateX(1deg) rotateZ(1deg)}
.hero-desktop.hardware-photo::after{display:none}
.hero-desktop.hardware-photo .hero-display{left:16.54%;top:2.74%;width:67%;height:60.25%;border-radius:2% 2% .5% .5%}
.hero-desktop.hardware-photo .hero-display>img{position:absolute;left:-.5%;top:-1.5%;width:101%;height:103%;max-width:none}
.hero-desktop.hardware-photo::before{content:"";position:absolute;z-index:3;left:46.4%;top:2.55%;width:7.25%;height:2.1%;border-radius:0 0 5px 5px;background:radial-gradient(circle at 50% 45%,#122c42 0 2%,#070a0c 5% 10%,#000 13%)}
.hero-tablet.hardware-photo{width:82%;transform:perspective(1500px) rotateY(-7deg) rotateZ(-4deg)}
.hero-tablet.hardware-photo::before{display:none}
.hero-tablet.hardware-photo .hero-display{left:5.18%;top:7.09%;width:89.71%;height:85.73%;border-radius:2.2%}
.hero-phone.hardware-photo{width:100%;transform:perspective(1500px) rotateY(-6deg) rotateX(2deg) rotateZ(-5deg)}
.hero-phone.hardware-photo .hero-display{left:2.48%;top:5.42%;width:95.03%;height:88.34%;border-radius:6.5% / 15%}
.hero-phone.hardware-photo::before{left:3.4%;top:37.1%;transform:none;width:3.56%;height:26.1%;border-radius:999px;background:radial-gradient(circle at 50% 16%,#092547 0 2%,#151a3c 4%,#05070a 9%,#000 10% 40%,#000);z-index:4}
.hero-bg-instant .hero-backdrop,.motion-paused .hero-backdrop{transition:none}
@media(max-width:1050px){.hero-tablet.hardware-photo{width:88%}}
@media(max-width:760px){
 .hero-showcase .hero-backdrops{opacity:1}
 .hero-backdrop{object-position:68% center}
 .hero-backdrop.is-current{opacity:.66}
 .hero-showcase .hero-shade{background:linear-gradient(#07121ed0,#07121e78 50%,#07121eeb)}
 .hero-tablet.hardware-photo{width:76%}
}
@media(prefers-reduced-motion:reduce){.hero-backdrop{transition:opacity 150ms ease}}