/* WPF UI — powłoka stron portfolio. Baza wspólna + 6 rodzin (.wpf-fam-*). Kolory z tokenów domeny (--wpf-*). */
:root{--sh-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--sh-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sh-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sh-r:10px;--sh-R:16px;--sh-shadow:0 14px 34px -22px rgba(17,29,52,.38);--sh-bg:#fff;--sh-hero-bg:var(--wpf-soft);--sh-hero-ink:var(--wpf-ink);--sh-hero-muted:var(--wpf-muted);--sh-foot-bg:#0f172a;--sh-foot-ink:#f1f5f9;--sh-foot-muted:#a7b3c6;--sh-hw:750;--sh-hls:-.025em;--sh-card-bg:#fff;--sh-card-border:1px solid var(--wpf-line)}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body.wpf-shell{margin:0;background:var(--sh-bg);color:var(--wpf-ink);font-family:var(--sh-body);font-size:16px;line-height:1.65;overflow-x:hidden}
.wpf-shell a{color:inherit;text-decoration:none}
.wpf-shell img{max-width:100%;height:auto}
.wpf-shell h1,.wpf-shell h2,.wpf-shell h3{font-family:var(--sh-head);font-weight:var(--sh-hw);letter-spacing:var(--sh-hls);line-height:1.15;color:var(--wpf-ink);margin:0 0 .5em}
.wpf-shell p{margin:0 0 1em}
.wpf-shell button,.wpf-shell input,.wpf-shell select,.wpf-shell textarea{font:inherit}
.wpf-shell a:focus-visible,.wpf-shell button:focus-visible,.wpf-shell summary:focus-visible{outline:3px solid var(--wpf-brand);outline-offset:3px}
.sh-wrap{width:min(1200px,calc(100% - 36px));margin-left:auto;margin-right:auto}
.sh-skip{position:absolute;left:12px;top:-80px;z-index:100;padding:10px 14px;background:#fff;border-radius:8px}
.sh-skip:focus{top:10px}
.sh-eyebrow,.wpf-shell .eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wpf-brand)}
/* nagłówek */
.sh-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--wpf-line)}
.sh-header__in{display:flex;align-items:center;gap:28px;min-height:72px;position:relative}
.sh-logo{display:inline-flex;align-items:center;gap:10px;color:var(--wpf-ink);font-family:var(--sh-head);font-size:23px;font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.sh-logo__mark{display:inline-flex;width:30px;height:30px;color:var(--wpf-brand)}
.sh-logo__mark:empty{display:none}
.sh-logo__mark svg{width:100%;height:100%}
.sh-wm__b{color:var(--wpf-brand)}
.sh-wm__sep{display:inline-block;width:.16em}
.sh-nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:15px;font-weight:600}
.sh-nav>a,.sh-menu>li>a{color:var(--wpf-ink);padding:6px 0}
.sh-nav a:hover{color:var(--wpf-brand)}
.sh-menu{gap:22px}
.sh-header__cta .wpf-btn{min-height:42px;padding:10px 18px;font-size:14px}
.sh-mnav{display:none}
/* przyciski */
.sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--sh-r);border:1px solid transparent;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;transition:background-color .15s,transform .15s,border-color .15s}
.sh-btn--primary{background:var(--wpf-brand);color:#fff!important}
.sh-btn--primary:hover{background:var(--wpf-brand-dark)}
.sh-btn--lead{background:var(--wpf-cta);color:var(--wpf-cta-ink)!important}
.sh-btn--lead:hover{background:var(--wpf-cta-hover)}
.sh-btn--block{display:flex;width:100%}
/* hero */
.sh-hero{position:relative;background:var(--sh-hero-bg);color:var(--sh-hero-ink);overflow:hidden}
.sh-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding:72px 0 76px;position:relative}
.sh-hero__grid.is-solo{grid-template-columns:minmax(0,820px)}
.wpf-shell .sh-hero h1{font-size:clamp(34px,4.6vw,58px);color:var(--sh-hero-ink);margin-bottom:20px}
.sh-hero__lead{max-width:600px;font-size:18px;line-height:1.7;color:var(--sh-hero-muted)}
.sh-hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sh-hero__panel,.sh-hero__card,.sh-hero__code,.sh-hero__stats{position:relative;padding:24px;border-radius:var(--sh-R);background:#fff;color:var(--wpf-ink);box-shadow:0 30px 60px -36px rgba(8,22,46,.6)}
.sh-hero__panel-t,.sh-hero__card-t{margin:0 0 12px;font-family:var(--sh-head);font-size:18px;font-weight:750}
.sh-hero__panel ul,.sh-hero__card ul,.sh-hero__code ul{list-style:none;margin:0 0 16px;padding:0}
.sh-hero__panel li a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--wpf-line);font-weight:600}
.sh-hero__panel li a:hover{color:var(--wpf-brand)}
.sh-hero__panel b{color:var(--wpf-brand)}
.sh-hero__card li{position:relative;padding:8px 0 8px 30px;font-weight:600}
.sh-hero__card li:before{content:"✓";position:absolute;left:0;top:7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--wpf-soft);color:var(--wpf-brand);font-size:12px;font-weight:800}
.sh-hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;overflow:hidden;background:var(--wpf-line)}
.sh-hero__stats>div{padding:22px;background:#fff}
.sh-hero__stats b{display:block;font-family:var(--sh-head);font-size:38px;line-height:1;color:var(--wpf-brand-dark)}
.sh-hero__stats span{font-size:14px;color:var(--wpf-muted)}
.sh-hero__upd{grid-column:1/-1}.sh-hero__upd b{font-size:18px;margin-top:4px}
.sh-hero__code{font-family:var(--sh-mono);font-size:14px;background:#0b1020;color:#cfe3ff}
.sh-hero__code p{margin:0 0 10px;color:#7f8fb0}.sh-hero__code p span{color:var(--wpf-cta)}
.sh-hero__code li a{display:block;padding:6px 0;color:#e8f1ff}
.sh-hero__code li a:before{content:"→ ";color:var(--wpf-neon,var(--wpf-brand))}
.sh-hero__code li a:hover{color:var(--wpf-cta)}
/* sekcje strony głównej */
.sh-sec{padding:64px 0 8px}
.sh-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.wpf-shell .sh-sec__head h2{margin:0;font-size:clamp(26px,3vw,38px)}
.sh-more{font-weight:700;color:var(--wpf-brand)!important;white-space:nowrap}
.sh-trust{border-bottom:1px solid var(--wpf-line);background:#fff}
.sh-trust ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:16px 0;font-size:14px;color:var(--wpf-muted)}
.sh-trust li:before{content:"✓ ";color:var(--wpf-brand);font-weight:800}
.sh-trust b{color:var(--wpf-ink)}
.sh-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sh-topic{padding:22px;border:var(--sh-card-border);border-radius:var(--sh-R);background:var(--sh-card-bg)}
.sh-topic__n{display:block;margin-bottom:12px;font-family:var(--sh-mono);font-size:12px;color:var(--wpf-brand)}
.wpf-shell .sh-topic h3{font-size:19px;margin-bottom:8px}
.sh-topic p{margin:0;font-size:14.5px;color:var(--wpf-muted)}
.sh-method{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:start}
.sh-method__lead{font-size:17px;line-height:1.75;color:var(--wpf-ink)}
.sh-method ol{margin:0;padding:0;list-style:none;counter-reset:m}
.sh-method li{position:relative;counter-increment:m;margin:0 0 12px;padding:14px 16px 14px 56px;border:var(--sh-card-border);border-radius:var(--sh-r);background:var(--sh-card-bg)}
.sh-method li:before{content:counter(m);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--wpf-brand);color:#fff;font-weight:800;font-size:14px}
.sh-prose{max-width:760px;font-size:17px;line-height:1.8}
.sh-closing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin:24px 0 64px;padding:40px;border-radius:var(--sh-R);background:var(--wpf-brand-dark);color:#fff}
.wpf-shell .sh-closing h2{color:#fff;font-size:clamp(24px,2.8vw,34px);margin-bottom:8px}
.sh-closing p{margin:0;color:rgba(255,255,255,.78);max-width:560px}
.sh-closing__act{display:flex;flex-direction:column;align-items:center;gap:8px}
.sh-closing__act span{font-size:13px;color:rgba(255,255,255,.7)}
/* karty (indeksy, główna) */
.wpf-shell .wpf-icard{border:var(--sh-card-border);border-radius:var(--sh-R);background:var(--sh-card-bg)}
.wpf-shell .wpf-icard__title{font-family:var(--sh-head)}
/* podstrony */
.sh-main{min-height:50vh}
.wpf-shell .article-header{padding:36px 0 30px;max-width:900px}
.wpf-shell .article-header h1{font-size:clamp(32px,4.2vw,50px);margin-bottom:16px}
.wpf-shell .article-header .excerpt{font-size:18px;line-height:1.65;color:var(--wpf-muted);margin-bottom:18px;max-width:760px}
.wpf-shell.wpf-v2 .article-header{padding-bottom:32px;margin-bottom:32px;box-shadow:0 0 0 100vmax var(--sh-head-band,var(--wpf-soft));clip-path:inset(0 -100vmax);background:var(--sh-head-band,var(--wpf-soft))}
.wpf-shell .sh-plain .article-header,.wpf-shell .sh-index .article-header{box-shadow:none;background:none;clip-path:none;margin-bottom:8px}
.sh-index__intro{max-width:760px;color:var(--wpf-muted)}
.sh-index{padding-bottom:60px}
.article-layout{display:grid;grid-template-columns:minmax(0,760px) 270px;gap:64px;justify-content:space-between;align-items:start;padding-bottom:64px}
.article-layout.is-single{grid-template-columns:minmax(0,760px)}
.article-body{font-size:17px;line-height:1.75;color:#1f2b41;overflow-wrap:anywhere;min-width:0}
.wpf-shell .article-body>p,.wpf-shell .article-body li{max-width:72ch}
.wpf-shell .article-body h2{font-size:clamp(24px,2.6vw,30px);margin:52px 0 18px;scroll-margin-top:100px}
.wpf-shell .article-body h3{font-size:20px;margin:30px 0 10px}
.wpf-shell .article-body strong{color:var(--wpf-ink);font-weight:650}
.wpf-shell .article-body a{color:var(--wpf-brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.wpf-shell .article-body ul{list-style:none;margin:0 0 22px;padding-left:4px}
.wpf-shell .article-body ul>li{position:relative;padding-left:22px}
.wpf-shell .article-body ul>li:before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:2px;background:var(--wpf-brand);opacity:.75}
.wpf-shell .article-body ol{margin:0 0 22px;padding-left:26px}
.wpf-shell .article-body li{margin:7px 0}
.toc-sticky{position:sticky;top:96px}
.wpf-shell .wpf-toc{padding:20px 18px 14px;border:1px solid var(--wpf-line);border-radius:var(--sh-R);background:#fbfcff}
.wpf-shell .wpf-toc-m{margin:0 0 24px}
.sh-related{padding:0 0 60px}
/* stopka */
.sh-footer{margin-top:40px;background:var(--sh-foot-bg);color:var(--sh-foot-ink)}
.sh-footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px;padding:52px 0 36px}
.sh-footer .sh-logo{color:var(--sh-foot-ink)}
.sh-footer__brand p{margin:14px 0 0;max-width:34ch;font-size:14px;color:var(--sh-foot-muted)}
.sh-footer__h{margin:0 0 12px;font-size:13px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-foot-ink)}
.sh-footer__grid a:not(.sh-logo){display:block;margin:0 0 8px;font-size:14px;color:var(--sh-foot-muted)}
.sh-footer__grid a:not(.sh-logo):hover{color:var(--sh-foot-ink)}
.sh-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:18px 0 26px;border-top:1px solid rgba(127,127,127,.25);font-size:13px;color:var(--sh-foot-muted)}

/* ================================================================ RODZINY */

/* 1. FINTECH — czysty, granatowy hero z gradientem, panel z zestawieniami, miękkie cienie */
.wpf-fam-fintech{--sh-head:"Plus Jakarta Sans",var(--sh-body);--sh-r:10px;--sh-R:16px;--sh-hero-bg:radial-gradient(ellipse at 90% 10%,color-mix(in srgb,var(--wpf-brand) 55%,transparent) 0,transparent 55%),linear-gradient(115deg,#07142b 0,var(--wpf-brand-dark) 70%);--sh-hero-ink:#fff;--sh-hero-muted:#c9d5ea;--sh-foot-bg:#0a1730;--sh-hw:780}
.wpf-fam-fintech .sh-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
.wpf-fam-fintech .sh-hero .sh-eyebrow{color:#9cc2ff}
.wpf-fam-fintech .sh-hero .sh-btn--primary{background:#fff;color:var(--wpf-brand-dark)!important}
.wpf-fam-fintech .wpf-icard{box-shadow:var(--sh-shadow)}

/* 2. KORPO — granatowy pasek górny, jednolity ciemny hero ze statystykami, kanciaste krawędzie, ramki */
.wpf-fam-korpo{--sh-head:"Source Sans 3",var(--sh-body);--sh-body:"Source Sans 3",system-ui,sans-serif;--sh-r:4px;--sh-R:6px;--sh-hw:700;--sh-hls:-.01em;--sh-hero-bg:var(--wpf-brand-dark);--sh-hero-ink:#fff;--sh-hero-muted:rgba(255,255,255,.8);--sh-foot-bg:var(--wpf-brand-dark);--sh-card-border:1px solid #d5dbe5}
body.wpf-fam-korpo{font-size:17px}
.sh-topbar{background:var(--wpf-brand-dark);color:rgba(255,255,255,.85);font-size:13px}
.sh-topbar .sh-wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 0}
.sh-topbar__links{display:flex;gap:18px}.sh-topbar a{color:#fff}
.wpf-fam-korpo .sh-header__in{min-height:76px}
.wpf-fam-korpo .sh-nav{margin:0 auto}
.wpf-fam-korpo .sh-menu>li>a{text-transform:uppercase;letter-spacing:.06em;font-size:13.5px}
.wpf-fam-korpo .sh-hero{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
.wpf-fam-korpo .sh-hero .sh-eyebrow{color:var(--wpf-cta)}
.wpf-fam-korpo .sh-hero .sh-btn--primary{background:#fff;color:var(--wpf-brand-dark)!important}
.wpf-fam-korpo .sh-hero__stats{box-shadow:none;border:1px solid rgba(255,255,255,.2)}
.wpf-fam-korpo .wpf-icard{border-left:4px solid var(--wpf-brand)}
.wpf-fam-korpo .wpf-ui .table-scroll th,.wpf-fam-korpo.wpf-ui .table-scroll th{background:var(--wpf-brand-dark);color:#fff;border-bottom:0}
.wpf-fam-korpo.wpf-ui .wpf-compare th:first-child{background:var(--wpf-brand-dark)}
.wpf-fam-korpo.wpf-ui .wpf-rank-card{border-radius:6px;box-shadow:none;border-top:4px solid var(--wpf-brand)}
.wpf-fam-korpo.wpf-ui .wpf-rank-card .wpf-rank-number{border-radius:3px}
.wpf-fam-korpo.wpf-ui .wpf-top3__item{border-radius:6px;box-shadow:none}
.wpf-fam-korpo .sh-closing{border-radius:6px}

/* 3. PRZYJAZNA — duże zaokrąglenia, pastelowe wypełnienia, kształty w hero, menu w „pigułce” */
.wpf-fam-przyjazna{--sh-head:"Nunito",var(--sh-body);--sh-body:"Nunito",system-ui,sans-serif;--sh-r:999px;--sh-R:24px;--sh-hw:800;--sh-hls:-.015em;--sh-hero-bg:color-mix(in srgb,var(--wpf-brand) 9%,#fff);--sh-foot-bg:color-mix(in srgb,var(--wpf-brand) 10%,#fff);--sh-foot-ink:var(--wpf-ink);--sh-foot-muted:var(--wpf-muted);--sh-card-bg:color-mix(in srgb,var(--wpf-brand) 5%,#fff);--sh-card-border:0 solid transparent;--sh-head-band:color-mix(in srgb,var(--wpf-brand) 8%,#fff)}
body.wpf-fam-przyjazna{font-weight:500}
.wpf-fam-przyjazna .sh-header{background:transparent;border:0;padding-top:10px;position:sticky}
.wpf-fam-przyjazna .sh-header__in{min-height:64px;padding:0 10px 0 22px;border-radius:999px;background:#fff;box-shadow:0 10px 30px -18px rgba(17,29,52,.4)}
.wpf-fam-przyjazna .sh-menu>li>a,.wpf-fam-przyjazna .sh-nav>a{padding:8px 14px;border-radius:999px}
.wpf-fam-przyjazna .sh-menu>li>a:hover,.wpf-fam-przyjazna .sh-nav>a:hover{background:var(--wpf-soft)}
.wpf-fam-przyjazna .sh-header__cta .wpf-btn{border-radius:999px}
.wpf-fam-przyjazna .sh-hero{margin-top:-74px;padding-top:74px}
.wpf-fam-przyjazna .sh-hero:before,.wpf-fam-przyjazna .sh-hero:after{content:"";position:absolute;border-radius:50%;background:color-mix(in srgb,var(--wpf-cta) 40%,transparent);filter:blur(2px)}
.wpf-fam-przyjazna .sh-hero:before{width:420px;height:420px;right:-120px;top:-80px;background:color-mix(in srgb,var(--wpf-brand) 18%,transparent)}
.wpf-fam-przyjazna .sh-hero:after{width:180px;height:180px;left:-60px;bottom:-60px}
.wpf-fam-przyjazna .sh-hero__card{border-radius:28px;box-shadow:0 30px 60px -30px rgba(17,29,52,.35)}
.wpf-fam-przyjazna .wpf-icard{box-shadow:none}
.wpf-fam-przyjazna .wpf-icard:hover{box-shadow:0 18px 40px -24px rgba(17,29,52,.4)}
.wpf-fam-przyjazna .wpf-btn,.wpf-fam-przyjazna .sh-btn{border-radius:999px}
.wpf-fam-przyjazna.wpf-ui .wpf-rank-card{border-radius:26px;border:0;background:color-mix(in srgb,var(--wpf-brand) 4%,#fff);box-shadow:none}
.wpf-fam-przyjazna.wpf-ui .wpf-rank-head{background:none}
.wpf-fam-przyjazna.wpf-ui .wpf-rank-card .wpf-rank-number{border-radius:50%}
.wpf-fam-przyjazna.wpf-ui .wpf-top3__item{border-radius:22px;border:0;background:color-mix(in srgb,var(--wpf-brand) 6%,#fff);box-shadow:none}
.wpf-fam-przyjazna.wpf-ui .table-scroll{border-radius:20px}
.wpf-fam-przyjazna.wpf-ui .table-scroll th{background:color-mix(in srgb,var(--wpf-brand) 10%,#fff)}
.wpf-fam-przyjazna .sh-closing{border-radius:32px;background:var(--wpf-brand)}
.wpf-fam-przyjazna .sh-footer{border-radius:40px 40px 0 0}

/* 4. REDAKCJA — magazyn: szeryfowe nagłówki, wycentrowany wordmark, linie zamiast cieni, numeracja */
.wpf-fam-redakcja{--sh-head:"Newsreader",Georgia,"Times New Roman",serif;--sh-r:2px;--sh-R:0px;--sh-hw:600;--sh-hls:-.01em;--sh-hero-bg:#fff;--sh-foot-bg:#fff;--sh-foot-ink:var(--wpf-ink);--sh-foot-muted:var(--wpf-muted);--sh-shadow:none;--sh-card-border:0 solid transparent;--sh-head-band:#fff}
.wpf-fam-redakcja .sh-header{position:relative;border-bottom:3px double var(--wpf-ink)}
.wpf-fam-redakcja .sh-header__in{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". logo cta" "nav nav nav";gap:10px 20px;padding:18px 0 0}
.wpf-fam-redakcja .sh-logo{grid-area:logo;font-family:var(--sh-head);font-size:34px;font-weight:600;letter-spacing:-.01em}
.wpf-fam-redakcja .sh-wm__b{font-style:italic}
.wpf-fam-redakcja .sh-header__cta{grid-area:cta;justify-self:end}
.wpf-fam-redakcja .sh-header__cta .wpf-btn{background:none;color:var(--wpf-ink)!important;border:1px solid var(--wpf-ink);box-shadow:none;border-radius:2px}
.wpf-fam-redakcja .sh-nav{grid-area:nav;justify-content:center;margin:0;padding:10px 0;border-top:1px solid var(--wpf-line);font-size:14px;text-transform:uppercase;letter-spacing:.1em}
.wpf-fam-redakcja .sh-hero__grid{padding:56px 0 40px;border-bottom:1px solid var(--wpf-line)}
.wpf-fam-redakcja .sh-hero h1{font-size:clamp(38px,5.4vw,68px);font-weight:600}
.wpf-fam-redakcja .sh-hero__lead{font-size:20px;font-family:var(--sh-head);color:#3b4458}
.wpf-fam-redakcja .sh-btn{border-radius:2px}
.wpf-fam-redakcja .sh-sec__head{border-bottom:2px solid var(--wpf-ink);padding-bottom:10px}
.wpf-fam-redakcja .wpf-igrid{gap:0 28px}
.wpf-fam-redakcja .wpf-icard{padding:20px 0;border:0;border-bottom:1px solid var(--wpf-line);border-radius:0;box-shadow:none}
.wpf-fam-redakcja .wpf-icard:hover{transform:none;box-shadow:none}
.wpf-fam-redakcja .wpf-icard__title{font-size:21px;font-weight:600}
.wpf-fam-redakcja .sh-topic{border:0;border-top:1px solid var(--wpf-ink);border-radius:0;padding:16px 0}
.wpf-fam-redakcja .sh-topic__n{font-family:var(--sh-head);font-size:28px;color:var(--wpf-brand);font-style:italic}
.wpf-fam-redakcja .sh-closing{border-radius:0;background:none;color:var(--wpf-ink);border-top:3px double var(--wpf-ink);border-bottom:1px solid var(--wpf-ink);padding:32px 0}
.wpf-fam-redakcja .sh-closing h2{color:var(--wpf-ink)}.wpf-fam-redakcja .sh-closing p,.wpf-fam-redakcja .sh-closing__act span{color:var(--wpf-muted)}
.wpf-fam-redakcja.wpf-ui .wpf-rank-card{border-radius:0;box-shadow:none;border:0;border-top:2px solid var(--wpf-ink)}
.wpf-fam-redakcja.wpf-ui .wpf-rank-head{background:none;padding-left:0;padding-right:0}
.wpf-fam-redakcja.wpf-ui .wpf-rank-card .wpf-rank-number{background:none;color:var(--wpf-brand);font-family:var(--sh-head);font-size:44px;font-style:italic;width:auto;height:auto}
.wpf-fam-redakcja.wpf-ui .wpf-rank-facts{border-radius:0}
.wpf-fam-redakcja.wpf-ui .wpf-rank-body,.wpf-fam-redakcja.wpf-ui .wpf-rank-actions,.wpf-fam-redakcja.wpf-ui .wpf-rank-summary{padding-left:0;padding-right:0;background:none}
.wpf-fam-redakcja.wpf-ui .wpf-top3__item{border-radius:0;box-shadow:none;border:0;border-top:2px solid var(--wpf-ink);background:none}
.wpf-fam-redakcja.wpf-ui .table-scroll{border-radius:0;border-left:0;border-right:0;border-color:var(--wpf-ink)}
.wpf-fam-redakcja.wpf-ui .table-scroll th{background:#fff;border-bottom:2px solid var(--wpf-ink);font-family:var(--sh-head);font-size:14px}
.wpf-fam-redakcja .sh-footer{border-top:3px double var(--wpf-ink)}
.wpf-fam-redakcja .sh-footer .sh-logo{font-family:var(--sh-head);font-weight:600}

/* 5. TECH — ciemny pasek i hero z siatką, mono etykiety, ostre krawędzie z cienką ramką */
.wpf-fam-tech{--sh-head:"Space Grotesk",var(--sh-body);--sh-mono:"JetBrains Mono",ui-monospace,monospace;--sh-r:6px;--sh-R:8px;--sh-hw:700;--sh-hls:-.03em;--sh-hero-bg:#090d16;--sh-hero-ink:#f3f6fb;--sh-hero-muted:#a8b3c7;--sh-foot-bg:#090d16;--sh-head-band:#f3f5f9}
.wpf-fam-tech .sh-header{background:#090d16;border-bottom:1px solid #1e2636}
.wpf-fam-tech .sh-logo{color:#f3f6fb;font-family:var(--sh-mono);font-size:19px;font-weight:600;letter-spacing:0}
.wpf-fam-tech .sh-wm__sep:before{content:"_";color:var(--wpf-neon,var(--wpf-brand))}
.wpf-fam-tech .sh-menu>li>a,.wpf-fam-tech .sh-nav>a{color:#cdd6e5;font-family:var(--sh-mono);font-size:13.5px;font-weight:500}
.wpf-fam-tech .sh-menu>li>a:before{content:"./";color:var(--wpf-neon,var(--wpf-brand))}
.wpf-fam-tech .wpf-dd__btn{color:#cdd6e5}
.wpf-fam-tech .sh-header__cta .wpf-btn{background:transparent;color:var(--wpf-neon,var(--wpf-brand))!important;border:1px solid var(--wpf-neon,var(--wpf-brand));box-shadow:none}
.wpf-fam-tech .sh-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.wpf-fam-tech .sh-hero .sh-eyebrow{font-family:var(--sh-mono);color:var(--wpf-neon,var(--wpf-brand));letter-spacing:0;text-transform:none}
.wpf-fam-tech .sh-hero .sh-eyebrow:before{content:"// "}
.wpf-fam-tech .sh-hero__code{border:1px solid #243049;background:#0d1322}
.wpf-fam-tech .sh-eyebrow,.wpf-fam-tech .eyebrow,.wpf-fam-tech .wpf-icard__kind,.wpf-fam-tech .wpf-icard__meta{font-family:var(--sh-mono);letter-spacing:0}
.wpf-fam-tech .wpf-icard{border-radius:8px;border:1px solid #d6dbe5}
.wpf-fam-tech .wpf-icard:hover{border-color:var(--wpf-brand);box-shadow:4px 4px 0 var(--wpf-brand)}
.wpf-fam-tech .sh-method li:before{border-radius:4px;font-family:var(--sh-mono)}
.wpf-fam-tech .sh-closing{background:#090d16;border:1px solid #243049}
.wpf-fam-tech.wpf-ui .wpf-rank-card{border-radius:8px;box-shadow:none}
.wpf-fam-tech.wpf-ui .wpf-rank-card .wpf-rank-number{font-family:var(--sh-mono);border-radius:4px;background:#090d16}
.wpf-fam-tech.wpf-ui .wpf-rank-facts dt,.wpf-fam-tech.wpf-ui .table-scroll th{font-family:var(--sh-mono);text-transform:uppercase;font-size:11.5px;letter-spacing:.04em}
.wpf-fam-tech.wpf-ui .wpf-top3__item{border-radius:8px;box-shadow:none}
.wpf-fam-tech.wpf-ui .wpf-top3__num{font-family:var(--sh-mono);border-radius:4px}

/* 6. MINIMAL — monochrom + jeden akcent, bez cieni, cienkie linie, dużo bieli */
.wpf-fam-minimal{--sh-head:"DM Sans",var(--sh-body);--sh-body:"DM Sans",system-ui,sans-serif;--sh-r:0px;--sh-R:0px;--sh-hw:700;--sh-hls:-.045em;--sh-hero-bg:#fff;--sh-foot-bg:#fff;--sh-foot-ink:#111;--sh-foot-muted:#666;--sh-shadow:none;--sh-card-border:1px solid #111;--sh-head-band:#fff}
body.wpf-fam-minimal{color:#111}
.wpf-fam-minimal .sh-header{border-bottom:1px solid #111}
.wpf-fam-minimal .sh-logo{font-size:21px;letter-spacing:-.04em}
.wpf-fam-minimal .sh-logo__mark{width:14px;height:14px;color:var(--wpf-brand)}
.wpf-fam-minimal .sh-wm__b{color:#111}.wpf-fam-minimal .sh-wm__sep:before{content:"/";margin:0 2px;color:var(--wpf-brand)}
.wpf-fam-minimal .sh-header__cta .wpf-btn{background:none;color:#111!important;box-shadow:none;border:0;border-bottom:2px solid var(--wpf-brand);border-radius:0;padding:6px 0;min-height:0}
.wpf-fam-minimal .sh-hero__grid{padding:96px 0 64px}
.wpf-fam-minimal .sh-hero h1{font-size:clamp(40px,6.4vw,86px);letter-spacing:-.055em;line-height:1}
.wpf-fam-minimal .sh-hero .sh-eyebrow{color:#111}
.wpf-fam-minimal .sh-btn{border-radius:0}
.wpf-fam-minimal .sh-btn--primary{background:#111}
.wpf-fam-minimal .sh-sec__head{border-top:1px solid #111;padding-top:18px}
.wpf-fam-minimal .wpf-igrid{gap:0;grid-template-columns:1fr}
.wpf-fam-minimal .wpf-icard{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.3fr) 130px;align-items:baseline;gap:20px;padding:18px 0;border:0;border-bottom:1px solid #d9d9d9;border-radius:0;box-shadow:none}
.wpf-fam-minimal .wpf-icard:hover{transform:none;box-shadow:none;background:#fafafa}
.wpf-fam-minimal .wpf-icard__kind{color:var(--wpf-brand)}
.wpf-fam-minimal .wpf-icard__logow,.wpf-fam-minimal .wpf-icard .wpf-stars{display:none}
.wpf-fam-minimal .wpf-icard__meta{margin:0;padding:0;text-align:right}
.wpf-fam-minimal .sh-topics{gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid #111}
.wpf-fam-minimal .sh-topic{border:0;border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:22px}
.wpf-fam-minimal .sh-closing{background:none;color:#111;border:1px solid #111;border-radius:0}
.wpf-fam-minimal .sh-closing h2{color:#111}.wpf-fam-minimal .sh-closing p,.wpf-fam-minimal .sh-closing__act span{color:#555}
.wpf-fam-minimal .sh-footer__grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr));border-top:1px solid #111}
.wpf-fam-minimal.wpf-ui .wpf-rank-card{border-radius:0;box-shadow:none;border:1px solid #111}
.wpf-fam-minimal.wpf-ui .wpf-rank-head{background:none}
.wpf-fam-minimal.wpf-ui .wpf-rank-card .wpf-rank-number{border-radius:0;background:#111}
.wpf-fam-minimal.wpf-ui .wpf-top3__item{border-radius:0;box-shadow:none;border:1px solid #111;background:#fff}
.wpf-fam-minimal.wpf-ui .table-scroll{border-radius:0;border-color:#111}
.wpf-fam-minimal.wpf-ui .table-scroll th{background:#fff;border-bottom:1px solid #111}
.wpf-fam-minimal .wpf-btn,.wpf-fam-minimal.wpf-ui .wpf-rh3,.wpf-fam-minimal.wpf-ui .wpf-cta-box,.wpf-fam-minimal.wpf-ui .wpf-side-cta{border-radius:0}

/* ================================================================ telefon */
@media(max-width:1000px){.sh-hero__grid{grid-template-columns:1fr;gap:32px;padding:48px 0 52px}.article-layout{grid-template-columns:minmax(0,1fr) 230px;gap:32px}.sh-footer__grid{grid-template-columns:1fr 1fr 1fr}.sh-footer__brand{grid-column:1/-1}.sh-method{grid-template-columns:1fr}.wpf-fam-minimal .wpf-icard{grid-template-columns:1fr;gap:4px}.wpf-fam-minimal .wpf-icard__meta{text-align:left}}
@media(max-width:820px){
.sh-nav,.sh-header__cta,.sh-topbar{display:none}
.sh-mnav{display:block;margin-left:auto}
.sh-header__in{min-height:62px;gap:12px}
.sh-logo{font-size:20px}
.wpf-fam-redakcja .sh-header__in{display:flex;padding:10px 0}
.wpf-fam-redakcja .sh-logo{font-size:26px}
.wpf-fam-przyjazna .sh-header{padding:8px 10px 0}
.wpf-fam-przyjazna .sh-header__in{padding:0 8px 0 16px}
.wpf-fam-tech .sh-mnav summary{color:#cdd6e5}
}
@media(max-width:760px){
.wpf-shell .sh-hero h1{font-size:32px}
.wpf-fam-minimal .sh-hero h1{font-size:40px}
.sh-hero__lead{font-size:16px}
.sh-hero__grid{padding:36px 0 40px}
.sh-sec{padding-top:44px}
.sh-sec__head{flex-direction:column;align-items:flex-start;gap:8px}
.sh-topics{grid-template-columns:1fr}
.wpf-fam-minimal .sh-topics{grid-template-columns:1fr}
.sh-closing{padding:26px 20px;margin-bottom:40px}
.sh-closing__act,.sh-closing__act .sh-btn{width:100%}
.article-layout{display:block}
.toc-col{display:none}
.article-body{font-size:16.5px}
.wpf-shell .article-header{padding:16px 0 18px}
.wpf-shell .article-header h1{font-size:28px}
.wpf-shell .article-header .excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
.wpf-shell.wpf-kind-ranking .article-header .eyebrow,.wpf-shell.wpf-kind-opinia .article-header .eyebrow{display:none}
.wpf-shell.wpf-kind-ranking .article-header h1{font-size:25px}
.wpf-shell.wpf-kind-ranking .article-header .excerpt{-webkit-line-clamp:2;font-size:14.5px}
.wpf-shell.wpf-kind-ranking .wpf-meta>span:nth-child(n+2),.wpf-shell.wpf-kind-ranking .wpf-method{display:none}
.wpf-shell .wpf-crumbs ol{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;font-size:12px;margin-bottom:8px}
.wpf-shell .wpf-crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}
.sh-footer__grid{grid-template-columns:1fr 1fr;gap:22px}
.wpf-fam-minimal .sh-footer__grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wpf-shell *{transition:none!important}}

.wpf-fam-tech .sh-hero .sh-btn--primary{background:var(--wpf-neon,var(--wpf-brand));color:#05080f!important}
.wpf-fam-tech .sh-closing h2{color:#fff}

/* fokus widoczny na ciemnych i nasyconych tłach (hero, sekcja zamykająca, nagłówek tech) */
.sh-hero a:focus-visible,.sh-hero button:focus-visible,.sh-closing a:focus-visible,.sh-closing button:focus-visible,.wpf-fam-tech .sh-header a:focus-visible,.wpf-fam-tech .sh-header summary:focus-visible,.sh-footer a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(0,0,0,.55)}
.wpf-fam-redakcja .sh-hero a:focus-visible,.wpf-fam-minimal .sh-hero a:focus-visible,.wpf-fam-przyjazna .sh-hero a:focus-visible,.wpf-fam-redakcja .sh-closing a:focus-visible,.wpf-fam-minimal .sh-closing a:focus-visible,.wpf-fam-redakcja .sh-footer a:focus-visible,.wpf-fam-minimal .sh-footer a:focus-visible,.wpf-fam-przyjazna .sh-footer a:focus-visible{outline-color:var(--wpf-ink);box-shadow:none}
/* kontrast wordmarku na ciemnych tłach (nagłówek tech, ciemne stopki) */
.sh-footer .sh-wm__b,.wpf-fam-tech .sh-header .sh-wm__b{color:var(--wpf-neon,currentColor)}
.wpf-fam-przyjazna .sh-footer .sh-wm__b,.wpf-fam-redakcja .sh-footer .sh-wm__b,.wpf-fam-minimal .sh-footer .sh-wm__b{color:var(--wpf-brand)}
.wpf-fam-minimal .sh-footer .sh-wm__b{color:#111}