/* QuickRemove — custom utilities layered on top of Tailwind Play CDN */

:root {
  --bg: #0c1118;
  --surface: #131a24;
  --surface-2: #1a2230;
  --border: rgba(140, 160, 190, 0.18);
  --fg: #f5f7fa;
  --muted: #96a2b4;
  --brand: #2ea043;
  --brand-glow: #3fb950;
  --brand-fg: #0a0f16;
  --info: #2f81f7;
  --danger: #f85149;
}

html { scroll-behavior: smooth; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}
h1,h2,h3,h4,h5,h6,.font-display {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Backgrounds & effects */
.bg-radial-hero {
  background-image:
    radial-gradient(60% 60% at 50% 0%, rgba(46,160,67,0.20) 0%, transparent 70%),
    radial-gradient(40% 40% at 80% 20%, rgba(47,129,247,0.14) 0%, transparent 70%);
}
.grid-bg {
  background-image:
    linear-gradient(rgba(140,160,190,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,160,190,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.text-gradient-brand {
  background: linear-gradient(135deg, #f5f7fa 0%, #3fb950 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.shadow-glow-brand {
  box-shadow: 0 0 0 1px rgba(46,160,67,0.4), 0 10px 40px -10px rgba(46,160,67,0.5);
}

/* Fade-in-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* FAQ / compare collapsibles */
.faq-a { display: none; }
.faq-a.open { display: block; }
.chev { transition: transform .25s ease; }
.chev.open { transform: rotate(180deg); }

/* Progress bar animation on hero */
@keyframes hero-progress { from { width: 0%; } to { width: 68%; } }
.hero-progress { animation: hero-progress 2s ease-out .4s both; }

/* Utility color helpers (used alongside Tailwind) */
.text-brand { color: var(--brand-glow); }
.bg-brand { background-color: var(--brand); }
.bg-brand:hover { background-color: var(--brand-glow); }
.border-brand-40 { border-color: rgba(46,160,67,0.4); }
.text-info { color: var(--info); }
.text-danger { color: var(--danger); }