/* Typografia i kompozycja */
:root {
    --ink: #275469;
    --heading: #12516c;
    --muted: #57798a;
    --accent: #007f9e;
    --accent-2: #f27b6c;
    --line: #c7dfe6;
    --paper: #ffffff;
    --soft: #e9f6f9;
    --soft-2: #d7eff4;
    --light: #f6fbfd;
    --mint: #b6e7d9;
    --radius: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--light); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.66; color: var(--ink); }
main, header, footer { width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: #d05e52; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 5px; }
a[href=""] { text-decoration: none; color: inherit; font-weight: inherit; border: 0; }
a[href=""]:hover { color: var(--accent); }
.container { width: min(1248px, calc(100% - 76px)); margin-inline: auto; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 40px; line-height: 1.17; color: var(--heading); letter-spacing: -1.5px; font-weight: 770; }
h2 { font-size: 28px; line-height: 1.27; color: var(--heading); letter-spacing: -.55px; font-weight: 750; }
h3 { font-size: 20px; line-height: 1.35; color: var(--heading); letter-spacing: -.25px; }
p { font-size: 16px; line-height: 1.72; }
.skip-link { position: absolute; top: -70px; left: 16px; z-index: 100; padding: 8px 14px; background: #fff; }
.skip-link:focus { top: 9px; }
.site-header { background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); text-decoration: none; font-size: 20px; font-weight: 900; letter-spacing: -.8px; white-space: nowrap; }
.wordmark-dot { color: var(--accent-2); }
.brand-mark { width: 30px; height: 30px; background: var(--accent); border-radius: 7px; display: grid; place-items: center; position: relative; }
.brand-mark::before { content:""; position: absolute; top: 5px; left: 6px; right: 6px; height: 3px; border-radius: 10px; background: #d0f6f7; }
.brand-mark > span { width: 17px; height: 17px; border: 3px solid #fff; border-radius: 50%; margin-top: 7px; }
.desktop-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(9px, 1.8vw, 24px); }
.desktop-nav a, .header-link { font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.desktop-nav a { color: var(--ink); }
.desktop-nav a:hover { color: var(--accent); }
.header-link { background: var(--soft); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; }
.mobile-menu { display: none; }
.overline, .section-mark, .edition, .tiny-no, .section-mark, .side-index, .data-label, .highlight-tag, .cover-illustration-top, .topic-meta, .breadcrumbs, .machine-caption, .visual-footer, .aside-related > span { font-size: 11px; line-height: 1.4; letter-spacing: .10em; font-weight: 800; text-transform: uppercase; }
.overline { display: flex; align-items: center; gap: 10px; color: var(--accent); margin-bottom: 24px; }
.overline-line { width: 30px; height: 2px; display: inline-block; background: var(--accent-2); }
.hero { background: linear-gradient(115deg, #e8f6f9, #e2f5f7 65%, #d4ecf4); border-bottom: 1px solid var(--line); }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.92fr); gap: clamp(24px, 4.3vw, 58px); align-items: center; padding-block: 60px 58px; }
.hero-copy h1 { max-width: 640px; }
.hero-copy h1 em { color: var(--accent); font-style: normal; }
.hero-intro { margin-top: 24px; max-width: 660px; font-size: 16px; line-height: 1.62; font-weight: 520; }
.hero-detail { margin-top: 15px; color: var(--muted); max-width: 670px; }
.hero-actions { display:flex; flex-wrap: wrap; align-items: center; gap:12px; margin-top: 27px; }
.button-primary,.button-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 800; text-decoration: none; min-height: 48px; text-align: center; }
.button-primary { background: var(--accent); color: #fff; }
.button-primary:hover { background: #00637d; color: #fff; }
.button-secondary { background: #fff; border: 1px solid #b6d8e2; color: var(--heading); }
.button-secondary:hover { background: #d5edf4; }
.hero-visual { min-width: 0; }
.machine-stage { position: relative; height: 390px; background: #d2eaf0; border: 1px solid #bbdae3; border-radius: 28px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.machine-stage::before, .machine-stage::after { content:""; position:absolute; display:block; width:330px; height:330px; border: 1px solid #b0d6df; border-radius: 50%; }
.machine-stage::before { transform: translate(135px,-125px); }
.machine-stage::after { transform: translate(-165px,168px); width:270px; height:270px; }
.machine-caption { position: absolute; z-index: 3; color: #47788c; }
.machine-caption.top { top: 18px; left: 22px; }
.machine-caption.bottom { bottom: 18px; right: 22px; }
.washer-body { position:relative; width: 254px; height: 318px; border-radius: 16px 16px 12px 12px; background: #f9feff; border: 5px solid #b8d8e2; box-shadow: 14px 14px 0 rgba(94,154,172,.12); z-index:1; }
.washer-ctrl { height: 63px; border-bottom: 2px solid #cee2e8; position:relative; display:flex; align-items:center; padding: 10px; gap: 10px; }
.washer-logo { width:55px; height:10px; border: 2px solid #91c8d7; border-radius: 3px; }
.washer-display { margin-left: auto; border:3px solid #3b8298; background: #c0edf0; padding: 2px 9px; color: #1b6f82; border-radius: 3px; font-size: 13px; font-weight: 900; }
.washer-dial { width:31px; height:31px; border-radius:50%; border: 6px solid #a0c8d3; background: #fff; box-shadow: inset 0 0 0 2px #4a91a5; }
.washer-dot { position:absolute; right:11px; bottom:7px; width: 5px; height:5px; border-radius:50%; background: var(--accent-2); }
.washer-door { width: 207px; height:207px; margin: 15px auto 0; border-radius:50%; border: 15px solid #dbeef3; background: #a4d3df; box-shadow: inset 0 0 0 4px #7dafc1, 0 0 0 3px #c1dce4; display:grid; place-items:center; }
.washer-drum { position:relative; border-radius:50%; width:152px; height:152px; overflow:hidden; background: radial-gradient(circle at 38% 24%,#c1f5ee 0,#75c0cd 50%,#38839c 95%); border: 6px solid #378ba2; }
.washer-drum::before { content:""; position:absolute; width:210px; height:95px; top:91px; left:-25px; transform:rotate(-12deg); border-radius:48%; background:#6ebfd0; box-shadow:0 -4px 0 rgba(224,254,254,.75); }
.washer-swirl { position:absolute; top:34px; left:30px; border: 12px solid rgba(237,255,255,.48); border-right-color:transparent; border-bottom-color:transparent; width:83px; height:83px; border-radius:50%; transform:rotate(32deg); }
.washer-bubble { position:absolute; border:2px solid rgba(255,255,255,.75); border-radius:50%; z-index:2; }
.washer-bubble.b1 { width:12px; height:12px; left:45px; top:76px; }.washer-bubble.b2 { width:8px; height:8px; left:100px; top:39px; }.washer-bubble.b3 { width:17px; height:17px; left:89px; top:96px; }
.washer-filter { width: 34px; height: 10px; background:#cee3e9; border-radius:4px; position:absolute; bottom:8px; right:15px; }
.visual-footer { display:flex; justify-content:space-between; margin-top: 11px; color:#678d9b; gap:14px; }
.quick-diagnosis { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:14px; background:#fff; margin-top: 31px; overflow:hidden; }
.quick-diagnosis > div { padding: 22px 27px; min-width:0; }
.quick-diagnosis > div + div { border-left:1px solid var(--line); }
.tiny-no { display:block; color:var(--accent-2); margin-bottom:7px; }
.quick-diagnosis strong { display:block; font-size:18px; color:var(--heading); line-height: 1.4; }
.quick-diagnosis p { color:var(--muted); margin: 4px 0 7px; }
.quick-diagnosis a { font-size: 13px; font-weight: 750; text-decoration: none; }
.editorial-section { padding: 57px 0 53px; border-bottom: 1px solid var(--line); scroll-margin-top:20px; }
.editorial-identity { display:grid; grid-template-columns: 115px 1fr; column-gap:20px; align-items:baseline; margin-bottom: 23px; }
.editorial-identity .edition { color:var(--accent); grid-row:1 / span 2; }
.editorial-identity .section-lead { grid-column:2; color:var(--muted); margin-top:3px; }
.split-layout { display:grid; grid-template-columns: minmax(0,1.8fr) minmax(250px, .94fr); gap: clamp(24px,4vw,56px); align-items:start; }
.editorial-split .editorial-main > p + p { margin-top: 12px; }
.topic-rows { margin-top:22px; border-top: 1px solid var(--line); }
.article-row { display:grid; grid-template-columns:45px minmax(0,1fr) 8px; align-items:center; gap:12px; padding: 15px 5px 15px 0; border-bottom: 1px solid var(--line); text-decoration:none; color:var(--heading); }
.article-number { font-size: 12px; color: var(--accent); font-weight: 900; }
.article-title { font-size: 16px; font-weight: 750; line-height:1.38; }
.article-rowsep { width:7px; height:7px; background:var(--accent-2); border-radius:50%; }
.article-row:hover .article-title { color:var(--accent); }
.highlight-panel { background: var(--soft); border: 1px solid #c5e3e9; border-radius: 18px; padding: 25px 27px; min-height:0; }
.highlight-tag { color:var(--accent); display:block; }
.highlight-figure { display:block; font-size: clamp(39px,5vw,66px); line-height:1.14; letter-spacing:-2px; margin-top:18px; color:var(--heading); }
.highlight-label { color:var(--heading); font-weight:680; line-height:1.45; }
.highlight-rule { height:1px; background:#b5d7e1; margin:18px 0 17px; }
.highlight-panel > p:last-child { color:var(--muted); }
.bottom-editorial { padding: 56px 0; border-bottom: 1px solid var(--line); }
.bottom-editorial h2 { margin:10px 0 18px; }
.bottom-editorial p+p { margin-top: 11px; }
.text-link { display:inline-block; color:var(--accent); font-weight:800; text-decoration:none; border-bottom:2px solid #a9dfe4; margin-top:17px; padding-bottom: 3px; }
.text-link:hover { border-color:var(--accent-2); }
.site-footer { background:#d6eef3; border-top: 1px solid var(--line); margin-top:40px; }
.footer-inner { display:grid; grid-template-columns: 1.2fr 1fr; gap:15px 40px; padding-block: 30px; }
.footer-primary { display:flex; align-items:center; gap:15px; }
.footer-mark { background:var(--accent); border-radius:8px; color:white; width:40px; height:40px; display:grid; place-items:center; font-weight:900; font-size:23px; flex-shrink:0; }
.footer-primary p, .footer-small { color: var(--muted); font-size: 16px; }
.footer-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap: 12px 22px; }
.footer-nav a { font-size:13px; font-weight:750; text-decoration:none; }
.footer-small { grid-column:1/-1; }
/* Artykuły */
.article-head { padding-top:22px; }
.breadcrumbs { display:flex; align-items:center; gap:11px; color:var(--muted); flex-wrap:wrap; margin-bottom: 30px; letter-spacing:.03em; }
.breadcrumbs a { text-decoration:none; color:var(--accent); }
.article-cover { display:grid; grid-template-columns: minmax(0,1.4fr) minmax(270px,.75fr); gap: clamp(24px,4vw,55px); align-items:center; border-bottom: 1px solid var(--line); padding-bottom:40px; }
.article-cover .overline { margin-bottom:16px; }
.dot { color:var(--accent-2); }
.cover-copy { min-width:0; }
.cover-copy h1 { max-width: 760px; overflow-wrap:anywhere; }
.topic-meta { overflow-wrap:anywhere; }
.cover-copy .intro { font-size:16px; line-height:1.67; margin-top:18px; color:var(--muted); max-width:690px; }
.topic-meta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-top:24px; color:var(--muted); letter-spacing:.04em; }
.pill { display:inline-flex; padding:7px 11px; border:1px solid #b8d9e0; background:var(--soft); color:var(--accent); border-radius:100px; }
.cover-illustration { border:1px solid #bcdce4; border-radius:20px; padding:18px 19px 16px; background:#e0f2f6; min-width:0; }
.cover-illustration-top { display:flex; justify-content:space-between; gap:8px; color:#5c8b9b; }
.mini-machine { width:148px; height:160px; border: 4px solid #a5cdd8; border-radius:10px; background:#fff; margin:14px auto 15px; padding:9px 10px 7px; }
.mini-panel { height:20px; border-bottom:2px solid #d3e7eb; display:flex; align-items:flex-start; gap:7px; }
.mini-panel b { width:36px; height:6px; border-radius:2px; background:#9ac9d4; }
.mini-panel i { width:10px; height:10px; border-radius:50%; border:2px solid #9ac9d4; }
.mini-panel i:last-child { width:19px; height:11px; background:#bce9ec; border-radius:3px; }
.mini-door { margin:5px auto 0; width:102px; height:102px; border:11px solid #d8eef1; border-radius:50%; background:#8fced9; display:grid; place-items:center; }
.mini-core { position:relative; background:radial-gradient(circle at 30% 26%,#a5e6e2,#4597b2); width:79px; height:79px; border-radius:50%; border:3px solid #4c9aac; }
.mini-core i { position:absolute; width:14px; height:14px; border:3px solid #bcf5f5; border-radius:50%; }
.mini-core i:nth-child(1) { top:12px;left:18px; }.mini-core i:nth-child(2) { top:42px;left:42px; }.mini-core i:nth-child(3) { top:30px;left:8px; }
.mini-water .mini-core { background:linear-gradient(155deg,#b7efef 0 40%,#45afc4 41%); }.mini-drive .mini-core { background:repeating-conic-gradient(from 10deg,#78bac8 0 18deg,#a7dfe5 20deg 42deg); }.mini-heat .mini-core { background:radial-gradient(circle at 50% 70%,#ffaf92,#80c5d1 72%); }.mini-measure .mini-core { background:radial-gradient(circle at 35% 30%,#b6e3e9,#70b3c7); }
.mini-access { background:#c8e0e7; width:24px; height:5px; border-radius:2px; margin:4px 0 0 auto; }
.cover-stat-row { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; padding-top:11px; border-top:1px solid #b9dae3; }
.cover-stat-row > div { min-width:0; }
.cover-stat-row strong { display:block; color:var(--heading); font-size:16px; line-height:1.25; }
.cover-stat-row span { display:block; color:var(--muted); font-size:12px; line-height:1.35; margin-top:4px; }
.document-illustration { position:relative; width:142px; height:157px; background:#fff; border:3px solid #a8d2dc; margin:15px auto 17px; border-radius:3px; padding: 23px 13px 10px; }
.doc-fold { position:absolute; right:-3px; top:-3px; width:29px; height:29px; background:#c5e6ed; border-left:3px solid #a8d2dc; border-bottom:3px solid #a8d2dc; }
.doc-line { height:6px; width:72%; background:#add4dd; margin-bottom:8px; border-radius:3px; }.doc-line.long { width:98%; }.doc-line.short { width:53%; }
.doc-figure { display:flex; align-items:end; height:40px; gap:6px; margin:12px 0; border-bottom:2px solid #c4dde4; padding-bottom:5px; }.doc-figure i { background:#7bc0c9; flex:1; height:50%; border-radius:3px 3px 0 0; }.doc-figure i:nth-child(2) { height:80%; }.doc-figure i:nth-child(3) { height:65%; }.doc-figure i:nth-child(4) { height:100%; background:var(--accent-2); }
.article-content .split-layout { margin-top:43px; }
.prose > .section-mark { color:var(--accent); display:block; margin-bottom:11px; }
.prose h2 { margin-bottom:18px; }
.prose p+p { margin-top:14px; }
.side-panel { padding:25px 27px; border:1px solid #bfdde4; border-left:5px solid var(--accent); border-radius: 0 15px 15px 0; background:var(--soft); }
.side-panel h3 { margin:13px 0 14px; }
.side-panel p { font-size:16px; color:var(--ink); line-height:1.61; }
.side-panel p+p { margin-top:11px; padding-top:10px; border-top:1px solid #c3e0e7; }
.side-index { color:var(--accent); }
.side-panel-soft { background: #e9f2f9; }
.data-module { margin-top:37px; padding:26px 29px 18px; border:1px solid #bad7df; border-radius:18px; background:#fff; }
.data-head { display:flex; align-items:flex-start; justify-content:space-between; gap:25px; margin-bottom:19px; }
.data-head .section-mark { color:var(--accent); display:block; margin-bottom:7px; }
.data-label { color:var(--muted); white-space:nowrap; padding-top:7px; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; text-align:left; width:100%; font-size:15px; }
tr { border-bottom:1px solid #cfdee5; }
thead tr { border-top:2px solid #aad2db; background: #e6f4f6; }
th,td { padding:13px 16px; vertical-align:top; line-height:1.48; }
th { font-size:13px; color:var(--heading); font-weight:800; }
td:first-child { font-weight:730; color:var(--heading); }
tbody tr:last-child { border-bottom:0; }
tbody tr:nth-child(even) { background: #f5fafc; }
.aside-related { margin-top:19px; border-top:1px solid #c3dae6; padding-top:15px; display:flex; flex-direction:column; gap:10px; }
.aside-related > span { color:var(--muted); margin-bottom:1px; }
.aside-related a { display:block; font-weight:750; line-height:1.35; text-decoration:none; font-size:14px; }
.sources { margin-top:42px; background:var(--soft); padding:21px 27px 24px; border-radius:14px; border:1px solid var(--line); }
.sources h2 { font-size:28px; margin-bottom: 10px; }
.sources ol { margin:0; padding-left:21px; }
.sources li { padding-left:4px; font-size:13px; line-height:1.68; color:var(--muted); margin-top:7px; }
.sources-home { margin-top:0; }
.next-reading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; border-top:1px solid var(--line); padding-top:22px; margin-top:28px; }
.next-reading > span { text-transform:uppercase; color:var(--muted); font-size:12px; font-weight:800; }
.next-reading a { text-decoration:none; font-weight:800; }
.next-reading a span { margin-left:7px; }
.decision-intro { padding:47px 0 0; }
.decision-intro .text-link { margin-top:14px; }
.hero-alternative .washer-drum { background:radial-gradient(circle at 34% 30%,#c8ece3,#81c4ba 55%,#4197a1); }
.hero-alternative .washer-drum::before { background:#70c0b5; }
@media (max-width:1100px) {
    .container { width:calc(100% - 52px); }
    .header-inner { gap:12px; }.desktop-nav { gap:10px; }
    .header-link { padding:9px 11px; }
    .hero-layout { grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:26px; }
    .machine-stage { height:350px; }
    .article-cover { grid-template-columns:minmax(0,1.4fr) minmax(250px,.8fr); gap:28px; }
}
@media (max-width:850px) {
    .desktop-nav, .header-link { display:none; }
    .header-inner { min-height:68px; }
    .mobile-menu { display:block; position:relative; }
    .mobile-menu summary { list-style:none; cursor:pointer; display:flex; gap:10px; align-items:center; padding:9px 14px; border:1px solid var(--line); border-radius:8px; color:var(--heading); font-size:14px; font-weight:750; background:white; }
    .mobile-menu summary::-webkit-details-marker { display:none; }
    .menu-lines { font-size:19px; line-height:1; color:var(--accent); }
    .mobile-menu nav { position:absolute; right:0; top:calc(100% + 8px); z-index:10; width:min(280px,calc(100vw - 35px)); background:white; padding:9px; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 35px rgba(37,100,118,.14); display:grid; }
    .mobile-menu nav a { padding:9px 12px; text-decoration:none; color:var(--heading); font-weight:700; }
    .mobile-menu nav a:hover { background:var(--soft); }
    .hero-layout { grid-template-columns:1fr 0.78fr; }
    .hero-copy h1 { max-width:540px; }
    .machine-stage { height:305px; }
    .washer-body { transform:scale(.82); }
    .split-layout { grid-template-columns:minmax(0,1.5fr) minmax(220px,.85fr); gap:23px; }
    .highlight-panel, .side-panel { padding:21px; }
    .article-cover { grid-template-columns:minmax(0,1.3fr) minmax(220px,.85fr); gap:22px; }
}
@media (max-width:670px) {
    .container { width:calc(100% - 34px); }
    .hero-layout, .article-cover, .split-layout { grid-template-columns:1fr; }
    .hero-layout { padding-block:36px 35px; gap:24px; }
    .overline { margin-bottom:14px; }
    .hero-intro { font-size:16px; margin-top:17px; }.hero-detail { margin-top:11px; }
    .hero-actions { margin-top:19px; }.hero-actions a { flex:1 1 190px; }
    .machine-stage { height:265px; }.washer-body { transform:scale(.73); }.machine-caption.bottom { bottom:10px; }
    .visual-footer { font-size:10px; }
    .quick-diagnosis { grid-template-columns:1fr; margin-top:19px; }
    .quick-diagnosis > div { padding:15px 20px; }
    .quick-diagnosis > div + div { border-left:0; border-top:1px solid var(--line); }
    .editorial-section { padding:35px 0; }
    .editorial-identity { display:block; margin-bottom:17px; }.editorial-identity .edition { display:block; margin-bottom:7px; }
    .editorial-identity .section-lead { margin-top:6px; }
    .highlight-panel { padding:21px; }
    .highlight-figure { font-size:45px; margin-top:10px; }
    .article-head { padding-top:18px; }.breadcrumbs { margin-bottom:18px; }
    .article-cover { padding-bottom:25px; }.cover-illustration { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; }
    .cover-illustration-top { grid-column:1/-1; }.mini-machine,.document-illustration { margin:0 auto; }.cover-stat-row { border:0; border-left:1px solid #b9dae3; padding:0 0 0 12px; grid-template-columns:1fr; gap:16px; }
    .article-content .split-layout { margin-top:28px; }
    .data-module { padding:18px 15px; margin-top:27px; }.data-head { display:block; }.data-label { display:block; margin-top:8px; }.data-head h2 { margin-top:4px; }
    th, td { padding:11px; min-width:110px; }
    .sources { margin-top:30px; padding:19px; }
    .site-footer { margin-top:30px; }.footer-inner { grid-template-columns:1fr; padding-block:25px; }.footer-nav { justify-content:flex-start; }
}
@media (max-width:375px) {
    .container { width:calc(100% - 28px); }
    .wordmark { font-size:18px; }.brand-mark { height:27px; width:27px; }
    .article-row { grid-template-columns:30px minmax(0,1fr) 8px; gap:8px; }
    .cover-illustration { padding:11px; grid-template-columns: 115px minmax(0,1fr); }
    .mini-machine { transform:scale(.72); transform-origin:center; margin:-18px -15px; }.document-illustration { transform:scale(.7); transform-origin:center; margin:-18px -15px; }
    .cover-stat-row strong { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }