:root{
  --ink:#16231F;
  --ink-soft:#4B5A54;
  --paper:#F3F5F3;
  --paper-old:#ECE6D8;
  --line-old:#A98F6B;
  --teal:#1F6F5C;
  --teal-deep:#123D32;
  --rust:#8A3212;
  --hairline:#C9D2CB;
  --white:#FFFFFF;
  --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo", Arial, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono", monospace;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
img{max-width:100%;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(243,245,243,0.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--hairline);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px; max-width:var(--maxw); margin:0 auto;}
.brand{font-weight:800; font-size:1.15rem; letter-spacing:-0.01em; text-decoration:none; color:var(--ink);}
.brand .dot{color:var(--teal);}
nav.links{display:flex; gap:26px; font-size:0.93rem;}
nav.links a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; padding-bottom:2px;}
nav.links a:hover{color:var(--ink); border-color:var(--teal);}
.stage-pill{
  font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--teal-deep);
  background:rgba(31,111,92,0.1); border:1px solid rgba(31,111,92,0.35);
  padding:5px 10px; border-radius:3px; white-space:nowrap;
}
@media (max-width:820px){
  nav.links{display:none;}
}

/* ---------- hero ---------- */
.hero{padding:76px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
.hero h1{
  font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.08; letter-spacing:-0.015em;
  margin:0 0 22px; font-weight:700; max-width:16ch;
}
.hero p.lede{font-size:1.15rem; color:var(--ink-soft); max-width:46ch; margin:0 0 30px;}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn{
  display:inline-block; padding:13px 22px; font-size:0.98rem; font-weight:600;
  text-decoration:none; border-radius:3px; border:1px solid transparent;
}
.btn-primary{background:var(--teal-deep); color:var(--paper);}
.btn-primary:hover{background:var(--teal);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}
.cta-note{font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:var(--ink-soft); margin-top:14px;}

/* hero visual */
.hero-visual{position:relative;}
.fragments{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.fragment{
  background:var(--paper-old); border:1px solid var(--line-old);
  padding:10px 14px; font-size:0.83rem; color:#3d3226;
  box-shadow:3px 3px 0 rgba(169,143,107,0.28);
  max-width:78%;
}
.fragment .tag{display:block; font-family:"IBM Plex Mono", monospace; font-size:0.72rem; color:var(--line-old); margin-bottom:3px;}
.fragment.f1{transform:rotate(-1.4deg);}
.fragment.f2{transform:rotate(1deg); margin-left:14%;}
.fragment.f3{transform:rotate(-0.6deg);}
.fragment.f4{transform:rotate(1.6deg); margin-left:8%;}

.flow-arrow{display:flex; align-items:center; gap:10px; color:var(--teal-deep); font-family:"IBM Plex Mono", monospace; font-size:0.78rem; margin:14px 0;}
.flow-arrow::before, .flow-arrow::after{content:""; flex:1; height:1px; background:var(--teal); opacity:0.5;}

.summary-card{
  background:var(--white); border:1.5px solid var(--teal-deep);
  padding:20px 22px;
}
.summary-head{font-weight:700; font-size:1rem; margin-bottom:4px;}
.summary-head .mono{display:block; font-size:0.75rem; color:var(--ink-soft); font-weight:400; margin-top:3px;}
.summary-card dl{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--hairline);}
.summary-card dl > div{display:flex; gap:12px; padding:6px 0; border-bottom:1px dashed var(--hairline); font-size:0.9rem;}
.summary-card dl > div:last-child{border-bottom:none;}
.summary-card dt{font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--teal-deep); flex:0 0 128px;}
.summary-card dd{margin:0; color:var(--ink);}
.visual-caption{font-family:"IBM Plex Mono", monospace; font-size:0.72rem; color:var(--ink-soft); margin-top:10px;}

@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:38px;}
  .fragment{max-width:100%; margin-left:0 !important;}
}

/* ---------- generic section ---------- */
section{padding:64px 0; border-top:1px solid var(--hairline);}
h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; letter-spacing:-0.01em; margin:0 0 14px; max-width:22ch;}
.section-lede{color:var(--ink-soft); max-width:60ch; margin:0 0 36px; font-size:1.02rem;}

/* problem table */
.problem-list{display:grid; gap:0;}
.problem-row{display:grid; grid-template-columns:220px 1fr; gap:24px; padding:16px 0; border-top:1px solid var(--hairline);}
.problem-row:last-child{border-bottom:1px solid var(--hairline);}
.problem-row dt{font-family:"IBM Plex Mono", monospace; font-size:0.82rem; color:var(--rust); align-self:start;}
.problem-row dd{margin:0; color:var(--ink);}
@media (max-width:700px){.problem-row{grid-template-columns:1fr; gap:4px;}}

/* layers */
.layer{
  display:grid; grid-template-columns:260px 1fr; gap:28px;
  padding:26px 24px; border-left:4px solid var(--hairline);
  margin-bottom:14px;
}
.layer.l3{border-color:var(--teal); background:rgba(31,111,92,0.05);}
.layer.l2{border-color:#6b7a72; background:rgba(107,122,114,0.05);}
.layer.l1{border-color:var(--ink); background:rgba(22,35,31,0.04);}
.layer h3{margin:0 0 6px; font-size:1.08rem;}
.layer .mod{font-family:"IBM Plex Mono", monospace; font-size:0.75rem; color:var(--ink-soft); display:block; margin-bottom:8px;}
.layer p{margin:0; color:var(--ink-soft); font-size:0.95rem;}
@media (max-width:700px){.layer{grid-template-columns:1fr;}}

/* timeline phases */
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; margin-top:8px;}
.phases::before{
  content:""; position:absolute; top:11px; left:0; right:0; height:1px; background:var(--hairline);
}
.phase{position:relative; padding-top:30px;}
.phase::before{
  content:""; position:absolute; top:6px; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2px solid var(--teal);
}
.phase .tag{font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:var(--teal-deep); display:block; margin-bottom:10px;}
.phase ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.93rem;}
.phase li{margin-bottom:7px;}
@media (max-width:700px){
  .phases{grid-template-columns:1fr; gap:26px;}
  .phases::before{display:none;}
}

/* trust */
.trust-box{
  background:var(--white); border:1px solid var(--hairline); padding:32px 34px;
  display:grid; grid-template-columns:1fr 1fr; gap:36px;
}
.trust-box h3{margin:0 0 10px; font-size:1.15rem;}
.trust-box p{margin:0; color:var(--ink-soft); font-size:0.95rem;}
@media (max-width:700px){.trust-box{grid-template-columns:1fr;}}

/* public infra */
.infra-pair{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:center; margin-top:10px;}
.infra-box{border:1px solid var(--hairline); background:var(--white); padding:22px;}
.infra-box h4{margin:0 0 8px; font-size:1rem;}
.infra-box ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:0.9rem;}
.infra-box li{margin-bottom:5px;}
.infra-link{font-family:"IBM Plex Mono", monospace; color:var(--teal-deep); font-size:1.4rem;}
@media (max-width:700px){
  .infra-pair{grid-template-columns:1fr;}
  .infra-link{transform:rotate(90deg); text-align:center;}
}

/* audiences */
.audiences{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.audience h3{font-size:1.15rem; margin:0 0 16px;}
.audience ul{list-style:none; margin:0; padding:0;}
.audience li{
  border-left:2px solid var(--teal); padding:8px 0 8px 16px; margin-bottom:10px;
  color:var(--ink-soft); font-size:0.95rem;
}
@media (max-width:700px){.audiences{grid-template-columns:1fr; gap:28px;}}

/* stage + team */
.stage-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
.facts{display:grid; gap:0;}
.facts > div{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-top:1px solid var(--hairline); font-size:0.93rem;}
.facts > div:last-child{border-bottom:1px solid var(--hairline);}
.facts dt{font-family:"IBM Plex Mono", monospace; font-size:0.78rem; color:var(--ink-soft);}
.facts dd{margin:0;}
.team-item{display:flex; gap:14px; align-items:flex-start; margin-bottom:20px;}
.initial{
  width:42px; height:42px; flex:0 0 42px; background:var(--teal-deep); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono", monospace; font-weight:500;
}
.team-item h4{margin:0 0 2px; font-size:0.98rem;}
.team-item p{margin:0; color:var(--ink-soft); font-size:0.88rem;}
@media (max-width:700px){.stage-grid{grid-template-columns:1fr; gap:30px;}}


footer{padding:26px 0; }
.footer-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.8rem; color:rgba(243,245,243,0.6); font-family:"IBM Plex Mono", monospace;}

:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
}

/* ---------- language switcher ---------- */
.nav-right{display:flex; align-items:center; gap:14px;}
.lang{display:flex; font-family:"IBM Plex Mono", monospace; font-size:0.75rem; border:1px solid var(--hairline); border-radius:3px; overflow:hidden;}
.lang a{padding:5px 9px; text-decoration:none; color:var(--ink-soft);}
.lang a + a{border-left:1px solid var(--hairline);}
.lang a:hover{color:var(--ink); background:rgba(31,111,92,0.08);}
.lang a[aria-current="true"]{background:var(--teal-deep); color:var(--paper);}
@media (max-width:520px){
  .stage-pill{display:none;}
}
.brand, nav.links a, .stage-pill{white-space:nowrap;}
.nav{gap:20px;}
header .nav{max-width:1280px;}
@media (max-width:1320px){
  .stage-pill{display:none;}
  nav.links{gap:20px;}
}
@media (max-width:1000px){
  nav.links{gap:14px; font-size:0.88rem;}
}