:root{
  --ink:#01050f;
  --bg:#f7f9fc;
  --surface:#ffffff;
  --muted:#4b505a;
  --line:#e6eaf2;
  --brand:#112964;
  --accent:#3b82f6;
  --red: #871741;
  --radius:8px;
  --dock-h:100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--surface);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial}
a{color:inherit;text-decoration:none}
/* Seamless background */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(59,130,246,.10), transparent 60%),
              radial-gradient(900px 600px at -10% 20%, rgba(37,99,235,.08), transparent 55%);
}
/* Light section helpers that work with your existing CSS tokens */
    .section{max-width:1100px;margin:0 auto;padding:28px 16px}
    .section.narrow{max-width:900px;
    padding-inline: 1rem;
  padding-block: 3rem;}
    .grid{display:grid;gap:14px}
    .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid.cols-4{grid-template-columns:1fr}
    @media (max-width: 900px){ .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr} }
    @media (max-width: 640px){ .grid.cols-3,.grid.cols-4{grid-template-columns:1fr} }

    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
    .kicker{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#871741;background: var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 12px;margin-bottom:8px}
    .h1, .hero-title{letter-spacing:-.4px}
    .h2{font-size:22px;font-weight:800;margin:8px 0;color:var(--ink);text-align:center}
    .lead{font-size:16px;color:var(--muted);text-align:center;;margin:6px auto 0}
    .list{margin:0;padding-left:18px}
    .list li{margin:6px 0}

    /* Icon chip for services/process */
    .row{display:flex;gap:12px;align-items:flex-start}
    .ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:#fff}
    .ic svg{width:18px;height:18px;opacity:.9}

    /* FAQ (native details/summary) */
    details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
    details + details{margin-top:10px}
    summary{cursor:pointer;font-weight:700}
    summary::marker{color:var(--brand)}

    /* Footer */
    .site-footer{border-top:1px solid var(--line);background:#fff}
    .site-footer-inner{max-width:1100px;margin:0 auto;padding:20px 16px;color:var(--muted);font-size:13px}
    .site-footer .links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
    .site-footer a{color:var(--brand);text-decoration:underline}


/* Header */
.brandbar{position:sticky;top:0;z-index:40;background:var(--brand); }
.brandbar-inner{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.brand-actions{margin-left:auto;display:flex;gap:10px;align-items:center}

/* App step bar */
.appbar{background:transparent;border-bottom:0}
.appbar-inner{max-width:960px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px}
.app-title{font-weight:700;font-size:16px;color:var(--surface)}
.app-meta{margin-left:auto;font-size:13px;color:var(--muted)}
.brand-logo{display:block; color: var(--surface);}
/* Progress */
.progress{position:sticky;top:0;z-index:30;height:4px;background:#e9eef9}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .25s ease}

/* Content */
h1,.h1{font-size:28px;font-weight:800;color:var(--ink);margin:14px 0 8px;letter-spacing:-0.2px;text-align:center;}
.section-sub{font-size:15px;color:var(--ink);margin:4px 0 14px;text-align:center}

.shell{height:calc(100vh - 4px - var(--dock-h));display:flex;flex-direction:column;overflow:hidden}
.body{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.content{flex:1;min-height:0;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding-top:40px}
.content-inner{max-width:720px;margin:0 auto;padding:20px 16px;width:100%;max-height:100%;overflow:hidden}


/* Dock */
.dock{position:fixed;left:0;right:0;bottom:0;background:#f2f2f2;border-top:1px solid var(--line);z-index:50}
.dock-inner{max-width:960px;margin:0 auto;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
@media(max-width:640px){.dock-inner{grid-template-columns:1fr}}

/* Inputs */
.input,.select{width:100%;padding:14px 14px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;font-size:16px;min-height:48px;outline:none;transition:border .2s,box-shadow .2s}
.input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,0.2)}

/* Options (blocks with light icons) */
.options{display:flex;flex-direction:column;gap:10px}
.option{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);cursor:pointer;transition:background .12s,border .12s,transform .06s}
.option:hover{border-color:#c9d5ee}
.option:active{transform:translateY(1px)}
.option .mark{width:22px;height:22px;border-radius:999px;border:2px solid #c9d5ee;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#fff;background:#fff;flex:0 0 auto}
.option .icon{width:18px;height:18px;flex:0 0 auto;opacity:.8}
.option.active{border-color:var(--brand);background:linear-gradient(0deg, rgba(37,99,235,.06), rgba(37,99,235,.06))}
.option.active .mark{border-color:var(--brand);background:var(--brand);}
.option .label{flex:1;font-weight:700;color: var(--ink); font-size: 1.15rem; text-align: left;}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:8px;border:1px solid var(--line);background:#fff;color:black;font-weight:700;cursor:pointer;font-size:15px; width: auto;}
@media (max-width: 640px) { .btn { width: 50%; } }
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:linear-gradient(90deg,var(--brand),var(--accent));border-color:var(--brand)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* Error styles */
.input.error, .select.error { border-color:#dc2626 !important; box-shadow:0 0 0 2px rgba(220,38,38,.12) !important; }
.error-text{ font-size:12px; color:#b91c1c; margin-top:4px }

/* Bottom sheet disclosures */
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.sheet{position:fixed;left:0;right:0;bottom:-80vh;background:#fff;border-top:2px solid var(--brand);border-radius:12px 12px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.12);max-height:80vh;display:flex;flex-direction:column;transition:transform .25s ease;transform:translateY(100%);z-index:50}
.sheet.open{transform:translateY(0)}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.sheet-title{font-weight:800;color:var(--ink)}
.sheet-body{padding:14px 16px;overflow:auto}
.sheet-actions{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.link{color:var(--brand);text-decoration:underline;font-weight:600}

/* Animations */
@media (prefers-reduced-motion: no-preference){
  .fade-in{animation:fadeIn .20s ease both}
  .fade-out{animation:fadeOut .16s ease both}
  .slide-in-up{animation:slideInUp .22s cubic-bezier(.2,.7,.2,1) both}
  .slide-out-down{animation:slideOutDown .18s cubic-bezier(.2,.7,.2,1) both}
  .tap{transform:scale(.98); transition:transform .06s}
  .option:hover{transform:translateY(-1px)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideInUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
@keyframes slideOutDown{from{opacity:1; transform:translateY(0)}to{opacity:0; transform:translateY(6px)}}

/* Landing */
.kicker-hero{display:inline-block; font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:#282b3000;border:1px solid #d4e0ff;border-radius:999px;padding:4px 8px;
  margin-bottom:8px;
  max-width: 5.5rem;
text-align: center;}
    .h1, .hero-title{letter-spacing:-.4px}
.hero {
  width: 100%;
  background-color: var(--ink);
  background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(1, 5, 15, 0.75);
  z-index: 1;
}

.hero-min{max-width:866px;margin:0 auto;padding:2rem 1.5rem;position:relative;z-index:2;}
.hero-title{font-size:clamp(28px, 6vw, 52px);font-weight:900;letter-spacing:-.4px;margin:8px 0;color:var(--surface);text-align:left;}
@media (max-width: 640px) { .hero-title { max-width: 90%; } }
.hero-sub{font-size:clamp(15px,2.8vw,18px);color:var(--line);text-align:left;margin:6px 0 14px;max-width:500px}
.hero-cta{display:flex;gap:12px;justify-content:flex-start;flex-wrap:nowrap; margin-top:3rem;}
.trust{display:none;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.trust .chip{background:#eef4ff;border:1px solid #d9e4ff;padding:6px 10px;border-radius:999px;font-weight:600;color:#183a8f;font-size:12px}

.h2 {
  text-align: left;
}
.lead {
  text-align: left;
}

.ic {
  color: var(--brand);
}

#services-bg,#why-bg{
  background-color: #f6f6f6;
}

#cta-bg {
  background-color: var(--ink);
}

#cta {
  padding-inline: 1.5rem;
  padding-block: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
}
#cta .h2 {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--surface);
  margin: 0;
  white-space: nowrap;
}

#cta .btn.primary {
  background-color: var(--brand);
  margin-top: 3rem;
  width: auto;
  min-width: 200px;
}

#cta .kicker {
  background-color: #01050f00;
  color: var(--surface);
  margin-bottom: 2rem;
}

#cta .lead {
  text-align: center;
  color: var(--surface);
  max-width: 400px;
}



.btn-wrapper {
  display: flex;
  column-gap: 1rem;
}

#headline {
  color: var(--ink)
}

#sub {
  color: var(--muted);
}

.header-btn{display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:8px;border:1px solid var(--red);background:#ffffff00;color:var(--surface);font-weight:700;cursor:pointer;font-size:12px; max-width: 150px;}

.section {
  max-width: 866px;
}