/* High-definition laptop treatment. Geometry remains CSS/vector sharp at every zoom level. */
.cinematic-hero {
  height: 260vh;
}

.cinematic-device {
  perspective: 1900px;
  perspective-origin: 50% 54%;
}

.cinematic-laptop {
  width: min(66vw, 56rem);
  aspect-ratio: 1.58;
  transform-style: preserve-3d;
  will-change: transform;
  /* A filter on the parent rasterizes the entire screen and blurs its text while zooming. */
  filter: none;
}

.cinematic-display {
  inset: 0 3.25% 18%;
  border: 1px solid #9d9da2;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, #ededee 0, #a8a8ac 2.5%, #414146 7%, #161618 76%, #8f8f94 100%);
  box-shadow: 0 1.6rem 4.2rem rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 -.15rem .3rem rgba(0, 0, 0, .5);
  transform-style: preserve-3d;
}

.cinematic-display::before {
  content: "";
  position: absolute;
  inset: .25rem;
  z-index: 8;
  border-radius: .95rem;
  background: linear-gradient(115deg, rgba(255,255,255,.16), transparent 22%, transparent 72%, rgba(255,255,255,.045));
  pointer-events: none;
}

.cinematic-bezel {
  inset: 1.35%;
  border-width: .26rem;
  border-radius: .88rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 0 1rem rgba(0,0,0,.8);
}

.cinematic-site,
.cinematic-site-copy,
.cinematic-site-nav {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.cinematic-site {
  will-change: opacity;
}

.cinematic-site-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 4.5% 6%;
}

.cinematic-site-copy {
  position: absolute;
  inset: 0;
  align-content: center;
  justify-items: center;
  gap: clamp(.4rem, 1vw, .9rem);
  padding: 10% 12% 7%;
  text-align: center;
}

.cinematic-site-copy strong {
  max-width: 17ch;
  font-size: clamp(1.15rem, 2.7vw, 2.9rem);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .94;
}

.cinematic-site-copy p {
  max-width: 34ch;
  color: #d7d7da;
  font-size: clamp(.62rem, 1.05vw, 1.08rem);
  font-weight: 650;
}

.cinematic-site-action {
  margin-top: .15rem;
  font-size: clamp(.58rem, .95vw, .98rem);
  font-weight: 850;
}

.cinematic-motivation {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(.55rem, 1.2vw, 1.05rem);
  padding: 10% 12% 7%;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}

.cinematic-motivation small {
  color: #ff9b69;
  font-size: clamp(.38rem, .68vw, .7rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cinematic-motivation strong {
  max-width: 17ch;
  font-size: clamp(1.15rem, 2.75vw, 2.95rem);
  letter-spacing: -.06em;
  line-height: .94;
}

.cinematic-motivation span {
  color: #d2d2d5;
  font-size: clamp(.48rem, .82vw, .86rem);
  font-weight: 650;
}

.cinematic-hinge {
  right: 11%;
  bottom: 16.8%;
  left: 11%;
  z-index: 7;
  height: 2.2%;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, #18181b 0, #a4a4a8 34%, #333337 55%, #0d0d0f 100%);
  box-shadow: 0 .18rem .42rem #000, inset 0 1px rgba(255,255,255,.42);
}

.cinematic-hinge i {
  position: absolute;
  top: -18%;
  width: 21%;
  height: 138%;
  border-radius: 999px;
  background: linear-gradient(90deg, #29292c, #bdbdc0 28%, #4b4b50 58%, #18181a);
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 .15rem .3rem rgba(0,0,0,.8);
}

.cinematic-hinge i:nth-child(1) { left: 3%; }
.cinematic-hinge i:nth-child(2) { left: 39.5%; }
.cinematic-hinge i:nth-child(3) { right: 3%; }

.cinematic-base {
  right: -1.5%;
  bottom: -1%;
  left: -1.5%;
  height: 22%;
  border-color: #a7a7ab;
  border-radius: .52rem .52rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, #e0e0e2 0, #b6b6ba 13%, #7b7b80 54%, #353539 100%);
  box-shadow: inset 0 .13rem .22rem rgba(255,255,255,.72), inset 0 -.18rem .28rem rgba(0,0,0,.4), 0 1.8rem 2.7rem rgba(0,0,0,.78);
  transform: rotateX(61deg) translateZ(-.12rem);
  transform-style: preserve-3d;
}

.cinematic-base::before {
  content: "";
  position: absolute;
  inset: 3% 2% 7%;
  border: 1px solid rgba(40,40,43,.28);
  border-radius: .45rem .45rem .9rem .9rem;
  pointer-events: none;
}

.cinematic-keys {
  top: 10%;
  left: 14%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3.5% 1.15%;
  width: 72%;
  height: 45%;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translateZ(.12rem);
  transform-style: preserve-3d;
}

.cinematic-keys span {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  border: 1px solid #080809;
  border-radius: .13rem;
  background: linear-gradient(145deg, #3c3c41 0, #1c1c20 38%, #09090b 100%);
  color: rgba(255,255,255,.72);
  font-size: clamp(.16rem, .34vw, .35rem);
  line-height: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.2), inset 0 -1px rgba(0,0,0,.9), 0 .16rem 0 #050506, 0 .2rem .16rem rgba(0,0,0,.82);
  transform: translateZ(.16rem);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.cinematic-keys span::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: .08rem;
  background: linear-gradient(135deg, rgba(255,255,255,.055), transparent 46%);
  pointer-events: none;
}

.cinematic-speaker {
  position: absolute;
  top: 10%;
  width: 8.8%;
  height: 44%;
  opacity: .68;
  background-image: radial-gradient(circle, #333337 0 24%, transparent 28%);
  background-size: .3rem .3rem;
}

.cinematic-speaker-left { left: 3.7%; }
.cinematic-speaker-right { right: 3.7%; }

.cinematic-trackpad {
  bottom: 4.5%;
  left: 36%;
  width: 28%;
  height: 34%;
  border-color: rgba(45,45,49,.62);
  border-radius: .38rem;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(70,70,74,.08));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px rgba(0,0,0,.35);
  transform: translateZ(.08rem);
}

.cinematic-notch {
  bottom: -2%;
  height: 9%;
  background: linear-gradient(180deg, #8e8e92, #444448);
}

.cinematic-base::after {
  right: .35%;
  bottom: -17%;
  left: .35%;
  height: 23%;
  border-radius: 0 0 1.15rem 1.15rem;
  background: linear-gradient(180deg, #77777c 0, #38383c 45%, #111113 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 .5rem 1rem rgba(0,0,0,.7);
}

.cinematic-display::after {
  content: "";
  position: absolute;
  right: 43%;
  bottom: -.44rem;
  left: 43%;
  height: .48rem;
  border-radius: 0 0 .35rem .35rem;
  background: linear-gradient(180deg, #85858a, #252529);
  box-shadow: 0 .12rem .2rem rgba(0,0,0,.7);
}

.cinematic-pitch {
  position: absolute;
  top: 48%;
  right: clamp(1.5rem, 4vw, 4.5rem);
  z-index: 6;
  width: min(22vw, 19rem);
  padding-left: 1.15rem;
  border-left: 1px solid rgba(255, 138, 80, .7);
  color: #f5f5f7;
  opacity: 0;
  transform: translateY(1.2rem);
  will-change: transform, opacity;
}

.cinematic-pitch span {
  color: #ff9a67;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cinematic-pitch p {
  margin: .65rem 0 0;
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  letter-spacing: -.035em;
  line-height: 1.12;
}

.cinematic-pitch strong { color: #ff8a50; }

.cinematic-welcome {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 7rem 1.5rem 3rem;
  background: #000;
  color: #f5f5f7;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
}

.cinematic-welcome > div {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 64rem;
}

.cinematic-welcome small {
  color: #ff9663;
  font-size: clamp(.68rem, 1vw, .82rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cinematic-welcome h2 {
  margin: 0;
  font-size: clamp(3.2rem, 7.5vw, 7.8rem);
  letter-spacing: -.075em;
  line-height: .9;
}

.cinematic-welcome p {
  max-width: 38rem;
  margin: .35rem 0 0;
  color: #a9a9ae;
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.55;
}

.cinematic-welcome-button {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.4rem;
  margin-top: .6rem;
  padding: .85rem 1.3rem;
  border-radius: 999px;
  background: #f56320;
  color: #fff;
  font-size: .78rem;
  font-weight: 850;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 1rem 2.8rem rgba(245,99,32,.28);
  transition: transform .25s, box-shadow .25s, background .25s;
}

.cinematic-welcome-button:hover {
  background: #ff7133;
  box-shadow: 0 1.3rem 3.2rem rgba(245,99,32,.4);
  transform: translateY(-3px);
}

@media (max-width: 1080px) {
  .cinematic-pitch { display: none; }
}

@media (max-width: 700px) {
  .cinematic-hero { height: 185svh; }
  .cinematic-laptop { width: 92vw; }
  .cinematic-display { inset-inline: 3%; }
  .cinematic-speaker { background-size: .22rem .22rem; }
  .cinematic-site-copy { gap: .38rem; padding: 11% 8% 7%; }
  .cinematic-site-copy small { font-size: clamp(.48rem, 2vw, .62rem); }
  .cinematic-site-copy strong { max-width: 16ch; font-size: clamp(1rem, 4.5vw, 1.35rem); }
  .cinematic-site-copy p { max-width: 28ch; font-size: clamp(.58rem, 2.35vw, .72rem); }
  .cinematic-site-action { font-size: clamp(.56rem, 2.2vw, .68rem); }
  .cinematic-motivation { gap: .42rem; padding: 11% 8% 7%; }
  .cinematic-motivation small { font-size: clamp(.46rem, 1.85vw, .58rem); }
  .cinematic-motivation strong { max-width: 18ch; font-size: clamp(.95rem, 4.15vw, 1.25rem); }
  .cinematic-motivation span { font-size: clamp(.5rem, 2vw, .62rem); }
  .cinematic-welcome { padding-inline: 1rem; }
  .cinematic-welcome h2 { font-size: clamp(3rem, 14vw, 5rem); }
}

@media (max-width: 500px) {
  .site-header { padding-right: .45rem !important; }
  .site-header .nav-cta { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-pitch { opacity: 1; transform: none; }
}

/* iOS Safari can drop descendants of an animated 3D element and show a black
   texture instead. Keep the display surface in WebKit's visible composition tree. */
@supports (-webkit-touch-callout: none) {
  .cinematic-display {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .cinematic-bezel,
  .cinematic-site,
  .cinematic-site-nav,
  .cinematic-site-copy,
  .cinematic-motivation {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .cinematic-site {
    -webkit-transform: translateZ(.5px);
    transform: translateZ(.5px);
  }
}

/* Stable iPhone/iPad fallback: Safari intermittently rasterizes the rotated
   display as a black texture. iOS keeps the same entrance and zoom, while the
   lid and its HTML screen stay on a flat, continuously visible surface. */
.is-ios .cinematic-device {
  perspective: none;
}

.is-ios .cinematic-laptop,
.is-ios .cinematic-display,
.is-ios .cinematic-bezel {
  transform-style: flat;
  -webkit-transform-style: flat;
}

.is-ios .cinematic-display {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

.is-ios .cinematic-site {
  opacity: 1 !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: opacity;
}

.is-ios .cinematic-site-nav,
.is-ios .cinematic-site-copy,
.is-ios .cinematic-site-copy > * {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.is-ios .vanta-clouds {
  background: radial-gradient(circle at 52% 48%, #392017 0, #161413 42%, #08090a 100%);
}