/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
  background: #ffffff;
  color: #3a3a4a;
  font-family: var(--font);
  overflow-x: hidden;
  padding-top: 51px; /* offset for fixed nav */
}

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1136px) {
  .hero-inner { padding: 50px 20px 40px; }
}

@media (max-width: 1024px) {
  .hero-inner { padding: 40px 20px 30px; }
  .product-hero-inner { padding: 80px 32px 60px; gap: 48px; }
  .cta-banner { margin: 0 32px 60px; }
  .strengths-grid { grid-template-columns: repeat(2, 1fr); }
  .strength-card { padding: 32px 28px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { padding: 28px 24px; }
  .ai-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .dojo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero { min-height: 400px; }
  .hero-inner {
    padding: 40px 20px 24px;
    min-height: 400px;
  }
  #introchart { height: 100%; }
  .product-hero { min-height: auto; }
  .product-hero-inner {
    grid-template-columns: 1fr;
    padding: 80px 20px 48px;
    gap: 40px;
  }
  .ai-grid,
  .platform-grid,
  .exp-grid { grid-template-columns: 1fr; gap: 40px; }
  .strengths-grid { grid-template-columns: 1fr; }
  .strength-card { padding: 28px 24px; }
  .ai-tools-grid { grid-template-columns: 1fr; gap: 16px; }
  .dojo-grid { grid-template-columns: 1fr; }
  .cta-banner { margin: 0 20px 40px; }
  .cta-inner {
    flex-direction: column;
    padding: 48px 32px;
    text-align: center;
  }
  .cta-actions { align-items: stretch; }
  .hero-stats { gap: 20px; }
  .hero-stat + .hero-stat { padding-left: 20px; }
  .hero-stat-num { font-size: 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
  .footer-copy { text-align: center; }
}

@media (max-width: 480px) {
  .hero-inner { padding: 36px 16px 20px; }
  .product-hero-inner { padding: 72px 16px 40px; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .hero-stat + .hero-stat { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 16px; }
  .hero-actions { flex-direction: column; }
  .cta-banner { margin: 0 16px 32px; border-radius: 12px; }
  .cta-inner { padding: 32px 20px; }
}