/* ─────────────────────────────────────────────────────────
   Specter — Custom Styles
   (extends Tailwind CSS via CDN)
───────────────────────────────────────────────────────── */

/* ── Root & Body ─────────────────────────────────────── */
:root {
  --color-violet: #8b5cf6;
  --color-cyan:   #22d3ee;
  --color-dark:   #03030a;
  --nav-blur-bg:  rgba(7,7,15,0.85);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--color-dark);
  color: #f3f4f6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Custom Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #07070f; }
::-webkit-scrollbar-thumb { background: #1c1c30; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a45; }

/* ── Selection ─────────────────────────────────────── */
::selection { background: rgba(139,92,246,0.35); color: #fff; }

/* ── Gradient text ─────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Primary button ────────────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #0e7490);
  color: #fff;
  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 20px rgba(139,92,246,0.25);
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(139,92,246,0.4);
}
.btn-primary:active { transform: translateY(0); }

/* ── Glass card ────────────────────────────────────── */
.card-glass {
  background: rgba(20, 20, 36, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card-glass:hover {
  border-color: rgba(139,92,246,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(-2px);
}

/* ── Inline code ────────────────────────────────────── */
.inline-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78em;
  background: rgba(139,92,246,0.15);
  color: #c4b5fd;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid rgba(139,92,246,0.2);
}

/* ── Grid dot pattern ────────────────────────────────── */
.grid-pattern {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(139,92,246,0.12) 1px, transparent 0);
  background-size: 40px 40px;
}

/* ── Step number watermark ───────────────────────────── */
.step-number {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ── Navigation scrolled state ──────────────────────── */
#navbar.scrolled {
  background: var(--nav-blur-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 1px 24px rgba(0,0,0,0.4);
}

/* ── Reveal animation ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stat items ─────────────────────────────────────── */
.stat-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stat-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Animated underline links ───────────────────────── */
nav a {
  position: relative;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
nav a:hover::after {
  transform: scaleX(1);
}

/* ── Glow pulse animation override ──────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(139,92,246,0.25), 0 4px 24px rgba(139,92,246,0.15); }
  50%       { box-shadow: 0 0 0 1px rgba(34,211,238,0.35),  0 8px 48px rgba(139,92,246,0.35); }
}

/* ── Mobile menu transition ─────────────────────────── */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* ── Feature card hover glow ─────────────────────────── */
.card-glass:hover {
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.12),
    0 12px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── Pricing popular card inner border override ───────── */
.card-glass.border-violet-500\/30 {
  border-color: rgba(139,92,246,0.3) !important;
}

/* ── Focus styles for accessibility ─────────────────── */
:focus-visible {
  outline: 2px solid rgba(139,92,246,0.6);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Responsive typography adjustments ──────────────── */
@media (max-width: 640px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
}