/* ══════════════════════════════════════════
   MyGenHome — Responsive (Mobile-First Aggressive)
   4 breakpoints: 480, 768, 900, 1200
   ══════════════════════════════════════════ */

/* ── TABLET & BELOW: 900px ── */
@media(max-width:900px){
  /* Nav */
  .nm{display:none}
  .ham{display:flex}

  /* Hero */
  .hero{min-height:75vh}
  .hero h1{font-size:clamp(34px,5vw,52px)}
  .hero-desc{font-size:15px}

  /* Process */
  .steps{grid-template-columns:1fr}

  /* Shop */
  .product{grid-template-columns:1fr}
  .prod-vis{min-height:300px;position:relative}
  .prod-vis img{position:relative;height:300px;width:100%}
  .prod-info{padding:36px 28px}

  /* Report */
  .rcols{grid-template-columns:1fr}

  /* About */
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .about-chip{bottom:16px;right:16px}

  /* Contact */
  .contact-grid{grid-template-columns:1fr;gap:2rem}

  /* Footer */
  .ft{grid-template-columns:1fr 1fr}

  /* Stats */
  .hero-stats{gap:24px}

  /* B2B */
  .svcs{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .cta-inner{grid-template-columns:1fr;text-align:center}
  .btn-cta-w{margin-top:1rem}

  /* Sticky CTA visible on mobile */
  .sticky-cta{display:block}
}

/* ── LARGE PHONE: 768px ── */
@media(max-width:768px){
  section{padding:72px 5vw}

  .hero{min-height:70vh}
  .hero-inner{padding:80px 5vw 60px}

  h2.st{font-size:clamp(26px,4vw,38px)}
  .ss{font-size:14.5px}

  /* Process cards horizontal on tablet */
  .step{display:grid;grid-template-columns:140px 1fr}
  .step-img-wrap{height:100%;min-height:140px}
  .step-body{padding:18px 20px}

  /* Footer single column */
  .ft{grid-template-columns:1fr;gap:2rem}

  /* Report accordion enabled */
  .accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .rcol .accordion-content{max-height:0;overflow:hidden}
  .rcol .accordion-content.open{max-height:500px}

  /* Caution box stack */
  .caution-box{flex-direction:column;gap:16px;padding:24px}
  .cbar{width:100%;height:3px;align-self:auto}

  /* CTA band */
  .cta-band{padding:56px 5vw}
}

/* ── PHONE: 480px ── */
@media(max-width:480px){
  section{padding:56px 5vw}

  /* Hero compressed */
  .hero{min-height:65vh}
  .hero-inner{padding:60px 5vw 48px}
  .hero h1{font-size:28px;margin-bottom:16px}
  .hero-desc{font-size:14px;line-height:1.6;margin-bottom:28px}
  .hero-ey{font-size:10px;margin-bottom:14px}
  .hero-cta{gap:10px;margin-bottom:40px}
  .btn-hero{padding:14px 24px;font-size:14px}
  .btn-hero-ghost{padding:13px 20px;font-size:14px}

  /* Hide secondary hero text on mobile */
  .hero-desc .mobile-hide{display:none}

  /* Stats compact */
  .hero-stats{flex-wrap:wrap;gap:16px}
  .hstat{padding-left:12px}
  .hstat-n{font-size:24px}
  .hstat-l{font-size:11px}

  /* Process cards stack */
  .step{display:block}
  .step-img-wrap{height:140px}
  .step-body{padding:16px 18px}
  .step-tag{font-size:10px}
  .step-title{font-size:15px}
  .step-text{font-size:13px}

  /* Shop compressed */
  .prod-vis{min-height:220px}
  .prod-vis img{height:220px}
  .prod-info{padding:24px 20px}
  .prod-name{font-size:26px}
  .prod-desc{font-size:13.5px;margin-bottom:20px}
  .inc-text{font-size:13px}
  .inc-text small{font-size:11.5px}
  .price-block{padding:18px 20px}
  .price-main{font-size:42px}
  .launch-ribbon{top:16px;left:16px;font-size:10px;padding:5px 14px}

  /* Report */
  .rcol{padding:22px 20px}
  .rnum{font-size:32px}
  .rtitle{font-size:15px}

  /* About */
  .about-sec{padding:56px 5vw}
  .about-vis img{aspect-ratio:16/9}
  .vt h4{font-size:13.5px}
  .vt p{font-size:12.5px}
  .about-chip{padding:14px 18px}
  .chip-n{font-size:22px}
  .chip-l{font-size:11px}

  /* Read more visible */
  .read-more-wrap{max-height:4.5em}
  .btn-read-more{display:block}

  /* Hide eyebrow labels on small mobile */
  .ey{display:none}

  /* Contact */
  .ci-icon{width:36px;height:36px}

  /* Social cards horizontal */
  .soc-cards{flex-direction:row;flex-wrap:wrap;gap:8px}
  .soc-card{flex:1;min-width:140px;padding:12px 14px}

  /* B2B */
  .svc-body{padding:18px}
  .svc-title{font-size:16px}
  .case{padding:22px 20px}
  .case-n{font-size:34px}
  .btn-cta{padding:14px 24px;font-size:14px}
  .btn-ghost{padding:13px 20px;font-size:14px}
}

/* ── TOUCH TARGETS ── */
@media(hover:none) and (pointer:coarse){
  .nm a{min-height:44px;display:flex;align-items:center}
  .mobile-menu a{min-height:44px;display:flex;align-items:center}
  .soc-card{min-height:44px}
  .socl a{min-width:44px;min-height:44px}
  .btn-buy-main,.btn-buy-sec{min-height:48px}
  .btn-hero,.btn-hero-ghost,.btn-cta,.btn-ghost{min-height:48px}
}