/* ============================================================
   Capture Pipeline — Global CSS for Elementor / WordPress
   Import via: Elementor > Custom CSS or child theme style.css
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&family=Wix+Madefor+Text:wght@300;400;500;600&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  /* Colors */
  --cp-bg:                #07070e;
  --cp-glass:             rgba(16, 16, 30, 0.65);
  --cp-glass-elevated:    rgba(24, 24, 42, 0.80);
  --cp-border:            rgba(100, 100, 180, 0.18);
  --cp-border-accent:     rgba(192, 132, 252, 0.35);
  --cp-border-subtle:     rgba(255, 255, 255, 0.07);

  /* Text */
  --cp-text-primary:      #eeeef4;
  --cp-text-secondary:    #a0a0be;
  --cp-text-muted:        #5c5c7e;

  /* Accent */
  --cp-accent:            #7c5cfc;
  --cp-accent-light:      #c084fc;
  --cp-accent-blue:       #5c6cfc;
  --cp-accent-blue-light: #818cf8;

  /* Gradients */
  --cp-gradient-primary:  linear-gradient(135deg, #7c5cfc, #c084fc);
  --cp-gradient-accent:   linear-gradient(135deg, #5c6cfc, #c084fc, #f0a0e0);
  --cp-gradient-hero-text: linear-gradient(180deg, #ffffff 0%, #e8e0ff 40%, #818cf8 100%);
  --cp-gradient-heading:  linear-gradient(135deg, #eeeef4, #c084fc);

  /* Fonts */
  --cp-font-heading:      'Wix Madefor Display', sans-serif;
  --cp-font-body:         'Wix Madefor Text', sans-serif;

  /* Radii */
  --cp-radius-sm:         8px;
  --cp-radius-md:         14px;
  --cp-radius-card:       50px;
  --cp-radius-pill:       9999px;

  /* Shadows */
  --cp-shadow-sm:         0 4px 16px rgba(0,0,0,0.3);
  --cp-shadow-md:         rgba(0,0,0,0.3) 0px 8px 32px, rgba(255,255,255,0.06) 0px 1px 0px inset;
  --cp-shadow-glow:       0 0 30px rgba(124, 92, 252, 0.2);
  --cp-shadow-glow-lg:    0 0 60px rgba(124, 92, 252, 0.25), 0 0 120px rgba(92, 108, 252, 0.1);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  background-color: var(--cp-bg) !important;
  color: var(--cp-text-primary) !important;
  font-family: var(--cp-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--cp-font-heading) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0f26; }
::-webkit-scrollbar-thumb { background: rgba(124, 92, 252, 0.4); border-radius: 3px; }

/* ── Utility Classes ───────────────────────────────────────── */

/* Glass card */
.cp-glass-card {
  background: var(--cp-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-card);
  box-shadow: var(--cp-shadow-md);
}

/* Glow pill / badge */
.cp-glow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--cp-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(124, 92, 252, 0.15);
  border: 1px solid rgba(124, 92, 252, 0.3);
  color: var(--cp-accent-light);
}

/* Gradient text */
.cp-gradient-text {
  background: var(--cp-gradient-hero-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cp-gradient-text-heading {
  background: var(--cp-gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Primary button */
.cp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  font-family: var(--cp-font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  border-radius: var(--cp-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background:
    linear-gradient(135deg, rgba(40,16,80,0.92) 0%, rgba(18,30,90,0.92) 100%) padding-box,
    linear-gradient(135deg, #c084fc 0%, #818cf8 40%, #a78bfa 80%, #ddd6fe 100%) border-box;
  box-shadow:
    rgba(192, 132, 252, 0.3) 0px 0px 16px,
    rgba(96, 165, 250, 0.12) 0px 0px 32px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  /* Inner text needs: background gradient + -webkit-background-clip: text */
  background-color: transparent;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}
.cp-btn-primary span {
  background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 35%, #93c5fd 70%, #ddd6fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cp-btn-primary:hover {
  box-shadow:
    rgba(192, 132, 252, 0.55) 0px 0px 28px,
    rgba(96, 165, 250, 0.25) 0px 0px 56px,
    rgba(255, 255, 255, 0.12) 0px 1px 0px inset;
  transform: translateY(-1px);
}

/* Secondary button */
.cp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  font-family: var(--cp-font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  border-radius: var(--cp-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(22,14,44,0.95) 0%, rgba(12,10,28,0.98) 50%, rgba(14,18,50,0.95) 100%) padding-box,
    linear-gradient(135deg, #e879f9 0%, #a78bfa 40%, #a78bfa 80%, #38bdf8 100%) border-box;
  box-shadow: 0 0 8px rgba(232, 121, 249, 0.15);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cp-btn-secondary:hover {
  box-shadow: 0 0 14px rgba(232,121,249,0.3), 0 0 28px rgba(96,165,250,0.15);
  transform: translateY(-1px);
}

/* Stat badge */
.cp-stat-badge {
  background: var(--cp-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-card);
  padding: 20px 24px;
  min-width: 140px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.cp-stat-badge .label {
  font-size: 11px;
  color: var(--cp-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cp-stat-badge .value {
  font-family: var(--cp-font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--cp-text-primary);
}

/* Feature icon box */
.cp-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* Pricing card highlight */
.cp-pricing-highlight {
  background: linear-gradient(135deg, rgba(124,92,252,0.18) 0%, rgba(92,108,252,0.12) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(192,132,252,0.35) !important;
  box-shadow: 0 0 12px rgba(124,92,252,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Atmosphere blobs */
.cp-bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
}
.cp-blob-1 { width: 900px; height: 900px; background: radial-gradient(circle, #6d28d9, transparent 70%); top: -200px; left: -200px; }
.cp-blob-2 { width: 700px; height: 700px; background: radial-gradient(circle, #2563eb, transparent 70%); top: 40%; right: -150px; }
.cp-blob-3 { width: 500px; height: 500px; background: radial-gradient(circle, #7c5cfc, transparent 70%); bottom: 10%; left: 30%; }

/* ── Animations ────────────────────────────────────────────── */
@keyframes cp-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}
@keyframes cp-spin-gradient {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cp-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cp-pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(124,92,252,0.2); }
  50%       { box-shadow: 0 0 30px rgba(124,92,252,0.4); }
}

.cp-float        { animation: cp-float 6s ease-in-out infinite; }
.cp-fade-in      { animation: cp-fade-in 0.3s ease; }
.cp-pulse-glow   { animation: cp-pulse-glow 3s ease-in-out infinite; }

/* ============================================================
   Elementor + WordPress integration overrides
   ============================================================ */

/* Hide legacy theme drift-glow — the new .cp-bg-blobs replaces it. */
.bg-glow { display: none !important; }

/* When _css_classes on a button widget includes cp-btn-primary, restyle the
   inner Elementor button to inherit the new gradient-border treatment. */
.elementor-widget-button.cp-btn-primary .elementor-button {
  padding: 14px 36px !important;
  border-radius: var(--cp-radius-pill) !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background:
    linear-gradient(135deg, rgba(40,16,80,0.92) 0%, rgba(18,30,90,0.92) 100%) padding-box,
    linear-gradient(135deg, #c084fc 0%, #818cf8 40%, #a78bfa 80%, #ddd6fe 100%) border-box !important;
  box-shadow:
    rgba(192, 132, 252, 0.3) 0px 0px 16px,
    rgba(96, 165, 250, 0.12) 0px 0px 32px,
    rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important;
  font-family: var(--cp-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: box-shadow .25s, transform .25s !important;
}
.elementor-widget-button.cp-btn-primary .elementor-button-text {
  background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 35%, #93c5fd 70%, #ddd6fe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.elementor-widget-button.cp-btn-primary .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow:
    rgba(192,132,252,0.55) 0 0 28px,
    rgba(96,165,250,0.25) 0 0 56px,
    rgba(255,255,255,0.12) 0 1px 0 inset !important;
}

.elementor-widget-button.cp-btn-secondary .elementor-button {
  padding: 14px 36px !important;
  border-radius: var(--cp-radius-pill) !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  background:
    linear-gradient(160deg, rgba(22,14,44,0.95) 0%, rgba(12,10,28,0.98) 50%, rgba(14,18,50,0.95) 100%) padding-box,
    linear-gradient(135deg, #e879f9 0%, #a78bfa 40%, #a78bfa 80%, #38bdf8 100%) border-box !important;
  box-shadow: 0 0 8px rgba(232,121,249,0.15) !important;
  color: rgba(255,255,255,0.82) !important;
  font-family: var(--cp-font-heading) !important;
  font-weight: 500 !important;
  transition: box-shadow .25s, transform .25s !important;
}
.elementor-widget-button.cp-btn-secondary .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(232,121,249,0.3), 0 0 28px rgba(96,165,250,0.15) !important;
}

/* When an icon-box wrapper has class cp-glass-card, override its inline-style
   border-radius from 14px to the new 50px and tighten shadow. */
.elementor-widget-icon-box.cp-glass-card > .elementor-widget-container,
.elementor-widget.cp-glass-card > .elementor-widget-container {
  border-radius: var(--cp-radius-card) !important;
  box-shadow: var(--cp-shadow-md) !important;
}

/* Pricing-grid cards (rendered by JS in HTML widget) — pull in 50px radius. */
.cp-pcard {
  border-radius: var(--cp-radius-card) !important;
  padding: 40px !important;
}

/* Legacy badge → upgrade visual to glow-pill style (existing markup keeps
   working). */
.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--cp-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(124,92,252,0.15);
  border: 1px solid rgba(124,92,252,0.3);
  color: var(--cp-accent-light);
}

/* Hero gradient text — override theme's old purple-only gradient with the
   new white→lavender→indigo. Targets both legacy and new classes. */
.cp-gradient-text {
  background: var(--cp-gradient-hero-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Make sure Elementor sections sit above the fixed bg-blobs. */
.elementor,
.elementor-section,
.elementor-container,
main,
header,
footer { position: relative; z-index: 1; }
.cp-bg-blobs { z-index: 0 !important; }

/* ============================================================
   Section components (How It Works, CTA Banner, Stat row)
   ============================================================ */

/* Stat badge row container — used directly under hero CTAs */
.cp-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 56px auto 0;
  max-width: 1100px;
}

/* How It Works section */
.cp-how {
  padding: 100px 32px;
  position: relative;
  z-index: 1;
}
.cp-how__head {
  text-align: center;
  margin-bottom: 56px;
}
.cp-how__title {
  font-family: var(--cp-font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 16px 0 0;
  background: var(--cp-gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cp-how__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.cp-step {
  padding: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-step__num {
  font-family: var(--cp-font-heading);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--cp-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.cp-step__title {
  font-family: var(--cp-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--cp-text-primary);
  margin: 0;
}
.cp-step__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-text-secondary);
  margin: 0;
}

/* CTA Banner */
.cp-cta-banner {
  padding: 80px 32px;
  position: relative;
  z-index: 1;
}
.cp-cta-banner__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 64px 48px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(124,92,252,0.12) 0%, rgba(192,132,252,0.06) 100%),
    var(--cp-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(192,132,252,0.30);
  border-radius: var(--cp-radius-card);
  box-shadow:
    0 0 60px rgba(124,92,252,0.18),
    0 0 120px rgba(92,108,252,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.cp-cta-banner__title {
  font-family: var(--cp-font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  background: var(--cp-gradient-hero-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 16px;
}
.cp-cta-banner__subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--cp-text-secondary);
  margin: 0 0 32px;
  max-width: 520px;
  margin-inline: auto;
}

/* ============================================================
   Pricing grid tweaks: centered cards + pill CTAs
   ============================================================ */

/* Center the row when the card count doesn't perfectly fill it (e.g. 4 plans
   that wrap to 3+1 — the orphan Custom now centers instead of left-aligning). */
.cp-pgrid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important;
  justify-content: center !important;
}

/* Pill-shaped CTA buttons inside pricing cards */
.cp-pcard .cp-pcta {
  border-radius: var(--cp-radius-pill) !important;
}

/* Featured card — adopt the new design's gradient-glow treatment instead of
   the original subtle border highlight. */
.cp-pcard.featured {
  background: linear-gradient(135deg, rgba(124,92,252,0.18) 0%, rgba(92,108,252,0.12) 100%), var(--cp-glass) !important;
  border: 1px solid rgba(192,132,252,0.45) !important;
  box-shadow:
    0 0 30px rgba(124,92,252,0.30),
    0 0 60px rgba(92,108,252,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Featured badge — bigger, brighter pill */
.cp-pcard .cp-fbadge {
  padding: 6px 18px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 16px rgba(124,92,252,0.4) !important;
}

/* ============================================================
   Hide legacy theme nav/footer.
   capture-pipeline theme's elementor-header-footer.php template still loads
   header.php / footer.php — those render an old <header class="site-header">
   above (and a footer below) the new fixed nav-pill, leaving a visible dark
   bar. Pages on the elementor-canvas template don't have this issue.
   ============================================================ */
.site-header,
.site-footer { display: none !important; }