/* SecRouter site — per designer handoff. Warm sand + dark olive bands; IBM Plex. */
:root {
  --ink:#17140d; --muted:#5b5b4d; --muted2:#6f7359; --muted3:#8a8a78;
  --olive:#54672f; --olive-deep:#445226; --olive-dark:#232a16; --olive-panel:#2e3720;
  --olive-light:#aebb78; --olive-pale:#dfe4c4; --olive-pale2:#cdd6a6; --olive-mid:#6b7d3f;
  --bg:#ece8dc; --bg-alt:#e3dfd1; --card:#f5f3ea; --chip:#ece8dc;
  --border:#ddd9cb; --border-2:#d6d2c6; --border-3:#e0ddd0; --border-dark:#3a4226;
  --on-dark:#f5f3ea; --on-dark-mut:#c2c2b1; --on-dark-mut2:#a7a795; --on-dark-mut3:#9a9a88;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
::selection { background:var(--olive); color:var(--on-dark); }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5 { margin:0 0 .5em; }
.mono { font-family:var(--mono); }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.center { text-align:center; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:12px; background:var(--olive); color:var(--on-dark); padding:8px 12px; border-radius:4px; z-index:100; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; font:600 13px/1 var(--mono);
  text-transform:uppercase; letter-spacing:.04em; padding:13px 22px; border-radius:4px; border:1px solid transparent; cursor:pointer; transition:.16s ease; white-space:nowrap; }
.btn-lg { padding:16px 30px; }
.btn-solid { background:var(--olive); color:var(--on-dark); border-color:var(--olive); }
.btn-solid:hover { background:var(--olive-deep); border-color:var(--olive-deep); }
.btn-hero { background:var(--olive-pale); color:var(--olive-dark); padding:15px 26px; }
.btn-hero:hover { background:#fff; }
.btn-outline-dark { background:transparent; color:var(--on-dark); border-color:#45502c; padding:15px 26px; }
.btn-outline-dark:hover { border-color:#7d8a55; }
.btn-outline { background:transparent; color:var(--ink); border-color:#c2bdaf; }
.btn-outline:hover { border-color:var(--olive); }

/* nav */
.nav-wrap { position:sticky; top:0; z-index:50; background:rgba(236,232,220,.86); backdrop-filter:blur(8px); border-bottom:1px solid transparent; transition:border-color .2s; }
.nav-wrap.scrolled { border-bottom-color:var(--border-2); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:22px 32px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand .mark { color:var(--ink); flex:none; }
.wordmark { font:600 16px/1 var(--mono); letter-spacing:.04em; }
.wordmark .sec { color:var(--olive); }
.wordmark.light { color:var(--on-dark); font-size:15px; }
.wordmark.light .sec-l { color:var(--olive-light); }
.nav-links { display:flex; gap:34px; font:12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#4a4a3e; }
.nav-links a:hover { color:var(--ink); }
.nav-access { padding:11px 18px; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; }

/* hero */
.hero { background:var(--olive-dark); color:var(--on-dark); position:relative; overflow:hidden; }
.hero-deco { position:absolute; right:-90px; top:-40px; opacity:.10; pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; padding:96px 32px 104px; position:relative; }
.pill { display:inline-flex; align-items:center; gap:9px; font:11px/1 var(--mono); letter-spacing:.20em; text-transform:uppercase; color:var(--olive-light); border:1px solid #3d4626; border-radius:100px; padding:7px 14px; margin:0 0 30px; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:var(--olive-light); }
.hero h1 { font:600 clamp(34px,5.2vw,50px)/1.06 var(--mono); letter-spacing:-.01em; margin:0 0 24px; }
.lede { font-size:18px; line-height:1.6; color:#c9c8b8; max-width:480px; margin:0 0 36px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.trust-mini { display:flex; gap:28px; flex-wrap:wrap; margin:40px 0 0; font:11px/1.6 var(--mono); letter-spacing:.10em; text-transform:uppercase; color:#8c9170; }

/* inspected-request card */
.req-card { background:var(--card); color:var(--ink); border-radius:8px; box-shadow:0 24px 60px rgba(0,0,0,.35); overflow:hidden; font-family:var(--mono); }
.req-head { background:#e7e3d7; padding:13px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-2); }
.req-head span { font-size:11px; letter-spacing:.10em; color:var(--muted2); }
.req-ok { color:var(--olive)!important; font-size:10px; }
.req-body { padding:20px 18px; display:flex; flex-direction:column; gap:11px; font-size:12.5px; }
.req-principal { color:var(--muted3); font-size:10.5px; letter-spacing:.08em; }
.req-prompt { background:var(--chip); border:1px solid var(--border); border-radius:5px; padding:11px 13px; line-height:1.5; color:#4a4a3e; }
.tag { background:var(--olive); color:var(--on-dark); padding:1px 6px; border-radius:3px; font-style:normal; font-size:9.5px; letter-spacing:.08em; }
.req-checks { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.req-checks div { display:flex; align-items:center; gap:10px; color:#3a3a30; }
.ck { color:var(--olive); }
.req-foot { border-top:1px dashed var(--border-2); margin-top:6px; padding-top:12px; display:flex; justify-content:space-between; }
.req-foot span { font-size:11px; letter-spacing:.06em; color:var(--muted3); }

/* trust strip */
.trust { background:var(--bg-alt); border-bottom:1px solid var(--border-2); }
.trust-row { display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center; padding:20px 32px;
  font:600 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); }
.trust-row i { color:#cbc7b9; font-style:normal; }

/* generic band + headings */
.band { padding:90px 0; }
.band-tight { padding:88px 0; }
.eyebrow { font:12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px; }
.eyebrow.olive { color:var(--olive); } .eyebrow.light { color:var(--olive-light); }
.headline { font:600 clamp(26px,3.6vw,34px)/1.15 var(--mono); letter-spacing:-.01em; max-width:680px; margin:0 0 16px; }
.band h2.mono { font:600 clamp(24px,3.2vw,30px)/1.15 var(--mono); margin:0 0 8px; }
.lede-2 { font-size:17px; color:var(--muted); max-width:620px; line-height:1.6; margin:0 0 56px; }
.sub { font-size:16px; color:var(--muted); margin:0 0 48px; }

/* pillars */
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:32px 28px; }
.tile { width:42px; height:42px; border-radius:8px; background:var(--olive-dark); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.card h3 { font:600 18px/1.2 var(--mono); margin:0 0 12px; }
.card p { font-size:14.5px; color:var(--muted); line-height:1.62; margin:0; }

/* architecture */
.arch { display:grid; grid-template-columns:1fr auto 1.4fr auto 1fr; gap:18px; align-items:stretch; }
.arch-col, .arch-core { border-radius:8px; padding:24px 22px; }
.arch-col { background:var(--card); border:1px solid var(--border); }
.arch-core { background:var(--olive-dark); color:var(--on-dark); padding:24px; }
.arch-label { font:10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted3); margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.arch-label.light { color:var(--olive-light); }
.arch-chip { font:13px/1 var(--mono); padding:9px 12px; background:var(--chip); border-radius:5px; margin-top:9px; }
.arch-col .arch-chip:first-of-type { margin-top:0; }
.arch-arrow { display:flex; align-items:center; justify-content:center; color:var(--olive); font:22px var(--mono); }
.arch-steps { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.arch-steps span { font:12px/1.3 var(--mono); padding:10px 12px; background:var(--olive-panel); border-radius:5px; }
.arch-steps .span2 { grid-column:span 2; }
.arch-steps .hot { background:var(--olive); color:#f0eede; }

/* dark band (security) */
.band.dark { background:var(--olive-dark); color:var(--on-dark); }
.band.dark h2.mono { font-size:clamp(24px,3.2vw,32px); }
.sec-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; }
.on-dark-muted { color:var(--on-dark-mut); font-size:16px; line-height:1.62; margin:0 0 28px; }
.brief-link { font:12.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--olive-pale); border-bottom:1px solid var(--olive); padding-bottom:3px; }
.sec-cards { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:center; }
.sec-card { border:1px solid var(--border-dark); border-radius:8px; padding:22px; }
.sec-card h4 { font:600 14px/1 var(--mono); margin:0 0 8px; }
.sec-card p { font-size:13px; color:var(--on-dark-mut2); line-height:1.55; margin:0; }

/* spend */
.spend-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.muted-p { font-size:16px; color:var(--muted); line-height:1.62; margin:0 0 28px; }
.num-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.num-list li { display:flex; gap:14px; align-items:flex-start; font-size:14.5px; color:#3a3a30; }
.num-list .n { font-family:var(--mono); color:var(--olive); flex:none; }
.dash { background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 16px 40px rgba(40,40,20,.10); overflow:hidden; }
.dash-head { padding:16px 20px; border-bottom:1px solid var(--border-3); display:flex; align-items:center; justify-content:space-between; }
.dash-head .mono { font-size:12px; letter-spacing:.08em; color:#3a3a30; }
.olive-t { color:var(--olive)!important; font-size:11px!important; }
.dash-body { padding:22px 20px; display:flex; flex-direction:column; gap:18px; }
.dash-fig { display:flex; align-items:baseline; gap:10px; }
.dash-fig .big { font-size:34px; font-weight:600; }
.dash-fig .cap { font-size:12px; color:var(--muted3); }
.dash-bar { height:9px; background:var(--bg-alt); border-radius:6px; overflow:hidden; }
.dash-bar i { display:block; height:100%; background:var(--olive); }
.dash-rows { display:flex; flex-direction:column; gap:13px; margin-top:4px; }
.dash-row > div:first-child { display:flex; justify-content:space-between; margin-bottom:5px; }
.dash-row .mono { font-size:12px; color:#3a3a30; }
.dash-row .v { color:var(--muted2); }
.mini { height:6px; background:var(--bg-alt); border-radius:4px; overflow:hidden; }
.mini i { display:block; height:100%; background:var(--olive-mid); border-radius:4px; }

/* features grid */
.features { background:var(--bg-alt); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); padding:84px 0; }
.features h2.mono { font:600 clamp(22px,3vw,28px)/1.2 var(--mono); margin:0 0 48px; }
.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border-2); border:1px solid var(--border-2); border-radius:8px; overflow:hidden; }
.feat { background:var(--chip); padding:26px 22px; }
.feat h4 { font:600 14px/1.2 var(--mono); margin:0 0 8px; }
.feat p { font-size:13px; color:var(--muted); line-height:1.5; margin:0; }

/* cta */
.cta-mark { color:var(--ink); margin-bottom:24px; }
.cta-h { font:600 clamp(28px,4vw,38px)/1.1 var(--mono); letter-spacing:-.01em; margin:0 0 18px; }
.cta-p { font-size:17px; color:var(--muted); max-width:520px; margin:0 auto 34px; line-height:1.6; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* footer */
.site-footer { background:var(--olive-dark); color:var(--on-dark-mut); }
.footer-top { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; padding:54px 32px 40px; }
.footer-brand { max-width:300px; }
.footer-brand .brand { margin-bottom:16px; }
.footer-brand .brand .mark { color:var(--on-dark); }
.footer-brand p { font-size:13px; line-height:1.6; color:var(--on-dark-mut3); margin:0; }
.footer-cols { display:flex; gap:56px; font-family:var(--mono); font-size:12.5px; }
.footer-cols h5 { color:#7d8a55; font:11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; }
.footer-cols a { display:block; color:var(--on-dark-mut); padding:6px 0; }
.footer-cols a:hover { color:#fff; }
.footer-base { border-top:1px solid #333c22; padding:20px 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:11px/1 var(--mono); letter-spacing:.06em; color:#7a7a68; }

/* reveal */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* responsive */
@media (max-width:960px) {
  .nav-links, .nav-access { display:none; }
  .nav-toggle { display:block; }
  .nav-wrap.open .nav { flex-wrap:wrap; }
  .nav-wrap.open .nav-links { display:flex; flex-direction:column; width:100%; gap:0; order:3; margin-top:6px; }
  .nav-wrap.open .nav-links a { padding:13px 2px; border-top:1px solid var(--border-2); }
  .nav-wrap.open .nav-access { display:inline-flex; width:100%; order:4; margin-top:12px; }
  .hero-grid, .sec-grid, .spend-grid { grid-template-columns:1fr; gap:40px; }
  .hero-grid { padding:72px 32px 80px; }
  .pillars { grid-template-columns:1fr; }
  .arch { grid-template-columns:1fr; }
  .arch-arrow { transform:rotate(90deg); height:auto; padding:2px 0; }
  .feat-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .container { padding:0 20px; }
  .nav { padding:18px 20px; }
  .band, .band-tight { padding:64px 0; }
  .hero-grid { padding:56px 20px 64px; }
  .sec-cards { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr; }
  .trust-mini { gap:8px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}