@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: 96px;
    left: 14px;
    right: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(7,7,11,.97);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: .25s ease;
  }
  .main-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .main-nav > a { padding: 13px 8px; }
  .main-nav .nav-cta { text-align: center; margin-top: 6px; }

  .hero-grid,
  .intro,
  .values,
  .contact {
    grid-template-columns: 1fr;
  }
  .hero-grid { gap: 30px; }
  .hero-visual { min-height: 470px; }
  .intro, .values, .contact { gap: 48px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-large { min-height: 470px; grid-row: auto; }
  .portfolio-card { min-height: 390px; }
  .contrast { grid-template-columns: 1fr; }
  .contrast-arrow { transform: rotate(90deg); margin: 0 auto; }
}

@media (max-width: 640px) {
  .site-header {
    width: calc(100% - 18px);
    top: 9px;
    height: 66px;
  }
  .logo img { width: 112px; }
  .hero { padding: 118px 14px 58px; }
  .section { width: min(calc(100% - 28px), var(--max)); padding: 88px 0; }
  h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-proof { display: grid; }
  .hero-visual { min-height: 390px; }
  .ring-one { width: 260px; height: 260px; }
  .ring-two { width: 150px; height: 150px; }
  .hero-card { min-height: 330px; padding: 22px; }
  .hero-card > img { width: 210px; }
  .floating-chip { font-size: .7rem; padding: 10px 12px; }
  .chip-one { left: -4px; bottom: 40px; }
  .chip-two { right: -4px; top: 60px; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 300px; }
  .contrast-card { min-height: 350px; padding: 26px; }
  .portfolio-large, .portfolio-card { min-height: 320px; }
  .lead-form { padding: 20px; }

  .site-footer {
    grid-template-columns: 1fr;
    width: calc(100% - 28px);
  }
  .footer-links { flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; }
  .floating-whatsapp {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 16px;
  }
}