:root {
  --turquoise: #08F2FF;
  --sand: #F7EBD6;
  --navy: #1D2D50;
  --slate: #3C4A5C;
  --ink: #0f172a;
}
* { box-sizing: border-box }
html:focus-within { scroll-behavior: smooth }
html, body { margin: 0; padding: 0; background:#fff; color:var(--ink); }
a { color: var(--navy); text-decoration: none }
a:focus, a:hover { text-decoration: underline; outline-offset: 2px }
.container { max-width:1080px; margin:0 auto; padding:0 20px }
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: fixed; left: 16px; top: 12px; width:auto; height:auto;
  background:#fff; border:2px solid var(--navy); padding:8px 12px; z-index:9999; }
header { position: sticky; top:0; z-index:40; background:#fff;
  border-bottom:1px solid #e9eef5; backdrop-filter:saturate(120%) blur(6px); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ width:56px; height:56px }
.brand h1{ font-family: Montserrat, Arial, sans-serif; font-weight:800; font-size:20px; letter-spacing:.6px; color:var(--navy); margin:0 }
.tagline{ font:600 12px/1 Inter, system-ui, sans-serif; color:var(--slate); letter-spacing:2px; text-transform:uppercase }
nav a{ font:600 14px/1 Inter, system-ui, sans-serif; padding:8px 10px; border-radius:8px }
nav a.cta{ background:linear-gradient(90deg, var(--turquoise), #2B75D8); color:#fff; border:none }
nav a:focus-visible{ outline:3px solid var(--turquoise) }
.hero{ padding:72px 0 56px }
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center }
.hero h2{ font-family: Montserrat, Arial, sans-serif; font-weight:800; font-size:44px; line-height:1.12; margin:0 0 14px; color:var(--ink) }
.hero .lede{ font:400 18px/1.7 Inter, system-ui, sans-serif; color:#334155; margin:0 0 22px }
.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; font:600 15px/1 Inter, sans-serif }
.btn.primary{ background:linear-gradient(90deg, var(--turquoise), #2B75D8); color:#fff; box-shadow:0 10px 24px rgba(43,117,216,.18) }
.btn.secondary{ border:1px solid #e5e7eb; color:var(--navy); background:#fff }
.crest{ width:100%; max-width:420px; justify-self:center; filter:drop-shadow(0 18px 32px rgba(29,45,80,.12)) }
section{ padding:48px 0; border-top:1px solid #f3f5f8 }
h3{ font:800 24px/1.2 Montserrat, Arial, sans-serif; margin:0 0 10px; color:var(--navy) }
p{ font:400 16px/1.8 Inter, system-ui, sans-serif; margin:0 0 16px }
.card{ border:1px solid #e9eef5; border-radius:16px; padding:18px; background:#fff; box-shadow:0 12px 22px rgba(13,31,56,.05) }
.pill{ display:inline-block; border-radius:999px; padding:6px 10px; background:rgba(31,119,194,.06); color:#1f77c2; font:600 12px/1 Inter, sans-serif; letter-spacing:.8px; text-transform:uppercase }
.splitter{ height:2px; background:linear-gradient(90deg, transparent, var(--turquoise), transparent); opacity:.6; margin-top:36px }
footer{ background: var(--navy); color:#e6edf7; padding:36px 0; text-align:center }
footer a{ color:#cfe8ff }
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr }
  .crest{ order:-1 }
  .brand h1{ font-size:18px }
  .hero h2{ font-size:34px }
}