/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }

/* ===== HERO GRID PATTERN ===== */
.hero-grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ===== NAV SCROLL SHADOW ===== */
.nav-scrolled {
  box-shadow: 0 1px 24px rgba(0,0,0,0.10);
}

/* ===== FEATURE CARD HOVER ===== */
.feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.18);
}

/* ===== HOW IT WORKS: dashed connector ===== */
.steps-grid {
  position: relative;
}
@media (min-width: 768px) {
  .step-item {
    position: relative;
  }
  .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: calc(50% + 2.8rem);
    width: calc(100% - 5.6rem);
    border-top: 2px dashed #c7d2fe;
    z-index: 0;
  }
}

/* ===== HEATMAP CELL HOVER ===== */
.hm-cell {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: default;
}
.hm-cell:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  z-index: 10;
  position: relative;
}

/* ===== STAT COUNTER FADE-IN ===== */
.stat-counter {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.stat-counter.visible {
  opacity: 1;
  transform: translateY(0);
}
.stat-counter:nth-child(1) { transition-delay: 0.0s; }
.stat-counter:nth-child(2) { transition-delay: 0.12s; }
.stat-counter:nth-child(3) { transition-delay: 0.24s; }
.stat-counter:nth-child(4) { transition-delay: 0.36s; }

/* ===== SECTION FADE ON SCROLL ===== */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== PULSE BADGE ===== */
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50%       { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.badge-dot {
  animation: badge-pulse 2s infinite;
}

/* ===== CTA BUTTON GLOW ===== */
.cta-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.cta-primary:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 32px -8px rgba(79, 70, 229, 0.55);
}

/* ===== MOCKUP PANEL WRAPPER ===== */
.mockup-panel {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mockup-panel:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 28px 48px -12px rgba(0,0,0,0.16);
}

/* ===== MOBILE MENU TRANSITION ===== */
#mobile-menu {
  transition: max-height 0.25s ease, opacity 0.25s ease;
}