:root{
  --navy:#0a1a33;
  --navy-dark:#071122;
  --teal:#00b3b3;
  --teal-dark:#009999;
  --text:#e8ecef;
  --text-dim:#b7c1cc;
  --card:#132541;
  --card-hover:#1a3356;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--navy);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1060px;margin:0 auto;padding:0 20px}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(7,17,34,.9);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:58px;
}
.brand{color:var(--teal); font-weight:700; text-decoration:none}
.navlinks{display:flex; gap:16px; align-items:center}
.navlinks a{color:var(--text); text-decoration:none; opacity:.92}
.navlinks a:hover{text-decoration:underline}

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%);
  padding:72px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-inner{display:flex; align-items:center; gap:28px}
.logo{width:84px; height:auto; flex:0 0 auto}
.hero-copy h1{margin:0 0 6px; font-size:2.2rem; font-weight:700; color:var(--teal)}
.kicker{margin:4px 0 10px; color:var(--text-dim)}
.pillars{margin:0 0 18px; color:var(--text)}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}

/* Sections */
.section{padding:60px 0}
.section.alt{background:var(--navy-dark)}
.section-title{margin:0 0 16px; font-size:1.6rem; color:var(--teal)}
.lead{color:var(--text); margin:6px 0 14px}

/* Service blocks */
.service{background:var(--card); border-radius:12px; padding:18px 18px 14px; margin:14px 0; box-shadow:0 2px 10px rgba(0,0,0,.18)}
.service h3{margin:4px 0 8px}
.points{margin:0 0 8px; padding-left:18px}
.points li{margin:6px 0}
.learn{color:var(--teal); text-decoration:none}
.learn:hover{text-decoration:underline}

/* Narrow detail sections */
.narrow{max-width:820px}
.bullets{list-style:disc; padding-left:20px}
.bullets li{margin:6px 0}

/* Cards grid for Insights */
.grid{display:grid; gap:18px}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.post{
  display:block; text-decoration:none; color:var(--text);
  background:var(--card); border-radius:12px; padding:18px; box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .2s ease, background .2s ease;
}
.post h3{margin:0 0 8px; color:var(--white)}
.post p{margin:0 0 12px; color:var(--text-dim)}
.post:hover{transform:translateY(-3px); background:var(--card-hover)}

/* CTA band */
.cta{background:var(--navy-dark); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:18px}

/* Footer */
.footer{background:var(--navy-dark); color:#93a3b8; font-size:.95rem; padding:22px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-block; white-space:nowrap;
  background:var(--teal); color:var(--white);

  /* --- Blog enhancements --- */
.post-cover img{width:100%;height:auto;border-radius:12px;margin:10px 0 16px;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.post-tags{margin:8px 0 18px;display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;font-weight:600;border:1px solid rgba(255,255,255,.08)}
.tag:hover{background:var(--card-hover)}
.tag-date{color:#93a3b8;margin-left:8px;font-size:.9rem}
.tags-cloud{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 24px}
.tag-head{margin-top:28px}
.tag-list{list-style:none;padding:0;margin:0 0 20px}
.tag-list li{margin:6px 0}

.newsletter-card{
  background:var(--card); padding:18px; border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.18)
}
.newsletter-card form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.newsletter-card label{width:100%;color:var(--text-dim)}
.newsletter-card input{
  flex:1 1 260px; min-width:220px;
  padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);
  background:#0e203d;color:var(--text)
}
.newsletter-card button{margin-left:auto}