/* STYKI 0.4 – trzy warianty wizualne. Wariant wybiera atrybut data-v na <html> (a | b | c).
   Wspólne: ciaśniejszy rytm odstępów (8-punktowa skala), węższa siatka, mniejsza skala nagłówków. */

/* ── Wspólne zagęszczenie ─────────────────────────────── */
html[data-v] .shell{max-width:1180px}
html[data-v] .nav{min-height:64px}
html[data-v] .brand img{width:128px}
html[data-v] .hero{padding-block:48px 56px;gap:40px}
@media (min-width:1001px){html[data-v] .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
html[data-v] .hero h1{font-size:clamp(42px,5vw,74px);margin:16px 0 20px}
html[data-v] .hero .intro{font-size:18px}
html[data-v] .cta{margin-top:28px}
html[data-v] .audience{margin-top:32px;padding-top:16px}
html[data-v] .contact{aspect-ratio:5/4}
html[data-v] .section{padding-block:72px}
html[data-v] .section h2{font-size:clamp(32px,3.4vw,50px);margin-top:12px}
html[data-v] .section-head{margin-bottom:32px;gap:32px}
html[data-v] .lead{font-size:17px}
html[data-v] .band .shell{padding-block:72px}
html[data-v] .band h2{font-size:clamp(36px,4vw,58px)}
html[data-v] .step h3{font-size:30px}
html[data-v] .principle{padding:24px}
html[data-v] .principle h3{font-size:23px}
html[data-v] .project{padding:24px;gap:18px}
html[data-v] .project .mark{height:104px}
html[data-v] .project h3{font-size:24px}
html[data-v] .pagehead{padding-block:48px 28px}
html[data-v] .pagehead h1{font-size:clamp(44px,5.6vw,84px)}
html[data-v] .category{padding-block:36px 20px}
html[data-v] .category h2{font-size:32px}
html[data-v] .tool{min-height:0;padding:22px}
html[data-v] .tool h3{font-size:27px}
html[data-v] .spec-cta{padding:36px}
html[data-v] .finder{margin-top:32px}
html[data-v] .footer{padding-block:28px 36px}

/* ── A · Redakcyjny: siatka czasopisma, linie zamiast kart ─────────── */
html[data-v="a"]{--r:0px}
html[data-v="a"] .topbar{border-bottom-color:var(--fg)}
html[data-v="a"] .btn{border-radius:2px}
html[data-v="a"] .contact{border-radius:0;border-color:var(--fg);background:var(--surface)}
html[data-v="a"] .section{border-top:1px solid var(--fg)}
html[data-v="a"] .section-head{border-bottom:1px solid var(--line);padding-bottom:24px}
html[data-v="a"] .path{border-top:0}
html[data-v="a"] .principles,html[data-v="a"] .projects,html[data-v="a"] .cards,html[data-v="a"] .results{gap:0;border-top:1px solid var(--fg);border-left:1px solid var(--line)}
html[data-v="a"] .principle,html[data-v="a"] .project,html[data-v="a"] .tool,html[data-v="a"] .test{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent}
html[data-v="a"] a.project:hover{transform:none;background:var(--surface)}
html[data-v="a"] .project .mark{border-radius:0}
html[data-v="a"] .principle svg{display:none}
html[data-v="a"] .principle h3::before{content:attr(data-n);display:block;font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
html[data-v="a"] .spec-cta{border-radius:0;background:transparent;border:1px solid var(--fg)}
html[data-v="a"] .notice{border-radius:0;background:transparent;border-block:1px solid var(--fg)}
html[data-v="a"] .finder{border-radius:0;border-color:var(--fg)}
html[data-v="a"] .search,html[data-v="a"] .chip,html[data-v="a"] .select select{border-radius:2px}
html[data-v="a"] .band{background:var(--bg);color:var(--fg);border-top:1px solid var(--fg);border-bottom:1px solid var(--fg)}
html[data-v="a"] .band .eyebrow,html[data-v="a"] .band h2 em{color:var(--accent)}
html[data-v="a"] .band .lead,html[data-v="a"] .tools small,html[data-v="a"] .tools .mono{color:var(--muted)}
html[data-v="a"] .tools{border-top-color:var(--fg)}
html[data-v="a"] .tools li{border-bottom-color:var(--line)}
html[data-v="a"] .band .btn-primary{background:var(--accent);color:var(--accent-fg)}

/* ── B · Instytut: bezszeryfowa typografia, mocne bloki koloru ─────── */
html[data-v="b"]{--r:6px}
html[data-v="b"] h1,html[data-v="b"] h2,html[data-v="b"] h3,
html[data-v="b"] .tools b,html[data-v="b"] .spec-cta .nums b{font-family:var(--f-body);font-weight:700;letter-spacing:-.035em}
html[data-v="b"] h1 em,html[data-v="b"] h2 em{font-style:normal;color:var(--accent)}
html[data-v="b"] .hero h1{font-size:clamp(40px,4.6vw,68px);line-height:1.02}
html[data-v="b"] .step h3,html[data-v="b"] .tool h3{font-size:24px}
html[data-v="b"] .test h3,html[data-v="b"] .principle h3,html[data-v="b"] .project h3{font-size:20px;letter-spacing:-.02em}
html[data-v="b"] .tools b{font-size:20px}
html[data-v="b"] .btn{border-radius:6px}
html[data-v="b"] .topbar{background:var(--band-bg);border-bottom:0}
html[data-v="b"] body::before{background:var(--band-bg)}
html[data-v="b"] .topbar .logo{filter:invert(1) brightness(1.1)}
html[data-v="b"] .links a{color:var(--band-muted)}
html[data-v="b"] .links a:hover,html[data-v="b"] .links a[aria-current="page"]{color:var(--band-fg);background:var(--band-line)}
html[data-v="b"] .nav .btn-ghost{color:var(--band-fg);border-color:var(--band-line)}
html[data-v="b"] .contact{border-radius:6px;background:var(--surface-2);border:0}
html[data-v="b"] .band{background:var(--burgundy)}
html[data-v="b"] .band .eyebrow,html[data-v="b"] .band h2 em{color:var(--gold)}
html[data-v="b"] .band .lead,html[data-v="b"] .tools small,html[data-v="b"] .tools .mono{color:#f1dfe3}
html[data-v="b"] .band .btn-primary{background:#fff;color:var(--burgundy)}
html[data-v="b"] .principle,html[data-v="b"] .project,html[data-v="b"] .tool,html[data-v="b"] .test{border:0;background:var(--surface-2);border-radius:6px}
html[data-v="b"] .project .mark{background:var(--surface)}
html[data-v="b"] .spec-cta{border-radius:6px;background:var(--fg);color:var(--bg)}
html[data-v="b"] .spec-cta p,html[data-v="b"] .spec-cta .nums span{color:color-mix(in srgb,var(--bg) 70%,transparent)}
html[data-v="b"] .spec-cta .eyebrow{color:var(--gold)}
html[data-v="b"] .spec-cta .nums b{color:var(--gold)}
html[data-v="b"] .spec-cta .btn-primary{background:var(--bg);color:var(--fg)}
html[data-v="b"] .notice{border-radius:6px;border-left:4px solid var(--accent)}

html[data-v="b"] .search,html[data-v="b"] .select select{border-radius:6px;background:var(--surface)}
html[data-v="b"] .chip{border-radius:6px}

/* ── C · Produkt: układ bento, spójne białe kafle ─────────────────── */
html[data-v="c"]{--r:18px;--bg:#f2f0ee;--surface:#ffffff;--surface-2:#f6f4f2}
@media (prefers-color-scheme:dark){html[data-v="c"]:not([data-theme="light"]){--bg:#121416;--surface:#1c1f23;--surface-2:#23272c}}
html[data-theme="dark"][data-v="c"]{--bg:#121416;--surface:#1c1f23;--surface-2:#23272c}
html[data-v="c"] .topbar{border-bottom:0}
html[data-v="c"] .hero{gap:12px;padding-block:20px 12px;align-items:stretch}
html[data-v="c"] .hero > div:first-child{background:var(--surface);border-radius:var(--r);padding:44px;display:flex;flex-direction:column;justify-content:center}
html[data-v="c"] .contact{border:0;background:var(--surface);aspect-ratio:auto;min-height:420px}
html[data-v="c"] .section{border-top:0;padding-block:48px}
html[data-v="c"] .section-head{margin-bottom:20px}
html[data-v="c"] .path{border-top:0;gap:12px}
html[data-v="c"] .step,html[data-v="c"] .step + .step{background:var(--surface);border:0;border-radius:var(--r);padding:28px}
html[data-v="c"] a.step:hover{box-shadow:0 0 0 1px var(--line-strong)}
html[data-v="c"] .band{background:transparent;color:var(--band-fg)}
html[data-v="c"] .band-grid{position:relative;isolation:isolate;padding:60px calc(max(20px, env(safe-area-inset-right, 0px)) + 44px) 60px calc(max(20px, env(safe-area-inset-left, 0px)) + 44px)}
html[data-v="c"] .band-grid::before{content:"";position:absolute;z-index:-1;inset:12px max(20px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px));background:var(--band-bg);border-radius:var(--r)}
html[data-v="c"] .principles,html[data-v="c"] .projects,html[data-v="c"] .cards,html[data-v="c"] .results{gap:12px}
html[data-v="c"] .principle,html[data-v="c"] .project,html[data-v="c"] .tool,html[data-v="c"] .test{border:0}
html[data-v="c"] .tool.soon{border:1px dashed var(--line-strong);background:transparent}
html[data-v="c"] a.project:hover{transform:none;box-shadow:0 0 0 1px var(--line-strong)}
html[data-v="c"] .spec-cta{background:var(--surface)}
html[data-v="c"] .finder{border:0}
html[data-v="c"] .notice{background:var(--surface)}
html[data-v="c"] .category{background:var(--surface);border-radius:var(--r);padding:28px;margin-bottom:12px;border-top:0}
html[data-v="c"] .category + .category{border-top:0}
html[data-v="c"] .category .tool{background:var(--surface-2)}
html[data-v="c"] .colors{display:none}
@media (max-width:760px){
  html[data-v="c"] .hero > div:first-child{padding:28px}
  html[data-v="c"] .band-grid{padding:40px 44px}
  html[data-v="c"] .contact{min-height:300px}
  html[data-v="c"] .category{padding:20px}
}

/* ── B · wersja docelowa 0.5: bez beżu, więcej koloru, animacja na tle strony ── */
html[data-v="b"]{--bg:#ffffff;--surface:#ffffff;--surface-2:#f1f3f5;--line:#e2e5e9;--line-strong:#c9ced4;--muted:#555b62;--accent-soft:#f7e9ed}
html[data-v="b"] .contact{background:transparent;border:0;border-radius:0;overflow:visible}
html[data-v="b"] .contact img{width:92%}
html[data-v="b"] .contact .cap{left:0;right:0;bottom:0}
html[data-v="b"] .hero{position:relative}
html[data-v="b"] .hero::after{content:"";position:absolute;z-index:-1;right:-10%;top:-20%;width:60%;height:140%;background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 10%,transparent),transparent 70%)}
html[data-v="b"] main{overflow-x:clip}
/* ścieżka: każdy krok ma swój kolor marki */
html[data-v="b"] .path{border-top:0;gap:12px}
html[data-v="b"] .step,html[data-v="b"] .step + .step{border:0;border-radius:6px;padding:28px}
html[data-v="b"] .step:nth-child(1){background:color-mix(in srgb,var(--green) 16%,var(--bg))}
html[data-v="b"] .step:nth-child(2){background:color-mix(in srgb,var(--burgundy) 11%,var(--bg))}
html[data-v="b"] .step:nth-child(3){background:color-mix(in srgb,var(--violet) 18%,var(--bg))}
html[data-v="b"] .step:nth-child(4){background:color-mix(in srgb,var(--gold) 20%,var(--bg))}
html[data-v="b"] .step .k span:last-child{font:700 44px/1 var(--f-body);letter-spacing:-.04em;opacity:.25}
html[data-v="b"] .step .k{align-items:flex-start}
html[data-v="b"] a.step:hover{outline:2px solid var(--violet)}
/* zasady: kolorowe ikony */
html[data-v="b"] .principle{background:var(--surface);border:1px solid var(--line)}
html[data-v="b"] .principle svg{width:48px;height:48px;padding:10px;border-radius:50%;stroke-width:1.6}
html[data-v="b"] .principle:nth-child(1) svg{background:color-mix(in srgb,var(--green) 22%,transparent);stroke:#3f5a48}
html[data-v="b"] .principle:nth-child(2) svg{background:color-mix(in srgb,var(--burgundy) 14%,transparent);stroke:var(--burgundy)}
html[data-v="b"] .principle:nth-child(3) svg{background:color-mix(in srgb,var(--violet) 24%,transparent);stroke:#4f4370}
/* sekcja projektów na chłodnej szarości, pełnej szerokości */
html[data-v="b"] #projekty{border-top:0;box-shadow:0 0 0 100vmax var(--surface-2);clip-path:inset(0 -100vmax);background:var(--surface-2)}
html[data-v="b"] #projekty .project{background:var(--surface)}
html[data-v="b"] #projekty .project .mark{background:var(--surface-2)}
html[data-v="b"] #projekty .project .mark.paper{background:#fff}
/* LAB: kategorie rozróżnione kolorem */
html[data-v="b"] #ucz .eyebrow{color:#4f6b58}
html[data-v="b"] #skale .eyebrow{color:var(--accent)}
html[data-v="b"] #zadania .eyebrow{color:#5e5185}
html[data-v="b"] #ucz .tool:not(.soon){background:color-mix(in srgb,var(--green) 12%,var(--bg))}
html[data-v="b"] #skale .tool{background:color-mix(in srgb,var(--burgundy) 9%,var(--bg))}
html[data-v="b"] #zadania .tool{background:color-mix(in srgb,var(--violet) 14%,var(--bg))}
html[data-v="b"] .tool.soon{background:transparent;border:1px dashed var(--line-strong)}
html[data-v="b"] .tool .meta{border-top-color:color-mix(in srgb,var(--fg) 12%,transparent)}
@media (prefers-color-scheme:dark){html[data-v="b"]:not([data-theme="light"]){--bg:#15171a;--surface:#1d2024;--surface-2:#24282d;--line:#30353b;--line-strong:#454b52;--muted:#a7abb0;--accent-soft:#3a2229}}
html[data-theme="dark"][data-v="b"]{--bg:#15171a;--surface:#1d2024;--surface-2:#24282d;--line:#30353b;--line-strong:#454b52;--muted:#a7abb0;--accent-soft:#3a2229}
@media (prefers-color-scheme:dark){html[data-v="b"]:not([data-theme="light"]) .principle svg{stroke:var(--fg)!important}}
html[data-theme="dark"][data-v="b"] .principle svg{stroke:var(--fg)!important}
html[data-v="b"] .notice{background:var(--surface-2)}