/* Master AI Kit — Design System CSS v2 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --accent: #3182ce;
  --accent-light: #63b3ed;
  --accent-dark: #2c5282;
  --accent-glow: rgba(49, 130, 206, 0.15);
  --text-primary: #f7fafc;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --border: #2d3748;
  --border-light: #374151;
  --success: #48bb78;
  --warning: #f6ad55;
  --gradient-start: #1a202c;
  --gradient-end: #1a365d;
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-secondary);
  line-height: 1.7;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

::selection { background: var(--accent); color: white; }

code, pre, .font-mono { font-family: 'JetBrains Mono', monospace; }

/* ==================== NAVIGATION ==================== */
.nav-glass {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(45, 55, 72, 0.5);
}

/* ==================== HERO ==================== */
.hero-gradient {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #1a365d 70%, #1e3a5f 100%);
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 80%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(49, 130, 206, 0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

/* ==================== CARDS ==================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(49, 130, 206, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(49, 130, 206, 0.1);
}

/* ==================== BUTTONS ==================== */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(49, 130, 206, 0.35);
}
.btn-outline {
  border: 2px solid var(--border-light);
  color: var(--text-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-light);
  background: var(--accent-glow);
}

/* ==================== TYPOGRAPHY ==================== */
.gradient-text {
  background: linear-gradient(135deg, var(--accent-light), #90cdf4, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-divider {
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}

/* ==================== IMAGE PLACEHOLDERS ==================== */
.img-placeholder {
  background: linear-gradient(135deg, var(--bg-card) 0%, #1a1f2e 50%, var(--bg-secondary) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--text-muted);
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(49, 130, 206, 0.05) 100%);
}

/* ==================== PROSE (Guide Content) ==================== */
.prose-custom h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-primary); line-height: 1.2; letter-spacing: -0.02em; }
.prose-custom h2 { font-size: 1.625rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--text-primary); line-height: 1.3; letter-spacing: -0.01em; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.prose-custom h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--accent-light); }
.prose-custom h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.prose-custom p { margin-bottom: 1.25rem; color: var(--text-secondary); line-height: 1.8; }
.prose-custom ul, .prose-custom ol { margin-bottom: 1.25rem; padding-left: 1.5rem; color: var(--text-secondary); }
.prose-custom li { margin-bottom: 0.5rem; line-height: 1.7; }
.prose-custom li::marker { color: var(--accent); }
.prose-custom code { background: rgba(49, 130, 206, 0.1); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875rem; color: var(--accent-light); }
.prose-custom pre { background: var(--bg-card) !important; border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; overflow-x: auto; margin-bottom: 1.25rem; }
.prose-custom pre code { background: none; padding: 0; font-size: 0.8rem; color: var(--text-secondary); }
.prose-custom blockquote { border-left: 4px solid var(--accent); padding: 0.75rem 1rem; color: var(--text-muted); font-style: italic; margin-bottom: 1.25rem; background: var(--accent-glow); border-radius: 0 8px 8px 0; }
.prose-custom a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(99, 179, 237, 0.3); transition: text-decoration-color 0.2s; }
.prose-custom a:hover { text-decoration-color: var(--accent-light); color: var(--accent-light); }
.prose-custom strong { color: var(--text-primary); font-weight: 600; }
.prose-custom table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.9rem; }
.prose-custom thead { border-bottom: 2px solid var(--border); }
.prose-custom th { background: var(--bg-secondary); padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-primary); font-size: 0.85rem; }
.prose-custom td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.prose-custom tr:hover td { background: rgba(49, 130, 206, 0.03); }
.prose-custom img { border-radius: 8px; margin: 2rem 0; max-width: 100%; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.prose-custom hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Tip boxes */
.prose-custom > p > em { color: var(--accent-light); }

/* ==================== UTILITIES ==================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Scroll-triggered animations */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==================== ACCESSIBILITY ==================== */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ==================== MOBILE MENU ==================== */
.mobile-menu {
  display: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px) {
  .hero-gradient { padding-top: 5.5rem; padding-bottom: 3rem; }
  .hero-gradient h1 { font-size: 2.25rem !important; }
  .prose-custom h1 { font-size: 1.75rem; }
  .prose-custom h2 { font-size: 1.35rem; }
  .prose-custom table { font-size: 0.8rem; }
  .prose-custom th, .prose-custom td { padding: 0.5rem 0.5rem; }
}

/* ============================================================
   VISUAL REHABILITATION — Alignment, Sizing, Polish
   ============================================================ */

/* ——— 1. ALIGNMENT FIXES ——— */

/*
 * PROBLEM: Homepage "Featured Products" uses a 3-col grid with only 1 product.
 * The single card floats left, leaving 2 empty columns of dead space.
 * FIX: When a grid has fewer children than columns, center the content.
 * Targets the section following "Featured Products" heading.
 */
section .grid.lg\:grid-cols-3:has(> :only-child) {
  justify-items: center;
}
section .grid.lg\:grid-cols-3 > :only-child {
  max-width: 380px;
  width: 100%;
}

/*
 * PROBLEM: Shop page cards contain empty category label spans
 * (e.g., <span class="text-xs font-medium text-blue-400 uppercase tracking-wider"></span>)
 * These create invisible vertical gaps inside cards.
 * FIX: Collapse empty label spans so they don't push layout.
 */
.card .flex.items-center.gap-2:empty,
.card .flex.items-center.gap-2:not(:has(span:not(:empty))) {
  display: none;
}

/*
 * PROBLEM: Product page hero image is w-48 h-64 (192x256) — too narrow for
 * a product hero section on desktop. Looks like a postage stamp.
 * FIX: Scale it up on wider screens while preserving aspect ratio.
 */
@media (min-width: 640px) {
  section img.w-48.h-64 {
    width: 14rem;   /* 224px — up from 192 */
    height: 18rem;  /* 288px — up from 256 */
  }
}
@media (min-width: 768px) {
  section img.w-48.h-64 {
    width: 16rem;   /* 256px */
    height: 20rem;  /* 320px */
  }
}

/*
 * PROBLEM: Price display on product page has $19 and $39 (strikethrough)
 * sitting side by side with equal gap. The strikethrough should feel like
 * an annotation on the current price, not a peer element.
 * FIX: Tighten the grouping and adjust relative sizing.
 * Targets the flex row with the price + strikethrough pattern.
 */
section .flex.items-center.justify-center.gap-4 {
  gap: 0.5rem;
  align-items: baseline;
}

/*
 * PROBLEM: "How It Works" step number circles (w-14 h-14, text-2xl)
 * can have slightly inconsistent vertical centering due to font metrics.
 * FIX: Use flexbox centering explicitly and tighten the number style.
 */
section .grid.sm\:grid-cols-3 .w-14.h-14 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

/* ——— 2. IMAGE SIZING FIXES ——— */

/*
 * PROBLEM: Homepage category card images are w-20 h-20 (80x80px).
 * On a card ~200px wide, this is too small to carry visual weight.
 * FIX: Scale category card images up on wider viewports.
 * The HTML uses <img class="w-20 h-20 mx-auto mb-3 rounded-xl"> inside cards.
 */
@media (min-width: 640px) {
  .card img.w-20.h-20 {
    width: 5.5rem;   /* 88px */
    height: 5.5rem;
  }
}
@media (min-width: 1024px) {
  .card img.w-20.h-20 {
    width: 6rem;     /* 96px */
    height: 6rem;
  }
}

/*
 * Product card and guide card image containers: ensure images fill
 * their h-44 container properly and scale on hover.
 */
.card.overflow-hidden img.w-full.h-full {
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card.overflow-hidden:hover img.w-full.h-full {
  transform: scale(1.04);
}

/* ——— 3. ICON / SYMBOL REFINEMENT ——— */

/*
 * PROBLEM: Guide card emojis are text-4xl (2.25rem / 36px) inside h-44 (176px)
 * containers. They're visually acceptable but could be dialed back slightly
 * to feel more composed and less shouty.
 * FIX: Reduce to 2rem and add a subtle float animation for life.
 */
.card span.text-4xl {
  font-size: 2rem;
  transition: transform 0.3s ease;
}
.card:hover span.text-4xl {
  transform: scale(1.1);
}

/*
 * "Why Master AI Kit" emoji icons (text-2xl) are fine but should have
 * a subtle lift on hover for consistency with card hover behavior.
 */
.card div.text-2xl {
  transition: transform 0.3s ease;
}
.card:hover div.text-2xl {
  transform: translateY(-2px);
}

/*
 * Shop page img-placeholder emoji (text-3xl inside h-44).
 * These are placeholders — give them a gentle pulse to indicate
 * they'll eventually be replaced with real imagery.
 */
.img-placeholder span {
  opacity: 0.6;
}

/* ——— 4. POLISH & MICRO-INTERACTIONS ——— */

/*
 * Navigation link underline effect — adds a subtle bottom-border
 * reveal on hover instead of just a color change.
 */
.nav-glass a.text-sm.font-medium {
  position: relative;
}
.nav-glass a.text-sm.font-medium::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-light);
  transition: width 0.25s ease;
}
.nav-glass a.text-sm.font-medium:hover::after {
  width: 100%;
}

/*
 * Category card link: prevent underline on "From $X →" price links
 * on hover. The card lift is sufficient feedback.
 */
.card a {
  text-decoration: none;
}

/*
 * Section dividers: add a subtle shimmer animation to make them feel alive.
 */
.section-divider {
  position: relative;
  overflow: hidden;
}
.section-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/*
 * Guide card gradient headers: add a subtle parallax-like shift on hover.
 * The background is set inline via style="background:linear-gradient(...)"
 * so we shift the entire container's pseudo-element instead.
 */
.card .relative.h-44 {
  overflow: hidden;
  transition: all 0.4s ease;
}
.card:hover .relative.h-44 .absolute.inset-0 {
  transform: scale(1.08);
  transition: transform 0.6s ease;
}

/*
 * Product page CTA button: add a subtle glow pulse to draw attention.
 */
.btn-primary.text-lg {
  position: relative;
}
.btn-primary.text-lg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(49, 130, 206, 0.4);
  opacity: 0;
  animation: ctaGlow 2.5s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/*
 * FAQ details/summary chevron rotation.
 * The HTML already has group-open:rotate-180 but transition-transform
 * needs a duration via CSS for smooth animation.
 */
details summary .transition-transform {
  transition: transform 0.3s ease;
}

/*
 * Newsletter input: add a subtle glow on focus to match the design system.
 */
form input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/*
 * Footer links: add subtle underline-slide effect matching nav.
 */
footer a {
  position: relative;
  text-decoration: none;
}
footer a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--text-muted);
  transition: width 0.25s ease;
}
footer a:hover::after {
  width: 100%;
}

/*
 * Hero badge pill ("🧩 The AI Aftermarket Store"):
 * add a very subtle pulse to draw the eye on first load.
 */
.hero-gradient .inline-block.bg-blue-500\/20 {
  animation: badgePulse 4s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(49, 130, 206, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(49, 130, 206, 0.15); }
}

/*
 * Hero background image: subtle slow drift animation for depth.
 */
.hero-gradient img {
  animation: heroDrift 20s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(-1%, -1%); }
}

/*
 * "How It Works" step numbers: add a subtle entrance delay
 * so they stagger in via the reveal animation.
 */
.grid.sm\:grid-cols-3 > div:nth-child(1) .w-14 { transition-delay: 0s; }
.grid.sm\:grid-cols-3 > div:nth-child(2) .w-14 { transition-delay: 0.1s; }
.grid.sm\:grid-cols-3 > div:nth-child(3) .w-14 { transition-delay: 0.2s; }

/*
 * "What's Inside" part badges: consistent alignment and subtle
 * hover background change.
 */
.card.p-4:hover {
  background: var(--bg-card-hover);
}
.card.p-4 span.bg-blue-500\/20 {
  min-width: 3.5rem;
  text-align: center;
}

/* ——— 5. ENHANCED SCROLL-REVEAL ——— */

/*
 * The existing .reveal class has CSS but no JS to trigger it.
 * Enhance the transition with staggered delays for children
 * within grids.
 */
.reveal {
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/*
 * Staggered reveal for grid children.
 * Applied via JS — each child gets a --delay custom property.
 */
.reveal-child {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-child.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ——— 6. ADDITIONAL RESPONSIVE REFINEMENTS ——— */

@media (max-width: 640px) {
  /* Tighten hero padding on mobile */
  .hero-gradient { padding-top: 5rem; padding-bottom: 2.5rem; }

  /* Prevent category images from getting too large on small screens */
  .card img.w-20.h-20 { width: 4rem; height: 4rem; }

  /* Product page hero image: keep reasonable on mobile */
  section img.w-48.h-64 { width: 10rem; height: 14rem; }

  /* Reduce guide card header height on mobile */
  .card .h-44 { height: 10rem; }
}

/* Tablet breakpoint for category grid */
@media (min-width: 641px) and (max-width: 1023px) {
  /* 2-col category grid looks better on tablet than 5-col */
  section .grid.lg\:grid-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*
 * Prefers-reduced-motion: respect user accessibility settings.
 * Disable all animations for users who prefer reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-gradient img { animation: none; }
  .card:hover { transform: none; }
  .btn-primary:hover { transform: none; }
}