/* Mobile first. Breakpoints: 600 / 768 / 1024 / 1440 */

@media (max-width: 899.98px) {
  .nav-toggle { display: inline-block; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    padding: 8px var(--gutter) 20px;
    background: rgba(7, 7, 12, .97);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 1.05rem;
  }
  .site-nav a::after { display: none; }
  .site-nav li:last-child a { border-bottom: 0; }

  .hero .actions .btn { flex: 1 1 auto; }
  .stat span { letter-spacing: .02em; }
}

@media (max-width: 380px) {
  .brand__name { display: none; }
  .stat { padding: 12px 10px; }
  .stat span { font-size: .62rem; letter-spacing: .02em; }
}

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager { grid-template-columns: 1fr 1fr; }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works__group:first-child { grid-column: 1 / -1; }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene { height: 440px; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .hero { padding: 64px 0 72px; }
  .section { padding: 96px 0; }
  .note__inner { grid-template-columns: auto 1fr; align-items: start; gap: 24px; padding: 28px 32px; }

  .feature { padding: 18px 18px 30px; }
  .experiment { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 36px; gap: 40px; }
  .android { grid-template-columns: auto 1fr; gap: 56px; padding: 48px; }

  .about { grid-template-columns: 1.1fr 1fr; column-gap: 48px; align-items: start; }
  .about .section__head { grid-column: 1 / -1; }

  .contact-grid { grid-template-columns: 1.3fr 1fr; }

  .bridge { flex-direction: row; align-items: center; }
  .bridge__node { flex: 1; }
  .bridge__link { flex: 0 0 64px; width: auto; height: 2px; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
  .bridge__link::before { top: -4px; left: -2px; border: 5px solid transparent; border-right: 6px solid var(--violet); border-left: 0; }
  .bridge__link::after { top: -4px; bottom: auto; left: auto; right: -2px; border: 5px solid transparent; border-left: 6px solid var(--cyan); border-right: 0; }

  .case__hero--diagram { padding: 40px; }
}

@media (min-width: 1024px) {
  .hero { padding: 40px 0 72px; min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; }
  .hero > .wrap { width: 100%; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; }
  .scene { height: 560px; margin-top: 0; }

  .features { gap: 36px; }
  .feature { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 44px; padding: 20px 20px 20px 20px; }
  .feature__body { padding: 0 16px 0 0; }
  .feature:nth-child(even) .feature__media { order: 2; }
  .feature:nth-child(even) .feature__body { padding: 0 0 0 16px; }

  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .labs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skills { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .case__layout { grid-template-columns: 270px minmax(0, 1fr); gap: 64px; align-items: start; }
  .case__aside { position: sticky; top: calc(var(--header-h) + 24px); }
  .case__aside .facts > div { grid-template-columns: 1fr; gap: 8px; }

  .android { gap: 80px; padding: 56px 72px; }
}

@media (min-width: 1440px) {
  :root { --max: 1240px; }
}