/* index-v2.html: single-screen hero, no scroll, animated logo mark. Loads after v2.css. */
html, body { height: 100%; overflow: hidden; }
.hero { height: 100vh; height: 100svh; min-height: 0; background: var(--green); }

/* Soft light behind the mark */
.bg-glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(42vmax 42vmax at 72% 50%, rgba(157, 203, 59, 0.2), transparent 70%);
}

/* Two halves: headline left, logo right. Each is sized to fit its own half,
   so they never overlap or get cut off, whatever the screen shape. */
.bg-logo {
  position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; width: 50%;
  padding: 6rem var(--gutter) 5rem;
  display: grid; place-items: center;
}
.bg-logo svg { width: 100%; height: 100%; overflow: visible; will-change: transform; }
.bg-logo svg > * {
  fill: rgba(236, 246, 240, 0.2);
  stroke: rgba(157, 203, 59, 0.95); stroke-width: 1.6; vector-effect: non-scaling-stroke;
}

.hero__copy { position: relative; align-self: center; justify-self: start; width: 50%; container-type: inline-size; }
.hero .headline {
  /* font follows the left column width (cqw), capped by viewport height so 3 lines always fit */
  font-size: clamp(2.6rem, min(19cqw, (100vh - 13rem) / 3.3), 8.5rem);
  font-size: clamp(2.6rem, min(19cqw, (100svh - 13rem) / 3.3), 8.5rem);
  line-height: 1.02;
}
.hero .headline__line { white-space: nowrap; }

@media (max-width: 900px) {
  /* headline sits below the logo instead of over it */
  .hero__copy { align-self: end; padding-bottom: 4.5rem; width: 100%; }
  .hero .headline { font-size: clamp(2.6rem, 15vw, 5rem); }
  .hero .headline__line { white-space: normal; }
  .bg-glow { background: radial-gradient(60vmax 60vmax at 50% 40%, rgba(157, 203, 59, 0.10), transparent 70%); }
  .bg-logo {
    right: 50%; left: auto; bottom: auto; top: 32%; width: auto; padding: 0; display: block;
    transform: translate(50%, -50%); height: min(42vh, 80vw); aspect-ratio: 440 / 460;
  }
}