/* ================================================
   FLUXFRONT — Responsive Breakpoints
   All @media queries from the Website zone,
   consolidated by breakpoint
   ================================================ */


/* ================================================
   REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  .anim-hero { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero.is-loaded .anim-hero { animation: none !important; opacity: 1 !important; transform: none !important; }
  .reveal, .reveal-left { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__bg { animation: none !important; }
  .voice-orb, .voice-breath-ring, .voice-outer-ring, .voice-zone__mesh { animation: none !important; }
  .badge-dot { animation: none !important; }
}


/* ================================================
   1024px — Tablet landscape
   ================================================ */

@media (max-width: 1024px) {
  .section { padding: 120px 0; }
  .features { gap: 40px 48px; }
  .stats { gap: 48px; }

  .contact-wrapper { grid-template-columns: 1fr; gap: 50px; }
  .service-detailed { grid-template-columns: 1fr; gap: 40px; }
  .service-detailed-number { font-size: 80px; min-width: auto; }
}


/* ================================================
   768px — Tablet portrait / large mobile
   ================================================ */

@media (max-width: 768px) {
  /* Nav */
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; width: 36px; height: 36px; gap: 5px; }
  .nav__burger span { width: 18px; height: 1.5px; }
  .nav__burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav__burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav, .nav.scrolled { background: rgba(11,13,17,0.95); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__overlay { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .nav__overlay-link { padding: 14px 0; width: 100%; text-align: center; }
  .nav__overlay-group { width: 100%; text-align: center; }
  .nav__overlay-group-trigger { padding: 14px 0; width: 100%; justify-content: center; }
  .nav__overlay-sublink { padding: 12px 0; min-height: 44px; justify-content: center; }
  .nav__overlay .pill--full { margin-top: 24px; }

  /* Sections */
  .section { padding: 100px 0; }
  .section__head { margin-bottom: 56px; }

  /* Hero */
  .hero { padding-top: 120px; min-height: auto; padding-bottom: 80px; }
  .hero__title { font-size: clamp(2.2rem, 7vw, 3.2rem); }
  .hero--short { padding: 140px 0 60px; }

  /* Features */
  .features { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin-left: auto; margin-right: auto; }

  /* Tabs */
  .tabs__bar { flex-direction: column; max-width: 280px; }
  .tabs__btn { border-right: none; border-bottom: 1px solid var(--border); }
  .tabs__btn:last-child { border-bottom: none; }

  /* Stats */
  .stats { flex-direction: column; gap: 40px; }

  /* Page hero */
  .page-hero { padding-top: 100px; padding-bottom: 40px; min-height: auto; }
  .page-hero-title { font-size: 2.2rem; }

  /* Footer */
  .footer__inner { flex-direction: column; text-align: center; }
  .footer-content { flex-direction: column; text-align: center; }

  /* Contact */
  .contact-form-container { max-width: 100%; }

  /* Services */
  .svc { padding: 48px 0; }
  .svc__list { grid-template-columns: 1fr; gap: 10px; }
  .cta-card { padding: 48px 24px; }
}


/* ================================================
   520px — Chatbot adjustments
   ================================================ */

@media (max-width: 520px) {
  #ff-chat-toggle.ff-chat-orb { right: 16px; bottom: 16px; width: 60px; height: 60px; }
  #ff-chat-panel { left: 12px; right: 12px; width: auto; }
}


/* ================================================
   480px — Small mobile
   ================================================ */

@media (max-width: 480px) {
  .container, .container--narrow, .container-small { padding: 0 16px; }

  .hero__title { font-size: 2rem; }
  .hero__sub { font-size: 16px; }
  .hero__cta { flex-direction: column; width: 100%; }
  .hero__cta .pill { width: 100%; justify-content: center; }

  .page-hero-title { font-size: 1.8rem; }
  .page-hero-subtitle { font-size: 16px; }

  .cta__btns { flex-direction: column; }
  .cta__btns .pill { width: 100%; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  .voice-zone { padding: 80px 0 60px; }
  .voice-stage { min-height: 280px; }
  .voice-orb { width: 200px; height: 200px; }
  .voice-breath-ring { width: 250px; height: 250px; }
  .voice-outer-ring { width: 320px; height: 320px; }
  .voice-spotlight { width: 300px; height: 300px; }
  .voice-start { width: 100%; max-width: 300px; }
  .voice-stop { width: 100%; max-width: 200px; }

  .contact-card-highlight, .contact-faq { padding: 20px; }
  .status-message { flex-direction: column; gap: 12px; }
}