/* ═══════════════════════════════════════════════
   MOVING GURU — Brand Colour Override
   ───────────────────────────────────────────────
   Drop-in stylesheet that enforces the approved brand
   palette across the entire public site:

     Green   #B4FF5A   (primary)
     Yellow  #F5FDA6   (secondary)
     Black   #1A1A18   (text only, never a background)
     White   #FFFFFF

   No blue / red / purple / orange anywhere.

   How to use:
     <link rel="stylesheet" href="css/style.css" />
     <link rel="stylesheet" href="css/brand-lime.css" />   ← AFTER style.css

   Make sure this loads AFTER style.css so the
   variable overrides win the cascade.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Primary CTA accent ────────────────────────────────────
     `--coral` is the brand button colour — now brand green.
     Every rule in style.css that says
     `background: var(--coral)` or `color: var(--coral)`
     picks this up automatically. */
  --coral: #B4FF5A;

  /* ── Keep the lime helpers on-brand ────────────────────────
     `--lime-dark` is the slightly deeper green used for
     links, hover states and active disc-tabs; `--lime-soft`
     is its faint tint. Both stay in the green family. */
  --lime-dark: #8FE03D;
  --lime-soft: rgba(180, 255, 90, 0.12);
}

/* ── Hardcoded RGBA glows ──────────────────────────────────
   These rules in style.css used literal rgba() for box-shadow
   glows instead of variables, so the variable swap above won't
   reach them. Re-declare with brand-green rgba. */

.btn-cta-primary:hover {
  box-shadow: 0 0 36px rgba(180, 255, 90, 0.35);
}

.search-btn:hover {
  box-shadow: 0 4px 16px rgba(180, 255, 90, 0.30);
}

.btn-nav-signup:hover {
  box-shadow: 0 4px 20px rgba(180, 255, 90, 0.25);
}

.drawer-btn-signup:hover {
  box-shadow: 0 4px 16px rgba(180, 255, 90, 0.25);
}

.btn-connect:hover {
  box-shadow: 0 6px 24px rgba(180, 255, 90, 0.28);
}

.plan-cta-filled:hover {
  box-shadow: 0 4px 20px rgba(180, 255, 90, 0.25);
}

/* Hero overlay — subtle brand-green wash in the middle so the
   top of the homepage feels on-brand. */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 26, 24, 0.45) 0%,
    rgba(180, 255, 90, 0.20) 50%,
    rgba(26, 26, 24, 0.55) 100%
  );
}

/* Step numbers on "How It Works" — green→yellow gradient so the
   numbers still pop while staying on-brand. */
.step-num {
  background: linear-gradient(
    135deg,
    #B4FF5A,
    #F5FDA6
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── "bg-dark" CTA section ─────────────────────────────────
   `.bg-dark` is set to var(--coral) in style.css, so those CTA
   sections (community.html "Join the network", pricing.html
   "Ready to start") render as brand-green panels. Use a gentle
   green gradient so the wall of colour has some depth. Text on
   these panels is black, set in style.css. */
.bg-dark {
  background: linear-gradient(
    135deg,
    #B4FF5A 0%,
    #A6F24D 60%,
    #8FE03D 100%
  );
}