/* ═══════════════════════════════════════════════════════════════════
   TRUFFLEMAIL · arkusz serwisu, wersja premium (25.09.2026)
   Jeden plik zamiast czterech nakładających się bloków z 21.07 i 22.07.
   Kolory i fonty: materialy/BRAND-ZRODLO-PRAWDY.md (papier, grafit,
   czerwień jako znak, oliwka jako drugi akcent, Playfair + Lora).
   Nazwy zmiennych zachowane, bo używa ich skrypt i baner cookies.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* tła */
    --bg: #FBFAF6;
    --bg-alt: #FFFFFF;
    --surface: #FFFFFF;
    --card-olive: #FFFFFF;
    --card-olive-2: #F6F7F2;
    --green-tint: #E9ECDF;
    --green-deep: #1F1B16;          /* ciemne pasma: głęboki grafit z ciepłem */
    --green-darker: #16120D;
    /* tekst */
    --text: #2B2B29;
    --text-2: #55534C;              /* pełny kolor zamiast półprzezroczystości: ostry na każdym tle */
    --text-3: #757269;        /* 01.10: bylo #7A776E (4.29:1), teraz >=4.6:1 WCAG AA */
    --ink: #241F18;
    /* akcenty */
    --signal-red: #BC2E24;
    --red-hover: #A32319;
    --brass: #BC2E24;               /* znak (nazwa historyczna, używana w skrypcie) */
    --olive: #6B7355;
    --green: #6B7355;
    --accent-ondark: #C9CFA6;
    --hero-accent: #BC2E24;
    --hero-marker: rgba(188, 46, 36, 0.14);
    /* linie, cienie, promienie */
    --border: #E4E2DC;
    --border-2: #CFCCC3;
    --shadow-sm: 0 1px 2px rgba(43, 43, 41, 0.04), 0 4px 14px rgba(43, 43, 41, 0.04);
    --shadow: 0 2px 6px rgba(43, 43, 41, 0.04), 0 18px 48px rgba(43, 43, 41, 0.07);
    --shadow-lg: 0 6px 16px rgba(43, 43, 41, 0.05), 0 32px 80px rgba(43, 43, 41, 0.10);
    --radius: 20px;
    --radius-lg: 28px;
    --r-lg: 28px;
    --r-md: 20px;
    /* typografia */
    --font: 'Lora', Georgia, 'Times New Roman', serif;
    --serif: 'Playfair Display', Georgia, serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ease: cubic-bezier(.22, .68, .28, 1);
    --container: 1200px;
    --gutter: clamp(1.1rem, 4vw, 2.75rem);
    --section: clamp(4.5rem, 9vw, 7.5rem);
}

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
    font-family: var(--font);
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 600; }
::selection { background: rgba(188, 46, 36, 0.14); }

/* ── typografia ── */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.012em; color: var(--text); }
h1 { font-size: clamp(2.4rem, 4.3vw, 3.7rem); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 24ch; margin-bottom: 1.1rem; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
h4 { font-size: 1.05rem; }
.accent { color: var(--text); font-style: normal; background-image: linear-gradient(transparent 62%, var(--green-tint) 62%); background-repeat: no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.08em; }
.sec-deep .accent, .manifest .accent, .facts-card .accent { color: var(--bg); background-image: linear-gradient(transparent 62%, rgba(201, 207, 166, 0.32) 62%); }
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--text-3); margin-bottom: 1.3rem;
}
.eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-red); flex: none; }
.lead { font-size: clamp(1.1rem, 1.55vw, 1.28rem); line-height: 1.6; color: var(--text-2); max-width: 56ch; }
.narrow { max-width: 720px; }
.center { text-align: center; }
.center h2, .center .narrow { margin-inline: auto; }
.mt-2 { margin-top: 2rem; }
.prose p { margin-bottom: 1.15rem; font-size: 1.08rem; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); }

/* ── układ ── */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
section, .manifest, .facts, .trust, .wedo { padding-block: var(--section); }
.sec-white { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-mint { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-deep { background: var(--green-deep); color: rgba(251, 250, 246, 0.86); position: relative; overflow: hidden; }
.sec-deep h2, .sec-deep h3 { color: var(--bg); }
.sec-deep .prose p { color: rgba(251, 250, 246, 0.82); }
.sec-deep .prose strong { color: #fff; }
.sec-deep .guarantee-line { color: rgba(251, 250, 246, 0.72); }
.sec-deep .guarantee-line strong { color: #fff; }
.sec-deep .sec-label { color: rgba(251, 250, 246, 0.55); }
.sec-deep .sec-no { color: var(--accent-ondark); }
.glyph { position: absolute; font-family: var(--serif); font-weight: 700; line-height: 0.8; pointer-events: none; user-select: none; font-size: clamp(14rem, 34vw, 30rem); color: rgba(251, 250, 246, 0.05); right: -0.05em; top: -0.12em; }

/* nagłówki sekcji: kicker wyśrodkowany, nagłówek wyśrodkowany, treść pod spodem */
.sec-head { display: flex; align-items: baseline; justify-content: center; gap: 0.7rem; margin-bottom: 1.2rem; }
.sec-head-left { justify-content: flex-start; }
.sec-no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--signal-red); }
.sec-no::before { content: '●'; font-size: 0.5rem; margin-right: 0.6rem; vertical-align: 0.15em; }
.sec-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
.sec-head:not(.sec-head-left) + h2 { text-align: center; margin-inline: auto; }
.sec-head:not(.sec-head-left) + h2 + p { margin-inline: auto; text-align: center; }
.sec-head:not(.sec-head-left) + h2 + .prose { margin-inline: auto; }
.sec-head-left + h2 { text-align: left; }

/* ── przyciski ── */
.btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: var(--signal-red); color: var(--bg);
    font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1.2;
    padding: 1rem 1.7rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    box-shadow: 0 10px 26px rgba(188, 46, 36, 0.20);
    transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(188, 46, 36, 0.26); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn-sm { padding: 0.68rem 1.2rem; font-size: 0.92rem; }
.btn, .btn-sm, .btn-outline, .btn-ghost { min-height: 44px; }
.btn-outline {
    display: inline-flex; align-items: center; gap: 0.6rem;
    border: 1px solid var(--border-2); color: var(--text); font-weight: 600; font-size: 0.95rem;
    padding: 0.8rem 1.4rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
    transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--text); background: var(--bg); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; font-weight: 500;
    padding: 1rem 0.1rem; border-bottom: 1px solid var(--border-2); transition: border-color .2s;
}
.btn-ghost:hover { border-color: var(--text); }

/* ── nawigacja ── */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--signal-red); z-index: 100; }
.nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(251, 250, 246, 0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .25s, transform .35s var(--ease), box-shadow .25s;
}
.nav.scrolled { border-color: var(--border); box-shadow: 0 6px 24px rgba(43, 43, 41, 0.05); }
.nav.tucked { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; gap: 1.4rem; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); min-height: 44px; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.nav-status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 999px; margin-left: 0.4rem; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-red); }
.nav-links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav-links a { text-decoration: none; font-size: 0.97rem; color: var(--text-2); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"] { border-bottom: 1px solid var(--signal-red); }
.nav-links .btn { color: var(--bg); }
.nav-toggle { display: none; margin-left: auto; font-size: 1.5rem; line-height: 1; padding: 0.4rem 0.6rem; min-width: 44px; min-height: 44px; }
.nav-status { white-space: nowrap; }
@media (max-width: 1600px) { .nav-status { display: none; } }
@media (max-width: 1080px) {
    .nav-toggle { display: block; }
    .nav-links { display: none; position: absolute; left: 0; right: 0; top: 76px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.6rem var(--gutter) 1.2rem; }
    .nav-links.open { display: flex; }
    .nav-links li a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }
    .nav-links li:last-child a { margin-top: 0.9rem; justify-content: center; border: 0; }
}

/* ── hero ── */
.hero { padding-block: clamp(2.5rem, 4.5vw, 3.75rem) clamp(2.5rem, 5vw, 4.5rem); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .line { display: inline; }
.hero h1 .line::after { content: ' '; }
.hero .lead { margin-bottom: 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; }
.center .hero-ctas { justify-content: center; }
.center .hero-trust { margin-inline: auto; }
.hero-trust { margin-top: 1.5rem; font-size: 0.92rem; color: var(--text-3); max-width: 52ch; }
.marker { background-image: linear-gradient(var(--hero-marker), var(--hero-marker)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 0.26em; transition: background-size .9s var(--ease); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.marker.in { background-size: 100% 0.26em; }
.hi { opacity: 0; transform: translateY(22px); animation: rise 0.9s var(--ease) forwards; }
.hi-1 { animation-delay: 0.05s; } .hi-2 { animation-delay: 0.16s; } .hi-3 { animation-delay: 0.27s; } .hi-4 { animation-delay: 0.38s; } .hi-5 { animation-delay: 0.5s; }
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero-benefit { background: var(--surface); padding: 1.2rem 1.5rem; font-size: 0.97rem; display: flex; gap: 0.7rem; align-items: flex-start; color: var(--text-2); }
.hero-benefit::before { content: '→'; color: var(--signal-red); flex: none; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-benefits { grid-template-columns: 1fr; } }

/* kartka listu */
.device-wrap { position: relative; padding: 1.6rem 1rem 2.4rem; }
.sheet-under, .sheet-under2 { position: absolute; inset: 1.6rem 1rem 2.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.sheet-under { transform: rotate(-3deg) translate(-8px, 6px); }
.sheet-under2 { transform: rotate(2.2deg) translate(10px, -4px); }
.sheet { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.7rem 1.8rem 1.5rem; box-shadow: var(--shadow-lg); min-height: 340px; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--text); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.live-brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.live-brand i { color: var(--signal-red); font-style: normal; }
.live-meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.live-kicker { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive); margin-bottom: 0.8rem; text-align: center; }
.live-title { font-family: var(--serif); font-size: 1.55rem; margin-bottom: 0.9rem; min-height: 2.2em; text-align: center; }
.live-body { white-space: pre-line; color: var(--text-2); font-size: 0.98rem; min-height: 4.2em; }
.live-body::after { content: '▍'; color: var(--signal-red); animation: blink 1s steps(2) infinite; }
.sheet.done .live-body::after { content: ''; }
@keyframes blink { 50% { opacity: 0; } }
.sheet figcaption { margin-top: 1.4rem; max-width: calc(100% - 7.2rem); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.stamp { position: absolute; right: 0.9rem; bottom: 2.4rem; width: 96px; height: 96px; transform: rotate(-11deg) scale(0.6); opacity: 0; transition: transform .45s var(--ease), opacity .3s; z-index: 3; }
.stamp.on { transform: rotate(-11deg) scale(1); opacity: 0.92; }
.stamp text { font-family: var(--mono); font-weight: 700; font-size: 9.5px; letter-spacing: 1.4px; fill: var(--signal-red); text-transform: uppercase; }
.stamp .ring { fill: none; }
.issue-hint { position: absolute; left: 1rem; bottom: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }

/* ── pasek liczb ── */
.facts { padding-block: 0 clamp(3rem, 6vw, 5rem); }
.facts-card { background: var(--green-deep); color: var(--bg); border-radius: var(--radius-lg); padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.6rem, 3.5vw, 3rem); box-shadow: var(--shadow-lg); }
.facts-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.facts-badge { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-ondark); border: 1px solid rgba(201, 207, 166, 0.35); border-radius: 999px; padding: 0.4rem 0.9rem; }
.facts-est { font-family: var(--serif); font-size: 1rem; color: rgba(251, 250, 246, 0.55); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.fact { border-left: 1px solid rgba(251, 250, 246, 0.14); padding-left: 1.4rem; }
.fact:first-child { border-left: 0; padding-left: 0; }
.f-num { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--bg); margin-bottom: 0.7rem; letter-spacing: -0.02em; }
.f-label { font-size: 0.92rem; line-height: 1.5; color: rgba(251, 250, 246, 0.72); }
.facts-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(251, 250, 246, 0.14); }
.facts-note { font-size: 0.82rem; color: rgba(251, 250, 246, 0.55); max-width: 70ch; }
.facts-link { color: var(--bg); text-decoration: none; font-weight: 600; display: inline-flex; gap: 0.5rem; align-items: center; min-height: 44px; padding: 0.4rem 0; }
.facts-link .arr { color: var(--accent-ondark); }
@media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; } .fact:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 520px) { .facts-grid { grid-template-columns: 1fr; } .fact { border-left: 0; padding-left: 0; border-top: 1px solid rgba(251, 250, 246, 0.14); padding-top: 1.2rem; } .fact:first-child { border-top: 0; padding-top: 0; } }

/* ── pasek branż ── */
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); padding: 0.9rem 0; }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: marquee 36s linear infinite; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.marquee-track .dot { color: var(--signal-red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── karta rekomendacji z LinkedIna ── */
.trust { padding-block: var(--section) clamp(3rem, 6vw, 5rem); }
.li-quote { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.9rem 2.1rem 1.5rem; text-align: left; }
.li-quote-sm { padding: 1.4rem 1.5rem 1.2rem; }
.li-quote-head { display: flex; align-items: flex-start; gap: 1rem; }
.li-quote-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px; }
.li-quote-who { min-width: 0; }
.li-quote-name { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-family: var(--serif); font-weight: 600; font-size: 1.12rem; color: var(--text); margin: 0 0 0.15rem; line-height: 1.25; }
.li-badge { width: 16px; height: 16px; flex: none; }
.li-quote-role { font-size: 0.92rem; color: var(--text-2); margin: 0; }
.li-quote-date { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0.35rem 0 0; }
.li-quote-body { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.li-quote-body p { font-size: 1.02rem; color: var(--text); margin: 0 0 0.8rem; }
.li-quote-body p:last-child { margin-bottom: 0; }
.li-quote figcaption { margin-top: 1.1rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* ── karty ── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.1rem 2rem 2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-2); }
.card h3 { margin: 0.35rem 0 0.8rem; font-size: 1.5rem; }
.card-no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-red); }
.card-plus { font-size: 1rem; line-height: 1.65; color: var(--text-2); margin-bottom: 1.1rem; }
.card-body { font-size: 0.9rem; color: var(--text-3); margin-top: auto; padding-top: 0.6rem; }
.card ul { margin: 0 0 1.5rem; }
.card li { display: flex; gap: 0.65rem; padding: 0.5rem 0; font-size: 0.97rem; color: var(--text-2); border-top: 1px solid var(--border); }
.card li::before { content: '→'; color: var(--signal-red); flex: none; }
.card li strong { color: var(--text); }
.card .btn, .card .btn-outline, .card .btn-sm { margin-top: auto; align-self: flex-start; }
.card .price { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); margin-bottom: 0.9rem; }
.card .price small { font-size: inherit; }
.card.featured { border: 1px solid var(--green-deep); background: var(--green-deep); color: rgba(251, 250, 246, 0.86); box-shadow: var(--shadow-lg); }
.card.featured h3 { color: var(--bg); }
.card.featured .card-no { color: var(--accent-ondark); }
.card.featured .card-plus { color: rgba(251, 250, 246, 0.78); }
.card.featured .price { color: var(--accent-ondark); }
.card.featured li { color: rgba(251, 250, 246, 0.86); border-color: rgba(251, 250, 246, 0.12); }
.card.featured li::before { color: var(--accent-ondark); }
.card.featured li strong { color: #fff; }
.card.featured .btn-outline { border-color: rgba(251, 250, 246, 0.35); color: var(--bg); }
.card.featured .card-body { color: rgba(251, 250, 246, 0.55); }
.card-tag { position: absolute; top: -0.85rem; left: 1.8rem; background: var(--signal-red); color: var(--bg); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 999px; }
.guarantee-line { text-align: center; margin: 2.2rem auto 0; max-width: 64ch; color: var(--text-2); font-size: 0.98rem; }
.guarantee-line strong { color: var(--text); }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; } }

/* ── pasmo ciemne z obrazem (droga czytelnika) ── */
.manifest { position: relative; overflow: hidden; background: var(--green-deep); color: rgba(251, 250, 246, 0.86); text-align: center; }
.manifest-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; filter: saturate(0.85); will-change: transform; }
.manifest::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 27, 22, 0.92) 0%, rgba(31, 27, 22, 0.72) 50%, rgba(31, 27, 22, 0.92) 100%); }
.manifest .container { position: relative; z-index: 1; }
.manifest .eyebrow { color: rgba(251, 250, 246, 0.6); }
.manifest .eyebrow::before { background: var(--accent-ondark); }
.manifest h2 { color: var(--bg); margin-inline: auto; max-width: 20ch; }
.manifest h2 em { color: var(--bg); font-style: normal; background-image: linear-gradient(transparent 62%, rgba(201, 207, 166, 0.32) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.08em; }
.manifest > .container > p { max-width: 58ch; margin: 1.2rem auto 0; font-size: 1.1rem; color: rgba(251, 250, 246, 0.8); }

/* siatka 2×2 (droga czytelnika, etyka, tryby LinkedIn) */
.li-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
.li-mode { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--olive); border-radius: var(--radius); padding: 1.8rem 1.9rem; text-align: left; color: var(--text); }
.li-mode h3 { display: flex; gap: 0.7rem; align-items: baseline; font-size: 1.3rem; margin-bottom: 0.6rem; }
.li-mode h3 span { font-family: var(--mono); font-size: 0.9rem; color: var(--signal-red); flex: none; }
.li-mode p { color: var(--text-2); font-size: 0.98rem; }
.manifest .li-mode { background: rgba(251, 250, 246, 0.96); border: 0; border-left: 3px solid var(--accent-ondark); }
.li-stat { text-align: center; margin: 2.8rem auto 0; }
.li-stat-num { display: block; font-family: var(--serif); font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; color: var(--text); letter-spacing: -0.02em; }
.li-stat-label { max-width: 42ch; margin: 0.7rem auto 0; color: var(--text-2); }
@media (max-width: 760px) { .li-grid { grid-template-columns: 1fr; } }

/* ── porównanie ── */
.compare { display: grid; grid-template-columns: 1fr 1.06fr; gap: 1.5rem; margin-top: 2.6rem; align-items: start; }
.cmp-col { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.cmp-them { background: #F4F4F2; }
.cmp-us { border-color: var(--green-deep); box-shadow: var(--shadow); }
.cmp-head { font-family: var(--serif); font-size: 1.3rem; padding: 1.3rem 1.7rem; border-bottom: 1px solid var(--border); }
.cmp-us .cmp-head { background: var(--green-deep); color: var(--bg); border-color: var(--green-deep); }
.cmp-us .cmp-head::before { content: '●'; color: var(--accent-ondark); font-size: 0.6rem; margin-right: 0.7rem; vertical-align: 0.2em; }
.cmp-row { display: flex; gap: 0.8rem; padding: 0.95rem 1.7rem; border-bottom: 1px solid var(--border); font-size: 0.98rem; color: var(--text-2); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-them .cmp-row::before { content: '✕'; color: var(--signal-red); flex: none; font-weight: 700; }
.cmp-us .cmp-row { color: var(--text); }
.cmp-us .cmp-row::before { content: '✓'; color: var(--olive); flex: none; font-weight: 700; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ── opinie ── */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.9rem 1.9rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.review-head img { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; object-fit: cover; }
.review-head cite { font-style: normal; flex: 1; min-width: 0; }
.review-head cite strong { display: block; font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; }
.review-head cite span { display: block; font-size: 0.8rem; line-height: 1.35; margin-top: 0.15rem; color: var(--text-3); font-family: var(--mono); letter-spacing: 0.04em; } /* 12.10: rola w opinii dziedziczyla interlinie 1.72 akapitu, przy 2 wersach za luzno (Pawel) */
.review p { font-size: 1rem; color: var(--text-2); }
.review p::before { content: '„'; color: var(--signal-red); font-family: var(--serif); font-weight: 700; }
.review p::after { content: '”'; color: var(--signal-red); font-family: var(--serif); font-weight: 700; }
.reviews-hint { display: none; }
@media (max-width: 960px) { .reviews { grid-template-columns: 1fr; } }

/* ── głos klienta (usługi) ── */
.prob-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split h2 { text-align: left; }
.voc { margin: 1.4rem 0 0; display: grid; gap: 0.85rem; }
.voc li { padding: 0.95rem 1.3rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--olive); border-radius: 12px; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--text); box-shadow: var(--shadow-sm); }
.not-but { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--text-2); margin-top: 1.6rem; }
.not-but .nb { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .prob-grid, .split { grid-template-columns: 1fr; } }

/* ── kroki (usługi: pierwszy miesiąc) ── */
.steps { margin-top: 2.6rem; border-top: 1px solid var(--border-2); }
.step { display: grid; grid-template-columns: 130px 1fr 1.6fr; gap: 2rem; align-items: baseline; padding: 2.2rem 0; border-bottom: 1px solid var(--border-2); transition: background .3s var(--ease); }
.step-num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal-red); }
.step h3 { font-size: 1.5rem; }
.step p { color: var(--text-2); font-size: 1rem; }
@media (max-width: 760px) { .step { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ── zakres (kafelki) ── */
.wedo { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wedo h2 { max-width: 30ch; }
.wedo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.4rem; }
.wedo-card { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--olive); border-radius: var(--radius); padding: 1.7rem 1.7rem 1.6rem; position: relative; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), background .3s; }
.wedo-card:hover { transform: translateY(-3px); background: var(--card-olive-2); box-shadow: var(--shadow); }
.wedo-card .no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--signal-red); }
.wedo-card .no::before { content: '●'; font-size: 0.45rem; margin-right: 0.6rem; vertical-align: 0.2em; }
.wedo-card .go { position: absolute; right: 1.5rem; top: 1.5rem; color: var(--text-3); transition: transform .3s var(--ease), color .3s; }
.wedo-card:hover .go { transform: translateX(4px); color: var(--text); }
.wedo-card h3 { margin: 1rem 0 0.5rem; font-size: 1.35rem; }
.wedo-card p { color: var(--text-2); font-size: 0.97rem; }
@media (max-width: 900px) { .wedo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wedo-grid { grid-template-columns: 1fr; } }

/* ── FAQ ── */
.faq { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--border-2); }
.faq details { border-bottom: 1px solid var(--border-2); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.6rem 1.3rem 0.25rem; font-family: var(--serif); font-size: 1.25rem; position: relative; transition: color .2s; }
.faq summary:hover { color: var(--signal-red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); font-family: var(--font); font-size: 1.6rem; color: var(--signal-red); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 2.5rem 1.5rem 0.25rem; color: var(--text-2); max-width: 68ch; }
.faq details p + p { margin-top: -0.6rem; }

/* ── formularz ── */
.form-wrap { max-width: 700px; margin: 2.6rem auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: var(--shadow); position: relative; }
.form-wrap label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 1.1rem 0 0.45rem; }
.form-wrap label:first-of-type { margin-top: 0; }
.form-wrap input[type="text"], .form-wrap input[type="email"], .form-wrap textarea {
    width: 100%; font: inherit; font-size: 1rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 0.85rem 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-wrap input:focus, .form-wrap textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(43, 43, 41, 0.08); }
.form-wrap textarea { min-height: 110px; resize: vertical; }
.form-wrap .choice { border: 0; padding: 0; margin: 1.4rem 0 0; }
.form-wrap .choice legend { padding: 0; margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.choice-opt { font-weight: 400; color: var(--text-3); }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-wrap .choice-pill { display: inline-flex; align-items: center; margin: 0; font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-pill span { display: inline-block; padding: 0.62rem 1.05rem; border: 1px solid var(--border-2); border-radius: 100px; background: var(--surface); color: var(--text-2); line-height: 1.2; transition: border-color .18s, background .18s, color .18s; }
.choice-pill:hover span { border-color: var(--text-3); color: var(--text); }
.choice-pill input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.choice-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(107, 115, 85, 0.25); }
.rodo { display: flex; gap: 0.7rem; align-items: flex-start; margin: 1.4rem 0 1.4rem; font-size: 0.88rem; color: var(--text-2); }
.rodo input { margin-top: 0.1rem; accent-color: var(--signal-red); width: 22px; height: 22px; flex: 0 0 22px; }
.rodo label { margin: 0; font-weight: 400; font-size: 0.88rem; color: var(--text-2); }
.rodo a { color: var(--text); }
.form-note { margin-top: 1rem; text-align: center; font-size: 0.88rem; color: var(--text-3); }
#konsultacja .center > .rv img { margin-inline: auto; }
@media (max-width: 520px) { .choice-row { flex-direction: column; align-items: stretch; } .form-wrap .choice-pill { display: flex; } .choice-pill span { flex: 1; text-align: center; } }

/* ── stopka ── */
footer { background: var(--bg); border-top: 1px solid var(--border); padding: clamp(3.5rem, 6vw, 5rem) 0 1.5rem; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.4rem; position: relative; z-index: 1; }
footer h4 { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.9rem; font-weight: 500; }
footer li { padding: 0.25rem 0; }
footer a { color: var(--text-2); text-decoration: none; font-size: 0.97rem; }
footer a:hover { color: var(--text); }
footer p { font-size: 0.9rem; color: var(--text-2); line-height: 1.65; }
.footer-word { font-family: var(--serif); font-weight: 600; font-size: clamp(5rem, 16vw, 15rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--border-2); text-align: center; margin-top: 3rem; user-select: none; pointer-events: none; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-3); position: relative; z-index: 1; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── sticky CTA (telefon) ── */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(251, 250, 246, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .3s var(--ease); display: none; }
.sticky-cta .btn { width: 100%; justify-content: center; }
.sticky-cta.show { transform: none; }
@media (max-width: 760px) { .sticky-cta { display: block; } }

/* ── wejścia sekcji ── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .12s; } .rv-d2 { transition-delay: .24s; } .rv-d3 { transition-delay: .36s; } .rv-d4 { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) {
    .rv, .hi { opacity: 1; transform: none; transition: none; animation: none; }
    .seal .seal-spin { animation: none; }
    .manifest .li-mode::before { transform: none; }
    .sheet, .sheet.done { transform: none; }
    [data-parallax] { transform: none !important; }
    .marquee-track { animation: none; }
}


/* ── ruch, który coś znaczy (25.09) ── */
/* kartka w hero: po „wysłaniu” unosi się, pod spodem pojawia się potwierdzenie doręczenia */
.sheet { transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.sheet.done { transform: translateY(-8px) rotate(-0.6deg); box-shadow: 0 34px 70px rgba(43, 43, 41, 0.16); }
.delivered { position: absolute; left: 1.6rem; bottom: -1.05rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem; border-radius: 100px; background: var(--green-deep); color: var(--bg); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease) .5s, transform .45s var(--ease) .5s; z-index: 4; white-space: nowrap; }
.delivered::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ondark); }
.sheet.done .delivered { opacity: 1; transform: none; }
/* droga klienta: kroki wchodzą po kolei, linia przy każdym „rysuje się” od góry */
.manifest .li-mode { position: relative; border-left: 0; overflow: hidden; }
.manifest .li-mode::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-ondark); transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .25s; }
.manifest .li-mode.in::before { transform: scaleY(1); }
/* przyciski: „odbicie pieczątki” przy kliknięciu */
.btn:active { transform: translateY(0) scale(0.97); box-shadow: 0 4px 12px rgba(188, 46, 36, 0.2); }
/* obraz w tle sekcji z formularzem: delikatny parallax (JS ustawia --py) */
[data-parallax] { transform: translateY(var(--py, 0px)); transition: transform .12s linear; }

/* ── motyw podpisu: pieczęć Trufflemail ── */
.seal { width: 84px; height: 84px; flex: none; overflow: visible; }
.seal .seal-spin { transform-origin: 56px 56px; animation: seal-spin 42s linear infinite; }
.seal:hover .seal-spin { animation-play-state: paused; }
.seal text { font-family: var(--mono); font-size: 8.4px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700; }
.seal .seal-ring { fill: none; stroke-width: 1.6; }
.seal .seal-mid { fill: none; stroke-width: 0.8; }
.seal-light { color: var(--accent-ondark); }
.seal-light text, .seal-light .seal-ring, .seal-light .seal-mid { fill: currentColor; stroke: currentColor; }
.seal-light .seal-ring, .seal-light .seal-mid { fill: none; }
.seal-ink { color: var(--text-3); }
.seal-ink text { fill: currentColor; }
.seal-ink .seal-ring, .seal-ink .seal-mid { stroke: currentColor; }
.seal-lg { width: 120px; height: 120px; }
.footer-brand-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@keyframes seal-spin { to { transform: rotate(360deg); } }

/* dowód: fragment listu polecającego pod kartami wyników */
.proof-letter { margin: 1.6rem 0 0; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--signal-red); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2.4vw, 2rem); box-shadow: var(--shadow-sm); }
.proof-letter img { display: block; width: 100%; height: auto; max-width: 1100px; margin-inline: auto; }
.proof-letter figcaption { margin-top: 0.9rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); text-align: center; }

/* 01.10.2026: plakietka "dostarczono" po powiekszeniu fontu do 12 px wychodzila poza ekran 375 px */
@media (max-width: 560px) {
    .delivered { left: 1rem; max-width: calc(100% - 2rem); white-space: normal; line-height: 1.3; letter-spacing: 0.08em; }
}
/* 01.10.2026: mobile bez przewijania poziomego: dekoracje absolutne przycinane, karty nie rozpychane przez nowrap przyciskow */
@media (max-width: 760px) {
    section { overflow-x: clip; }
    .card { min-width: 0; }
    .btn, .btn-outline, .btn-sm { white-space: normal; text-align: center; }
}

/* 07.10: za duza przerwa miedzy cytatem zaufania a sekcja 01 (dol .trust + gora section = ~12rem) */
.trust + section { padding-top: clamp(2.5rem, 5vw, 4rem); }
/* 07.10: stempel "wyslano" na waskich ekranach dostaje wlasna strefe pod podpisem; podpis na pelna szerokosc */
@media (max-width: 560px) {
    .sheet { padding-bottom: 6.4rem; }
    .sheet figcaption { max-width: 100%; }
    .stamp { bottom: 0.9rem; right: 0.8rem; }
    .delivered { max-width: calc(100% - 7.8rem); }
}

/* 07.10: wiersz zgody RODO w formularzach ML (nagranie): webforms.min.js ustawia label{display:block} i rozbija checkbox od tekstu */
.rodo, .ml-block-form .rodo { display: flex !important; align-items: flex-start !important; gap: 0.7rem !important; }
.rodo label, .ml-block-form .rodo label { display: block !important; flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; font-weight: 400 !important; }
.rodo input[type="checkbox"], .ml-block-form .rodo input[type="checkbox"] { margin: 0.15rem 0 0 0 !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; }
/* 12.10 (Pawel): podpis pod arkuszem wchodzil na czarna plakietke "dostarczono" (plakietka wisi 1.05rem pod arkuszem, podpis mial bottom:0 w wrapie z paddingiem 2.4rem) */
.device-wrap { padding-bottom: 4.9rem; }
.sheet-under, .sheet-under2 { inset: 1.6rem 1rem 4.9rem; } /* 12.10: tylne arkusze zostaja tam, gdzie byly przed powiekszeniem paddingu wrapu; podpis ponizej stosu */
/* 14.10: siatka pakietow na /system/ wystawala 8-11 px przy 1024-1280 (kolumny 1fr nie zwezaja sie ponizej min-content karty) */
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards > * { min-width: 0; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; } }

/* ===== z paczki Weroniki (scalone tm-paczka-merge.py) ===== */
/* ── okno „Bezpłatne rozpoznanie” na podstronach (14.10.2026) ── */
.rozp-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rozp-modal[hidden] { display: none; }
.rozp-tlo { position: absolute; inset: 0; background: rgba(31, 27, 22, 0.6); backdrop-filter: blur(3px); }
.rozp-okno { position: relative; width: min(620px, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem); animation: rozp-in .3s var(--ease); }
.rozp-okno h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 0.3rem 2rem 0.6rem 0; }
.rozp-etyk { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-red); }
.rozp-lead { color: var(--text-2); font-size: 0.98rem; margin-bottom: 1.2rem; }
.rozp-okno .form-wrap { margin: 0; padding: 0; border: 0; box-shadow: none; max-width: none; }
.rozp-zamknij { position: absolute; top: 0.7rem; right: 0.8rem; font-size: 1.9rem; line-height: 1; color: var(--text-3); padding: 0.2rem 0.5rem; }
.rozp-zamknij:hover { color: var(--text); }
body.rozp-otwarte { overflow: hidden; }
@keyframes rozp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rozp-okno { animation: none; } }
@media (max-width: 520px) { .rozp-modal { padding: 0; align-items: flex-end; } .rozp-okno { width: 100%; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }

/* telefon: długie przyciski łamią się do drugiej linii zamiast rozpychać kartę poza ekran (14.10.2026, System: karty 423/390) */
@media (max-width: 560px) {
    .btn, .btn-outline { white-space: normal; max-width: 100%; text-align: center; justify-content: center; }
}
/* merge: .rozp-zamknij 44 px (cel dotyku) */
.rozp-zamknij { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ===== z paczki Weroniki (scalone tm-paczka-merge.py) ===== */
/* strony po zapisie (newsletter, raport, nagranie): jedna notka o skrzynce, ten sam tekst i miejsce pod leadem */
.spam-note { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.92rem; color: var(--text-3); max-width: 46ch; }

/* ===== z paczki Weroniki (scalone tm-paczka-merge.py) ===== */
/* ── menu Usługi z podmenu (15.10.2026) ── */
.nav-sub-wrap { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.nav-sub-btn { font-size: 0.7rem; line-height: 1; padding: 0.35rem 0.2rem; color: var(--text-3); background: none; border: 0; cursor: pointer; transition: transform .2s; }
.nav-sub { display: none; position: absolute; top: 100%; left: -1rem; min-width: 240px; padding: 0.9rem 0 0; z-index: 70; }
.nav-sub::before { content: ''; position: absolute; inset: 0.6rem 0 0 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); z-index: -1; }
.nav-sub li a { display: block; padding: 0.6rem 1.1rem; white-space: nowrap; }
.nav-sub li:first-child a { padding-top: 0.75rem; }
.nav-sub li:last-child a { padding-bottom: 0.75rem; }
.nav-sub li a:hover { color: var(--text); background: rgba(107, 115, 85, 0.07); }
.nav-sub-wrap:hover .nav-sub, .nav-sub-wrap:focus-within .nav-sub, .nav-sub-wrap.sub-open .nav-sub { display: block; }
.nav-sub-wrap.sub-open .nav-sub-btn { transform: rotate(180deg); }
.nav-sub-wrap.sub-closed .nav-sub { display: none; }
.nav-sub a[aria-current="page"] { border-bottom: 0; color: var(--text); font-weight: 600; }
@media (max-width: 1080px) {
    .nav-sub-wrap { display: block; }
    .nav-sub-btn { display: none; }
    .nav-sub, .nav-sub-wrap:hover .nav-sub, .nav-sub-wrap.sub-closed .nav-sub { display: block; position: static; min-width: 0; padding: 0; }
    .nav-sub::before { display: none; }
    .nav-links > li:last-child > a.btn { display: flex; justify-content: center; padding: 0.85rem 1.2rem; }
    .nav-links .nav-sub li a, .nav-links .nav-sub li:first-child a, .nav-links .nav-sub li:last-child a { padding: 0.7rem 0 0.7rem 1.1rem; margin-top: 0; font-size: 0.98rem; justify-content: flex-start; border: 0; border-bottom: 1px solid var(--border); background: none; }
}

/* ── Strony podziękowań: jeden wzór (15.10.2026) ──
   Lewa kolumna: nadtytuł „Gotowe · [co]”, nagłówek, jedno zdanie, notka o Spamie.
   Prawa kolumna: karta „Co dalej?” z ponumerowanymi krokami. Pod spodem najwyżej jeden grafitowy pas. */
.next-card h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 1.4rem; text-align: left; }
.next-steps { list-style: none; counter-reset: ns; margin: 0; padding: 0; }
.next-steps li { display: block; counter-increment: ns; position: relative; padding-left: 2.6rem; margin: 0 0 1.1rem; color: var(--text-2); }
.next-steps li:last-child { margin-bottom: 0; }
.next-steps li strong { color: var(--text); }
.next-steps li::before { content: counter(ns); position: absolute; left: 0; top: 0.1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--olive); color: #FFFFFF; font-family: var(--mono); font-size: 0.85rem; line-height: 1.8rem; text-align: center; }
.ty-hero h1 .line { display: block; }
.ty-who { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; color: rgba(251,250,246,.8); font-size: 0.92rem; }
.ty-who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center 18%; border: 2px solid rgba(251,250,246,.6); }

/* ===== 15.10 (Pawel, zrzuty z LIVE): poprawki ukladu; selektory z body, zeby wygrywaly z <style> w stronach z paczki ===== */
/* Uslugi, telefon: przycisk "Porozmawiajmy" przyklejony do zdania nad nim */
@media (max-width: 960px) { body .card .card-body + .btn-outline { margin-top: 1.1rem; } }
/* Uslugi, telefon: plakietka "dostarczono" zaraz pod podpisem, bez pustego pola w arkuszu */
@media (max-width: 560px) {
    body .sheet { padding-bottom: 1.6rem; }
    body .sheet .delivered { position: static; display: inline-flex; margin-top: 1rem; max-width: 100%; }
}
/* Raport, os "co znajdziesz": kolka na srodku czerwonej kreski i na wysokosci etykiety "STR." */
body .r-line li::before { box-sizing: border-box; left: calc(0.45rem + 2px - 1.9rem); top: 0.5625rem; transform: translate(-50%, -50%); }
/* Raport, "Czy to brzmi znajomo?": kolko na wysokosci pierwszej linii, ptaszek na srodku kolka */
body .r-checks li::before { box-sizing: border-box; left: 0.2rem; top: calc(1.15rem + 0.7em - 0.75rem); }
body .r-checks li::after { box-sizing: border-box; left: 0.95rem; top: calc(1.15rem + 0.7em); width: 0.36rem; height: 0.68rem; transform: translate(-50%, -62%) rotate(45deg); }
/* O mnie: przerwa zdjecie -> "Moja historia" byla 220 px (desktop) / 136 px (telefon) */
body .hero-story + section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
body .hero.hero-story { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ===== 15.10 (audyt CXO + techniczny po poprawkach Pawla) ===== */
/* telefon: pieczatka "wyslano" pod arkuszem po prawej, podpis "przykladowa wymiana" pod nia (zaslaniala "NIE" i plakietke) */
@media (max-width: 560px) {
    body .device-wrap { padding-bottom: 9.8rem; }
    body .device-wrap .stamp { bottom: 3.3rem; right: 0.6rem; }
    body .sheet-under, body .sheet-under2 { inset: 1.6rem 1rem 9.8rem; }
    body .issue-hint { left: 0; right: 0; text-align: center; }
}
/* dekoracja trufli: pod trescia sekcji (lezala na CTA, przycisku formularza i linku); na telefonie schowana */
body section > img[src*="trufle-talerz-cut"] { z-index: 0; }
body section > img[src*="trufle-talerz-cut"] ~ .container { position: relative; z-index: 1; }
@media (max-width: 760px) { body section > img[src*="trufle-talerz-cut"] { display: none; } }
/* karty: "Co dostajesz:" w tej samej linii co tekst, nie waska kolumna obok */
/* 20.10: zawezone do list bez klasy (karty „Co dostajesz:”); wczesniej nadpisywalo .next-steps (strony podziekowania) i listy w raporcie */
body .card ul:not([class]) > li { display: block; position: relative; padding-left: 1.6rem; }
body .card ul:not([class]) > li::before { position: absolute; left: 0; top: 0.5rem; }
/* stopka: duzy napis "Trufflemail" mial 416 px w polu 355 px na telefonie */
body .footer-word { font-size: clamp(3.2rem, 16vw, 15rem); }
/* eyebrow w 2 liniach: kropka przy tekscie (byla odklejona o 52 px) */
body .eyebrow { display: inline-block; }
body .eyebrow::before { display: inline-block; vertical-align: middle; margin-right: 0.6rem; position: relative; top: -0.1em; }
/* glowna, telefon: plakietka "Stan na wrzesien 2026" stykala sie z pieczecia */
@media (max-width: 560px) { body .facts-top { gap: 0.8rem; } }
/* polityka prywatnosci, telefon: tabela celow obcinala kolumne "Okres" */
@media (max-width: 560px) { body .doc-table table { font-size: 0.82rem; } body .doc-table th, body .doc-table td { padding: 0.6rem 0.45rem; } }

/* 21.10 (Pawel): /wspolpraca/ dane do faktury jako osobne pola; kod i miasto obok siebie */
body .form-wrap .w-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { body .form-wrap .w-grid2 { grid-template-columns: 1fr; } }
body .doc-print button { background: none; border: 0; padding: 0; font: inherit; color: var(--signal-red); text-decoration: underline; cursor: pointer; }

/* ===== 21.10 (Pawel, zrzut): pieczatka „wyslano · o stalej porze” w calosci na bialej kartce, nie na rogu ===== */
/* desktop/tablet: prawy dolny rog kartki, obok podpisu (podpis ma 7.2rem rezerwy po prawej), nad plakietka „dostarczono” */
@media (min-width: 561px) {
    body .sheet figcaption { min-height: 7.2rem; display: flex; align-items: flex-end; }
    body .device-wrap .stamp { right: 1.2rem; bottom: 7.2rem; }
}
/* telefon: wlasna strefa w dolnej czesci kartki, pod plakietka; podpis „przykladowe tematy” wraca pod kartke */
@media (max-width: 560px) {
    body .sheet { padding-bottom: 8.2rem; }
    body .device-wrap { padding-bottom: 4.9rem; }
    body .sheet-under, body .sheet-under2 { inset: 1.6rem 1rem 4.9rem; }
    body .device-wrap .stamp { right: 1.6rem; bottom: 5.9rem; }
}

/* 21.10 (Pawel, zrzut z iPhone): znak ☰ z fontu systemowego siedzi nizej niz napis „Trufflemail”; trzy kreski rysowane w CSS, wysrodkowane w przycisku */
body .nav-toggle { position: relative; font-size: 0; color: var(--text); }
body .nav-toggle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }

/* 21.10 (Pawel, zrzuty z iPhone): znaczniki list na srodku wysokosci calego tekstu po prawej, nie pierwszej linii */
/* strony podziekowan „Co dalej?”: kolko z numerem na srodku punktu, cyfra na srodku kolka (flex zamiast line-height, ktory w SF Mono podnosil cyfre o 2-3 px) */
body .next-steps li::before { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; line-height: 1; }
/* raport „Czy to brzmi znajomo?”: kolko i ptaszek na srodku wysokosci punktu (padding gory i dolu rowne, wiec 50% = srodek tekstu) */
body .r-checks li::before { top: 50%; transform: translateY(-50%); }
body .r-checks li::after { top: 50%; }
/* to samo dla numerowanych plakietek na Usługach, Współpracy („Zacznijmy od Twojej kancelarii”) i Newsletterze („po zapisie”) */
body .po-kliknieciu li::before, body .po-zapisie li::before { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; line-height: 1; }

/* 21.10 (Pawel, iPhone): „Odbieram raport” na /materialy/ i /raport/ wymagal dwoch tapniec. iOS Safari traktuje pierwsze dotkniecie
   jako najechanie, gdy element albo jego rodzic ma efekt :hover, ktory zmienia uklad (uniesienie przycisku i karty, strzalka +3 px).
   Na ekranach dotykowych efekty najechania sa wylaczone; :active zostaje. */
@media (hover: none) {
    body .btn:hover, body .btn-outline:hover, body .btn-ghost:hover { transform: none; box-shadow: none; }
    body .btn:hover .arr, body .wedo-card:hover .go { transform: none; }
    body .card:hover, body .review:hover, body .wedo-card:hover { transform: none; box-shadow: none; }
    body .seal:hover .seal-spin { animation-play-state: running; }
}
/* 27.10 pieczatka w kartce: plansza Weroniki (kartka 400 px na srodku) - pieczatka jest teraz w figure.sheet,
   pozycja liczona od kartki (pomiar LIVE 21.10: 18 px od prawej, 46 px od dolu; telefon 17 i 13 px) */
body .device-wrap .sheet > .stamp { right: 1.1rem; bottom: 2.9rem; }
@media (max-width: 560px) { body .device-wrap .sheet > .stamp { right: 1.05rem; bottom: 0.8rem; } }
/* podpis „przykladowe tematy” pod plakietka, nie na niej (plansza Weroniki ma padding z !important) */
body .device-wrap.hi { padding-bottom: 5.4rem !important; }

/* 01.11 (audyt po paczce 30.10): dwa kolory, ktore przestaly pasowac po przebudowie 27.10.
   1) Uslugi, zielona sekcja #system: akapit „Wolisz, zeby ktos najpierw spojrzal..." i link „Zobacz Wspolprace 1:1" mialy
      inline color var(--text-3)/var(--text-2) (ciemny na ciemnym, kontrast 1:1, link niewidoczny).
   2) Glowna, pasek faktow: strzalka w „Umawiam rozpoznanie" miala kolor na ciemne tlo (--accent-ondark), a pasek jest jasny (1,29:1). */
body .sec-deep p.center[style] { color: rgba(251, 250, 246, 0.78) !important; }
body .sec-deep p.center a[style] { color: #FBFAF6 !important; text-decoration: underline; text-underline-offset: 3px; }
body .facts-link .arr { color: inherit !important; }