/* =========================================================================
   RESPONSIVE STYLESHEET
   Base design: 1920px screen / 1750px container
   ========================================================================= */

/* -------------------------------------------------------------------------
   ≤1750px  — large desktops (container hits edge padding)
------------------------------------------------------------------------- */
@media (max-width:1750px){
  :root{ --container-pad:32px; }
}

/* -------------------------------------------------------------------------
   ≤1440px — laptops
------------------------------------------------------------------------- */
@media (max-width:1440px){
  .main-nav__list{ gap:26px; }
  .services-grid{ gap:18px; }
  .why-features{ gap:18px; }
  .hero__strip{ gap:0; }
}

/* -------------------------------------------------------------------------
   ≤1199px — small laptops / large tablets
------------------------------------------------------------------------- */
@media (max-width:1199px){
  .section{ padding:80px 0; }
  .section--lg{ padding:100px 0; }

  .hero .container{ gap:36px; }
  .hero__title{ font-size:38px; }

  .services-grid{ grid-template-columns:repeat(3,1fr); }
  .about-block{ grid-template-columns:1fr; gap:60px; }
  .about-media{ max-width:560px; margin-inline:auto; }

  .why-strip__inner{ grid-template-columns:1fr; gap:36px; }
  .why-features{ grid-template-columns:repeat(3,1fr); gap:24px 18px; }
  .why-strip::after{ display:none; }

  .projects-grid{ grid-template-columns:repeat(3,1fr); }
  .projects-grid--3{ grid-template-columns:repeat(2,1fr); }
  .cert-grid{ grid-template-columns:repeat(3,1fr); }
  .clients-grid{ grid-template-columns:repeat(4,1fr); }

  .footer-grid{ grid-template-columns:1fr 1fr 1fr; row-gap:44px; }
  .footer-brand{ grid-column:1/-1; max-width:520px; }

  .contact-grid{ grid-template-columns:1fr; }
  .two-col{ grid-template-columns:1fr; gap:40px; }
  .two-col.reverse{ direction:ltr; }
  .two-col.reverse .col-media{ order:-1; }

  .process-grid{ grid-template-columns:repeat(2,1fr); gap:50px 20px; }
  .process-step::before{ display:none; }
}

/* -------------------------------------------------------------------------
   ≤991px — tablets
------------------------------------------------------------------------- */
@media (max-width:991px){
  :root{ --container-pad:24px; }

  /* header / nav → off-canvas */
  .topbar__right .topbar__item.hide-tablet{ display:none; }
  .header__phone{ display:none; }
  .nav-toggle{ display:flex; }

  .main-nav{
    position:fixed; top:0; right:-100%; bottom:0;
    width:82%; max-width:360px;
    background:var(--color-white);
    box-shadow:-10px 0 40px rgba(0,0,0,.18);
    padding:100px 28px 40px;
    overflow-y:auto;
    transition:right .35s ease;
    z-index:600;
  }
  .main-nav.is-open{ right:0; }
  .main-nav__list{ flex-direction:column; align-items:flex-start; gap:4px; width:100%; }
  .main-nav__item{ width:100%; border-bottom:1px solid var(--color-gray-200); }
  .main-nav__link{ width:100%; justify-content:space-between; padding:16px 4px; }
  .main-nav__item:hover .main-nav__link .icon{ transform:none; }
  .main-nav__item.is-open .main-nav__link .icon{ transform:rotate(180deg); }
  .dropdown{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border-radius:0; padding:0 0 10px 14px;
    min-width:0; display:none; background:transparent;
  }
  .main-nav__item.is-open .dropdown{ display:block; }
  .dropdown__link{ padding:10px 14px; }
  .nav-overlay{
    position:fixed; inset:0; background:rgba(7,20,40,.55);
    opacity:0; visibility:hidden; transition:var(--transition); z-index:550;
  }
  .nav-overlay.is-visible{ opacity:1; visibility:visible; }

  .hero .container{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:520px; margin-inline:auto; width:100%; }
  .hero__content{ max-width:100%; }
  .hero__strip{ grid-template-columns:repeat(2,1fr); display:grid; gap:20px; }
  .hero__strip .stat{ padding-right:0; }

  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid--3{ grid-template-columns:1fr 1fr; }
  .checklist{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .stat-row .stat:nth-child(2){ border-right:none; }
  .stat-row .stat{ border-bottom:1px solid var(--color-gray-200); }

  .projects-grid{ grid-template-columns:repeat(2,1fr); }
  .cert-grid{ grid-template-columns:repeat(2,1fr); }
  .clients-grid{ grid-template-columns:repeat(3,1fr); }

  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }

  .cta-band .container{ flex-direction:column; text-align:center; }
  .cta-band__left{ flex-direction:column; text-align:center; }

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

/* -------------------------------------------------------------------------
   ≤767px — large phones
------------------------------------------------------------------------- */
@media (max-width:767px){
  .section{ padding:60px 0; }
  .section--lg{ padding:70px 0; }
  .section-head{ margin-bottom:38px; }

  .topbar .container{ flex-wrap:wrap; gap:8px 16px; justify-content:center; text-align:center; }
  .topbar__right{ gap:16px; flex-wrap:wrap; justify-content:center; }
  .topbar__emergency{ display:none; }

  .brand__logo{ width:42px; height:42px; }
  .brand__text .name{ font-size:17px; }
  .brand__text .tag{ font-size:9px; }

  .hero{ padding:40px 0 50px; }
  .hero__title{ font-size:30px; }
  .hero__actions .btn{ width:100%; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__badge{ position:static; margin-top:16px; }
  .hero__strip{ grid-template-columns:1fr 1fr; }

  .page-banner{ padding:44px 0 40px; }

  .services-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .services-grid--3{ grid-template-columns:1fr; }
  .service-card{ padding:24px 14px; }

  .about-media__inset{ display:none; }
  .about-media__badge{ position:static; display:inline-flex; align-items:center; gap:14px; margin-top:16px; border-radius:var(--radius-md); }

  .why-features{ grid-template-columns:1fr 1fr; }

  .projects-grid,.projects-grid--3{ grid-template-columns:1fr 1fr; }
  .cert-grid{ grid-template-columns:1fr 1fr; }
  .clients-grid{ grid-template-columns:1fr 1fr; }

  .footer-top{ padding:56px 0 30px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 20px; }

  .process-grid{ grid-template-columns:1fr; gap:36px; }

  .contact-info-item{ gap:12px; }
}

/* -------------------------------------------------------------------------
   ≤480px — phones
------------------------------------------------------------------------- */
@media (max-width:480px){
  :root{ --container-pad:18px; }

  .btn{ padding:15px 24px; font-size:14px; }

  .hero__strip{ grid-template-columns:1fr 1fr; gap:16px; }
  .hero__strip .stat .num{ font-size:24px; }

  .services-grid{ grid-template-columns:1fr 1fr; }
  .service-card__title{ font-size:14px; }

  .why-features{ grid-template-columns:1fr; }
  .projects-grid,.projects-grid--3{ grid-template-columns:1fr; }
  .cert-grid{ grid-template-columns:1fr; }
  .clients-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom .container{ flex-direction:column; text-align:center; gap:10px; }
  .footer-bottom-links{ justify-content:center; flex-wrap:wrap; }

  .app-list{ grid-template-columns:1fr; }
  .mv-grid{ grid-template-columns:1fr; }

  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
  .whatsapp-float{ left:16px; bottom:16px; width:48px; height:48px; }
}