:root {
  --signal: #e3242b;
  --signal-dark: #be181f;
  --signal-subtle: #fef2f2;
  --signal-tint: #ffe4e6;
  --online: #1fa964;
  --online-bg: #ecfdf5;
  --mint-accent: #a9e8bf;
  --mint-btn: #cdeeda;
  --void: #0c1016;
  --void-surface: #131821;
  --void-card: #18202c;
  --void-border: #232d3d;
  --paper: #fffdf9;
  --paper-soft: #f8fafc;
  --paper-dim: #f1f5f9;
  --paper-line: #e2e8f0;
  --ink: #0f172a;
  --slate: #475569;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }
.font-handwriting { font-family: 'Caveat', cursive; }

.dark-hero-glow {
  background: radial-gradient(circle at 65% 25%, rgba(227, 36, 43, 0.22) 0%, rgba(14, 165, 233, 0.12) 38%, transparent 72%);
}

.dark-glass-badge {
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.5);
}

.pricing-popular-glow {
  box-shadow: 0 20px 40px -15px rgba(227, 36, 43, 0.28), 0 0 0 2px #e3242b;
}

.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.08);
}

/* FAQ accordion (native <details>) */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }

.stack-marquee{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.stack-track{display:flex;width:max-content;animation:stackScroll 28s linear infinite}
.stack-marquee:hover .stack-track{animation-play-state:paused}
.stack-group{display:flex;flex-shrink:0;gap:48px;padding-right:48px}
.stack-item{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600;font-size:14px;color:#334155;transition:color .2s}
.stack-item:hover{color:#dc2626}
@keyframes stackScroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.stack-track{animation:none}}