:root {
  --navy: #1b1f3b;
  --ink: #12152b;
  --orange: #e05a33;
  --cream: #f1deb5;
  --paper: #f7ecd4;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: #ff8a63; }

/* Hero: a tall block with a sticky stage; scrolling drives --p (0 closed, 1 open). */
.hero { position: relative; }
.js .hero { height: 260vh; }
.stage {
  --p: 1;
  --w: min(46vw, 46vh);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vh, 2.5rem);
  background: radial-gradient(120% 80% at 50% 30%, #2a2f58 0%, var(--navy) 60%, #11142a 100%);
}
.title {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
  transform: translateY(calc((1 - var(--p)) * 1vh)) scale(calc(1 - var(--p) * 0.3));
  text-shadow: 0 0.04em 0 var(--orange);
}
.hint {
  position: absolute;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: calc(0.8 - var(--p) * 4);
}
.hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 28px;
  margin: 0.5rem auto 0;
  background: linear-gradient(var(--cream), transparent);
}

/* The foldable. */
.duo {
  position: relative;
  width: calc(var(--w) * 2);
  height: calc(var(--w) * 1.4);
  perspective: 2200px;
  transform: translateX(calc((1 - var(--p)) * var(--w) * -0.5));
}
.body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--p)) * 10deg)) rotateY(calc((1 - var(--p)) * -16deg));
}
.panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: calc(var(--w) * 0.03);
  background: linear-gradient(145deg, #4a4f6b, #1a1d33 55%, #34385a);
  box-shadow: 0 calc(var(--w) * 0.12) calc(var(--w) * 0.25) rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.panel.right {
  left: 50%;
  border-radius: 0 calc(var(--w) * 0.1) calc(var(--w) * 0.1) 0;
}
.panel.left {
  left: 0;
  border-radius: calc(var(--w) * 0.1) 0 0 calc(var(--w) * 0.1);
  transform-origin: 100% 50%;
  transform: translateZ(1px) rotateY(calc((1 - var(--p)) * 180deg));
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  background: linear-gradient(180deg, #232850, #161a36);
  border-radius: calc(var(--w) * 0.07);
  backface-visibility: hidden;
}
.left .screen { border-radius: calc(var(--w) * 0.07) 0 0 calc(var(--w) * 0.07); }
.right .screen { border-radius: 0 calc(var(--w) * 0.07) calc(var(--w) * 0.07) 0; }
/* Hinge shading toward the middle of the open device. */
.left .screen::after, .right .screen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  pointer-events: none;
}
.left .screen::after { right: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.35)); }
.right .screen::after { left: 0; background: linear-gradient(270deg, transparent, rgba(0, 0, 0, 0.35)); }

.cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0 calc(var(--w) * 0.1) calc(var(--w) * 0.1) 0;
  background: radial-gradient(90% 70% at 40% 25%, #3a3f66, #1b1f3b 70%);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cover img { width: 78%; height: auto; border-radius: 22%; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }

/* Text inside the screens fades in once the device is mostly open. */
.content {
  padding: 9cqw 8cqw;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4cqw;
  opacity: clamp(0, calc((var(--p) - 0.55) * 3), 1);
  color: var(--cream);
}
.content h2 { margin: 0; font-size: 8.2cqw; line-height: 1.12; letter-spacing: -0.02em; }
.content p { margin: 0; font-size: 4.6cqw; line-height: 1.45; opacity: 0.85; }
.eyebrow { color: var(--orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 3.6cqw !important; opacity: 1 !important; }
.ticks, .sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; }
.ticks li { font-size: 4.3cqw; padding-left: 6cqw; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 1.6cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--orange); }
.sources li { display: grid; gap: 0.5cqw; padding: 2.6cqw 4cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.06); }
.sources b { font-size: 5cqw; color: var(--cream); }
.sources span { font-size: 4cqw; line-height: 1.35; opacity: 0.75; }

@media (max-width: 640px) {
  .stage { --w: 46vw; }
  .duo { height: calc(var(--w) * 1.9); }
  .content { padding: 7cqw 6cqw; gap: 3cqw; }
  .content h2 { font-size: 10cqw; }
  .content p, .ticks li { font-size: 6cqw; }
  .ticks li:nth-child(n + 3) { display: none; }
  .sources span { display: block; font-size: 5cqw; }
  .sources b { font-size: 7cqw; }
  .eyebrow { font-size: 5cqw !important; }
}

/* Below the hero. */
.wrap { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }
.more { padding: 5rem 0 3rem; background: linear-gradient(#11142a, var(--navy)); }
.more .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.more h3 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--cream); }
.more p { margin: 0; opacity: 0.8; }

.demo { padding: 3rem 1.5rem 5rem; text-align: center; background: var(--navy); }
.demo h2 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: -0.02em; }
.player {
  max-width: 56rem;
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.try { margin-top: 1.5rem; opacity: 0.85; }

footer { padding: 2rem 1.5rem 3rem; text-align: center; font-size: 0.9rem; opacity: 0.75; background: var(--navy); }
footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero { height: auto; }
  .stage { position: static; min-height: 100svh; padding: 3rem 0; }
  .hint { display: none; }
}