#product.image-hero{height:100svh;min-height:620px;position:relative;isolation:isolate;overflow:hidden;background:#030504;padding:0}
.hero-scene{position:absolute;width:max(100%,calc(100svh * 1.77683));aspect-ratio:1672/941;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover}
.hero-atmosphere{position:absolute;inset:0;background:url('../assets/hero-bg.png') center/cover no-repeat;opacity:.25}
.hero-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000d 0%,#0003 17%,transparent 38%,transparent 70%,#000a 91%,#030303 100%),linear-gradient(90deg,#0009 0%,transparent 19%,transparent 79%,#0009 100%);z-index:1}
.hero-editorial{position:absolute;z-index:3;left:clamp(32px,6vw,96px);top:clamp(104px,13.5vh,150px);max-width:620px;pointer-events:none;color:#fff;text-shadow:0 3px 26px #000e}
.hero-editorial__label{display:flex;align-items:center;gap:11px;margin-bottom:17px;font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:#b7c3bc}
.hero-editorial__label b{font-weight:600;color:#8ff0a8}
.hero-editorial__label i{display:block;width:30px;height:1px;background:linear-gradient(90deg,#75dc90,rgba(117,220,144,.16))}
.hero-editorial h1{font-family:"Arial Narrow","Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;font-size:clamp(35px,3.35vw,58px);font-weight:700;letter-spacing:-.025em;line-height:1.3;margin:0;transform:scaleX(.97);transform-origin:left center}
.hero-editorial h1 span{display:block}
.hero-editorial h1 span:last-child{background:linear-gradient(90deg,#fff 0%,#e8efea 68%,#b8c5bd 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.hero-editorial p{display:none;font-size:11px;font-weight:400;color:#bdc8c1;letter-spacing:.12em;line-height:1.8;margin:13px 0 0}
.hero-editorial__accent{display:block;width:54px;height:3px;margin-top:18px;background:linear-gradient(90deg,#63e788,#a0ffb7);box-shadow:0 0 16px #57e18966}
.hero-annotations{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;color:#f1f6f2;filter:drop-shadow(0 2px 5px #000)}
.device-callout{color:inherit;cursor:pointer;outline:none}
.device-line{fill:none;stroke:currentColor;stroke-width:1.4;vector-effect:non-scaling-stroke}
.device-callout circle{fill:#fff}
.device-name{fill:currentColor;font:500 18px var(--sw-font-body);letter-spacing:2px}
.device-caption{fill:#c3cdc6;font:400 13px var(--sw-font-body);letter-spacing:1px}
.device-callout:hover,.device-callout:focus-visible{color:#9ef6b5;filter:drop-shadow(0 0 6px #86d49b66)}
.hero-baseline{position:absolute;z-index:3;bottom:25px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:#adb8b1}
.hero-baseline a{color:#e5ebe7;text-decoration:none;display:flex;gap:22px;align-items:center}.hero-baseline a span{font-size:19px}
/* The photograph and its callouts share the same canvas and transform. */
.hero-ready .hero-scene{animation:hero-arrive 1.8s cubic-bezier(.18,.7,.2,1) both}
.hero-ready .hero-editorial__label{animation:hero-copy-in .8s .2s both}
.hero-ready h1 span:nth-child(1){animation:hero-copy-in 1s .35s both}
.hero-ready h1 span:nth-child(2){animation:hero-copy-in 1s .5s both}
.hero-ready .hero-editorial p,.hero-ready .hero-editorial__accent{animation:hero-copy-in .9s .7s both}
.hero-ready .device-line{stroke-dasharray:1;stroke-dashoffset:1;animation:hero-draw .85s calc(.8s + var(--order) * .15s) both}
.hero-ready .device-callout text,.hero-ready .device-callout circle{animation:hero-label-in .7s calc(1.15s + var(--order) * .15s) both}
.hero-ready .hero-baseline{animation:hero-copy-in 1s 1.6s both}
@keyframes hero-arrive{from{opacity:0;transform:translate(-50%,-50%) scale(1.055);filter:blur(5px)}to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
@keyframes hero-copy-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes hero-draw{to{stroke-dashoffset:0}}
@keyframes hero-label-in{from{opacity:0}to{opacity:1}}
@media(min-width:761px) and (max-aspect-ratio:4/3){.hero-scene{width:100%;top:59%}.hero-editorial{top:13.5vh}.hero-editorial h1{font-size:4vw}.hero-atmosphere{filter:blur(14px);opacity:.4}.hero-vignette{background:linear-gradient(#0009,transparent 30%,transparent 67%,#030303),linear-gradient(90deg,#0008,transparent 20%,transparent 80%,#0008)}}
@media(max-width:760px){#product.image-hero{min-height:600px}.hero-scene{width:100%;top:43%;}.hero-atmosphere{filter:blur(12px);opacity:.35;background-position:40% center}.hero-editorial{left:6%;right:5%;top:13%;max-width:none}.hero-editorial__label{font-size:8px;margin-bottom:13px}.hero-editorial h1{font-size:clamp(27px,7vw,38px);line-height:1.3}.hero-editorial p{display:block;font-size:10px;margin-top:12px}.hero-editorial__accent{width:42px;height:2px;margin-top:14px}.hero-vignette{background:linear-gradient(#030303b3,transparent 25%,transparent 60%,#030303 82%),linear-gradient(90deg,#0006,transparent 12%,transparent 88%,#0006)}.device-name{font-size:42px;letter-spacing:0}.device-caption{display:none}.device-line{stroke-width:1}.device-callout circle{r:5}.hero-baseline{bottom:3%;font-size:9px;letter-spacing:.05em}.hero-baseline__detail{display:none}.hero-baseline a{gap:9px}}
@media(prefers-reduced-motion:reduce){.image-hero *{animation:none!important;filter:none}.hero-ready .device-line{stroke-dashoffset:0}}
@media(max-width:760px){.hero-scene{mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}}
@media(min-width:761px) and (max-height:620px){.hero-editorial{top:82px}.hero-editorial__label{margin-bottom:11px}.hero-editorial h1{font-size:clamp(29px,3.6vw,42px);line-height:1.13;max-width:460px}.hero-editorial__accent{margin-top:12px}}