/* =========================================================================
   VATSPOWER AND ENERGY — responsive.css
   Breakpoints: 1100 (tablet/laptop) · 860 (tablet) · 640 (mobile)
   ========================================================================= */

/* ------------------------------- ≤1100px -------------------------------- */
@media (max-width:1100px){
  .container{ padding:0 20px; }
  .section{ padding:72px 0; }

  .hero__grid{ grid-template-columns:1fr; gap:48px; }
  .hero__visual{ max-width:460px; }
  .hero__desc{ max-width:none; }

  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__frame{ max-width:420px; margin:0 auto; }

  .products__grid{ grid-template-columns:repeat(3,1fr); }
  .services__grid{ grid-template-columns:repeat(2,1fr); }
  .why__grid{ grid-template-columns:repeat(2,1fr); }

  .footer__top{ grid-template-columns:1.2fr 1fr 1fr; }
  .footer__col--brand{ grid-column:1/-1; }
}

/* ------------------------------- ≤860px --------------------------------- */
@media (max-width:860px){
  :root{ --nav-h:64px; }

  /* Topbar: keep only phone visible */
  .topbar__item--email{ display:none; }
  .topbar__label{ display:none; }
  .topbar__inner{ justify-content:space-between; }

  /* Nav: hide inline links + text button, show hamburger */
  .nav__list{ display:none; }
  .nav__phone{ display:none; }
  .hamburger{ display:flex; }
  .brand__tag{ display:none; }
  .brand__name{ font-size:17px; }

  .cta__box{ flex-direction:column; align-items:flex-start; padding:38px 28px; }
  .cta__actions{ width:100%; }
  .cta__actions .btn{ flex:1; }

  .products__grid{ grid-template-columns:repeat(2,1fr); }
  .services__grid{ grid-template-columns:1fr 1fr; }
  .why__grid{ grid-template-columns:1fr 1fr; }

  .section__head{ max-width:none; }
}

/* ------------------------------- ≤640px --------------------------------- */
@media (max-width:640px){
  .section{ padding:56px 0; }
  .section--tight{ padding:44px 0; }
  .container{ padding:0 18px; }

  .hero{ padding:32px 0 48px; }
  .hero__title{ font-size:32px; }
  .hero__desc{ font-size:15.5px; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .hero__trust{ gap:12px 18px; }
  .hero__card{ padding:20px; }
  .hero__stat b{ font-size:21px; }
  .hero__badge{ font-size:11.5px; padding:8px 12px; }

  .brands__label{ margin-bottom:16px; }
  .marquee__item{ padding:0 22px; font-size:16px; }

  .about__years{ left:12px; bottom:-14px; padding:12px 16px; }
  .about__years b{ font-size:23px; }
  .about__stats{ grid-template-columns:1fr 1fr; row-gap:18px; }

  .products__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .product-card{ padding:18px 15px; }
  .product-card__icon{ width:42px; height:42px; margin-bottom:12px; }
  .product-card__title{ font-size:15px; }
  .product-card__desc{ font-size:12.8px; margin-bottom:12px; }

  .services__grid{ grid-template-columns:1fr; }
  .why__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .why-card{ padding:18px 16px; }

  .cta__title{ font-size:22px; }
  .cta__actions{ flex-direction:column; }

  .faq-item__q{ font-size:15px; padding:18px 2px; gap:10px; }

  /* Footer: exactly two columns per row on mobile */
  .footer{ padding-top:44px; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:28px 16px; padding-bottom:28px; }
  .footer__col--brand{ grid-column:1/-1; }
  .footer__about{ max-width:none; }
  .footer__heading{ font-size:13px; margin-bottom:14px; }
  .footer__list{ font-size:13px; gap:10px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; text-align:left; padding:10px 12px 40px; }

  /* Extra bottom padding so content clears the fixed mobile bar */
  body{ padding-bottom:0; }
}

/* -------------------- Mobile menu panel: fixed height -------------------- */
@media (max-width:860px){
  .mobile-menu{ height:100dvh; }
}

/* ------------------------- Sticky bottom contact bar ---------------------- */
@media (max-width:860px){
  .mobile-bottombar{
    display:flex; align-items:stretch; position:fixed; left:0; right:0; bottom:0; z-index:70;
    height:64px; background:var(--c-surface); border-top:1px solid var(--c-border);
    box-shadow:0 -8px 24px rgba(20,32,26,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobile-bottombar__item{
    flex:0 0 84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:11px; font-weight:600; color:var(--c-ink-soft);
  }
  .mobile-bottombar__item svg{ color:var(--c-primary); }
  .mobile-bottombar__cta{
    flex:1; margin:10px 12px 10px 0; display:flex; align-items:center; justify-content:center;
    background:var(--c-copper); color:#fff; border-radius:var(--radius-pill); font-weight:700; font-size:14px;
    box-shadow:0 10px 20px rgba(192,112,58,.3);
  }
  /* keep last section / footer clear of the fixed bar */
  .footer{ margin-bottom:64px; }
}

@media (min-width:861px){
  .mobile-overlay, .mobile-menu, .mobile-bottombar{ display:none !important; }
}