/* Page-specific styles on top of tokens.css */

/* Scroll progress bar (top) */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #F5C85E 0%, #3478F6 100%);
  z-index: 60;
  transition: width .12s linear;
  width: 0%;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-stagger="1"] { transition-delay: .07s; }
.reveal[data-stagger="2"] { transition-delay: .14s; }
.reveal[data-stagger="3"] { transition-delay: .21s; }
.reveal[data-stagger="4"] { transition-delay: .28s; }
.reveal[data-stagger="5"] { transition-delay: .35s; }
.reveal[data-stagger="6"] { transition-delay: .42s; }

/* Animated underline on section titles */
.title-underline {
  position: relative;
  display: inline-block;
}
.title-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.1em;
  height: .25em;
  width: 100%;
  background: linear-gradient(90deg, #F5C85E 0%, rgba(245,200,94,0) 100%);
  border-radius: 999px;
  z-index: -1;
  opacity: .55;
}

/* Stat counters */
.stat-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Marquee logo strip */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* Pricing — Pro Kit gradient variant */
.pro-gradient {
  background:
    radial-gradient(circle at 80% 0%, rgba(245,200,94,.22), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(52,120,246,.32), transparent 50%),
    linear-gradient(160deg, #0B1736 0%, #143A86 65%, #2257C7 100%);
}

/* Cream Pro Kit variant */
.pro-cream {
  background:
    radial-gradient(circle at 90% 10%, rgba(245,200,94,.45), transparent 55%),
    linear-gradient(165deg, #FFF8EA 0%, #FFE9B8 100%);
}

/* Floating starter badge */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.wiggle { animation: wiggle 4s ease-in-out infinite; }

/* Sticky bottom CTA bar */
.sticky-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(20,58,134,.08);
  box-shadow: 0 -8px 24px rgba(20,58,134,.06);
}

/* Exit-intent backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(11,23,54,.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn .25s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card { animation: popIn .35s cubic-bezier(.22,1,.36,1); }

/* FAQ accordion */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::after { content: none !important; display: none !important; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .25s ease; }

/* Hero stat pill counter */
.hero-stat-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}

/* Glow ring for pricing highlight */
@keyframes ringGlow {
  0%, 100% { box-shadow: 0 22px 70px rgba(52,120,246,.18), 0 0 0 0 rgba(245,200,94,0); }
  50%      { box-shadow: 0 22px 70px rgba(52,120,246,.18), 0 0 0 6px rgba(245,200,94,.18); }
}
.ring-glow { animation: ringGlow 3s ease-in-out infinite; }

/* Tilt on hover for path cards */
.tilt-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.tilt-card:hover { transform: translateY(-6px) rotate(-.6deg); }

/* Speech bubble for testimonials */
.bubble {
  position: relative;
  background: white;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 2.5rem; bottom: -10px;
  width: 18px; height: 18px;
  background: white;
  transform: rotate(45deg);
  border-radius: 4px;
  box-shadow: 6px 6px 8px rgba(20,58,134,.05);
}

/* Avatar gradient placeholders */
.avatar-a { background: linear-gradient(135deg, #F5C85E, #A96F0C); }
.avatar-b { background: linear-gradient(135deg, #3478F6, #143A86); }
.avatar-c { background: linear-gradient(135deg, #84BEFF, #3478F6); }
.avatar-d { background: linear-gradient(135deg, #FFE9B8, #F5C85E); color: #A96F0C; }
.avatar-e { background: linear-gradient(135deg, #143A86, #0B1736); }

/* Royal accent override (when accent="royal" in tweaks) */
body[data-accent="royal"] .accent-btn { background-color: #3478F6 !important; color: white !important; box-shadow: 0 12px 32px rgba(52,120,246,.28) !important; }
body[data-accent="royal"] .accent-text { color: #3478F6 !important; }
body[data-accent="royal"] .accent-bg { background-color: #3478F6 !important; }

/* Compact density */
body[data-density="compact"] section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
@media (min-width: 1024px) {
  body[data-density="compact"] section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
}