:root{
  --brand-900:#0B2E4D;
  --brand-700:#173A63;
  --brand-500:#1F7ABF;
  --brand-300:#8EC5F8;
  --accent-500:#F37822;
  --bg:#F8FAFD;
  --card:#FFFFFF;
  --text:#0E1013;
  --muted:#5B6470;
  --radius:18px;
  --shadow:0 10px 24px rgba(11,46,77,.08);
}
*{box-sizing:border-box}
body.has-theme{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
h1{font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-.02em;margin:0 0 8px}
h2{font-size:clamp(24px,3.5vw,34px);letter-spacing:-.01em;margin:0 0 8px}
p{margin:0 0 10px}
a{color:var(--brand-700);text-decoration:none}
.container{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:clamp(18px,2vw,28px);padding-right:clamp(18px,2vw,28px)}
.section{padding:clamp(42px,6vw,84px) 0}
.section + .section{border-top:1px solid #EEF2F9}

.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;background:var(--accent-500);color:#fff;padding:14px 20px;border-radius:999px;box-shadow:var(--shadow);border:0;cursor:pointer;transition:.2s transform}
.btn:hover{transform:translateY(-1px)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:18px;align-items:start}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* Nav */
.nav{position:sticky;top:0;background:#fff;border-bottom:1px solid #EDF2F7;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav a{color:var(--brand-900);font-weight:600}

/* HERO — light overlay so photo shows more */
.hero{
  position:relative;
  background: linear-gradient(180deg,rgba(255,255,255,.60),rgba(241,247,254,.78)), url('https://images.pexels.com/photos/259588/pexels-photo-259588.jpeg?auto=compress&cs=tinysrgb&w=2000&h=1200&dpr=1') center/cover no-repeat;
}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;gap:28px;grid-template-columns:1.1fr .9fr;align-items:start}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero h1{ text-shadow:0 1px 1px rgba(0,0,0,.12) }
.hero p{ text-shadow:0 1px 1px rgba(0,0,0,.10) }

/* Form */
.form{--b:#D6E4F5;--b-focus:#8EC5F8;background:#fff;border:1px solid var(--b);border-radius:22px;box-shadow:var(--shadow);padding:22px}
.input{width:100%;padding:14px;border:1.5px solid #e4edf8;border-radius:14px;background:#fff;transition:border-color .2s, box-shadow .2s;margin-bottom:10px}
.input:focus{outline:none;border-color:var(--b-focus);box-shadow:0 0 0 4px rgba(143,197,248,.25)}
.form .btn{width:100%}

/* Trust boxes */
.trust-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.trust-item{background:#fff;border:1px solid #E6EDF5;border-radius:14px;padding:12px 14px;display:flex;gap:10px;align-items:center}
.trust-dot{width:10px;height:10px;border-radius:50%;background:#18A957;flex:0 0 10px}

/* Benefits (equal height) */
#benefits{background:#FFFFFF}
#benefits .grid{align-items:stretch}
.benefit-card{padding:0;overflow:hidden;display:flex;flex-direction:column;height:100%}
.benefit-img{height:156px;min-height:156px;overflow:hidden}
.benefit-img img{width:100%;height:100%;object-fit:cover;display:block}
.benefit-body{padding:18px;flex:1;display:flex;flex-direction:column;justify-content:space-between}

/* How It Works */
#how{background:#F3F7FD}
.steps{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border:1px solid #E8EEF7;border-radius:18px;box-shadow:0 18px 36px rgba(12, 38, 64, .08);padding:22px}
.step:before{
  content: attr(data-step);
  position:absolute; left:14px; top:-14px;
  background:#F4B000; color:#111; font-weight:800;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:12px; box-shadow:0 6px 16px rgba(11,46,77,.12);
}
.step h3{margin-top:8px}

/* Compare */
#compare{background:#F3F7FD}
.compare{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.compare{grid-template-columns:1fr}}
.compare .item{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #E6EDF5;border-radius:12px;background:#fff}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:.85rem;font-weight:700}
.badge.good{background:#E6F9EA;color:#146C2E;border:1px solid #BDEBC7}
.badge.warn{background:#FFF3D6;color:#7A4C00;border:1px solid #FFE3A6}

/* Testimonials */
.section.testimonials{background:#FFFFFF}
.section.testimonials .grid .card{height:100%;display:flex;flex-direction:column;justify-content:space-between}
blockquote{margin:0}

/* Areas */
#areas{background:#F3F7FD}
#areas .container > .card{padding-left:22px;padding-right:22px}

/* FAQ */
#faq{background:#FFFFFF}
.faq{display:grid;gap:12px}
.faq-item{border:1px solid #E6EDF5;border-radius:14px;overflow:hidden;background:#fff}
.faq-q{padding:18px 20px;font-weight:700;cursor:pointer}
.faq-a{padding:0 20px 18px 20px;display:none;color:var(--muted)}
.faq-item.open .faq-a{display:block}

/* CTA */
.cta-wrap{background:linear-gradient(180deg,#f7faff,#edf4ff);padding:28px 0}
.cta-pill{background:#fff;border:1px solid #f1e0cc;border-radius:16px;box-shadow:0 10px 24px rgba(11,46,77,.08);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 18px}
.cta-pill h3{margin:0}
.cta-pill p{margin:4px 0 0;color:#6a7180}

/* Footer */
.footer{background:#071E34;color:#e7eef7}
.footer a{color:#8EC5F8}
.footer .grid{grid-template-columns:1.2fr .8fr}
.footer .links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:900px){.footer .grid{grid-template-columns:1fr}}