/* =========================================================
   Responsive rules — 1024 / 768 / 480 / 360 breakpoints
   ========================================================= */

@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .hero-visual{min-height:260px; order:-1;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr); gap:30px;}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .chart-grid{grid-template-columns:repeat(9,1fr);}
}

@media (max-width:860px){
  .primary-nav{
    position:fixed; inset:var(--header-h) 0 0 0; background:#fff; flex-direction:column;
    align-items:stretch; padding:18px; gap:4px; overflow-y:auto;
    transform:translateX(100%); transition:transform .3s ease; box-shadow:-10px 0 30px rgba(0,0,0,.08);
    max-width:320px; margin-left:auto;
  }
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav a{padding:14px 16px; font-size:1rem; border-bottom:1px solid var(--line);}
  .hamburger{display:flex;}
  .header-actions .btn-primary.nav-cta{display:none;}
  .header-actions{gap:8px;}
}

@media (max-width:768px){
  section{padding:64px 0;}
  .grid-3, .grid-2, .form-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .mini-examples{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .converter-card{padding:22px;}
  .chart-grid{grid-template-columns:repeat(6,1fr);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:480px){
  .container{padding:0 18px;}
  .grid-4{grid-template-columns:1fr;}
  .hero{padding:56px 0 40px;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .converter-actions{flex-direction:column;}
  .converter-actions .btn{width:100%;}
  .chart-grid{grid-template-columns:repeat(4,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .tile{width:44px; height:52px;}
  .tile-letter{font-size:.95rem;}
  .tile-number{font-size:.85rem;}
}

@media (max-width:360px){
  .chart-grid{grid-template-columns:repeat(3,1fr);}
  .brand span.brand-text{display:none;}
}