/* ─────────────────────────────────────────────────────────────
   03-hero.css
   Section 1 — Hero
   Full-viewport centered layout · animated background layer ·
   highlighted offer sentence · cycling headline text
───────────────────────────────────────────────────────────── */

#hero {
  opacity: 1;
  transform: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px 5%;
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   BACKGROUND LAYER
   All .hero__bg children are purely decorative.
   They live behind z-index: 1 where all real content sits.
═══════════════════════════════════════════════════════ */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ── Orb 1 — large central glow, slow breathe ── */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

.hero__orb--1 {
  width: 660px;
  height: 460px;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(200, 240, 74, 0.07) 0%,
    rgba(200, 240, 74, 0.025) 50%,
    transparent 75%
  );
  animation: orb-breathe 7s ease-in-out infinite;
}

/* ── Orb 2 — smaller, drifts upper-right ── */
.hero__orb--2 {
  width: 320px;
  height: 280px;
  top: 15%;
  right: 8%;
  background: radial-gradient(ellipse at center,
    rgba(200, 240, 74, 0.045) 0%,
    transparent 70%
  );
  animation: orb-drift-right 11s ease-in-out infinite;
}

/* ── Orb 3 — small, floats lower-left ── */
.hero__orb--3 {
  width: 240px;
  height: 200px;
  bottom: 20%;
  left: 6%;
  background: radial-gradient(ellipse at center,
    rgba(200, 240, 74, 0.03) 0%,
    transparent 70%
  );
  animation: orb-drift-left 14s ease-in-out infinite;
}

/* ── Dot-grid background that fades in on load ── */
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(200, 240, 74, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0;
  animation: grid-appear 2.4s ease 0.4s forwards;
}

/* ── Horizontal scan line that sweeps top → bottom ── */
.hero__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 240, 74, 0.0) 15%,
    rgba(200, 240, 74, 0.18) 50%,
    rgba(200, 240, 74, 0.0) 85%,
    transparent 100%
  );
  animation: scanline-sweep 9s linear 1s infinite;
}

/* ── Noise grain texture ── */
.hero__noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
}

/* ═══════════════════════════════════════════════════════
   FOREGROUND CONTENT (z-index: 1)
═══════════════════════════════════════════════════════ */
#hero > *:not(.hero__bg) {
  position: relative;
  z-index: 1;
}

/* ── Brand lockup spacing — styles live in 17-header.css ── */

/* ── Category label ── */
.hero__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #C8F04A;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 28px;
}

/* ── Primary headline ── */
.hero__headline {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.15;
  color: #ffffff;
  max-width: 820px;
  margin-bottom: 28px;
}

/* ── Cycling phrase wrapper ── */
.hero__cycle-wrap {
  display: inline-block;
  position: relative;
}

/* The span that swaps out — JS adds .cycling-out then .cycling-in */
.hero__cycle {
  display: inline;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero__cycle.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.hero__cycle.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

/* ── Offer sentence container ── */
.hero__offer-wrap {
  max-width: 600px;
  margin-bottom: 44px;
  padding: 22px 28px;
  border: 0.5px solid #222;
  border-left: 2px solid rgba(200, 240, 74, 0.5);
  background: rgba(200, 240, 74, 0.02);
  text-align: left;
  position: relative;
}

/* Faint top-right corner accent */
.hero__offer-wrap::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 32px;
  height: 2px;
  background: rgba(200, 240, 74, 0.4);
}

/* ── Offer subheadline text ── */
.hero__subheadline {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #888;
  line-height: 1.8;
  margin: 0;
}

/* ── Highlighted spans inside the offer sentence ── */
/* White emphasis — names, nouns */
.hero__hl {
  color: #d0d0d0;
  font-weight: 500;
}

/* Lime emphasis — numbers, KPIs, the guarantee */
.hero__hl--key {
  color: #C8F04A;
  font-weight: 500;
}

/* "Work for free" — strongest emphasis with animated underline */
.hero__hl--guarantee {
  color: #C8F04A;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(200, 240, 74, 0.4);
  text-underline-offset: 3px;
}

/* ── Scroll cue chevron ── */
.scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  animation: bob 1.8s ease-in-out infinite;
}

@media (max-width: 768px) {
  .scroll-cue {
    display: none;
  }
}

.scroll-cue svg {
  display: block;
}

/* ════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
════════════════════════════════════════════════ */

/* Main orb breathes in opacity + scale */
@keyframes orb-breathe {
  0%, 100% { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.65; transform: translate(-50%, -50%) scale(1.12); }
}

/* Upper-right orb drifts diagonally */
@keyframes orb-drift-right {
  0%, 100% { transform: translate(0, 0)     scale(1);    opacity: 0.8; }
  40%       { transform: translate(-22px, 18px) scale(1.08); opacity: 1; }
  75%       { transform: translate(12px, -10px) scale(0.95); opacity: 0.6; }
}

/* Lower-left orb drifts diagonally */
@keyframes orb-drift-left {
  0%, 100% { transform: translate(0, 0)    scale(1);    opacity: 0.7; }
  45%       { transform: translate(18px, -14px) scale(1.1); opacity: 1; }
  80%       { transform: translate(-10px, 8px) scale(0.92); opacity: 0.5; }
}

/* Dot grid fades in on page load */
@keyframes grid-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scan line sweeps from top to bottom */
@keyframes scanline-sweep {
  0%   { top: -2px;   opacity: 0; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { top: 100vh; opacity: 0; }
}

/* (logo-ring keyframe replaced by brand-ring in 17-header.css) */

/* Scroll cue bob */
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* ════════════════════════════════════════════════
   MOBILE (overrides)
════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero__offer-wrap {
    padding: 18px 20px;
    text-align: left;
  }

  .hero__subheadline {
    font-size: 15px;
  }

  /* Hide large orbs that bleed on mobile */
  .hero__orb--1 {
    width: 340px;
    height: 280px;
  }

  .hero__orb--2,
  .hero__orb--3 {
    display: none;
  }
}