/* The_2026_Modernization_Blueprint.html — page-specific styles (blueprint family). Shared by EN + DE. */

:root{
  --bp-950:#06090F;
  --bp-900:#0A0F18;
  --bp-850:#0E1521;
  --bp-800:#0E2236;
  --bp-700:#143350;
  --bp-600:#1C476E;
  --grid:rgba(120,196,232,.055);
  --grid-strong:rgba(120,196,232,.12);
  --cyan:#2FE6E0;
  --cyan-2:#8FECF1;
  --cyan-deep:#1B9D9C;
  --amber:#F8AC3C;
  --amber-2:#FFC97A;
  --jade:#34D399;
  --jade-2:#6FE7BB;
  --paper:#EAF1F7;
  --paper-2:#B4CEDD;
  --paper-3:#7791A7;
  --paper-4:#56708A;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--paper);
  background:var(--bp-900);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
}

/* ---------- blueprint substrate ---------- */
.substrate{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, #102b44 0%, var(--bp-900) 46%, var(--bp-950) 100%);
}
.substrate::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,140px 140px,140px 140px;
  background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;
  mask-image:radial-gradient(130% 100% at 50% 0%, #000 60%, transparent 100%);
}
.substrate::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 80% 110%, rgba(52,211,153,.06), transparent 70%),
             radial-gradient(50% 40% at 12% 30%, rgba(84,215,224,.06), transparent 70%);
}

/* corner registration crosshairs */
.reg{position:fixed;z-index:40;width:34px;height:34px;pointer-events:none;opacity:.5}
.reg::before,.reg::after{content:"";position:absolute;background:var(--cyan-deep)}
.reg::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.reg::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.reg.tl{top:12px;left:12px}.reg.tr{top:12px;right:12px}
.reg.bl{bottom:12px;left:12px}.reg.br{bottom:12px;right:12px}

/* ---------- fixed title block (top) ---------- */
.titleblock{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.55rem clamp(1rem,4vw,2.6rem);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper-3);
  background:linear-gradient(var(--bp-950),rgba(7,19,31,.82));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(84,215,224,.16);
}
.titleblock .code{color:var(--cyan);font-weight:600;letter-spacing:.14em}
.titleblock .code b{color:var(--paper)}
.titleblock .sheet{display:flex;gap:1.1rem;align-items:center}
.titleblock .sheet span{white-space:nowrap}
.titleblock .dot{width:6px;height:6px;border-radius:50%;background:var(--jade);
  box-shadow:0 0 8px var(--jade);display:inline-block;vertical-align:middle;margin-right:.45em;animation:pulse 2.6s var(--ease) infinite}
.progress{position:fixed;top:0;left:0;height:2px;z-index:31;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--jade));box-shadow:0 0 10px var(--cyan)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---------- layout ---------- */
main{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:clamp(1.1rem,5vw,2rem);padding-right:clamp(1.1rem,5vw,2rem)}
.plate{padding-top:clamp(3.4rem,8vw,6.6rem);padding-bottom:clamp(3.4rem,8vw,6.6rem);position:relative}
.plate + .plate{border-top:1px solid rgba(84,215,224,.10)}

/* plate header */
.eyebrow{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);margin:0 0 1rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan-deep)}
.eyebrow .pl{color:var(--paper-3)}
.plate-title{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.04;
  font-size:clamp(1.8rem,4.6vw,3.1rem);margin:0;color:var(--paper)}
.plate-lede{max-width:62ch;color:var(--paper-2);font-size:clamp(1rem,1.5vw,1.12rem);margin:1.1rem 0 0}
.plate-lede strong{color:var(--paper);font-weight:600}

.label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3)}

/* ---------- HERO ---------- */
.hero{padding-top:clamp(6rem,15vh,9rem);padding-bottom:clamp(3.6rem,9vw,6rem);position:relative}
.hero-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center}
.hero-eyebrow .sep{color:var(--paper-4)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.5rem,8.4vw,6.4rem);line-height:.96;letter-spacing:-.018em;margin:0;
  color:var(--paper);max-width:18ch}
.hero h1 .lo{color:var(--cyan);text-shadow:0 0 34px rgba(84,215,224,.35)}
/* dimension line */
.dim{display:flex;align-items:center;gap:.9rem;margin:2.1rem 0 0;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-2);flex-wrap:wrap}
.dim .span{flex:1 1 120px;height:14px;position:relative;min-width:90px}
.dim .span::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--paper-4)}
.dim .span::after{content:"";position:absolute;top:50%;left:0;right:0;height:7px;transform:translateY(-50%);
  border-left:1px solid var(--paper-3);border-right:1px solid var(--paper-3)}
.dim .node{color:var(--paper);font-weight:500}
.dim .node.a{color:var(--amber)}
.dim .node.b{color:var(--jade)}
.dim .mid{color:var(--cyan);border:1px solid rgba(84,215,224,.4);padding:.2em .7em;border-radius:2px;background:rgba(84,215,224,.06)}
.hero-lede{max-width:60ch;color:var(--paper-2);font-size:clamp(1.05rem,1.8vw,1.32rem);margin:2.2rem 0 0;line-height:1.5}
.hero-lede b{color:var(--paper);font-weight:600}

/* hero title block grid */
.tb{margin-top:2.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid rgba(84,215,224,.18);background:rgba(10,26,43,.5)}
.tb .cell{padding:.85rem 1.1rem;border-right:1px solid rgba(84,215,224,.12);border-top:1px solid rgba(84,215,224,.12)}
.tb .cell:first-child{border-top:none}
.tb .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-4);margin-bottom:.35rem}
.tb .v{font-family:var(--mono);font-size:.86rem;color:var(--paper);letter-spacing:.02em}
.tb .v.good{color:var(--jade)}

/* ---------- generic panel ---------- */
.panel{background:linear-gradient(180deg,rgba(14,34,54,.72),rgba(10,26,43,.72));
  border:1px solid rgba(84,215,224,.16);border-radius:4px;position:relative}
.panel::before{content:"";position:absolute;top:8px;left:8px;width:7px;height:7px;
  border-left:1px solid var(--cyan-deep);border-top:1px solid var(--cyan-deep);opacity:.6}
.panel::after{content:"";position:absolute;bottom:8px;right:8px;width:7px;height:7px;
  border-right:1px solid var(--cyan-deep);border-bottom:1px solid var(--cyan-deep);opacity:.6}

/* ---------- PLATE 01 diagnostics ---------- */
.grid-2{display:grid;gap:1.1rem;margin-top:2.4rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.fault{padding:1.5rem 1.5rem 1.6rem;transition:transform .3s var(--ease),border-color .3s var(--ease)}
.fault:hover{transform:translateY(-4px);border-color:rgba(230,169,43,.5)}
.fault .tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.fault .tag i{width:8px;height:8px;border:1px solid var(--amber);transform:rotate(45deg);display:inline-block}
.fault h3{font-family:var(--display);font-weight:600;font-size:1.18rem;margin:0 0 .55rem;color:var(--paper)}
.fault p{margin:0;color:var(--paper-2);font-size:.95rem}
.fault .ref{position:absolute;top:1.2rem;right:1.3rem;font-family:var(--mono);font-size:.66rem;color:var(--paper-4)}

/* ---------- PLATE 02 pathways table ---------- */
.paths{margin-top:2.4rem;overflow-x:auto}
.paths table{border-collapse:collapse;width:100%;min-width:680px;table-layout:fixed}
.paths th:first-child{width:16.5%}
.paths th,.paths td{padding:.85rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid rgba(84,215,224,.1)}
.paths thead th{font-family:var(--display);font-weight:600;font-size:1.02rem;border-bottom:1px solid rgba(84,215,224,.28);
  transition:background .25s var(--ease)}
.paths thead th .sub{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper-4);margin-top:.3rem;font-weight:400}
.paths tbody th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paper-3);font-weight:500;line-height:1.35;background:rgba(10,26,43,.4)}
.paths td{color:var(--paper-2);font-size:.92rem}
.paths col{transition:background .25s var(--ease)}
.col-rec{background:rgba(52,211,153,.07)}
.paths thead th.rec{color:var(--jade)}
.paths thead th.warn{color:var(--amber)}
.col-warn{background:rgba(230,169,43,.05)}
.paths tbody tr:hover td,.paths tbody tr:hover th{background:rgba(84,215,224,.05)}
.rec-tag{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  color:var(--jade);border:1px solid rgba(52,211,153,.5);border-radius:2px;padding:.15em .5em;margin-top:.5rem;text-transform:uppercase}
.donut{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;color:var(--paper-2)}
.donut svg{flex:0 0 auto}

/* ---------- PLATE 03 strangler fig ---------- */
.fig{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem;align-items:stretch}
.step{padding:1.4rem 1.3rem 1.6rem;display:flex;flex-direction:column}
.step .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:.3rem}
.step h3{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 1.2rem;color:var(--paper)}
.stack{display:flex;flex-direction:column;gap:.55rem;margin-top:auto}
.node-box{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-align:center;
  padding:.65rem .5rem;border-radius:3px;border:1px solid;line-height:1.3;text-transform:uppercase}
.nb-legacy{border-color:rgba(230,169,43,.5);color:var(--amber-2);background:rgba(230,169,43,.07)}
.nb-legacy.faded{opacity:.55}
.nb-gate{border-color:rgba(84,215,224,.6);color:var(--cyan-2);background:rgba(84,215,224,.08);box-shadow:0 0 16px rgba(84,215,224,.1)}
.nb-svc{border-color:rgba(52,211,153,.5);color:var(--jade-2);background:rgba(52,211,153,.07)}
.row{display:flex;gap:.5rem}
.row .node-box{flex:1}
.conn{height:16px;display:flex;align-items:center;justify-content:center;color:var(--paper-4)}
.fig-note{margin-top:1.3rem;padding:1.1rem 1.4rem;display:flex;gap:1rem;align-items:flex-start;
  border-left:2px solid var(--jade);background:rgba(52,211,153,.05);border-radius:0 4px 4px 0}
.fig-note p{margin:0;color:var(--paper-2);font-size:.96rem}
.fig-note b{color:var(--paper)}

/* ---------- two-col split (clean arch / bridge / data / ef / testing) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;margin-top:2.4rem;align-items:start}
.split .col-text h3{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:0 0 .8rem}
.split .col-text p{color:var(--paper-2);margin:.4rem 0 1rem}
.legend{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:.8rem}
.legend li{display:flex;gap:.9rem;align-items:flex-start}
.legend .sw{flex:0 0 auto;width:14px;height:14px;border-radius:3px;margin-top:.2rem;border:1px solid}
.legend .nm{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--paper);text-transform:uppercase}
.legend .ds{display:block;font-family:var(--body);font-size:.86rem;color:var(--paper-3);text-transform:none;letter-spacing:0;margin-top:.15rem}
.sw.s-domain{border-color:var(--jade);background:rgba(52,211,153,.5)}
.sw.s-app{border-color:var(--cyan);background:rgba(84,215,224,.45)}
.sw.s-infra{border-color:var(--cyan-deep);background:rgba(44,159,190,.4)}
.sw.s-pres{border-color:var(--paper-3);background:rgba(119,145,167,.35)}

.diagram{display:flex;align-items:center;justify-content:center;padding:1.2rem}
.diagram svg{width:100%;height:auto;max-width:420px}

/* ---------- bridge ---------- */
.bridge-wrap{margin-top:2.4rem}
.bridge{padding:1.6rem 1.2rem 1.2rem}
.bridge svg{width:100%;height:auto}
.engine{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1.4rem;
  background:rgba(84,215,224,.16);border:1px solid rgba(84,215,224,.16);border-radius:4px;overflow:hidden}
.engine .ehead{grid-column:1/-1;padding:.9rem 1.3rem;background:rgba(52,211,153,.08);
  font-family:var(--display);font-weight:600;color:var(--jade-2);font-size:1.05rem}
.engine .feat{padding:1.2rem 1.3rem;background:var(--bp-850)}
.engine .feat h4{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--cyan);margin:0 0 .5rem;text-transform:uppercase}
.engine .feat p{margin:0;color:var(--paper-2);font-size:.9rem}
.stopnote{display:flex;align-items:center;gap:1rem;justify-content:center;margin-top:1.3rem;
  font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--amber-2);text-align:center;flex-wrap:wrap}
.stopsign{flex:0 0 auto;width:40px;height:40px;background:var(--amber);color:var(--bp-950);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:.6rem;letter-spacing:.05em}

/* ---------- EF core cure ---------- */
.cure{display:flex;flex-direction:column;gap:.9rem;margin-top:0}
.cure .item{padding:1.1rem 1.3rem;border-radius:4px;border:1px solid rgba(52,211,153,.2);
  background:rgba(52,211,153,.04);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.cure .item:hover{border-color:rgba(52,211,153,.5);transform:translateX(4px)}
.cure .item h4{font-family:var(--display);font-weight:600;font-size:1rem;margin:0 0 .35rem;color:var(--jade-2)}
.cure .item p{margin:0 0 .6rem;color:var(--paper-2);font-size:.88rem}
.code{font-family:var(--mono);font-size:.74rem;background:var(--bp-950);border:1px solid rgba(84,215,224,.14);
  border-radius:3px;padding:.5rem .7rem;color:var(--paper-2);display:block;overflow-x:auto;white-space:nowrap}
.code .m{color:var(--cyan)}
.code .c{color:var(--paper-4)}
.disease{padding:1.5rem;text-align:center}
.disease h3{font-family:var(--display);font-weight:600;color:var(--amber-2);font-size:1.15rem;margin:0 0 1.2rem}
.disease p{color:var(--paper-2);font-size:.92rem;margin:1.2rem 0 0}
.disease svg{width:100%;height:auto;max-width:340px}

/* ---------- testing pyramids ---------- */
.pyr-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.4rem}
.pyr h3{font-family:var(--display);font-weight:600;font-size:1.1rem;margin:0 0 1.2rem;text-align:center}
.pyr.classic h3{color:var(--paper-3)}
.pyr.adapted h3{color:var(--jade-2)}
.tier{padding:.75rem;text-align:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;
  margin:0 auto .35rem;border:1px solid;border-radius:2px;line-height:1.25}
.classic .tier{border-color:rgba(119,145,167,.4);color:var(--paper-3);background:rgba(119,145,167,.06)}
.adapted .t1{border-color:rgba(230,169,43,.5);color:var(--amber-2);background:rgba(230,169,43,.08)}
.adapted .t2{border-color:rgba(84,215,224,.4);color:var(--cyan-2);background:rgba(84,215,224,.06)}
.adapted .t3{border-color:rgba(84,215,224,.35);color:var(--cyan-2);background:rgba(84,215,224,.05)}
.adapted .t4{border-color:rgba(52,211,153,.5);color:var(--jade-2);background:rgba(52,211,153,.08)}
.w1{max-width:42%}.w2{max-width:62%}.w3{max-width:80%}.w4{max-width:100%}
.pyr small{display:block;text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--paper-4);margin-top:.8rem;text-transform:uppercase;letter-spacing:.1em}
.insight{margin-top:1.6rem;padding:1.2rem 1.5rem;border-left:2px solid var(--cyan);background:rgba(84,215,224,.05);border-radius:0 4px 4px 0}
.insight p{margin:0;color:var(--paper-2);font-size:.95rem}
.insight b{color:var(--cyan-2)}

/* ---------- risk matrix ---------- */
.matrix-wrap{margin-top:2.4rem;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:stretch}
.yaxis{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3);padding:.4rem}
.matrix{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:rgba(84,215,224,.16);
  border:1px solid rgba(84,215,224,.16);border-radius:4px;overflow:hidden}
.quad{padding:1.4rem 1.4rem 1.5rem;background:var(--bp-850);transition:background .3s var(--ease);min-height:140px}
.quad:hover{background:var(--bp-800)}
.quad h4{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:0 0 .5rem}
.quad .eg{font-family:var(--mono);font-size:.74rem;color:var(--paper-3);margin:0 0 .7rem}
.quad .verdict{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.q-p1{background:rgba(230,169,43,.08)}
.q-p1 h4{color:var(--amber-2)} .q-p1 .verdict{color:var(--amber)}
.q-p1{position:relative}
.q-p1::after{content:"";position:absolute;top:1.3rem;right:1.3rem;width:9px;height:9px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 0 rgba(230,169,43,.6);animation:ping 2.4s var(--ease) infinite}
.q-mon h4{color:var(--cyan-2)} .q-mon .verdict{color:var(--cyan)}
.q-def h4{color:var(--paper)} .q-def .verdict{color:var(--paper-3)}
.q-ign h4{color:var(--paper-2)} .q-ign .verdict{color:var(--paper-4)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(230,169,43,.5)}70%{box-shadow:0 0 0 12px rgba(230,169,43,0)}100%{box-shadow:0 0 0 0 rgba(230,169,43,0)}}
.xaxis{text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-3);margin-top:.8rem}

/* ---------- DORA + pipeline ---------- */
.dora{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.4rem}
.gauge{padding:1.1rem 1rem 1.2rem;text-align:center}
.gauge svg{width:100%;height:auto;max-width:150px}
.gauge .gv{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--jade-2);margin-top:.3rem}
.gauge .gn{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-3);margin-top:.35rem;line-height:1.3}
.pipeline{display:flex;align-items:stretch;gap:.5rem;margin-top:1.8rem;flex-wrap:wrap}
.stage{flex:1 1 150px;padding:1.1rem 1rem;text-align:center;border-radius:4px;
  border:1px solid rgba(84,215,224,.2);background:rgba(14,34,54,.6);position:relative}
.stage .si{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--cyan-deep);margin-bottom:.5rem}
.stage h4{font-family:var(--display);font-weight:600;font-size:.92rem;margin:0 0 .25rem;color:var(--paper)}
.stage p{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--paper-3);text-transform:uppercase}
.stage:not(:last-child)::after{content:"›";position:absolute;right:-.55rem;top:50%;transform:translateY(-50%);
  color:var(--cyan);font-size:1.3rem;z-index:2}

/* ---------- ecosystem ---------- */
.eco{margin-top:2.4rem;padding:1.6rem 1.4rem 1.4rem}
.eco .band{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:.6rem;border-radius:3px;color:var(--cyan-2);background:rgba(84,215,224,.07);border:1px dashed rgba(84,215,224,.3)}
.eco .gate{margin:.8rem 0;text-align:center;padding:.85rem;border-radius:3px;font-family:var(--display);font-weight:600;
  letter-spacing:.04em;color:var(--cyan-2);background:rgba(84,215,224,.1);border:1px solid rgba(84,215,224,.4)}
.eco .svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.eco .svc{padding:1.1rem 1rem;border-radius:4px;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.05);text-align:center}
.eco .svc .sn{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--jade-2)}
.eco .svc .chip{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--paper-3);margin-top:.6rem;
  padding:.4rem;border:1px solid rgba(84,215,224,.2);border-radius:2px;line-height:1.4}
.eco .db{display:flex;justify-content:space-around;margin:.8rem 0;gap:.8rem}
.eco .db span{flex:1;text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--paper-4);
  padding:.5rem;border:1px solid rgba(119,145,167,.25);border-radius:3px;border-top-width:3px;border-top-color:var(--jade)}
.eco .band.ci{color:var(--jade-2);background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.3)}

/* ---------- closing ---------- */
.closing{padding-top:clamp(4rem,11vw,8rem);padding-bottom:clamp(4rem,11vw,8rem);text-align:center}
.closing .manifesto{font-family:var(--body);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--paper-2);max-width:60ch;margin:0 auto 2.4rem;line-height:1.55}
.closing .manifesto b{color:var(--paper)}
.closing .punch{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.9rem,6vw,4rem);line-height:1.02;margin:0}
.closing .punch .past{color:var(--paper-3)}
.closing .punch .build{color:var(--jade);text-shadow:0 0 36px rgba(52,211,153,.35)}
.closing .stamp{display:inline-block;margin-top:2.4rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--jade);border:1px solid rgba(52,211,153,.5);border-radius:3px;padding:.6em 1.2em;transform:rotate(-2deg)}

/* site chrome — home + back links */
.titleblock a.brand-link{text-decoration:none;color:var(--cyan)}
.titleblock a.brand-link:hover{color:var(--cyan-2)}
.titleblock .home-link{text-decoration:none;color:var(--cyan);transition:color .25s var(--ease)}
.titleblock .home-link:hover{color:var(--cyan-2)}
.titleblock .lang-sw{display:inline-flex;align-items:center;gap:.4rem}
.titleblock .lang-sw a{text-decoration:none;color:var(--paper-3);transition:color .25s var(--ease)}
.titleblock .lang-sw a.active{color:var(--cyan);font-weight:600}
.titleblock .lang-sw a:hover{color:var(--cyan-2)}
.titleblock .lang-sw .sep{color:var(--paper-4)}

/* footer */
.foot{padding:2rem 0 3rem;text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-4);border-top:1px solid rgba(84,215,224,.1)}
.foot a{color:var(--paper-3);text-decoration:none}
.foot a:hover{color:var(--cyan)}
.site-back{margin-bottom:1.1rem}
.site-back a{color:var(--cyan);letter-spacing:.16em}

/* ---------- reveal animation ---------- */
.no-js .reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .hero-anim{opacity:0;transform:translateY(14px);animation:rise .9s var(--ease) forwards}
.js .d1{animation-delay:.05s}.js .d2{animation-delay:.18s}.js .d3{animation-delay:.32s}
.js .d4{animation-delay:.46s}.js .d5{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:none}
.js .draw.go{animation:draw 1.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* focus */
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .pyr-grid{grid-template-columns:1fr}
  .dora{grid-template-columns:1fr 1fr}
  .matrix-wrap{grid-template-columns:1fr}
  .yaxis{writing-mode:horizontal-tb;transform:none}
  .titleblock .sheet span.hide-sm{display:none}
}
@media(max-width:560px){
  .fig{grid-template-columns:1fr}
  .eco .svcs{grid-template-columns:1fr}
  .dora{grid-template-columns:1fr 1fr}
  .matrix{grid-template-columns:1fr;grid-template-rows:auto}
  .stage:not(:last-child)::after{content:"";display:none}
  .titleblock{font-size:.56rem;letter-spacing:.1em;padding:.5rem 1rem}
  .hide-xs{display:none}
  .reg{width:24px;height:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .hero-anim{opacity:1;transform:none}
  .draw{stroke-dashoffset:0}
}