/* Wspólny styl podstron (jasny domyślnie, ciemny jako tryb): szklany nagłówek, arkusze sekcji, karty, hero, mikrointerakcje */
:root { --sp-ease: cubic-bezier(.2,.7,.2,1);
  --sp-head-bg: rgba(255,255,255,.80); --sp-head-line: rgba(43,10,71,.09);
  --sp-sheet-1: #ffffff; --sp-sheet-2: #fdf8fb; --sp-alt-1: #fbf1f7; --sp-alt-2: #f7e9f2;
  --sp-sheet-shadow: 0 -20px 44px -20px rgba(43,10,71,.28), 0 -1px 0 rgba(255,255,255,.95) inset;
  --sp-card-bg: linear-gradient(160deg, #ffffff, #fcf3f8); --sp-card-line: rgba(43,10,71,.10); --sp-card-glare: rgba(228,0,124,.10);
  --sp-card-shadow: 0 1px 0 #fff inset, 0 2px 4px rgba(43,10,71,.06), 0 18px 36px -16px rgba(43,10,71,.26), 0 46px 80px -52px rgba(138,24,176,.36);
  --sp-body-glow: radial-gradient(1000px 560px at 90% -6%, rgba(228,0,124,.06), transparent 62%), radial-gradient(800px 520px at -6% 45%, rgba(138,24,176,.06), transparent 62%), #fff; }
:root[data-theme="dark"] {
  --sp-head-bg: rgba(18,4,30,.66); --sp-head-line: rgba(255,255,255,.08);
  --sp-sheet-1: #170722; --sp-sheet-2: #12041e; --sp-alt-1: #1d0a2e; --sp-alt-2: #170722;
  --sp-sheet-shadow: 0 -22px 50px -18px rgba(0,0,0,.65), 0 -1px 0 rgba(255,255,255,.10) inset;
  --sp-card-bg: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); --sp-card-line: rgba(255,255,255,.12); --sp-card-glare: rgba(255,255,255,.12);
  --sp-card-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 2px 4px rgba(0,0,0,.25), 0 18px 36px -14px rgba(0,0,0,.6), 0 46px 80px -44px rgba(138,24,176,.5);
  --sp-body-glow: radial-gradient(1000px 560px at 90% -6%, rgba(228,0,124,.18), transparent 62%), radial-gradient(800px 520px at -6% 45%, rgba(138,24,176,.22), transparent 62%), #12041e; }
.sr-only { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

html { background: var(--bg); }
body { background: transparent; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: var(--sp-body-glow); }

/* ===== nagłówek jak szkło ===== */
header { background: var(--sp-head-bg) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--sp-head-line); }

/* ===== hero podstron: warstwy, siatka, linia ===== */
.subhero, .khero { position:relative; isolation:isolate; overflow:hidden; padding-bottom: 34px; }
.subhero::before, .khero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); background-size:30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 22% 45%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 70% 90% at 22% 45%, #000 15%, transparent 78%); }
.subhero::after, .khero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3; pointer-events:none; background: linear-gradient(90deg, transparent, var(--magenta), var(--lime), transparent); opacity:.8; }
.subhero > .wrap, .khero > .wrap, .khero .wrap { position:relative; z-index:2; }
.subhero h1, .khero h1 { letter-spacing:-.025em; }

/* ===== arkusze: sekcje nachodzą na siebie jak warstwy papieru ===== */
main > section.band, main > section#kontakt { position:relative; z-index:3; border-radius:34px 34px 0 0; margin-top:-34px; padding-top: calc(clamp(56px,9vw,104px) + 34px); box-shadow: var(--sp-sheet-shadow);
  background: linear-gradient(var(--sp-sheet-1), var(--sp-sheet-2)); }
main > section.band.alt { background: linear-gradient(var(--sp-alt-1), var(--sp-alt-2)); }
main > section.band[style*="background"] { background-image: none; }

/* ===== karty ===== */
.card, .case, .post, .bx-type, .bx-step, .tm { background:
  radial-gradient(420px circle at var(--gx, 30%) var(--gy, 0%), var(--sp-card-glare), transparent 45%), var(--sp-card-bg) !important;
  border:1px solid var(--sp-card-line) !important; box-shadow: var(--sp-card-shadow) !important; }
.card:hover, .case:hover, .post:hover, .bx-type:hover, .bx-step:hover { border-color: rgba(228,0,124,.5) !important; }
[data-tilt] { will-change: transform; }
@media (hover:none) { [data-tilt] { transform:none !important; } }

/* ===== kinetyczne nagłówki sekcji ===== */
.kin .kw { display:inline-block; white-space:nowrap; } .kin .kc { display:inline-block; }
html.kin-on h2.kin .kw { overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
html.kin-on h2.kin .kc { transform: translateY(115%); transition: transform .85s var(--sp-ease); transition-delay: calc(var(--ci) * 16ms); }
html.kin-on h2.kin.k-in .kc { transform:none; }
html.kin-on h1.kin .kc { display:inline-block; transform: translateY(70%); opacity:0; transition: transform .9s var(--sp-ease), opacity .6s ease; transition-delay: calc(var(--ci) * 20ms + .15s); }
html.kin-on h1.kin.k-in .kc { transform:none; opacity:1; }

/* ===== mikrointerakcje ===== */
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn .rip { position:absolute; z-index:-1; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; pointer-events:none; background: rgba(255,255,255,.55); transform: scale(0); animation: sp-rip .75s ease-out forwards; }
.btn.lime .rip { background: rgba(228,0,124,.35); }
@keyframes sp-rip { to { transform: scale(26); opacity:0; } }
@media (hover:hover) and (pointer:fine) {
  .cur-ring { display:grid; place-items:center; }
  .cur-ring[data-shape="link"] { width:20px; height:20px; background: var(--magenta); border-color: transparent; opacity:1; }
  .cur-ring[data-shape="btn"] { width:70px; height:70px; background: rgba(228,0,124,.14); opacity:1; }
  body.cur-view .cur-dot { opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  html.kin-on h2.kin .kc, html.kin-on h1.kin .kc { transform:none !important; opacity:1 !important; transition:none; } .btn .rip { display:none; }
}
.post-by { grid-column:1 / -1; margin:8px 0 0; color:var(--text-muted); font-size:var(--step--1); }

/* ===== zaznaczanie tekstu w kolorze marki + animowany marker pod słowami nagłówka ===== */
::selection { background: #cbe800; color: #2b0a47; }
::-moz-selection { background: #cbe800; color: #2b0a47; }
.hl { background: linear-gradient(#cbe800, #cbe800) no-repeat left center / 0% 100%; padding: 0 .14em; margin: 0 -.14em; border-radius: 3px;
  transition: background-size .85s cubic-bezier(.7,0,.2,1) var(--hd, 0s), color .25s ease calc(var(--hd, 0s) + .3s); }
.hl-on .hl, .k-in .hl { background-size: 100% 100%; }
.hl-on .hl .kc, .k-in .hl .kc, h1.kin.hl-on em .kc { color: #2b0a47 !important; -webkit-text-fill-color: #2b0a47; }
@media (prefers-reduced-motion: reduce) { .hl { transition:none; background-size:100% 100%; } .hl .kc { color:#2b0a47 !important; } }

/* maska liter: zapas z każdej strony, żeby nie ucinać akcentów, ogonków i kursywy */
html.kin-on .sec-head h2.kin .kw, html.kin-on .thesis-lead.kin .kw, html.kin-on h2.kin .kw { padding: .22em .14em .22em .14em !important; margin: -.22em -.14em -.22em -.14em !important; overflow: hidden; }
.thesis-lead, .sc .thesis-lead, .sc .sec-head h2 { font-style: normal !important; }
.sc .thesis-lead { line-height: 1.02; }