/* ═══════════════════════════════════════════════════════════════
   RJ Knowledge Graph — Funnel CSS (landing + persona pages)
   RJ Master Brand Kit · dark funnel theme
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fn-blue: #2563eb;
  --fn-sky: #0ea5e9;
  --fn-deep: #1e3a8a;
  --fn-navy: #0f172a;
  --fn-grad: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--fn-grad); z-index: 60;
  box-shadow: 0 0 10px rgba(14,165,233,.6);
  transition: width .1s linear;
}

/* ── Gradient utilities (resurrected from old inline styles) ── */
.grad { background: var(--fn-grad); }
.grad-text {
  background: var(--fn-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.glow { box-shadow: 0 0 40px rgba(37,99,235,.35), 0 0 80px rgba(14,165,233,.15); }

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.9,.36,1), transform .6s cubic-bezier(.22,.9,.36,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hero orbs ── */
.hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .28;
  animation: orbFloat 14s ease-in-out infinite;
}
.hero-orbs span:nth-child(1) { width: 420px; height: 420px; background: #2563eb; top: -120px; left: -80px; }
.hero-orbs span:nth-child(2) { width: 340px; height: 340px; background: #0ea5e9; top: 30%; right: -100px; animation-delay: -5s; }
.hero-orbs span:nth-child(3) { width: 280px; height: 280px; background: #1e3a8a; bottom: -80px; left: 35%; animation-delay: -9s; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-24px) scale(1.06); }
  66% { transform: translate(-20px,18px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) { .hero-orbs span { animation: none; } }

/* ── CTA pulse ── */
.cta-pulse { position: relative; }
.cta-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(14,165,233,.55);
  animation: ctaPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0% { box-shadow: 0 0 0 0 rgba(14,165,233,.55); }
  70% { box-shadow: 0 0 0 14px rgba(14,165,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
@media (prefers-reduced-motion: reduce) { .cta-pulse::after { animation: none; } }

/* ── Cards ── */
.code-card {
  background: #0b1220; border: 1px solid rgba(37,99,235,.35);
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 8px 32px rgba(2,6,23,.6);
}
.pain-card {
  background: rgba(15,23,42,.75); border: 1px solid rgba(239,68,68,.25);
  border-left: 3px solid #ef4444;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pain-card:hover { transform: translateY(-4px); border-color: rgba(239,68,68,.5); box-shadow: 0 12px 30px rgba(239,68,68,.12); }
.stakes-card {
  background: linear-gradient(160deg, rgba(245,158,11,.08), rgba(15,23,42,.9));
  border: 1px solid rgba(245,158,11,.3);
}
.feature-card {
  background: rgba(15,23,42,.7); border: 1px solid rgba(37,99,235,.25);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-4px); border-color: rgba(14,165,233,.55); box-shadow: 0 14px 34px rgba(37,99,235,.18); }
.feature-icon {
  width: 44px; height: 44px; border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fn-grad); color: #fff; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(37,99,235,.35);
}
.persona-card {
  background: rgba(15,23,42,.7); border: 1px solid rgba(37,99,235,.3);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.persona-card:hover { transform: translateY(-5px); border-color: rgba(14,165,233,.7); box-shadow: 0 16px 40px rgba(14,165,233,.2); }
.roi-card {
  background: rgba(15,23,42,.8); border: 1px solid rgba(37,99,235,.35);
  box-shadow: 0 12px 40px rgba(2,6,23,.5);
}
.price-card {
  background: rgba(15,23,42,.75); border: 1px solid rgba(37,99,235,.3);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.price-card:hover { transform: translateY(-5px); border-color: rgba(14,165,233,.6); box-shadow: 0 16px 40px rgba(37,99,235,.2); }
.close-glow {
  background: radial-gradient(ellipse at 50% -20%, rgba(37,99,235,.35), transparent 60%),
              linear-gradient(180deg, rgba(15,23,42,.9), #0f172a);
  border: 1px solid rgba(37,99,235,.4);
}

/* ── Plan / steps ── */
.step-badge {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fn-grad); color: #fff; font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
  box-shadow: 0 0 0 6px rgba(37,99,235,.15);
}
.plan-line {
  position: absolute; top: 20px; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, rgba(37,99,235,.15), rgba(14,165,233,.6), rgba(37,99,235,.15));
}
@media (max-width: 767px) { .plan-line { display: none; } }

/* ── Demo typer window ── */
.demo-window { background: #0b1220; border: 1px solid rgba(37,99,235,.4); box-shadow: 0 16px 48px rgba(2,6,23,.7); }
.typer-caret {
  display: inline-block; width: 8px; height: 14px; margin-left: 2px;
  background: #0ea5e9; vertical-align: middle;
  animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.typer-caret.hidden { display: none; }
#typer-resp1, #typer-resp2, #typer-final, #typer-q2 { transition: opacity .5s ease; }

/* ── Comparison table ── */
.compare-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.compare-table th, .compare-table td {
  padding: .85rem 1rem; text-align: left; font-size: .85rem;
  border-bottom: 1px solid rgba(51,65,85,.5);
}
.compare-table thead th { font-family: "Space Grotesk", sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.compare-table .grad-header { background: var(--fn-grad); color: #fff; border-radius: .5rem .5rem 0 0; }
.compare-table td.hl, .compare-table th.hl {
  background: rgba(37,99,235,.12); border-left: 1px solid rgba(14,165,233,.35); border-right: 1px solid rgba(14,165,233,.35);
  color: #e2e8f0; font-weight: 600;
}
.compare-table tbody tr:last-child td.hl { border-bottom: 1px solid rgba(14,165,233,.35); border-radius: 0 0 .5rem .5rem; }

/* ── ROI sliders ── */
.roi-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: #1e293b; outline: none; cursor: pointer;
}
.roi-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--fn-grad); border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.5); cursor: grab;
}
.roi-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #0ea5e9; border: 2px solid #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.5); cursor: grab;
}

/* ── FAQ ── */
.faq-item {
  background: rgba(15,23,42,.7); border: 1px solid rgba(51,65,85,.6);
  border-radius: .9rem; transition: border-color .25s ease;
}
.faq-item:hover, .faq-item[open] { border-color: rgba(14,165,233,.5); }
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { transition: transform .25s ease; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

/* ── Sticky CTA ── */
#sticky-cta { transition: transform .3s ease, translate .3s ease; }
#sticky-cta.show { transform: translateY(0); translate: 0 0; }
#sticky-cta { box-shadow: 0 -8px 30px rgba(2,6,23,.6); }

/* ── Announce bar shimmer ── */
#announce-bar { position: relative; overflow: hidden; }
#announce-bar::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  animation: announceShine 5s ease-in-out infinite;
}
@keyframes announceShine { 0%,60% { left: -60%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) { #announce-bar::after { animation: none; } }

/* ── Counter emphasis ── */
.counter { font-variant-numeric: tabular-nums; }