@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

:root{--anthracite:#1B1E23;--steel:#5F656C;--amber:#C77D34;--amber-dk:#9E5A1A;--albatre:#F4F2EC;--paper:#FBFAF6;--line:#DAD6CC}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--albatre);color:var(--anthracite);-webkit-font-smoothing:antialiased;line-height:1.65}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,242,236,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:1080px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{flex:none}
.brand .wm{font-family:'Archivo',sans-serif;font-weight:900;font-size:22px;letter-spacing:-.01em;line-height:1}
.brand .by{font-size:9px;letter-spacing:.34em;color:var(--steel);margin-top:3px}
nav.main{display:flex;gap:4px;margin-left:auto}
nav.main a{font-size:14px;font-weight:500;color:var(--steel);padding:8px 12px;border-radius:4px}
nav.main a:hover,nav.main a.on{color:var(--anthracite)}
nav.main a.on::after{content:"";display:block;height:2px;background:var(--amber);margin-top:5px}
.hdr-tools{display:flex;align-items:center;gap:10px}
.lang-btn{border:1px solid var(--line);border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--steel);padding:7px 10px}
.lang-btn:hover{border-color:var(--steel);color:var(--anthracite)}
.btn-book{display:inline-flex;align-items:center;gap:8px;background:var(--anthracite);color:var(--albatre);font-weight:500;font-size:14px;padding:10px 18px;border-radius:4px;transition:background .15s;white-space:nowrap}
.btn-book:hover{background:#000}
.btn-book .short{display:none}
.btn-book .dot{width:6px;height:6px;background:var(--amber);border-radius:1px}
.btn-li{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);font-weight:500;font-size:14px;padding:9px 16px;border-radius:4px}
.btn-li:hover{border-color:var(--anthracite)}
main{max-width:1080px;margin:0 auto;padding:0 32px}
section.blk{padding:84px 0 24px}
section.blk + section.blk{border-top:1px solid var(--line);margin-top:60px}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-dk)}
h1.hero{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.025em;margin:18px 0 0;max-width:16ch}
h1.doc{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(32px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em;margin:16px 0 0;max-width:22ch}
.lede{font-size:clamp(18px,2.4vw,22px);max-width:44ch;margin-top:24px;line-height:1.5}
.lede .accent{color:var(--amber-dk)}
h2.sec{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,38px);letter-spacing:-.02em;line-height:1.08;margin:0 0 8px}
.sec-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sec-eyebrow .n{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber-dk);letter-spacing:.1em}
.sec-eyebrow .l{flex:1;height:1px;background:var(--line)}
.sec-eyebrow .t{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel)}
.cta-row{margin-top:36px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cta-note{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel)}
.problem{margin-top:64px;border-left:3px solid var(--amber);padding:6px 0 6px 26px;max-width:60ch;font-size:19px;line-height:1.6}
.pillars,.tiers,.domains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillars{margin-top:64px}.tiers,.domains{margin-top:24px}
.pillar,.tier,.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:26px 24px}
.pillar .pn,.tier .tn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber-dk);letter-spacing:.08em}
.pillar h3,.tier h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;margin:10px 0 8px;letter-spacing:-.01em}
.pillar p,.tier p{font-size:15px;color:var(--steel)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:64px}
.metric{background:var(--paper);padding:26px 22px}
.metric .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1}
.metric .k{font-size:13px;color:var(--steel);margin-top:8px;line-height:1.4}
.metric .v .u,.pf-card .v .u{color:var(--amber-dk)}
.steps{margin-top:48px;display:grid;gap:16px}
.step{display:grid;grid-template-columns:90px 1fr;gap:24px;align-items:start;border-top:1px solid var(--line);padding-top:24px}
.step .let{font-family:'Archivo',sans-serif;font-weight:900;font-size:56px;color:var(--amber);line-height:.8}
.step h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em}
.step h3 .frw{color:var(--steel);font-weight:500;font-size:16px;margin-left:8px}
.step p{font-size:16px;max-width:62ch;margin-top:6px}
.devis{margin-top:22px;font-size:15px;color:var(--steel)}
.domain h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin-bottom:12px}
.domain ul{list-style:none}
.domain li{font-size:15px;color:var(--steel);padding:5px 0 5px 16px;position:relative}
.domain li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--amber);border-radius:1px}
.pf-intro{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
.pf-portrait{position:relative;margin:0}
.pf-portrait img{width:100%;height:auto;display:block;border-radius:6px;position:relative;z-index:1;box-shadow:0 18px 40px rgba(27,30,35,.22)}
.pf-portrait::after{content:"";position:absolute;right:-16px;bottom:-16px;width:130px;height:130px;border:2px solid var(--amber);border-radius:6px;z-index:0}
.pf-portrait figcaption{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--steel);margin-top:16px}
.pf-pitch{font-size:19px;line-height:1.6;max-width:64ch;margin-top:28px}
.pf-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.pf-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:22px 20px}
.pf-card .v{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1.05}
.pf-card .k{font-size:13px;color:var(--steel);margin-top:8px;line-height:1.4}
.pf-creds{margin-top:48px;border-top:1px solid var(--line);padding-top:22px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--steel);letter-spacing:.04em;line-height:1.9}
.pf-creds .sep{color:var(--amber);margin:0 8px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.card .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--amber-dk);text-transform:uppercase}
.card h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;line-height:1.2;margin:10px 0 8px}
.card p{font-size:15px;color:var(--steel)}
.card .go{display:inline-block;margin-top:14px;color:var(--amber-dk);font-weight:500;border-bottom:1px solid var(--amber)}
a.card:hover{border-color:var(--steel)}
.ct-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;margin-top:36px;align-items:start}
.ct-line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.ct-line .lbl{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--steel);min-width:90px;text-transform:uppercase;padding-top:3px}
.ct-line a{color:var(--amber-dk)}
.doc-body{max-width:68ch;margin-top:36px;font-size:17px}
.doc-body h2{font-family:'Archivo',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.01em;margin:40px 0 10px}
.doc-body p,.doc-body ul,.doc-body ol{margin-top:12px}
.doc-body ul,.doc-body ol{padding-left:22px}
.doc-body li{margin-top:6px}
.doc-body a{color:var(--amber-dk);border-bottom:1px solid var(--amber)}
.doc-body .note{font-size:14px;color:var(--steel)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:36px}
.facts div{background:var(--paper);padding:20px}
.facts b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:22px}
.facts span{font-size:13px;color:var(--steel)}
.back{display:inline-block;margin-top:48px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--amber-dk)}
footer{border-top:1px solid var(--line);margin-top:80px}
.ft-in{max-width:1080px;margin:0 auto;padding:36px 32px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft-base{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--steel)}
.ft-base .sep{color:var(--amber)}
.ft-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--steel)}
.ft-links a:hover{color:var(--anthracite)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
@media(max-width:880px){
 .pillars,.tiers,.domains,.cards{grid-template-columns:1fr}
 .metrics{grid-template-columns:repeat(2,1fr)}
 .pf-metrics{grid-template-columns:1fr 1fr}
 .pf-intro{grid-template-columns:1fr;gap:32px}
 .pf-portrait{max-width:300px}
 .ct-grid{grid-template-columns:1fr;gap:28px}
 .facts{grid-template-columns:1fr}
}
@media(max-width:760px){
 .hdr-in{flex-wrap:wrap;gap:12px;padding:12px 16px}
 nav.main{order:3;margin-left:0;width:100%;overflow-x:auto}
 nav.main a{padding:6px 8px;white-space:nowrap;font-size:13px}
 nav.main{scrollbar-width:none}
 .hdr-tools{margin-left:auto}
 .btn-book.hdr .full{display:none}
 .btn-book.hdr .short{display:inline}
 main{padding:0 16px}
 section.blk{padding-top:56px}
 .step{grid-template-columns:1fr;gap:6px}
 .step .let{font-size:44px}
 .pf-metrics{grid-template-columns:1fr}
 .ft-in{padding:28px 16px}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ---- motion ---- */
.site-header{transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(27,30,35,.07)}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .step .let{display:inline-block;transform:translateX(-18px) scale(.85);opacity:0;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s,opacity .8s .15s}
.js .step.in .let{transform:none;opacity:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero-viz{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;justify-self:end}
.hero-viz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-viz .cap{position:absolute;left:0;bottom:-6px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase}
.hero-viz .cap b{color:var(--amber-dk);font-weight:500}
.btn-book .dot{transition:width .25s}
.btn-book:hover .dot{width:14px}
.pillar,.tier,.card,.pf-card{transition:transform .25s,box-shadow .25s,border-color .25s}
.pillar:hover,.tier:hover,a.card:hover,.pf-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(27,30,35,.08)}
.brand svg rect:last-child{transform-origin:24px 24px;animation:corebeat 3.2s ease-in-out infinite}
@keyframes corebeat{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.js h1.hero .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:wup .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wup{to{opacity:1;transform:none}}
.phases{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 28px;margin-top:24px}
.phase{border-top:2px solid var(--line);padding-top:16px;position:relative}
.phase::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--amber);transition:width 1s cubic-bezier(.2,.7,.2,1) .2s}
.phase.in::before{width:56px}
.phase .pn{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber-dk);letter-spacing:.08em}
.phase h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;margin:6px 0 6px}
.phase p{font-size:15px;color:var(--steel)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--steel);border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.doc-body.post p{margin-top:16px}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-viz{justify-self:start;max-width:340px;margin-top:8px}.phases{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.js .rv,.js .step .let,.js h1.hero .w{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.brand svg rect:last-child{animation:none}}
