/* ============================================================
   GigaBizZone — Visual enhancements
   Editorial-restraint gradients only.
   PRD §9.1 compliant: NO purple, NO blue-cyan, NO animated washes.
   No imagery — every effect is palette-only.
   ============================================================ */

/* ----------------------------------------------------------
   1. Coral gradient text for outcome numbers
   ---------------------------------------------------------- */
.numeral--gradient {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .numeral--gradient { background: none; color: var(--coral); }
}

/* ----------------------------------------------------------
   2. Primary button — gradient hover
   ---------------------------------------------------------- */
.btn--primary:hover {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
}

/* ============================================================
   SECTION BACKGROUNDS — subtle, palette-only gradients
   Each gradient stays inside its existing tone family so the
   visual rhythm of cream / cream-deep / teal-deep is preserved.
   ============================================================ */

/* ----- HERO — soft teal-pale glow top-right, coral hint bottom-left ----- */
.hero {
  background:
    radial-gradient(ellipse 720px 480px at 92% 6%, rgba(91, 192, 190, 0.10), transparent 65%),
    radial-gradient(ellipse 560px 600px at 0% 100%, rgba(216, 90, 46, 0.05), transparent 70%),
    var(--cream);
}

/* ----- Problem / How It Works / Service Lines / Configurator Preview / Why Now (cream sections) ----- */
.problem,
.how,
.services,
.preview,
.why {
  background: linear-gradient(180deg, var(--cream) 0%, #F8F3EA 100%);
}

/* ----- Operating Thesis (cream-deep, full-bleed pull-quote) ----- */
.thesis {
  background: linear-gradient(135deg, var(--cream-deep) 0%, #ECE3D0 100%);
}

/* ----- Six Vertical Brands (cream-deep card grid) ----- */
.verticals {
  background:
    radial-gradient(ellipse 900px 600px at 50% 0%, #F7F0DD 0%, var(--cream-deep) 70%);
}

/* ----- The Operating Company (cream-deep founder section) ----- */
.company {
  background: linear-gradient(135deg, var(--cream-deep) 0%, #ECE3D0 100%);
}

/* ----- Confidence 30 (teal full-bleed) — subtle radial depth ----- */
.guarantee {
  background: var(--teal-deep); /* fallback */
  background: radial-gradient(
    ellipse at top left,
    var(--teal-mid) 0%,
    var(--teal-deep) 55%,
    #04373E 100%
  );
}

/* ----- Final CTA (teal full-bleed) — matching radial depth ----- */
.finalcta {
  background: var(--teal-deep);
  background: radial-gradient(
    ellipse at top right,
    var(--teal-mid) 0%,
    var(--teal-deep) 55%,
    #04373E 100%
  );
}

/* ----- Card hover — keep cards crisp, no gradient wash ----- */
/* (intentionally empty — the card hover lift in components.css is enough) */