:root{
  --primary:#0f4c81;
  --primary-2:#1b6ca8;
  --accent:#17a2b8;
  --dark:#102033;
  --text:#445469;
  --muted:#6c7a89;
  --light:#f4f7fb;
  --white:#ffffff;
  --border:#dbe4ee;
  --success:#1c8c5e;
  --shadow:0 10px 30px rgba(16,32,51,.08);
  --radius:18px;
  --radius-sm:12px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7;
}

h2,h3 {font-weight: 700 !important;}

img{max-width:100%;height:auto;display:block}
a{color:var(--primary-2);text-decoration:none}
a:hover{color:var(--primary)}
.container{max-width:var(--max)}
.navbar{
  border-bottom:1px solid rgba(16,32,51,.06);
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:saturate(140%) blur(8px);
}
.navbar-brand{
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--dark)!important;
}
.nav-link{
  color:var(--dark)!important;
  font-weight:600;
  padding:5px 12px !important;
  border-radius:3px;
}
.nav-link:hover,.nav-link.active{background:#eaf3fb;color:var(--primary)!important}
.btn{
  border-radius:3px;
  font-weight:700;
  padding:5px 12px;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border:none;
  box-shadow:0 12px 28px rgba(15,76,129,.22);
}
.btn-outline-light:hover{color:var(--dark)!important}
.hero{
  background:
   radial-gradient(circle at top right, rgba(23,162,184,.15), transparent 30%),
   linear-gradient(135deg,#0f2744 0%, #123d68 60%, #185786 100%);
  color:#fff;
  padding:5.5rem 0 4.5rem;
}
.hero h1,.page-hero h1{font-size:clamp(2.3rem,5vw,4.1rem);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.hero p,.page-hero p{font-size:1.1rem;color:rgba(255,255,255,.9);max-width:700px}
.hero-card{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  border-radius:24px;
  padding:1.2rem;
  box-shadow:var(--shadow);
}
.hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1.25rem;
}
.metric{
  background:rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem;
  border:1px solid rgba(255,255,255,.1);
}
.metric strong{display:block;font-size:1.35rem;color:#fff}
.metric span{font-size:.92rem;color:rgba(255,255,255,.84)}
.page-hero{
  padding:4rem 0;
  background:linear-gradient(135deg,#10263d 0%,#184a73 100%);
  color:#fff;
}
main section{padding:4.5rem 0}
.section-intro{max-width:760px;margin-bottom:2rem}
.eyebrow{
  display:inline-block;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  color:var(--accent);
  margin-bottom:.8rem;
}
.card-grid{display:grid;gap:1.5rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.info-card,.article-card,.contact-card,.compare-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.6rem;
  box-shadow:var(--shadow);
  height:100%;
}
.info-card h3,.article-card h3,.contact-card h3,.compare-card h3{font-size:1.3rem;color:var(--dark)}
.icon-badge{
  width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;
  background:#eaf3fb;margin-bottom:1rem;
}
.icon-badge img{width:28px;height:28px}
.soft-bg{background:var(--light)}
.check-list,.plain-list{padding-left:0;list-style:none}
.check-list li,.plain-list li{
  position:relative;padding-left:1.8rem;margin-bottom:.8rem
}
.check-list li:before{
  content:"✓";position:absolute;left:0;top:0;color:var(--success);font-weight:800
}
.plain-list li:before{
  content:"•";position:absolute;left:.2rem;top:0;color:var(--primary);font-weight:800
}
.compare-table{
  width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;
  border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);background:#fff
}
.compare-table th,.compare-table td{padding:1rem 1.1rem;border-bottom:1px solid var(--border);vertical-align:top}
.compare-table th{background:#eff5fb;color:var(--dark);font-size:1rem}
.compare-table tr:last-child td{border-bottom:none}
.callout{
  background:#0f4c81;color:#fff;padding:2rem;border-radius:24px;box-shadow:var(--shadow)
}
.callout h2,.callout h3,.callout p{color:#fff}
.faq-item{
  border:1px solid var(--border);border-radius:16px;padding:1.25rem 1.3rem;background:#fff;box-shadow:var(--shadow);margin-bottom:1rem
}
.faq-item h3{font-size:1.08rem;margin-bottom:.45rem}
.resource-meta{font-size:.9rem;color:var(--muted);margin-bottom:.6rem}
.article-list .article-card{margin-bottom:1.5rem}
.contact-form{
  background:#fff;border:1px solid var(--border);border-radius:22px;padding:1.75rem;box-shadow:var(--shadow)
}
.form-label{font-weight:700;color:var(--dark)}
.form-control,.form-select{
  border:1px solid #cfd9e5;border-radius:14px;padding:.9rem 1rem;min-height:52px
}
.form-control:focus,.form-select:focus{
  border-color:var(--primary-2);box-shadow:0 0 0 .2rem rgba(27,108,168,.13)
}
textarea.form-control{min-height:150px}
.sidebar-box{
  background:#fff;border:1px solid var(--border);border-radius:20px;padding:1.4rem;box-shadow:var(--shadow);margin-bottom:1.3rem
}
footer{
  background:#0c1725;color:rgba(255,255,255,.84);padding:2.4rem 0 1.7rem
}
footer a{color:#fff}
.footer-note{
  font-size:.95rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:1rem;
}
.feature-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:-2rem
}
.feature-pill{
  background:#fff;border:1px solid var(--border);border-radius:20px;padding:1rem 1.1rem;box-shadow:var(--shadow)
}
.feature-pill strong{display:block;color:var(--dark)}
.image-frame{
  border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow)
}
.article-image{
  border-radius:20px;margin-bottom:1rem;border:1px solid var(--border)
}
.small-muted{color:var(--muted);font-size:.95rem}
@media (max-width:991px){
  .grid-3,.feature-strip{grid-template-columns:1fr 1fr}
  .hero{padding-top:4.4rem}
}
@media (max-width:767px){
  .grid-3,.grid-2,.feature-strip,.hero-metrics{grid-template-columns:1fr}
  main section{padding:3.5rem 0}
  .hero,.page-hero{padding:3.5rem 0}
  .navbar .btn{margin-top:.8rem}
  .btn{width:100%}
}