/* Hero: headline left, the company's WhatsApp chat list right (stacked on phones).
 * Not pinned. The only motion is a one-time entrance on load. */

.hero { position: relative; padding-top: var(--header-h); overflow: clip; }
.hero-grid {
  width: 100%; max-width: var(--maxw); min-height: calc(100svh - var(--header-h)); margin: 0 auto;
  padding: var(--s6) var(--rail);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); min-width: 0; }
.hero-h1 { font: 400 clamp(52px, 7.2vw, 118px)/.95 var(--serif); letter-spacing: -.025em; }
.hero-h1 .lime { display: block; }
.hero-sub { max-width: 34ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2); }
.hero-cta { margin-top: var(--s2); }

/* the device column: tall as the screen allows; a faint light under the phone */
.hero-device { position: relative; height: calc(100svh - var(--header-h) - 2 * var(--s6)); min-height: 540px; max-height: 920px; }
.hero-device::before {
  content: ""; position: absolute; inset: 8% -10% 0; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 54%, rgba(233, 237, 224, .07), transparent 70%);
}
.hero-device .phone-fit { padding: 8px 0 30px; }
.hero-device .demo-note { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* entrance, once on load (JS only; reduced motion collapses it in base.css) */
.js .hero-copy > * { animation: hero-up 1s var(--ease-expo) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .07s; }
.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
.js .hero-device .phone-fit { animation: hero-rise 1.2s var(--ease-expo) .1s both; }
.js .hero .wa-row { animation: hero-up .8s var(--ease-expo) both; animation-delay: calc(.45s + var(--i) * .055s); }
.js .hero .wa-badge { animation: hero-pop .55s var(--ease-expo) both; animation-delay: calc(.85s + var(--i) * .055s); }
@keyframes hero-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes hero-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
}
/* phones and narrow tablets: copy first, then the full phone below it */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--s7); padding-top: var(--s7); padding-bottom: var(--s8); }
  .hero-h1 { font-size: clamp(50px, 13.5vw, 96px); }
  .hero-cta, .hero-cta .btn { width: 100%; }
  .hero-cta .btn { padding: 16px 20px; font-size: 12.5px; letter-spacing: .12em; }
  .hero-device { height: auto; min-height: 0; max-height: none; }
  .hero-device .phone-fit { width: min(100%, 360px); height: auto; aspect-ratio: 429 / 886; margin: 0 auto; padding: 0; }
  .hero-device .demo-note { position: static; transform: none; margin-top: var(--s4); text-align: center; white-space: normal; }
}