/* ============================================================
   GPUIndia — Design polish per UI/UX Pro Max skill
   Design system: design-system/gpuindia/MASTER.md
   - Inter + JetBrains Mono type system
   - SVG icons (no emoji-as-icons)
   - Staggered entrance animation (respects reduced-motion)
   - Gradient CTA + visible focus states
   ============================================================ */

:root {
  /* Typography scale (8px base grid) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-hero: clamp(32px, 6vw, 52px);
  --fs-title: clamp(24px, 4vw, 32px);
  --fs-sub: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 11px;
  --lh-body: 1.65;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  /* CTA gradient (electric blue family per skill) */
  --grad-cta: linear-gradient(135deg, #0ea5e9, #6366f1);
  --grad-cta-hover: linear-gradient(135deg, #38bdf8, #818cf8);
}

body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
.price, .card .price, td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Entrance animation (stagger) ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Gradient CTA buttons ---------- */
.btn-primary, .lead-capture button {
  background: var(--grad-cta);
  color: #fff !important;
  border: none;
  background-size: 100% 100%;
  transition: background-position .25s ease, transform .15s ease, box-shadow .25s ease;
  box-shadow: 0 4px 16px rgba(14,165,233,.25);
}
.btn-primary:hover, .lead-capture button:hover {
  background: var(--grad-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(14,165,233,.35);
}
.btn-primary:active, .lead-capture button:active { transform: scale(.97); }

/* ---------- Visible focus states (keyboard nav) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}
a, button, .hw-category-chip, .compare-btn, .quiz-option { cursor: pointer; }

/* ---------- Header sticky CTA (pricing pattern) ---------- */
.nav-cta {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 8px;
  background: var(--grad-cta);
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  margin-left: 16px;
  transition: box-shadow .2s ease, transform .15s ease;
}
.nav-cta:hover { box-shadow: 0 4px 16px rgba(14,165,233,.4); transform: translateY(-1px); }

/* ---------- Section title polish ---------- */
.section-title { letter-spacing: -.02em; }
.section-title svg { vertical-align: -4px; margin-right: 8px; }

/* ---------- Card hover: lift + glow ---------- */
.card:hover, .why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(56,189,248,.15);
}

/* ---------- Hero badge pulse (subtle) ---------- */
@keyframes badgePulse { 0%,100% { opacity: 1 } 50% { opacity: .75 } }
.hero .badge { animation: badgePulse 3s ease-in-out infinite; }

/* ---------- Reduced motion: kill animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .badge { animation: none; }
  .card:hover, .why-card:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}