/* ========================================
   Mobile First — Base styles in style.css
   ======================================== */

/* ========================================
   Tablet (768px+)
   ======================================== */

@media (min-width: 768px) {
  :root {
    --section-padding: 96px;
    --container-padding: 48px;
  }

  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.5rem; }

  .hero-headline {
    font-size: 3.25rem;
  }

  /* Problem Grid */
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Services Grid: 2 columns on tablet */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .counter {
    font-size: 3rem;
  }

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

  .testimonials-grid .testimonial-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
  }

  /* About */
  .about-grid {
    grid-template-columns: auto 1fr;
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .contact-cta-side {
    align-items: flex-start;
  }

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

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ========================================
   Desktop (1024px+)
   ======================================== */

@media (min-width: 1024px) {
  :root {
    --section-padding: 120px;
    --container-padding: 80px;
  }

  h1 { font-size: 4rem; }
  h2 { font-size: 2.75rem; }

  .hero-headline {
    font-size: 4rem;
  }

  /* Nav: show full nav, hide hamburger */
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-block;
  }

  .hamburger {
    display: none;
  }

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

  /* Process: horizontal timeline */
  .process-timeline {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .process-line {
    display: block;
    position: absolute;
    top: 88px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    opacity: 0.3;
  }

  .process-step {
    flex: 1;
  }

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

  .testimonials-grid .testimonial-card:last-child {
    grid-column: auto;
    max-width: none;
    justify-self: auto;
  }

  /* Counter */
  .counter {
    font-size: 3.5rem;
  }
}

/* ========================================
   Wide (1440px+)
   ======================================== */

@media (min-width: 1440px) {
  .hero-headline {
    font-size: 4.5rem;
  }

  .hero-sub {
    font-size: 1.2rem;
    max-width: 640px;
  }
}

/* ========================================
   Chatbot Mobile
   ======================================== */

@media (max-width: 480px) {
  .chatbot-window {
    width: calc(100vw - 32px);
    right: -8px;
    height: 420px;
  }
}