/* One continuous photograph per aspect ratio. Image and text share the same coordinates. */
.home-hero { position: relative; display: block; height: 100svh; min-height: 0; padding: 0; overflow: hidden; background: #111214; isolation: isolate; }
.home-hero:before, .home-hero:after, .laptop-stage:after { display: none; background: none; }
.home-hero .site-header { position: absolute; inset: 0 0 auto; background: rgba(0,0,0,.22); }
.laptop-stage { position: absolute; top: 50%; left: 50%; width: max(100vw, calc(100svh * 1672 / 941)); height: auto; aspect-ratio: 1672 / 941; margin: 0; transform: translate(-50%, -50%); container-type: inline-size; }
.hero-picture { display: block; width: 100%; height: 100%; }
.home-background { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; object-fit: contain; transform: none; mask-image: none; opacity: 1; }
.home-hero-copy { inset: 27.8% auto auto 31.2%; width: 37.3%; height: 38.1%; max-width: none; padding: 1%; transform: perspective(1100px) rotateY(-.5deg); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.home-hero h1 { font-size: 3.65cqw; line-height: 1.04; }
.home-hero-copy > p { display: block; font-size: 1.1cqw; line-height: 1.35; margin-top: 1.35cqw; }
.home-hero .button { font-size: 1.1cqw; line-height: 1.35; padding: .75cqw 1.6cqw; min-height: 44px; margin-top: 1.5cqw; border-radius: .5cqw; }
.hero-color-fade { height: min(260px, 22svh); }
@media(max-aspect-ratio:3/2) and (min-aspect-ratio:1/1) {
 .laptop-stage { width: max(100vw, calc(100svh * 1487 / 1058)); aspect-ratio: 1487 / 1058; }
 .home-hero-copy { left: 25.2%; top: 26.5%; width: 48.2%; height: 41.5%; }
 .home-hero h1 { font-size: 4.6cqw; }
 .home-hero-copy > p { font-size: 1.6cqw; }
 .home-hero .button { font-size: 1.5cqw; padding: 1cqw 2cqw; }
}
@media(max-aspect-ratio:1/1) {
 .laptop-stage { width: max(100vw, calc(100svh * 941 / 1672)); aspect-ratio: 941 / 1672; }
 .home-hero-copy { left: 20.5%; top: 38.65%; width: 59.5%; height: 20.4%; padding: 1%; }
 .home-hero h1 { font-size: 6cqw; line-height: 1.05; }
 .home-hero-copy > p { display: none; }
 .home-hero .button { font-size: clamp(14px, 3.2cqw, 20px); padding: 10px 16px; margin-top: 2.7cqw; min-height: 44px; border-radius: 6px; }
 .hero-color-fade { height: 120px; }
}
@media(max-aspect-ratio:9/20) {
 .home-hero { height: calc(100vw * 20 / 9); }
 .laptop-stage { width: calc(100vw * 20 / 9 * 941 / 1672); }
}
@media(max-height:600px) and (min-aspect-ratio:1/1) {
 .home-hero-copy > p { display: none; }
 .home-hero .button { font-size: 14px; padding: 8px 14px; margin-top: 1cqw; }
}

/* Phone crop removes excess wall and desk while preserving the whole laptop. */
@media(max-width:600px) and (max-aspect-ratio:1/1) {
 .home-hero { height: calc(88px + 105vw); }
 .laptop-stage { width: 125vw; top: calc(88px - 70vw); left: 50%; transform: translateX(-50%); }
 .hero-color-fade { height: 75px; }
 .home-hero .button { position: relative; font-size: clamp(12px, 2.7cqw, 15px); padding: 6px 12px; min-height: 34px; }
 /* Keep the touch target at least 44px high around the smaller visible button. */
 .home-hero .button::before { content: ''; position: absolute; inset: -5px 0; }
}

/* Subtle screen scanlines on phones and tablets; the overlay never intercepts taps. */
@media(max-width:1180px) {
 .home-hero-copy:after {
  background: linear-gradient(118deg, rgba(212,225,255,.035), transparent 55%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(8,10,20,.022) 3px 4px);
  pointer-events: none;
 }
}
/* Ultra-wide composition has extra side room so the laptop stays within the viewport. */
@media(min-aspect-ratio:14/5) {
 .laptop-stage { width: max(100vw, calc(100svh * 3)); aspect-ratio: 3 / 1; }
 .home-hero-copy { left: 40.5%; top: 37%; width: 19%; height: 32%; padding: .4%; }
 .home-hero h1 { font-size: 1.85cqw; }
 .home-hero-copy > p { font-size: .62cqw; margin-top: .65cqw; }
 .home-hero .button { font-size: .65cqw; padding: .4cqw .9cqw; margin-top: .7cqw; }
}

/* Bring the ultrawide laptop closer, bounded by the space below navigation. */
@media(min-aspect-ratio:14/5) {
 .home-hero { --hero-nav-height: max(119px, 6.19792vw); --ultra-scene-height: calc((100svh - var(--hero-nav-height) - 32px) / .49); }
 .laptop-stage { width: calc(var(--ultra-scene-height) * 3); top: calc(var(--hero-nav-height) + 16px - var(--ultra-scene-height) * .35); left: 50%; transform: translateX(-50%); }
}
/* Screen artwork stays in the same coordinate system as the live headline/CTA.
   Clip only the decoration, preserving the button's enlarged touch target. */
.home-hero-copy {
  background: #060913;
  isolation: isolate;
}
.laptop-screen-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 100%, #12317d55, transparent 53%),
    radial-gradient(ellipse at 85% 72%, #32106322, transparent 55%),
    linear-gradient(125deg, #080c18, #050711 70%);
}
.screen-ribbon {
  position: absolute;
  display: block;
  width: 13%;
  height: 66%;
  right: -1%;
  top: 13%;
  border-radius: 65% 10% 75% 45%;
  transform: skewX(-22deg) rotate(6deg);
  background: linear-gradient(170deg, #10307a 4%, #173bd3 39%, #6c26bd 76%, #301148 98%);
  opacity: .62;
}
.screen-ribbon-back {
  right: -10%;
  top: 40%;
  height: 48%;
  width: 16%;
  opacity: .4;
  background: linear-gradient(155deg, #152260, #742eb0 78%, #281036);
}
.home-hero h1 { text-shadow: 0 0 1px #e6e6ff44, 0 0 9px #a48eff12; }
@media(max-aspect-ratio:1/1) {
  .screen-ribbon-front { right: -3%; opacity: .42; }
  .screen-ribbon-back { right: -12%; opacity: .3; }
}

/* Reserve real space above the photograph when a phone is turned sideways. */
@media(max-width:1024px) and (max-height:600px) and (orientation:landscape) {
 .home-hero { --landscape-scene-height: calc(100vw * 941 / 1672); height: calc(64px + var(--landscape-scene-height)); }
 .home-hero .site-header { background: #111214; }
 .laptop-stage { top: 64px; width: 100vw; transform: translateX(-50%); }
}
@media(max-width:1024px) and (max-height:600px) and (min-aspect-ratio:14/5) {
 .home-hero { --landscape-scene-height: calc(100vw / 3); }
}
@media(max-width:1024px) and (max-height:600px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:3/2) {
 .home-hero { --landscape-scene-height: calc(100vw * 1058 / 1487); }
}