/* v1 "Light poster": navy header, full-screen light hero with a city
   background, video card with creators stepping out of it; below, white
   (soft gradient) and navy sections alternate. Every section, hero included,
   sits in the same centered .wrap frame. */
body.v1 { background: var(--gray-50); }

/* header */
.v1 .site-header, .v1 .site-header.solid { background: var(--navy-900); color: #fff; box-shadow: 0 1px 0 hsl(0 0% 100% / .06); backdrop-filter: none; }
.v1 .site-header .logo .logo-on-dark { display: block; }
.v1 .site-header .logo .logo-on-light { display: none; }

/* hero */
.v1 .hero {
  position: relative; overflow: hidden; padding: 80px 0 32px;
  background:
    linear-gradient(180deg, hsl(0 0% 100% / 0) 0%, hsl(0 0% 100% / 0) 30%, hsl(0 0% 100% / .82) 48%, hsl(214 40% 98% / .95) 100%),
    url("../assets/img/hero-bg-tall.webp") center top / cover no-repeat, var(--gray-50);
}
.v1 .hero-grid { display: grid; gap: 24px; }
.v1 .hero-media { position: relative; order: -1; margin: 0 -8px; }
.v1 .video-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/10; background: var(--navy-900); }
.v1 .video-card video { width: 100%; height: 100%; object-fit: cover; }
.v1 .video-tag { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: hsl(214 70% 8% / .6); backdrop-filter: blur(6px); color: #fff; font-size: .72rem; font-weight: 500; }
.v1 .hero-pop { position: absolute; right: -12px; bottom: -28px; width: 50%; pointer-events: none; filter: drop-shadow(0 18px 24px hsl(214 60% 10% / .28)); }
.v1 .eyebrow { font-size: .85rem; font-weight: 500; color: var(--gray-700); display: flex; gap: 8px; align-items: center; }
.v1 h1 { font-size: clamp(2rem, 8.4vw, 4rem); font-weight: 700; color: var(--navy-900); margin: 8px 0 12px; max-width: 13ch; }
.v1 .lead { font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--gray-700); max-width: 30ch; }
.v1 .hero-buy { display: grid; gap: 12px; margin-top: 20px; justify-items: start; }
.v1 .hero-buy .btn { width: 100%; }
.v1 .tools-hero { margin-top: 40px; justify-content: center; color: var(--navy-900); }
.v1 .tools-hero .tool-logo { filter: brightness(0) saturate(0); opacity: .55; }

@media (min-width: 900px) {
  .v1 .hero {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 40px;
    background:
      linear-gradient(90deg, hsl(0 0% 100% / .88) 0%, hsl(0 0% 100% / .62) 34%, hsl(0 0% 100% / 0) 58%),
      linear-gradient(180deg, hsl(0 0% 100% / 0) 70%, hsl(214 40% 98%) 100%),
      url("../assets/img/hero-bg-wide.webp") center / cover no-repeat, var(--gray-50);
  }
  .v1 .hero-grid { grid-template-columns: 4.5fr 7.5fr; align-items: center; gap: 48px; }
  .v1 .hero-media { order: 0; margin: 0; }
  .v1 .video-card { aspect-ratio: 16/9; border-radius: 24px; }
  .v1 .hero-pop { right: -32px; bottom: -16%; width: 54%; }
  .v1 h1 { font-size: clamp(2.6rem, 3.6vw, 3.4rem); max-width: none; }
  .v1 .hero-buy .btn { width: auto; }
  .v1 .tools-hero { justify-content: flex-start; margin-top: 56px; }
}

/* section rhythm: white with a soft gradient / navy */
.v1 .pains, .v1 .work, .v1 .pricing, .v1 .closing {
  background:
    radial-gradient(900px 420px at 100% 0%, hsl(34 100% 94% / .75), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, hsl(214 60% 92% / .7), transparent 60%),
    linear-gradient(180deg, #fff 0%, hsl(214 40% 97%) 100%);
}
.v1 .why, .v1 .value, .v1 .proof, .v1 .faq {
  color: #fff;
  background:
    radial-gradient(900px 480px at 85% 0%, hsl(214 60% 26% / .9), transparent 65%),
    radial-gradient(700px 360px at 0% 100%, hsl(30 100% 46% / .12), transparent 60%),
    var(--navy-950);
}

/* components on navy */
.v1 .why .body, .v1 .value .body { color: hsl(0 0% 100% / .74); }
.v1 .why .link, .v1 .value .kicker { color: var(--orange-400); }
.v1 .why .stat, .v1 .proof .quote { background: hsl(0 0% 100% / .06); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08); }
.v1 .why .stat b { color: #fff; }
.v1 .why .stat span { color: hsl(0 0% 100% / .62); }
.v1 .value .poster { background: linear-gradient(160deg, hsl(214 42% 22%), var(--navy-900)); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), var(--shadow-lg); }
.v1 .value .poster p { color: hsl(0 0% 100% / .72); }
.v1 .value .poster .tag { color: var(--orange-400); }
.v1 .value .poster .meta { background: hsl(0 0% 100% / .1); color: #fff; }
.v1 .value .poster-img img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
.v1 .value .extras li, .v1 .faq details { background: hsl(0 0% 100% / .06); box-shadow: none; }
.v1 .value .extras li span { color: hsl(0 0% 100% / .6); }
.v1 .value .value-total s { color: hsl(0 0% 100% / .5); }
.v1 .proof .quote blockquote, .v1 .proof .quote figcaption b, .v1 .faq summary { color: #fff; }
.v1 .proof .quote figcaption { color: hsl(0 0% 100% / .6); }
.v1 .faq details p { color: hsl(0 0% 100% / .72); }

/* components on white */
.v1 .work .body { color: var(--gray-700); }