/* ==========================================================================
   Responsive Breakpoints — Mobile / Tablet / Desktop
   ========================================================================== */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --text-5xl: 2.75rem;
    --text-4xl: 2rem;
    --text-3xl: 1.75rem;
  }

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

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .arch-flow {
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
  }

  .arch-arrow {
    display: none;
  }

  .arch-node {
    flex: 0 0 auto;
  }

  .steps-grid::before {
    display: none;
  }
}

/* ── Mobile Large (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
    --nav-height: 64px;
  }

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

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

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

  .nav-toggle {
    display: flex;
  }

  .nav-mobile {
    display: flex;
  }

  /* Hero */
  .hero-content {
    padding: var(--space-lg);
  }

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

  .hero-subtitle {
    font-size: var(--text-base);
  }

  .install-block {
    font-size: var(--text-xs);
    padding: 0.6rem 0.6rem 0.6rem 1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .steps-grid::before {
    display: none;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Architecture */
  .arch-flow {
    flex-direction: column;
    align-items: center;
  }

  .arch-arrow {
    transform: rotate(90deg);
    display: flex;
  }

  .arch-arrow-line {
    width: 32px;
  }

  /* Terminal */
  .terminal-body {
    padding: var(--space-lg);
    font-size: var(--text-xs);
    overflow-x: auto;
  }

  /* CTA */
  .cta-install-block {
    font-size: var(--text-sm);
    padding: 0.7rem 0.7rem 0.7rem 1rem;
  }

  .cta-content h2 {
    font-size: var(--text-3xl);
  }

  /* Footer */
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }
}

/* ── Mobile Small (≤ 480px) ── */
@media (max-width: 480px) {
  :root {
    --text-5xl: 1.85rem;
    --text-4xl: 1.5rem;
    --text-3xl: 1.25rem;
  }

  .section-inner {
    padding: var(--space-2xl) var(--space-md);
  }

  .hero h1 {
    font-size: var(--text-3xl);
  }

  .hero-badge {
    font-size: var(--text-xs);
  }

  .install-block {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .install-block .copy-btn {
    width: 100%;
    height: 32px;
  }

  .cta-install-block {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

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

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

  .code-brackets {
    font-size: var(--text-2xl);
  }

  .arch-node-box {
    padding: var(--space-md) var(--space-lg);
    min-width: 120px;
  }
}