/* =============================================================================
   HERO  |  Headline, buttons, the three counters.
   HTML: index.html -> <!-- SECTION: HERO -->     JS: js/hero.js
   Edit only this file when you want to change how hero looks.
   ============================================================================= */

@keyframes up{from{opacity:0;transform:translateY(24px)}}
@keyframes bob{50%{transform:translateY(-6px)}}
.hero{margin-top:1rem;padding:clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,4rem) 1.2rem;border-radius:40px;transform-origin:50% 0;will-change:transform,opacity}
.hgrid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){
  .hgrid{grid-template-columns:1.1fr .9fr;gap:3rem}
}
.hl>*{animation:up .9s var(--ease) both}
.hl>:nth-child(2){animation-delay:.1s}
.hl>:nth-child(3){animation-delay:.2s}
.hl>:nth-child(4){animation-delay:.3s}
.pill{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .9rem;border-radius:99px;font-size:.8rem;font-weight:500}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(142,198,65,.25)}
.hero h1{font-size:clamp(2rem,5.2vw,3.7rem);line-height:1.08;margin:1.1rem 0 1rem}
.hero h1 b{font-weight:800}
.hero h1 i{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.02em;color:var(--green-d)}
.hero p{max-width:470px;margin:0 0 1.6rem;color:var(--muted);font-size:clamp(1rem,2vw,1.1rem)}
.cta{display:flex;gap:.8rem;flex-wrap:wrap}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.stat{padding:1.1rem 1.2rem;border-radius:24px;animation:up .9s var(--ease) .3s both,bob 6s ease-in-out 1.4s infinite}
.stat:nth-child(2){animation-delay:.4s,2.4s}
.stat:nth-child(3){animation-delay:.5s,3.4s}
.s3{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;justify-content:flex-end}
.stat strong{display:block;font-size:clamp(1.8rem,4.4vw,2.8rem);letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.s3 strong{font-size:clamp(2.4rem,6vw,3.8rem)}
.s1{grid-column:1}
.s2{grid-column:1}
.reel-row{display:flex;justify-content:flex-end;margin-top:1.4rem}
[data-theme=dark] .pill i{box-shadow:0 0 0 4px rgba(142,198,65,.2)}
.hero h1 b{font-weight:700}
.hero h1 i{font-family:inherit;font-style:italic;font-weight:500}