/* ─── Mobile First: 360px base ──────────────────────────── */

/* ─── 768px — Tablet ─────────────────────────────────────── */
@media (min-width: 768px) {
  h1 { font-size: var(--text-6xl); }

  .hero__headline { font-size: var(--text-6xl); }

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

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

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

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

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

  .form {
    flex-direction: row;
  }

  .how-it-works__steps {
    flex-direction: row;
    align-items: flex-start;
  }

  .step-connector {
    display: block;
  }
}

/* ─── 1024px — Desktop ───────────────────────────────────── */
@media (min-width: 1024px) {
  h1 { font-size: var(--text-7xl); }

  .hero__headline { font-size: var(--text-7xl); }

  .nav__links { display: flex; }
  .nav__hamburger { display: none; }

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

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

  .footer__inner {
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* ─── 1440px — Wide ──────────────────────────────────────── */
@media (min-width: 1440px) {
  .container { padding: 0 var(--space-xl); }
}

/* ─── Mobile Overrides (max 767px) ──────────────────────── */
@media (max-width: 767px) {
  h1, .hero__headline { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  .section { padding: var(--space-2xl) 0; }
  .section--sm { padding: var(--space-xl) 0; }

  .nav__links { display: none; }
  .nav__actions .btn { display: none; }
  .nav__hamburger { display: flex; }

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

  .globe__wrapper {
    max-width: 320px;
    margin: 0 auto;
  }

  .hero__cta-row {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .stat__number { font-size: var(--text-4xl); }

  .products__grid { grid-template-columns: 1fr; }
  .product-card--bundle { grid-column: span 1; }

  .how-it-works__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .step-connector { display: none; }

  .arch__grid { grid-template-columns: 1fr; }
  .case-study__grid { grid-template-columns: 1fr; }
  .personas__grid { grid-template-columns: 1fr; }

  .wtf-card__inner {
    flex-direction: column;
  }

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

  .final-cta__actions {
    flex-direction: column;
    align-items: center;
  }

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

  .footer__links {
    justify-content: center;
  }

  .footer__social {
    justify-content: center;
  }

  .form {
    flex-direction: column;
  }

  .card { padding: var(--space-lg); }

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

  .arch__center-hub {
    order: -1;
  }
}

/* ─── Blog responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .post-grid               { grid-template-columns: 1fr; }
  .post-grid--related      { grid-template-columns: 1fr; }
  .post__title             { font-size: var(--text-4xl); }
  .post__meta              { flex-direction: column; gap: var(--space-xs); }
  .post__author-bio        { flex-direction: column; }
  .post__cta-final__actions { flex-direction: column; align-items: center; }
  .post__hero              { min-height: 220px; }
  .post__hero--what-the-fxck-is-claude::before { font-size: clamp(1.5rem, 8vw, 2.5rem); }
}

@media (max-width: 360px) {
  .post__title { font-size: var(--text-3xl); }
}

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

  .hero__bg-gradient,
  .glow-orb {
    animation: none;
  }
}