:root{
  --ink:#12202F;
  --ink-soft:#1F3345;
  --paper:#F0F2EF;
  --paper-raised:#FFFFFF;
  --gold:#B8862E;
  --gold-deep:#8F6A22;
  --blue-doc:#1F3A5F;
  --green-ok:#3C6E47;
  --text:#1C2530;
  --text-muted:#5B6572;
  --line:#C9C4B8;
  --line-soft:#DAD6CB;

  --font-display:'IBM Plex Serif', serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  line-height:1.55;
}
h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:600;
  line-height:1.15;
}
h1{font-size:clamp(1.9rem, 3.6vw, 2.9rem);}
h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem);}
h3{font-size:1.1rem;}
p{margin:0 0 1em; max-width:62ch;}
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75em 1.4em;
  border-radius:2px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.95rem;
  text-decoration:none;
  border:1px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--ink); color:var(--paper-raised);}
.btn-primary:hover{background:var(--ink-soft);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper-raised);}
.btn-ghost{color:var(--ink); border-color:transparent; padding:.6em 1em;}
.btn-ghost:hover{border-color:var(--line);}
.btn-accent{background:var(--gold); color:var(--ink); border-color:var(--gold); padding:.6em 1.3em;}
.btn-accent:hover{background:var(--gold-deep); border-color:var(--gold-deep);}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(240,242,239,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.9rem; font-weight:600;
  text-decoration:none; color:var(--ink);
  letter-spacing:.01em;
}
.wordmark span{color:var(--gold);}
.wordmark.small{font-size:1.05rem;}
.main-nav{display:flex; gap:28px;}
.main-nav a{text-decoration:none; color:var(--text); font-size:.95rem;}
.main-nav a:hover{color:var(--ink); border-bottom:1px solid var(--gold);}
.header-actions{display:flex; align-items:center; gap:8px;}
.nav-toggle{display:none; flex-direction:column; gap:4px; background:none; border:0; padding:8px; cursor:pointer;}
.nav-toggle span{width:20px; height:2px; background:var(--ink);}

/* Hero */
.hero{padding:64px 0 56px; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.lede{font-size:1.12rem; color:var(--text-muted); max-width:52ch;}
.hero-actions{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap;}

.hero-panel{
  background:var(--ink);
  color:var(--paper);
  border-radius:3px;
  padding:22px 24px 26px;
  box-shadow:0 18px 40px -18px rgba(18,32,47,.5);
}
.panel-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid rgba(240,242,239,.18);
  padding-bottom:12px; margin-bottom:16px;
}
.panel-label{font-family:var(--font-display); font-size:1rem;}
.panel-cf{font-family:var(--font-mono); font-size:.78rem; color:#B9C3CC;}
.panel-row{margin-bottom:16px;}
.metric-label{display:block; font-size:.78rem; color:#B9C3CC; margin-bottom:6px;}
.metric-bar{height:6px; background:rgba(240,242,239,.15); border-radius:3px; overflow:hidden; margin-bottom:6px;}
.metric-fill{height:100%; width:var(--fill); background:var(--gold); border-radius:3px;}
.metric-value{font-family:var(--font-mono); font-size:1rem;}
.metric-value small{color:#B9C3CC; font-size:.75rem;}
.panel-split{display:flex; gap:24px; align-items:flex-end;}
.gauge-block{flex:1;}
.gauge{width:100%; max-width:130px; display:block; margin-bottom:6px;}
.gauge-track{fill:none; stroke:rgba(240,242,239,.15); stroke-width:9;}
.gauge-value{
  fill:none; stroke:var(--gold); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:157; stroke-dashoffset:calc(157 - (157 * var(--pct)));
}
.esl-block{flex:1; text-align:right;}
.esl-figure{font-family:var(--font-mono); font-size:2rem; color:var(--gold); display:block;}
.esl-figure small{font-size:1.1rem;}
.esl-note{font-size:.75rem; color:#9FCDAE;}

/* Problem */
.problem{background:var(--paper-raised); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:44px 0;}
.problem-text{font-family:var(--font-display); font-size:1.25rem; color:var(--ink-soft); max-width:74ch; margin:0 auto;}

/* Tools */
.tools{padding:72px 0;}
.tool-index{border-top:1px solid var(--line);}
.tool-entry{border-bottom:1px solid var(--line);}
.tool-entry summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:baseline; gap:16px;
  padding:20px 0;
}
.tool-entry summary::-webkit-details-marker{display:none;}
.tool-num{font-family:var(--font-mono); color:var(--gold-deep); font-size:.95rem;}
.tool-name{font-family:var(--font-display); font-size:1.15rem; color:var(--ink); white-space:nowrap;}
.tool-leader{flex:1; border-bottom:1px dotted var(--line); margin-bottom:6px;}
.tool-tag{font-family:var(--font-mono); font-size:.75rem; color:var(--text-muted);}
.tool-entry p{padding-bottom:20px; color:var(--text-muted); max-width:70ch;}

/* Roles */
.roles{background:var(--paper-raised); padding:72px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.roles-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.delegation-flow{
  list-style:none; margin:0; padding:0;
  position:relative;
}
.delegation-flow li{
  position:relative;
  padding:0 0 32px 40px;
}
.delegation-flow li:last-child{padding-bottom:0;}
.delegation-flow li::before{
  content:"";
  position:absolute;
  left:7px; top:20px; bottom:-4px;
  width:1px;
  background:var(--line);
}
.delegation-flow li:last-child::before{display:none;}
.flow-node{
  position:absolute; left:0; top:4px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--paper);
  border:2px solid var(--gold);
}
.flow-content h4{
  font-family:var(--font-display); font-size:1.05rem; color:var(--ink);
  margin:0 0 4px;
}
.flow-content p{
  color:var(--text-muted); font-size:.95rem; margin:0; max-width:48ch;
}

/* Audience */
.audience{padding:72px 0;}
.audience-list{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px;}
.audience-item p{color:var(--text-muted); font-size:.95rem;}

/* Final CTA */
.final-cta{background:var(--ink); color:var(--paper); padding:64px 0;}
.final-cta h2{color:var(--paper);}
.final-cta-row{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center;}
.contact-form{display:flex; flex-direction:column; gap:10px; background:var(--ink-soft); padding:22px; border-radius:3px;}
.contact-form label{font-size:.8rem; color:#B9C3CC;}
.contact-form input{
  padding:.7em .8em; border:1px solid rgba(240,242,239,.25); border-radius:2px;
  background:transparent; color:var(--paper); font-family:var(--font-body);
}
.contact-form input::placeholder{color:#8996A2;}
.contact-form .btn-primary{background:var(--gold); color:var(--ink); border-color:var(--gold); margin-top:6px;}
.contact-form .btn-primary:hover{background:var(--gold-deep);}

/* Footer */
.site-footer{padding:28px 0; border-top:1px solid var(--line-soft);}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.footer-copy{color:var(--text-muted); font-size:.85rem;}
.footer-link{font-size:.85rem; text-decoration:underline;}

/* Responsive */
@media (max-width:860px){
  .hero-grid, .roles-grid, .final-cta-row{grid-template-columns:1fr;}
  .audience-list{grid-template-columns:1fr;}
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper-raised); border-bottom:1px solid var(--line-soft);
    flex-direction:column; padding:16px 24px; gap:14px;
    display:none;
  }
  .main-nav.open{display:flex;}
  .nav-toggle{display:flex;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn, a{transition:none;}
}