/* ─────────────────────────────────────────────────────────────────
   aifa-katalyst.css
   Site-wide visual-style refresh inspired by katalyst-crm.com.
   Loaded AFTER each page's inline <style>, so these rules win.
   Touches: typography, card hovers, buttons, section headers,
   step numbers, stat displays, soft gradient atmospherics.
   No IA / structural / copy changes — visual style only.
───────────────────────────────────────────────────────────────── */

/* ── Optional refined typeface (Inter) — falls back to system ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Layered design tokens that extend the existing palette */
  --kx-display-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --color-bg: #0f172a;
  --color-bg-deep: #08111f;
  --color-surface: #172033;
  --color-surface-hover: #202b42;
  --color-primary: #e60ba0;
  --color-primary-light: #ff7acb;
  --color-secondary: #c026d3;
  --color-accent: #06b6d4;
  --color-text: #f8fafc;
  --color-muted: #cbd5e1;
  --color-border: #334155;
  --primary: var(--color-primary);
  --primary-light: var(--color-primary-light);
  --primary-dark: #a90878;
  --accent: var(--color-secondary);
  --accent-light: var(--color-accent);
  --bg: var(--color-bg);
  --bg-card: var(--color-surface);
  --bg-card-hover: var(--color-surface-hover);
  --panel: var(--color-surface);
  --panel-soft: var(--color-surface-hover);
  --text: var(--color-text);
  --text-muted: var(--color-muted);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --kx-shadow-soft: 0 18px 50px rgba(15, 23, 42, .25);
  --kx-shadow-glow: 0 10px 40px rgba(230, 11, 160, .24);
  --kx-shadow-deep: 0 30px 70px rgba(15, 23, 42, .45);
  --kx-radius-card: 18px;
  --kx-radius-pill: 999px;
  --kx-grad-primary: linear-gradient(135deg, #e60ba0 0%, #c026d3 100%);
  --kx-grad-hero: linear-gradient(135deg, #ffffff 0%, #f8fafc 54%, #ff7acb 100%);
  --kx-grad-step-num: linear-gradient(180deg, rgba(230,11,160,.35), rgba(230,11,160,.05));
  --kx-grad-panel: linear-gradient(135deg, rgba(230,11,160,.14), rgba(6,182,212,.07));
  --kx-grad-ambient: none;
  --kx-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── Typography refinement ── */
body {
  font-family: var(--kx-display-font);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .hero h1, .section h2 {
  font-family: var(--kx-display-font);
  letter-spacing: -.02em;
}
h1, .hero h1 { font-weight: 900; line-height: 1.05; }
h2, .section h2 { font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
h3 { font-weight: 700; letter-spacing: -.01em; }

h1,
.hero h1,
.section-title,
.comparison-title {
  background: var(--kx-grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Hero subhead: a touch lighter and more readable */
.hero p { font-weight: 400; letter-spacing: .005em; }

/* ── Section header / badge pill refinement ── */
.section-tag,
.section-header .eyebrow,
.section-header .badge,
[class*="section-header"] [class*="eyebrow"] {
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .72rem;
  padding: .35rem .85rem;
  border-radius: var(--kx-radius-pill);
}

/* ── Buttons — pillier, deeper shadow, smoother motion ── */
.btn,
.btn-primary,
.btn-secondary {
  border-radius: var(--kx-radius-pill);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .25s var(--kx-ease), box-shadow .25s var(--kx-ease), background .25s var(--kx-ease), border-color .25s var(--kx-ease);
}
.btn-primary {
  background: var(--kx-grad-primary);
  box-shadow: 0 8px 24px rgba(230, 11, 160, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(230, 11, 160, .42), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-secondary {
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  transform: translateY(-2px);
}

/* ── Cards — softer, glowing hover ── */
.feature-card,
.module-card,
.product-card,
.step-card,
.stat-card,
.related-card,
.usecase-card,
.service-card,
.tool-card,
.blog-card,
.pricing-card,
.panel,
.prose-block,
.faq-item,
.cta-box,
.news-card,
.market-read,
.stat,
.brief-pill,
.reaction {
  background: var(--color-surface);
  border-color: rgba(148, 163, 184, .18);
  border-radius: var(--kx-radius-card);
  transition: transform .3s var(--kx-ease), box-shadow .3s var(--kx-ease), border-color .3s var(--kx-ease);
}
.feature-card:hover,
.module-card:hover,
.product-card:hover,
.step-card:hover,
.stat-card:hover,
.related-card:hover,
.usecase-card:hover,
.service-card:hover,
.tool-card:hover,
.blog-card:hover,
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kx-shadow-soft), var(--kx-shadow-glow);
  border-color: rgba(255, 122, 203, .42);
}

.cta-box,
.cta-band,
.stat-card,
.addon-card,
.overall-price {
  background: var(--kx-grad-panel);
  border-color: rgba(255, 122, 203, .28);
}

.section-tag,
.hero-badge,
.eyebrow,
.comparison-eyebrow,
.blog-tag,
.tool-badge,
.service-price {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: var(--color-primary-light);
}

.read-more,
.service-link,
.tool-cta,
.related-card .arrow,
.breadcrumb a,
footer a,
.aifa-footer-column a:hover,
.aifa-footer-bottom a:hover {
  color: var(--color-primary-light);
}

/* ── Step / how-it-works: large translucent step numbers ── */
.step-card,
.steps .step,
.how-it-works .step {
  position: relative;
  overflow: hidden;
}
.step-card .step-number,
.steps .step .step-num,
.how-it-works .step .step-num {
  position: relative;
  z-index: 1;
}
/* Decorative giant "01" / "02" behind the step card */
.step-card::before,
.steps .step::before {
  content: attr(data-step);
  position: absolute;
  top: -.4rem;
  right: -.2rem;
  font-family: var(--kx-display-font);
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  background: var(--kx-grad-step-num);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

/* ── Stats: bigger, more outcome-led numerals ── */
.stat-number,
.stat-value,
.stat-card .stat-number,
.results .stat .num,
.results-grid .stat-number,
[class*="results"] [class*="number"] {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  background: var(--kx-grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label,
.stat-card .stat-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
  font-weight: 600;
}

/* ── Section headers: a touch larger and tighter ── */
.section h2,
.section-header h2,
.results h2,
.services h2,
.how-it-works h2,
.tools h2,
.social-proof h2,
.blog h2,
.cta-section h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
}

/* ── Hero polish ── */
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
}
.hero-badge,
.hero .eyebrow {
  letter-spacing: .14em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .74rem;
  padding: .4rem 1rem;
  border-radius: var(--kx-radius-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12);
  color: var(--color-primary-light);
}

/* ── Atmospheric gradient — slightly richer ── */
.gradient-bg,
body::before {
  background: var(--kx-grad-ambient) !important;
  opacity: 0 !important;
}

.orb,
.orb-1,
.orb-2 {
  display: none !important;
}

.founder-proof,
.how-it-works,
.tools,
.blog {
  background: transparent !important;
}

/* ── Nav: a touch tighter ── */
.site-nav-logo-text { letter-spacing: -.01em; }
.site-nav-cta {
  border-radius: var(--kx-radius-pill) !important;
  box-shadow: 0 4px 12px rgba(230, 11, 160, .3);
}

/* ── Image framing — deeper shadows on product hero images ── */
img[loading="eager"][src*="hero"],
img[loading="eager"][src*="dashboard"] {
  border-radius: 22px;
  box-shadow: var(--kx-shadow-deep), 0 0 0 1px rgba(255, 122, 203, .22);
}

/* ── Footer: cleaner divider ── */
footer { border-top-color: rgba(255, 255, 255, .06); }

/* ── Accessible focus rings ── */
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid #ff7acb;
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Reveal-on-scroll friendliness ── */
[class*="reveal"] {
  transition: opacity .6s var(--kx-ease), transform .6s var(--kx-ease);
}

/* ── Reduce motion if user prefers ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}