/* SUBMITAL — Option B final build (solid-colour, engineering-focused) */
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#475569; --border:#e2e8f0; --surface:#f8fafc;
  --accent:#0ea5e9; --accent2:#22d3ee;
  --ok:#16a34a; --warn:#b45309; --err:#dc2626;
  --block1:#e5f3ff; --block2:#eef2ff; --block3:#ecfdf5; --block4:#fff7ed; --block5:#f1f5f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);line-height:1.65}

/* Header / Nav */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(1200px,94vw);margin-inline:auto;padding:.8rem 0}
.brand{font-weight:900;letter-spacing:.02em}
nav a{color:var(--text);text-decoration:none;font-weight:600;margin:0 .4rem}
.cta{padding:.6rem 1rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;text-decoration:none;font-weight:800}
.menu{display:none}
@media (max-width:860px){.menu{display:inline-flex}.links{display:none}}

/* Hero */
.hero{display:grid;place-items:center;min-height:62vh;background:linear-gradient(135deg,#031a2e 0%, #0f2740 35%, #123a5b 100%);color:#e6edf5;text-align:center;padding:4rem 1rem}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:0 0 .6rem}
.hero p{max-width:1020px;margin:.4rem auto 1.1rem;color:#cbd5e1}
.hero .actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.hero .btn{display:inline-block;padding:.9rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:800}
.hero .primary{background:#fff;color:#0f172a}
.hero .secondary{border:1px solid #2b445e;color:#e6edf5}

/* Sections */
.section{padding:3.2rem 0}
.container{width:min(1200px,94vw);margin-inline:auto}
.section h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 .6rem}
.lead{color:var(--muted);max-width:80ch}
ul.clean{padding-left:1.2rem}
ul.clean li{margin:.35rem 0}

/* Grids */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.service{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1rem;display:grid;gap:.4rem}
.service .title{font-weight:800}
.service .desc{color:var(--muted)}
@media (max-width:960px){.services{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.services{grid-template-columns:1fr}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.card{border-radius:14px;border:1px solid var(--border);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.card .img{aspect-ratio:16/9}
.card .body{padding:1rem}
.card .title{font-weight:800}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
.box{border:1px solid var(--border);border-radius:14px;padding:1.2rem;background:#fff}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Forms */
form{display:grid;gap:.9rem;margin-top:1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:640px){.row{grid-template-columns:1fr}}
.input, select{padding:.9rem;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text)}
textarea.input{min-height:160px}
.checkbox{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0}
.checkbox input{margin-top:.25rem}

/* Footer */
footer{border-top:1px solid var(--border);background:var(--surface);padding:1rem 0}
.footer-inner{width:min(1200px,94vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--muted)}

.badge{display:inline-block;padding:.3rem .6rem;border-radius:999px;background:#e2e8f0;color:#0f172a;font-weight:700;font-size:.85rem}
.note{color:var(--muted);font-size:.95rem}
.space{height:1rem}