/* ═══ self-hosted fonts (Google woff2 mirror, latin+latin-ext) ═══ */
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geist-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geist-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geist-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geistmono-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/geistmono-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geistmono-normal-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/geistmono-normal-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geistmono-normal-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/geistmono-normal-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-italic-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/newsreader-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--dark:#000000;--dark-alt:#0a0a0a;--light:#f5f5f7;--light-alt:#fbfbfd;
--ind:#f5f5f7;--ind2:rgba(245,245,247,.6);--ind3:rgba(245,245,247,.35);
--inl:#1d1d1f;--inl2:#6e6e73;--inl3:#a0a0a4;
--rd:rgba(245,245,247,.16);--rds:rgba(245,245,247,.08);
--rl:rgba(29,29,31,.16);--rls:rgba(29,29,31,.06);
--chrome:linear-gradient(180deg,#ffffff 0%,#c8c8cd 60%,#8e8e93 100%);
--sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;
--text:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
--mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace;
--display:"Newsreader",Cambria,Georgia,serif;
--ease:cubic-bezier(.2,.65,.3,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--dark);color:var(--ind);font-family:var(--text);
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}

@keyframes fadeUp-fl{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUpBlur-fl{from{opacity:0;transform:translateY(30px);filter:blur(10px)}
to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pulse-fl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.chrome{font-style:italic;font-weight:400;
background:var(--chrome);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}

.rev{opacity:0;transform:translateY(18px);
transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s ease}
.rev.blur{filter:blur(8px)}
.rev.sc{transform:translateY(18px) scale(.95)}
.rev.in{opacity:1;transform:none;filter:none}

section{position:relative}
.sec-dark{background:var(--dark);color:var(--ind)}
.sec-light{background:var(--light);color:var(--inl)}
.sec-lightalt{background:var(--light-alt);color:var(--inl)}
.pad{padding:70px 22px}

.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
text-transform:uppercase;margin-bottom:28px}
.sec-dark .eyebrow{color:var(--ind2)}
.sec-light .eyebrow,.sec-lightalt .eyebrow{color:var(--inl2)}

/* ── Hero ── */
#hero{background:var(--dark);color:var(--ind);padding:70px 22px;
overflow:hidden;min-height:760px}
#hero .glow{position:absolute;top:-120px;left:-80px;width:460px;height:460px;
background:radial-gradient(circle,rgba(255,255,255,.08),transparent 60%);
pointer-events:none;filter:blur(40px)}
.hero-meta{display:flex;justify-content:space-between;align-items:center;
font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.22em;text-transform:uppercase;padding-bottom:28px;position:relative;
animation:fadeUp-fl 1s 0ms var(--ease) both}
.hero-meta .live{display:flex;align-items:center;gap:8px}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--ind);
animation:pulse-fl 1.8s ease-in-out infinite}
.hero-h{position:relative;transform-origin:left center;
will-change:transform,opacity;transition:opacity .12s linear}
.hero-h h1{font-family:var(--sans);font-weight:600;font-size:84px;
line-height:.92;letter-spacing:-.045em;color:var(--ind);margin:20px 0 0}
.hero-h h1 span{display:block}
.hero-h h1 span+span{margin-top:4px}
.hero-h h1 .w{animation:fadeUpBlur-fl 1.1s var(--ease) both}
.hero-deck{font-family:var(--text);font-size:21px;line-height:1.42;
color:var(--ind2);margin:36px 0 28px;letter-spacing:-.01em;
max-width:360px;text-wrap:pretty;font-weight:400}
.spec-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0;
border-top:1px solid var(--rd);border-bottom:1px solid var(--rd)}
.spec-strip .cell{padding:0 8px}
.spec-strip .cell:not(:last-child){border-right:1px solid var(--rd)}
.spec-strip .v{font-family:var(--sans);font-size:54px;font-weight:500;
letter-spacing:-.04em;color:var(--ind);line-height:.92;font-variant-numeric:tabular-nums}
.spec-strip .s{font-family:var(--text);font-size:11px;color:var(--ind2);
letter-spacing:.04em;margin-top:10px;line-height:1.3;text-transform:uppercase;font-weight:500}

/* ── Specs spotlights ── */
#specs h2,.h-dark{font-family:var(--sans);font-weight:600;font-size:56px;
line-height:.94;letter-spacing:-.04em;color:var(--ind);margin:0 0 42px}
.spot{padding:32px 0;border-top:1px solid var(--rd)}
.spot .num{font-family:var(--sans);font-weight:500;font-size:100px;
letter-spacing:-.06em;line-height:.9;color:var(--ind);margin:0 0 12px;
font-variant-numeric:tabular-nums}
.spot .lab{font-family:var(--text);font-size:11px;color:var(--ind2);
letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;font-weight:500}
.spot p{font-family:var(--text);font-size:19px;line-height:1.42;color:var(--ind);
margin:0;max-width:340px;font-weight:400;letter-spacing:-.005em}
.cap-rule-d,.cap-rule-l{display:none}

/* ── Practice (light) ── */
.h-light{font-family:var(--sans);font-weight:600;font-size:64px;
line-height:.92;letter-spacing:-.045em;color:var(--inl);margin:0 0 42px}
.h-light em,.h-lightalt em{font-style:italic;font-weight:400;color:var(--inl2)}
/* ── Practice — editorial chapter pages (restrained chapter marker) ── */
.pr-item{padding:44px 0 48px;border-top:1px solid var(--rl);position:relative}
.pr-item:first-child{border-top:none;padding-top:8px}
/* Chapter marker = ONE quiet mono line: "01 — RESEARCH" */
.pr-top{display:flex;align-items:baseline;gap:0;margin-bottom:22px}
.pr-n,.pr-cat{font-family:var(--mono);font-size:10.5px;font-weight:500;
color:var(--inl2);letter-spacing:.22em;text-transform:uppercase;
font-variant-numeric:tabular-nums;line-height:1;
background:none;-webkit-text-fill-color:initial;font-style:normal}
.pr-n::after{content:"—";margin:0 12px;color:var(--inl3);
font-weight:400;letter-spacing:0}
.pr-item h3{font-size:32px;color:var(--inl);margin:0 0 18px;
letter-spacing:-.012em;line-height:1.06}
.pr-item p{color:var(--inl);margin:0 0 22px;text-wrap:pretty;max-width:640px}
.pr-tags{display:flex;flex-wrap:wrap;gap:6px}
.pr-tags span{font-family:var(--text);font-size:12px;padding:6px 13px;
background:transparent;color:var(--inl2);border:1px solid var(--rl);
border-radius:999px;letter-spacing:.005em;font-weight:500}
@media (min-width:760px){
.pr-item{padding:64px 0 72px}
.pr-top{margin-bottom:26px}
.pr-item h3{font-size:42px;margin-bottom:22px;max-width:720px}
.pr-item p{max-width:680px;margin-bottom:26px}}
@media (min-width:1000px){
.pr-item{padding:80px 0 88px}
.pr-item h3{font-size:48px;max-width:760px}}

/* ── Founder (dark) ── */
.fr-frame{position:relative;overflow:hidden;padding:74px 18px;
border:1px solid var(--rd);margin-bottom:36px;background:var(--dark);isolation:isolate}
.fr-frame .scan{position:absolute;inset:0;opacity:.05;
background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 1px,transparent 1px 26px);
pointer-events:none;z-index:0}
.fr-frame .vf{position:absolute;width:22px;height:22px;z-index:2}
.fr-frame .vf.tl{top:14px;left:14px;border-top:1px solid var(--ind2);border-left:1px solid var(--ind2)}
.fr-frame .vf.tr{top:14px;right:14px;border-top:1px solid var(--ind2);border-right:1px solid var(--ind2)}
.fr-frame .vf.bl{bottom:14px;left:14px;border-bottom:1px solid var(--ind2);border-left:1px solid var(--ind2)}
.fr-frame .vf.br{bottom:14px;right:14px;border-bottom:1px solid var(--ind2);border-right:1px solid var(--ind2)}
.fr-frame .mid{position:relative;z-index:3;display:flex;align-items:center;
justify-content:center;min-height:360px}
.fr-mark{font-family:var(--sans);font-weight:600;font-size:clamp(34px,11vw,60px);
letter-spacing:-.04em;text-align:center;line-height:1.05;
background:var(--chrome);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
.fr-p{font-family:var(--text);font-size:17.5px;line-height:1.5;color:var(--ind2);
margin:0 0 22px;letter-spacing:-.005em;text-wrap:pretty}
.fr-p.lead{font-size:20px;color:var(--ind);font-weight:500}

/* ── Record / Recognition — items as cards on the light-alt substrate ── */
#rec-list{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.rc-item{display:block;padding:26px 24px;background:#ffffff;
border:1px solid var(--rl);border-radius:18px;
box-shadow:0 1px 2px rgba(0,0,0,.03);
transition:box-shadow .4s ease,transform .4s cubic-bezier(.28,.11,.32,1)}
.rc-item.in{box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -18px rgba(0,0,0,.14)}
.rc-src{font-family:var(--mono);font-size:10.5px;color:var(--inl2);
letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.rc-item h3{font-size:26px;color:var(--inl);margin:0 0 12px;letter-spacing:-.012em}
.rc-item p{font-family:var(--text);font-size:15.5px;line-height:1.5;
color:var(--inl2);margin:0;text-wrap:pretty}
/* tablet+ : 2-column tile grid */
@media (min-width:760px){
#rec-list{grid-template-columns:repeat(2,1fr);gap:18px}
.rc-item{padding:30px 32px}
.rc-item h3{font-size:30px}}
@media (min-width:1000px){
#rec-list{gap:22px}
.rc-item{padding:36px 34px}
.rc-item h3{font-size:32px}}
/* hover-capable devices: subtle lift on hover */
@media (hover:hover) and (min-width:760px){
.rc-item{will-change:transform}
.rc-item:hover{transform:translateY(-3px);
box-shadow:0 2px 4px rgba(0,0,0,.04),0 18px 44px -22px rgba(0,0,0,.18)}}
.rc-item p{font-family:var(--text);font-size:15.5px;line-height:1.5;
color:var(--inl2);margin:0;text-wrap:pretty}

/* ── Systems (dark) ── */
#systems .h-dark{margin:0 0 8px}
.sy-block{padding:34px 0;border-top:1px solid var(--rd)}
.sy-lbl{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;font-weight:500}
.sy-block h3{font-family:var(--sans);font-size:32px;font-weight:600;
line-height:1.05;letter-spacing:-.035em;color:var(--ind);margin:0 0 16px}
.sy-block p{font-family:var(--text);font-size:17.5px;line-height:1.5;
color:var(--ind2);margin:0 0 22px;letter-spacing:-.005em;text-wrap:pretty}
.sy-block ul{list-style:none}
.sy-block li{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:13px 0;
border-top:1px solid var(--rds);font-family:var(--text);font-size:16px;
line-height:1.45;color:var(--ind)}
.sy-block li .n{font-family:var(--mono);font-size:11px;color:var(--ind2);
padding-top:2px;font-weight:500}

/* ── Timeline (light) — vertical spine with dots + editorial entries ── */
#tl-list{position:relative;margin-top:18px;--prog:0}
#tl-list::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;
width:1px;background:linear-gradient(to bottom,
var(--inl) 0,var(--inl) calc(var(--prog) * 100%),
var(--rl) calc(var(--prog) * 100%),var(--rl) 100%);
transition:background .12s linear}
.tl-item{position:relative;display:block;padding:0 0 36px 36px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:2px;top:5px;
width:13px;height:13px;border-radius:50%;
background:var(--light);border:1.5px solid var(--inl3);
transition:background .45s cubic-bezier(.28,.11,.32,1),
border-color .45s ease,transform .45s ease,box-shadow .45s ease;
z-index:1}
.tl-item.in::before{background:var(--inl);border-color:var(--inl);
transform:scale(1.08);box-shadow:0 0 0 4px rgba(0,0,0,.04)}
.tl-y{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;
color:var(--inl2);letter-spacing:.2em;text-transform:uppercase;
font-variant-numeric:tabular-nums;line-height:1;margin:0 0 10px}
.tl-p{font-family:var(--display);font-weight:400;
font-size:22px;line-height:1.28;color:var(--inl);
letter-spacing:-.005em;margin:0;text-wrap:pretty;
font-variation-settings:"opsz" 36}
@media (min-width:760px){
#tl-list{margin-top:24px}
#tl-list::before{left:13px}
.tl-item{padding:0 0 46px 50px}
.tl-item::before{left:6px;width:15px;height:15px;top:6px}
.tl-p{font-size:25px}}
@media (min-width:1000px){
.tl-item{padding-bottom:56px}
.tl-p{font-size:28px;line-height:1.26;max-width:680px}}

/* ── Channel (dark) ── */
#channel{background:var(--dark);color:var(--ind);padding:80px 22px 70px;overflow:hidden}
#channel .glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:500px;height:500px;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 60%);
pointer-events:none;filter:blur(20px)}
#channel .inner{position:relative}
.ch-h2{font-family:var(--sans);font-weight:600;font-size:72px;line-height:.9;
letter-spacing:-.05em;color:var(--ind);margin:0 0 28px}
.ch-p{font-family:var(--text);font-size:19px;line-height:1.45;color:var(--ind);
margin:0 0 36px;max-width:360px;font-weight:400;letter-spacing:-.005em;text-wrap:pretty}
.ch-btn{display:flex;width:100%;align-items:center;justify-content:space-between;
padding:22px 28px;background:var(--ind);color:var(--dark);border:none;
border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:18px;
font-weight:600;letter-spacing:-.01em;margin-bottom:36px;
transition:transform .25s var(--ease)}
.ch-btn:active{transform:scale(.98)}
.ch-btn .arr{width:36px;height:36px;border-radius:50%;background:var(--dark);
color:var(--ind);display:flex;align-items:center;justify-content:center;font-size:17px}

/* ── Footer ── */
.foot{background:var(--dark);color:var(--ind);padding:32px 22px 140px;
border-top:1px solid var(--rd)}
.foot .wm{font-family:var(--sans);font-weight:600;font-size:56px;
letter-spacing:-.045em;color:var(--ind);line-height:.92;margin-bottom:26px}
.foot .fmeta{font-family:var(--mono);font-size:10.5px;color:var(--ind3);
letter-spacing:.1em;text-transform:uppercase;line-height:1.9}
.foot .fmeta b{color:var(--ind2);font-weight:400}
.foot .fmeta .cp{margin-top:18px;display:block}

/* ── Bottom pill ── */
.pill-wrap{position:fixed;left:0;right:0;bottom:22px;z-index:60;display:flex;
justify-content:center;pointer-events:none;padding-bottom:env(safe-area-inset-bottom,0px)}
.pill{pointer-events:auto;background:rgba(28,28,30,.72);
backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;
width:240px;max-width:376px;color:var(--ind);
transition:width .5s var(--ease);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.pill.expanded{width:calc(100% - 28px)}
.pill .col{width:100%;display:flex;align-items:center;gap:12px;padding:13px 18px;
border:none;background:transparent;color:var(--ind);cursor:pointer}
.pill .col .pd{width:6px;height:6px;border-radius:50%;background:var(--ind);
animation:pulse-fl 1.8s ease-in-out infinite;flex:none}
.pill .col .pn{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.14em;text-transform:uppercase}
.pill .col .pl{font-family:var(--sans);font-size:17px;font-weight:600;
color:var(--ind);letter-spacing:-.01em;flex:1;text-align:left}
.pill .exp{padding:14px 12px 12px}
.pill .exp-hd{display:flex;justify-content:space-between;align-items:center;
padding:0 6px 10px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.12)}
.pill .exp-hd .t{font-family:var(--mono);font-size:10px;color:var(--ind2);
letter-spacing:.18em;text-transform:uppercase}
.pill .exp-hd button{background:transparent;border:none;cursor:pointer;
color:var(--ind2);padding:4px;display:flex}
.pill .nav-b{display:flex;width:100%;align-items:baseline;gap:14px;padding:10px 8px;
border:none;background:transparent;cursor:pointer;text-align:left;
color:var(--ind2);transition:color .2s}
.pill .nav-b.on{color:var(--ind)}
.pill .nav-b .nn{font-family:var(--mono);font-size:11px;color:var(--ind3);
letter-spacing:.08em;width:26px;flex:none}
.pill .nav-b .nl{font-family:var(--sans);font-size:20px;font-weight:500;
letter-spacing:-.015em;flex:1}
.pill .nav-b .nd{width:6px;height:6px;border-radius:50%;background:var(--ind);flex:none}
.pill .compose{display:flex;width:100%;align-items:center;
justify-content:space-between;gap:10px;padding:14px 18px;margin-top:8px;
background:var(--ind);color:var(--dark);border:none;border-radius:16px;cursor:pointer;
font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.005em}

/* ── Contact modal ── */
.modal{position:fixed;inset:0;z-index:80;pointer-events:none}
.modal.open{pointer-events:auto}
.modal .scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);
opacity:0;transition:opacity .4s ease,backdrop-filter .4s ease}
.modal.open .scrim{opacity:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--dark-alt);
color:var(--ind);border-top:1px solid var(--rd);max-height:94%;overflow-y:auto;
transform:translateY(100%);transition:transform .55s cubic-bezier(.16,1.1,.3,1);
padding-bottom:32px;border-top-left-radius:24px;border-top-right-radius:24px}
.modal.open .sheet{transform:translateY(0)}
.modal .grip{display:flex;justify-content:center;padding-top:14px}
.modal .grip i{width:44px;height:4px;border-radius:2px;
background:rgba(255,255,255,.2);display:block}
.modal .m-hd{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 8px}
.modal .m-hd .t{font-family:var(--mono);font-size:10.5px;color:var(--ind2);
letter-spacing:.22em;text-transform:uppercase}
.modal .m-hd button{width:36px;height:36px;border:1px solid var(--rd);
background:transparent;cursor:pointer;color:var(--ind);display:flex;
align-items:center;justify-content:center;border-radius:50%}
.m-form{padding:8px 22px 32px}
.m-form h2{font-family:var(--sans);font-size:40px;font-weight:600;line-height:.98;
letter-spacing:-.04em;color:var(--ind);margin:0 0 24px}
.mfield{padding-top:24px;padding-bottom:8px;margin-bottom:6px;
border-bottom:1px solid var(--rd);transition:border-color .2s;position:relative}
.mfield.foc{border-bottom-color:var(--ind)}
.mfield.err{border-bottom-color:#ff453a}
.mfield label{position:absolute;left:0;top:32px;font-family:var(--text);
font-size:18px;letter-spacing:-.005em;color:var(--ind2);font-weight:500;
transition:all .3s var(--ease);pointer-events:none}
.mfield.fl label,.mfield.foc label{top:0;font-size:10px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ind)}
.mfield.err label{color:#ff453a}
.mfield input,.mfield textarea{width:100%;border:none;background:transparent;
padding:10px 0;font-family:var(--sans);font-size:22px;
color:var(--ind);font-weight:500;letter-spacing:-.015em;resize:none}
.mfield textarea{resize:vertical}
.m-submit{width:100%;margin-top:28px;padding:20px 24px;background:transparent;
color:var(--ind3);border:1px solid var(--rd);border-radius:999px;cursor:not-allowed;
font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.005em;
display:flex;justify-content:space-between;align-items:center;transition:all .25s}
.m-submit.ok{background:var(--ind);color:var(--dark);border-color:var(--ind);cursor:pointer}
.m-sent{padding:40px 22px 32px;display:none}
.m-sent .big{font-family:var(--sans);font-size:52px;font-weight:600;
letter-spacing:-.04em;line-height:.96;margin-bottom:18px}
.m-sent p{font-family:var(--text);font-size:17px;line-height:1.5;color:var(--ind2);margin:0}

@media (min-width:760px){
.hero-h h1{font-size:120px}
#specs h2,.h-dark,.h-light,.ch-h2{font-size:84px}
.spot .num{font-size:140px}
}

/* ===== Laptop / desktop margins (≥1000px) — layout only ===== */
@media (min-width:1000px){
  :root{--gut:max(48px,calc((100% - 1080px) / 2))}
  #hero{padding:128px var(--gut) 112px;min-height:90vh}
  .pad{padding:112px var(--gut)}
  #channel{padding:0}
  .foot{padding:60px var(--gut) 120px}

  /* readable measure on wide screens (display heads stay wide) */
  .hero-deck{max-width:460px}
  .pr-item p,.rc-item p,.sy-block p,.sy-block li,.tl-p,.fr-p,.ch-p,.spot p{max-width:680px}
  .hero-h h1{font-size:104px}
  #specs h2,.h-dark,.h-light,.ch-h2{font-size:74px}
  .spot .num{font-size:118px}
  .fr-frame{max-width:760px}

  /* centered modal sheet instead of full-bleed */
  .modal .sheet{left:50%;right:auto;width:600px;max-width:calc(100% - 64px);
    transform:translate(-50%,100%);
    border-radius:24px 24px 0 0}
  .modal.open .sheet{transform:translate(-50%,0)}
}
@media (min-width:1500px){
  :root{--gut:max(48px,calc((100% - 1120px) / 2))}
}

/* (WS.COMPUTER mark lives only in the Founder frame — see .fr-mark-img) */

/* Founder frame — original WS.COMPUTER lockup + low modern signature */
.fr-brand{position:relative;z-index:3;display:flex;flex-direction:column;
align-items:center;text-align:center}
.fr-lockup{width:86%;max-width:480px;height:auto;display:block}
.fr-by{position:absolute;left:0;right:0;bottom:34px;z-index:3;
text-align:center;font-family:var(--text);font-size:13px;font-weight:400;
letter-spacing:.005em;text-transform:none;color:var(--ind2)}
@media (min-width:1000px){
.fr-lockup{max-width:560px}
.fr-by{font-size:15px;bottom:46px}
}

/* ===== R&D variant — subtle scientific signals only ===== */
/* cooler, clinical chrome (less luxury gloss, more instrument steel) */
:root{--chrome:linear-gradient(180deg,#e9eaec 0%,#bcbfc4 56%,#8f9298 100%)}
/* faint precision grid — like graph paper / lab plotting */
.sec-dark,#hero,#channel,.foot{
background-image:
repeating-linear-gradient(0deg,rgba(245,245,247,.022) 0 1px,transparent 1px 44px),
repeating-linear-gradient(90deg,rgba(245,245,247,.022) 0 1px,transparent 1px 44px)}
.sec-light,.sec-lightalt{background-image:none}
/* eyebrow as a research designator: monospace, tighter, ticked */
.eyebrow{font-feature-settings:"tnum" 1;letter-spacing:.26em}
.eyebrow::before{content:"§ ";opacity:.55}
/* tabular, instrument-like big stats */
.spec-strip .v,.spot .num,.rc-n,.tl-y{font-feature-settings:"tnum" 1}

/* ===== Motion language — dramatic, visible across every element ===== */
/* long, soft easing — calm, deliberate, research-grade */
.rev{opacity:0;transform:translateY(56px);filter:blur(4px);
transition:opacity 1.1s cubic-bezier(.28,.11,.32,1),
transform 1.3s cubic-bezier(.28,.11,.32,1),
filter .8s ease}
.rev.sc{transform:translateY(56px) scale(.965)}
.rev.blur{filter:blur(10px)}
/* Respect users who prefer reduced motion — keep subtle fade only */
@media (prefers-reduced-motion:reduce){
.rev{transform:none;filter:none;transition:opacity .4s ease}
.rev.sc,.rev.blur{transform:none;filter:none}}
/* two-beat: the card heading/number rides the reveal; the smaller
   body copy follows a clear beat later (keyed to each card's own
   scroll-in) — exactly the production progressive-disclosure feel */
.pr-item p,.pr-item .pr-tags,.spot p,.rc-item p,
.sy-block p,.sy-block li,.tl-item .tl-p{
opacity:0;transform:translateY(14px);
transition:opacity .85s cubic-bezier(.28,.11,.32,1),
transform .9s cubic-bezier(.28,.11,.32,1)}
.pr-item.in p,.pr-item.in .pr-tags,.spot.in p,.rc-item.in p,
.sy-block.in p,.sy-block.in li,.tl-item.in .tl-p{
opacity:1;transform:none;transition-delay:.42s}

/* Founder: breathing room between the frame and the bio paragraphs */
#found-list{margin-top:54px}
@media (min-width:1000px){#found-list{margin-top:76px}}

/* fix: ensure revealed elements fully reset transform (so .sc scale
   does not linger and inset the founder frame ~18px from the column) */
.rev.in{transform:none;filter:none}

/* order-independent reset: 3-class selector always beats .rev.sc */
.rev.sc.in,.rev.blur.in,.rev.in{transform:none!important;filter:none!important}

/* (register-rule motif removed at request — section headings keep
   their original spacing; list items keep their own top dividers) */

/* 5 — engineered headline: a hair tighter tracking */
.hero-h h1{letter-spacing:-.052em}
.h-dark,.h-light,.ch-h2{letter-spacing:-.045em}

/* 2 — eyebrow as a quiet section marker (numbers + coords removed) */
.eyebrow{position:relative;padding-right:0;font-size:13px;letter-spacing:.18em}
.eyebrow::after{content:none}
@media (min-width:760px){.eyebrow{font-size:13.5px;letter-spacing:.2em}}

/* 3 — micro data footnote above each spotlight number */
.spot .fig{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--ind3);margin:0 0 10px}

/* 4 — single registration corner tick (echo of Founder frame) */
.spot{position:relative}
.spot::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;
border-top:1px solid var(--ind);border-left:1px solid var(--ind);opacity:.45}

/* 1 — scroll-progress hairline inside the bottom pill */
.pill{position:relative}
.pill .pill-prog{position:absolute;left:0;bottom:0;height:2px;width:0;
background:var(--ind);opacity:.85;pointer-events:none;transition:width .12s linear}

/* ===== Top sticky nav (classic, replaces bottom pill on mobile too) ===== */
html{scroll-padding-top:78px}
.site-hdr{position:sticky;top:0;z-index:90;
background:rgba(0,0,0,.78);
backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
border-bottom:1px solid rgba(245,245,247,.08)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;
padding:14px 22px;
height:60px;padding-top:calc(env(safe-area-inset-top,0px) + 14px);
height:calc(60px + env(safe-area-inset-top,0px))}
@media (min-width:1000px){.hdr-in{padding-left:var(--gut);padding-right:var(--gut)}}
.site-hdr .brand{font-family:var(--sans);font-size:17px;font-weight:600;
letter-spacing:-.01em;color:var(--ind)}
.top-nav{display:flex;gap:24px;font-family:var(--mono);font-size:10.5px;
letter-spacing:.16em;text-transform:uppercase}
.top-nav a{position:relative;color:var(--ind2);padding-bottom:3px;
transition:color .2s}
.top-nav a:hover,.top-nav a.on{color:var(--ind)}
.top-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--ind);transition:width .3s cubic-bezier(.28,.11,.32,1)}
.top-nav a.on::after{width:100%}

.nav-toggle{display:none;background:transparent;border:none;cursor:pointer;
width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;
gap:5px;z-index:100;position:relative;padding:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ind);
border-radius:1px;transition:transform .3s var(--ease),opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-ov{position:fixed;inset:0;z-index:95;background:var(--dark);
display:none;flex-direction:column;justify-content:center;overflow-y:auto;
padding:calc(env(safe-area-inset-top,0px) + 96px) 28px calc(env(safe-area-inset-bottom,0px) + 40px)}
.menu-ov.open{display:flex;animation:menuFade .35s cubic-bezier(.28,.11,.32,1)}
@keyframes menuFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu-ov a{display:flex;align-items:baseline;gap:14px;padding:14px 0;
font-family:var(--sans);font-size:38px;font-weight:600;letter-spacing:-.025em;
color:var(--ind);border-bottom:1px solid var(--rd)}
.menu-ov a:last-of-type{border-bottom:none}
.menu-ov a .n{font-family:var(--mono);font-size:11px;color:var(--ind3);
letter-spacing:.18em;text-transform:uppercase;width:28px;flex:none}
.menu-ov .foot{margin-top:36px;font-family:var(--mono);font-size:11px;color:var(--ind2);
letter-spacing:.14em;text-transform:uppercase}

/* hide the bottom pill — top nav replaces it */
.pill-wrap{display:none!important}

@media (max-width:760px){
.top-nav{display:none}
.nav-toggle{display:flex}
}

/* Top-nav: brand morphs from "GRUENCY" to "NN · Section" on scroll */
.site-hdr .brand{position:relative;display:block;height:24px;min-width:170px}
.site-hdr .brand .bd-logo,.site-hdr .brand .bd-sec{position:absolute;left:0;top:50%;
white-space:nowrap;transition:opacity .35s ease,transform .45s cubic-bezier(.28,.11,.32,1)}
.site-hdr .brand .bd-logo{transform:translateY(-50%);
font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ind)}
.site-hdr .brand .bd-sec{transform:translateY(calc(-50% - 8px));opacity:0;
pointer-events:none;display:flex;align-items:baseline;gap:10px}
.site-hdr .brand .bd-n{font-family:var(--mono);font-size:11px;color:var(--ind3);letter-spacing:.16em}
.site-hdr .brand .bd-l{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.005em;color:var(--ind)}
.site-hdr.scrolled .brand .bd-logo{opacity:0;transform:translateY(calc(-50% + 8px));pointer-events:none}
.site-hdr.scrolled .brand .bd-sec{opacity:1;transform:translateY(-50%)}

/* Hero headline — slightly smaller so long words don't clip */
.hero-h h1{font-size:66px}
@media (min-width:760px){.hero-h h1{font-size:88px}}
@media (min-width:1000px){.hero-h h1{font-size:100px}}

/* ===== Reading text — port of production "Apple-like" mobile rule:
   Raleway 600 · 18px · line-height 1.4 · full contrast · .003em ===== */
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{
font-family:var(--sans);
font-weight:600;letter-spacing:.003em;font-size:18px;line-height:1.4}
.fr-p.lead,.hero-deck{font-size:19px;line-height:1.42}
/* full-contrast color per background */
.sec-dark .fr-p,.sec-dark .spot p,.sec-dark .sy-block p,
.sec-dark .sy-block li,.sec-dark .ch-p,#hero .hero-deck{color:var(--ind)}
.sec-light .pr-item p,.sec-light .tl-p,
.sec-lightalt .rc-item p{color:var(--inl)}

/* sticky header — show only the section label (drop the chapter number) */
.site-hdr .brand .bd-n{display:none}
.site-hdr .brand .bd-sec{gap:0}

/* Section headings — match the hero size reduction (proportional scale) */
.h-dark,.h-light,.ch-h2,#specs h2{font-size:50px}
@media (min-width:760px){
.h-dark,.h-light,.ch-h2,#specs h2{font-size:64px}}
@media (min-width:1000px){
.h-dark,.h-light,.ch-h2,#specs h2{font-size:72px}}

/* (Timeline year sizes are now defined in the card layout block above.) */

/* Mobile only: tone down the loud spotlight numerals (11 / ∞ / A→Z) */
@media (max-width:759.98px){
.spot .num{font-size:76px;line-height:.95;letter-spacing:-.05em}
.spot .lab{margin-bottom:10px}
}

/* Mobile only: drop the framing rules of the hero spec strip — the
   numbers stand on their own; vertical dividers between cells stay */
@media (max-width:759.98px){
.spec-strip{border-top:none;border-bottom:none;padding:14px 0 0}
}

/* Mobile only: tiny line-height tighten on the reading copy
   (1.40 → 1.36, lead 1.42 → 1.38) for a slightly more compact feel */
@media (max-width:759.98px){
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{line-height:1.36}
.fr-p.lead,.hero-deck{line-height:1.38}
}

/* Mobile menu overlay — Apple-style spacing/typography, no dividers,
   explicit close X always visible top-right (the morphed nav-toggle) */
@media (max-width:759.98px){
.menu-ov{justify-content:flex-start;
padding:calc(env(safe-area-inset-top,0px) + 92px) 28px calc(env(safe-area-inset-bottom,0px) + 32px)}
.menu-ov a{border-bottom:none;padding:18px 0;font-size:42px;font-weight:500;
letter-spacing:-.025em;line-height:1.05}
.menu-ov a .n{font-size:11px;color:var(--ind3);letter-spacing:.18em;
margin-right:18px;width:32px}
.menu-ov .foot{margin-top:auto;padding-top:24px}
/* ensure the close (morphed hamburger) sits above the overlay */
.nav-toggle{z-index:120}
.nav-toggle.open span{background:var(--ind)}
}

/* Mobile menu — smaller items, tighter spacing */
@media (max-width:759.98px){
.menu-ov a{padding:9px 0;font-size:28px;font-weight:500;
letter-spacing:-.02em;line-height:1.1}
.menu-ov a .n{font-size:10px;margin-right:14px;width:26px}
}

/* In-overlay close X (always visible top-right of opened menu) */
.menu-close{position:absolute;
top:calc(env(safe-area-inset-top,0px) + 18px);right:22px;
width:44px;height:44px;background:transparent;border:none;cursor:pointer;
z-index:5;display:flex;align-items:center;justify-content:center;padding:0}
.menu-close::before,.menu-close::after{content:"";position:absolute;
width:22px;height:2px;background:var(--ind);border-radius:1px}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}

/* Mobile only: one more notch tighter on the reading copy (1.36 → 1.32) */
@media (max-width:759.98px){
.fr-p,.pr-item p,.rc-item p,.sy-block p,.sy-block li,
.spot p,.ch-p,.hero-deck{line-height:1.32}
.fr-p.lead,.hero-deck{line-height:1.34}
}

/* Remove the leading "§" before section numbers in eyebrows */
.eyebrow::before{content:none}

/* Editorial serif unified across ALL headings (Newsreader, like the old site) */
.hero-h h1,.h-dark,.h-light,.ch-h2,#specs h2,
.pr-item h3,.rc-item h3,.sy-block h3,
.fr-mark,.m-form h2,.m-sent .big{
font-family:var(--display);font-weight:500;letter-spacing:-.012em}
/* display tier: hero + section headings — tight line, large opsz */
.hero-h h1,.h-dark,.h-light,.ch-h2,#specs h2{
line-height:.98;font-variation-settings:"opsz" 72}
/* sub-heading tier: item titles — breathing line, smaller opsz */
.pr-item h3,.rc-item h3,.sy-block h3,
.fr-mark,.m-form h2,.m-sent .big{
line-height:1.1;font-variation-settings:"opsz" 36}
.hero-h h1 .chrome,.h-dark em,.h-light em,.ch-h2 .chrome,.fr-mark em{
font-style:italic;font-weight:500;letter-spacing:-.005em}

/* Adaptive sticky header — swap theme to match section underneath */
.site-hdr{transition:background .25s ease,border-color .25s ease}
.site-hdr.on-light{background:rgba(245,245,247,.82);border-bottom-color:rgba(0,0,0,.08)}
.site-hdr.on-light .brand,
.site-hdr.on-light .brand .bd-l{color:var(--inl)}
.site-hdr.on-light .top-nav a{color:var(--inl2)}
.site-hdr.on-light .top-nav a:hover,
.site-hdr.on-light .top-nav a.on{color:var(--inl)}
.site-hdr.on-light .top-nav a::after{background:var(--inl)}
.site-hdr.on-light .brand .bd-n{color:var(--inl3)}
.site-hdr.on-light .nav-toggle span{background:var(--inl)}
/* keep X bars visible on dark menu overlay when toggle is open */
.site-hdr.on-light .nav-toggle.open span{background:var(--ind)}

/* ═══════════ v50 — Fala 0: a11y + nowe sekcje ═══════════ */

/* focus + skip-link */
:focus-visible{outline:2px solid var(--ind);outline-offset:3px;border-radius:2px}
.sec-light :focus-visible,.sec-lightalt :focus-visible,
.site-hdr.on-light :focus-visible{outline-color:var(--inl)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ind);color:var(--dark);
padding:10px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.skip:focus-visible{left:12px;top:12px}

/* kontrast: tekst pomocniczy na czerni ≥ 7:1 (--ind3 zostaje dekoracyjny) */
:root{--ind-cap:rgba(245,245,247,.62)}
.foot .fmeta{color:var(--ind-cap)}
.foot .fmeta a{color:inherit;border-bottom:1px solid var(--rds)}
.foot .fmeta a:hover{color:var(--ind)}
.pill .nav-b .nn{color:var(--ind-cap)}

/* header CTA */
.top-nav{margin-left:auto}
.hdr-cta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ind);background:none;border:1px solid var(--rd);padding:8px 14px;cursor:pointer;
white-space:nowrap;transition:border-color .2s,color .2s}
.hdr-cta:hover{border-color:var(--ind)}
.site-hdr.on-light .hdr-cta{color:var(--inl);border-color:var(--rl)}
.site-hdr.on-light .hdr-cta:hover{border-color:var(--inl)}
@media(max-width:999.98px){.hdr-cta{display:none}}

/* hero CTA */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn-p{display:inline-flex;align-items:center;gap:10px;background:var(--ind);color:var(--dark);
border:1.5px solid var(--ind);padding:13px 22px;font-family:var(--mono);font-size:12px;
letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.btn-p:hover{background:transparent;color:var(--ind)}
.btn-g{display:inline-flex;align-items:center;padding:13px 22px;border:1px solid var(--rd);
color:var(--ind2);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;transition:border-color .2s,color .2s}
.btn-g:hover{border-color:var(--ind);color:var(--ind)}

/* intro pod H2 na jasnych sekcjach */
.intro-p{margin:14px 0 6px;font-size:16.5px;color:var(--inl2);max-width:640px}

/* CTA filarów + sygnatura */
.pr-cta{background:none;border:0;border-bottom:1px solid var(--rl);padding:0 0 3px;margin-top:16px;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--inl);cursor:pointer;transition:border-color .2s}
.pr-cta:hover{border-color:var(--inl)}
.sig-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--rls);
font-size:13.5px;color:var(--inl2);max-width:620px}

/* Who it's for */
.aud-list{list-style:none;margin:18px 0 0;padding:0}
.aud-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 0;
border-top:1px solid var(--rls)}
.aud-list .n{font-family:var(--mono);font-size:11px;color:var(--inl2);letter-spacing:.1em;padding-top:3px}
.aud-list strong{font-size:16px;letter-spacing:-.01em;font-weight:600}
.aud-list p{font-size:14px;color:var(--inl2);margin-top:3px;max-width:560px}

/* Representative systems */
.spec-grid{display:grid;gap:14px;margin-top:16px}
@media(min-width:900px){.spec-grid{grid-template-columns:repeat(3,1fr)}}
.spec-card{border:1px solid var(--rl);background:var(--light-alt);padding:22px 24px}
.sc-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--inl2);margin-bottom:10px}
.spec-card h3{font-size:19px;letter-spacing:-.01em;margin:0 0 14px;font-weight:600}
.sc-spec{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px;
font-variant-numeric:tabular-nums}
.sc-spec li{display:flex;gap:14px;padding:7px 0;border-top:1px solid var(--rls)}
.sc-spec b{min-width:76px;font-weight:500;color:var(--inl2);text-transform:uppercase;
font-size:10px;letter-spacing:.12em;padding-top:1px}
.sc-spec span{color:var(--inl)}
.showcase-cta{margin-top:26px;font-size:14.5px;color:var(--inl2)}

/* Process */
.proc{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:26px}
@media(min-width:900px){.proc{grid-template-columns:repeat(5,1fr);gap:20px}}
.proc li{border-top:1px solid var(--rds);padding-top:14px}
.proc .n{font-family:var(--mono);font-size:11px;color:var(--ind-cap);letter-spacing:.14em}
.proc h3{font-size:16px;margin:8px 0 6px;font-weight:600;letter-spacing:-.008em}
.proc p{font-size:13px;color:var(--ind2);line-height:1.55}
.proc-cta{margin-top:30px}

/* Why custom */
.why-list{margin-top:10px}
.why-item{max-width:66ch;padding:16px 0;border-top:1px solid var(--rls)}
.why-item .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
text-transform:uppercase;color:var(--inl2);margin-bottom:6px}
.why-item p{font-size:15.5px;color:var(--inl)}

/* FAQ */
.faq-list{max-width:720px;margin-top:10px}
.faq-list details{border-top:1px solid var(--rl)}
.faq-list details:last-child{border-bottom:1px solid var(--rl)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
gap:20px;align-items:baseline;padding:16px 0;font-weight:600;font-size:16px;letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--mono);color:var(--inl2);font-weight:400;flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{padding:0 0 18px;color:var(--inl2);font-size:14.5px;max-width:64ch}

/* Contact — alternatywa mailowa */
.ch-alt{margin-top:18px;font-size:13.5px;color:var(--ind2)}
.ch-alt a{border-bottom:1px solid var(--rd)}
.ch-alt a:hover{color:var(--ind);border-color:var(--ind)}

/* Formularz — status + honeypot */
.m-status{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ind2);min-height:1em}
.m-status.err{color:#ff8a80}
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Founder — listwa dat (wchłonięty Timeline) */
.fr-dates{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:30px;padding-top:16px;
border-top:1px solid var(--rds);font-family:var(--mono);font-size:11px;
letter-spacing:.03em;color:var(--ind-cap)}
.fr-dates b{color:var(--ind);font-weight:500;margin-right:6px}

/* ═══════════ v51 — zdjęcia systemów + landery ═══════════ */
.sc-photo{margin:-22px -24px 14px;aspect-ratio:3/2;overflow:hidden;background:#050505}
.sc-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sc-fig{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--inl2);margin:0 0 12px}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ind2);margin-bottom:26px}
.crumb a{border-bottom:1px solid var(--rds)}
.crumb a:hover{color:var(--ind)}
.lead-d{font-size:19px;line-height:1.45;color:var(--ind2);max-width:640px;margin:18px 0 8px;font-weight:400}
.ld-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.ld-photo{margin:40px 0 8px;border:1px solid var(--rd)}
.ld-photo img{width:100%;display:block;height:auto}
.ld-fig{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--ind2);margin:10px 0 0}
.foot-nav{display:flex;gap:8px 22px;flex-wrap:wrap;margin:2px 0 8px;
font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.foot-nav a{color:var(--ind-cap);border-bottom:1px solid var(--rds)}
.foot-nav a:hover{color:var(--ind)}

/* ═══ v53 — czytelność na 14" laptopie: podbicie drugorzędnych tekstów ═══ */
.proc p{font-size:14px;line-height:1.6}
.aud-list p{font-size:15px}
.faq-list details p{font-size:15.5px}
.why-item p{font-size:16px}
.sig-note{font-size:14px}
.ch-alt{font-size:14px}
.showcase-cta{font-size:15px}

/* ═══ v55 — pasek dokumentacji prototypu (case study) ═══ */
.proto-strip{display:grid;gap:14px;margin:40px 0 8px;max-width:980px}
@media(min-width:900px){.proto-strip{grid-template-columns:repeat(3,1fr)}}
.proto-strip figure{margin:0;border:1px solid var(--rd);background:#050505}
.proto-strip img{width:100%;height:auto;display:block}
.proto-strip .ld-fig{margin:8px 10px 12px}
.proto-strip{align-items:start}

/* ═══ v59 — luźniejszy header: 6 linków + oddech przed CTA ═══ */
.top-nav{gap:27px}
.hdr-cta{margin-left:30px}

/* ═══ v60 — Trusted by: kafle typograficzne ═══ */
.trust-grid{display:grid;gap:14px;margin-top:26px;grid-template-columns:repeat(2,1fr);max-width:980px}
@media(min-width:900px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-tile{border:1px solid var(--rl);background:var(--light-alt);padding:30px 22px 26px;
display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tt-name{font-family:var(--sans);font-weight:600;font-size:clamp(20px,2.2vw,26px);
letter-spacing:.02em;color:var(--inl)}
.tt-sub{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inl2)}
.trust-note{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
color:var(--inl2);max-width:640px}

/* ═══ v61 — globus klientów ═══ */
.globe-wrap{position:relative;margin:34px 0 26px;max-width:980px}
#globe{display:block;width:100%;height:auto;aspect-ratio:16/10;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
.globe-tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .15s;
font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--ind);background:rgba(0,0,0,.72);border:1px solid var(--rd);padding:4px 8px;white-space:nowrap}
@media(max-width:760px){#globe{aspect-ratio:1/1}}

/* ═══ v62 — płaska cyber-mapa zamiast globusa ═══ */
#globe{aspect-ratio:2.55/1;cursor:crosshair}
@media(max-width:760px){#globe{aspect-ratio:1.7/1}}

/* ═══ v64 — machine band: № 10004 quad-GPU circuit (index showcase) ═══ */
.machine-band{margin:50px 0 44px}
.machine-band img{display:block;width:100vw;margin-inline:calc(50% - 50vw);
height:clamp(280px,36vw,560px);object-fit:cover;object-position:58% 50%;background:#050505}
.band-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--inl2);margin:14px 0 0}
@media(max-width:759.98px){.machine-band img{height:min(64vw,340px)}}

/* ═══ v65 — audience: cascade visual right of the list ═══ */
.aud-cols{display:grid;gap:36px;align-items:start}
@media(min-width:1000px){
  .aud-cols{grid-template-columns:minmax(0,1fr) 400px;gap:64px}
}
.aud-visual{margin:26px 0 0}
@media(min-width:1000px){.aud-visual{margin:8px 0 0}}
.aud-visual img{display:block;width:100%;height:auto;background:#050505}

/* ═══ v66 — audience: dominant full-height visual, list bez numeracji i linii ═══ */
.aud-cols{align-items:stretch}
@media(min-width:1000px){
  .aud-cols{grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:76px}
}
.aud-visual{margin:0;position:relative}
@media(min-width:1000px){.aud-visual img{height:100%;object-fit:cover;object-position:50% 42%}}
.aud-list{margin-top:30px}
.aud-list li{display:block;grid-template-columns:none;border-top:0;padding:19px 0}
.aud-list .n{display:none}
.aud-list strong{font-size:17px}
.aud-list p{margin-top:5px}

/* ═══ v67 — audience visual: więcej prawej strony kadru + zoom (narożnik obudowy poza kadrem) ═══ */
@media(min-width:1000px){
  .aud-visual{overflow:hidden}
  .aud-visual img{object-position:64% 42%;transform:scale(1.07);transform-origin:50% 60%}
}

/* ═══ v68 — showcase: shapes zamiast teczek; band kadr od góry; systems: № 10004 na czerni ═══ */
.machine-band img{object-position:58% 10%}
.shape-row{display:grid;gap:38px;margin-top:46px}
@media(min-width:900px){.shape-row{grid-template-columns:repeat(3,1fr);gap:56px}}
.sh-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--inl2);margin-bottom:10px}
.shape h3{font-size:18px;letter-spacing:-.01em;margin:0 0 8px}
.shape p{font-size:14.5px;color:var(--inl2);margin:0;text-wrap:pretty}
.sys-photo{margin:36px 0 6px}
.sys-photo img{display:block;width:100%;height:auto}
.sys-photo .band-cap{color:var(--ind2)}

/* ═══ v69 — band: docelowy kadr Sebastiana (white3, LCD duży + kaskada), okno centrowane ═══ */
.machine-band img{object-position:50% 35%}

/* ═══ v70 — band w naturalnych proporcjach: pełny kadr, bez przycinania oknem ═══ */
.machine-band img{height:auto}
@media(max-width:759.98px){.machine-band img{height:auto}}

/* ═══ v72 — trusted: ciemny pas po hero (+ setki artystów), biała sekcja OUT; systems A: maszyna jako tło z prawej ═══ */
.trust-strip{padding:64px 22px}
@media(min-width:1000px){.trust-strip{padding:88px var(--gut) 80px}}
.trust-row{display:flex;flex-wrap:wrap;gap:34px 62px;margin-top:28px;align-items:baseline}
.trust-item{display:flex;flex-direction:column;gap:7px}
.ts-name{font-size:25px;font-weight:700;letter-spacing:.02em;color:var(--ind)}
.ts-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ind2)}
.ts-note{margin:34px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ind2);max-width:520px}
@media(min-width:1000px){
  .sy-hw{background:url(assets/ws10004-bg.webp) right center/cover no-repeat;min-height:730px}
  .sy-hw .sys-photo{display:none}
}

/* ═══ v73 — tło maszyny dociśnięte do #000 (bez szwu z sekcją) ═══ */
@media(min-width:1000px){.sy-hw{background-image:url(assets/ws10004-bg2.webp)}}

/* ═══ v74 — mapa na jasnym tle (sekcja sec-lightalt), kadr bez Alaski, do Nowej Zelandii ═══ */
#globe{aspect-ratio:2.2/1}
@media(max-width:760px){#globe{aspect-ratio:1.5/1}}

/* ═══ v75 — maszyna: oryginalne podłoże ze światłem (B&W, grafitowe kółka), mocniej w prawo, krawędzie w fade ═══ */
@media(min-width:1000px){.sy-hw{background-image:url(assets/ws10004-bg3.webp)}}

/* ═══ v76 — maszyna: ORYGINAŁ 1:1, jedynie żółte koła→ciemnoszare ═══ */
@media(min-width:1000px){.sy-hw{background-image:url(assets/ws10004-bg4.webp)}}

/* ═══ v77 — bez rozmycia krawędzi: czysty kadr oryginału ═══ */
@media(min-width:1000px){.sy-hw{background-image:url(assets/ws10004-bg5.webp)}}

/* ═══ v78 — trusted pod mapą, na jasnym tle ═══ */
.trust-strip{padding:36px 22px 76px}
@media(min-width:1000px){.trust-strip{padding:44px var(--gut) 104px}}
.trust-strip .ts-name{color:var(--inl)}
.trust-strip .ts-sub{color:var(--inl2)}
.trust-strip .ts-note{color:var(--inl2)}