/* ──────────────────────────────────────────────
   PROPELOSEO - CONVERSION-FIRST
   All overrides scoped under #propelo-page for
   guaranteed WordPress-theme win.
   ────────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

#propelo-page {
  /* tokens */
  --bg:         #FFFFFF;
  --bg-alt:     #F8FAFB;
  --bg-dark:    #0A0E12;
  --ink:        #0A0E12;
  --text:       #1F2937;
  --muted:      #6B7280;
  --label:      #9CA3AF;
  --hairline:   #E5E7EB;
  --hair-soft:  #F1F3F5;
  --accent:     #00C896;
  --accent-hi:  #00A479;
  --accent-dk:  #008463;
  --accent-soft:#E0FAF1;
  --warn:       #D04A3B;

  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow-x: clip;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

/* ── base color resets (high-specificity to beat WP) ── */
#propelo-page,
#propelo-page p,
#propelo-page li,
#propelo-page span,
#propelo-page summary,
#propelo-page label { color: var(--text); }

#propelo-page h1,
#propelo-page h2,
#propelo-page h3,
#propelo-page h4 { color: var(--ink); }

#propelo-page a { color: var(--ink); text-decoration: none; }

#propelo-page .muted { color: var(--muted); }
#propelo-page .label { color: var(--label); }
#propelo-page .accent { color: var(--accent); }

/* Dark section overrides - scoped so they always win */
#propelo-page .on-dark,
#propelo-page .on-dark p,
#propelo-page .on-dark li,
#propelo-page .on-dark span,
#propelo-page .on-dark h1,
#propelo-page .on-dark h2,
#propelo-page .on-dark h3,
#propelo-page .on-dark h4,
#propelo-page .on-dark a,
#propelo-page .on-dark summary { color: #FFFFFF; }
#propelo-page .on-dark .muted { color: #94A3B8; }
#propelo-page .on-dark .accent { color: var(--accent); }

#propelo-page h1,
#propelo-page h2,
#propelo-page h3,
#propelo-page h4 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

#propelo-page ::selection { background: var(--accent); color: var(--bg-dark); }

#propelo-page section { padding: 120px 56px; background: transparent; position: relative; }
#propelo-page section.dark-section { background: var(--bg-dark); }
#propelo-page section.alt-section { background: var(--bg-alt); }
#propelo-page .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
#propelo-page .container-narrow { max-width: 900px; margin: 0 auto; }

/* ── EYEBROW ── */
#propelo-page .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
#propelo-page .eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
}

/* ── BUTTONS ── */
#propelo-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--bg-dark);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 16px 28px;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
  will-change: transform;
}
#propelo-page .btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,200,150,0.6);
}
#propelo-page .btn .arrow { transition: transform 0.25s ease; }
#propelo-page .btn:hover .arrow { transform: translateX(4px); }

#propelo-page .btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--hairline);
}
#propelo-page .on-dark .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,0.25); }
#propelo-page .btn-ghost:hover {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
  box-shadow: 0 10px 30px -10px rgba(10,14,18,0.4);
}
#propelo-page .on-dark .btn-ghost:hover {
  background: #FFFFFF;
  color: var(--bg-dark);
  border-color: #FFFFFF;
}

#propelo-page .btn-large { padding: 18px 36px; font-size: 15px; }

#propelo-page .btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--ink);
  transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
#propelo-page .btn-text:hover { gap: 14px; color: var(--accent); border-color: var(--accent); }
#propelo-page .on-dark .btn-text { color: #FFFFFF; border-color: #FFFFFF; }
#propelo-page .on-dark .btn-text:hover { color: var(--accent); border-color: var(--accent); }

/* ── NAV ── */
#propelo-page nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 16px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease,
              backdrop-filter 0.35s ease, padding 0.35s ease;
}
#propelo-page nav.scrolled {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--hairline);
  padding: 12px 56px;
}
#propelo-page .nav-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#propelo-page .nav-logo .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
#propelo-page .nav-right { display: flex; gap: 28px; align-items: center; }
#propelo-page .nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.25s ease;
}
#propelo-page .nav-link:hover { color: var(--accent); }
#propelo-page .nav-cta {
  background: var(--ink);
  color: #FFFFFF !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.25s ease, transform 0.25s ease;
}
#propelo-page .nav-cta:hover {
  background: var(--accent);
  color: var(--bg-dark) !important;
  transform: translateY(-1px);
}
body.admin-bar #propelo-page nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar #propelo-page nav { top: 46px; } }

/* ── HERO ── */
#propelo-page .hero {
  padding: 160px 56px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#propelo-page .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
#propelo-page .hero-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 700px;
  background: radial-gradient(ellipse at center top, rgba(0,200,150,0.10) 0%, transparent 60%);
  pointer-events: none;
}
#propelo-page .hero-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
}
/* Canvas is moved to <body> at runtime so it escapes the #propelo-page transformed
   containing block and can be truly fixed to the viewport. z-index 1 keeps it
   behind page content but above the body background. */
html, body { background: #FFFFFF; }
.page-particles {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* Site-wide H2 looping wipe (typewriter feel - reveals + erases + repeats) */
#propelo-page h2.typewrite {
  clip-path: inset(0 100% -10% 0);
  will-change: clip-path;
}
#propelo-page h2.typewrite.typed {
  animation: h2WipeLoop 7s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes h2WipeLoop {
  0%   { clip-path: inset(0 100% -10% 0); }
  14%  { clip-path: inset(0 0%   -10% 0); }
  86%  { clip-path: inset(0 0%   -10% 0); }
  100% { clip-path: inset(0 0%   -10% 100%); }
}
@media (prefers-reduced-motion: reduce) {
  #propelo-page h2.typewrite,
  #propelo-page h2.typewrite.typed {
    clip-path: none !important;
    animation: none !important;
  }
}
#propelo-page .caret {
  display: inline-block;
  color: var(--accent);
  font-weight: 300;
  margin-left: 2px;
  animation: caretBlink 1.1s steps(1) infinite;
  vertical-align: baseline;
  -webkit-text-fill-color: var(--accent);
}
@keyframes caretBlink {
  50% { opacity: 0; }
}
#propelo-page .hero-inner { max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }
#propelo-page .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 32px;
  border: 1px solid rgba(0,200,150,0.2);
}
#propelo-page .hero-tag::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse 1.8s ease-in-out infinite;
}
#propelo-page .hero h1 {
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  font-weight: 700;
  color: var(--ink);
}
#propelo-page .hero h1 .hl {
  color: #0A0E12;
}
#propelo-page .hero-sub {
  font-size: 19px;
  color: #2a2a2a;
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
#propelo-page .hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
#propelo-page .trust-line {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 8px;
}
#propelo-page .trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
#propelo-page .trust-line svg { color: var(--accent); flex-shrink: 0; }

/* ── LOGO WALL ── */
#propelo-page .logos {
  padding: 60px 56px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--bg-alt);
}
#propelo-page .logos-label {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 36px;
}
#propelo-page .logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}
#propelo-page .logo-item {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--muted);
  opacity: 0.65;
  transition: opacity 0.25s ease, color 0.25s ease;
}
#propelo-page .logo-item:hover { opacity: 1; color: var(--ink); }
#propelo-page .logo-item .accent-dot { color: var(--accent); }

/* ── STATS STRIP ── */
#propelo-page .stats-strip {
  padding: 100px 56px;
  background: var(--bg);
}
#propelo-page .stats-head {
  text-align: center;
  margin-bottom: 56px;
}
#propelo-page .stats-head h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
#propelo-page .stats-head p {
  font-size: 15px;
  color: var(--muted);
}
#propelo-page .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
#propelo-page .stat-card {
  padding: 36px 28px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg);
  text-align: center;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .stat-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,200,150,0.25);
}
#propelo-page .stat-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
  line-height: 1;
  text-align: center;
}
#propelo-page .stat-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  text-align: center;
}
#propelo-page .stat-detail {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

/* ── GUARANTEE ── */
#propelo-page .guarantee {
  padding: 100px 56px;
  background: var(--bg);
}
#propelo-page .guarantee-card {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0A0E12 0%, #131820 100%);
  border-radius: 24px;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
#propelo-page .guarantee-card::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,200,150,0.15) 0%, transparent 70%);
  pointer-events: none;
}
#propelo-page .guarantee-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 2;
}
#propelo-page .guarantee-card .eyebrow { color: var(--accent); }
#propelo-page .guarantee-card h2 {
  color: #FFFFFF;
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
#propelo-page .guarantee-card h2 .hl { color: var(--accent); }
#propelo-page .guarantee-card p {
  color: #94A3B8;
  font-size: 16px;
  margin-bottom: 32px;
  max-width: 460px;
  line-height: 1.6;
}
#propelo-page .guarantee-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
}
#propelo-page .guarantee-list li {
  color: #FFFFFF;
  font-size: 15px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.5;
}
#propelo-page .guarantee-list .check {
  width: 22px; height: 22px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 12px;
  margin-top: 1px;
}
#propelo-page .guarantee-list strong { color: #FFFFFF; font-weight: 600; }

/* ── HOW IT WORKS ── */
#propelo-page .how {
  padding: 120px 56px;
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
#propelo-page .section-head-center {
  text-align: center;
  margin-bottom: 64px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
#propelo-page .section-head-center h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
#propelo-page .section-head-center p {
  font-size: 17px;
  color: var(--muted);
}
#propelo-page .how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
#propelo-page .how-step {
  padding: 36px 28px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .how-step:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,200,150,0.2);
}
#propelo-page .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
}
#propelo-page .how-step h3 {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 700;
}
#propelo-page .how-step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── PILLARS ── */
#propelo-page .pillars { padding: 120px 56px; }
#propelo-page .pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
#propelo-page .pillar {
  padding: 40px 36px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--bg);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .pillar:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0,200,150,0.2);
}
#propelo-page .pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  border-radius: 12px;
  margin-bottom: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
}
#propelo-page .pillar h3 {
  font-size: 22px;
  margin-bottom: 12px;
  font-weight: 700;
}
#propelo-page .pillar p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}

/* ── CASE STUDY ── */
#propelo-page .case {
  padding: 120px 56px;
  background: var(--bg-dark);
}
#propelo-page .case .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
#propelo-page .case .eyebrow { color: var(--accent); }
#propelo-page .case h2 {
  color: #FFFFFF;
  font-size: clamp(36px, 4.8vw, 64px);
  margin-bottom: 32px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
#propelo-page .case h2 .hl { color: var(--accent); }
#propelo-page .case .case-body {
  color: #94A3B8;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}
#propelo-page .case-quote {
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent);
  padding: 24px 28px;
  margin-top: 32px;
  border-radius: 0 12px 12px 0;
}
#propelo-page .case-quote blockquote {
  color: #FFFFFF;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 12px;
}
#propelo-page .case-quote cite {
  font-style: normal;
  font-size: 13px;
  color: var(--label);
  font-weight: 500;
}
#propelo-page .case-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
#propelo-page .case-stat {
  padding: 36px 28px;
  background: #131820;
  text-align: left;
  transition: background 0.3s ease;
}
#propelo-page .case-stat:hover { background: #1A2129; }
#propelo-page .case-stat .num {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  color: var(--accent);
  display: block;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 10px;
}
#propelo-page .case-stat .lbl {
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
#propelo-page .case-stat .det {
  font-size: 12px;
  color: var(--label);
}

/* ── PRICING ── */
#propelo-page .pricing {
  padding: 120px 56px;
  scroll-margin-top: 80px;
  background: var(--bg);
}
#propelo-page .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
#propelo-page .price-card {
  padding: 40px 32px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(10,14,18,0.12);
}
#propelo-page .price-card.featured {
  border: 2px solid var(--accent);
  box-shadow: 0 20px 50px -20px rgba(0,200,150,0.3);
}
#propelo-page .price-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg-dark);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
#propelo-page .price-tier {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 8px;
  display: block;
}
#propelo-page .price-name {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--ink);
  text-align: center;
}
#propelo-page .price-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
#propelo-page .price-amount .num {
  font-size: 44px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
#propelo-page .price-amount .interval {
  font-size: 14px;
  color: var(--muted);
}
#propelo-page .price-divider {
  width: 100%;
  height: 1px;
  background: var(--hairline);
  margin: 28px 0;
}
#propelo-page .price-features {
  list-style: none;
  margin-bottom: 32px;
  flex-grow: 1;
}
#propelo-page .price-features li {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
  padding-left: 28px;
  position: relative;
  line-height: 1.5;
}
#propelo-page .price-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background: var(--accent-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300A479' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}
#propelo-page .price-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  margin-top: auto;
}
#propelo-page .price-cta:hover {
  background: var(--ink);
  color: #FFFFFF;
  transform: translateY(-2px);
}
#propelo-page .price-card.featured .price-cta {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
}
#propelo-page .price-card.featured .price-cta:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--bg-dark);
  box-shadow: 0 10px 30px -10px rgba(0,200,150,0.6);
}
#propelo-page .price-cta .arrow { transition: transform 0.25s ease; }
#propelo-page .price-cta:hover .arrow { transform: translateX(4px); }

/* ── FAQ ── */
#propelo-page .faq {
  padding: 120px 56px;
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
#propelo-page .faq-list {
  max-width: 820px;
  margin: 0 auto;
}
#propelo-page .faq-item {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .faq-item:hover { border-color: var(--accent); }
#propelo-page .faq-item[open] {
  border-color: var(--accent);
  box-shadow: 0 8px 20px -10px rgba(0,200,150,0.15);
}
#propelo-page .faq-item summary {
  padding: 22px 28px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  user-select: none;
}
#propelo-page .faq-item summary::-webkit-details-marker { display: none; }
#propelo-page .faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 1.5px solid var(--hairline);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1;
  transition: transform 0.35s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
#propelo-page .faq-item:hover .faq-toggle,
#propelo-page .faq-item[open] .faq-toggle {
  background: var(--accent);
  color: var(--bg-dark);
  border-color: var(--accent);
}
#propelo-page .faq-item[open] .faq-toggle { transform: rotate(45deg); }
#propelo-page .faq-answer {
  padding: 0 28px 24px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

/* ── BIO ── */
#propelo-page .bio {
  padding: 120px 56px;
  background: var(--bg);
}
#propelo-page .bio-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: center;
}
#propelo-page .bio-photo {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25);
}
#propelo-page .bio h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
#propelo-page .bio p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 18px;
}
#propelo-page .bio p strong { color: var(--ink); font-weight: 600; }
#propelo-page .bio-meta {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
#propelo-page .bio-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--accent-dk);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* ── FINAL CTA ── */
#propelo-page .final-cta {
  padding: 120px 56px;
  background: var(--bg-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#propelo-page .final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,200,150,0.15) 0%, transparent 60%);
  pointer-events: none;
}
#propelo-page .final-cta-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
#propelo-page .final-cta h2 {
  color: #FFFFFF;
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
#propelo-page .final-cta h2 .hl { color: var(--accent); }
#propelo-page .final-cta p {
  color: #94A3B8;
  font-size: 17px;
  margin-bottom: 36px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
#propelo-page .final-cta .trust-line span { color: #94A3B8; }

/* ── NEWSLETTER ── */
#propelo-page .newsletter {
  padding: 90px 56px;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
#propelo-page .newsletter-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
#propelo-page .newsletter h3 {
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 8px;
  letter-spacing: -0.025em;
  font-weight: 700;
}
#propelo-page .newsletter p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 28px;
}
#propelo-page .newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
#propelo-page .newsletter-form input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg);
  border: 1.5px solid var(--hairline);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#propelo-page .newsletter-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
#propelo-page .newsletter-form input::placeholder { color: var(--label); }
#propelo-page .newsletter-form button {
  padding: 14px 22px;
  background: var(--ink);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
#propelo-page .newsletter-form button:hover { background: var(--accent); color: var(--bg-dark); transform: translateY(-1px); }
#propelo-page .newsletter-form button:disabled { opacity: 0.5; cursor: not-allowed; }
#propelo-page #newsletter-msg {
  display: none;
  margin-top: 16px;
  font-size: 14px;
}

/* ── AUDIT CAPTURE ── */
#propelo-page .audit-capture {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 580px;
  margin: 0 auto;
  justify-content: center;
}
#propelo-page .audit-capture input {
  flex: 1;
  min-width: 180px;
  padding: 16px 20px;
  border: 1.5px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
#propelo-page .audit-capture input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.12);
}
#propelo-page .audit-capture input::placeholder {
  color: var(--label);
}
#propelo-page .audit-capture .btn {
  width: 100%;
  margin-top: 4px;
}
/* Dark variant for guarantee + final CTA */
#propelo-page .on-dark .audit-capture input,
#propelo-page .guarantee-card .audit-capture input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #FFFFFF;
}
#propelo-page .on-dark .audit-capture input::placeholder,
#propelo-page .guarantee-card .audit-capture input::placeholder {
  color: #64748B;
}
#propelo-page .on-dark .audit-capture input:focus,
#propelo-page .guarantee-card .audit-capture input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.15);
}
#propelo-page .audit-msg {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  display: none;
}

/* Stacked variant (legacy, kept for guarantee/final CTA) */
#propelo-page .audit-capture.stacked {
  flex-direction: column;
  max-width: 420px;
}
#propelo-page .audit-capture.stacked input {
  min-width: 0;
  width: 100%;
}

/* ── AUDIT CARD (hero form) ── */
#propelo-page .audit-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 2rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 32px -8px rgba(10,14,18,0.08);
}
#propelo-page .audit-card-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
#propelo-page .audit-card-header h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
#propelo-page .audit-card-header p {
  font-size: 0.88rem;
  color: var(--muted);
}
/* Fields */
#propelo-page .ac-field {
  margin-bottom: 1rem;
}
#propelo-page .ac-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
#propelo-page .ac-req {
  color: var(--accent);
  margin-left: 2px;
}
#propelo-page .ac-field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1.5px solid var(--hairline);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
#propelo-page .ac-field input::placeholder {
  color: var(--label);
}
#propelo-page .ac-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,200,150,0.12);
  background: var(--bg);
}
#propelo-page .ac-field input.invalid {
  border-color: #D04A3B;
  box-shadow: 0 0 0 3px rgba(208,74,59,0.12);
}
/* Error messages */
#propelo-page .ac-error {
  font-size: 0.78rem;
  color: #D04A3B;
  margin-top: 5px;
  display: none;
}
#propelo-page .ac-error.visible { display: block; }
/* Submit button */
#propelo-page .ac-submit {
  width: 100%;
  height: 48px;
  background: var(--accent);
  color: var(--bg-dark);
  border: none;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25rem;
}
#propelo-page .ac-submit:hover:not(:disabled) { background: var(--accent-dk); }
#propelo-page .ac-submit:active:not(:disabled) { transform: scale(0.99); }
#propelo-page .ac-submit:disabled { opacity: 0.65; cursor: not-allowed; }
/* Spinner */
#propelo-page .ac-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(10,14,18,0.3);
  border-top-color: var(--bg-dark);
  border-radius: 50%;
  animation: acSpin 0.7s linear infinite;
  display: none;
}
@keyframes acSpin { to { transform: rotate(360deg); } }
#propelo-page .ac-submit.loading .ac-spinner { display: block; }
#propelo-page .ac-submit.loading .ac-btn-text { display: none; }
/* Fine print */
#propelo-page .ac-fine-print {
  font-size: 0.78rem;
  color: var(--label);
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.5;
}
/* Trust strip */
#propelo-page .ac-trust-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  justify-content: center;
  flex-wrap: wrap;
}
#propelo-page .ac-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
}
#propelo-page .ac-trust-item svg {
  width: 13px;
  height: 13px;
  stroke: var(--label);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
#propelo-page .ac-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--hairline);
}
/* Success state */
#propelo-page .ac-success {
  display: none;
  text-align: center;
  padding: 1.5rem 0.5rem;
}
#propelo-page .ac-success.visible { display: block; }
#propelo-page .ac-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0,200,150,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
#propelo-page .ac-success-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#propelo-page .ac-success h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
#propelo-page .ac-success p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ── HERO TOOLS STRIP ── */
#propelo-page .hero-tools {
  margin-top: 32px;
  text-align: center;
}
#propelo-page .hero-tools .tools-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
  margin-bottom: 14px;
}
#propelo-page .tools-strip {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#propelo-page .tool-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0.7;
  filter: grayscale(40%);
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
#propelo-page .tool-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: translateY(-2px);
}
#propelo-page .tool-logo svg,
#propelo-page .tool-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
@media (max-width: 480px) {
  #propelo-page .tool-logo svg,
  #propelo-page .tool-logo img {
    width: 30px;
    height: 30px;
  }
}

/* ── FOOTER ── */
#propelo-page footer {
  padding: 32px 56px;
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
#propelo-page footer p {
  font-size: 13px;
  color: var(--muted);
}
#propelo-page .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
#propelo-page .footer-links a {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.25s ease;
}
#propelo-page .footer-links a:hover { color: var(--accent); }

/* ── REVEAL ── */
#propelo-page .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
#propelo-page .reveal.visible { opacity: 1; transform: translateY(0); }
#propelo-page .reveal-d1 { transition-delay: 0.08s; }
#propelo-page .reveal-d2 { transition-delay: 0.16s; }
#propelo-page .reveal-d3 { transition-delay: 0.24s; }
@keyframes safetyReveal { to { opacity: 1; transform: none; } }
#propelo-page .reveal { animation: safetyReveal 0s 2.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #propelo-page .reveal {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  #propelo-page .nav-logo .dot, #propelo-page .hero-tag::before { animation: none; }
}

/* ── MOBILE ── */
@media (max-width: 900px) {
  #propelo-page section { padding: 72px 20px; }
  #propelo-page nav, #propelo-page nav.scrolled { padding: 14px 20px; }
  #propelo-page .hero { padding: 120px 20px 64px; }
  #propelo-page .hero h1 { font-size: clamp(36px, 8.5vw, 48px); }
  #propelo-page .hero-sub { font-size: 16px; }
  #propelo-page .hero-ctas { flex-direction: column; align-items: stretch; }
  #propelo-page .hero-ctas .btn { width: 100%; }

  #propelo-page .logos { padding: 40px 20px; }
  #propelo-page .logos-grid { gap: 32px; }
  #propelo-page .logo-item { font-size: 18px; }

  #propelo-page .stats-strip, #propelo-page .how, #propelo-page .pillars,
  #propelo-page .case, #propelo-page .pricing, #propelo-page .faq,
  #propelo-page .bio, #propelo-page .final-cta, #propelo-page .guarantee,
  #propelo-page .newsletter { padding: 72px 20px; }

  #propelo-page .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  #propelo-page .stat-card { padding: 24px 20px; }
  #propelo-page .stat-num { font-size: 36px; }

  #propelo-page .guarantee-card { padding: 40px 28px; border-radius: 16px; }
  #propelo-page .guarantee-inner { grid-template-columns: 1fr; gap: 36px; }

  #propelo-page .how-grid { grid-template-columns: 1fr; }
  #propelo-page .pillars-grid { grid-template-columns: 1fr; }

  #propelo-page .case .container { grid-template-columns: 1fr; gap: 48px; }
  #propelo-page .case-stats { grid-template-columns: 1fr 1fr; }

  #propelo-page .pricing-grid { grid-template-columns: 1fr; }

  #propelo-page .bio-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  #propelo-page .bio-photo { max-width: 240px; margin: 0 auto; }
  #propelo-page .bio-meta { justify-content: center; }

  #propelo-page .newsletter-form { flex-direction: column; }
  #propelo-page .newsletter-form button { width: 100%; }

  #propelo-page .audit-capture { flex-direction: column; }
  #propelo-page .audit-capture input { min-width: 0; }

  #propelo-page footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 480px) {
  #propelo-page .nav-link { display: none; }
  #propelo-page .case-stats { grid-template-columns: 1fr; }
}

/* ── POST CONTENT (.entry-content) ── */
#propelo-page .entry-content,
#propelo-page .post-content,
#propelo-page article {
  max-width: 760px;
  margin: 0 auto;
  padding: 120px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text);
}
#propelo-page .entry-content h1,
#propelo-page .entry-content h2,
#propelo-page .entry-content h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
#propelo-page .entry-content h2 { font-size: clamp(28px, 3.4vw, 40px); }
#propelo-page .entry-content h3 { font-size: 24px; }
#propelo-page .entry-content p { margin-bottom: 1.4em; }
#propelo-page .entry-content a {
  color: var(--accent-dk);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
#propelo-page .entry-content a:hover { color: var(--accent-hi); }
#propelo-page .entry-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 16px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--ink);
  background: var(--accent-soft);
}
#propelo-page .entry-content code {
  background: var(--bg-alt);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
}
#propelo-page .entry-content pre {
  background: var(--bg-dark);
  color: var(--cream);
  padding: 24px;
  border-radius: 8px;
  overflow-x: auto;
}
#propelo-page .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}
#propelo-page .entry-content ul,
#propelo-page .entry-content ol {
  padding-left: 24px;
  margin-bottom: 1.4em;
}
#propelo-page .entry-content li { margin-bottom: 0.5em; }


/* ============================================================
   V3 DESIGN SYSTEM — PropeloSEO WOW Upgrade
   GSC palette (purple #7C3AED / blue #3B82F6)
   Applied: 2026-05-29
   ============================================================ */

/* ══════════════════════════════════════════════════
   V3 DESIGN SYSTEM — GSC Purple/Blue palette
   All tokens scoped to #propelo-page
   ══════════════════════════════════════════════════ */

/* ── TOKEN OVERRIDES (GSC palette) ── */
#propelo-page {
  --accent:      #7C3AED;
  --accent-hi:   #6D28D9;
  --accent-dk:   #5B21B6;
  --accent-soft: #EDE9FE;
  --bg-dark:     #0D0F1A;
  --blue:        #3B82F6;
  --blue-hi:     #2563EB;
  --blue-dk:     #1E3A8A;
  --gsc-glow-p:  rgba(124,58,237,0.18);
  --gsc-glow-b:  rgba(59,130,246,0.14);
  --dm-sans:     'DM Sans', 'Inter', system-ui, sans-serif;
}

/* ── HEADING FONT UPGRADE ── */
#propelo-page h1,
#propelo-page h2,
#propelo-page h3,
#propelo-page h4 {
  font-family: var(--dm-sans);
}

/* ── AURORA MESH BACKGROUND ── */
#propelo-page .aurora-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
#propelo-page .aurora-bg::before,
#propelo-page .aurora-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: auroraFloat 14s ease-in-out infinite alternate;
}
#propelo-page .aurora-bg::before {
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(124,58,237,0.22) 0%, transparent 70%);
  top: -200px; left: -100px;
  animation-delay: 0s;
}
#propelo-page .aurora-bg::after {
  width: 600px; height: 600px;
  background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 70%);
  top: -100px; right: -80px;
  animation-delay: -5s;
  animation-direction: alternate-reverse;
}
@keyframes auroraFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(40px, 30px) scale(1.05); }
  66%  { transform: translate(-20px, 50px) scale(0.97); }
  100% { transform: translate(30px, 10px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  #propelo-page .aurora-bg::before,
  #propelo-page .aurora-bg::after { animation: none; }
}

/* Third aurora orb (mid-screen indigo) */
#propelo-page .aurora-orb-3 {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.14) 0%, transparent 70%);
  filter: blur(70px);
  top: 40%; left: 40%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: auroraFloat 18s ease-in-out infinite alternate;
  animation-delay: -8s;
}
@media (prefers-reduced-motion: reduce) {
  #propelo-page .aurora-orb-3 { animation: none; }
}

/* ── HERO UPGRADE ── */
#propelo-page .hero {
  padding: 160px 56px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F4F1FF 0%, #EEF2FF 40%, #FFFFFF 100%);
}

/* Remove old green radial from base CSS */
#propelo-page .hero-bg::before {
  background: none !important;
}

/* Hero h1 gradient: purple → blue */
#propelo-page .hl {
  background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

#propelo-page .hero h1 {
  font-size: clamp(44px, 6.8vw, 90px);
  letter-spacing: -0.04em;
  font-weight: 800;
  line-height: 1.0;
}

/* Caret */
#propelo-page .caret {
  color: #7C3AED;
  -webkit-text-fill-color: #7C3AED;
}

/* Stat numbers */
#propelo-page .stat-num,
#propelo-page .case-stat .num {
  color: #7C3AED;
}

/* ── HERO TAG (eyebrow badge) ── */
#propelo-page .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.25);
  color: #5B21B6;
  font-family: var(--dm-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#propelo-page .hero-badge .badge-dot {
  width: 7px; height: 7px;
  background: #7C3AED;
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.6); }
  50%       { box-shadow: 0 0 0 5px rgba(124,58,237,0); }
}
@media (prefers-reduced-motion: reduce) {
  #propelo-page .hero-badge .badge-dot { animation: none; }
}

/* ── NAV GLASS (GSC purple dot + blue CTA) ── */
#propelo-page .nav-logo .dot { background: #7C3AED; }
#propelo-page nav.scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border-bottom: 1px solid rgba(124,58,237,0.12);
}
#propelo-page .nav-cta {
  background: #3B82F6;
  border: 1px solid #3B82F6;
  color: #FFFFFF !important;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
#propelo-page .nav-cta:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px -6px rgba(59,130,246,0.5);
  transform: translateY(-1px);
}

/* ── AUDIT FORM (pill capsule, purple focus) ── */
#propelo-page .audit-capture.stacked {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 6px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(124,58,237,0.15);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 20px 48px -16px rgba(124,58,237,0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
#propelo-page .audit-capture.stacked:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 24px 56px -16px rgba(124,58,237,0.22);
}
#propelo-page .audit-capture.stacked:focus-within {
  border-color: rgba(124,58,237,0.40);
  box-shadow:
    0 0 0 3px rgba(124,58,237,0.08),
    0 24px 56px -18px rgba(124,58,237,0.28);
}
#propelo-page .audit-capture.stacked input {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 16px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #0F1115;
  border-radius: 10px;
  transition: background 0.25s ease;
}
#propelo-page .audit-capture.stacked input::placeholder { color: #94A3B8; }
#propelo-page .audit-capture.stacked input:focus { background: rgba(124,58,237,0.04); }
#propelo-page .audit-capture.stacked input + input { border-left: 1px solid rgba(15,23,42,0.07); }
#propelo-page .audit-capture.stacked button {
  flex-shrink: 0;
  padding: 14px 26px;
  border: none;
  border-radius: 10px;
  background: #7C3AED;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
#propelo-page .audit-capture.stacked button:hover:not(:disabled) {
  background: #6D28D9;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(124,58,237,0.55);
}
#propelo-page .audit-capture.stacked button:active:not(:disabled) { transform: translateY(0); }
#propelo-page .audit-capture.stacked button:disabled { opacity: 0.6; cursor: wait; }
#propelo-page .audit-capture.stacked button .arrow { transition: transform 0.25s ease; }
#propelo-page .audit-capture.stacked button:hover:not(:disabled) .arrow { transform: translateX(4px); }

#propelo-page .audit-msg {
  display: none;
  max-width: 820px;
  margin: 14px auto 0;
  text-align: center;
  font-size: 13px;
}

/* Dark variant (guarantee/final CTA) */
#propelo-page .on-dark .audit-capture.stacked {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 24px 56px -18px rgba(0,0,0,0.5);
}
#propelo-page .on-dark .audit-capture.stacked:hover { background: rgba(255,255,255,0.08); }
#propelo-page .on-dark .audit-capture.stacked:focus-within {
  border-color: rgba(124,58,237,0.5);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.12), 0 24px 64px -18px rgba(124,58,237,0.35);
}
#propelo-page .on-dark .audit-capture.stacked input { color: #FFFFFF; }
#propelo-page .on-dark .audit-capture.stacked input::placeholder { color: rgba(255,255,255,0.4); }
#propelo-page .on-dark .audit-capture.stacked input:focus { background: rgba(124,58,237,0.10); }
#propelo-page .on-dark .audit-capture.stacked input + input { border-left-color: rgba(255,255,255,0.10); }

/* Autofill defeat */
#propelo-page .audit-capture.stacked input:-webkit-autofill,
#propelo-page .audit-capture.stacked input:-webkit-autofill:hover,
#propelo-page .audit-capture.stacked input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0F1115 !important;
  -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,0.55) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

@media (max-width: 720px) {
  #propelo-page .audit-capture.stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-radius: 18px;
  }
  #propelo-page .audit-capture.stacked input { padding: 16px; border-radius: 10px; }
  #propelo-page .audit-capture.stacked input + input { border-left: none; border-top: 1px solid rgba(15,23,42,0.07); }
  #propelo-page .on-dark .audit-capture.stacked input + input { border-top-color: rgba(255,255,255,0.10); }
  #propelo-page .audit-capture.stacked button { width: 100%; padding: 18px; font-size: 15px; }
}

/* ── TRUST STRIP (tool logos under form) ── */
#propelo-page .hero-trust-strip {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#propelo-page .hero-trust-strip .trust-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94A3B8;
}
#propelo-page .hero-trust-strip .trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
#propelo-page .hero-trust-strip .trust-logo-item {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.55;
  filter: grayscale(30%);
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
  cursor: default;
}
#propelo-page .hero-trust-strip .trust-logo-item:hover {
  opacity: 0.9;
  filter: grayscale(0%);
  transform: translateY(-2px);
}
#propelo-page .hero-trust-strip .trust-logo-item span {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
}

/* ── STAT CARDS — GLASS ── */
#propelo-page .stats-strip {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F1FF 100%);
  padding: 100px 56px;
  position: relative;
}
#propelo-page .stat-card {
  padding: 36px 28px;
  border: 1px solid rgba(124,58,237,0.14);
  border-radius: 20px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  box-shadow: 0 4px 20px -8px rgba(124,58,237,0.10);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
#propelo-page .stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(59,130,246,0.04) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#propelo-page .stat-card:hover {
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 48px -16px rgba(124,58,237,0.22);
}
#propelo-page .stat-card:hover::before { opacity: 1; }

#propelo-page .stat-num {
  background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(42px, 5vw, 60px);
  font-family: var(--dm-sans);
  font-weight: 800;
}

/* ── GUARANTEE CARD ── */
#propelo-page .guarantee-card {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0D0F1A 0%, #13152A 50%, #0D1433 100%);
  border-radius: 28px;
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,0.25);
  box-shadow: 0 40px 80px -30px rgba(124,58,237,0.25), 0 0 0 1px rgba(59,130,246,0.08);
}
#propelo-page .guarantee-card::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
  pointer-events: none;
}
#propelo-page .guarantee-card::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Guarantee grid layout */
#propelo-page .guarantee-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  row-gap: 20px;
  grid-template-areas:
    "headline headline"
    "body     body"
    "form     checks"
    "msg      checks";
  align-items: start;
  position: relative;
  z-index: 2;
}
#propelo-page .guarantee-inner > div:first-child { display: contents; }
#propelo-page .guarantee-inner > div:first-child > h2 { grid-area: headline; max-width: none; text-align: center; }
#propelo-page .guarantee-inner > div:first-child > p { grid-area: body; max-width: none; }
#propelo-page .guarantee-inner > div:first-child > form.audit-capture { grid-area: form; max-width: 100%; margin: 12px 0 0; align-self: start; }
#propelo-page .guarantee-inner > div:first-child > .audit-msg { grid-area: msg; margin: 0; max-width: 100%; text-align: left; }
#propelo-page .guarantee-inner > .guarantee-list { grid-area: checks; align-self: start; margin: 12px 0 0; }

#propelo-page .guarantee-card h2 {
  color: #FFFFFF;
  font-size: clamp(30px, 3.8vw, 50px);
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
#propelo-page .guarantee-list .check {
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
  color: #FFFFFF;
}

@media (max-width: 900px) {
  #propelo-page .guarantee-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "headline" "body" "form" "msg" "checks";
    row-gap: 18px;
  }
}

/* ── HOW STEPS — NUMBERED PILL + ACCENT ── */
#propelo-page .how { background: #F8FAFC; }
#propelo-page .how-step {
  padding: 40px 32px;
  background: #FFFFFF;
  border: 1px solid rgba(124,58,237,0.10);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .how-step::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #7C3AED, #3B82F6);
  border-radius: 3px 0 0 3px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
#propelo-page .how-step:hover {
  border-color: rgba(124,58,237,0.30);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px -16px rgba(124,58,237,0.18);
}
#propelo-page .how-step:hover::before { transform: scaleY(1); }
#propelo-page .step-num { display: none !important; }

/* Step number as badge above title */
#propelo-page .how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.12));
  border: 1px solid rgba(124,58,237,0.2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #7C3AED;
  margin-bottom: 20px;
}

/* ── PILLARS — ICON + HOVER ── */
#propelo-page .pillars { background: #FFFFFF; }
#propelo-page .pillar {
  padding: 40px 36px;
  border: 1px solid rgba(124,58,237,0.10);
  border-radius: 20px;
  background: #FFFFFF;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, rgba(59,130,246,0.04) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
#propelo-page .pillar:hover {
  border-color: rgba(124,58,237,0.30);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px -16px rgba(124,58,237,0.18);
}
#propelo-page .pillar:hover::after { opacity: 1; }
#propelo-page .pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(59,130,246,0.12));
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 14px;
  margin-bottom: 24px;
  color: #7C3AED;
  position: relative;
  z-index: 1;
}
#propelo-page .pillar h3 { position: relative; z-index: 1; }
#propelo-page .pillar p { position: relative; z-index: 1; }

/* ── CASE STUDY ── */
#propelo-page .case {
  background: linear-gradient(135deg, #0D0F1A 0%, #0D1433 100%);
  position: relative;
  overflow: hidden;
}
#propelo-page .case::before {
  content: '';
  position: absolute;
  top: -50px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,0.14) 0%, transparent 70%);
  pointer-events: none;
}
#propelo-page .case::after {
  content: '';
  position: absolute;
  bottom: -50px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 70%);
  pointer-events: none;
}
#propelo-page .case-stat {
  padding: 36px 28px;
  background: rgba(255,255,255,0.04);
  text-align: center;
  transition: background 0.3s ease;
  position: relative;
  overflow: hidden;
}
#propelo-page .case-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(59,130,246,0.06));
  opacity: 0;
  transition: opacity 0.3s ease;
}
#propelo-page .case-stat:hover { background: rgba(255,255,255,0.07); }
#propelo-page .case-stat:hover::before { opacity: 1; }
#propelo-page .case-stat .num {
  background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(38px, 4.8vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}

#propelo-page .case-quote {
  border-left: 3px solid #7C3AED;
  background: rgba(124,58,237,0.06);
}

/* ── PRICING ── */
#propelo-page .price-card {
  border: 1px solid rgba(124,58,237,0.12);
  border-radius: 24px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
#propelo-page .price-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124,58,237,0.28);
  box-shadow: 0 20px 48px -16px rgba(124,58,237,0.15);
}

/* Featured pricing card — aurora border */
#propelo-page .price-card.featured {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  box-shadow: 0 24px 56px -20px rgba(124,58,237,0.30);
}
#propelo-page .price-card.featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: linear-gradient(135deg, #7C3AED, #3B82F6, #7C3AED);
  background-size: 200% 200%;
  animation: auroraGradientShift 4s ease-in-out infinite;
  z-index: -1;
}
@keyframes auroraGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  #propelo-page .price-card.featured::before { animation: none; background-position: 0% 50%; }
}

#propelo-page .price-badge {
  background: linear-gradient(90deg, #7C3AED, #3B82F6);
  color: #FFFFFF;
}

/* Pricing CTAs */
#propelo-page .price-cta {
  background: #3B82F6;
  border: 1px solid #3B82F6;
  color: #FFFFFF;
}
#propelo-page .price-cta:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(59,130,246,0.45);
}
#propelo-page .price-card.featured .price-cta {
  background: #7C3AED;
  border: 1px solid #7C3AED;
  color: #FFFFFF;
}
#propelo-page .price-card.featured .price-cta:hover {
  background: #6D28D9;
  border-color: #6D28D9;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(124,58,237,0.55);
}
#propelo-page .price-cta .arrow,
#propelo-page .price-cta:hover .arrow { color: #FFFFFF; }

/* Price feature list checkmarks — purple */
#propelo-page .price-features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-color: rgba(124,58,237,0.10);
}

/* Pricing micro-copy */
#propelo-page .price-micro {
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  margin-top: 10px;
}

/* ── FAQ ── */
#propelo-page .faq-item:hover { border-color: rgba(124,58,237,0.3); }
#propelo-page .faq-item[open] {
  border-color: rgba(124,58,237,0.35);
  box-shadow: 0 8px 24px -8px rgba(124,58,237,0.12);
}
#propelo-page .faq-item:hover .faq-toggle,
#propelo-page .faq-item[open] .faq-toggle {
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
  color: #FFFFFF;
  border-color: transparent;
}
/* ── SPOTLIGHT CURSOR (Antigravity-style) ── */
/* Dark sections track mouse and render a soft radial glow */
.spotlight-section {
  --sx: 50%;
  --sy: 50%;
  --spotlight-opacity: 0;
}
.spotlight-section .spotlight-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px circle at var(--sx) var(--sy),
    rgba(124,58,237,0.13) 0%,
    rgba(59,130,246,0.07) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  opacity: var(--spotlight-opacity);
  transition: opacity 0.5s ease;
  will-change: background;
}

/* ── BIO — CREDENTIAL BADGES WITH ICONS ── */
#propelo-page .bio-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.18);
  color: #5B21B6;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
#propelo-page .bio-tag:hover {
  background: rgba(124,58,237,0.14);
  border-color: rgba(124,58,237,0.35);
  transform: translateY(-2px);
}
#propelo-page .bio-tag svg {
  width: 13px; height: 13px;
  stroke: #7C3AED;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

#propelo-page .bio-photo {
  border-radius: 24px;
  box-shadow:
    0 0 0 4px rgba(124,58,237,0.10),
    0 30px 60px -20px rgba(124,58,237,0.20);
}

/* ── FINAL CTA ── */
#propelo-page .final-cta {
  background: linear-gradient(135deg, #0D0F1A 0%, #0D1433 100%);
  position: relative;
  overflow: hidden;
}
#propelo-page .final-cta::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(124,58,237,0.18) 0%, transparent 55%),
              radial-gradient(ellipse at 70% 50%, rgba(59,130,246,0.14) 0%, transparent 55%);
}

/* ── FOOTER UPGRADE ── */
#propelo-page footer {
  background: #0D0F1A;
  border-top: 1px solid rgba(124,58,237,0.15);
  padding: 36px 56px;
}

/* ── MAGNETIC CURSOR ── */
@media (pointer: fine) {
  #propelo-page a, #propelo-page button, #propelo-page [role="button"] { cursor: none; }
}
#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #7C3AED;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  transition: opacity 0.3s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
}
#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(124,58,237,0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  will-change: transform;
  transition: width 0.3s cubic-bezier(0.16,1,0.3,1),
              height 0.3s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease,
              background 0.3s ease,
              opacity 0.3s ease;
}
#cursor-ring.is-hovering {
  width: 58px; height: 58px;
  border-color: rgba(124,58,237,0.85);
  background: rgba(124,58,237,0.07);
}
#cursor-ring.is-clicking {
  width: 28px; height: 28px;
  background: rgba(124,58,237,0.18);
}
@media (pointer: coarse) {
  #cursor-dot, #cursor-ring { display: none; }
}

#propelo-page footer p { color: #475569; }
#propelo-page .footer-links a { color: #475569; }
#propelo-page .footer-links a:hover { color: #7C3AED; }
#propelo-page .footer-logo {
  font-family: var(--dm-sans);
  font-weight: 800;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#propelo-page .footer-logo .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #3B82F6);
}

/* ── SMALL ACCENT OVERRIDES ── */
#propelo-page .check { background: linear-gradient(135deg, #7C3AED, #3B82F6) !important; color: #FFFFFF !important; }
#propelo-page .faq-toggle { color: #7C3AED !important; }

#propelo-page .eyebrow { color: #7C3AED; }
#propelo-page .eyebrow::before { background: #7C3AED; }

/* Selection */
#propelo-page ::selection { background: rgba(124,58,237,0.25); color: #0F172A; }

/* ── SCROLL-TO-ANCHOR offset fix ── */
#propelo-page .pricing { scroll-margin-top: 80px; }

/* ── GSC CARD – full-hero background ── */
#propelo-page .hero {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #F4F1FF 0%, #EEF2FF 60%, #FFFFFF 100%);
}

/* Aurora stays behind everything */
#propelo-page .hero .aurora-bg { z-index: 0; }

/* Card fills the full hero */
#propelo-page .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#propelo-page .gsc-card-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: none;
  box-shadow: none;
}
#propelo-page .gsc-chrome {
  background: #F8FAFC;
  border-bottom: 1px solid #E5E7EB;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#propelo-page .gsc-chrome-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E5E7EB;
}
#propelo-page .gsc-chrome-title {
  font-size: 11px;
  font-weight: 500;
  color: #6B7280;
  letter-spacing: 0.04em;
  margin-left: 4px;
  text-transform: uppercase;
}
#propelo-page .gsc-metrics {
  display: flex;
  border-bottom: 1px solid #E5E7EB;
}
#propelo-page .gsc-metric-box {
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid #E5E7EB;
}
#propelo-page .gsc-metric-box:last-child { border-right: none; }
#propelo-page .gsc-metric-check {
  width: 14px; height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}
#propelo-page .gsc-metric-check.clicks { background: #3B82F6; }
#propelo-page .gsc-metric-check.impr   { background: #7C3AED; }
#propelo-page .gsc-metric-label {
  font-size: 11px;
  color: #6B7280;
  font-weight: 500;
  display: block;
}
#propelo-page .gsc-metric-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
  margin-top: 3px;
  color: #0F172A;
}
#propelo-page .gsc-chart-area {
  position: relative;
  padding: 0 56px 0 64px;
  background: #FFFFFF;
  height: calc(100vh - 90px); /* fill remaining hero */
}
#propelo-page .gsc-axis-label {
  position: absolute;
  top: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6B7280;
}
#propelo-page .gsc-axis-label.left  { left: 10px; writing-mode: vertical-rl; transform: rotate(180deg); }
#propelo-page .gsc-axis-label.right { right: 10px; writing-mode: vertical-rl; }
#propelo-page .gsc-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Soft centre glow so H1 + form text is readable */
#propelo-page .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 60% at 50% 48%,
    rgba(244,241,255,0.82) 0%,
    rgba(238,242,255,0.55) 45%,
    transparent 75%
  );
}

/* Hero text floats above card + overlay */
#propelo-page .hero-inner {
  position: relative;
  z-index: 3;
  padding: 160px 56px 80px;
  text-align: center;
}




/* FIX FOR CLIPPED NUMBERS WITH BACKGROUND-CLIP TEXT */
#propelo-page .stat-num,
#propelo-page .case-stat .num {
  line-height: normal !important;
  display: inline-block !important;
  padding-bottom: 0.15em !important;
  overflow: visible !important;
}