/* ============================================================================
   NetPro BD — responsive.css
   Breakpoints: 1280 · 1080 · 900 · 760 · 620 · 420
   -------------------------------------------------------------------------- */

/* --------------------------- LARGE DESKTOP -------------------------------- */
@media (max-width: 1280px) {
  :root { --container: 1120px; }
  .services-grid { gap: 18px; }
}

/* --------------------------- LAPTOP --------------------------------------- */
@media (max-width: 1080px) {
  :root { --container: 960px; --nav-h: 72px; }

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

  .hero__inner { grid-template-columns: 1fr; gap: 52px; }
  .hero__content { text-align: center; }
  .hero__desc { margin-inline: auto; }
  .hero__cta, .hero__trust { justify-content: center; }
  .hero__badge { margin-inline: auto; }
  .hero__visual { order: 2; }

  .about { grid-template-columns: 1fr; gap: 56px; }
  .about__media { max-width: 560px; margin-inline: auto; width: 100%; }

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

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

  .nav__link { padding: 10px 10px; font-size: .88rem; }
}

/* --------------------------- TABLET / NAV COLLAPSE ------------------------- */
@media (max-width: 900px) {
  .noc__grid { grid-template-columns: 1fr; }
  .about__visual { margin: -40px 14px 0 4px; }

  .hamburger { display: flex; }
  .lang-switch--compact { display: inline-flex; }
  .navbar__actions .btn { display: none; }

  /* Off-canvas drawer */
  .nav {
    position: fixed;
    top: 0; right: 0; z-index: 999;
    width: min(320px, 86vw);
    height: 100dvh;
    padding: 22px 22px 30px;
    background: var(--drawer);
    border-left: 1px solid var(--line-strong);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
    transform: translateX(105%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }

  .nav__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .nav__close {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    background: var(--tint-b);
    transition: var(--t);
  }
  .nav__close:hover { color: var(--on-brand); background: var(--grad-brand); border-color: transparent; transform: rotate(90deg); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link {
    padding: 14px 16px;
    font-size: 1.02rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    animation: none;
  }
  .nav__link::after { display: none; }
  .nav__link:hover, .nav__link.is-active { background: rgba(34, 211, 238, .09); border-color: rgba(34, 211, 238, .22); }
  .nav.is-open .nav__link { animation: fadeSlideUp .5s var(--ease) both; }
  .nav.is-open li:nth-child(1) .nav__link { animation-delay: .06s; }
  .nav.is-open li:nth-child(2) .nav__link { animation-delay: .11s; }
  .nav.is-open li:nth-child(3) .nav__link { animation-delay: .16s; }
  .nav.is-open li:nth-child(4) .nav__link { animation-delay: .21s; }
  .nav.is-open li:nth-child(5) .nav__link { animation-delay: .26s; }
  .nav.is-open li:nth-child(6) .nav__link { animation-delay: .31s; }
  .nav.is-open li:nth-child(7) .nav__link { animation-delay: .36s; }
  .nav.is-open li:nth-child(8) .nav__link { animation-delay: .41s; }

  .topbar__item--static { display: none; }
  .topbar__social { display: none; }

  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .stat:nth-child(2)::before { display: none; }

  .lang-fab { display: flex; }
  .back-top { bottom: 22px; right: 18px; }
  .wa-float { left: 18px; bottom: 22px; }

  .timeline__item { grid-template-columns: 56px 1fr; gap: 14px; }
  .timeline__line { left: 27px; }
  .timeline__dot { width: 44px; height: 44px; margin-left: 6px; font-size: .82rem; }
}

/* --------------------------- SMALL TABLET --------------------------------- */
@media (max-width: 760px) {
  :root { --section-y: 62px; }

  .services-grid, .why-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .hero { padding-bottom: 120px; }

  .float-chip--a { left: 0; top: -18px; }
  .float-chip--b { right: 0; bottom: -14px; }

  .about__exp { right: 8px; bottom: -26px; padding: 13px 18px; }
  .about__exp-num { font-size: 1.6rem; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { justify-content: center; text-align: center; }

  .cta-banner__content { padding: 36px 22px; }
}

/* --------------------------- PHONE ---------------------------------------- */
@media (max-width: 620px) {
  .topbar { display: none; }
  .stats-wrap { margin-top: -46px; }
  .stats__grid { grid-template-columns: 1fr; gap: 0; }
  .stat { padding: 16px 10px; }
  .stat + .stat::before {
    left: 20%; right: 20%; top: 0; bottom: auto;
    width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  }

  .portfolio-grid { grid-template-columns: 1fr; }
  .filters { gap: 8px; }
  .filter { padding: 8px 15px; font-size: .79rem; }

  .netpanel { padding: 14px; }
  .netpanel__screen { height: 180px; }
  .netpanel__term { font-size: .66rem; height: 122px; padding: 10px 12px; }

  .hero__cta .btn { width: 100%; }
  .hero__trust { gap: 10px; }
  .hero__trust li { font-size: .8rem; }

  .slider__controls { gap: 12px; }
  .accordion__head { padding: 17px 18px; font-size: .94rem; gap: 12px; }
  .accordion__panel p { padding: 0 18px 18px; }

  .wa-float { width: 50px; height: 50px; }
  .wa-float .icon { width: 23px; height: 23px; margin-left: 13px; }
  .wa-float:hover { width: 50px; }
  .wa-float__tip { display: none; }

  .back-top { width: 44px; height: 44px; }
  .lang-fab { bottom: 84px; right: 14px; }
  .cursor-glow { display: none; }
}

/* --------------------------- TINY PHONE ----------------------------------- */
@media (max-width: 420px) {
  .brand__text { font-size: 1.12rem; }
  .brand__mark { width: 38px; height: 38px; }
  .btn { padding: 13px 22px; font-size: .88rem; }
  .section-tag { font-size: .76rem; padding: 6px 13px; }
  .netpanel__stats { grid-template-columns: 1fr; }
}

/* --------------------------- TOUCH DEVICES -------------------------------- */
/* Phones have weak GPUs: blur, blend and perpetual animations are the things
   that make scrolling and the theme switch stutter, so they are traded away
   for frame rate here. Desktop keeps every effect. */
@media (hover: none) {
  .tilt { transform: none !important; }
  [data-spotlight]::before { display: none; }

  /* no full-viewport blur / blend on touch */
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  body::after { display: none; }                       /* grain blend layer */
  .navbar { background: color-mix(in srgb, var(--bg) 94%, transparent); }
  .topbar { background: var(--topbar); }

  /* perpetual animations off (static equivalents remain) */
  .orb, .glow-orbit::after, .netpanel__scan { animation: none !important; }

  /* snappier morph: less time = less time to drop frames */
  html.is-touch { --theme-dur: .45s; }
}

/* Weak desktop CPUs/GPUs get the same diet, detected at boot (is-lowpow). */
html.is-lowpow * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.is-lowpow body::after { display: none; }
html.is-lowpow .orb,
html.is-lowpow .glow-orbit::after,
html.is-lowpow .netpanel__scan,
html.is-lowpow .cursor-glow { animation: none !important; }
html.is-lowpow .cursor-glow { display: none; }
html.is-lowpow { --theme-dur: .45s; }

/* Cheaper raster: single tight shadows and no animated clip-paths */
html.is-lowpow {
  --sh-1: 0 1px 3px var(--shadow-1);
  --sh-2: 0 4px 14px var(--shadow-2);
  --sh-3: 0 8px 22px var(--shadow-3);
}
html.is-lowpow [data-reveal="mask"] .mask-box { clip-path: none !important; }
html.is-lowpow .cov-radar__sweep { animation: none; }

/* ---- pass 5: zero per-frame repaint on weak GPUs ------------------------
   Everything below animates background-position / box-shadow / filter,
   i.e. forces PAINT every frame. On the low-power tier they go static. */
html.is-lowpow .hero__grid,
html.is-lowpow .cta-banner__bg span,
html.is-lowpow .pulse-dot,
html.is-lowpow .brand__mark,
html.is-lowpow .float-chip,
html.is-lowpow .hero__scroll i,
html.is-lowpow .rack__leds i,
html.is-lowpow .rack__bars i,
html.is-lowpow .glow-orbit::before,
html.is-lowpow .wa-float::before,
html.is-lowpow .wa-float::after { animation: none !important; }

/* gradient headline: keep the one-shot word reveal, drop the endless shift */
html.is-lowpow .hero__title-hl { animation: none; }
html.is-lowpow .js .hero__title-hl .word > span,
html.is-lowpow .hero__title-hl .word > span {
  animation: wordUp .8s var(--ease) forwards;
  box-shadow: none;                 /* 28px blur behind every word = paint storm */
}

/* reveals without blur filters (blur interpolation repaints per element) */
html.is-lowpow [data-reveal],
html.is-lowpow [data-reveal="focus"],
html.is-lowpow .split-words .word > span { filter: none !important; }
html.is-lowpow [data-reveal] { transition-duration: .45s !important; }
  /* no hover on touch: keep the location meta, drop the hover-only bar */
  .project__overlay { display: none; }
}

/* --------------------------- PRINT ---------------------------------------- */
@media print {
  .preloader, .navbar, .topbar, .wa-float, .back-top, .lang-fab,
  .cursor-glow, .scroll-progress, .hero__bg, .marquee-section { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 18px; }
  a { color: #0b3f7a; text-decoration: underline; }
}