/* Jantar - design system. Ciemno, ostro, hairline'y, zero zaokrągleń i cieni. Kolor tylko w bursztynie. */

@font-face { font-family: 'Geist'; src: url('fonts/geist-latin.woff2') format('woff2'); font-weight: 300 800; font-display: swap; 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: 'Geist'; src: url('fonts/geist-latin-ext.woff2') format('woff2'); font-weight: 300 800; font-display: swap; 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; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; 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: 'Schibsted Grotesk'; src: url('fonts/schibsted-latin-ext.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; 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; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-italic-latin.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-italic-latin-ext.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+FEFF; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-latin-ext.woff2') format('woff2'); font-weight: 400 600; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20C0, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2'); font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --bg: #08080a;
  --bg-2: #0d0d10;
  --panel: #111114;
  --panel-2: #17171b;
  --line: #212127;
  --line-2: #33333b;
  --text: #f5f3ef;
  --muted: #a3a1aa;
  --dim: #85848d;
  --field-line: #6c6b74;
  --a1: #ffb23f;
  --a2: #ff7a2e;
  --a3: #ffd48a;
  --a4: #ff5f45;
  --aurora: linear-gradient(100deg, #ffd48a 0%, #ffb23f 45%, #ff7a2e 100%);
  --display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --wrap: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--a2); }
::selection { background: rgba(255, 178, 63, .3); }
:focus-visible { outline: 1px solid var(--a2); outline-offset: 2px; }

.wrap { width: min(var(--wrap), 100% - 64px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 48px); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.ok { color: var(--a1); }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.045em; line-height: 1; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 5.6vw, 80px); }
h2 { font-size: clamp(28px, 3.2vw, 44px); }
h3 { font-size: 21px; letter-spacing: -0.025em; line-height: 1.15; }
h1 em, h2 em, .display em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--a1); padding-right: .06em; }
p { margin: 0 0 1em; }

.kicker { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a1); margin: 0 0 18px; }
.kicker-sm { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: #d6d3cc; max-width: 58ch; letter-spacing: -0.01em; }

/* ---------- przyciski ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; font: 500 14.5px/1 var(--sans); letter-spacing: -0.01em; text-decoration: none; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.btn:hover { border-color: var(--text); }
.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-ghost { background: rgba(8, 8, 10, .4); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: wait; }
.link-arrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.link-arrow:hover { color: var(--a2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

/* ---------- nagłówek ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(8, 8, 10, .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font: 600 20px/1 var(--display); letter-spacing: -0.035em; }
.logo .mark { width: 28px; height: 28px; }
.nav { display: flex; gap: 2px; margin-right: auto; }
.nav a, .nav button { padding: 8px 13px; font: 450 15px/1 var(--sans); color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.head-actions { display: flex; align-items: center; gap: 10px; }
.head-actions .btn { height: 38px; padding: 0 16px; font-size: 14px; }
.lang { font: 500 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); text-decoration: none; padding: 11px 10px; border: 1px solid var(--line); }
.lang:hover { color: var(--text); border-color: var(--line-2); }
.burger { display: none; width: 38px; height: 36px; border: 1px solid var(--line-2); background: none; padding: 0 9px; cursor: pointer; }
.burger span { display: block; height: 1px; background: var(--text); margin: 6px 0; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.aurora { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 1; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 8, 10, .7), rgba(8, 8, 10, .15) 55%, transparent), linear-gradient(180deg, rgba(8, 8, 10, .1), rgba(8, 8, 10, .05) 55%, var(--bg) 100%); pointer-events: none; }
.hero-inner { padding: 120px 0 64px; }
.display { font-size: clamp(56px, 8.4vw, 150px); line-height: .92; letter-spacing: -0.06em; font-weight: 600; margin-bottom: 30px; }
.display-sm { font-size: clamp(42px, 6vw, 96px); line-height: .95; letter-spacing: -0.055em; font-weight: 600; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; padding: 0; margin: 30px 0 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proof li::before { content: '✓'; color: var(--a1); margin-right: 8px; }
.ticker { border-top: 1px solid var(--line); overflow: hidden; white-space: nowrap; background: rgba(8, 8, 10, .55); }
.ticker-track { display: inline-flex; gap: 0; animation: tick 90s linear infinite; padding: 14px 0; }
.ticker span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 0 22px; border-right: 1px solid var(--line); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- sekcje ---------- */
.section { padding: 96px 0; border-bottom: 1px solid var(--line); }
.section.tight { padding: 48px 0; }
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 36px; }
.section-head h2 { margin: 0; margin-right: auto; }
.section-head .kicker { width: 100%; margin-bottom: 10px; }
.page-head { position: relative; padding: 72px 0 56px; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.page-head.with-aurora::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 8, 10, .75), rgba(8, 8, 10, .2) 60%, transparent), linear-gradient(180deg, transparent 40%, var(--bg)); pointer-events: none; }
.page-head .aurora { opacity: .8; }
.two-col { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.split > * + * { border-left: 1px solid var(--line); }
.panel { border: 1px solid var(--line); background: var(--panel); padding: 28px; }
.split .panel { border: 0; }
.product { display: flex; flex-direction: column; gap: 6px; padding: 40px; }
.product .btn { align-self: flex-start; margin-top: 18px; }
.product p { color: var(--muted); }

/* ---------- karty ---------- */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards { grid-template-columns: repeat(4, 1fr); }
.posts { grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(3, 1fr); }
.card { display: flex; flex-direction: column; background: var(--bg); text-decoration: none; transition: background .25s; min-width: 0; }
.card:hover { background: var(--panel); }
.card .cover { width: 100%; height: 132px; border-bottom: 1px solid var(--line); transition: filter .3s, transform .6s; filter: saturate(.85) brightness(.9); object-fit: cover; }
.card { overflow: hidden; }
.card:hover img.cover { transform: scale(1.04); }
.card:hover .cover { filter: saturate(1.2) brightness(1.1); }
.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-body h3 { font-size: 20px; margin: 4px 0 2px; }
.card-meta { display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.card-price { font-size: 12.5px; color: var(--text); margin-top: auto; padding-top: 10px; }
.tag { display: inline-block; padding: 3px 7px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; }
.tag-video { color: var(--a2); }
.tag-image { color: var(--a1); }
.tag-audio { color: var(--a4); }
.tag-chat { color: var(--a3); }
.tag-tool { color: #d6c7b0; }
.pill { display: inline-block; padding: 1px 6px; margin: 2px 0; font-size: 11px; border: 1px solid var(--line-2); color: var(--muted); }

.post-cover { height: 120px; border-bottom: 1px solid var(--line); position: relative; background: radial-gradient(90% 140% at 20% 110%, hsl(var(--h) 90% 55% / .55), transparent 60%), radial-gradient(70% 120% at 90% -10%, hsl(calc(var(--h) + 70) 90% 60% / .35), transparent 60%), var(--bg-2); }
.post-cover span { position: absolute; left: 18px; bottom: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: .75; }
.post-card p { font-size: 14px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.cats-section { padding: 0; }
.cat-tile { display: flex; flex-direction: column; gap: 10px; padding: 30px 26px; text-decoration: none; border-right: 1px solid var(--line); transition: background .25s; }
.cat-tile:last-child { border-right: 0; }
.cat-tile:hover { background: var(--panel); }
.cat-tile strong { font: 600 26px/1.1 var(--display); letter-spacing: -.035em; }
.cat-tile .tag { align-self: flex-start; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.steps li { padding: 34px 30px; border-right: 1px solid var(--line); }
.steps li:last-child { border-right: 0; }
.steps p { color: var(--muted); margin: 0; }
.step-n { display: block; font-size: 12px; color: var(--a2); letter-spacing: .12em; margin-bottom: 26px; }
.feature { background: var(--bg); padding: 30px; }
.checks { list-style: none; padding: 0; margin: 20px 0 0; }
.checks li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.checks li::before { content: '→'; font-family: var(--mono); color: var(--a2); margin-right: 12px; }

/* mock studio na stronie głównej */
.mock-studio { border: 1px solid var(--line); background: var(--bg); margin: 18px 0 4px; }
.mock-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--muted); letter-spacing: .06em; }
.mock-prompt { padding: 16px 14px; font-size: 14.5px; color: #d8d5cf; border-bottom: 1px solid var(--line); }
.mock-out { position: relative; }
.mock-out .cover { height: 150px; width: 100%; }
.mock-studio.big .mock-out .cover { height: 250px; }
.mock-out span { position: absolute; right: 12px; bottom: 10px; font-size: 11px; background: rgba(8, 8, 10, .8); padding: 4px 8px; border: 1px solid var(--line-2); }
.mini-code { margin: 18px 0 4px; }

/* ---------- kod ---------- */
pre, .mini-code { font: 400 13px/1.65 var(--mono); background: #0a0a0d; border: 1px solid var(--line); padding: 18px 20px; overflow-x: auto; margin: 0; color: #e8e6e1; tab-size: 2; }
code { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { padding: 1px 5px; background: var(--panel-2); border: 1px solid var(--line); font-size: .86em; color: #efece6; }
.c-k { color: var(--a4); } .c-s { color: var(--a2); } .c-v { color: var(--a1); } .c-c { color: var(--dim); }
.code { margin: 1.4em 0; border: 1px solid var(--line); }
.code pre { border: 0; }
.code-bar, .tab-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--panel); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding-left: 14px; }
.copy { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-left: 1px solid var(--line); padding: 11px 14px; cursor: pointer; }
.copy:hover { color: var(--text); }
.copy.done { color: var(--a1); }
.tabs { border: 1px solid var(--line); background: #0a0a0d; min-width: 0; }
.tabs pre { border: 0; max-height: 460px; }
.tab-bar { padding-left: 0; justify-content: flex-start; overflow-x: auto; }
.tab-bar [role=tab] { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--dim); background: none; border: 0; border-right: 1px solid var(--line); padding: 12px 16px; cursor: pointer; white-space: nowrap; }
.tab-bar [role=tab][aria-selected=true] { color: var(--text); background: linear-gradient(var(--a2), var(--a2)) left bottom / 100% 1px no-repeat, #0a0a0d; }
.tab-bar .copy { margin-left: auto; }
.tab-list { display: flex; flex: 0 0 auto; }

/* ---------- tabele ---------- */
.table { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); background: var(--panel); }
tr:last-child td { border-bottom: 0; }
td a { text-decoration: none; }
td a:hover { color: var(--a2); }
.price-table td.mono { white-space: nowrap; font-size: 13px; }
.variant { display: inline-block; margin-left: 14px; }
.variant .muted { font-size: 11px; margin-right: 4px; }

/* ---------- filtry katalogu ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.chip { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--line-2); padding: 10px 14px; cursor: pointer; text-decoration: none; }
.chip span { color: var(--dim); margin-left: 6px; }
.chip:hover, .chip[aria-pressed=true] { color: var(--bg); background: var(--text); border-color: var(--text); }
.chip[aria-pressed=true] span { color: var(--line-2); }
.filter-inputs { display: flex; gap: 8px; }
input, select, textarea { font: 400 14.5px/1.4 var(--sans); color: var(--text); background: var(--bg-2); border: 1px solid var(--field-line); padding: 10px 12px; border-radius: 0; width: 100%; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--a2); }
.filter-inputs select, .filter-inputs input { width: 220px; }
label { display: grid; gap: 6px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
label.check { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
label.check input { width: auto; margin-top: 2px; }

/* ---------- okruszki ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 26px; }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--text); }

/* ---------- strona modelu ---------- */
.model-hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.model-cover { position: absolute; inset: 0; z-index: -1; opacity: .8; }
.model-cover .cover { width: 100%; height: 100%; }
.model-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--bg) 25%, rgba(8, 8, 10, .55) 70%, rgba(8, 8, 10, .3)), linear-gradient(0deg, var(--bg), transparent 45%); }
.model-hero-inner { padding: 56px 0 60px; }
.model-title { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: end; }
.model-title h1 { margin-bottom: 14px; }
.price-box { border: 1px solid var(--line-2); background: rgba(17, 17, 20, .88); backdrop-filter: blur(8px); padding: 22px; display: grid; gap: 12px; }
.price-main { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; }
.price-main strong { font: 600 32px/1 var(--display); letter-spacing: -.04em; grid-column: 1; }
.price-main .mono.muted:first-child { grid-column: 1 / -1; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.price-main .mono.muted:last-child { font-size: 12px; }
.price-box .small { margin: 4px 0 0; }
.model-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.side { display: grid; gap: 16px; position: sticky; top: 88px; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; font-size: 14px; }
.specs dt { color: var(--dim); font: 500 11px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.specs dd { margin: 0; }
.copy-line { display: flex; border: 1px solid var(--line); }
.copy-line code { flex: 1; border: 0; background: none; padding: 10px 12px; }
.req { color: var(--a4); }

/* ---------- prose ---------- */
.prose { font-size: 16.5px; line-height: 1.75; min-width: 0; }
.prose h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 1.9em 0 .6em; }
.prose h3 { font-size: 20px; margin: 1.6em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: #d8d5cf; }
.prose a:not(.btn) { color: var(--text); text-decoration-color: var(--a2); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.2em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--a2); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--a3); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.prose .table { margin: 1.4em 0; }
.prose img { border: 1px solid var(--line); }
.price-inline { font-family: var(--mono); font-size: .88em; color: var(--a1); white-space: nowrap; }
.faq-prose h2 { margin-top: 2.2em; padding-top: 1em; border-top: 1px solid var(--line); }
.faq-prose h3 { font-size: 18.5px; }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font: 500 19px/1.35 var(--display); letter-spacing: -.025em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 22px/1 var(--mono); color: var(--a2); }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--muted); padding-bottom: 18px; margin: 0; }
.narrow .link-arrow { display: inline-block; margin-top: 22px; }

/* ---------- dokumentacja ---------- */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 48px; padding: 48px 0 96px; }
.docs-nav, .docs-toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; display: flex; flex-direction: column; }
.docs-nav .docs-h, .docs-toc .docs-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 22px 0 10px; }
.docs-nav .docs-h:first-child, .docs-toc .docs-h:first-child { margin-top: 0; }
.docs-nav a, .docs-toc a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); }
.docs-nav a:hover, .docs-toc a:hover { color: var(--text); }
.docs-nav a[aria-current] { color: var(--text); border-left-color: var(--a2); }
.docs-toc a { font-size: 13px; }
.docs-body h1 { font-size: clamp(34px, 3.6vw, 52px); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.pager a { display: grid; gap: 6px; padding: 18px 20px; background: var(--bg); text-decoration: none; font-weight: 600; }
.pager a:hover { background: var(--panel); }
.pager .next { text-align: right; }
.pager span.mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; }

/* ---------- blog ---------- */
.post-head { position: relative; padding: 72px 0 48px; border-bottom: 1px solid var(--line); margin-bottom: 48px; background: radial-gradient(70% 120% at 10% 120%, hsl(var(--h) 90% 55% / .28), transparent 60%), radial-gradient(60% 100% at 95% -20%, hsl(calc(var(--h) + 70) 90% 60% / .2), transparent 60%); }
.post-head h1 { font-size: clamp(34px, 4.6vw, 60px); }
.post-cta { margin: 56px 0 72px; }
.post-cta h3 { margin-bottom: 8px; }

/* ---------- cennik ---------- */
.packs { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 18px 0 14px; }
.packs > .pack { flex: 1 1 170px; }
.pack { background: var(--bg); padding: 24px 22px; display: grid; gap: 8px; }
.pack strong { font: 600 36px/1 var(--display); letter-spacing: -.045em; }
.pack .mono:not(.muted) { font-size: 12px; color: var(--a1); letter-spacing: .06em; }
.pack .mono.muted { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.pack-hot { background: linear-gradient(var(--a2), var(--a2)) left top / 100% 2px no-repeat, var(--panel); }
.price-section { margin-top: 56px; }
.calc { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: center; }
.calc-form { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 12px; align-items: end; }
.calc-form label:first-child { grid-column: 1 / 3; }
.calc-out { font: 600 34px/1 var(--display); letter-spacing: -.03em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 6px; text-align: right; }
.example { margin-top: 32px; font-size: 18px; }

/* ---------- finał ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; padding: 140px 0; border-bottom: 1px solid var(--line); text-align: center; }
.final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 50% 50%, transparent, var(--bg) 85%); }
.final-inner { display: grid; justify-items: center; }
.final .lead { margin-inline: auto; }

/* ---------- stopka ---------- */
.site-foot { padding: 64px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.foot-grid .foot-title { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.foot-grid a:not(.logo) { display: block; font-size: 14px; color: var(--muted); text-decoration: none; padding: 4px 0; }
.foot-grid a:not(.logo):hover { color: var(--text); }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 34ch; margin-top: 16px; }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.foot-bottom a { color: var(--muted); }

/* ---------- auth ---------- */
.auth { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; isolation: isolate; overflow: hidden; }
.auth .aurora { opacity: .7; }
.auth-card { width: min(440px, 100%); background: rgba(17, 17, 20, .9); backdrop-filter: blur(10px); padding: 40px; }
.auth-card h1 { font-size: 36px; margin: 30px 0 8px; }
.auth-card form { display: grid; gap: 16px; margin: 24px 0 18px; }
.form-error { color: var(--a4); font-size: 13.5px; margin: 0; }

/* ---------- aplikacja: panel i Studio ---------- */
.app-page .site-foot { display: none; }
.app-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 65px); }
.app-side { border-right: 1px solid var(--line); padding: 28px 0; display: flex; flex-direction: column; position: sticky; top: 65px; height: calc(100vh - 65px); }
.app-link { display: block; padding: 11px 26px; font: 500 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; border-left: 2px solid transparent; }
.app-link:hover { color: var(--text); }
.app-link.active { color: var(--text); border-left-color: var(--a2); background: var(--panel); }
.app-side .app-bottom { margin-top: auto; }
.app-main { padding: 40px 48px 80px; min-width: 0; }
.app-main h2 { font-size: 34px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0 0 32px; }
.stat { background: var(--bg); padding: 22px; }
.stat .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.stat strong { display: block; font: 600 32px/1.1 var(--display); letter-spacing: -.03em; margin-top: 10px; }
.row-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 16px 0 26px; }
.row-form label { flex: 1 1 180px; }
.row-form .btn { height: 42px; }
.notice { border: 1px solid var(--line-2); border-left: 2px solid var(--a1); padding: 14px 18px; margin: 0 0 22px; background: var(--panel); font-size: 14px; }
.notice.warn { border-left-color: var(--a4); }
.key-reveal { font-family: var(--mono); word-break: break-all; color: var(--a1); }

.studio-page main { min-height: calc(100vh - 65px); }
.studio { display: flex; flex-direction: column; }
.studio-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 0 24px; position: sticky; top: 65px; background: rgba(8, 8, 10, .92); z-index: 5; }
.studio-tabs { display: flex; overflow-x: auto; }
.studio-tabs button { font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 0; padding: 18px 18px; cursor: pointer; }
.studio-tabs button[aria-pressed=true] { color: var(--text); background: linear-gradient(var(--a2), var(--a2)) left bottom / 100% 1px no-repeat; }
.studio-balance { font-size: 13px; white-space: nowrap; }
.studio-balance a { color: var(--a2); margin-left: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.studio-body { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0; flex: 1; }
.studio-form { border: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; padding: 24px; position: sticky; top: 118px; align-self: start; max-height: calc(100vh - 118px); overflow-y: auto; background: var(--bg); }
.studio-form textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.studio-form [data-fields] { display: flex; flex-direction: column; gap: 18px; }
.studio-form [data-fields] details summary { padding: 2px 0; }
.seg button { font: 500 12px/1 var(--mono); padding: 9px 10px; background: none; color: var(--muted); border: 1px solid var(--line-2); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--text); color: var(--bg); border-color: var(--text); }
.studio-cost { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.studio-cost strong { font: 600 26px/1 var(--display); letter-spacing: -.02em; }
.studio-gallery { padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-content: start; }
.gen { border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.gen-media { aspect-ratio: 16 / 10; background: #060608; display: grid; place-items: center; overflow: hidden; position: relative; }
.gen-media img, .gen-media video { width: 100%; height: 100%; object-fit: contain; }
.gen-media audio { width: 90%; }
.gen-media .loading { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gen-media .loading::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 178, 63, .1) 50%, transparent 70%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gen-meta { padding: 12px 14px; font-size: 13px; display: grid; gap: 4px; }
.gen-meta .mono { font-size: 11px; color: var(--dim); letter-spacing: .06em; }
.gen-meta p { margin: 0; color: #d8d5cf; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gen-actions { display: flex; border-top: 1px solid var(--line); }
.gen-actions a, .gen-actions button { flex: 1; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-right: 1px solid var(--line); padding: 11px; text-align: center; text-decoration: none; cursor: pointer; }
.gen-actions > :last-child { border-right: 0; }
.gen-actions a:hover, .gen-actions button:hover { color: var(--text); }
.gen.failed .gen-media { color: var(--a4); font-size: 13px; padding: 16px; text-align: center; }
.studio-empty { grid-column: 1 / -1; color: var(--muted); border: 1px dashed var(--line-2); padding: 60px; text-align: center; }
.studio-chat { border: 0; display: flex; flex-direction: column; padding: 0; min-height: calc(100vh - 118px); }
.chat-log { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.msg { max-width: 780px; padding: 14px 18px; border: 1px solid var(--line); white-space: pre-wrap; line-height: 1.6; }
.msg.user { align-self: flex-end; background: var(--panel-2); }
.msg.assistant { align-self: flex-start; background: var(--bg); }
.chat-input { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }
.chat-input textarea { flex: 1; min-height: 52px; }

/* ---------- responsywność ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .docs { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-toc { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 8px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .burger { display: block; }
  .head-actions .btn-ghost { display: none; }
  .two-col, .split, .model-title, .model-layout, .studio-body, .app-shell { grid-template-columns: 1fr; }
  .split > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .cards, .posts, .features, .cats, .steps { grid-template-columns: 1fr 1fr; }
  .cat-tile { border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li { border-right: 0; border-bottom: 1px solid var(--line); }
  .docs { grid-template-columns: 1fr; }
  .side, .studio-form, .app-side { position: static; height: auto; max-height: none; }
  .app-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .app-side .app-bottom { margin-top: 0; }
  .app-main { padding: 28px 20px 60px; }
  .calc-form { grid-template-columns: 1fr 1fr; }
  .calc-form label:first-child { grid-column: 1 / -1; }
  .studio-form { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .wrap, .narrow { width: calc(100% - 32px); }
  .cards, .posts, .features, .cats, .steps { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero-inner { padding: 96px 0 44px; }
  .head-actions .btn-primary { display: none; }
  .filter-inputs { width: 100%; }
  .filter-inputs select, .filter-inputs input { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .product { padding: 26px; }
  .auth-card { padding: 28px; }
}

/* ---------- ruch: pojawianie się, szkice, poświata ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .display .w { display: inline-block; opacity: 0; transform: translateY(.35em) rotate(1.5deg); filter: blur(6px); animation: word-in .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(120ms + var(--w) * 90ms); }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }

/* szkice rysowane "ręką": ścieżki SVG z animowanym dashoffsetem */
.sketch { position: absolute; pointer-events: none; overflow: visible; color: var(--a1); }
.sketch path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.sketch.drawn path { animation: draw 1.4s cubic-bezier(.6,.1,.2,1) var(--d, .3s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.note { position: absolute; font: italic 400 24px/1.1 var(--serif); color: var(--a3); white-space: nowrap; opacity: 0; transform: rotate(-4deg) translateY(6px); pointer-events: none; }
.note.drawn { animation: note-in .6s ease var(--d, 1.2s) forwards; }
@keyframes note-in { to { opacity: 1; transform: rotate(-4deg); } }
.hero-inner, .final-inner, .section-head, .steps, .pricing-teaser { position: relative; }
.title-underline { left: 0; bottom: -14px; width: 100%; height: 26px; }
.hero .display em { position: relative; display: inline-block; }
.cta-arrow { width: 150px; height: 90px; left: calc(100% + 12px); top: -40px; }
.cta-row { position: relative; }
.hero .cta-row { width: fit-content; }
.cta-note { left: calc(100% + 150px); top: -58px; }
.proof-circle { width: calc(100% + 44px); height: 54px; left: -22px; top: -17px; }
.proof li:first-child { position: relative; }
.steps-arrows { left: 0; top: 34px; width: 100%; height: 60px; }
.steps li { position: relative; z-index: 1; }

/* poświata za kursorem na kartach */
.card, .cat-tile, .feature, .pack { position: relative; isolation: isolate; }
.card::after, .cat-tile::after, .feature::after, .pack::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 178, 63, .13), transparent 60%); pointer-events: none; }
.card:hover::after, .cat-tile:hover::after, .feature:hover::after, .pack:hover::after { opacity: 1; }
.card:hover { outline: 1px solid rgba(255, 178, 63, .35); outline-offset: -1px; }

/* ziarno filmowe na hero i nagłówkach */
.hero::before, .page-head.with-aurora::before, .model-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-inner, .page-head > .wrap, .model-hero-inner { position: relative; z-index: 1; }

/* linia bursztynu przy nagłówkach sekcji */
.section-head h2::after { content: ''; display: block; width: 0; height: 2px; margin-top: 14px; background: var(--aurora); transition: width 1.1s cubic-bezier(.2,.7,.2,1) .2s; }
.section-head.in h2::after { width: 72px; }

/* galeria przykładów */
.samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin: 8px 0 20px; }
.samples .sample { aspect-ratio: 16 / 10; }
.sample { position: relative; margin: 0; border: 1px solid var(--line); background: #060608; overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; }
.sample img, .sample video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; filter: saturate(.9); }
.sample:hover img, .sample:hover video { transform: scale(1.05); filter: saturate(1.1); }
.sample figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 12.5px; line-height: 1.35; color: #f5efe6; background: linear-gradient(0deg, rgba(8, 8, 10, .92), transparent); opacity: 0; transform: translateY(8px); transition: .35s; }
.sample:hover figcaption { opacity: 1; transform: none; }
.sample .badge { position: absolute; top: 8px; left: 8px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 7px; background: rgba(8, 8, 10, .75); border: 1px solid var(--line-2); color: var(--a1); }
.sample audio { position: absolute; left: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); }
.samples-note { font-size: 12px; color: var(--dim); }
.samples-note a { color: var(--muted); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(6, 4, 3, .92); display: grid; place-items: center; padding: 40px; backdrop-filter: blur(6px); animation: fade .25s ease; }
.lightbox img, .lightbox video { max-width: min(1200px, 92vw); max-height: 80vh; border: 1px solid var(--line-2); }
.lightbox p { color: var(--muted); max-width: 900px; text-align: center; font-size: 14px; margin-top: 14px; }
.lightbox button { position: absolute; top: 18px; right: 22px; background: none; border: 1px solid var(--line-2); color: var(--text); font: 500 12px/1 var(--mono); padding: 10px 12px; cursor: pointer; }
@keyframes fade { from { opacity: 0; } }

/* pasek z przykładami na stronie głównej */
.showreel { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; }
.showreel-track { display: flex; gap: 12px; width: max-content; animation: reel 70s linear infinite; }
.showreel:hover .showreel-track { animation-play-state: paused; }
.showreel a { position: relative; display: block; width: 300px; height: 190px; border: 1px solid var(--line); overflow: hidden; flex: none; }
.showreel img, .showreel video { width: 100%; height: 100%; object-fit: cover; }
.showreel span { position: absolute; left: 10px; bottom: 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(8, 8, 10, .8); padding: 5px 7px; }
@keyframes reel { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .display .w { opacity: 1; transform: none; filter: none; animation: none; transition: none; }
  .sketch path { stroke-dashoffset: 0; animation: none !important; }
  .note { opacity: 1; animation: none !important; }
  .showreel-track { animation: none; }
}
@media (max-width: 900px) { .cta-arrow, .cta-note, .steps-arrows { display: none; } }

.model-cover .hero-media { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.9) sepia(.15); }

/* ---------- menu rozwijane i wyszukiwarka ---------- */
.site-head { background: rgba(8, 8, 10, .72); }
.head-row { height: 70px; gap: 32px; }
.nav { gap: 4px; }
.nav button, .nav a { display: inline-flex; align-items: center; gap: 6px; border-radius: 0; }
.nav button:hover, .nav a:hover, .nav [aria-expanded=true] { color: var(--text); }
.chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; transition: transform .2s; }
[aria-expanded=true] .chev { transform: rotate(225deg) translateY(-1px); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(10, 10, 12, .97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; }
.mega.open { opacity: 1; visibility: visible; transform: none; }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 32px; padding: 34px 0 40px; }
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-col a { color: var(--muted); text-decoration: none; padding: 7px 0; font-size: 14.5px; display: flex; justify-content: space-between; gap: 10px; }
.mega-col a small { color: var(--dim); font: 400 11.5px/1.5 var(--mono); }
.mega-col a:hover { color: var(--text); }
.mega-col .mega-cat { color: var(--text); font-weight: 600; font-size: 15px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mega-cat span { color: var(--a1); font: 500 12px/1.6 var(--mono); }
.mega-feature { display: grid; gap: 12px; }
.mega-shot { position: relative; display: block; height: 128px; overflow: hidden; border: 1px solid var(--line); }
.mega-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mega-shot:hover img { transform: scale(1.05); }
.mega-shot span { position: absolute; left: 12px; bottom: 10px; font-weight: 600; font-size: 15px; text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
.mega-product { grid-template-columns: repeat(4, 1fr); }
.mega-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, background .2s; }
.mega-card:hover { border-color: rgba(255, 178, 63, .45); background: var(--panel); }
.mega-card strong { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.mega-card span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.search-btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 12px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font: 400 14px/1 var(--sans); cursor: pointer; }
.search-btn:hover { color: var(--text); border-color: var(--line-2); }
.search-btn kbd { font: 500 10.5px/1 var(--mono); padding: 4px 5px; border: 1px solid var(--line-2); color: var(--dim); }
.palette { position: fixed; inset: 0; z-index: 120; background: rgba(4, 4, 6, .7); backdrop-filter: blur(6px); display: grid; justify-items: center; align-items: start; padding-top: 12vh; }
.palette-box { width: min(640px, 92vw); background: var(--panel); border: 1px solid var(--line-2); }
.palette input { border: 0; border-bottom: 1px solid var(--line); background: transparent; font-size: 18px; padding: 18px 20px; }
.palette-list { max-height: 50vh; overflow-y: auto; }
.palette-list a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; text-decoration: none; color: var(--text); font-size: 15px; }
.palette-list a small { color: var(--dim); font: 400 12px/1.5 var(--mono); }
.palette-list a.sel, .palette-list a:hover { background: linear-gradient(var(--a1), var(--a1)) left / 2px 100% no-repeat, var(--panel-2); }
@media (max-width: 1100px) { .search-btn span, .search-btn kbd { display: none; } .mega-grid { grid-template-columns: repeat(2, 1fr); } .mega-feature { display: none; } }
@media (max-width: 900px) { .mega { position: static; display: none; } .nav.open .mega.open { display: block; } }

/* ---------- hero z filmami ---------- */
.hero { min-height: min(94vh, 980px); }
.hero-reel { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #000; }
.hero-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.hero-reel video.on { opacity: .78; animation: kenburns 10s linear forwards; }
/* Po regułach hero-reel (ta sama waga selektora - musi stać niżej). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-reel video.on { animation: none; }
}
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.05); } }
.hero.has-reel::after { background: linear-gradient(90deg, rgba(8, 8, 10, .92) 0%, rgba(8, 8, 10, .6) 45%, rgba(8, 8, 10, .15) 100%), linear-gradient(180deg, rgba(8, 8, 10, .3) 0%, transparent 30%, transparent 60%, var(--bg) 100%); }
.hero.has-reel .aurora { opacity: .35; }
.reel-caption { position: absolute; right: 32px; bottom: 30px; z-index: 2; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); display: flex; gap: 10px; align-items: center; }
.reel-caption::before { content: ''; width: 26px; height: 1px; background: var(--a1); }

/* ---------- kafelki z przykładami (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 210px; gap: 10px; }
.bento a { position: relative; overflow: hidden; border: 1px solid var(--line); grid-column: span 4; text-decoration: none; background: #060608; }
.bento a:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.bento a:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.bento a:nth-child(n+3) { grid-column: span 4; }
.bento img, .bento video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .6s; filter: saturate(.95); }
.bento a:hover img, .bento a:hover video { transform: scale(1.045); filter: saturate(1.1); }
.bento span { position: absolute; left: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateY(8px); transition: .35s; }
.bento span b { font-weight: 600; font-size: 17px; letter-spacing: -.02em; text-shadow: 0 1px 16px rgba(0, 0, 0, .9); }
.bento span i { font: normal 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a3); }
.bento a:hover span { opacity: 1; transform: none; }
.bento a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 45%); opacity: 0; transition: .35s; }
.bento a:hover::after { opacity: 1; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .bento a, .bento a:nth-child(n) { grid-column: span 1; grid-row: span 1; } .bento a:nth-child(1) { grid-column: span 2; grid-row: span 2; } }

/* ---------- okładki kart: typografia na gradiencie ---------- */
.cover-art { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--panel); }
.cover-art::before { content: ''; position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cover-art .cn { position: absolute; left: 18px; bottom: 12px; right: 18px; font: 600 38px/.9 var(--display); letter-spacing: -.06em; color: rgba(255, 255, 255, .92); white-space: normal; text-wrap: balance; overflow-wrap: anywhere; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cover-art .cv { position: absolute; right: 16px; top: 14px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .25); padding: 5px 7px; }
.card:hover .cover-art .cn { transform: translateX(4px); }
.card .card-body h3 { font-size: 19px; }

/* logowanie przez Google */
.btn-google { background: #fff; color: #1f1f1f; border-color: #fff; gap: 12px; margin-top: 24px; }
.btn-google:hover { background: #f1f1f1; border-color: #f1f1f1; }
.or { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; color: var(--dim); font: 400 13px/1 var(--sans); }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.url-row { display: flex; gap: 0; }
.url-row input { flex: 1; }
.upload-btn { border: 1px solid var(--line-2); border-left: 0; white-space: nowrap; }
details .upload-btn { border-left: 1px solid var(--line-2); margin-top: 6px; }
.notice .copy { margin-left: 10px; border: 1px solid var(--line-2); }

/* siatki: dzieci nie mogą rozpychać kolumn (długie linie kodu) */
.two-col > *, .split > *, .model-layout > *, .docs > *, .calc > * { min-width: 0; }
html { overflow-x: clip; }

/* ---------- menu v2 ---------- */
.nav { position: relative; }
.nav-ink { position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--a1); transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s cubic-bezier(.2,.7,.2,1), opacity .2s; opacity: 0; pointer-events: none; }
.nav:hover .nav-ink, .nav.has-ink .nav-ink { opacity: 1; }
.nav a[aria-current] { color: var(--text); }
.mega { border-bottom-color: var(--line-2); }
.mega-models { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 28px 0 32px; }
.mega-cats { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding-right: 24px; }
.mcat { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; text-decoration: none; border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
.mcat-name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--muted); transition: color .2s; }
.mcat-n { font: 500 12px/1.9 var(--mono); color: var(--dim); }
.mcat small { grid-column: 1 / -1; color: var(--dim); font-size: 13px; line-height: 1.4; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s, opacity .3s; }
.mcat.on { background: var(--panel); border-left-color: var(--a1); }
.mcat.on .mcat-name { color: var(--text); }
.mcat.on .mcat-n { color: var(--a1); }
.mcat.on small { max-height: 40px; opacity: 1; margin-top: 4px; }
.mcat-all { margin-top: auto; padding: 16px 16px 4px; color: var(--a1); text-decoration: none; font-size: 14px; font-weight: 500; }
.mtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; animation: tiles-in .35s ease; }
@keyframes tiles-in { from { opacity: 0; transform: translateY(6px); } }
.mtile { position: relative; display: block; height: 132px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; background: #0b0b0e; }
.mtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s; filter: brightness(.82) saturate(.95); }
.mtile .cover-art { height: 100%; border: 0; }
.mtile .cover-art .cn { font-size: 26px; bottom: 44px; }
.mtile:hover img { transform: scale(1.06); filter: brightness(.95) saturate(1.08); }
.mtile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(0deg, rgba(6, 6, 8, .92), transparent); }
.mtile-meta b { font-weight: 600; font-size: 15px; letter-spacing: -.015em; }
.mtile-meta small { font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.mtile:hover { border-color: rgba(255, 178, 63, .5); }
.mega-product2 { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 12px; padding: 28px 0 32px; }
.pcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; background: var(--panel); }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.pcard:hover img { transform: scale(1.05); filter: brightness(.7); }
.pcard pre { position: absolute; top: 18px; left: 18px; right: 18px; margin: 0; border: 1px solid var(--line); font-size: 12.5px; }
.pcard-body { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px; background: linear-gradient(0deg, rgba(6, 6, 8, .85), transparent); }
.pcard-body i { font: normal 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--a1); }
.pcard-body b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.pcard-body small { color: var(--muted); font-size: 13.5px; }
.pcard:hover { border-color: rgba(255, 178, 63, .5); }
.plinks { display: flex; flex-direction: column; }
.plinks a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: 15px; transition: background .2s; }
.plinks a small { color: var(--dim); font-weight: 400; font-size: 13px; }
.plinks a:hover { background: var(--panel); }
@media (max-width: 1100px) { .mega-models { grid-template-columns: 220px 1fr; } .mtiles { grid-template-columns: repeat(2, 1fr); } .mega-product2 { grid-template-columns: 1fr 1fr; } .plinks { display: none; } }

/* telefon: menu na cały ekran */
@media (max-width: 900px) {
  .nav { position: fixed; inset: 70px 0 0 0; z-index: 60; display: flex; flex-direction: column; gap: 0; padding: 18px 24px 40px; background: rgba(8, 8, 10, .98); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .nav.open { opacity: 1; visibility: visible; transform: none; display: flex; }
  .nav a, .nav button { font-size: 30px; font-weight: 600; letter-spacing: -.035em; color: var(--text); padding: 16px 0; border-bottom: 1px solid var(--line); justify-content: space-between; width: 100%; }
  .nav .chev { display: none; }
  .nav-ink { display: none; }
  .mega { display: none !important; }
}

/* ---------- logo: napis z gwiazdą zamiast kropki nad "i" ---------- */
.logo { gap: 0; font: 600 23px/1 var(--display); letter-spacing: -0.045em; }
.wm { position: relative; display: inline-block; white-space: nowrap; }
.wm-i { position: relative; display: inline-block; }
.wm-star { position: absolute; left: 50%; top: -0.05em; width: 0.46em; height: 0.46em; max-width: none; transform: translateX(-50%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.logo:hover .wm-star { transform: translateX(-50%) rotate(90deg) scale(1.15); }
.site-foot .logo { font-size: 30px; }
.auth-card .logo { font-size: 26px; }

.hero .lead { font-size: clamp(19px, 1.7vw, 24px); max-width: 42ch; color: #ecE9e3; line-height: 1.4; }
.hero .lead b { color: var(--a1); font-weight: 600; white-space: nowrap; }

/* figury w treściach: zrzuty i przykłady z podpisem */
.prose figure.shot { margin: 32px 0; }
.prose figure.shot img, .prose figure.shot video { display: block; width: auto; max-width: 100%; height: auto; max-height: 820px; margin: 0 auto; border: 1px solid var(--line); background: #0d0d10; }
.prose figure.shot figcaption { margin-top: 10px; font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); text-align: center; }
.prose .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 32px 0; }
.prose .shots figure.shot { margin: 0; }
.post-cover.has-img { position: relative; overflow: hidden; height: 180px; }
.post-cover.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-cover.has-img img { transform: scale(1.04); }
.post-cover.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0) 40%, rgba(8,8,10,.75)); }
.post-cover.has-img span { z-index: 1; }


/* ================= v3 (2026-10-02): mniej szablonu, więcej charakteru =================
   Schibsted Grotesk w nagłówkach i tekście, bursztyn jako kolor akcji, bez "//", szkiców i kursywy-ozdobnika. */
body { font-size: 16.5px; line-height: 1.62; letter-spacing: -0.003em; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.032em; line-height: 1.02; }
h3 { letter-spacing: -0.018em; }
.display { font-weight: 800; letter-spacing: -0.045em; line-height: .9; }
.display-sm { font-weight: 800; letter-spacing: -0.04em; }
h1 em, h2 em, .display em { font-family: var(--display); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--a1); padding-right: 0; }
.sketch, .steps-arrows, .proof-circle, .cta-arrow, .cta-note { display: none !important; }

.kicker { font: 600 13.5px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--a1); margin: 0 0 14px; }
.kicker-sm { font: 600 11.5px/1.4 var(--sans); letter-spacing: .06em; }
.lead { color: #dedbd4; letter-spacing: -0.006em; }
.link-arrow { font: 600 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
.link-arrow:hover { color: var(--a1); }
.proof { font-size: 14px; letter-spacing: 0; text-transform: none; color: #c9c6bf; gap: 8px 28px; }
.proof li::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--a1); margin: 0 10px 2px 0; transform: rotate(45deg); }
.tag { font: 700 10.5px/1.2 var(--sans); letter-spacing: .08em; }
.card-meta { font-family: var(--sans); font-size: 12px; letter-spacing: .02em; text-transform: none; }

/* przyciski: bursztyn = akcja, reszta spokojna */
.btn { height: 46px; padding: 0 22px; font: 600 15px/1 var(--sans); letter-spacing: -0.005em; }
.btn-primary { background: var(--a1); border-color: var(--a1); color: #120b02; }
.btn-primary:hover { background: #ffc466; border-color: #ffc466; color: #120b02; }
.btn-ghost { background: transparent; border-color: var(--line-2); }
.btn-ghost:hover { border-color: #8a8893; }

/* nagłówek strony: mniej ramek, więcej powietrza */
.site-head { background: rgba(8, 8, 10, .82); }
.head-row { height: 72px; gap: 36px; }
.logo { font-size: 22px; }
.nav { gap: 4px; }
.nav a, .nav button { font: 500 15px/1 var(--sans); color: #b7b4bd; padding: 10px 12px; letter-spacing: -0.005em; }
.nav a:hover, .nav button:hover, .nav button[aria-expanded=true] { color: var(--text); }
.nav a[aria-current] { color: var(--text); background: linear-gradient(var(--a1), var(--a1)) left bottom / 100% 2px no-repeat; }
.head-actions { gap: 6px; }
.search-btn { width: 40px; height: 40px; padding: 0; justify-content: center; background: none; border: 0; color: #b7b4bd; }
.search-btn:hover { color: var(--text); background: var(--panel); }
.search-btn span, .search-btn kbd { display: none; }
.lang { border: 0; font: 600 12.5px/1 var(--sans); letter-spacing: .04em; padding: 12px 10px; }
.lang:hover { color: var(--text); }
.head-actions .btn { height: 40px; padding: 0 18px; font-size: 14.5px; }
.head-actions .btn-ghost { border-color: transparent; color: #d8d5ce; padding: 0 12px; }
.head-actions .btn-ghost:hover { color: var(--text); border-color: transparent; background: var(--panel); }

/* okładki modeli: prawdziwy kadr albo czysta typografia, bez rozmytych plam */
.cover-art { background: var(--panel); }
.cover-art::before { display: none; }
.cover-art:not(.has-still) { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-top: 2px solid hsl(var(--h1) 70% 58%); }
.cover-art.has-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.82); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.cover-art.has-still::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 8, 10, 0) 35%, rgba(8, 8, 10, .82)); }
.cover-art .cn, .cover-art .cv { z-index: 1; }
.cover-art .cn { font: 800 34px/.95 var(--display); letter-spacing: -.04em; }
.cover-art .cv { font: 600 11.5px/1 var(--sans); letter-spacing: .04em; border-color: rgba(255, 255, 255, .3); background: rgba(8, 8, 10, .35); }
.card:hover .cover-art.has-still img { transform: scale(1.05); filter: saturate(1.05) brightness(.9); }
.proof.mono { font-family: var(--sans); }
.section-head h2::after { display: none; }
.mtile-meta b { font-weight: 700; }
.mtile-meta small { font: 500 12px/1.3 var(--sans); color: #c3c0c9; }
.cat-tile .mono.muted { font-family: var(--sans); font-size: 13.5px; }
.cat-tile strong { font-weight: 700; letter-spacing: -0.02em; }
.mcat strong, .mcat b { font-weight: 700; }
.price-inline { font-family: var(--sans) !important; font-weight: 650; font-size: inherit !important; letter-spacing: 0 !important; color: var(--a1); }
.crumbs, .crumbs a { font-family: var(--sans) !important; font-size: 12.5px !important; letter-spacing: .04em !important; font-weight: 500; }


/* ================= v3.1 (2026-10-02): pełne kadry, telefon, menu mobilne ================= */
/* galerie: masonry z obrazami w naturalnych proporcjach, podpis pod kadrem */
.samples { display: block; columns: 2 360px; column-gap: 14px; margin: 8px 0 20px; }
.samples .sample, .sample { aspect-ratio: auto; break-inside: avoid; margin: 0 0 14px; display: block; overflow: visible; background: none; border: 0; }
.sample img, .sample video { width: 100%; height: auto; object-fit: contain; border: 1px solid var(--line); background: #060608; filter: none; }
.sample:hover img, .sample:hover video { transform: none; filter: none; border-color: var(--line-2); }
.sample figcaption { position: static; opacity: 1; transform: none; background: none; padding: 8px 2px 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.bento { display: block; columns: 3 300px; column-gap: 10px; }
.bento a, .bento a:nth-child(n) { display: block; margin: 0 0 10px; break-inside: avoid; grid-column: auto; grid-row: auto; }
.bento img, .bento video { height: auto; object-fit: contain; }
.bento span i { font: 600 11px/1 var(--sans); letter-spacing: .06em; }
.prose figure.shot figcaption { font: 400 13px/1.5 var(--sans); letter-spacing: 0; }

/* tabele i kod: przewijanie w poziomie zamiast ucinania */
.table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table table { min-width: 100%; }
.price-inline { white-space: normal; }
.code pre { overflow-x: auto; max-width: 100%; }

/* menu mobilne: przyciski konta w panelu */
.nav-cta { display: none; }

@media (max-width: 900px) {
  .head-row { height: 64px; gap: 12px; }
  .head-actions { margin-left: auto; gap: 2px; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; border: 0; padding: 0 10px; background: none; }
  .burger span { margin: 0; height: 2px; background: var(--text); transition: transform .25s, opacity .25s; }
  .burger[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .burger[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav { inset: 64px 0 0 0; padding: 8px 20px 32px; background: var(--bg); backdrop-filter: none; overflow-y: auto; }
  .nav a, .nav button { font-size: 26px; font-weight: 700; padding: 18px 0; color: var(--text); }
  .nav-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .nav-cta .btn { width: 100%; height: 52px; font-size: 16px; border-bottom: 1px solid var(--line-2) !important; padding: 0 !important; justify-content: center !important; }
  .nav-cta .btn-primary { border-color: var(--a1) !important; color: #120b02 !important; }
  body.menu-open { overflow: hidden; }
  .reel-caption { display: none; }
  .cards { grid-template-columns: 1fr 1fr; }
  .cover-art { height: 104px; }
  .cover-art .cn { font-size: 24px; left: 12px; bottom: 10px; }
  .cover-art .cv { top: 8px; right: 8px; padding: 3px 5px; font-size: 10.5px; }
  .card-body { padding: 12px 12px 14px; }
  .card-body h3 { font-size: 16px; }
  .card-meta { font-size: 11px; gap: 6px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .wrap, .narrow { width: calc(100% - 40px); }
  body { font-size: 16px; }
  .display { font-size: clamp(44px, 12.5vw, 60px); line-height: .94; }
  h1 { font-size: clamp(32px, 9vw, 42px); line-height: 1.04; }
  h2 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.06; }
  .lead { font-size: 17px; }
  .section { padding: 56px 0; }
  .section.tight { padding: 36px 0; }
  .page-head { padding: 40px 0 32px; }
  .hero { min-height: 0; }
  .hero-inner { padding: 72px 0 36px; }
  .cta-row { gap: 10px; }
  .cta-row .btn { flex: 1 1 auto; }
  .samples { columns: 1; }
  .bento { columns: 2; column-gap: 8px; }
  .bento a, .bento a:nth-child(n) { margin-bottom: 8px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 24px; }
  .crumbs { margin-bottom: 18px; }
  .prose { font-size: 16.5px; }
  .prose h2 { margin-top: 1.8em; }
  .prose pre { font-size: 12.5px; }
  .model-hero-inner { padding-top: 28px; }
}
@media (max-width: 900px) {
  /* backdrop-filter na nagłówku tworzy blok zawierający dla position:fixed - przy otwartym menu go zdejmujemy */
  body.menu-open .site-head { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  .nav { position: fixed; top: 64px; left: 0; right: 0; bottom: auto; height: calc(100dvh - 64px); }
}
.nav-cta .btn-primary { background: var(--a1) !important; }
.post-cover.has-img img { object-position: center top; }
.pack strong { white-space: nowrap; font-size: clamp(28px, 7vw, 36px); }

/* autor wpisu */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.post-meta a:not(.byline-author) { color: var(--muted); }
.byline-author { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; text-decoration: none; }
.byline-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.author-box { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; margin: 56px 0 28px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.author-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 0 !important; }
.author-box p { margin: 0; }
.author-kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--a1); }
.author-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 6px !important; }
.author-name a { text-decoration: none; }
.author-name span { color: var(--muted); font-weight: 500; font-size: 16px; }
.author-bio { color: #cfccc5; font-size: 15.5px; line-height: 1.55; }
.author-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px !important; font-size: 14px; font-weight: 600; }
.author-links a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.author-links a:hover { border-color: var(--a1); }
@media (max-width: 560px) { .author-box { grid-template-columns: 64px 1fr; gap: 14px; } .author-box img { width: 64px; height: 64px; } }
@media (max-width: 900px) {
  .studio-top { flex-wrap: wrap; gap: 0; }
  .studio-tabs { order: 2; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; border-top: 1px solid var(--line); }
  .studio-tabs::-webkit-scrollbar { display: none; }
  .studio-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .studio-balance { order: 1; width: 100%; display: flex; justify-content: space-between; padding: 12px 20px; }
}
.mock-out .mock-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock-out { position: relative; overflow: hidden; height: 170px; }
.mock-studio.big .mock-out { height: 270px; }
.mock-out span { z-index: 1; }

/* porównania modeli */
h1 .vs, h3 .vs { color: var(--a1); font-weight: 700; }
.vs-head { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; max-width: 980px; }
.vs-side { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); text-decoration: none; aspect-ratio: 16 / 9; background: var(--panel); }
.vs-side img, .vs-side .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0) 40%, rgba(8,8,10,.85)); }
.vs-name { position: absolute; left: 18px; bottom: 34px; z-index: 1; font: 800 clamp(22px, 2.6vw, 34px)/1 var(--display); letter-spacing: -.035em; }
.vs-meta { position: absolute; left: 18px; bottom: 12px; z-index: 1; font-size: 13.5px; color: #d7d4cd; }
.compare-table th[scope=row], .compare-table th[scope=rowgroup] { text-align: left; color: var(--text); font-weight: 600; white-space: nowrap; }
.compare-table td { vertical-align: top; }
.vs-samples { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-samples h3 { font-size: 17px; margin: 0 0 10px; }
.compare-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.compare-list a { display: block; padding: 18px 20px; background: var(--bg); font-weight: 700; text-decoration: none; }
.compare-list a:hover { background: var(--panel); }
.compare-list span { color: var(--a1); }
.compare-thumbs { display: grid; grid-template-columns: 1fr 1fr; height: 150px; border-bottom: 1px solid var(--line); }
.compare-thumbs img, .compare-thumbs span { width: 100%; height: 100%; object-fit: contain; background: var(--panel); }
@media (max-width: 700px) { .vs-head, .vs-samples { grid-template-columns: 1fr; } .compare-thumbs { height: 110px; } }
.display { font-size: clamp(56px, 8.2vw, 128px); text-wrap: balance; }
h1, h2 { text-wrap: balance; }
.compare-thumbs { grid-template-rows: 100%; overflow: hidden; }
.compare-thumbs img, .compare-thumbs span { min-height: 0; min-width: 0; display: block; }
.compare-card { overflow: hidden; }
.thumb-empty { display: flex !important; align-items: flex-end; padding: 12px 14px; background: linear-gradient(180deg, var(--panel-2), var(--panel)) !important; border-left: 1px solid var(--line); font: 800 20px/1 var(--display); letter-spacing: -.03em; color: #d9d6cf; }

/* równe siatki (v3.2): bez dziur, kafelki o wspólnych proporcjach */
.samples.samples-grid { display: grid; columns: auto; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px; }
.samples-grid .sample { margin: 0; }
.samples-grid .sample img, .samples-grid .sample video { width: 100%; height: auto; aspect-ratio: var(--ar, 1.7778); object-fit: cover; }
.samples-grid .sample figcaption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento.bento-grid { display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 10px; }
.bento-grid a, .bento-grid a:nth-child(n) { margin: 0; grid-column: auto; grid-row: auto; aspect-ratio: 16 / 9; }
.bento-grid img, .bento-grid video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .bento.bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .samples.samples-grid { grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .samples.samples-grid { grid-template-columns: 1fr; } }

/* ================= v4 (2026-10-02): typografia ekosystemu Promptowego =================
   Recursive Dev (tekst, menu, logo), Space Grotesk (nagłówki), JetBrains Mono (etykiety, kod). */
@font-face { font-family: 'Recursive Dev'; font-style: normal; font-weight: 300 1000; font-display: swap; src: url('fonts/recursive-dev-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; }
@font-face { font-family: 'Recursive Dev'; font-style: normal; font-weight: 300 1000; font-display: swap; src: url('fonts/recursive-dev-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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/space-grotesk-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; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/space-grotesk-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; }
/* Zastępczy Arial dopasowany metrykami do Recursive Dev (fontTools: UPM 1000, ascent 950, descent 250, średnia szerokość liter
   ~1,22x Ariala) - tekst nie przeskakuje, gdy dociągnie się właściwy font (CLS). Gruba odmiana osobno z Arial Bold.
   unicode-range = suma zakresów Recursive Dev: znaki spoza fontu (np. strzałka →) dalej biorą system-ui, jak wcześniej. */
@font-face { font-family: 'Recursive Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 300 550; size-adjust: 121.7%; ascent-override: 78%; descent-override: 20.5%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; }
@font-face { font-family: 'Recursive Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 551 1000; size-adjust: 114.6%; ascent-override: 82.9%; descent-override: 21.8%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0100-02BA, U+02BB-02BC, U+02BD-02C5, U+02C6, U+02C7-02CC, U+02CE-02D7, U+02DA, U+02DC, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2000-206F, U+20A0-20C0, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/jetbrains-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; }
:root {
  --sans: 'Recursive Dev', 'Recursive Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk', 'Recursive Dev', 'Recursive Fallback', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
body { font-family: var(--sans); font-size: 16.5px; line-height: 1.65; letter-spacing: 0; }
h1, h2, h3, h4, .display, .display-sm { font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; }
.display { letter-spacing: -0.045em; line-height: .92; }
h1 em, h2 em, .display em { font-family: var(--display); }
.lead { letter-spacing: 0; }

/* logo */
.logo, .logo .wm { font: 900 25px/1 var(--sans); letter-spacing: -0.035em; }
.wm-dot { color: var(--a1); }
.site-foot .logo, .site-foot .logo .wm { font-size: 34px; }
.auth-card .logo, .auth-card .logo .wm { font-size: 30px; }

/* menu jak w ekosystemie: małe litery, gruby Recursive */
.nav a, .nav button { font: 700 15.5px/1 var(--sans); text-transform: lowercase; letter-spacing: 0; color: #c9c6cf; }
.nav a:hover, .nav button:hover, .nav a[aria-current], .nav button[aria-current] { color: var(--text); }
.head-actions .btn-ghost { text-transform: lowercase; font: 700 15px/1 var(--sans); }
.lang { font: 700 13px/1 var(--mono); }

/* etykiety: JetBrains Mono wersalikami (jak kickery promptowego), bez prefiksu // */
.kicker { font: 700 12.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.tag, .kicker-sm, .card-meta .tag { font-family: var(--mono); }
.btn { font-family: var(--sans); font-weight: 700; }
.btn-lg, .cta-row .btn { letter-spacing: 0; }
.cover-art .cn, .vs-name, .thumb-empty { font-family: var(--display); }
@media (max-width: 900px) { .nav a, .nav button { font-size: 28px; font-family: var(--display); text-transform: none; } }

/* ---------- kalkulator kosztów v2 ---------- */
.calc2 { display: grid; gap: 22px; }
.calc2-head h2 { margin: 0 0 6px; }
.calc2-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.calc2-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: 600 15px/1 var(--display); padding: 12px 18px 13px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.calc2-tab:hover { color: var(--text); }
.calc2-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--a1); }
.calc2-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.calc2-body[hidden] { display: none; }
.calc2-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.calc2-model, .calc2-fields { grid-column: 1 / -1; }
.calc2-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; }
.calc2-fields:empty { display: none; }
.calc2 label.check { display: flex; align-items: center; gap: 10px; min-height: 42px; cursor: pointer; }
.calc2 label.check input { width: 18px; height: 18px; accent-color: var(--a1); flex: none; }
.calc2-out { display: grid; gap: 18px; border-left: 1px solid var(--line); padding-left: 28px; }
.calc2-out > div { display: grid; gap: 6px; }
.calc2-out .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.calc2-out strong { font: 600 26px/1.05 var(--display); letter-spacing: -.02em; }
.calc2-out .calc2-total { font-size: clamp(34px, 4vw, 48px); color: var(--a1); }
.calc2-chat { grid-column: 1 / -1; max-height: 560px; overflow: auto; }
.calc2 [data-chat] .calc2-form { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; }
@media (max-width: 860px) {
  .calc2-body { grid-template-columns: 1fr; gap: 20px; }
  .calc2-out { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; grid-template-columns: 1fr 1fr; align-items: end; }
  .calc2-out a { grid-column: 1 / -1; }
  .calc2 [data-chat] .calc2-form { grid-template-columns: 1fr 1fr; }
  .calc2 [data-chat] .calc2-form label:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .calc2.panel { padding: 18px; }
  .calc2-form { grid-template-columns: 1fr 1fr; gap: 12px; }
  .calc2-tab { padding: 12px 12px 13px; font-size: 14px; }
}
.calc-tables h2 { margin: 64px 0 8px; }
.calc-tables h2:first-child { margin-top: 0; }
.calc-tables .table { margin-top: 18px; }
@media (max-width: 600px) { .calc-tables h2 { margin-top: 44px; } }
/* Makieta Studio: kadr w pełnych proporcjach (bez przycinania) */
.mock-out, .mock-studio.big .mock-out { height: auto; }
.mock-out .mock-still { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
/* Okładka karty z kadrem odbiegającym od 16:9: cały obraz na rozmytej kopii - pionowy/kwadratowy po prawej, bardzo szeroki na środku */
.cover-art:is(.still-tall, .still-wide) img.ca-bg { object-fit: fill; filter: blur(18px) saturate(.9) brightness(.5); transform: scale(1.2); }
.cover-art.still-tall img.ca-fg { left: auto; right: 0; width: auto; max-width: 62%; object-fit: contain; filter: none; }
.cover-art.still-wide img.ca-fg { object-fit: contain; filter: none; }
.card:hover .cover-art:is(.still-tall, .still-wide) img.ca-fg { transform: none; }
.cover-art.still-tall::after { background: linear-gradient(90deg, rgba(8, 8, 10, .75) 0%, rgba(8, 8, 10, .2) 55%, rgba(8, 8, 10, 0) 100%); }
/* Okładki wpisów i porównań w proporcjach kadrów (16:9) - bez przycinania */
.post-cover.has-img { height: auto; aspect-ratio: 16 / 9; }
.compare-thumbs img { height: auto !important; aspect-ratio: 16 / 9; }
.compare-thumbs, .compare-thumbs[class] { height: auto; grid-template-rows: auto; }
.compare-thumbs span { aspect-ratio: 16 / 9; height: auto !important; }
@media (max-width: 700px) { .compare-thumbs { height: auto; } }
/* Okładka wpisu z kadrem odbiegającym od 16:9: cały obraz (contain) na rozmytej kopii */
.post-cover img.pc-bg { object-fit: fill; filter: blur(20px) brightness(.45) saturate(.9); transform: scale(1.2); }
.post-cover img.pc-fg { object-fit: contain; object-position: center; }
.post-card:hover .post-cover img:is(.pc-bg, .pc-fg) { transform: none; }
/* Dwie drogi: obie kolumny równej wysokości, kod wypełnia miejsce */
.split > .product .mini-code { flex: 0 0 auto; }
.split > .product .btn { margin-top: auto; }
.split > .product .mock-studio, .split > .product .checks { margin-bottom: 22px; }
/* Kafelki menu modeli w proporcjach kadrów 16:9 (bez przycinania) */
.mtile { height: auto; aspect-ratio: 16 / 9; }

/* ---------- Studio: pusty stan i przyklejony przycisk ---------- */
.studio-empty { border: 0; padding: 8px 4px 0; text-align: left; color: var(--text); display: grid; gap: 26px; max-width: 1100px; }
.se-kicker { color: var(--a1); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
.se-head h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 40px); }
.se-head p { margin: 0; max-width: 62ch; }
.se-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.se-idea { appearance: none; text-align: left; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: 400 14px/1.45 var(--sans); padding: 14px 16px; cursor: pointer; transition: border-color .2s, background .2s; }
.se-idea:hover { border-color: rgba(255, 178, 63, .55); background: var(--panel-2); }
.se-samples { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 10px; }
.se-samples figure { margin: 0; display: grid; gap: 8px; align-content: start; }
.se-samples img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; display: block; border: 1px solid var(--line); background: var(--panel); }
.se-samples figcaption { font-size: 12px; color: var(--muted); line-height: 1.4; }
.studio-submit { position: sticky; bottom: -24px; margin: 0 -24px -24px; padding: 14px 24px 18px; background: var(--bg); border-top: 1px solid var(--line); display: grid; gap: 12px; z-index: 2; }
.studio-submit .studio-cost { border-top: 0; padding-top: 0; }
.studio-submit p.small { margin: 0; }
@media (max-width: 900px) {
  .studio-submit { position: static; margin: 0; padding: 14px 0 0; }
  .se-ideas, .se-samples { grid-template-columns: 1fr; }
}
.se-samples img { object-fit: contain; }
@media (max-width: 900px) { .se-samples figure:nth-child(n+3) { display: none; } }
.se-use { justify-self: start; appearance: none; background: none; border: 1px solid var(--line-2); color: var(--text); font: 500 12px/1 var(--mono); letter-spacing: .04em; padding: 8px 10px; cursor: pointer; }
.se-use:hover { border-color: var(--a1); color: var(--a1); }

/* ---------- siatki wpisów bez dziur (postsGrid) ---------- */
.posts.fit { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.posts.fit[data-span="2"] > :first-child { grid-column: span 2; }
.posts.fit[data-span="full"] > :first-child { grid-column: 1 / -1; }
.posts.fit[data-span="2"] > :first-child, .posts.fit[data-span="full"] > :first-child { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.posts.fit[data-span="2"] > :first-child .post-cover, .posts.fit[data-span="full"] > :first-child .post-cover { border-bottom: 0; border-right: 1px solid var(--line); }
.posts.fit[data-span="2"] > :first-child .card-body, .posts.fit[data-span="full"] > :first-child .card-body { align-self: center; }
@media (max-width: 1100px) {
  .posts.fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts.fit[data-span] > :first-child { grid-column: auto; display: flex; flex-direction: column; }
  .posts.fit[data-span] > :first-child .post-cover { border-right: 0; border-bottom: 1px solid var(--line); }
  .posts.fit[data-odd="1"] > :first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .posts.fit[data-odd="1"] > :first-child .post-cover { border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .posts.fit, .posts.fit[data-odd="1"] { grid-template-columns: 1fr; }
  .posts.fit > :first-child, .posts.fit[data-odd="1"] > :first-child { grid-column: auto; display: flex; flex-direction: column; }
  .posts.fit > :first-child .post-cover { border-right: 0; border-bottom: 1px solid var(--line); }
}
/* Kafelki-wypełniacze w siatce porównań */
.fill-card { padding: 28px; justify-content: flex-start; gap: 10px; background: var(--panel); position: relative; }
.fill-card h3 { margin: 4px 0 0; font-size: 22px; line-height: 1.15; }
.fill-card .kicker-sm { color: var(--a1); }
.fill-card .fill-arrow { margin-top: auto; font: 600 28px/1 var(--display); color: var(--a1); transition: transform .3s; }
.fill-card:hover { background: var(--panel-2); }
.fill-card:hover .fill-arrow { transform: translateX(6px); }
.cmp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmp-grid > .fill-card { display: none; }
.cmp-grid > .fill-card.fd { display: flex; }
@media (max-width: 860px) { .cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmp-grid > .fill-card.fd { display: none; } .cmp-grid > .fill-card.ft { display: flex; } }
@media (max-width: 560px) { .cmp-grid { grid-template-columns: 1fr; } .cmp-grid > .fill-card.ft, .cmp-grid > .fill-card.fd { display: none; } }
/* 404: popularne strony */
.nf-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nf-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: var(--bg); text-decoration: none; font-weight: 500; }
.nf-links a span { color: var(--a1); transition: transform .25s; }
.nf-links a:hover { background: var(--panel); }
.nf-links a:hover span { transform: translateX(4px); }
@media (max-width: 860px) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-example { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; margin: 4px 0 0; }
.price-example .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.price-example strong { font: 600 20px/1 var(--display); }
.price-example .small { grid-column: 1 / -1; }
.calc-link { display: inline-block; margin-top: 4px; color: var(--a1); text-decoration: none; }
.calc-link:hover { text-decoration: underline; }
.calc2-hit td { background: rgba(255, 178, 63, .1); }
.calc2-hit td:first-child { background: linear-gradient(var(--a1), var(--a1)) left / 2px 100% no-repeat, rgba(255, 178, 63, .1); }
/* Nowe modele: miesiące */
.nm-month { margin-bottom: 48px; }
.nm-month .section-head { margin-bottom: 14px; }
.nm-tag { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 3px; font-weight: 400; }
.nm-table td:first-child { min-width: 260px; }
.num { text-align: right; }
/* Porównanie modeli czatu: nagłówek tekstowy zamiast kadru */
.vs-side.vs-text { aspect-ratio: auto; min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 22px 20px 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-top: 2px solid var(--a1); }
.vs-side.vs-text .vs-name, .vs-side.vs-text .vs-meta { position: static; }
.vs-side.vs-text .vs-vendor { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin-bottom: auto; }
.vs-side.vs-text .vs-name { font-size: clamp(26px, 3vw, 40px); }
.thumb-empty { flex-direction: column; justify-content: flex-end; align-items: flex-start !important; gap: 6px; }
.thumb-empty small { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a1); }
.thumb-empty.thumb-chat { border-top: 2px solid var(--a1); }
.mega { background: #0a0a0c; }
/* Tabele cen na telefonie: cena zawsze widoczna bez przesuwania */
.unit-m, .res-m { display: none; }
.cell-sub { display: block; font-size: 11px; letter-spacing: .06em; margin-top: 3px; }
.calc-tables td.mono, .calc2 td.mono { white-space: nowrap; }
@media (max-width: 900px) {
  .price-table .variant { display: block; margin-left: 0; white-space: nowrap; }
}
@media (max-width: 600px) {
  .price-table .col-vendor, .price-table .col-unit { display: none; }
  .price-table .unit-m { display: block; font-size: 11px; margin-top: 3px; }
  .price-table th, .price-table td { padding: 10px 12px; }
  .calc-tables .col-res { display: none; }
  .calc-tables .res-m { display: block; }
  .calc-tables th, .calc-tables td { padding: 10px 12px; }
  .price-table td:first-child { overflow-wrap: break-word; }
  .calc-tables td:first-child { overflow-wrap: anywhere; }
  .calc-tables td.mono { font-size: 13px; }
  .calc-tables td.mono .muted { display: block; font-size: 11px; }
  .calc2-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .calc2-tab { white-space: normal; text-align: left; padding: 12px 10px 13px; }
  /* Porównania: wiersz = etykieta na całą szerokość, pod nią dwie kolumny */
  .compare-2 table, .compare-2 thead, .compare-2 tbody { display: block; }
  .compare-2 tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .compare-2 tbody tr:last-child { border-bottom: 0; }
  .compare-2 th, .compare-2 td { border-bottom: 0; padding: 10px 12px; overflow-wrap: anywhere; min-width: 0; }
  .compare-2 thead th:first-child { display: none; }
  .compare-2 th[scope=row] { grid-column: 1 / -1; padding-bottom: 0; background: none; }
  .compare-table th[scope=row], .compare-table th[scope=rowgroup] { white-space: normal; }
  .compare-cost table, .compare-cost thead, .compare-cost tbody { display: block; }
  .compare-cost tr { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .compare-cost.is-video tr { --cols: 4; }
  .compare-cost tbody tr:last-child { border-bottom: 0; }
  .compare-cost th, .compare-cost td { border-bottom: 0; padding: 10px 12px; overflow-wrap: anywhere; min-width: 0; }
  .compare-cost.is-video th, .compare-cost.is-video td { padding: 10px 8px; font-size: 13px; }
  .compare-cost.is-video thead th { letter-spacing: .04em; }
  .compare-cost thead th:first-child { display: none; }
  .compare-cost th[scope=rowgroup] { grid-column: 1 / -1; background: var(--panel); border-bottom: 1px solid var(--line); }
  /* Nowe modele: nazwa z opisem, pod nią producent | typ, cena */
  .nm-table table, .nm-table thead, .nm-table tbody { display: block; }
  .nm-table thead { display: none; }
  .nm-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px; border-bottom: 1px solid var(--line); }
  .nm-table tbody tr:last-child { border-bottom: 0; }
  .nm-table td { border-bottom: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
  .nm-table td:first-child { grid-column: 1 / -1; min-width: 0; margin-bottom: 4px; }
  .nm-table td:nth-child(3) { text-align: right; }
  .nm-table td.num { grid-column: 1 / -1; text-align: left; }
  .prose .table th, .prose .table td { padding: 10px 10px; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .price-table th, .price-table td, .calc-tables th, .calc-tables td { padding: 10px 8px; }
}
@media (max-width: 900px), (pointer: coarse) { input, select, textarea { font-size: 16px; } }

/* ---------- PWA: instalacja, podpowiedź iOS, powiadomienia, strona offline, tryb aplikacji ---------- */
.install-btn svg { flex: none; }
.head-actions .install-btn { color: #d8d5ce; }
.nav-cta .install-btn { display: none; }
@media (max-width: 900px) {
  /* Na telefonie w nagłówku sama ikona (pełny napis w menu). */
  .head-actions .install-head { display: inline-flex; width: 40px; padding: 0; justify-content: center; border-color: transparent; background: none; }
  .head-actions .install-head span { display: none; }
  .nav-cta .install-btn { display: inline-flex; }
}
.app-install { color: var(--a1); }
.ios-hint { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; background: var(--panel); border: 1px solid var(--line-2); border-left: 2px solid var(--a1); font: 400 14px/1.45 var(--sans); color: var(--text); }
.ios-hint p { margin: 0; flex: 1; }
.ios-hint b { font-weight: 600; }
.ios-hint button { flex: none; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; background: none; color: var(--muted); font: 400 20px/1 var(--sans); cursor: pointer; }
.ios-hint button:hover { color: var(--text); }
.notify-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line-2); background: var(--bg-2); font: 400 13.5px/1.4 var(--sans); }
.notify-ask span { flex: 1 1 160px; }
.notify-ask .btn { height: 32px; padding: 0 14px; font-size: 13px; }
.offline-page { min-height: 100vh; display: grid; place-items: center; }
.offline { width: 100%; padding: 48px 20px; }
.offline-box { max-width: 560px; margin: 0 auto; padding: 36px 32px; border: 1px solid var(--line); background: var(--panel); }
.offline-box .logo { display: inline-block; margin-bottom: 36px; text-decoration: none; color: var(--text); }
.offline-code { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--a1); }
.offline-box h1 { margin: 0 0 14px; font-size: clamp(28px, 6vw, 40px); line-height: 1.05; }
.offline-box p.muted { margin: 0 0 28px; color: var(--muted); }
.offline-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (display-mode: standalone) {
  .ios-hint, .install-btn { display: none !important; }
}
/* Okno aplikacji na komputerze z nakładką przycisków okna: nagłówek wchodzi w pasek tytułu i służy do przeciągania. */
@media (display-mode: window-controls-overlay) {
  .install-btn { display: none !important; }
  .site-head { padding-left: env(titlebar-area-x, 0px); padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)); -webkit-app-region: drag; app-region: drag; }
  .site-head a, .site-head button, .site-head input, .site-head .mega, .site-head .palette { -webkit-app-region: no-drag; app-region: no-drag; }
}
/* Pasek startu (tylko w trybie demo, bez kluczy dostawcy) */
.launch-bar { background: #1a1408; border-bottom: 1px solid rgba(255, 178, 63, .35); color: #f3e3c4; font-size: 13.5px; line-height: 1.45; }
.launch-bar .wrap { padding-top: 9px; padding-bottom: 9px; }
.launch-bar b { color: var(--a1); font-weight: 600; }

/* ---------- Studio: kilka kadrów w wyniku, wygasłe pliki, pobieranie, czat ---------- */
.gen-media.gen-multi { aspect-ratio: auto; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 2px; place-items: stretch; background: var(--line); overflow: visible; }
.gm-cell { position: relative; display: block; min-width: 0; aspect-ratio: var(--ar, 1 / 1); background: #060608; }
.gm-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.gm-n { position: absolute; top: 6px; left: 6px; font-size: 10px; line-height: 1; padding: 4px 5px; color: var(--text); background: rgba(8, 8, 10, .82); border: 1px solid var(--line-2); }
.gm-cell:hover .gm-n, .gm-cell:focus-visible .gm-n { color: var(--a1); border-color: var(--a1); }
.gen-media.gen-expired { color: var(--muted); font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, #060608 0 10px, #0b0b0e 10px 20px); }
.gen-meta .gen-exp { color: var(--a1); font-size: 11px; }
.gen > .gen-actions { margin-top: auto; }
.gen-dl { flex: 1; position: relative; border-right: 1px solid var(--line); }
.gen-dl summary { list-style: none; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 11px; text-align: center; cursor: pointer; }
.gen-dl summary::-webkit-details-marker { display: none; }
.gen-dl summary:hover, .gen-dl[open] summary { color: var(--text); }
.gen-dl-list { position: absolute; left: -1px; right: -1px; bottom: 100%; display: grid; background: var(--panel-2); border: 1px solid var(--line-2); z-index: 3; }
.gen-actions .gen-dl-list a { flex: none; border-right: 0; border-bottom: 1px solid var(--line); text-align: left; padding: 11px 12px; }
.gen-actions .gen-dl-list a:last-child { border-bottom: 0; }
.chat-bar { display: flex; justify-content: flex-end; border-bottom: 1px solid var(--line); }
.chat-bar .copy { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .studio-gallery .gen { scroll-margin-top: 172px; }
  .studio-tabs button { padding: 16px 9px; letter-spacing: .05em; }
  .studio-tabs.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .studio-tabs.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .studio-tabs.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
}

/* ---------- siatki bez dziur (B3-02) ---------- */
/* Okładki kart modeli w proporcjach kadru 16:9: obraz w całości (contain), rozmyte tło bez powiększania (nie wystaje poza kartę). */
.model-card .cover-art { height: auto; aspect-ratio: 16 / 9; }
.model-card .cover-art.has-still img { object-fit: contain; }
.model-card .cover-art.has-still img.ca-bg { object-fit: fill; transform: none; }
.model-card .cover-art img.ca-dup { display: none; }
.post-cover.cover-fit img.pc-bg { object-fit: fill; transform: none; }
/* Karty modeli (cardsGrid + filtry w site.js): ostatnia karta zajmuje resztę rzędu na każdym breakpoincie. */
.cards[data-r4="1"] > .is-last { grid-column: 1 / -1; }
.cards[data-r4="2"] > .is-last { grid-column: span 3; }
.cards[data-r4="3"] > .is-last { grid-column: span 2; }
@media (max-width: 1100px) {
  .cards[data-r4] > .is-last { grid-column: auto; }
  .cards[data-r3="1"] > .is-last { grid-column: 1 / -1; }
  .cards[data-r3="2"] > .is-last { grid-column: span 2; }
}
@media (max-width: 900px) {
  .cards[data-r3] > .is-last { grid-column: auto; }
  .cards[data-r2="1"] > .is-last { grid-column: 1 / -1; }
}
/* Szeroka karta: okładka po lewej (kadr w całości na rozmytym tle), tekst obok. Na telefonie zostaje pionowa (pełna szerokość, 16:9). */
@media (min-width: 1101px) {
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last .cover-art { aspect-ratio: auto; min-height: 210px; border-bottom: 0; border-right: 1px solid var(--line); }
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last .cover-art img.ca-dup { display: block; }
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last .cover-art.still-tall img.ca-fg { left: 0; right: 0; margin: 0 auto; max-width: 100%; }
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last .card-body { justify-content: center; padding: 24px 28px; }
  .cards:is([data-r4="1"], [data-r4="2"], [data-r4="3"]) > .is-last .card-price { margin-top: 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last .cover-art { aspect-ratio: auto; min-height: 210px; border-bottom: 0; border-right: 1px solid var(--line); }
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last .cover-art img.ca-dup { display: block; }
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last .cover-art.still-tall img.ca-fg { left: 0; right: 0; margin: 0 auto; max-width: 100%; }
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last .card-body { justify-content: center; padding: 24px 28px; }
  .cards:is([data-r3="1"], [data-r3="2"]) > .is-last .card-price { margin-top: 0; }
}
@media (min-width: 561px) and (max-width: 900px) {
  .cards[data-r2="1"] > .is-last { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .cards[data-r2="1"] > .is-last .cover-art { aspect-ratio: auto; min-height: 210px; border-bottom: 0; border-right: 1px solid var(--line); }
  .cards[data-r2="1"] > .is-last .cover-art img.ca-dup { display: block; }
  .cards[data-r2="1"] > .is-last .cover-art.still-tall img.ca-fg { left: 0; right: 0; margin: 0 auto; max-width: 100%; }
  .cards[data-r2="1"] > .is-last .card-body { justify-content: center; padding: 24px 28px; }
  .cards[data-r2="1"] > .is-last .card-price { margin-top: 0; }
}
/* Kroki: 3 w rzędzie także na tablecie (bez osieroconego kroku 03), na telefonie jedna kolumna. */
@media (min-width: 561px) and (max-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps li { padding: 26px 20px; border-bottom: 0; border-right: 1px solid var(--line); }
  .steps li:last-child { border-right: 0; }
}
/* Trzy przykłady: na tablecie 3 kolumny zamiast 2 + 1, na telefonie jedna. */
@media (min-width: 561px) and (max-width: 900px) { .samples.samples-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Lista porównań: ostatni rząd rozciąga się na całą szerokość. */
.compare-list { display: flex; flex-wrap: wrap; }
.compare-list li { flex: 1 1 280px; display: flex; }
.compare-list a { flex: 1; }
/* Stopka na tablecie: marka w pełnym rzędzie, 4 kolumny linków w jednym. */
@media (min-width: 561px) and (max-width: 1100px) { .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- kadry bez przycinania (B3-03) ---------- */
/* Okładki kart modeli zawsze 16:9 (także bez kadru: czat, audio), żeby karty w rzędzie miały równą wysokość; wygrywa z regułą 104 px na telefonie. */
.cover-art, .cover-art.has-still { height: auto; aspect-ratio: 16 / 9; }
.mtile .cover-art, .mtile .cover-art.has-still { height: 100%; aspect-ratio: auto; }
.cover-art.has-still img { object-fit: contain; }
.cover-art.has-still img.ca-bg { object-fit: fill; }
.post-cover.has-img { background: var(--panel); }
.mtile > img { object-fit: contain; }
/* Mega menu Produkt: kadr Studio w całości u góry karty, pod nim jego rozmyta kopia */
.pcard-studio img.pc-bg { object-fit: fill; filter: blur(18px) brightness(.45); transform: scale(1.2); }
.pcard-studio img.pc-fg { object-fit: contain; object-position: center top; filter: brightness(.75); }
.pcard-studio:hover img.pc-bg { transform: scale(1.2); filter: blur(18px) brightness(.5); }
.pcard-studio:hover img.pc-fg { transform: none; filter: brightness(.9); }
/* Pierwsza karta wpisów obok tekstu: okładka rozciągnięta na wysokość karty, kadr w całości na rozmytej kopii. */
.post-cover img.pc-dup { display: none; }
.post-cover:not(.cover-fit) img.pc-fg { object-fit: cover; object-position: center top; }
@media (min-width: 1101px) {
  .posts.fit:is([data-span="2"], [data-span="full"]) > :first-child .post-cover { aspect-ratio: auto; height: auto; min-height: 300px; align-self: stretch; }
  .posts.fit:is([data-span="2"], [data-span="full"]) > :first-child .post-cover img.pc-dup { display: block; }
  .posts.fit:is([data-span="2"], [data-span="full"]) > :first-child .post-cover img.pc-fg { object-fit: contain; object-position: center; }
}
@media (min-width: 561px) and (max-width: 1100px) {
  .posts.fit[data-odd="1"] > :first-child .post-cover { aspect-ratio: auto; height: auto; min-height: 240px; align-self: stretch; }
  .posts.fit[data-odd="1"] > :first-child .post-cover img.pc-dup { display: block; }
  .posts.fit[data-odd="1"] > :first-child .post-cover img.pc-fg { object-fit: contain; object-position: center; }
}

/* ---------- dostępność (B3-05) ---------- */
.skip { position: absolute; left: 12px; top: -200px; z-index: 200; padding: 12px 16px; background: #08080a; color: var(--text); border: 2px solid var(--a1); font: 600 14px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sample-open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; margin: 0; background: none; border: 0; cursor: zoom-in; }
.sample-open:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.palette-list [role=option] { cursor: pointer; }
@media (max-width: 560px) {
  .link-arrow, .narrow .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-grid a:not(.logo) { padding: 11px 0; }
  .tab-bar, .tab-bar [role=tab], .copy { min-height: 44px; }
  .lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .crumbs a, .calc2-out a, .foot-bottom a { display: inline-flex; align-items: center; min-height: 24px; }
  .crumbs:has(a + span + a) > span[aria-current=page], .crumbs:has(a + span + a) > span:has(+ span[aria-current=page]) { display: none; }
}

/* ---------- szlif układu (B3-06) ---------- */
/* Formularz rejestracji: podpowiedź pod polem, błędne pole, pole wyboru w kolorach serwisu */
.field-hint { display: block; margin-top: 2px; font: 400 12.5px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--a4); }
.auth-card { color-scheme: dark; }
label.check input { width: 18px; height: 18px; flex: none; margin-top: 1px; padding: 0; accent-color: var(--a1); }
/* body z overflow-x: hidden jest kontenerem przewijania (html ma clip), więc position: sticky nie działało (hub, .side, .docs-nav).
   clip przycina tak samo, ale nie tworzy kontenera; przeglądarki bez clip zostają przy hidden z reguły wyżej. */
body { overflow-x: clip; }
/* Hub: tabela cen z przyklejoną lewą kolumną (fakty z katalogu + kalkulator) */
.two-col.two-col-table { align-items: start; }
.two-col-table > :first-child { position: sticky; top: 88px; }
.hub-facts { margin: 22px 0 18px; }
.hub-facts li { font-size: 14.5px; line-height: 1.5; }
.hub-facts strong { font-weight: 700; }
.hub-facts a { text-decoration-color: var(--a2); }
/* Strona modelu: tekst w wygodnej szerokości, tabele i kod dalej na całą kolumnę */
.model-layout .prose > :is(p, ul, ol, h2, h3, blockquote) { max-width: 820px; }
/* Porównanie: nagłówek w tej samej kolumnie co treść */
.vs-head { max-width: none; }
/* Dokumentacja na telefonie: rozwijane menu pod H1 zamiast bocznej kolumny */
.docs-menu { display: none; }
.docs-menu summary { cursor: pointer; list-style: none; position: relative; padding: 14px 44px 14px 16px; font: 700 15px/1.3 var(--sans); color: var(--text); }
.docs-menu summary::-webkit-details-marker { display: none; }
.docs-menu summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 22px/1 var(--mono); color: var(--a1); }
.docs-menu[open] summary::after { content: '−'; }
.docs-menu nav { display: flex; flex-direction: column; padding: 0 16px 16px; border-top: 1px solid var(--line); }
.docs-menu .docs-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 20px 0 6px; }
.prose .docs-menu a { display: block; padding: 10px 0 10px 12px; font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); }
.prose .docs-menu a:hover, .prose .docs-menu a[aria-current] { color: var(--text); }
.prose .docs-menu a[aria-current] { border-left-color: var(--a2); }
@media (max-width: 900px) {
  .two-col-table > :first-child { position: static; }
  .docs-nav { display: none; }
  .docs-menu { display: block; margin: 0 0 28px; border: 1px solid var(--line); background: var(--panel); }
}
/* Filtry katalogu na telefonie: lista producentów i wyszukiwarka w osobnych rzędach */
@media (max-width: 560px) {
  .filter-inputs { flex-direction: column; }
}
/* Nagłówek na laptopie 1024 px: przycisk w stylu .btn mieści się w wierszu */
@media (min-width: 901px) and (max-width: 1100px) {
  .head-row { gap: 22px; }
  .nav a, .nav button { padding-inline: 10px; }
}
.studio-gallery { align-items: start; }

/* ---------- logowanie kodem z maila (04.10) ---------- */
.auth-card form[hidden] { display: none; }
.code-step { display: grid; gap: 6px; }
.code-step[hidden] { display: none; }
.code-step > label { display: block; }
.code-sent { margin: 0 0 6px; color: var(--muted); overflow-wrap: anywhere; }
.code-sent strong { color: var(--text); font-weight: 600; }
.code-input { font: 600 28px/1 var(--mono); letter-spacing: .42em; text-align: center; padding: 14px 12px 14px calc(12px + .42em); font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: var(--line-2); }
.link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--a1); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--text); }
.link-btn:disabled { color: var(--dim); text-decoration: none; cursor: default; }
.link-btn:focus-visible { outline: 2px solid var(--a2); outline-offset: 2px; }
.auth-legal { margin: 0; line-height: 1.5; }
.auth-legal a { color: var(--muted); }
.auth-alt { margin: 0 0 6px; }
.auth-card .ok[data-ok] { margin: 0; }
.auth-card .btn[aria-busy=true] { opacity: .7; cursor: progress; }
@media (max-width: 560px) {
  .auth { padding: 20px 12px; place-items: start center; }
  .auth-card h1 { font-size: 30px; margin-top: 22px; }
  .code-input { font-size: 26px; letter-spacing: .3em; padding-left: calc(12px + .3em); }
  .auth-card input { font-size: 16px; } /* iOS nie powiększa strony przy fokusie, gdy pole ma >= 16 px */
  .auth-card .code-input { font-size: 26px; }
  .auth-card .link-btn { min-height: 24px; }
}
.nowrap { white-space: nowrap; }
.starter-examples { margin: 24px; padding: 24px; }
.starter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.starter-card { display: flex; flex-direction: column; align-items: flex-start; white-space: normal; text-align: left; height: auto; padding: 16px; gap: 8px; }
.activation-steps { display: grid; gap: 12px; padding-left: 20px; }

@media (max-width: 1100px) { .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .starter-grid { grid-template-columns: 1fr; } }

[data-dashboard] .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { [data-dashboard] .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { [data-dashboard] .stats { grid-template-columns: 1fr; } }
.table-sort { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; text-align: left; cursor: pointer; }
.table-sort:focus-visible { outline: 2px solid var(--a1); outline-offset: 5px; }

.post-cover.has-img img:not(.pc-bg), .post-cover:not(.cover-fit) img.pc-fg { object-fit: contain; }