/* FlowSignal Light Styles */

:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --ink:#0b1b33;
  --muted:#4f6380;
  --border:rgba(11,27,51,.1);
  --navy:#0b1b33;
  --teal:#19c0c4;
  --shadow:0 12px 30px rgba(11,27,51,.1);
  --radius:18px;
  --container:1120px;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--ink);
  background:var(--bg);
}

.container{
  width:min(var(--container),100% - 48px);
  margin:auto;
}

.section{padding:72px 0;}
.section-muted{background:rgba(11,27,51,.02);}

h1,h2,h3{margin:0 0 16px;letter-spacing:-.02em;}
h1{font-size:48px;}
h2{font-size:36px;}

.subtitle{color:var(--muted);max-width:72ch;}
.lede{max-width:72ch;}
.muted{color:var(--muted);}

.site-header{background:#0b1b33;color:#fff;position:sticky;top:0;}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;text-decoration:none;}
.brand-mark{width:14px;height:14px;border-radius:6px;background:linear-gradient(135deg,var(--teal),#4aa3ff);}

.nav a{color:rgba(255,255,255,.85);margin-right:12px;text-decoration:none;}

.btn{padding:12px 16px;border-radius:999px;border:1px solid transparent;font-weight:700;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-secondary{border:1px solid var(--border);}

.cta-row{display:flex;gap:12px;margin-top:18px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;}}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}

.diagram-card{padding:0;overflow:hidden;}
.diagram-card img{width:100%;display:block;}

.site-footer{padding:24px 0;border-top:1px solid var(--border);}
.footer-inner{display:flex;justify-content:space-between;}
/* Let the architecture breathe */
.diagram-card{
  padding: 12px;
}

.diagram-card img{
  border-radius: 12px;
}