:root{--navy:#0B2D5B;--blue:#1687F8;--ink:#152033;--slate:#4B5563;--line:#DCE5EE;--light:#F4F7FA;--max:1240px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}
.mockup-shell{position:relative;width:100%;background:#fff}
.mockup-image{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:5}
.services{left:49.3%;top:1.1%;width:5.8%;height:5.1%}
.capabilities{left:56.4%;top:1.1%;width:7.1%;height:5.1%}
.about{left:65.7%;top:1.1%;width:4.9%;height:5.1%}
.contact{left:72.5%;top:1.1%;width:5%;height:5.1%}
.request-top{left:79.9%;top:.7%;width:10.2%;height:5.8%}
.request-hero{left:8.3%;top:54.2%;width:16.9%;height:6.7%}
.phone-hero{left:26.2%;top:54.2%;width:14.6%;height:6.7%}

.container{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.section{padding:76px 0}
.alt{background:#F7FAFD}
.dark{background:var(--navy);color:white}
.section-label{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:850;color:var(--blue)}
.light{color:#9ED3FF}
h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-.04em;margin:10px 0 24px}
.grid{display:grid;gap:16px}
.four{grid-template-columns:repeat(4,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:12px;padding:24px;background:white}
.card strong{display:block;font-size:22px;color:var(--navy)}
.card span,.card p{color:var(--slate)}
.card h3{margin:0 0 8px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.dark p{color:#D7E2EF}
.contact-card{border:1px solid var(--line);border-radius:12px;padding:26px;background:white}
.contact-card a{color:var(--blue);font-weight:700}
.btn{display:inline-block;background:var(--blue);color:white!important;padding:13px 18px;border-radius:8px;font-weight:800;margin-top:8px}

@media(max-width:900px){
  .mockup-shell{overflow-x:auto}
  .mockup-image{min-width:1180px}
  .four,.three,.split{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .four,.three,.split{grid-template-columns:1fr}
}