/* Nets Technologies — shared styles (base, hover states, header/nav, responsive) */

/* ---------- Base ---------- */
body{margin:0;background:#faf9f5;color:#181a20}
::selection{background:oklch(0.42 0.11 265);color:#faf9f5}
input:focus,select:focus,textarea:focus{outline:2px solid oklch(0.42 0.11 265);outline-offset:1px}

/* ---------- Hover states (replaces design-time style-hover attributes) ---------- */
.hv-dark:hover{background:#181a20;color:#faf9f5}
.hv-white:hover{color:#faf9f5}
.hv-border:hover{border-color:oklch(0.42 0.11 265)}
.hv-menu:hover{background:#f2f0ea;color:oklch(0.42 0.11 265)}
.hv-accent:hover{color:oklch(0.42 0.11 265)}
.hv-accentbg:hover{background:oklch(0.42 0.11 265);color:#faf9f5}
.hv-tint:hover{background:#f2f0ea}

/* ---------- Header: dropdown (CSS-only) + burger ---------- */
.dropdown{display:none}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.burger{display:none;background:none;border:1px solid rgba(24,26,32,.25);padding:8px 12px;font-size:18px;line-height:1;color:#181a20;cursor:pointer;font-family:Archivo,sans-serif}
.mobile-nav{display:none;border-top:1px solid rgba(24,26,32,.12);background:#faf9f5;font-family:Archivo,sans-serif;font-size:15px;font-weight:500;padding:10px 20px 22px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:11px 0;text-decoration:none;color:#181a20;border-bottom:1px solid rgba(24,26,32,.08)}
.mobile-nav a.active{color:oklch(0.42 0.11 265)}
.mobile-nav .mobile-sub{padding-left:18px;font-weight:400;font-size:14px;color:#3a3d46}
.mobile-nav .mobile-cta{background:#181a20;color:#faf9f5;text-align:center;margin-top:14px;padding:12px 0;border-bottom:none;font-weight:600}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)!important}
  .g3{grid-template-columns:repeat(2,1fr)!important}
  .px{padding-left:28px!important;padding-right:28px!important}
  h1{font-size:44px!important}
}
@media (max-width:900px){
  .nav-desktop{display:none!important}
  .burger{display:block}
  .g2,.g3,.gside{grid-template-columns:1fr!important}
  .g2 > *,.g3 > *,.gside > *{grid-column:auto!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  h1{font-size:38px!important}
  h2{font-size:28px!important}
}
@media (max-width:640px){
  .g4{grid-template-columns:1fr!important}
  .g4 > *{grid-column:auto!important}
  .footer-grid{grid-template-columns:1fr!important}
  .px{padding-left:20px!important;padding-right:20px!important}
  h1{font-size:32px!important}
  h2{font-size:25px!important}
}