/* utilities.css — Animations, Responsive, Container Queries */
/* Layer: utilities (highest specificity within layers) */
@layer utilities {
  /* ===== ANIMATIONS ===== */
  .animate-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .animate-in.visible { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ===== CONTENT VISIBILITY — below-fold perf boost ===== */
  .lazy-section { content-visibility: auto; contain-intrinsic-size: 500px; }

  /* ===== RESPONSIVE — 1024px ===== */
  @media (max-width: 1024px) {
    .main-nav { display: none; }
    .mobile-toggle { display: block; }
    .mobile-nav { display: block; }
    .pillars-grid { grid-template-columns: repeat(3, 1fr); }
    .modules-grid { grid-template-columns: repeat(2, 1fr); }
    .case-card { min-width: calc(50% - 8px); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .ai-features-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ===== RESPONSIVE — 992px ===== */
  @media (max-width: 992px) {
    .packages-grid { grid-template-columns: 1fr; }
    .service-overview .overview-grid { grid-template-columns: 1fr; }
    .course-layout { grid-template-columns: 1fr; }
    .course-sidebar { position: static; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .vision-grid { grid-template-columns: 1fr; }
  }

  /* ===== RESPONSIVE — 768px ===== */
  @media (max-width: 768px) {
    :root { --header-height: 60px; --topbar-height: 32px; }
    .section { padding: var(--space-3xl) 0; }
    .section-header h2 { font-size: 28px; }
    .hero-title { font-size: 32px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
    .stat-num { font-size: 32px; }
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .house-pillars { grid-template-columns: repeat(3, 1fr); }
    .modules-grid { grid-template-columns: 1fr; }
    .case-card { min-width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
    .cta-box h2 { font-size: 28px; }
    .ai-features-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .founder-grid { grid-template-columns: 1fr; }
    .founder-milestones { grid-template-columns: 1fr; }
    .clients-categories { grid-template-columns: 1fr; }
    .app-detail-card { flex-direction: column; align-items: flex-start; }
    .app-detail-icon { width: 60px; height: 60px; min-width: 60px; }
    .app-detail-icon svg { width: 30px; height: 30px; }
    .docs-sidebar { width: 100%; position: relative; top: 0; }
    .docs-main { margin-left: 0; padding: 20px; }
    .docs-wrapper { flex-direction: column; }
    .overview-grid { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .ecosystem-stats { grid-template-columns: repeat(2, 1fr); }
    .cs-grid { grid-template-columns: 1fr; }
    .cs-results-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .hero-about .about-stats { grid-template-columns: repeat(2, 1fr); }
    .brand-card { position: static; }
    /* Top bar mobile */
    .top-bar { height: 32px; }
    .top-bar-inner { height: 32px; }
    .top-bar-center { display: none; }
    .top-consult-btn { font-size: 10px; padding: 3px 10px; }
    .top-link .top-login span { display: none; }
  }

  /* ===== RESPONSIVE — 480px ===== */
  @media (max-width: 480px) {
    .hero-cta { flex-direction: column; align-items: center; }
    .hero-cta .btn { width: 100%; max-width: 280px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .pillars-grid { grid-template-columns: 1fr; }
    .house-pillars { grid-template-columns: 1fr; }
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 280px; }
    .partners-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
  }
}