@media (max-width: 900px){
  .hero .container{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .about-services{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .hero{padding-top:0; border-top:0}
  header{border-bottom-width:0; background:transparent}
  .nav{display:flex; align-items:center; gap:12px; justify-content:flex-start; padding:12px clamp(18px, 6vw, 30px); --nav-height:72px}
  .nav.menu-open{position:fixed; inset:0; width:100%; height:100vh; max-width:none; margin:0; padding:12px clamp(18px, 6vw, 30px); align-items:flex-start; z-index:120}
  .brand{font-size:16px; flex:1; min-width:0}
  .theme-toggle{margin-right:0; margin-left:auto; width:36px; height:36px}
  .menu-toggle{display:inline-flex; width:40px; height:40px}
  .desktop-cta{display:none}
  .nav nav{display:none}
  .nav.menu-open::before{content:""; position:fixed; inset:0; background:rgba(15,23,42,0.45); backdrop-filter:blur(6px); z-index:100}
  .nav.menu-open nav{display:flex; flex-direction:column; gap:18px; position:fixed; inset:0; width:100%; min-height:100vh; padding:calc(var(--nav-height, 68px) + 28px + env(safe-area-inset-top, 0px)) clamp(28px, 9vw, 56px) max(42px, env(safe-area-inset-bottom, 0px) + 24px); border-radius:0; border:none; background:var(--bg); box-shadow:none; max-height:none; overflow:auto; z-index:130; align-items:flex-start; animation:drawer-fade .18s ease-out, drawer-slide .26s var(--ease-smooth) both}
  .nav.menu-open nav ul{display:flex; flex-direction:column; gap:12px; margin:0; padding:0; width:100%}
  .nav.menu-open nav li a{display:block; width:100%; padding:16px 14px; border-radius:16px; font-weight:600; border:1px solid transparent; background:color-mix(in srgb, var(--bg) 62%, transparent); text-align:left; box-shadow:0 8px 24px rgba(15,23,42,0.08)}
  .nav.menu-open nav li a:hover,
  .nav.menu-open nav li a:focus-visible{background:color-mix(in srgb, var(--accent-2) 18%, transparent); border-color:color-mix(in srgb, var(--accent) 24%, transparent); outline:none}
  .nav.menu-open nav .mobile-menu-header,
  .nav.menu-open nav .mobile-menu-cta,
  .nav.menu-open nav .mobile-menu-meta{display:flex}
  .nav.menu-open nav .mobile-menu-header{opacity:0.88}
  .nav.menu-open nav .mobile-menu-cta .cta{width:100%; justify-content:center; text-align:center}
  .nav.menu-open nav .mobile-menu-cta .cta.mobile-cta{display:inline-flex}
  .nav.menu-open nav .mobile-menu-meta{color:var(--muted)}
  .nav.menu-open nav .mobile-menu-meta .menu-link{font-size:15px}
  .nav.menu-open nav .mobile-menu-divider{display:block}
  .nav.menu-open nav .mobile-menu-meta .menu-link svg{width:16px; height:16px}
  .nav.menu-open nav .drawer-close{display:flex; top:calc(env(safe-area-inset-top, 0px) + 18px); right:clamp(20px, 8vw, 40px); color:var(--muted)}
  .nav.menu-open nav .drawer-close:hover,
  .nav.menu-open nav .drawer-close:focus-visible{color:var(--fg)}
  .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .ring{width:112px; height:112px}
  .about-services{grid-template-columns:1fr}
  .footer-row{flex-direction:column; align-items:flex-start; gap:12px}
}


/* Hero size overrides (mobile) */
@media (max-width: 640px){
  .hero{
    min-height:calc(100vh - var(--nav-height, 72px));
    min-height:calc(100dvh - var(--nav-height, 72px));
    display:flex;
    overflow:hidden;
  }
  .hero .container{
    padding:24px 20px 44px;
    position:relative;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:100%;
  }
  .hero .container .network-card{position:absolute; inset:0; min-height:0; z-index:-1; opacity:.75; pointer-events:none}
  .hero .container .network-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,23,42,.12), transparent 55%)}
  .hero .container .network-canvas{position:absolute; inset:0; width:100%; height:100%}
  .network-card{min-height:320px}
  .cta{width:max-content}
}
@media (max-width: 480px){
  .nav{padding:10px clamp(22px, 8vw, 34px); gap:10px; --nav-height:64px}
  .theme-toggle{width:34px; height:34px}
  .menu-toggle{width:38px; height:38px}
  .hero .container{padding:20px 16px 40px}
  .ring{width:96px; height:96px}
  .lead{font-size:16px}
  .btn-lg{font-size:16px; padding:14px 20px}
  .footer-bottom{font-size:13px}
}

@keyframes drawer-fade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes drawer-slide{
  from{transform:translateY(-16px)}
  to{transform:translateY(0)}
}