/* Responsive — mobile first breakpoints */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;gap:40px}
  .hero-card{max-width:500px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .about-media .floater{left:20px;bottom:-20px}
  .mega{min-width:420px;grid-template-columns:1fr}
}
@media (max-width:820px){
  section{padding:60px 0}
  .nav-toggle{display:inline-flex}
  .nav-menu{position:fixed;top:0;right:-100%;height:100vh;width:82%;max-width:340px;background:#fff;flex-direction:column;align-items:stretch;padding:80px 24px 24px;box-shadow:var(--shadow-lg);transition:right .3s;z-index:99;gap:0;overflow-y:auto}
  .nav-menu.open{right:0}
  .nav-menu > li{width:100%}
  .nav-menu > li > a{display:block;padding:14px 12px;border-bottom:1px solid #eef2f7;border-radius:0}
  .nav-menu .mega{position:static;transform:none;box-shadow:none;padding:0 12px 12px;min-width:0;display:none;background:#f8fafc;border-radius:10px}
  .has-mega.open .mega{display:grid;opacity:1;visibility:visible}
  .nav-cta{margin-top:12px;justify-content:center}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .slide{grid-template-columns:1fr;text-align:center;padding:28px}
  .slide img{margin:0 auto}
  .timeline::before{left:24px}
  .tl-item{grid-template-columns:48px 1fr}
  .tl-dot{grid-column:1;justify-self:start}
  .tl-item:nth-child(even) .tl-card,.tl-item:nth-child(odd) .tl-card{grid-column:2;text-align:left}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cookie{right:20px;bottom:100px}
  .about-features,.form-row.two,.grid-2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .topbar .info span{display:block;margin:0 0 4px}
  .topbar .container{justify-content:center;text-align:center}
  .hero{min-height:auto;padding-top:40px}
  .hero-content h1{font-size:2rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .hero-stats{grid-template-columns:1fr 1fr;gap:10px}
  .footer-grid{grid-template-columns:1fr}
  .contact-info,.contact-form{padding:28px 22px}
  .floating{right:14px;bottom:14px}
  .floating a,.back-top{width:46px;height:46px;font-size:1.05rem}
  .modal form{flex-direction:column}
  .modal form .btn{width:100%}
}