/* ══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════ */

/* ── Max 1024px — Tablet & below ── */
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .hero__layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .hero__visual {
    max-width: 560px;
    margin-inline: auto;
  }

  .hero__title {
    font-size: var(--fs-5xl);
  }

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

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

  .pricing-card:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    margin-inline: auto;
  }

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

  .about__grid {
    gap: var(--space-2xl);
  }

  .portfolio__feature {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

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

  .tool__layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
  }
}

/* ── Max 768px — Mobile landscape & below ── */
@media (max-width: 768px) {
  :root {
    --fs-4xl: 2.25rem;
    --fs-5xl: 2.75rem;
    --fs-6xl: 3.5rem;
    --fs-3xl: 2rem;
    --fs-2xl: 1.5rem;
  }

  .section {
    padding-block: var(--space-4xl);
  }

  /* Header / Nav */
  .nav-links {
    display: none;
  }

  .nav-cta.desktop-only {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav {
    display: block;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-height) + var(--space-3xl));
    padding-bottom: var(--space-3xl);
  }

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

  .hero__title {
    font-size: var(--fs-5xl);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero__stats {
    flex-wrap: wrap;
    gap: var(--space-xl);
  }

  .hero__stat {
    min-width: 120px;
  }

  /* Marquee */
  .marquee-bar__inner {
    gap: var(--space-xl);
  }

  /* Metrics */
  .metrics__grid {
    grid-template-columns: 1fr;
  }

  /* About */
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about__image {
    max-width: 320px;
    margin-inline: auto;
    aspect-ratio: 1;
  }

  /* Services */
  .services__grid {
    grid-template-columns: 1fr;
  }

  /* Pricing */
  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .pricing-card:last-child {
    max-width: none;
  }

  /* Portfolio */
  .portfolio__gallery {
    grid-template-columns: 1fr;
  }

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

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

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Overlay Tool */
  .tool__layout {
    grid-template-columns: 1fr;
  }

  .tool__controls {
    position: static;
    order: -1;
  }

  .tool__platform-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Max 480px — Small phones ── */
@media (max-width: 480px) {
  :root {
    --fs-5xl: 2.25rem;
    --fs-6xl: 2.75rem;
    --fs-4xl: 1.875rem;
    --fs-3xl: 1.5rem;
  }

  .container {
    padding-inline: var(--space-md);
  }

  .section {
    padding-block: var(--space-3xl);
  }

  .hero__stats {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .marquee-bar__inner {
    flex-direction: column;
    gap: var(--space-md);
  }

  .marquee-bar__divider {
    display: none;
  }

  .about__credentials {
    flex-direction: column;
  }

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

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

  .email-gate {
    padding: var(--space-xl);
  }
}