/* BAZA WSPÓLNA DLA WSZYSTKICH WARIANTÓW — wartości 1:1 z WZORNIK_KAFLE.html. NIE REDEFINIUJ. */
:root{
  --paper:#FAF7EF; --paper-2:#F1EBDD; --paper-3:#E4DCC9; --card:#FFFFFF; --hair:#D9D2C2;
  --ink:#0E0E0E; --ink-2:#151515; --kreska:#2A2A2A; --grey:#5B5548; --grey-4:#A39C8E;
  --napis:#FAF7EF; --napis-cichy:#A39C8E; --stol:#0E0E0E; --stol-2:#151515; --stol-3:#1B1B1B;
  --sun:#FCD609; --sun-2:#FEF3B0; --sun-4:#FDE04A; --sun-6:#E5C000; --olive:#4A4009;
  --brick:#A32B1B; --brick-bg:#FBEDEA;
  --f-display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --f-body:'Mulish',system-ui,-apple-system,sans-serif;
  --f-script:'Kaushan Script','Brush Script MT',cursive;
  --radius-tray:28px; --radius-tray-sm:24px; --radius-core:22px; --radius-core-sm:19px;
  --tray-pad:6px; --tray-pad-sm:5px; --tray-fill:rgba(14,14,14,.045);
  --border-w-thick:3px; --blur-island:18px;
  --shadow-tray-sm:0 10px 26px -14px rgba(30,24,5,.14);
  --shadow-tray-md:0 18px 44px -18px rgba(30,24,5,.16),0 4px 14px -8px rgba(30,24,5,.08);
  --shadow-tray-lg:0 30px 70px -22px rgba(30,24,5,.22),0 8px 24px -12px rgba(30,24,5,.10);
  --shadow-tray-hover:0 36px 80px -24px rgba(30,24,5,.26),0 10px 28px -14px rgba(30,24,5,.12);
  --shadow-inner-lit:inset 0 1.5px 1px rgba(255,255,255,.95);
  --shadow-inner-tray:inset 0 1px 2px rgba(14,14,14,.045);
  --shadow-hard:4px 4px 0 var(--ink); --shadow-hard-h:6px 6px 0 var(--ink);
  --dur-dotyk:120ms; --dur-mikro:200ms; --dur-krotki:240ms; --dur-swap:400ms;
  --dur-warstwa:380ms; --dur-lift:550ms; --dur-enter:720ms; --dur-ceremonia:900ms;
  --ease-out-mocny:cubic-bezier(.23,1,.32,1); --ease-inout-mocny:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-tray:cubic-bezier(.32,.72,0,1);

  --stagger-step:78ms; --dur-odsloniecie:620ms;
}
/* stempel i pigułka — 1:1 ze wzornika */
.stempel{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:2px solid var(--ink);border-radius:14px;background:var(--sun);color:var(--ink);cursor:pointer;font-weight:800;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;box-shadow:var(--shadow-hard);text-decoration:none;transition:transform 320ms var(--ease-spring),box-shadow 320ms var(--ease-spring)}
@media(hover:hover) and (pointer:fine){.stempel:hover{transform:translate(-1px,-2px);box-shadow:var(--shadow-hard-h);transition:transform 200ms var(--ease-out-mocny),box-shadow 200ms var(--ease-out-mocny)}}
.stempel:active{transform:translate(3px,3px) rotate(-.5deg);box-shadow:1px 1px 0 var(--ink);transition:transform 90ms var(--ease-out-mocny),box-shadow 90ms var(--ease-out-mocny)}
.pigulka{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:2px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font-weight:800;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;padding:0 20px;cursor:pointer;width:fit-content;text-decoration:none;transition:transform 200ms var(--ease-out-mocny),box-shadow 200ms var(--ease-out-mocny)}
.pigulka>*{position:relative;z-index:1}
.pigulka::before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:240%;aspect-ratio:1;translate:-50% -50%;border-radius:999px;background:var(--sun-2);transform:scale(0);opacity:0;transition:transform 420ms var(--ease-out-mocny),opacity 260ms var(--ease-out-mocny)}
@media(hover:hover) and (pointer:fine){.pigulka:hover{transform:translateY(-1px)}.pigulka:hover::before{transform:scale(1);opacity:1}}
.pigulka:active{transform:scale(.97);transition-duration:110ms}
.pigulka.slonce{background:var(--sun)}
.pigulka.slonce::before{background:var(--sun-4)}
.pigulka.cicha{border-width:1px;border-color:rgba(14,14,14,.16)}

/* kafel */
.kafel{background:var(--tray-fill);padding:var(--tray-pad);border-radius:var(--radius-tray);box-shadow:var(--shadow-inner-tray);transition:transform var(--dur-lift) var(--ease-tray)}
.kafel>.rdzen{background:var(--card);border-radius:var(--radius-core);padding:19px 17px;display:flex;flex-direction:column;gap:9px;border:1px solid rgba(14,14,14,.05);box-shadow:var(--shadow-tray-md),var(--shadow-inner-lit);transition:box-shadow var(--dur-lift) var(--ease-tray);height:100%}
.kafel.hero>.rdzen{padding:22px 19px;box-shadow:var(--shadow-tray-lg),var(--shadow-inner-lit)}
.kafel.cichy>.rdzen{box-shadow:var(--shadow-tray-sm),var(--shadow-inner-lit)}
.kafel.plaski>.rdzen{background:rgba(255,255,255,.84);box-shadow:var(--shadow-inner-lit)}
.kafel.polowka{padding:var(--tray-pad-sm);border-radius:var(--radius-tray-sm)}
.kafel.polowka>.rdzen{padding:15px 14px;border-radius:var(--radius-core-sm);gap:5px;box-shadow:var(--shadow-tray-sm),var(--shadow-inner-lit)}
@media(hover:hover){.kafel.zywy:hover{transform:translateY(-3px)}.kafel.zywy:hover>.rdzen{box-shadow:var(--shadow-tray-hover),var(--shadow-inner-lit)}}
.kapsula{display:inline-flex;align-items:center;gap:7px;width:fit-content;border:1px solid rgba(14,14,14,.10);background:rgba(255,255,255,.78);border-radius:999px;padding:5px 12px;font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);box-shadow:var(--shadow-tray-sm)}
.kapsula::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--sun-6);flex-shrink:0}
.kapsula.cisza::before{background:var(--grey-4)}
.latarnia-rzad{display:flex;align-items:baseline;gap:7px}
.latarnia{font-family:var(--f-display);font-size:clamp(2.9rem,6vw,3.9rem);line-height:.84;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.zl{font-family:var(--f-display);font-size:1.5rem;line-height:1}
.liczba-polowki{font-family:var(--f-display);font-size:1.55rem;line-height:.9;font-variant-numeric:tabular-nums}
.rzad-rozdzielony{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kreska-mocna{border-top:1px solid rgba(14,14,14,.10);margin-top:6px;padding-top:11px;display:flex;flex-direction:column;gap:4px}
.kreska-wlos{border-top:1px solid rgba(14,14,14,.07);margin-top:4px;padding-top:9px}
/* ── HERO: pole słońca + jedna wyspa ceremonialna ── */
.pole-slonca{background-color:var(--sun);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='280'><g fill='none' stroke='%230E0E0E' stroke-opacity='.07' stroke-width='3' stroke-linecap='round'><path d='M-10 44 q40 -26 80 0 t80 0 t80 0 t80 0 t80 0'/><path d='M-10 150 q46 28 92 0 t92 0 t92 0 t92 0'/><path d='M-10 250 q38 -24 76 0 t76 0 t76 0 t76 0 t76 0'/></g></svg>")}
.hero-uklad{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding:52px 0 58px}
@media(max-width:900px){.hero-uklad{grid-template-columns:1fr;padding:36px 0 42px}}
.wyspa-ceremonialna{background:var(--card);border:var(--border-w-thick) solid var(--ink);border-radius:26px;padding:26px 24px;display:flex;flex-direction:column;gap:13px;width:100%}
.wyspa-ceremonialna h1{font-size:clamp(1.8rem,3.7vw,2.75rem)}
.punkty{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.punkty li{list-style:none;font-size:.8rem;color:var(--grey);padding-left:22px;position:relative}
.punkty li::before{content:'✓';position:absolute;left:0;top:-1px;color:var(--ink);font-weight:800;font-size:.8rem}
.druga-droga{border-top:1px solid rgba(14,14,14,.10);margin-top:4px;padding-top:13px;display:flex;flex-wrap:wrap;align-items:center;gap:11px}

/* podgląd produktu — telefon rysowany CSS-em */
.telefon{width:300px;margin:0 auto;border:10px solid var(--ink);border-radius:38px;background:var(--paper);box-shadow:0 40px 90px -30px rgba(30,24,5,.55);overflow:hidden}
.telefon .ekranik{padding:15px 13px 17px;display:flex;flex-direction:column;gap:10px}
.telefon .gorka{display:flex;align-items:center;justify-content:space-between;font-size:.55rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.podpis-przykład{text-align:center;font-size:.66rem;color:var(--olive);font-weight:700;padding-top:11px}
.wariant{container-type:inline-size;container-name:strona;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;overflow:clip;position:relative}
.wariant h1,.wariant h2,.wariant h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;line-height:.98;letter-spacing:.01em;text-wrap:balance;margin:0}
.wariant p,.wariant ul{margin:0}
.wariant a{color:inherit}
.wariant :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.znak{display:block}.znak svg{width:100%;height:auto;display:block}
@media(prefers-reduced-motion:reduce){.wariant *,.wariant *::before,.wariant *::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}}