:root{color-scheme:dark;--bg:#090b0c;--panel:#121518;--line:#293036;--text:#f4f4ef;--muted:#9aa3a8;--acid:#d9ff5d;--cyan:#7ee7ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}
a{color:var(--cyan)}
.shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:58px 0 30px}
.hero{max-width:930px;padding:24px 0 32px}
.eyebrow{color:var(--acid);font-size:11px;font-weight:900;letter-spacing:.18em}
.hero h1{font-size:clamp(58px,10vw,124px);line-height:.85;letter-spacing:-.065em;margin:18px 0 26px}
.lede{max-width:760px;color:#c8ceca;font-size:clamp(21px,3vw,30px)}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.badges span{border:1px solid #38423d;border-radius:999px;padding:7px 11px;color:#dbe4df;font-size:12px}
.panel{border:1px solid var(--line);background:rgba(18,21,24,.88);border-radius:22px;padding:24px;margin:16px 0}
.intro{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:28px;align-items:end}
.panel h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em;margin:8px 0}
.intro p,.architecture p{color:#b8c0bc;max-width:760px}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}
.case-card{border:1px solid var(--line);background:#101315;border-radius:22px;padding:18px;overflow:hidden}
.case-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.case-name{display:block;text-transform:uppercase;color:var(--muted);font-size:11px;letter-spacing:.14em}
.decision{display:block;font-size:20px}
.case-head button{border:1px solid #44504a;background:#171b1d;color:var(--text);border-radius:999px;padding:8px 12px;cursor:pointer}
.images{display:grid;grid-template-columns:1fr;gap:8px}
.images.has-after{grid-template-columns:1fr 1fr}
.images figure{margin:0;position:relative}
.images img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#eee}
.images figcaption{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.72);padding:4px 7px;border-radius:8px;font-size:10px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}
.metric{border:1px solid #252d31;border-radius:12px;padding:9px;background:#0b0d0e}
.metric span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}
.metric strong{font-size:14px}
.delta,.reasons{font-size:12px;color:#abb4af;margin:10px 2px 0}
.delta b{color:var(--acid)}
.trace{list-style:none;padding:0;margin:0}
.trace li{display:grid;grid-template-columns:140px 190px 1fr;gap:14px;align-items:center;border-bottom:1px solid #242b2f;padding:12px 0}
.step-kind{color:var(--acid);font-size:11px;font-weight:900}
.trace small{color:var(--muted)}
.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:18px 0}
.flow span{border:1px solid #374047;border-radius:12px;padding:10px 12px;background:#0d1011}
.flow b{color:var(--acid)}
footer{display:flex;justify-content:space-between;gap:14px;padding:24px 3px;color:var(--muted);font-size:12px}
@media(max-width:800px){
  .shell{padding-top:28px}
  .case-grid,.intro{grid-template-columns:1fr}
  .images.has-after{grid-template-columns:1fr 1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .trace li{grid-template-columns:1fr}
  .hero h1{font-size:58px}
  footer{display:grid}
}