/* ============================================================================
   promax.css — SKILWI UI/UX Pro Max universal stylesheet
   ============================================================================
   Sentinel: SENTINEL_PROMAX_GLOBAL_JUN14_V1

   Purpose
   -------
   A single shared stylesheet that applies the UI/UX Pro Max (Direction 4 from
   design-samples.html) visual polish to every marketing page on skilwi.ai
   *without* touching page-specific backgrounds, layouts, or content.

   What this file changes (universal across all marketing pages):
     - Typography: Space Grotesk for h1/h2/h3 + section headings
     - Nav: glass blur + saturate
     - Primary CTAs: coral→peach gradient + glow shadow
     - Ghost CTAs: glass blur
     - Eyebrow accent bar: tri-stop coral→peach→mint gradient
     - Section H .serif spans: gradient text treatment
     - Footer badges: subtle glass
     - Fade-up animation timing: snappier easing

   What this file deliberately does NOT change:
     - Body background (each page keeps its own — landing dark, about light, etc.)
     - Page layouts, grids, section structure
     - Form internals, calculators, interactive widgets
     - Any JS-touched class

   How to use
   ----------
   Add this single line to a marketing page, AFTER the existing `<style>` block:

       <link rel="stylesheet" href="/promax.css"/>

   The link order matters — CSS placed *after* the inline `<style>` wins the
   cascade at equal specificity. Adding `!important` defensively as a belt-and-
   braces guard against page-specific !important rules.

   Pairs with
   ----------
   - landing.html (which keeps its inline Pro Max block — those rules are
     landing-specific: .hero-card, .dc-opt, .mod-card, .pc, .moat-table, etc.)
   - L7 patch: patch_promax_global_JUN14.py
   ============================================================================ */

/* ── Design tokens (additive) ─────────────────────────────────────────────── */
:root{
  --pm-display:'Space Grotesk','Plus Jakarta Sans',sans-serif;
  --pm-grad:linear-gradient(135deg,#FF6B5C 0%,#ff8a65 50%,#34d399 100%);
  --pm-grad-warm:linear-gradient(135deg,#FF6B5C 0%,#ff8a65 100%);
  --pm-grad-soft:linear-gradient(135deg,rgba(255,107,92,0.15) 0%,rgba(52,211,153,0.08) 100%);
  --pm-glass:rgba(255,255,255,0.06);
  --pm-glass-light:rgba(255,255,255,0.80);
  --pm-glow:0 8px 32px rgba(255,107,92,0.40);
  --pm-glow-soft:0 6px 22px rgba(255,107,92,0.35);
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3{
  font-family: var(--pm-display);
  letter-spacing: -.02em;
}

.hero h1,
.hero-about h1,
.section-h{
  font-family: var(--pm-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
}

/* Gradient text for .serif accent spans inside headings */
.section-h .serif,
.hero h1 .serif,
.hero-about h1 .serif{
  font-family: var(--pm-display) !important;
  font-style: normal !important;
  background: var(--pm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  font-weight: 700;
}

/* ── NAV — glass blur ────────────────────────────────────────────────────── */
nav{
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

/* Mobile menu glass (where present) */
.mobile-menu{
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── PRIMARY CTAs — gradient + glow ──────────────────────────────────────── */
.btn-primary,
.btn-hero,
.f-submit,
.pc-cta.primary,
.s4-btn{
  background: var(--pm-grad-warm) !important;
  box-shadow: var(--pm-glow-soft) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
  border: none !important;
}

.btn-primary:hover,
.pc-cta.primary:hover,
.s4-btn:hover{
  background: var(--pm-grad-warm) !important;
  box-shadow: 0 10px 32px rgba(255,107,92,0.50) !important;
  transform: translateY(-1px);
}

.btn-hero,
.f-submit{
  border-radius: 12px !important;
  font-family: var(--pm-display) !important;
  font-weight: 700 !important;
}

.btn-hero:hover,
.f-submit:hover{
  background: var(--pm-grad-warm) !important;
  box-shadow: 0 12px 40px rgba(255,107,92,0.55) !important;
  transform: translateY(-2px);
}

/* ── GHOST CTAs — subtle glass ───────────────────────────────────────────── */
.btn-ghost,
.btn-hero-ghost{
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all .2s ease !important;
}

.btn-hero-ghost{
  border-radius: 12px !important;
}

/* ── EYEBROW — gradient bar accent ───────────────────────────────────────── */
.eyebrow::before{
  background: var(--pm-grad) !important;
  height: 3px !important;
  border-radius: 2px;
  width: 26px !important;
}

/* ── FOOTER BADGES — glass pill ──────────────────────────────────────────── */
.fbadge{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── FADE-UP animation easing — snappier on Pro Max ──────────────────────── */
.fade-up{
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1) !important;
}

/* ── Stat values — gradient text on numeric callouts (where used) ────────── */
.ms-val,
.roi-stat .rv,
.s4-bento-val{
  background: var(--pm-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-family: var(--pm-display);
  font-weight: 700;
}

/* ── COOKIE BAR — glass (where present, e.g. landing.html) ──────────────── */
.cookie-bar{
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border-radius: 16px !important;
}

.ck-acc{
  background: var(--pm-grad-warm) !important;
  box-shadow: 0 4px 14px rgba(255,107,92,0.30);
}

/* ── End of universal Pro Max overrides ──────────────────────────────────── */