/* =====================================================
   SITESTAR SECURITY SERVICES LIMITED
   Responsive Stylesheet - Ultra-wide, Laptop, Tablet, Mobile
   ===================================================== */

/* -----------------------------------------------------
   ULTRA WIDE (1600px+)
   ----------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container-width: 1440px; }

  .hero h1 { font-size: clamp(3.2rem, 4.6vw, 5rem); }
}

/* -----------------------------------------------------
   LAPTOP / SMALL DESKTOP (max-width: 1200px)
   ----------------------------------------------------- */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: 1 / -1; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------
   TABLET (max-width: 960px)
   ----------------------------------------------------- */
@media (max-width: 960px) {
  :root { --header-height: 74px; }

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

  .hero { min-height: 100vh; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }

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

  .workflow-steps { grid-template-columns: repeat(2, 1fr); }
  .workflow-step::after { display: none; }

  .timeline::before { left: 20px; }

  .timeline-item,
  .timeline-item:nth-child(even) {
    width: 100%;
    left: 0;
    padding: 0 0 var(--space-lg) 3rem;
  }

  .timeline-item__dot,
  .timeline-item:nth-child(even) .timeline-item__dot {
    left: 12px;
    right: auto;
  }

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

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

  .newsletter { justify-content: center; text-align: center; }
  .newsletter-form { justify-content: center; }

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

}

/* -----------------------------------------------------
   MOBILE (max-width: 640px)
   ----------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 4rem;
  }

  .container { padding-inline: var(--space-sm); }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .navbar__brand-text { display: none; }

  .hero__content { padding-block: var(--space-xl) var(--space-lg); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }

  .section { padding-block: var(--space-xl); }

  .cta-banner__actions { flex-direction: column; }
  .cta-banner__actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .carousel-arrow { display: none; }

  .testimonial-slide { padding: 0; }
  .testimonial-card { padding: var(--space-lg) var(--space-md); }

  .workflow-steps { grid-template-columns: 1fr; }

  .float-stack { right: var(--space-sm); bottom: var(--space-sm); }
  .float-btn { width: 50px; height: 50px; }
  .float-btn svg { width: 22px; height: 22px; }

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

  .pricing-card.is-featured { transform: none; }

  .topbar .container { justify-content: center; text-align: center; }
  .topbar__emergency-wrap { order: -1; }

  .page-hero { padding: calc(var(--space-xl) + 1.5rem) 0 var(--space-xl); }
}

/* -----------------------------------------------------
   VERY SMALL MOBILE (max-width: 400px)
   ----------------------------------------------------- */
@media (max-width: 400px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .stat__number { font-size: 1.5rem; }
  .logo-strip { justify-content: center; }
}

/* -----------------------------------------------------
   PRINT
   ----------------------------------------------------- */
@media print {
  .site-header,
  .float-stack,
  .cookie-banner,
  .scroll-progress,
  .preloader,
  .toast-container { display: none !important; }
}