:root{
  /* Blues */
  --blue-900:#0B1E39; --blue-800:#112B4A; --blue-700:#163B61; --blue-600:#1E5486;
  --blue-500:#2A6BAA; --blue-400:#4A90D4; --blue-300:#7BB7F1; --blue-200:#B7DAFF;
  --blue-120:#E6F0FF;  /* very light blue (NOT white) */
  --blue-100:#E9F4FF;

  /* Text + accents */
  --text-dark:#0b1220; --text-light:#ffffff;

  /* Semantics */
  --warn-bg:#FFF4CC; --warn-border:#F5C542; --warn-text:#5E4A00;
  --error-bg:#FDE2E1; --error-border:#E53E3E; --error-text:#5E0B0B;

  --radius:16px; --pad:1.25rem; --shadow:0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background:linear-gradient(160deg,var(--blue-900),var(--blue-800));
  color:var(--text-light);
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}

/* Header + hero */
.site-header{
  background:var(--blue-900); color:var(--text-light);
  position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.nav a{color:#dce9ff;text-decoration:none;margin-left:1rem}
.hero{
  background:linear-gradient(180deg,var(--blue-800),var(--blue-700));
  color:var(--text-light); padding:4.5rem 0 3.25rem; text-align:center;
}
.cta{
  display:inline-block; background:#fff; color:var(--blue-800); font-weight:700;
  padding:.9rem 1.2rem; border-radius:999px; text-decoration:none; box-shadow:var(--shadow);
}
.section{padding:2.25rem 0}

/* >>> “What we do” section: VERY light blue (no white) */
.lighter{ background: var(--blue-120) !important; color: var(--text-dark) !important; }

/* Cards: distinct darker blue so they pop */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.card{
  background: var(--blue-400) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--radius); padding: var(--pad);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.card h3{ color:#fff !important; }
.card p{ color: rgba(255,255,255,.92) !important; }

/* Mid strip & footer */
.mid{background:var(--blue-600); color:var(--text-light)}
.site-footer{
  background:var(--blue-900); color:#cbd5e1; padding:1.1rem 0; text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Alerts */
.alert{border-radius:12px;padding:1rem 1.1rem;margin:.75rem 0;border:1px solid transparent}
.alert.warn{background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text)}
.alert.error{background:var(--error-bg); border-color:var(--error-border); color:var(--error-text)}

/* Ping page inputs/output adopt very light blue */
#out,#msg{background:var(--blue-120)!important;color:var(--text-dark)!important}
/* Pills/badges */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.pill{display:inline-block;border-radius:999px;padding:.35rem .7rem;font-weight:700;border:1px solid rgba(0,0,0,.06)}
.pill.light{background:var(--blue-200);color:var(--text-dark)}
.pill.dark{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.lead{opacity:.92;max-width:780px;margin:.25rem auto 1.25rem;font-size:1.125rem}