/* =========================================================
   HERO — headline, subhead, CTA row, proof, eyebrow tag
   ========================================================= */
.hero {
  padding: 80px 0 40px;
  position: relative;
}

/* Scroll-pinned variant: tall outer scrolls past while .hero-stage is
   sticky. JS writes --hp (0..1) on .hero-stage so the headline crossfades
   from "See them type." to "Hear them think." then dwells before the
   next section. */
.hero.hero-scroll {
  padding: 0;
  min-height: 340vh;
}
.hero-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 96px 0 48px;
  --hp: 0;
  --pp: 0;
}
@media (max-width: 980px) {
  /* Mobile keeps the original layout: hero-stage is the single sticky
     pin, text + phone are stacked and centered inside it. The taller
     hero-scroll gives the stage a longer pin range so we get:
       phase 1  (0   → ~90vh)  crossfade (pEndMobile ≈ 0.22)
       phase 2  (~90 → 130vh)  breathing-pause dwell
       phase 3  (130 → 220vh)  translateY shift — content lifts up so
                               the phone settles into viewport-centre
       phase 4  (220 → 400vh)  phone pinned (~1.8 screens of dwell)
       phase 5  (400 → 500vh)  hero-stage unpins, scrolls off
     Nothing in the layout is repositioned — the transform on .hero-grid
     is the only thing that moves, driven by --pp from the scroll JS. */
  .hero.hero-scroll { min-height: 500vh; }
  .hero-stage { padding: 80px 0 40px; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    transform: translateY(calc(var(--pp, 0) * -46vh));
    will-change: transform;
  }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12px; color: var(--text-2);
  background: rgba(255,255,255,0.02);
  letter-spacing: .02em;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(130,244,177,.18), 0 0 14px var(--mint);
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(130,244,177,.18), 0 0 14px var(--mint); }
  50% { box-shadow: 0 0 0 8px rgba(130,244,177,.05), 0 0 18px var(--mint); }
}

h1.headline {
  margin: 16px 0 32px;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: .95;
  letter-spacing: -0.045em;
  font-weight: 800;
}
h1.headline .line { display: block; }

/* Stacked headline lines for the scroll crossfade. Both lines occupy
   the same grid cell so the layout doesn't shift as opacity changes. */
.hero-scroll h1.headline {
  display: grid;
}
.hero-scroll h1.headline .line {
  grid-area: 1 / 1;
  will-change: opacity, transform;
}
.hero-scroll h1.headline .line-a {
  opacity: clamp(0, calc((0.55 - var(--hp, 0)) / 0.14), 1);
  transform: translateY(calc(var(--hp, 0) * -8px));
}
.hero-scroll h1.headline .line-b {
  opacity: clamp(0, calc((var(--hp, 0) - 0.55) / 0.14), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--hp, 0) - 0.55) / 0.14), 1)) * 8px));
}
h1.headline .accent {
  background: linear-gradient(to right, #C6F8FF, #595CFF 25%, #F4B3EF 50%, #FFB88E 75%, #C6F8FF 100%);
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: shine 9s linear infinite;
}
@keyframes shine {
  from { background-position: 0% center; }
  to { background-position: 100% center; }
}

.subhead {
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--text-2);
  max-width: 540px;
  margin: 0 0 28px;
}
.subhead b { color: var(--text); font-weight: 600; }

.cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: center;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
  border: 1px solid transparent;
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--text); color: #000;
  box-shadow: 0 12px 40px -10px rgba(255,255,255,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 50px -10px rgba(255,255,255,.45); }
.btn-ghost {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); }

.proof {
  margin-top: 28px;
  display: flex; gap: 22px; align-items: center;
  font-size: 13px; color: var(--text-3);
}
.avatars { display: flex; }
.avatars .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #000;
  margin-left: -8px;
}
.avatars .av:first-child { margin-left: 0; }
.av.a1 { background: var(--g-rose); }
.av.a2 { background: var(--g-cyber); }
.av.a3 { background: var(--g-mint); }
.av.a4 { background: var(--g-citrus); }
.av.a5 { background: var(--g-rain); }