/* Responsive — preserve nextai.pro light agency feel on all breakpoints */

@media (max-width: 1024px) {
  .pillar-row {
    grid-template-columns: 1fr;
  }

  .pillar {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .pillar:last-child {
    border-bottom: none;
  }

  .capability-grid,
  .tech-split,
  .cta-band__inner,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .cta-band h2 {
    max-width: none;
  }

  .segment-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--transition-base),
      opacity var(--transition-base),
      visibility var(--transition-base);
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav__link {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav__cta {
    margin: 1rem 0 0;
    width: 100%;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-diagram__grid {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    gap: 2rem;
  }
}

@media (max-width: 560px) {
  .container {
    width: min(100% - 1.5rem, var(--container));
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

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

  .capability-lead {
    min-height: auto;
    padding: 1.65rem;
  }

  .segment {
    min-height: auto;
  }

  .tech-visual {
    min-height: auto;
    padding: 1.5rem;
  }

  .modal__panel {
    padding: 1.5rem 1.25rem 1.25rem;
  }
}