/* ==========================================================================
   WK Digital — styl „Charakter" (29.09.2026)
   Ładowany PO styles.css, v3.css i premium.css (zastępuje premium-ruch.*).
   Ciepły papier + grafit + indygo z logo + żółty „zakreślacz" jako podpis.
   Zwykły kursor systemowy — żadnych własnych kursorów.
   ========================================================================== */

@import url(/fonts/ch/fonts.css);

:root, [data-theme="dark"], [data-theme="light"] {
  --c-papier: #f4f0e8;
  --c-papier-2: #ebe5d9;
  --c-bialy: #fffdf9;
  --c-ink: #16140f;
  --c-ink-2: #3b3830;
  --c-ink-3: #6d685c;
  --c-linia: rgba(22, 20, 15, .12);
  --c-linia-2: rgba(22, 20, 15, .22);
  --c-indygo: #2f45e0;
  --c-indygo-2: #2334b8;
  --c-zolty: #ffd23f;
  --c-zolty-2: #ffe27a;
  --c-noc: #16140f;
  --c-wa: #1fa855;
  --c-ease: cubic-bezier(.2, .7, .2, 1);
  --c-twardy: 5px 5px 0 var(--c-ink);

  /* przejęcie zmiennych warstwy premium */
  --p-papier: var(--c-papier); --p-papier-2: var(--c-papier-2); --p-bialy: var(--c-bialy);
  --p-ink: var(--c-ink); --p-ink-2: var(--c-ink-2); --p-ink-3: var(--c-ink-3);
  --p-linia: var(--c-linia); --p-linia-2: var(--c-linia-2);
  --p-akcent: var(--c-indygo); --p-akcent-2: var(--c-indygo-2); --p-noc: var(--c-noc); --p-noc-2: #211e17;
  --p-na-nocy: #f1ece2; --p-na-nocy-2: #b3ab9b;
  --bg-0: var(--c-papier); --bg-1: var(--c-bialy); --bg-2: var(--c-papier-2);
  --surface: var(--c-bialy); --surface-2: var(--c-papier);
  --text: var(--c-ink-2); --text-strong: var(--c-ink); --muted: var(--c-ink-3);
  --accent-1: var(--c-indygo); --accent-2: var(--c-indygo); --accent-3: var(--c-indygo);
}

html, body { background: var(--c-papier) !important; color: var(--c-ink-2); }
body { font-family: 'Bricolage Grotesque', 'PremSans', system-ui, sans-serif !important; font-optical-sizing: auto; }
/* delikatne ziarno papieru */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(22, 20, 15, .06) 1px, transparent 1px); background-size: 26px 26px; }
h1, h2, h3, h4, .brand-name { font-family: 'Bricolage Grotesque', 'PremSans', sans-serif !important; color: var(--c-ink); }
h1, h2 { font-weight: 800 !important; letter-spacing: -.04em !important; }
h3 { font-weight: 700 !important; letter-spacing: -.02em; }
p { color: var(--c-ink-2); }
::selection { background: var(--c-zolty); color: var(--c-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-indygo) !important; outline-offset: 3px; }
/* zwykły kursor — na wszelki wypadek, gdyby w pamięci podręcznej została stara reguła */
html, body { cursor: auto !important; }
a, button, summary, label[for], .demo-card, .work-media { cursor: pointer !important; }
input, textarea { cursor: text !important; }
.pr-kursor, .pr-kropka, .pr-intro { display: none !important; }

/* ---------- podpis: żółty zakreślacz zamiast pochyłego szeryfu ---------- */
.grad-text {
  font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; font-size: 1em !important;
  letter-spacing: inherit !important; color: var(--c-ink) !important; -webkit-text-fill-color: currentColor !important;
  background: linear-gradient(100deg, transparent .15em, var(--c-zolty) .15em, var(--c-zolty) calc(100% - .12em), transparent calc(100% - .12em)) 0 88% / 100% .42em no-repeat !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em !important; display: inline !important;
}
.section-ai .grad-text, .cta-band .grad-text, .contact-info .grad-text { color: #fff !important;
  background-image: linear-gradient(100deg, transparent .15em, var(--c-indygo) .15em, var(--c-indygo) calc(100% - .12em), transparent calc(100% - .12em)) !important; }

/* ---------- odręczne dopiski ---------- */
.ch-reka { font-family: 'Caveat', cursive !important; font-weight: 700; letter-spacing: 0; line-height: 1; }

/* ---------- nawigacja ---------- */
.navbar .nav-container { background: rgba(255, 253, 249, .86) !important; border: 1.5px solid var(--c-ink) !important;
  box-shadow: 3px 3px 0 var(--c-ink) !important; }
.brand-name { font-weight: 800 !important; }
.brand-dot { color: var(--c-indygo) !important; }
.theme-toggle { display: none !important; }
.nav-menu a:hover, .nav-menu a.active { background: var(--c-zolty) !important; color: var(--c-ink) !important; }
.lang-btn[aria-current="true"], .lang-btn[aria-pressed="true"] { background: var(--c-ink) !important; color: #fff !important; }
.nav-portfolio { border: 1.5px solid var(--c-ink) !important; }
.nav-portfolio:hover { background: var(--c-zolty) !important; }

/* ---------- przyciski: „naklejka" z twardym cieniem ---------- */
.btn { border-radius: 14px !important; font-weight: 700 !important; }
.btn-primary, .nav-cta {
  background: var(--c-indygo) !important; color: #fff !important; border: 2px solid var(--c-ink) !important;
  box-shadow: 4px 4px 0 var(--c-ink) !important; border-radius: 14px !important;
  transition: transform .2s var(--c-ease), box-shadow .2s var(--c-ease), background .2s !important;
}
.nav-cta { box-shadow: 3px 3px 0 var(--c-ink) !important; }
.btn-primary:hover, .nav-cta:hover { background: var(--c-indygo-2) !important; transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 var(--c-ink) !important; }
.btn-primary:active, .nav-cta:active { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0 var(--c-ink) !important; }
.btn-whatsapp { background: var(--c-bialy) !important; color: var(--c-ink) !important; border: 2px solid var(--c-ink) !important; border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--c-wa) !important; transition: transform .2s var(--c-ease), box-shadow .2s var(--c-ease) !important; }
.btn-whatsapp:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 var(--c-wa) !important; border-color: var(--c-ink) !important; }

/* ---------- HERO ---------- */
.hero-bg::before { background: radial-gradient(circle, rgba(255, 210, 63, .35), transparent 62%) !important; }
.hero-bg::after { opacity: .35 !important; }
.hero h1 { font-weight: 800 !important; letter-spacing: -.05em !important; line-height: .98 !important; }
.hero h1 .grad-text { font-size: 1em !important; }
.hero-tag { background: var(--c-ink) !important; color: #fff !important; border: 0 !important; }
.hero-tag-dot { background: var(--c-zolty) !important; box-shadow: 0 0 0 4px rgba(255, 210, 63, .25) !important; }
.ch-hej { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 36px); color: var(--c-indygo); transform: rotate(-2deg); transform-origin: left center; }
.ch-hej img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-ink); box-shadow: 2px 2px 0 var(--c-ink); flex: none; }
.trust-row li { border: 1.5px solid var(--c-ink) !important; background: var(--c-bialy) !important; color: var(--c-ink) !important; }
.tax-badge { border: 1.5px dashed var(--c-linia-2) !important; background: transparent !important; }

/* portret jak zdjęcie przypięte taśmą */
.hero-visual::before { background: var(--c-zolty) !important; transform: rotate(-5deg) !important; box-shadow: none !important; border: 2px solid var(--c-ink); }
.hero-portrait { background: var(--c-bialy) !important; border: 2px solid var(--c-ink) !important; border-radius: 6px !important; padding: 12px 12px 0 !important;
  box-shadow: 8px 8px 0 var(--c-ink) !important; transform: rotate(2deg); }
.hero-portrait img { border-radius: 2px !important; }
.hero-portrait::before { content: ''; position: absolute; z-index: 3; top: -16px; left: 50%; width: 120px; height: 32px; margin-left: -60px; transform: rotate(-4deg);
  background: rgba(255, 226, 122, .85); border-left: 2px dashed rgba(22, 20, 15, .15); border-right: 2px dashed rgba(22, 20, 15, .15); }
.float-card, .portrait-tag { background: var(--c-bialy) !important; border: 2px solid var(--c-ink) !important; border-radius: 12px !important; box-shadow: 3px 3px 0 var(--c-ink) !important; backdrop-filter: none !important; }
.float-card .emoji { color: var(--c-indygo) !important; }
.ch-notka { position: absolute; z-index: 4; left: -4%; bottom: -74px; margin: 0; font-size: clamp(24px, 2.4vw, 32px); color: var(--c-ink); transform: rotate(-4deg); pointer-events: none; display: flex; align-items: flex-end; gap: 6px; white-space: nowrap; }
.ch-notka svg { order: -1; width: 70px; height: 40px; color: var(--c-indygo); transform: scale(-1, -1); }
@media (max-width: 900px) { .ch-notka { display: none; } }

/* ---------- pas „jesteś we właściwym miejscu" ---------- */
.ch-dlakogo { padding: clamp(60px, 8vw, 110px) 0 clamp(20px, 4vw, 40px); position: relative; }
.ch-dlakogo .ch-wrap { width: min(1200px, 100% - 40px); margin: 0 auto; display: grid; grid-template-columns: .9fr 1.3fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.ch-dlakogo h2 { font-size: clamp(34px, 4.6vw, 60px) !important; line-height: 1 !important; margin: 0 0 18px !important; }
.ch-dlakogo .grad-text { display: inline !important; white-space: normal !important; }
.ch-dlakogo .ch-podpis { font-size: clamp(24px, 2.6vw, 32px); color: var(--c-indygo); margin: 18px 0 0; transform: rotate(-2deg); display: inline-block; }
.ch-dlakogo .ch-intro { font-size: 18px; line-height: 1.6; margin: 0; max-width: 460px; }
.ch-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ch-lista li { position: relative; background: var(--c-bialy); border: 2px solid var(--c-ink); border-radius: 16px; padding: 22px 22px 22px 66px; font-size: 16.5px; line-height: 1.5; color: var(--c-ink-2);
  box-shadow: 4px 4px 0 var(--c-ink); transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease); }
.ch-lista li:nth-child(2) { transform: rotate(.6deg); }
.ch-lista li:nth-child(3) { transform: rotate(-.6deg); }
.ch-lista li:hover { transform: translate(-2px, -2px) rotate(0); box-shadow: 7px 7px 0 var(--c-indygo); }
.ch-lista li strong { display: block; color: var(--c-ink); font-size: 18px; margin-bottom: 4px; letter-spacing: -.02em; }
.ch-lista li::before { content: '✓'; position: absolute; left: 20px; top: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-zolty); border: 2px solid var(--c-ink); font-weight: 800; color: var(--c-ink); font-size: 16px; }
@media (max-width: 900px) {
  .ch-dlakogo .ch-wrap { grid-template-columns: 1fr; }
  .ch-lista { grid-template-columns: 1fr; }
  .ch-lista li:nth-child(n) { transform: none; }
}
@media (max-width: 600px) { .ch-dlakogo .ch-wrap { width: calc(100% - 32px); } .ch-lista li { padding: 18px 18px 18px 60px; font-size: 15.5px; } }

/* ---------- taśma marek: żółta, lekko przechylona ---------- */
.marquee { background: var(--c-zolty) !important; border-top: 2px solid var(--c-ink) !important; border-bottom: 2px solid var(--c-ink) !important; transform: rotate(-1deg) !important; margin: 30px -10px !important; }
.marquee-track span { color: var(--c-ink) !important; font-weight: 800 !important; font-size: 1.05em; }
.marquee-track span::after { background: var(--c-ink) !important; opacity: 1; }

/* ---------- nagłówki sekcji ---------- */
.eyebrow { color: var(--c-ink) !important; font-family: 'Caveat', cursive !important; font-size: 26px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 700 !important; transform: rotate(-2deg); }
.eyebrow::before { width: 26px !important; height: 3px !important; background: var(--c-zolty) !important; border-radius: 3px; }
.section-head h2 { font-size: clamp(34px, 5vw, 64px) !important; line-height: 1.02 !important; }
.section-head.light .eyebrow, .section-ai .eyebrow, .cta-band .eyebrow, .contact-info .eyebrow { color: var(--c-zolty) !important; }

/* ---------- karty ---------- */
.service-card, .card, .glossary-item, .review, .demo-card, .about-card, .work {
  background: var(--c-bialy) !important; border: 2px solid var(--c-ink) !important; border-radius: 18px !important; box-shadow: 4px 4px 0 var(--c-ink) !important;
  transition: transform .25s var(--c-ease), box-shadow .25s var(--c-ease) !important;
}
.service-card:hover, .glossary-item:hover, .review:hover, .demo-card:hover, .work:hover { transform: translate(-3px, -3px) !important; box-shadow: 8px 8px 0 var(--c-indygo) !important; border-color: var(--c-ink) !important; }
.service-card::after { background: var(--c-zolty) !important; height: 6px !important; }
.icon-wrap { background: var(--c-zolty) !important; border: 2px solid var(--c-ink) !important; color: var(--c-ink) !important; }
.service-card:hover .icon-wrap { background: var(--c-indygo) !important; color: #fff !important; }
.glossary-item[open] { box-shadow: 6px 6px 0 var(--c-zolty), 6px 6px 0 2px var(--c-ink) !important; }
.g-arrow { color: var(--c-ink) !important; }

/* ---------- ciemne panele: ciepły grafit + żółć ---------- */
.section-ai, .cta-band { background: var(--c-noc) !important; }
.section-ai::before, .cta-band::before { background: radial-gradient(circle, rgba(255, 210, 63, .16), transparent 62%) !important; }
.section-ai .section-head p, .cta-band p { color: #b3ab9b !important; }
.benefit { background: rgba(255, 255, 255, .03) !important; border: 1.5px solid rgba(255, 255, 255, .14) !important; border-radius: 16px !important; }
.benefit:hover { border-color: var(--c-zolty) !important; background: rgba(255, 210, 63, .05) !important; }
.benefit-num { font-family: 'Caveat', cursive !important; font-style: normal !important; color: var(--c-zolty) !important; font-size: 44px !important; font-weight: 700 !important; }
.benefit p { color: #b3ab9b !important; }
.cta-band .btn-primary { background: var(--c-zolty) !important; color: var(--c-ink) !important; box-shadow: 4px 4px 0 #fff !important; border-color: var(--c-zolty) !important; }
.cta-band .btn-primary:hover { background: #fff !important; }
.cta-band .btn-whatsapp { background: transparent !important; color: #fff !important; border-color: #fff !important; }

/* ---------- O mnie ---------- */
.section-about { background: var(--c-papier-2) !important; border-top: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); }
.photo-frame { border: 2px solid var(--c-ink) !important; box-shadow: 6px 6px 0 var(--c-zolty), 6px 6px 0 2px var(--c-ink) !important; background: var(--c-bialy) !important; }
.photo-badge { background: var(--c-zolty) !important; color: var(--c-ink) !important; border: 2px solid var(--c-ink) !important; }
.ribbon { background: var(--c-indygo) !important; font-family: 'Caveat', cursive !important; font-size: 24px !important; font-weight: 700 !important; }
.about-card-tag { font-family: 'Caveat', cursive !important; font-size: 24px !important; color: var(--c-ink) !important; }
.about-list li { border: 1.5px solid var(--c-ink) !important; background: var(--c-bialy) !important; border-radius: 12px !important; }
.about-meta > div { border: 1.5px dashed var(--c-linia-2) !important; }
.stats .stat, .rating-strip { background: var(--c-bialy) !important; border: 2px solid var(--c-ink) !important; border-radius: 14px !important; box-shadow: 3px 3px 0 var(--c-ink) !important; }

/* ---------- realizacje, dema ---------- */
.work-media { border: 1.5px solid var(--c-ink); border-radius: 12px !important; }
.work-badge-live { border: 1.5px solid var(--c-ink) !important; }
.work-tags span { background: var(--c-papier) !important; border: 1px solid var(--c-linia-2) !important; color: var(--c-ink-2) !important; }
.work-link { text-decoration-color: var(--c-zolty) !important; text-decoration-thickness: 4px !important; text-underline-offset: 3px !important; }
.work-link:hover { color: var(--c-indygo) !important; }
.demo-cat-icon { background: var(--c-zolty) !important; color: var(--c-ink) !important; border: 2px solid var(--c-ink) !important; }
.demo-thumb { border: 1.5px solid var(--c-ink); border-radius: 12px !important; }
.demo-open { color: var(--c-indygo) !important; }
.price-note-band { border: 2px solid var(--c-ink) !important; box-shadow: 4px 4px 0 var(--c-zolty), 4px 4px 0 2px var(--c-ink) !important; background: var(--c-bialy) !important; }

/* ---------- opinie ---------- */
.review-stars, .stars { color: #e0a800 !important; }
.review:nth-child(3n+1) { transform: rotate(-.5deg); }
.review:nth-child(3n+2) { transform: rotate(.4deg); }
.avatar { background: var(--c-zolty) !important; border: 2px solid var(--c-ink) !important; color: var(--c-ink) !important; }

/* ---------- kontakt ---------- */
.contact-info { background: var(--c-noc) !important; border: 2px solid var(--c-ink) !important; box-shadow: 6px 6px 0 var(--c-zolty) !important; border-radius: 20px !important; }
.contact-info::before { background: radial-gradient(circle, rgba(255, 210, 63, .18), transparent 62%) !important; }
.ci-icon { color: var(--c-zolty) !important; }
.contact-form { background: var(--c-bialy) !important; border: 2px solid var(--c-ink) !important; box-shadow: 6px 6px 0 var(--c-ink) !important; border-radius: 20px !important; }
.contact-form h3 { font-size: 28px !important; }
.field input, .field textarea, .field select { border: 1.5px solid var(--c-ink) !important; background: var(--c-papier) !important; border-radius: 10px !important; }
.field input:focus, .field textarea:focus { background: #fff !important; border-color: var(--c-indygo) !important; box-shadow: 3px 3px 0 var(--c-indygo) !important; }

/* ---------- stopka ---------- */
.pf { background: var(--c-noc) !important; }
.pf-glow { background: radial-gradient(900px 520px at 85% -10%, rgba(255, 210, 63, .14), transparent 60%) !important; }
.pf-cta h2 em { font-family: 'Caveat', cursive !important; font-style: normal !important; font-weight: 700 !important; color: var(--c-zolty) !important; font-size: 1.15em; letter-spacing: 0 !important; }
.pf-kicker i { background: var(--c-zolty) !important; }
.pf-btn-1 { background: var(--c-zolty) !important; color: var(--c-ink) !important; border-radius: 14px !important; box-shadow: 4px 4px 0 #fff !important; }
.pf-btn-1:hover { background: #fff !important; }
.pf-btn-2 { border-radius: 14px !important; }
.pf h4 { color: var(--c-zolty) !important; }
.pf ul a::after { background: var(--c-zolty) !important; }
.pf-brand b span { color: var(--c-zolty) !important; }
.pf-mail:hover { color: var(--c-zolty) !important; border-color: var(--c-zolty) !important; }
.pf-znak em { font-family: 'Caveat', cursive !important; font-style: normal !important; font-weight: 700 !important;
  background: linear-gradient(180deg, rgba(255, 210, 63, .5), rgba(255, 210, 63, .04) 85%) !important; -webkit-background-clip: text !important; background-clip: text !important; }

.p-postep { background: var(--c-zolty) !important; height: 4px !important; }
.fab-whatsapp { border: 2px solid var(--c-ink) !important; box-shadow: 3px 3px 0 var(--c-ink) !important; }

/* ---------- pojawianie się przy przewijaniu (charakter.js) ---------- */
.ch-js .ch-rv { opacity: 0; translate: 0 26px; transition: opacity .7s var(--c-ease), translate .7s var(--c-ease); }
.ch-js .ch-rv.ch-on { opacity: 1; translate: 0 0; }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  .hero-portrait { transform: rotate(1.5deg); box-shadow: 6px 6px 0 var(--c-ink) !important; }
  .review:nth-child(n) { transform: none; }
}
@media (max-width: 600px) {
  .section-head h2 { font-size: clamp(30px, 8.6vw, 40px) !important; }
  .hero h1 { letter-spacing: -.045em !important; }
  .ch-hej { font-size: 26px; }
  .ch-hej img { width: 40px; height: 40px; }
  .marquee { margin: 20px -6px !important; }
  .btn-primary, .btn-whatsapp { box-shadow: 3px 3px 0 var(--c-ink) !important; }
  .btn-whatsapp { box-shadow: 3px 3px 0 var(--c-wa) !important; }
  .service-card, .card, .glossary-item, .review, .demo-card, .work { box-shadow: 3px 3px 0 var(--c-ink) !important; }
  .contact-form, .contact-info { box-shadow: 4px 4px 0 var(--c-ink) !important; }
  .contact-info { box-shadow: 4px 4px 0 var(--c-zolty) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-js .ch-rv { opacity: 1; translate: none; transition: none; }
  .btn, .service-card, .work, .review, .demo-card, .ch-lista li { transition: none !important; }
}
.g-arrow { background: var(--c-zolty) !important; color: var(--c-ink) !important; border: 1.5px solid var(--c-ink) !important; }
.contact-form::before { background: var(--c-zolty) !important; }

/* ---------- menu (panel z hamburgera) — jasny panel, 28.10.2026 ----------
   styles.css dawał ciemne tło panelu, a premium.css ciemne napisy → nic nie było widać */
.nav-menu {
  background: var(--c-bialy) !important;
  border: 1.5px solid var(--c-ink) !important;
  box-shadow: 4px 4px 0 var(--c-ink), 0 24px 50px -20px rgba(22, 20, 15, .35) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.nav-menu a { color: var(--c-ink) !important; border-radius: 12px !important; }
.nav-menu a::before { background: var(--c-indygo) !important; opacity: .55; }
.nav-menu a:hover, .nav-menu a:focus, .nav-menu a.active { background: var(--c-zolty) !important; color: var(--c-ink) !important; }
.nav-menu a + a { border-top: 1px solid var(--c-linia); }
.nav-menu .nav-cta { color: #fff !important; }