/* ============================================================
   RESPONSIVE / MOBILE STYLES — shared across all pages
   Breakpoints: 640px (tablet), 480px (mobile)
   ============================================================ */

/* NAV — collapse links into hamburger on mobile */
@media(max-width:640px){
  nav{padding:0 1.25rem;height:56px;position:relative}
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--white);flex-direction:column;align-items:flex-start;padding:1rem 1.25rem;gap:0;border-bottom:0.5px solid var(--border);z-index:100;box-shadow:0 4px 16px rgba(0,0,0,0.08)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:15px;padding:0.65rem 0;border-bottom:0.5px solid var(--border);width:100%}
  .nav-links a:last-child{border-bottom:none}
  .nav-social{padding:0.5rem 0}
  .nav-divider{display:none}
  .nav-cta{margin-top:0.25rem;width:100%;text-align:center;padding:10px}
  .nav-hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
  .nav-hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:all 0.2s}
  .nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-hamburger.open span:nth-child(2){opacity:0}
  .nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}
@media(min-width:641px){
  .nav-hamburger{display:none}
  .nav-social{display:none !important}
  .nav-divider{display:none !important}
}

/* HERO — stack on mobile */
@media(max-width:640px){
  .hero{padding:2rem 1.25rem 0}
  .hero-inner{grid-template-columns:1fr;gap:1.5rem}
  .hero-content{padding-bottom:0}
  .hero h1{font-size:1.75rem}
  .hero-actions{justify-content:center;flex-direction:column;align-items:center;gap:1rem}
  .prod-cta{flex-direction:column;align-items:flex-start;gap:0.75rem}
  .hero-phone{justify-content:center;padding-bottom:0}
  .hero-phone img{width:160px;padding-bottom:1.5rem}
  .hero-stats{flex-direction:column;gap:1rem;padding:1.25rem}
  .hero-stat-num{font-size:1.4rem}

  /* page hero (products / about) */
  .page-hero{padding:2.5rem 1.25rem}
  .page-hero h1{font-size:1.75rem}
}

/* TRUST BAR — wrap and hide dividers */
@media(max-width:640px){
  .trust-bar{gap:0.75rem;padding:0.75rem 1.25rem}
  .trust-divider{display:none}
}

/* SECTIONS */
@media(max-width:640px){
  .section,.product-section,.screenshots-section,.video-section,.about-section,.download-section,.testimonials,.cta-section,.impact-row,.quote-strip,.cta-strip{padding-left:1.25rem;padding-right:1.25rem}
  .section-title,.prod-title{font-size:1.4rem}
}

/* PRODUCT CARDS — stack */
@media(max-width:640px){
  .products-grid{grid-template-columns:1fr}
  .prod-inner,.prod-inner.flip{grid-template-columns:1fr;direction:ltr}
  .quotes-grid{grid-template-columns:1fr}
  .impact-grid{grid-template-columns:1fr;gap:1.25rem}
  .mv-grid{grid-template-columns:1fr}
}

/* ABOUT SECTION — stack genie image */
@media(max-width:640px){
  .about-inner{grid-template-columns:1fr}
  .genie-img{text-align:center}
  .genie-img img{width:120px;margin:0 auto}
}

/* SCREENSHOTS — 2 col on tablet, 1 col on small mobile */
@media(max-width:640px){
  .screenshots-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  .screenshots-grid{grid-template-columns:1fr}
}

/* LEADERSHIP (about page) */
@media(max-width:640px){
  .leadership-inner{grid-template-columns:1fr}
  .magazine-cover{max-width:200px;margin:0 auto}
}

/* PARTNERS GRID */
@media(max-width:640px){
  .partners-grid{flex-direction:column;align-items:center}
  .partner-logo-box{width:100%;max-width:260px}
}

/* DOWNLOAD BUTTONS — stack */
@media(max-width:480px){
  .download-btns{flex-direction:column;align-items:center}
  .dl-btn{width:100%;max-width:280px;justify-content:center}
  .cta-strip-btns,.cta-actions{flex-direction:column;align-items:center}

  .btn-primary,.btn-secondary,.btn-outline{width:100%;max-width:280px;text-align:center}
  .btn-secondary{margin-left:0;margin-top:0}
}

/* FOOTER — stack columns */
@media(max-width:640px){
  footer{padding:2rem 1.25rem}
  .footer-grid{grid-template-columns:1fr;gap:1.75rem}
  .footer-brand img{width:90px}
}

/* ORIGIN STORY (about page) — stack */
@media(max-width:640px){
  .origin-inner{grid-template-columns:1fr}
}