.hero { width: var(--page); min-height: calc(100svh - 104px); margin: auto; display: grid; grid-template-columns: minmax(420px, .83fr) 1.17fr; align-items: center; gap: clamp(28px, 4vw, 80px); position: relative; z-index: 2; padding: 54px 0 72px; }
.hero__copy { position: relative; z-index: 3; }
.hero h1 { margin: 28px 0 24px; font-size: clamp(66px, 7vw, 126px); line-height: .81; letter-spacing: -.078em; font-weight: 600; }
.hero h1 em { display: inline-block; font-size: .91em; letter-spacing: -.065em; transform: translateX(.02em); }
.hero__lede { max-width: 520px; margin: 0; color: #55595f; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.62; letter-spacing: -.02em; }
.hero__actions { margin-top: 43px; display: flex; align-items: center; gap: 23px; }
.availability { color: #767a80; font: 400 9px/1.6 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }

.hero-sequence { opacity: 0; transform: translateY(28px); filter: blur(8px); animation: heroAssemble 1.2s var(--spring) forwards; }
.hero__copy .eyebrow { animation-delay: .12s; }.hero h1 { animation-delay: .25s; }.hero__lede { animation-delay: .5s; }.hero__visual { animation-delay: .64s; }.hero__actions { animation-delay: 1.1s; }
@keyframes heroAssemble { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

.hero__visual { min-width: 0; perspective: 1200px; transform-style: preserve-3d; }
.visual__frame { aspect-ratio: 1.13; position: relative; overflow: hidden; border-radius: 2px; border: 1px solid rgba(255,255,255,.72); background: #e9eaec; transform: rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg)); transition: transform .8s var(--spring), box-shadow .8s var(--spring); box-shadow: 0 0 0 rgba(20,23,28,0); }
.hero__visual:hover .visual__frame { box-shadow: -16px -16px 34px rgba(255,255,255,.8), 22px 28px 42px rgba(33,36,42,.13); }
.visual__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); filter: contrast(1.04) saturate(.5); transition: transform 1.4s var(--smooth), filter .8s; }
.hero__visual:hover img { transform: scale(1.12); filter: contrast(1.08) saturate(.35); }
.visual__wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(242,243,245,.7), transparent 30%), linear-gradient(0deg, rgba(238,239,241,.22), transparent 45%); mix-blend-mode: screen; pointer-events: none; }
.scanline { position: absolute; left: 0; right: 0; height: 1px; top: 10%; background: linear-gradient(90deg, transparent, rgba(31,35,41,.28), transparent); box-shadow: 0 0 18px white; animation: scan 7s var(--smooth) infinite; }
@keyframes scan { 0%,10% { top: 8%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: .6; } 90%,100% { top: 91%; opacity: 0; } }
.visual__meter { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: end; gap: 3px; }
.visual__meter i { width: 2px; height: 7px; background: var(--ink); opacity: .25; animation: meter 1.4s ease-in-out infinite alternate; }.visual__meter i:nth-child(2) { height:12px; animation-delay:.2s }.visual__meter i:nth-child(3) { height:18px; animation-delay:.4s }.visual__meter i:nth-child(4) { height:10px; animation-delay:.6s }.visual__meter i:nth-child(5) { height:15px; animation-delay:.8s }
@keyframes meter { to { opacity: .8; transform: scaleY(.65); } }

@media (max-width: 1050px) { .hero { grid-template-columns: .9fr 1.1fr; }.hero h1 { font-size: clamp(60px, 8vw, 90px); } }
@media (max-width: 800px) { .hero { min-height: auto; grid-template-columns: 1fr; padding: 72px 0 70px; gap: 54px; }.hero h1 { font-size: clamp(62px, 19vw, 100px); }.hero__lede { max-width: 90%; }.hero__visual { grid-row: 2; } }
@media (max-width: 500px) { .hero__actions { align-items: stretch; flex-direction: column; }.hero__actions .volume-button { width: 100%; }.availability { padding-left: 3px; }.visual__frame { aspect-ratio: .92; }.visual__frame img { object-position: 59% center; } }