@media (min-width: 640px) {
  .container,
  .container-wide {
    width: min(100% - 3rem, var(--container));
  }

  .container-wide {
    width: min(100% - 3rem, var(--container-wide));
  }

  .stats-grid,
  .project-grid,
  .tool-grid,
  .ai-grid,
  .values-grid,
  .docs-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .filter-shell {
    grid-template-columns: minmax(220px, 0.8fr) 1.4fr;
    align-items: center;
  }

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

@media (max-width: 839px) {
  .home-hero {
    padding-block: var(--space-7) var(--space-8);
  }

  .home-hero-grid {
    gap: var(--space-7);
  }

  .hero-copy {
    gap: var(--space-4);
  }

  .home-hero h1 {
    font-size: clamp(2.9rem, 16vw, 5.6rem);
  }

  .research-panel {
    min-height: 0;
    padding: var(--space-4);
  }

  .signal-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding-block: 0.72rem;
  }

  .signal-value {
    font-size: 0.8rem;
  }

  .page-hero {
    padding-block: var(--space-7);
  }

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

  .section.compact {
    padding-block: var(--space-7);
  }

  .filter-shell {
    padding: var(--space-3);
  }

  .filter-buttons,
  .tab-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }

  .chip-button,
  .tab-button {
    flex: 0 0 auto;
  }

  .project-card,
  .tool-card,
  .ai-card,
  .value-card,
  .feature-card {
    min-height: 0;
    padding: var(--space-4);
  }

  .tool-rail,
  .docs-block,
  .tab-panel {
    padding: var(--space-4);
  }

  .final-cta {
    padding: var(--space-5);
  }

  .footer-bottom {
    display: grid;
  }
}

@media (min-width: 840px) {
  :root {
    --nav-height: 78px;
  }

  .home-hero {
    min-height: calc(100dvh - var(--nav-height));
    display: grid;
    align-items: center;
    padding-block: var(--space-8);
  }

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

  .project-grid,
  .ai-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .tool-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }

  .contact-grid {
    grid-template-columns: 0.78fr 1.22fr;
    align-items: start;
  }

  .ai-page-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(340px, 0.7fr);
    gap: var(--space-7);
    align-items: center;
  }

  .docs-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .docs-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.034);
  }

  .docs-sidebar a {
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-weight: 650;
    transition: color var(--transition), background var(--transition);
  }

  .docs-sidebar a:hover {
    color: var(--text-0);
    background: rgba(255, 255, 255, 0.05);
  }

  .docs-mobile {
    display: none;
  }

  .footer-grid {
    grid-template-columns: minmax(320px, 0.92fr) 1.08fr;
    align-items: start;
  }
}

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

  .nav {
    min-height: 64px;
  }

  .nav-menu {
    inset: calc(64px + env(safe-area-inset-top)) 0.625rem auto;
    max-height: calc(100dvh - 82px - env(safe-area-inset-top));
    overflow-y: auto;
    padding: var(--space-3);
  }

  .nav-link {
    min-height: 46px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .brand-text {
    max-width: 11.6rem;
    font-size: 0.9rem;
  }

  .brand-text span {
    display: none;
  }

  .hero-logo {
    width: 64px;
    height: 64px;
  }

  .home-hero h1 {
    font-size: clamp(2.8rem, 18vw, 4.8rem);
  }

  .tagline {
    font-size: 1.08rem;
  }

  .hero-subtitle,
  .lead {
    font-size: 1rem;
  }

  .page-title {
    font-size: clamp(2.3rem, 14vw, 4rem);
  }

  .button-primary,
  .button-secondary {
    width: 100%;
  }

  .action-row {
    width: 100%;
  }

  .project-visual,
  .tool-visual {
    aspect-ratio: 4 / 3;
  }

  .tool-preview {
    padding: var(--space-3);
  }

  .preview-button {
    width: 100%;
  }

  .modal {
    padding: 0.55rem;
  }

  .modal-panel {
    max-height: calc(100dvh - 1.1rem);
  }

  .modal-head,
  .modal-body,
  .contact-panel,
  .contact-form {
    padding: var(--space-4);
  }

  .modal-head {
    align-items: flex-start;
  }

  .footer-columns {
    gap: var(--space-4);
  }
}

@media (min-width: 1120px) {
  .feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature-card.wide {
    grid-column: span 2;
  }

  .nav-menu {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav-link {
    min-height: 38px;
    padding: 0.5rem 0.58rem;
    font-size: 0.86rem;
  }

  .nav-cta {
    display: inline-flex;
    min-height: 40px;
    padding: 0.64rem 0.84rem;
    font-size: 0.86rem;
  }

  .menu-toggle {
    display: none;
  }
}

@media (min-width: 1200px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.54fr);
    gap: var(--space-9);
  }

  .hero-copy {
    max-width: none;
  }

  .research-panel {
    min-height: 520px;
    align-content: center;
  }
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline-item {
    min-height: 240px;
    padding: var(--space-5);
  }

  .timeline-item:nth-child(odd) {
    margin-right: var(--space-6);
  }

  .timeline-item:nth-child(even) {
    margin-left: var(--space-6);
    transform: translateY(56px);
  }

  .timeline-item::before {
    left: auto;
    right: calc(-1 * var(--space-6) - 7px);
  }

  .timeline-item:nth-child(even)::before {
    right: auto;
    left: calc(-1 * var(--space-6) - 7px);
  }
}

@media (min-width: 1080px) {
  .home-hero h1 {
    font-size: clamp(5.4rem, 5.4vw, 6.2rem);
  }

  .nav-link {
    padding-inline: 0.7rem;
    font-size: 0.9rem;
  }

  .page-hero {
    padding-block: var(--space-10);
  }

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

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

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

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

@media (min-width: 1440px) {
  :root {
    --container-wide: 1440px;
  }

  .home-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.52fr);
  }

  .research-panel {
    justify-self: end;
    width: min(100%, 560px);
  }

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

@media (max-width: 420px) {
  .nav {
    gap: var(--space-2);
  }

  .brand {
    gap: var(--space-2);
    max-width: calc(100vw - 5.4rem);
  }

  .brand-text {
    max-width: 10.8rem;
    font-size: 0.86rem;
  }

  .brand-text span {
    display: none;
  }

  .page-title {
    font-size: clamp(2.45rem, 15vw, 4rem);
  }

  .filter-shell {
    margin-bottom: var(--space-5);
  }
}

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

  .brand {
    max-width: calc(100vw - 4.8rem);
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .brand-text {
    max-width: 9.3rem;
    font-size: 0.8rem;
  }

  .home-hero h1 {
    font-size: clamp(2.35rem, 16vw, 3.6rem);
  }

  .eyebrow,
  .page-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .eyebrow::before,
  .page-eyebrow::before {
    width: 18px;
  }

  .card-meta {
    gap: 0.35rem;
  }

  .badge,
  .status-chip,
  .category-chip {
    font-size: 0.7rem;
  }

  .social-link,
  .tool-rail-list li,
  .panel-topline {
    align-items: flex-start;
    display: grid;
  }
}

@media (hover: none) {
  .interactive-card:hover,
  .button-primary:hover,
  .button-secondary:hover,
  .chip-button:hover,
  .preview-button:hover {
    transform: none;
  }
}