:root{
  --blue:#0052CC;        /* Bright Omega-like blue */
  --blue-dark:#003E99;
  --silver:#C0C0C0;
  --ink:#1F2D3D;
  --bg:#F6F7FB;
  --white:#FFFFFF;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white);
  padding:14px 20px; border-bottom:1px solid #e7e9ef;
}
.logo{font-weight:800; font-size:1.25rem; color:var(--blue); text-decoration:none}
.nav-right{display:flex; gap:18px; align-items:center}
.nav-link{color:var(--ink); text-decoration:none; font-weight:600}
.nav-link:hover,.nav-link.active{color:var(--blue)}
.btn{background:var(--blue); color:#fff; border:none; padding:10px 16px; border-radius:8px; font-weight:700; cursor:pointer}
.btn:hover{background:var(--blue-dark)}
.btn.outline{background:transparent; color:var(--blue); border:2px solid var(--blue)}
.btn.outline:hover{background:var(--blue); color:#fff}
.btn.call{border-radius:10px}

/* HERO */
.hero{position:relative; overflow:hidden; min-height:56vh; display:flex; align-items:center; justify-content:center; background:#eee}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-card{
  position:relative; z-index:2;
  background:rgba(0,0,0,0.45);
  color:#fff; padding:22px 20px; border-radius:16px; width:min(92%,760px);
  text-align:center; backdrop-filter:saturate(140%) blur(1px);
}
.hero-card h1{font-size:1.9rem; line-height:1.25; margin-bottom:8px}
.hero-card p{opacity:.95; margin-bottom:8px}
.hero-card .regions{font-size:.98rem; opacity:.95; margin-bottom:14px}
.hero-short{min-height:38vh}

/* LAYOUT */
.container{width:min(1100px,92%); margin-inline:auto; padding:28px 0}
.intro{margin-bottom:28px}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

/* FEATURES GRID */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.features article{background:#fff; padding:18px; border-radius:12px; border:1px solid #e7e9ef}
.features h3{color:var(--blue); font-size:1.05rem; margin-bottom:6px}

/* SERVICES PAGE GRID */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:6px}
.services-grid article{background:#fff; padding:20px; border-radius:12px; border:1px solid #e7e9ef}
.center{text-align:center; margin-top:18px}

/* CONTACT PAGE */
.contact-grid{display:grid; grid-template-columns:2fr 1fr; gap:20px}
.contact-card{background:#fff; padding:18px; border-radius:12px; border:1px solid #e7e9ef}
.contact-card h3{color:var(--blue); margin-bottom:6px}
.contact-card p{margin-bottom:6px}

/* FORMS */
form input, form textarea{
  width:100%; padding:12px 12px; margin-bottom:12px; border-radius:10px;
  border:1px solid #d6d9e4; background:#fff; color:var(--ink); font-size:1rem;
}
form .full{width:100%}
.hidden{display:none}

/* POPUP */
#service-popup{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); z-index:2000; padding:16px;
}
.popup-card{
  position:relative; width:min(420px,96%); background:#fff; padding:22px; border-radius:14px; border:1px solid #e7e9ef;
}
.popup-card h2{color:var(--blue); margin-bottom:10px}
.popup-card .close{
  position:absolute; top:8px; right:10px; font-size:26px; line-height:1;
  background:transparent; border:none; color:#8892a6; cursor:pointer;
}
.popup-card .close:hover{color:#333}

/* FOOTER */
.footer{background:#fff; border-top:1px solid #e7e9ef; color:#4b5563; text-align:center; padding:22px 10px}
.footer a{color:var(--blue); text-decoration:none}
.footer a:hover{text-decoration:underline}

/* THANK YOU */
.thanks{display:grid; place-items:center; min-height:70vh; background:var(--bg)}
.thanks-wrap{text-align:center; background:#fff; border:1px solid #e7e9ef; padding:28px; border-radius:14px}
.thanks .cta-row{justify-content:center; margin-top:12px}

/* RESPONSIVE */
@media (max-width: 980px){
  .features{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .hero-card h1{font-size:1.6rem}
  .nav-right{gap:10px}
  .nav-link{display:none} /* keep header clean on small phones */
}