/* s1: the base v1 layout, rebuilt where Mirko pointed (11/10):
   - own background, same treatment as Zenity's: the KL skyline in morning
     mist, near-white and desaturated, dissolving into white on the left and
     at the bottom (no dark areas); the towers sit in the right margin;
   - four small 3D props floating slowly in the margins (Zenity's logic);
   - bigger video card, headline rebalanced against it;
   - Plus Jakarta Sans instead of Prompt (a Thai face that reads badly in English). */
body.v1 { --font: "Plus Jakarta Sans", system-ui, sans-serif; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; }
.v1 .hero-s1 h1 { letter-spacing: -0.03em; font-weight: 800; }
.floaters { display: none; }
@media (min-width: 900px) {
  .v1 .hero-s1 {
    min-height: calc(100vh - 74px); padding: 104px 0 56px; /* hero + logo strip = one full screen */
    background:
      linear-gradient(180deg, hsl(0 0% 100% / 0) 70%, #fff 100%),
      url("../assets/img/hero-bg-mist-g.webp") right 62% / cover no-repeat, #fff;
  }
  .v1 .hero-s1 .hero-grid { grid-template-columns: 4.3fr 7.7fr; gap: 40px; }
  .v1 .hero-s1 .hero-copy { display: grid; gap: 8px; }
  .v1 .hero-s1 .hero-buy { margin-top: 24px; }
  .v1 .hero-s1 h1 { font-size: clamp(2.4rem, 3vw, 2.85rem); line-height: 1.06; }
  .v1 .hero-s1 .lead { font-size: 1.25rem; max-width: 28ch; }
  .v1 .hero-s1 .video-card { aspect-ratio: 3 / 2; border-radius: 28px; box-shadow: 0 2px 6px hsl(214 60% 10% / .12), 0 32px 64px hsl(214 60% 10% / .26); }
  .v1 .hero-s1 .hero-pop { right: -40px; bottom: -15%; width: 52%; }
}
@media (min-width: 1600px) {
  .floaters { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .v1 .hero-s1 > .wrap { position: relative; z-index: 1; }
  .fl { position: absolute; height: auto; filter: drop-shadow(0 18px 24px hsl(214 50% 20% / .22)); animation: float 7s ease-in-out infinite; }
  .fl-play    { width: clamp(72px, 5.4vw, 112px); left: 5%;  top: 22%; transform: rotate(-12deg); }
  .fl-reel    { width: clamp(60px, 4.2vw, 88px);  left: 10%; bottom: 10%; animation-delay: -2s; }
  .fl-clapper { width: clamp(68px, 5vw, 104px);   right: 5%; top: 18%; animation-delay: -4s; }
  .fl-sparkle { width: clamp(40px, 2.8vw, 56px);  right: 9%; bottom: 20%; animation-delay: -1s; }
  @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
  @media (prefers-reduced-motion: reduce) { .fl { animation: none; } }
}