/* ============================================================
   CYBERSHIELD SECURITY — Responsive Stylesheet
   Mobile-First Breakpoints:
     sm:  480px
     md:  768px
     lg:  1024px
     xl:  1280px
   ============================================================ */

/* ============================================================
   BASE (mobile-first — applies to all widths unless overridden)
   ============================================================ */

/* Navbar: hide links, show hamburger on small screens */
.nav-links { display: none; }
.hamburger { display: flex; }
.nav-cta   { display: none; }

/* Mobile nav open state */
.nav-links.nav-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: rgba(2, 6, 23, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--container-pad) var(--space-6);
  gap: var(--space-1);
  z-index: 999;
  animation: slideDown 0.25s ease-out forwards;
}

.nav-links.nav-open .nav-link {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-base);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--color-border);
}

.nav-links.nav-open .nav-link:last-child {
  border-bottom: none;
}

.nav-links.nav-open .nav-link::after { display: none; }

/* Mobile CTA inside nav */
.nav-links.nav-open::after {
  content: '';
  display: none;
}

/* ============================================================
   Hero: single column on mobile
   ============================================================ */
.hero-container {
  grid-template-columns: 1fr;
  text-align: center;
  gap: var(--space-10);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.hero-badge { margin-inline: auto; }
.hero-subtitle { margin-inline: auto; }

.hero-actions {
  justify-content: center;
}

.hero-stats {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-stat-divider { display: none; }

.hero-visual {
  order: -1; /* image on top for mobile */
}

.hero-img { max-width: 100%; }

.float-badge--tl { left: 0; top: 8%; font-size: 0.65rem; padding: 5px 10px; }
.float-badge--tr { right: 0; top: 8%; font-size: 0.65rem; padding: 5px 10px; }
.float-badge--bl { left: 0; bottom: 8%; font-size: 0.65rem; padding: 5px 10px; }
.float-badge--br { right: 0; bottom: 8%; font-size: 0.65rem; padding: 5px 10px; }

/* ============================================================
   About: single column on mobile
   ============================================================ */
.about-grid { grid-template-columns: 1fr; }

.about-badge {
  right: var(--space-4);
  bottom: -1.2rem;
  padding: var(--space-3) var(--space-4);
}

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

/* ============================================================
   Services: single column on mobile
   ============================================================ */
.services-grid      { grid-template-columns: 1fr; }
.features-grid      { grid-template-columns: 1fr; }
.counters-grid      { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid  { grid-template-columns: 1fr; }
.pricing-grid       { grid-template-columns: 1fr; }

/* Reset featured pricing offset on mobile */
.pricing-card--featured { transform: none; }
.pricing-card--featured:hover { transform: translateY(-5px); }

/* ============================================================
   Process: stack vertically on mobile
   ============================================================ */
.process-timeline {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.process-step {
  width: 100%;
}

.process-connector {
  width: 2px;
  height: 40px;
  margin-top: 0;
  align-self: auto;
}

.process-connector::after {
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-accent), rgba(0,229,255,0.3));
}

/* Hide arrow on vertical connector */
.process-connector::before {
  display: none;
}

/* ============================================================
   FAQ: single column on mobile
   ============================================================ */
.faq-layout {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.faq-header { position: static; }

/* ============================================================
   Contact: single column on mobile
   ============================================================ */
.contact-layout { grid-template-columns: 1fr; }
.form-row       { grid-template-columns: 1fr; }

/* ============================================================
   Footer: single column on mobile
   ============================================================ */
.footer-grid {
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.footer-bottom .container {
  flex-direction: column;
  text-align: center;
  gap: var(--space-4);
}

.footer-legal { justify-content: center; }

/* Back to top: smaller on mobile */
.back-to-top {
  bottom: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
}

/* ============================================================
   sm: 480px — small phones / large phones
   ============================================================ */
@media (min-width: 480px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .float-badge { font-size: var(--fs-xs); padding: var(--space-2) var(--space-3); }
  .float-badge--tl { left: -4%; }
  .float-badge--tr { right: -4%; }
  .float-badge--bl { left: -4%; }
  .float-badge--br { right: -4%; }
}

/* ============================================================
   md: 768px — tablets
   ============================================================ */
@media (min-width: 768px) {
  /* Show nav CTA on tablet+ */
  .nav-cta { display: inline-flex; }

  /* Hero back to two-column at tablet */
  .hero-container {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .hero-badge, .hero-subtitle { margin-inline: 0; }
  .hero-actions { justify-content: flex-start; }
  .hero-stats   { justify-content: flex-start; }
  .hero-stat-divider { display: block; }
  .hero-visual  { order: 0; }

  /* About back to two-column */
  .about-grid { grid-template-columns: 1fr 1fr; }

  /* Process: restore horizontal row on tablet+ */
  .process-timeline {
    flex-direction: row;
    align-items: flex-start;
  }

  .process-step {
    width: auto;
  }

  .process-connector {
    width: 36px;
    height: 2px;
    margin-top: 2.5rem;
    align-self: center;
  }

  .process-connector::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), rgba(0,229,255,0.3));
  }

  .process-connector::before {
    display: block;
  }

  /* 3rd connector hidden on 2-col layout, 4th wraps */
  .process-step:nth-child(7) { grid-column: 1; }

  /* FAQ stays stacked at tablet, 2-col at lg */
  .contact-layout { grid-template-columns: 1.2fr 1fr; }
  .form-row       { grid-template-columns: 1fr 1fr; }

  /* Footer 2-col at tablet */
  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-bottom .container {
    flex-direction: row;
    text-align: left;
  }

  .footer-legal { justify-content: flex-end; }

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

  /* Reset featured pricing */
  .pricing-card--featured {
    transform: translateY(-8px);
  }
  .pricing-card--featured:hover {
    transform: translateY(-13px);
  }
}

/* ============================================================
   lg: 1024px — desktop / laptops
   ============================================================ */
@media (min-width: 1024px) {
  /* Show full nav links */
  .nav-links {
    display: flex;
    position: static;
    background: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
    flex-direction: row;
    animation: none;
  }

  .hamburger { display: none; }

  /* Services & features 3-col */
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }

  /* Counters 4-col */
  .counters-grid { grid-template-columns: repeat(4, 1fr); }

  /* Full 4-step process timeline — horizontal, already set by md override */
  /* No additional process overrides needed at lg */

  /* Testimonials 3-col */
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); }

  /* FAQ 2-col */
  .faq-layout { grid-template-columns: 1fr 1.8fr; }
  .faq-header { position: sticky; top: calc(var(--nav-height) + 2rem); }

  /* Footer 4-col */
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.6fr; }
}

/* ============================================================
   xl: 1280px — wide screens
   ============================================================ */
@media (min-width: 1280px) {
  .hero-title {
    font-size: var(--fs-6xl);
  }

  .float-badge--tl { left: -8%; }
  .float-badge--tr { right: -8%; }
  .float-badge--bl { left: -8%; }
  .float-badge--br { right: -8%; }
}

/* ============================================================
   Reduced Motion Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .float-badge { animation: none; }
  .scroll-indicator { animation: none; }
}