@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-ext-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-1.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;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-ext-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-1.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;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-ext-0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-1.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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/SourceSerif4-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/SourceSerif4-latin-3.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;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/SourceSerif4-latin-ext-2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/SourceSerif4-latin-3.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;
}

:root{
  --slate:#2f3a4a;      /* pióro gołębia */
  --ink:#1c2330;
  --paper:#f6f7f9;
  --sheen-g:#1f6f5e;    /* zielony połysk szyi */
  --sheen-p:#7a4fa3;    /* fioletowy połysk szyi */
  --rule:#cfd6df;
  --muted:#5b6676;
  --card:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root{--slate:#c9d3e0;--ink:#e9edf3;--paper:#141a23;--rule:#2c3644;--muted:#9aa6b6;--card:#1b2330;--sheen-g:#4fc3a6;--sheen-p:#b08ad8}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 "Source Serif 4",Georgia,serif}
h1,h2,h3,.brand,.btn,nav{font-family:"Bricolage Grotesque",system-ui,sans-serif}
h1{font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;margin:0 0 1.2rem;font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 1rem;font-weight:700}
h3{font-size:1.25rem;line-height:1.25;margin:0 0 .5rem}
p{margin:0 0 1rem;max-width:66ch}
a{color:var(--sheen-p)}
:focus-visible{outline:3px solid var(--sheen-g);outline-offset:3px}
.hero-band :focus-visible,.final :focus-visible{outline-color:#4fc3a6}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--ink);color:var(--paper);padding:.7rem 1rem;border-radius:8px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.skip:focus{top:1rem}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.5rem}
nav{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.95rem}
nav a{color:var(--ink);text-decoration:none;display:inline-block;padding:.5rem .15rem;min-height:24px}
nav a:hover,nav a[aria-current]{color:var(--sheen-p);text-decoration:underline}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;background:var(--ink);color:var(--paper);border:2px solid var(--ink)}
.btn:hover{background:var(--sheen-p);border-color:var(--sheen-p);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:#fff}

/* hero: papierowy rodowód zamienia się w cyfrowe drzewo.
   Tło to łupkowy szary pióra; połysk szyi (zielony->fioletowy) tylko w linii skanu. */
.hero-band{background:#2f3a4a;color:#eef2f7;border-bottom:1px solid #243041}
.hero{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem);display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.9rem)}
.hero .lead{font-size:1.25rem;color:#c3ccd8}
.hero p{color:#c3ccd8}
.hero .ctas{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hero .btn{background:#eef2f7;color:#1c2330;border-color:#eef2f7}
.hero .btn:hover{background:#4fc3a6;border-color:#4fc3a6;color:#10161f}
.hero .btn.ghost{background:transparent;color:#eef2f7;border-color:#6f7d90}
.hero .btn.ghost:hover{border-color:#eef2f7;background:transparent;color:#fff}

.scene{position:relative;aspect-ratio:46/38;min-height:280px}
.paper{position:absolute;left:0;top:0;width:46%;height:78%;background:#fbfbf8;border-radius:4px;padding:16px 16px;transform:rotate(-5deg);
  box-shadow:0 18px 40px -12px rgba(8,12,20,.55);overflow:hidden}
.paper-title{font:700 15px "Bricolage Grotesque",sans-serif;color:#2f3a4a;border-bottom:2px solid #2f3a4a;padding-bottom:6px;margin-bottom:12px}
.paper-grid{display:grid;gap:11px}
.pen{display:block;height:7px;border-radius:4px;background:#5a6d8a;opacity:.55}
.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}
.scan{position:absolute;left:-10%;right:-10%;top:-12%;height:10px;background:linear-gradient(90deg,#4fc3a6,#b08ad8);
  box-shadow:0 0 22px 6px rgba(79,195,166,.45);animation:scan 1.5s .3s cubic-bezier(.5,0,.3,1) both}
@keyframes scan{from{top:-12%;opacity:1}90%{opacity:1}to{top:108%;opacity:0}}

.tree{position:absolute;right:0;bottom:0;width:78%;height:auto;background:#243041;border-radius:14px;padding:14px;
  box-shadow:0 24px 50px -16px rgba(8,12,20,.6)}
.tree .node{fill:#2f3a4a;stroke:#8696ad;stroke-width:1.5}
.tree .line{stroke:#7f90a8;stroke-width:2.5;fill:none}
.tree text{font:600 12px "Bricolage Grotesque",sans-serif;fill:#eef2f7}
.tree .sub{font:400 10px "Source Serif 4",serif;fill:#a9b4c3}
.tree .root{stroke:#b08ad8;stroke-width:2.5}
.tree .draw{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.2s 1.5s ease-out forwards}
.tree .d2{animation-delay:2s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.scan{display:none}.tree .draw{stroke-dashoffset:0}}

section{padding:4rem 0;border-top:1px solid var(--rule)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.feat svg{width:44px;height:44px;margin-bottom:.6rem}
.feat p{font-size:1rem;color:var(--muted)}

/* porównanie */
table.cmp{width:100%;border-collapse:collapse;font-size:1rem}
table.cmp th,table.cmp td{text-align:left;padding:.85rem .6rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.cmp th{font-family:"Bricolage Grotesque",sans-serif}
table.cmp td.yes{color:var(--sheen-g);font-weight:700}
table.cmp td.meh{color:var(--muted)}
.table-scroll{overflow-x:auto}

.quote{font-size:clamp(1.4rem,3vw,2rem);font-family:"Bricolage Grotesque",sans-serif;line-height:1.25;max-width:28ch;font-weight:600}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.posts article{border-top:3px solid var(--slate);padding-top:1rem}
.posts a{color:var(--ink);text-decoration:none}
.posts a:hover h3,.posts a:hover h2{color:var(--sheen-p)}
.posts h2{margin:0 0 .5rem;line-height:1.25}
.posts time{font-size:.9rem;color:var(--muted)}

details{border-bottom:1px solid var(--rule);padding:1rem 0}
summary{cursor:pointer;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.1rem}
details p{margin-top:.8rem}

.final{background:var(--ink);color:var(--paper);border:0}
.final p{color:inherit;opacity:.85}
.final .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.final .btn.ghost-light{background:transparent;color:var(--paper);border-color:#6f7d90}
.final .btn:hover{background:var(--sheen-g);border-color:var(--sheen-g);color:#fff}

article.post{max-width:720px;margin:0 auto;padding:3rem 20px 4rem}
article.post h1{font-size:clamp(2rem,5vw,3.2rem)}
article.post h2{font-size:1.6rem;margin-top:2.4rem}
article.post .meta{color:var(--muted);font-size:.95rem;margin-bottom:2rem}
article.post .tldr{font-size:1.15rem;line-height:1.55;border-top:3px solid var(--slate);border-bottom:1px solid var(--rule);padding:1rem 0;margin:0 0 2rem}
article.post .box{border-left:4px solid var(--sheen-g);padding:.6rem 1.2rem;margin:2rem 0;background:var(--card)}
.crumbs{font-size:.9rem;color:var(--muted);padding-top:1.5rem}
.crumbs a{color:var(--muted)}

footer{padding:2.5rem 0;font-size:.9rem;color:var(--muted);border-top:1px solid var(--rule)}

@media (max-width:820px){
  .hero,.split{grid-template-columns:1fr}
  .scene{max-width:520px;width:100%}
  .feat,.posts{grid-template-columns:1fr}
  nav{gap:.9rem}
}