/* Aquamarine — mobile-first responsive layer (additive, loaded last) */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,video,svg{ max-width:100%; height:auto; }

/* phone spacing */
@media (max-width:640px){
  .container{ padding:0 18px; }
  .hero{ padding:84px 0 52px; }
  .card{ padding:22px; }
  .grid-3,.grid-2{ gap:16px; }
}
/* tablet: 2-up instead of jumping 3->1 */
@media (min-width:600px) and (max-width:900px){
  .grid-3{ grid-template-columns:repeat(2,1fr) !important; }
}

/* hamburger button (hidden on desktop) */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  border-radius:8px; width:46px; height:42px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:0 0 auto;
}
.nav-toggle .bar,.nav-toggle .bar::before,.nav-toggle .bar::after{
  display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:.25s;
}
.nav-toggle .bar{ position:relative; }
.nav-toggle .bar::before{ content:""; position:absolute; top:-7px; left:0; }
.nav-toggle .bar::after{ content:""; position:absolute; top:7px; left:0; }
body.nav-open .nav-toggle .bar{ background:transparent; }
body.nav-open .nav-toggle .bar::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle .bar::after{ top:0; transform:rotate(-45deg); }

/* mobile nav drawer */
@media (max-width:820px){
  .nav-toggle{ display:inline-flex; }
  nav .nav-links{
    position:fixed; left:0; right:0; top:62px;
    flex-direction:column; gap:2px;
    background:rgba(10,12,18,.98); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:10px 18px 20px; display:none; z-index:60;
    max-height:calc(100vh - 62px); overflow-y:auto;
  }
  body.nav-open nav .nav-links{ display:flex; }
  nav .nav-links a{ padding:15px 10px; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.05); }
}

/* footer stacks on phone */
@media (max-width:640px){
  footer .footer-inner{ flex-direction:column; gap:10px; text-align:center; }
}