/* ===== Design tokens ===== */
:root { --navy:#0a1a3c; --blue:#1f6bff; --ink:#1b2438; --bg:#fff; --alt:#f2f5fb; --radius:14px; }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); line-height:1.6; font-size:clamp(1rem,.95rem + .25vw,1.125rem); }
img { max-width:100%; height:auto; display:block; object-fit:cover; }
.wrap { width:min(1160px,100% - 2rem); margin-inline:auto; }
.section { padding:4rem 0; } .alt { background:var(--alt); } .narrow { max-width:720px; }
h1 { font-size:clamp(2rem,4vw + 1rem,3.5rem); line-height:1.15; margin:0 0 1rem; }
h2 { font-size:clamp(1.5rem,2vw + 1rem,2.25rem); margin:0 0 1.5rem; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

/* ===== Buttons ===== */
.btn { display:inline-block; padding:.7rem 1.4rem; border-radius:999px; font-weight:600; text-decoration:none; border:2px solid transparent; cursor:pointer; font-size:1rem; transition:transform .2s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--blue); color:#fff; }
.btn-light { background:#fff; color:var(--navy); }
.btn-outline { border-color:var(--blue); color:var(--blue); margin-top:.5rem; }

/* ===== Header ===== */
.announce { background:var(--navy); color:#fff; text-align:center; padding:.5rem 1rem; font-size:.9rem; }
.site-header { position:sticky; top:0; background:#fff; z-index:10; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.bar { display:flex; align-items:center; gap:1rem; padding:.6rem 0; }
.brand { margin-right:auto; }
nav ul, .foot ul { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
nav a { color:var(--navy); text-decoration:none; font-weight:500; }
.menu-btn { display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; }

/* ===== Hero & banners ===== */
.hero, .banner { position:relative; color:#fff; display:flex; align-items:center; min-height:480px; overflow:hidden; }
.banner { min-height:300px; }
.hero > img, .banner > img { position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.hero::before, .banner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,26,60,.9),rgba(10,26,60,.4)); }
.hero .wrap, .banner .wrap { position:relative; }
.hero p { max-width:560px; margin-bottom:1.5rem; }
.banner.alt::before { background:linear-gradient(90deg,rgba(31,107,255,.85),rgba(10,26,60,.5)); }

/* ===== Product grid ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.card { border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 18px rgba(10,26,60,.1); transition:transform .25s; background:#fff; }
.card:hover { transform:translateY(-4px); }
.card img { aspect-ratio:4/3; width:100%; }
.card div { padding:1.1rem; } .card h3 { margin:0 0 .4rem; } .card small { display:block; color:#4a5670; }

/* ===== Steps / why / cta ===== */
.steps { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; }
.steps span { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:var(--blue); color:#fff; font-weight:700; }
.why { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.why li { background:#fff; padding:1.2rem; border-radius:var(--radius); border-left:4px solid var(--blue); font-weight:600; }
.cta { background:var(--navy); color:#fff; text-align:center; padding:4rem 0; }

/* ===== Forms & legal ===== */
form { display:grid; gap:.4rem; } label { font-weight:600; margin-top:.6rem; }
input, textarea { padding:.7rem; border:1px solid #9aa6bd; border-radius:8px; font:inherit; }
.err { color:#b00020; font-size:.9rem; min-height:1.1em; }
#form-status { font-weight:600; }
.note { background:var(--alt); padding:1rem; border-radius:8px; }
.legal h2 { font-size:1.3rem; margin:1.8rem 0 .4rem; }

/* ===== Footer ===== */
.site-footer { background:#071230; color:#d6def0; padding:3rem 0 1rem; }
.site-footer a { color:#d6def0; }
.foot { display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; }
.foot ul { flex-direction:column; gap:.4rem; }
.copy { text-align:center; margin-top:2rem; font-size:.9rem; }

/* ===== Mobile ===== */
@media (max-width:820px) {
  .menu-btn { display:block; }
  nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; padding:1rem; box-shadow:0 8px 12px rgba(0,0,0,.1); }
  nav.open { display:block; } nav ul { flex-direction:column; }
  .bar > .btn { display:none; }
  .foot { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }