/* Product worlds: a daytime play scene and app mockups in a bedtime setting. */
.landing[data-app='kuku'] { --hero: #fff9eb; }
.landing[data-app='pasakos'] { --hero: #302d58; }
.landing-header { position: absolute; inset: 0 0 auto; z-index: 10; background: transparent; }
.hero-world { position: relative; overflow: hidden; padding-top: 112px; text-align: center; isolation: isolate; }
.world-copy { position: relative; z-index: 2; width: min(1000px, calc(100% - 48px)); margin-inline: auto; }
.hero-world h1 { font-size: clamp(48px, 5vw, 70px); line-height: 1.08; letter-spacing: -2.4px; }
.hero-world h1 > span { color: #aa4e26; }
.hero-intro { width: min(650px, 100%); margin: 18px auto 22px; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 28px; }
.hero-actions .store-button { flex: none; }
.hero-actions .store-buttons { width: auto; justify-content: center; }
.hero-world-pasakos .hero-actions { flex-direction: column; gap: 18px; }
.hero-world-kuku { background: var(--hero); color: var(--page-ink); }
.play-scene { position: relative; margin-top: 20px; }
.play-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/assets/landscape.jpg') center 68% / cover; mask-image: linear-gradient(transparent, #000 38%); }
.play-scene-inner { position: relative; height: 300px; }
.play-window { position: absolute; width: min(560px, 56%); left: 50%; top: 5px; transform: translateX(-50%); display: block; padding: 7px; background: #fffdf5; border-radius: 22px; box-shadow: 0 12px 30px #264e3826; }
.play-window img { width: 100%; border-radius: 16px; }
.play-friend { position: absolute; z-index: 2; bottom: 8px; }
.play-owl { width: 23%; max-width: 260px; left: -1%; }
.play-fox { width: 21%; max-width: 230px; right: -1%; }
.play-bunny { width: 13%; max-width: 145px; right: 16%; bottom: 0; }
.hero-world-pasakos { min-height: 650px; padding-top: 182px; padding-bottom: 65px; color: #fff8e9; background: #302d58; }
.hero-world-pasakos::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#211c45a8, #211c4526 65%, #211c450d), url('/assets/hero/pasakos-evening.webp') center 60% / cover; }
.hero-world-pasakos h1 > span { color: #ffe09a; }
.hero-world-pasakos .world-copy { width: min(580px, calc(100% - 470px)); }
.hero-world-pasakos h1 { font-size: clamp(44px, 4vw, 56px); }
.hero-world-pasakos .hero-intro { max-width: 430px; }
.story-mockups { position: absolute; inset: 135px 0 auto; z-index: 1; width: min(1184px, calc(100% - 64px)); margin-inline: auto; display: flex; justify-content: space-between; align-items: start; pointer-events: none; }
.hero-phone { width: clamp(175px, 17.2vw, 230px); margin: 12px 0 0; transform: rotate(-4deg); pointer-events: auto; }
.hero-phone:nth-child(2) { margin-top: 45px; transform: rotate(4deg); }
.hero-phone a { display: block; border: 7px solid #252735; padding: 3px; border-radius: 31px; background: #252735; overflow: hidden; box-shadow: 0 20px 35px #100b2b59; }
.hero-phone img { width: 100%; border-radius: 21px; }
@media (min-width: 1025px) {
  .hero-world-kuku { padding-top: 100px; }
  .hero-world-kuku .hero-intro { margin-block: 16px 18px; }
}
@media (max-width: 1024px) {
  .hero-world { padding-top: 115px; }
  .play-scene-inner { height: 310px; }
  .play-window { width: 60%; }
  .play-owl { left: -2%; }
  .play-fox { right: -2%; }
}
@media (max-width: 900px) {
  .hero-world-pasakos { min-height: 0; padding-top: 112px; padding-bottom: 36px; }
  .hero-world-pasakos .world-copy { width: min(650px, calc(100% - 36px)); }
  .story-mockups { position: relative; inset: auto; width: min(430px, calc(100% - 36px)); height: clamp(280px, 88vw, 405px); margin: 28px auto 0; }
  .hero-phone { width: 43%; max-width: 180px; margin-top: 5px; }
  .hero-phone:nth-child(2) { margin-top: 25px; }
  .hero-phone a { border-width: 5px; padding: 2px; border-radius: 25px; }
  .hero-phone img { border-radius: 18px; }
}
@media (max-width: 700px) {
  .hero-world { padding-top: 102px; }
  .world-copy { width: calc(100% - 36px); }
  .hero-world h1 { font-size: clamp(40px, 9.5vw, 58px); letter-spacing: -1.5px; }
  .hero-intro { max-width: 360px; font-size: 16px; margin-block: 18px 22px; }
  .hero-actions { gap: 16px 20px; }
  .hero-actions .store-button { min-width: 150px; }
  .play-scene { margin-top: 24px; }
  .play-scene-inner { width: calc(100% - 24px); height: clamp(265px, 72vw, 420px); }
  .play-window { width: 92%; top: 4px; padding: 5px; border-radius: 16px; }
  .play-window img { border-radius: 11px; }
  .play-owl { width: 30%; left: 0; bottom: 0; }
  .play-fox { width: 28%; right: 0; bottom: 0; }
  .play-bunny { width: 23%; right: 28%; bottom: -3px; }
  .hero-world-pasakos { padding-bottom: 32px; }
  .hero-world-pasakos::before { background-position: center, 58% center; }
  .hero-world-pasakos .hero-intro { max-width: 350px; }
  .hero-world-pasakos .landing-cta { min-height: 52px; font-size: 17px; padding: 12px 30px; }
}
@media (max-width: 360px) {
  .hero-world h1 { font-size: 37px; }
  .hero-world { padding-top: 100px; }
  .hero-actions { gap: 15px; }
  .hero-actions .store-button { min-width: 138px; }
}