/* =====================================
   Section & anchor behavior with fixed header
   ===================================== */
:root{
  --header-h: 96px; /* default; can be overridden inline or via media */
}

.section--home{
  padding:0;
  scroll-margin-top: var(--header-h); /* anchor links won't hide under header */
}

/* =========================
   HERO — background + offset
   ========================= */
.hero{
  /* Controls (override inline in HTML via style attr) */
  --overlay-alpha:.70;   /* green tint strength */
  --scale-factor:.80;    /* 0.8 = 20% smaller inner content */

  position:relative;
  min-height: clamp(520px, 92vh, 760px);
  display:grid;
  align-items:center;

  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-color:#0b3d1b; /* fallback */
  overflow:hidden;

  /* Push content below the fixed header */
padding-top: calc(var(--header-h) + 10vh);

  /* Subtle Ken Burns style pan/zoom */
  animation: hero-pan 26s ease-in-out infinite alternate;
}

/* Strong green overlay with gradient + vignette for readability */
.hero__overlay{
  position:absolute; inset:0; z-index:0;
  background: rgba(5, 24, 12, var(--overlay-alpha));
  backdrop-filter: blur(.5px);
}
.hero__overlay::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(5,24,12,.45) 0%,
    rgba(5,24,12,.30) 34%,
    rgba(5,24,12,.42) 100%
  );
}
.hero__overlay::after{
  content:""; position:absolute; inset:-10%;
  background: radial-gradient(60% 40% at 50% 12%, rgba(0,0,0,.22), transparent 62%);
  mix-blend-mode: multiply;
  opacity:.65;
}

/* Background pan keyframes */
@keyframes hero-pan {
  0% {
    background-position: 52% 50%;
    transform: scale(1.02);
  }
  50% {
    background-position: 48% 46%;
    transform: scale(1.04);
  }
  100% {
    background-position: 50% 54%;
    transform: scale(1.03);
  }
}

/* =========================
   HERO — inner/layout (scaled)
   ========================= */
.hero__inner{
  position:relative; z-index:1; color:#fff; text-align:center;
  padding: clamp(28px, 4vw, 44px) 0;

  /* Shrink all inner content without affecting background */
  transform: scale(var(--scale-factor));
  transform-origin: 50% 0%;
}

/* Headline */
.hero__title{
  margin:0 0 10px;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
  font-size: clamp(34px, 4.8vw + 8px, 64px);
}
.hero__title-last{
  display:inline-block;
}

/* Subheadline */
.hero__sub{
  margin:8px auto 18px;
  max-width:980px;
  font-size: clamp(15px, 1.2vw + 10px, 20px);
  opacity:.95;
}

/* Financing pill */
.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px;
  background:#15803d; color:#eafff0; font-weight:800;
  box-shadow:0 10px 28px rgba(21,128,61,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.18); text-decoration:none;
}
.pill__dot{
  width:22px; height:22px; border-radius:999px; display:inline-grid; place-items:center;
  background:#22c55e; color:#062e12; font-size:14px; font-weight:900;
}

/* CTA row */
.hero__cta{
  margin:14px auto 18px;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:10px;
  padding:12px 16px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.btn svg{
  width:18px; height:18px; fill:currentColor;
}

/* white button */
.btn--light{
  background:#fff;
  color:#0b3d1b;
  border-color:rgba(0,0,0,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn--light:hover{
  filter:brightness(.98);
}

/* orange outline/ghost */
.btn--call{
  color:#f59e0b;
  background:rgba(245,158,11,.08);
  border-color:#f59e0b;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.btn--call:hover{
  background:rgba(245,158,11,.12);
}

/* Trust badge */
.hero__trust{
  margin-top:18px;
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.22);
  padding:10px 14px;
  border-radius:14px;
  backdrop-filter: blur(2px);
}
.trust__logo{
  width:52px; height:52px;
  border-radius:999px;
  background:#fff;
  padding:8px;
  box-shadow: inset 0 0 0 2px rgba(22,101,52,.6);
}
.trust__text{
  text-align:left;
}
.trust__text strong{
  font-weight:800;
}
.trust__text small{
  opacity:.9;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:640px){
  :root{
    --header-h: 72px; /* if your mobile header is shorter */
  }
  .hero{
    min-height:92vh;
  }
  .hero__title{
    font-size: clamp(32px, 7vw, 46px);
  }
  .pill{
    width:min(94%, 680px);
    justify-content:center;
  }
  .hero__cta a,
  .hero__cta button{
    width:min(94%, 520px);
    justify-content:center;
  }
  .hero__trust{
    width:min(94%, 520px);
  }
}

/* =========================
   Bouncing pill badge
   ========================= */
.pill--bounce{
  animation: pill-bounce 1.6s cubic-bezier(0.22, 0.7, 0.3, 1) infinite;
  transform-origin: center;
}

/* upgraded bounce: higher, with slight scale + glow */
@keyframes pill-bounce{
  0%, 100%{
    transform: translateY(0) scale(1);
    box-shadow:0 10px 28px rgba(21,128,61,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  }
  20%{
    transform: translateY(-6px) scale(1.04);
    box-shadow:0 16px 34px rgba(21,128,61,.45), inset 0 -2px 0 rgba(0,0,0,.12);
  }
  40%{
    transform: translateY(0) scale(1);
  }
  60%{
    transform: translateY(-3px) scale(1.02);
  }
  80%{
    transform: translateY(0) scale(1);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .pill--bounce{
    animation:none;
  }
  .hero{
    animation:none;
    transform:none;
  }
}