/* Mobile-first responsive adjustments — site is mobile-priority. */

/* Tablet / smaller desktop */
@media (max-width: 1024px) {
  nav { padding: 1rem 1.5rem; }
  nav.solid { padding: .75rem 1.5rem; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .btn-track span { display: none; }
  .btn-track { padding: .55rem .7rem; }
  .btn-track svg { width: 16px; height: 16px; }

  .h-content { grid-template-columns: 1fr; padding: 0 1.5rem 4rem; gap: 2rem; }
  .h-right { align-items: flex-start; flex-direction: column; gap: 1.4rem; }
  .h-ctas { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }
  .h-stats { gap: 1.8rem; flex-wrap: wrap; }

  .vacuum-vid { padding: 4.5rem 1.5rem; }
  .vv-head { margin-bottom: 2.4rem; }
  .vv-play { width: 88px; height: 88px; }
  .vv-play svg { width: 32px; height: 32px; margin-left: 5px; }
  .vv-card-foot { padding: 1.1rem 1.4rem; }

  .about { grid-template-columns: 1fr; }
  .ab-img { height: 60vw; max-height: 380px; }
  .ab-img-ov { background: linear-gradient(to bottom, transparent 60%, var(--bg) 100%); }
  .ab-cont { padding: 3.5rem 1.5rem; }

  .nums { grid-template-columns: 1fr 1fr; }
  .num-item { padding: 2.5rem 1.2rem; }
  .num-item:nth-child(odd) { border-right: 1px solid rgba(249, 246, 241, .06); }
  .num-item:nth-child(2) { border-right: none; }
  .num-item:nth-child(1), .num-item:nth-child(2) { border-bottom: 1px solid rgba(249, 246, 241, .06); }
  .n-big { font-size: 3rem; }

  .cat { padding: 4.5rem 1.5rem; }
  .pgrid { grid-template-columns: 1fr 1fr; }

  .vsec { padding: 4.5rem 1.5rem; }
  .v-top { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; }
  .vgrid { grid-template-columns: 1fr; }
  .vp-side { flex-direction: row; }
  .vp-sm { flex: 1; aspect-ratio: 3 / 2; }

  .proc { padding: 4.5rem 1.5rem; }
  .proc-grid { grid-template-columns: 1fr 1fr; }
  .pst:nth-child(2) { border-right: none; }
  .pst:nth-child(2) .pst-arr { display: none; }
  .pst:nth-child(1), .pst:nth-child(2) { border-bottom: 1px solid var(--border); }
  .pst:nth-child(1) .pst-arr, .pst:nth-child(3) .pst-arr {
    top: auto; bottom: -.65rem; right: 50%; transform: rotate(135deg);
  }

  .comp { padding: 4.5rem 1.5rem; }
  .ctbl { font-size: .9em; }
  .cc { padding: .85rem 1rem; font-size: .73rem; }

  .revs { padding: 4.5rem 1.5rem; }
  .rev-grid { grid-template-columns: 1fr; gap: 1rem; }

  .contact-s { grid-template-columns: 1fr; }
  .cl, .cr { padding: 4.5rem 1.5rem; }

  footer { grid-template-columns: 1fr 1fr; padding: 3rem 1.5rem; gap: 2rem; }
  .fbot { padding: 1rem 1.5rem; flex-direction: column; gap: .5rem; text-align: center; }
}

/* Phones */
@media (max-width: 640px) {
  .pgrid { grid-template-columns: 1fr; }
  .m-specs { grid-template-columns: 1fr 1fr; }
  .crow-f { grid-template-columns: 1fr; }

  .h-h1 { font-size: clamp(2.5rem, 11vw, 4rem); line-height: .95; }
  .h-desc { font-size: .9rem; }
  .h-stats { gap: 1.2rem; }
  .hst-n { font-size: 2rem; }
  .btn-gold { padding: .95rem 1.8rem; font-size: .73rem; }

  .s-h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  .ab-cont { padding: 3rem 1.2rem; }
  .ab-feats { gap: .5rem; }

  .vacuum-vid { padding: 4rem 1.2rem; }
  .vv-head { margin-bottom: 1.8rem; }
  .vv-desc { font-size: .92rem; }
  .vv-play { width: 70px; height: 70px; }
  .vv-play svg { width: 26px; height: 26px; margin-left: 4px; }
  .vv-play::before { inset: -8px; }
  .vv-play::after { inset: -16px; }
  .vv-card-foot { padding: .9rem 1.1rem; }
  .vv-tag { font-size: .6rem; letter-spacing: .2em; }
  .vv-tag::before { width: 16px; }
  .vv-runtime { font-size: .52rem; }
  .vv-note { font-size: .78rem; margin-top: 1.4rem; }
  .vlb { padding: 1rem; }
  .vlb-close { top: -3rem; right: 0; width: 38px; height: 38px; }

  .cat { padding: 4rem 1.2rem; }
  .cat-top { gap: 1rem; margin-bottom: 2rem; }
  .cat-filt { width: 100%; }
  .fb { flex: 1; padding: .6rem .8rem; font-size: .64rem; }
  .pc-info { padding: 1.2rem 1.4rem 1.5rem; }
  .pc-name { font-size: 1.2rem; }
  .cat-note { padding: 1.3rem 1.4rem; font-size: .8rem; }

  .vsec { padding: 4rem 1.2rem; }
  .vp-side { flex-direction: column; }

  .proc { padding: 4rem 1.2rem; }
  .proc-grid { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .pst { border-right: none; border-bottom: 1px solid var(--border); }
  .pst:last-child { border-bottom: none; }
  .pst-arr { display: none !important; }

  .comp { padding: 4rem 1.2rem; }
  .crow { grid-template-columns: 1.5fr 1fr 1fr; }
  .cc { padding: .75rem .8rem; font-size: .7rem; }
  .crow.hdr .cc { font-size: .55rem; }

  .revs { padding: 4rem 1.2rem; }
  .cl, .cr { padding: 4rem 1.2rem; }
  .cl-h2 { font-size: 1.9rem; }

  footer { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.2rem 1rem; }
  .fbot { padding: 1rem 1.2rem; font-size: .65rem; }

  /* Tracking-modal mobile */
  .ot-head, .ot-body { padding-left: 1.3rem; padding-right: 1.3rem; }
  .ot-search { flex-direction: column; }
  .ot-go { width: 100%; }
  .ot-card-head { padding: 1.1rem 1.2rem; }
  .ot-card-product { padding: 1rem 1.2rem; }
  .ot-timeline { padding: 1.2rem; }
  .ot-17 { margin: 0 1.2rem 1.2rem; }

  /* Modal on mobile */
  .mov { padding: 0; }
  .mbox { max-height: 100vh; height: 100vh; max-width: 100%; }
  .m-body, .om-head, .om-body { padding-left: 1.3rem; padding-right: 1.3rem; }
  .m-gal-main { aspect-ratio: 1 / 1; }
  .m-gal-arr { width: 36px; height: 36px; }
  .om-title { font-size: 1.55rem; }

  /* Floating buttons — smaller, closer */
  .fab-stack { right: .85rem; bottom: .85rem; gap: .6rem; }
  .fab { width: 50px; height: 50px; }
  .fab svg { width: 24px; height: 24px; }
  .fab-tip { display: none; }

  .legal-page { padding: 5rem 1.2rem 3rem; }
}
