/* ═══════════════════════════════════════════════════════════════
   MintFee Landing — Responsive Styles
   Breakpoints: 1200, 992, 768, 576, 480
   ═══════════════════════════════════════════════════════════════ */

/* ── 1200px ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  h1 { font-size: 3rem; }
  .hero h1 { font-size: 3.25rem; }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── 992px ────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  .hero h1 { font-size: 2.75rem; }

  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-content { max-width: 100%; margin: 0 auto; }
  .hero-subtitle { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-trust { justify-content: center; }
  .hero-visual { max-width: 600px; margin: 0 auto; }
  .hero-visual .float-card.card-1 { right: -10px; }
  .hero-visual .float-card.card-2 { left: -10px; }

  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .audience-grid { grid-template-columns: repeat(4, 1fr); }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .steps-grid::before { display: none; }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
  .footer-brand { grid-column: 1 / -1; }

  /* Nav */
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }

  .contact-grid { grid-template-columns: 1fr; }
}

/* ── 768px ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --space-4xl: 64px;
    --space-3xl: 48px;
  }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  .hero h1 { font-size: 2.5rem; }

  .hero { padding: 120px 0 60px; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: repeat(2, 1fr); }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing-card.popular { transform: none; }
  .pricing-card.popular:hover { transform: translateY(-4px); }

  .testimonials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .page-hero h1 { font-size: 2.25rem; }
  .cta-banner h2 { font-size: 2rem; }

  .form-row { grid-template-columns: 1fr; }

  .hiw-step { gap: 20px; }
  .hiw-step-number { width: 60px; height: 60px; font-size: 1.25rem; }
  .hiw-timeline::before { left: 29px; }
}

/* ── 576px ────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  :root {
    --space-4xl: 48px;
    --space-3xl: 36px;
    --nav-height: 64px;
  }

  .container { padding: 0 16px; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .hero h1 { font-size: 2rem; }
  .hero { padding: 100px 0 48px; }
  .hero-subtitle { font-size: 1.0625rem; }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }
  .hero-actions .btn {
    width: 100%;
  }

  .hero-trust {
    flex-wrap: wrap;
    gap: 12px;
  }

  .audience-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .features-grid { grid-template-columns: 1fr; }

  .steps-grid { grid-template-columns: 1fr; gap: 20px; }

  .section-header p { font-size: 1rem; }

  .nav-logo { font-size: 1.25rem; }
  .nav-logo img { height: 30px; }
  .nav-actions .btn { display: none; }

  .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }

  .contact-form { padding: var(--space-xl); }

  .faq-question { padding: 14px 18px; font-size: 0.9375rem; }
  .faq-answer-inner { padding: 0 18px 14px; }

  .page-hero { padding: 110px 0 40px; }
  .page-hero h1 { font-size: 1.875rem; }

  .cta-banner h2 { font-size: 1.625rem; }
  .cta-banner p { font-size: 1rem; }
}

/* ── 480px ────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero h1 { font-size: 1.75rem; }
  .hero-badge { font-size: 0.75rem; }

  .audience-card { padding: var(--space-md); }
  .audience-card .icon-wrap { width: 44px; height: 44px; font-size: 1.375rem; }
  .audience-card h4 { font-size: 0.8125rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }

  .laptop-frame { padding: 8px 8px 0; }
  .browser-url { display: none; }

  .hiw-timeline::before { display: none; }
  .hiw-step { flex-direction: column; align-items: center; text-align: center; }
  .hiw-step-content { padding-top: 0; }
}