/* ═══════════════════════════════════════
   CSS VARIABLES — Light mode
═══════════════════════════════════════ */
:root {
  --red:          #E8211A;
  --yellow:       #FFE600;
  --blue:         #1A1AFF;
  --ink:          #0A0A0A;   /* text, borders, shadows */
  --ink-2:        #3A3A3A;   /* secondary text */
  --ivory:        #FFFEF2;   /* primary background */
  --grey:         #F0F0EC;   /* subtle background */
  --grey-2:       #D8D8D2;   /* muted elements */
  --surface-dark: #0A0A0A;   /* always-dark sections (stats, CTA, pro card) */
  --bs:     5px 5px 0px 0px var(--ink);
  --bs-lg:  8px 8px 0px 0px var(--ink);
  --bs-xl: 12px 12px 0px 0px var(--ink);
}

/* ═══════════════════════════════════════
   CSS VARIABLES — Dark mode overrides
═══════════════════════════════════════ */
.dark {
  --ink:    #F0F0EC;   /* borders, text become light */
  --ink-2:  #909088;
  --ivory:  #141413;   /* primary background becomes dark */
  --grey:   #1C1C1A;
  --grey-2: #2A2A28;
  /* --red, --yellow, --blue, --surface-dark stay the same */
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
* { box-sizing: border-box; }
body { font-family: 'Manrope', sans-serif; background: var(--ivory); color: var(--ink); }

/* ═══════════════════════════════════════
   NEO-BRUTAL SHADOWS
   In dark mode: --ink is light → white shadows (très neo-brutal)
═══════════════════════════════════════ */
.nb    { box-shadow: var(--bs); }
.nb-lg { box-shadow: var(--bs-lg); }
.nb-xl { box-shadow: var(--bs-xl); }

.nb-btn { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.nb-btn:hover  { transform: translate(-2px,-2px); box-shadow: 7px 7px 0px 0px var(--ink); }
.nb-btn:active { transform: translate(3px,3px);  box-shadow: 0px 0px 0px 0px var(--ink); }

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

/* ═══════════════════════════════════════
   TICKER
═══════════════════════════════════════ */
.ticker-track { display: flex; white-space: nowrap; animation: ticker 22s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float      { animation: float 4s ease-in-out infinite; }
.float-slow { animation: float 6s ease-in-out infinite; }

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 14s linear infinite; }
.spin-rev  { animation: spin-slow 9s linear infinite reverse; }

@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.7; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* ═══════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════ */
#mobile-nav { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
#mobile-nav.open { max-height: 500px; }

.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.faq-body.open { max-height: 600px; }

.strike { position: relative; color: #9a9a9a; }
.strike::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 2px;
  background: var(--ink); opacity: 0.3;
}

.void-input:focus { outline: none; box-shadow: inset 0 0 0 3px var(--yellow); }

/* ═══════════════════════════════════════
   DARK MODE — Tailwind class overrides
   (Tailwind hardcodes colors, CSS vars don't reach them)
═══════════════════════════════════════ */

/* Backgrounds */
.dark .bg-ivory  { background: #141413 !important; }
.dark .bg-white  { background: #1E1E1C !important; }
.dark .bg-ink    { background: #F0F0EC !important; }

/* Borders */
.dark .border-ink  { border-color: #F0F0EC !important; }
.dark .border-ink\/20 { border-color: rgba(240,240,236,0.2) !important; }

/* Text */
.dark .text-ink   { color: #F0F0EC !important; }
.dark .text-white { color: #F0F0EC; }

/* Nav */
.dark nav > div { background: rgba(20,20,19,0.95) !important; }
.dark #mobile-nav { background: #141413 !important; border-color: #F0F0EC !important; }
.dark #mobile-nav a { color: #F0F0EC; }
.dark #mobile-nav button { border-color: #F0F0EC !important; }

/* Burger lines */
.dark #b1, .dark #b2, .dark #b3 { background: #F0F0EC !important; }

/* Testimonials section */
.dark #void { background: #1C1C1A !important; }

/* Testimonial white cards */
.dark [style*="background:#fff"] { background: #1E1E1C !important; color: #F0F0EC !important; }

/* Pricing starter card */
.dark .pricing-starter { background: #1E1E1C !important; color: #F0F0EC !important; }

/* Feature cards — text legibility */
.dark section#features article { color: #F0F0EC; }
.dark section#features article p { color: #A0A099 !important; }

/* Hover effects on buttons in dark mode */
.dark .hover\:bg-ink:hover  { background: #F0F0EC !important; color: #141413 !important; }
.dark .hover\:text-ivory:hover { color: #141413 !important; }

/* FAQ panel */
.dark .faq-body { background: #141413; border-color: #F0F0EC !important; }
.dark .faq-body h4 { color: #F0F0EC; }
.dark .faq-body div { border-color: rgba(240,240,236,0.15) !important; }