/* ─────────────────────────────────────────────────────────────
   funnlr.co.za HOMEPAGE — HYBRID THEME
   Dark nav + hero, white body, dark final CTA + footer.
   Same treatment as the products shop (shop-hybrid.css).

   TO REVERT: delete the <link> to this file in funnlr-v2.html.
   Nothing else in the page was changed.

   PART 1 turns the whole page light.
   PART 2 puts the dark back on the nav, hero, final CTA and footer.

   The lime rule: #c8f04a on white is ~1.5:1 contrast, unreadable.
   So --lime is redefined to a darker lime, which fixes every place
   lime is used as TEXT in one go. The places that use it as a FILL
   get the bright one restored by hand below.
   ───────────────────────────────────────────────────────────── */

/* ══ PART 1 — light ══════════════════════════════════════════ */
:root{
  --black:#ffffff;
  --surface:#ffffff;         /* cards */
  --surface2:#f4f5ee;        /* tinted bands */
  --surface3:#f0f1e9;
  --border:rgba(12,14,6,.11);
  --border-lime:rgba(122,158,20,.38);
  --text:#101208;
  --muted:#6a6d5f;
  --sub:#4a4c40;

  --lime:#5c7a06;            /* was #c8f04a — the readable text lime */
  --lime-dim:#4d6605;
  --lime-fill:#c8f04a;       /* the brand lime, fills only */
}
/* the original lime radial is sized to the farthest corner, so on a tall page
   it tints the entire body cream. The dark hero covers where it used to show
   anyway — plain white, same as the products shop. */
body{background:#ffffff}

/* the full-screen grain overlay is dark noise at 10% — fine on black,
   grey speckle on white */
body::after{opacity:.04}

/* the scrolling industry marquee is hardcoded to rgba(255,255,255,.18) —
   invisible on a light band */
.marquee-row{background:#f7f8f2}
.marquee-track span{color:rgba(16,18,8,.34)}
.marquee-track span.hi{color:rgba(122,158,20,.65)}

/* lime as a FILL — unchanged from the dark design */
.float-tag,.hero-kicker span,.price-badge,#chat-av,.chat-msg.user,
#chat-send,.pdot,.pkg-badge,.result-badge,.nav-item.center{
  background:var(--lime-fill);color:#050506
}
/* 5 buttons set background:var(--lime) in an inline style attribute, which no
   normal selector can reach — they'd render dark-olive with black text.
   Target the attribute itself. The 12 inline color:var(--lime) uses are TEXT
   and correctly pick up the darker lime, so they're left alone. */
[style*="background:var(--lime)"]{background:var(--lime-fill)!important}

.cap-icon,.f-badge{background:rgba(200,240,74,.22)}
.sum-trial-tag{background:rgba(200,240,74,.28)}
.price-card.featured{background:rgba(200,240,74,.09)}
/* .nav-cta / .btn-p / .t-btn / .corner-cta use a hardcoded lime gradient that
   ends dark (#9cc523). That read fine on black, but on white the dark end
   plus black label loses contrast — flatten the gradient in the light zone.
   The nav button stays on its dark bar, so it keeps the original. */
.btn-p,.t-btn,.corner-cta{background:linear-gradient(135deg,#f2ff7a,#c8f04a 62%,#bce23f)}

/* cards get a light-ground shadow instead of relying on a dark canvas */
.t-card,.price-card,.cap-card{box-shadow:0 2px 10px rgba(20,24,10,.05)}
.t-card:hover,.cap-card:hover{box-shadow:0 16px 40px rgba(20,24,10,.10)}
.wa-feature{box-shadow:0 2px 10px rgba(20,24,10,.05)}

/* this banner sits in the white zone but was gradient-to-black */
.flow-banner{background:linear-gradient(145deg,rgba(200,240,74,.16),#ffffff)}

/* ══ PART 2 — the zones that stay dark ═══════════════════════ */
/* CSS variables inherit, so re-declaring the dark tokens on these
   containers restores the original design inside them without
   touching a single component rule. */
/* #funnelApp is the subscribe/signup flow — a separate full-screen surface
   that replaces the page, not part of the marketing site. Left dark so it
   behaves exactly as it does today. */
.site-nav,.hero,.final-cta,.site-footer,#funnelApp{
  --surface:#0b0b0d;--surface2:#111114;--surface3:#1a1a1e;
  --border:#ffffff12;--border-lime:#c8f04a30;
  --text:#f8f8f2;--muted:#888780;--sub:#b8b7ad;
  --lime:#c8f04a;            /* bright lime is readable again on black */
  color:var(--text)
}
.site-nav{background:rgba(5,5,7,.92)}
/* footer is inside .wrap too. Bleed left, right AND down. Clip only the top. */
.site-footer{
  background:#050507;border-top-color:#ffffff12;
  box-shadow:0 0 0 100vmax #050507;
  clip-path:inset(0 -100vmax -100vmax -100vmax)
}
#funnelApp{background:#050507}

/* the floating chat bubble is background:var(--black) — that turned it into a
   white circle on a white page. It's floating chrome, so keep it dark. */
#chatToggle{
  background:#050507;color:#c8f04a;border-color:#c8f04a30;
  box-shadow:0 12px 32px rgba(20,24,10,.28)
}
#chatBox{background:#0b0b0d;box-shadow:0 30px 80px rgba(20,24,10,.35)}
/* the original is linear-gradient(145deg,#c8f04a12,#000) — that first stop is
   7% alpha, which composited against the old black page. On white it fades the
   band to white and the heading vanishes. Same look, opaque stops. */
.final-cta{background:linear-gradient(145deg,#18200a,#050507);border-color:#c8f04a30}

/* .hero lives inside .wrap (max-width:1200px + margin auto), so a plain
   background would leave white gutters at the screen edges. Bleed it. */
.hero{
  background:#050507;
  box-shadow:0 0 0 100vmax #050507;
  clip-path:inset(0 -100vmax);
  padding:32px 20px 64px;
  margin:0 -20px
}