:root{
  --bg:#0A1A2F;
  --ink:#0F172A;
  --muted:#475569;
  --wash:#F3F4F6;
  --card:#FFFFFF;
  --accent:#C41E3A; /* Cardinal */
  --accent-2:#D8B866; /* Gold */
  --link:#1D4ED8;
  --success:#15803D;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--wash);
  line-height:1.6;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}
.header{
  background:linear-gradient(120deg, var(--bg), #12243F);
  color:#fff;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 0;
}
.brand a{color:#fff;font-weight:800;letter-spacing:.3px;font-size:1.1rem}
.nav{display:flex;gap:.75rem;flex-wrap:wrap}
.nav a{color:#cbd5e1;padding:.4rem .6rem;border-radius:.4rem}
.nav a:hover, .nav a[aria-current="page"]{background:#1f2f4a;color:#fff}
.hamburger{display:none;background:none;border:none;color:#fff;font-size:1.25rem}
@media (max-width: 820px){
  .nav{display:none;flex-direction:column;background:#0F223C;padding:.75rem;border-radius:.5rem;margin-top:.5rem}
  .hamburger{display:block}
  .nav.open{display:flex}
}
.hero{
  padding:3.5rem 0 2.5rem;
}
h1{line-height:1.2;margin:.2rem 0 1rem}
h2{line-height:1.25;margin:2rem 0 1rem}
h3{line-height:1.3;margin:1.5rem 0 .75rem}
p{margin:0 0 1rem}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent-2);font-size:.8rem}
.lede{font-size:1.125rem;color:#e2e8f0;max-width:60ch}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.btn{
  display:inline-block;background:var(--accent);color:#fff;
  border:none;border-radius:.5rem;padding:.7rem 1rem;font-weight:700
}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:transparent;color:#fff;border:1.5px solid #94A3B8}
.section{padding:2.25rem 0}
.grid-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width: 880px){
  .grid-3, .grid-2{grid-template-columns:1fr}
}
.card{
  background:var(--card);border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.card h3{margin-top:.25rem}
.badge{display:inline-block;background:#E2E8F0;color:#334155;padding:.2rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:700}
.quote{
  border-left:4px solid var(--accent);padding-left:1rem;color:#334155;background:#fff;border-radius:.25rem
}
.footer{
  background:#0B1424;color:#cbd5e1;padding:2rem 0;margin-top:2rem
}
.footer a{color:#e2e8f0}
.list-clean{list-style:none;margin:0;padding:0}
.small{font-size:.9rem;color:#475569}
.lead{font-size:1.05rem}
.callout{
  border:1.5px dashed #CBD5E1;background:#fff;padding:1rem;border-radius:.5rem
}
.kpis{display:flex;gap:1rem;flex-wrap:wrap}
.kpi{background:#0F223C;color:#cbd5e1;border-radius:.75rem;padding:1rem;flex:1;min-width:220px}
.kpi strong{display:block;color:#fff;font-size:1.5rem;margin-bottom:.25rem}
.figure{display:block;width:100%;min-height:140px;background:linear-gradient(135deg,#e2e8f0,#f8fafc);border-radius:.5rem;border:1px solid #e5e7eb}
.sep{height:1px;background:#e5e7eb;margin:1.25rem 0}
.notice{background:#FDF2F2;border:1px solid #FCA5A5;padding:.75rem;border-radius:.5rem;color:#7F1D1D}

/* === SecureSynergy Brand: Cognitive Core Logo === */
.brand-link { display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.brand-logo  { height:40px; width:auto; display:block; }

@media (max-width: 640px){
  .brand-logo { height:32px; }
}

/* Accessible helper for offscreen text */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Ensure logo reads on dark headers */
.header .brand-logo { filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }


/* === Footer: Four Pillars line === */
.footer-brand .pillars{
  margin:.25rem 0 0;
  font-size:0.9rem;
  line-height:1.35;
  color:var(--muted, #6b6b6b);
  letter-spacing:.15px;
}
@media (max-width:480px){
  .footer-brand .pillars{
    font-size:0.95rem;
  }
}