/**
 * ============================================================
 * mobile.css — RESPONSIVE / MOBILE STYLES
 * ============================================================
 *
 * All breakpoint overrides. Desktop styles are in the other
 * CSS files — this file only contains CHANGES for smaller screens.
 *
 * Breakpoints:
 *   max-width: 768px  → phones and small tablets
 *   max-width: 400px  → very small phones (iPhone SE etc.)
 *
 * ============================================================
 */

@media (max-width: 768px) {

  /* ── Nav ── */
  nav          { padding: 18px 20px; }
  nav.scrolled { padding: 12px 20px; }
  .nav-links, .nav-cta { display: none; }   /* replaced by hamburger menu */
  .nav-ham { display: flex; opacity: 1 !important; }
  .nav-brand-text { font-size: 12px; letter-spacing: .15em; }

  /* ── Hero ── */
  #hero { padding: 0 6vw; align-items: center; text-align: center; }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero-title   { font-size: clamp(42px,11vw,68px); margin-bottom: 28px; }
  .hero-body    { max-width: 100%; margin-bottom: 36px; font-size: 15px; }
  .hero-btns    { flex-direction: column; gap: 12px; width: 100%; align-items: center; }
  .btn-fill, .btn-line { width: 100%; max-width: 280px; text-align: center; }
  .xhair, .dot-accent { display: none; } /* decorative only, not needed on mobile */

  /* ── Stats ── */
  .stats-band { flex-wrap: wrap; }
  .stat-item  {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.045);
    padding: 32px 12px;
  }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.045); }
  .stat-num { font-size: 36px; }

  /* ── Laptop ── */
  #laptop-section     { min-height: 380vh; }
  .laptop-scene       { width: 92vw; }
  .laptop-intro       { margin-bottom: 24px; padding: 0 4vw; }
  .laptop-intro-title { font-size: clamp(20px,6vw,32px); }
  .laptop-caption     { bottom: 28px; }

  /* ── Portfolio ── */
  #portfolio      { padding: 80px 5vw; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .proj-thumb     { aspect-ratio: 16/10; }
  /* Always show overlay on mobile (no hover on touchscreen) */
  .proj-overlay {
    opacity: 1; transform: translateY(0);
    background: linear-gradient(to top, rgba(5,5,7,.98) 0%, rgba(5,5,7,.5) 60%, transparent 100%);
  }
  .proj-name   { font-size: 18px; }
  .proj-result { font-size: 12px; }
  .proj-arrow  { width: 32px; height: 32px; font-size: 13px; }

  /* ── Quote Strip ── */
  #quote-strip { padding: 0 5vw; }
  .quote-strip-inner {
    flex-direction: column; text-align: center;
    padding: 40px 28px; gap: 28px; align-items: center;
  }
  .quote-strip-title { font-size: clamp(22px,6vw,32px); }
  .quote-strip-body  { font-size: 13px; max-width: 100%; }
  .quote-strip-btn   { width: 100%; max-width: 260px; padding: 15px 24px; font-size: 14px; }

  /* ── Services ── */
  #services         { padding: 80px 5vw; }
  .services-grid    { grid-template-columns: 1fr; }
  .svc-card         { grid-column: auto !important; } /* remove 2-col span */
  .section-title    { font-size: clamp(36px,9vw,56px); margin-bottom: 48px; }

  /* ── Process ── */
  #process        { padding: 80px 5vw; }
  .process-layout { grid-template-columns: 1fr; gap: 48px; }
  .proc-visual    { display: none; } /* card stack too cramped on mobile */

  /* ── Testimonials ── */
  #testimonials { padding: 80px 5vw; }
  .testi-grid   { grid-template-columns: 1fr; gap: 16px; }

  /* ── FAQ ── */
  #faq { padding: 80px 5vw; }
  .faq-layout     { grid-template-columns: 1fr; gap: 40px; }
  .faq-left-title { font-size: clamp(28px,7vw,40px); }
  .faq-cta-wrap   { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .faq-cta-wrap .btn-fill { width: 100%; max-width: 260px; }
  .faq-q          { font-size: 14px; }

  /* ── Contact ── */
  #contact { padding: 80px 5vw; }
  .contact-layout { grid-template-columns: 1fr; gap: 48px; }
  /* Disable GSAP slide-in on mobile — set visible immediately */
  .contact-left      { transform: none; opacity: 1; }
  .contact-form-wrap { transform: none; opacity: 1; }
  .contact-left-title { font-size: clamp(26px,7vw,38px); }
  .contact-left-body  { max-width: 100%; }
  .form-card { padding: 28px 20px; border-radius: var(--radius-md); }
  .form-row  { grid-template-columns: 1fr; }

  /* ── Footer ── */
  footer { padding: 48px 5vw; }
  .footer-top    { flex-direction: column; gap: 24px; }
  .footer-social { flex-direction: column; gap: 10px; width: 100%; }
  .social-btn    { justify-content: center; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; align-items: center; }
  .footer-links  { gap: 20px; }

  /* ── WhatsApp ── */
  .wa-btn { bottom: 20px; right: 20px; width: 50px; height: 50px; }
  .wa-btn svg { width: 24px; height: 24px; }
  .wa-btn::before { display: none; } /* hide tooltip on touch devices */
}


/* ── Very small phones (iPhone SE, etc.) ── */
@media (max-width: 400px) {
  .stat-item              { flex: 1 1 100%; border-right: none; }
  .stat-item:nth-child(odd) { border-right: none; }
  .hero-title             { font-size: clamp(38px,10vw,56px); }
  .nav-brand-text         { display: none; } /* too cramped, just show logo icon */
}