/* =========================================================================
   Liceum Ogólnokształcące im. Sybiraków — arkusz stylów
   -------------------------------------------------------------------------
   Kierunek: produktowy (Apple / SaaS). Jedna rodzina pisma, duża i ciasno
   zestawiona. Biel, jasna szarość i prawie-czerń. Błękit wyłącznie jako
   kolor działania. Treść mieszka w miękko zaokrąglonych kafelkach o różnej
   wielkości (bento), zdjęcia traktowane jak produkt — duże, kadrowane,
   w zaokrąglonej ramie. Zero ornamentu: bez ziarna, bez linii drukarskich,
   bez kursora niestandardowego i bez przejść między stronami.
   ========================================================================= */

/* Pismo deklaruje osobny arkusz /css/fonts.css (Inter, hostowany lokalnie). */

/* ------------------------------------------------------------ 1. tokeny */

:root {
  /* --- powierzchnie -------------------------------------------------- */
  --w:        #ffffff;
  --g-50:     #f5f5f7;
  --g-100:    #ececef;
  --g-200:    #dedee3;
  --ink:      #08090d;
  --ink-2:    #14161c;
  --ink-3:    #1f222b;

  /* --- pismo --------------------------------------------------------- */
  --tx:       #1d1d1f;
  --tx-2:     #55575e;
  --tx-3:     #68686f;
  --on-dark:  #f5f5f7;
  --on-dark-2:#9b9ca3;

  /* --- działanie ----------------------------------------------------- */
  --acc:      #1a4fbf;
  --acc-2:    #2f6bff;
  --acc-3:    #8fb4ff;
  --acc-soft: #ecf1fd;

  --line:     rgba(0, 0, 0, .11);
  --line-2:   rgba(0, 0, 0, .065);
  --line-dark:rgba(255, 255, 255, .13);

  /* --- aliasy dla stylów pisanych w widokach -------------------------- */
  --text:     var(--tx);
  --text-2:   var(--tx-2);
  --text-3:   var(--tx-3);
  --brand:    var(--acc);
  --gold-soft:var(--acc-3);
  --paper:    var(--g-50);
  --paper-2:  var(--g-100);
  --sky-50:   var(--acc-soft);
  --sky-100:  #e2e9f8;

  /* --- geometria ------------------------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl:36px;
  --pill: 980px;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px -8px rgba(0, 0, 0, .10);
  --sh-2: 0 2px 8px rgba(0, 0, 0, .05), 0 26px 52px -22px rgba(0, 0, 0, .18);

  --wrap: 1140px;
  --wrap-w: 1400px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(4rem, 7.5vw, 8rem);

  /* --- pismo ---------------------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

/* ------------------------------------------------------------- 2. reset */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--w);
  color: var(--tx);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.011em;
  font-feature-settings: 'cv05' 1, 'ss03' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 680;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.15rem + 5.1vw, 5rem); line-height: 1.02; letter-spacing: -.042em; }
h2 { font-size: clamp(2rem, 1.15rem + 3.3vw, 3.5rem); letter-spacing: -.038em; }
h3 { font-size: clamp(1.28rem, 1.08rem + .8vw, 1.65rem); line-height: 1.2; letter-spacing: -.026em; }
h4, .h-sm { font-size: 1.06rem; line-height: 1.32; letter-spacing: -.02em; font-weight: 620; margin: 0; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--acc); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acc-2);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark :focus-visible { outline-color: var(--acc-3); }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-xs);
  transition: top .2s;
}
.skip:focus { top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* zdjęte wraz ze zmianą kierunku — elementy zostają w HTML, znikają z widoku */
.grain, .pt, .cur, .cur-dot, .galcur, .navload { display: none !important; }

/* ----------------------------------------------------------- 3. layout */

.wrap { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--gut) * 2, var(--wrap-w)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gut) * 2, 720px); margin-inline: auto; }

section { position: relative; }
.sec { padding-block: var(--sec); }
.sec-t { padding-top: var(--sec); }
.sec-b { padding-bottom: var(--sec); }

.dark { background: var(--ink); color: var(--on-dark); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark .h-sm { color: #fff; }
.dark p { color: var(--on-dark-2); }
.tint { background: var(--g-50); }
.paper2 { background: var(--g-50); }

.lede {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem);
  line-height: 1.5;
  letter-spacing: -.016em;
  color: var(--tx-2);
  max-width: 52ch;
}
.dark .lede { color: var(--on-dark-2); }

.center { text-align: center; }

/* --------------------------------------------------- 4. nagłówki sekcji */

.kicker {
  display: block;
  font-size: .85rem; font-weight: 600; letter-spacing: -.008em;
  color: var(--acc); margin-bottom: .8rem;
}
.dark .kicker { color: var(--acc-3); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { margin-top: 1rem; }

.head-split {
  display: grid; gap: clamp(1.2rem, 3vw, 2.6rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end; margin-bottom: clamp(2rem, 3.4vw, 3rem);
}
@media (min-width: 900px) {
  .head-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .head-split > div:last-child { padding-bottom: .35rem; }
}
.head-split p { max-width: 44ch; }

/* linia pod nagłówkiem (dokładana z JS) — w tym kierunku niewidoczna */
.h-rule { display: none; }

/* ---------------------------------------------------------- 5. przyciski */

.btn {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .82rem 1.45rem; border: 1px solid transparent; border-radius: var(--pill);
  background: var(--acc); color: #fff;
  font-size: .97rem; font-weight: 560; letter-spacing: -.012em;
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease), opacity .25s;
}
.btn:hover { background: var(--acc-2); }
.btn:active { transform: scale(.985); }
.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

.btn-brand { background: var(--ink); }
.btn-brand:hover { background: var(--ink-3); }

.btn-ghost { background: var(--g-100); color: var(--tx); }
.btn-ghost:hover { background: var(--g-200); }
.dark .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, .24); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--g-100); color: var(--ink); }

.btn-sm { padding: .6rem 1.1rem; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.tlink {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 530; font-size: .97rem; color: var(--acc);
  transition: color .25s;
}
.tlink:hover { color: var(--acc-2); text-decoration: underline; text-underline-offset: 3px; }
.tlink .arw { transition: transform .3s var(--ease); }
.tlink:hover .arw { transform: translateX(3px); }
.dark .tlink { color: var(--acc-3); }
.dark .tlink:hover { color: #fff; }

/* --------------------------------------------------------- 6. nagłówek */

.topbar {
  background: var(--g-50); color: var(--tx-3);
  font-size: .78rem; letter-spacing: -.005em;
  border-bottom: 1px solid var(--line-2);
}
.topbar .wrap-wide {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 38px; padding-block: .3rem;
}
.topbar a { display: inline-flex; align-items: center; gap: .4rem; transition: color .25s; }
.topbar a:hover { color: var(--tx); }
.topbar-l { display: flex; gap: 1.4rem; align-items: center; }
.topbar-r { display: flex; gap: 1.1rem; align-items: center; }
.topbar svg { width: 13px; height: 13px; opacity: .7; }
@media (max-width: 860px) { .topbar-l span.hide-sm { display: none; } }
@media (max-width: 560px) {
  .topbar { font-size: .72rem; }
  .topbar .wrap-wide { gap: .6rem; }
  .topbar-l a span { display: none; }
  .topbar-r { gap: .9rem; }
}

.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-2);
  transition: transform .4s var(--ease), background .3s;
}
.hdr.up { transform: translateY(-100%); }
.hdr.stuck { background: rgba(255, 255, 255, .86); }

.hdr-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 66px; transition: min-height .3s var(--ease);
}
.hdr.stuck .hdr-in { min-height: 58px; }

.brand { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.brand img { width: auto; height: 40px; transition: height .3s var(--ease); }
.hdr.stuck .brand img { height: 35px; }

.mainnav { display: none; }
@media (min-width: 1080px) { .mainnav { display: flex; align-items: center; gap: .1rem; } }

.navlink {
  position: relative; padding: .5rem .8rem; border-radius: var(--r-xs);
  font-size: .9rem; font-weight: 460; letter-spacing: -.012em; color: var(--tx-2);
  transition: color .2s, background .2s;
}
.navlink:hover { color: var(--tx); background: rgba(0, 0, 0, .045); }
.navlink.on { color: var(--tx); font-weight: 560; }

.navdrop { position: relative; }
.navdrop > .navlink { display: inline-flex; align-items: center; gap: .3rem; }
.navdrop > .navlink svg { width: 9px; transition: transform .25s; }
.navdrop:hover > .navlink svg { transform: rotate(180deg); }
.navmenu {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 236px;
  background: rgba(255, 255, 255, .88); border: 1px solid var(--line-2);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-sm); box-shadow: var(--sh-2); padding: .4rem; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.navdrop:hover .navmenu, .navdrop:focus-within .navmenu { opacity: 1; visibility: visible; transform: translateY(0); }
.navmenu a {
  display: block; padding: .58rem .75rem; border-radius: var(--r-xs);
  font-size: .9rem; color: var(--tx-2); transition: background .18s, color .18s;
}
.navmenu a:hover { background: var(--g-50); color: var(--tx); }

.hdr-cta { display: none; }
@media (min-width: 1080px) { .hdr-cta { display: flex; gap: .5rem; align-items: center; } }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 11px; border: 0;
  border-radius: var(--pill); background: var(--g-100); cursor: pointer;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger i {
  display: block; width: 100%; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .34s var(--ease), opacity .2s;
}
body.menu-open .burger i:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 95; background: var(--w); color: var(--tx);
  display: flex; flex-direction: column; padding: 1.2rem var(--gut) 2rem;
  overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
body.menu-open .drawer { opacity: 1; visibility: visible; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; }
.drawer-top img { height: 38px; }
.drawer-x {
  width: 42px; height: 42px; border-radius: var(--pill); border: 0;
  background: var(--g-100); color: var(--ink); font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.drawer nav { margin-top: 1.6rem; display: flex; flex-direction: column; }
.drawer nav > a, .drawer .dgroup > span {
  font-size: clamp(1.6rem, 6.5vw, 2.1rem); font-weight: 640; letter-spacing: -.035em;
  padding: .5rem 0; border-bottom: 1px solid var(--line-2); color: var(--ink);
  opacity: 0; transform: translateY(14px);
}
body.menu-open .drawer nav > a, body.menu-open .drawer .dgroup > span {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease) calc(var(--i) * 40ms + 80ms),
              transform .4s var(--ease) calc(var(--i) * 40ms + 80ms);
}
.drawer .dgroup { display: flex; flex-direction: column; }
.drawer .dgroup > span { color: var(--tx-3); }
.drawer .dsub { display: flex; flex-wrap: wrap; gap: .45rem; padding: .9rem 0 1.1rem; }
.drawer .dsub a {
  background: var(--g-100); border-radius: var(--pill); padding: .45rem .95rem;
  font-size: .9rem; color: var(--tx); transition: background .2s;
}
.drawer .dsub a:hover { background: var(--g-200); }
.drawer-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1rem; }
.drawer-foot .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.drawer-foot .btn-row .btn { justify-content: center; }
.drawer-foot .btn-row .btn-brand { grid-column: 1 / -1; }
.drawer-foot .dmeta { font-size: .9rem; color: var(--tx-3); display: grid; gap: .3rem; }

.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; background: var(--acc);
}

/* ------------------------------------------------------------- 7. hero */

.hero {
  background: var(--w);
  padding-top: clamp(2.6rem, 5.5vw, 5rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.6rem);
  text-align: center;
}
.hero h1 { max-width: 17ch; margin-inline: auto; }
.hero-sub {
  margin: clamp(1rem, 2vw, 1.4rem) auto 0;
  max-width: 54ch;
  font-size: clamp(1.08rem, 1rem + .52vw, 1.35rem);
  line-height: 1.5; letter-spacing: -.016em; color: var(--tx-2);
}
.hero .btn-row { justify-content: center; margin-top: clamp(1.5rem, 2.8vw, 2.1rem); }

.hero-brow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
  padding: .35rem .95rem .35rem .35rem;
  border-radius: var(--pill); background: var(--g-50);
  font-size: .84rem; font-weight: 500; color: var(--tx-2); letter-spacing: -.01em;
}
.hero-brow b {
  background: var(--acc); color: #fff; font-weight: 600;
  font-size: .74rem; letter-spacing: -.005em; padding: .22rem .6rem; border-radius: var(--pill);
}

/* duża plansza medialna pod nagłówkiem */
.hero-media {
  margin-top: clamp(2rem, 4vw, 3.4rem);
  border-radius: var(--r-2xl); overflow: hidden; background: var(--g-100);
  position: relative;
}
.hero-media video, .hero-media img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
}
@media (max-width: 700px) { .hero-media video, .hero-media img { aspect-ratio: 4 / 3; } }
@media (max-width: 700px) { .hero-media { border-radius: var(--r-xl); } }

/* pasek liczb */
.statbar { background: var(--w); padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.statbar-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.6rem, 3vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 860px) { .statbar-grid { grid-template-columns: repeat(4, 1fr); } }
.statbar-item { text-align: center; }
.statbar-v {
  display: block; font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.5rem);
  font-weight: 680; letter-spacing: -.045em; line-height: 1; color: var(--ink);
  font-feature-settings: 'tnum' 1;
}
.statbar-l { margin-top: .5rem; font-size: .96rem; font-weight: 570; color: var(--tx); letter-spacing: -.015em; }
.statbar-n { margin-top: .2rem; font-size: .86rem; color: var(--tx-3); line-height: 1.45; }
.dark .statbar-v, .dark .statbar-l { color: #fff; }
.dark .statbar-n { color: var(--on-dark-2); }

/* -------------------------------------------------- 8. hero podstrony */

.phero {
  background: var(--w);
  padding-top: clamp(2.2rem, 4.5vw, 3.6rem);
  padding-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.phero-in { position: relative; }
.phero h1 { max-width: 18ch; }
.phero .lede { margin-top: clamp(.9rem, 1.8vw, 1.3rem); }
.phero-media {
  margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
  border-radius: var(--r-2xl); overflow: hidden; background: var(--g-100);
}
.phero-media img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
@media (max-width: 700px) {
  .phero-media { border-radius: var(--r-xl); }
  .phero-media img { aspect-ratio: 16 / 10; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .85rem; color: var(--tx-3); margin-bottom: 1rem; }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--acc); }
.crumbs span { opacity: .55; }
.crumbs .now { opacity: 1; color: var(--tx); }

/* --------------------------------------------------------- 9. siatki */

.grid { display: grid; gap: clamp(.9rem, 1.8vw, 1.4rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.split {
  display: grid; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.wide-l { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .split.wide-r { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .split.rev > *:first-child { order: 2; }
}

/* --------------------------------------------------------- 10. bento */

.bento {
  display: grid; gap: clamp(.7rem, 1.3vw, 1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.bt {
  position: relative; display: flex; flex-direction: column;
  grid-column: span 2;
  background: var(--g-50); border-radius: var(--r-xl);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .3s var(--ease);
}
.bt:hover { background: var(--g-100); }
.dark .bt { background: rgba(255, 255, 255, .06); }
.dark .bt:hover { background: rgba(255, 255, 255, .1); }
a.bt { color: inherit; }

@media (min-width: 900px) {
  .bt-2 { grid-column: span 2; }
  .bt-3 { grid-column: span 3; }
  .bt-4 { grid-column: span 4; }
  .bt-6 { grid-column: span 6; }
}
@media (max-width: 899px) { .bt-6 { grid-column: span 2; } }

.bt h3 { margin-bottom: .5rem; }
.bt p { color: var(--tx-2); font-size: .97rem; }
.dark .bt p { color: var(--on-dark-2); }

/* znak kafelka — miękki kwadrat z ikoną */
.bt-ic {
  width: 42px; height: 42px; border-radius: var(--r-xs); flex: none;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--acc-soft); color: var(--acc);
}
.bt-ic svg, .bt-ic .ico { width: 21px; height: 21px; }
.dark .bt-ic { background: rgba(143, 180, 255, .16); color: var(--acc-3); }

.bt-n {
  font-size: .84rem; font-weight: 620; color: var(--acc);
  letter-spacing: -.005em; margin-bottom: .5rem; font-feature-settings: 'tnum' 1;
}
.dark .bt-n { color: var(--acc-3); }

/* lista wypunktowana w kafelku */
.bt-pts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.bt-pts li {
  position: relative; padding-left: 1.4rem; font-size: .92rem; color: var(--tx-2); line-height: 1.45;
}
.bt-pts li::before {
  content: ''; position: absolute; left: 0; top: .46em; width: 14px; height: 8px;
  border-left: 1.7px solid var(--acc); border-bottom: 1.7px solid var(--acc);
  transform: rotate(-45deg) scale(.72); transform-origin: center;
}
.dark .bt-pts li { color: var(--on-dark-2); }
.dark .bt-pts li::before { border-color: var(--acc-3); }

/* --------------------------------------------------- 11. rząd cech */

.feats {
  display: grid; gap: clamp(1.8rem, 3.5vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) { .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feat { text-align: center; }
.feat .bt-ic { margin-inline: auto; }
.feat h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem); }
.feat p { margin-top: .55rem; color: var(--tx-2); font-size: .97rem; max-width: 38ch; margin-inline: auto; }
.dark .feat p { color: var(--on-dark-2); }

/* -------------------------------------------------------- 12. obrazki */

.figure, .plate {
  position: relative; overflow: hidden; margin: 0;
  border-radius: var(--r-lg); background: var(--g-100);
}
.figure img, .plate > img, .plate > video { width: 100%; height: 100%; object-fit: cover; }
.figure.par img { transform: scale(1.12); will-change: transform; }
.figure.tall { aspect-ratio: 4 / 5; }
.figure.wide { aspect-ratio: 16 / 10; }
.figure.sq { aspect-ratio: 1; }

.plate .cap, .figcap {
  display: block; margin-top: .7rem;
  font-size: .84rem; color: var(--tx-3); letter-spacing: -.008em;
}
.figcap {
  position: absolute; left: .8rem; top: .8rem; z-index: 2; margin: 0;
  width: fit-content; max-width: calc(100% - 1.6rem);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px);
  color: var(--tx); font-size: .8rem; font-weight: 500;
  padding: .4rem .75rem; border-radius: var(--pill);
}
.dark .plate .cap { color: var(--on-dark-2); }

.stack-imgs { position: relative; }
.stack-imgs .figure:nth-child(2) {
  position: absolute; right: -5%; bottom: -10%; width: 44%;
  border: 8px solid var(--w); border-radius: var(--r-lg);
}
.dark .stack-imgs .figure:nth-child(2) { border-color: var(--ink); }
@media (max-width: 640px) {
  .stack-imgs .figure:nth-child(2) { right: -2%; bottom: -7%; width: 44%; border-width: 5px; }
}

/* ----------------------------------------------------------- 13. karty */

.card {
  position: relative; background: var(--g-50); border: 0;
  border-radius: var(--r-xl); padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background .3s var(--ease);
  overflow: hidden;
}
.card:hover { background: var(--g-100); }
.dark .card { background: rgba(255, 255, 255, .06); }
.dark .card:hover { background: rgba(255, 255, 255, .1); }

.card .ico {
  width: 42px; height: 42px; padding: 10px; border-radius: var(--r-xs);
  background: var(--acc-soft); color: var(--acc); margin-bottom: 1rem;
}
.dark .card .ico { background: rgba(143, 180, 255, .16); color: var(--acc-3); }
.card h3, .card h4, .card .h-sm { margin-bottom: .5rem; }
.card p { color: var(--tx-2); font-size: .97rem; }

.card > .card-num {
  position: absolute; top: 1.2rem; right: 1.5rem;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  color: rgba(0, 0, 0, .05); z-index: 0; pointer-events: none;
  font-feature-settings: 'tnum' 1;
}
.dark .card > .card-num { color: rgba(255, 255, 255, .07); }
.card > * { position: relative; z-index: 1; }

.numbadge {
  display: block; font-size: 1.4rem; font-weight: 660; letter-spacing: -.03em;
  line-height: 1; color: var(--acc); margin-bottom: .8rem;
  font-feature-settings: 'tnum' 1;
}
.dark .numbadge { color: var(--acc-3); }

.rulecard {
  background: var(--g-50); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  transition: background .3s var(--ease);
}
.rulecard:hover { background: var(--g-100); }
.rulecard .ix {
  display: block; font-size: .84rem; font-weight: 620; color: var(--acc);
  margin-bottom: .6rem; font-feature-settings: 'tnum' 1;
}
.dark .rulecard { background: rgba(255, 255, 255, .06); }
.dark .rulecard:hover { background: rgba(255, 255, 255, .1); }
.dark .rulecard .ix { color: var(--acc-3); }

/* ------------------------------------------------------- 14. profile */

.profile-row {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(2rem, 4vw, 3.4rem);
  border-top: 1px solid var(--line-2);
}
@media (min-width: 900px) {
  .profile-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .profile-row:nth-child(even) > .figure { order: 2; }
}
.profile-row .figure { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.profile-tag {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .8rem;
  font-size: .85rem; font-weight: 600; color: var(--acc); letter-spacing: -.008em;
}
.profile-tag .ico { width: 20px; height: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.chip {
  border: 0; border-radius: var(--pill); padding: .4rem .9rem;
  font-size: .85rem; color: var(--tx-2); background: var(--g-100);
  letter-spacing: -.008em;
}
.chip.on { background: var(--ink); color: #fff; }
.dark .chip { background: rgba(255, 255, 255, .12); color: var(--on-dark); }

/* plansze profili na stronie głównej */
.prof-ed {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(.8rem, 1.5vw, 1.1rem);
}
@media (min-width: 760px) { .prof-ed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prof-i {
  display: flex; flex-direction: column; color: inherit; overflow: hidden;
  background: var(--g-50); border-radius: var(--r-xl);
  transition: background .3s var(--ease);
}
.prof-i:hover { background: var(--g-100); }
.prof-i .plate { border-radius: 0; background: var(--g-200); }
.prof-i .plate img {
  aspect-ratio: 16 / 10;
  transition: transform 1.1s var(--ease-out);
}
.prof-i:hover .plate img, .prof-i:focus-visible .plate img { transform: scale(1.035); }
.prof-bd { padding: clamp(1.2rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
.prof-hd { display: flex; align-items: baseline; gap: .6rem; }
.prof-n { flex: none; font-size: .84rem; font-weight: 620; color: var(--acc); font-feature-settings: 'tnum' 1; }
.prof-i h3 { font-size: clamp(1.22rem, 1.05rem + .6vw, 1.5rem); }
.prof-i p { margin-top: .45rem; color: var(--tx-2); font-size: .95rem; }
.prof-i .chips { margin-top: auto; padding-top: 1.1rem; }
.dark .prof-i { background: rgba(255, 255, 255, .06); }
.dark .prof-i p { color: var(--on-dark-2); }
.dark .prof-n { color: var(--acc-3); }

/* stara karta profilu — zachowana dla zgodności */
.pcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 320px; border-radius: var(--r-xl); overflow: hidden; color: #fff;
  padding: clamp(1.3rem, 2.5vw, 1.9rem); isolation: isolate;
}
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 9, 13, .1) 30%, rgba(8, 9, 13, .88) 100%);
}
.pcard h3 { color: #fff; }
.pcard p { color: rgba(255, 255, 255, .85); font-size: .92rem; margin-top: .4rem; }
.pcard .more { margin-top: 1rem; font-size: .88rem; color: #fff; display: inline-flex; gap: .4rem; }

/* -------------------------------------------------------- 15. timeline */

.tl { position: relative; display: grid; gap: 0; }
.tl::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line-2); border-radius: 2px;
}
.tl-line {
  position: absolute; left: 5px; top: 8px; width: 2px; background: var(--acc);
  transform-origin: top; transform: scaleY(0); height: calc(100% - 16px); border-radius: 2px;
}
.dark .tl::before { background: var(--line-dark); }
.dark .tl-line { background: var(--acc-3); }

.tl-item { position: relative; padding: 0 0 2.2rem 2.2rem; }
.tl-dot {
  position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--w); border: 2px solid var(--line); display: grid; place-items: center;
}
.tl-dot::after {
  content: ''; width: 100%; height: 100%; border-radius: 50%; background: var(--acc);
  transform: scale(0); transition: transform .45s var(--ease-out);
}
.tl-item.in .tl-dot::after { transform: scale(1); }
.dark .tl-dot { background: var(--ink); border-color: var(--line-dark); }
.dark .tl-dot::after { background: var(--acc-3); }
.tl-year {
  display: block; font-size: .95rem; font-weight: 640; color: var(--acc);
  margin-bottom: .3rem; font-feature-settings: 'tnum' 1;
}
.dark .tl-year { color: var(--acc-3); }
.tl-item h4, .tl-item .h-sm { margin-bottom: .3rem; }
.tl-item p { color: var(--tx-2); font-size: .95rem; max-width: 52ch; }
.dark .tl-item p { color: var(--on-dark-2); }

/* --------------------------------------------------------- 16. kadra */

.roster { display: grid; }
.roster-i {
  position: relative; display: grid; align-items: center;
  gap: .15rem 1rem; grid-template-columns: auto minmax(0, 1fr);
  padding: .8rem .9rem; border-radius: var(--r-sm); color: inherit;
  transition: background .22s var(--ease);
}
.roster-i + .roster-i { box-shadow: inset 0 1px 0 var(--line-2); }
.roster-i:hover { background: var(--g-50); box-shadow: none; }
.roster-i:hover + .roster-i { box-shadow: none; }
.roster-s, .roster-r { grid-column: 2; }
@media (min-width: 700px) {
  .roster-i { grid-template-columns: auto minmax(0, .95fr) minmax(0, 1fr) auto; gap: .15rem 1.4rem; }
  .roster-s, .roster-r { grid-column: auto; }
  .roster-r { text-align: right; }
}
.roster-m {
  width: 38px; height: 38px; grid-row: span 3; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--acc-soft); color: var(--acc);
  font-size: .8rem; font-weight: 620; letter-spacing: -.02em;
}
@media (min-width: 700px) { .roster-m { grid-row: auto; } }
.roster-n { font-size: 1rem; font-weight: 560; letter-spacing: -.02em; line-height: 1.25; }
.roster-s { font-size: .9rem; color: var(--tx-3); line-height: 1.4; }
.roster-r { font-size: .82rem; font-weight: 560; color: var(--acc); }

.fac-grid {
  display: grid; gap: clamp(.7rem, 1.3vw, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.fac {
  background: var(--g-50); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2vw, 1.5rem); display: flex; flex-direction: column;
  gap: .8rem; min-height: 178px; transition: background .3s var(--ease);
}
.fac:hover { background: var(--g-100); }
.fac-av {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .95rem; font-weight: 620;
  letter-spacing: -.02em; background: var(--acc-soft); color: var(--acc);
}
.fac-lead { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--acc); margin-bottom: .25rem; }
.fac-name { font-size: 1.02rem; font-weight: 570; letter-spacing: -.022em; line-height: 1.25; }
.fac-sub { font-size: .88rem; color: var(--tx-3); margin-top: .25rem; line-height: 1.45; }
.fac-go { margin-top: auto; font-size: .86rem; color: var(--acc); display: inline-flex; gap: .3rem; align-items: center; }

.fac-hero-av {
  width: clamp(84px, 15vw, 120px); height: clamp(84px, 15vw, 120px); border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 650; letter-spacing: -.03em;
  background: var(--acc-soft); color: var(--acc);
}

/* ------------------------------------------------------ 17. aktualności */

.ncard { display: flex; flex-direction: column; height: 100%; color: inherit; }
.ncard .figure { aspect-ratio: 3 / 2; margin-bottom: 1rem; border-radius: var(--r-lg); }
.ncard .figure img { transition: transform 1s var(--ease-out); }
.ncard:hover .figure img { transform: scale(1.045); }
.nmeta { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--tx-3); margin-bottom: .55rem; }
.nmeta .cat { color: var(--acc); font-weight: 600; }
.nmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.ncard h3 { font-size: clamp(1.14rem, 1.03rem + .4vw, 1.35rem); transition: color .2s; }
.ncard:hover h3 { color: var(--acc); }
.ncard p { color: var(--tx-2); font-size: .94rem; margin-top: .6rem; }
.dark .ncard h3 { color: #fff; }
.dark .ncard:hover h3 { color: var(--acc-3); }
.dark .nmeta .cat { color: var(--acc-3); }

.nlist { display: grid; gap: .3rem; }
.nrow {
  display: grid; gap: clamp(.9rem, 2.5vw, 1.8rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1rem, 2vw, 1.3rem); border-radius: var(--r-lg);
  color: inherit; transition: background .25s var(--ease);
}
@media (min-width: 760px) { .nrow { grid-template-columns: 120px minmax(0, 1fr) 210px; } }
.nrow:hover { background: var(--g-50); }
.nrow-date { font-size: .85rem; color: var(--tx-3); }
.nrow-date b {
  display: block; font-size: 1.5rem; font-weight: 660; color: var(--ink);
  line-height: 1; margin-bottom: .15rem; letter-spacing: -.035em; font-feature-settings: 'tnum' 1;
}
.nrow .figure { aspect-ratio: 16 / 10; border-radius: var(--r-sm); }
@media (max-width: 759px) { .nrow .figure { order: -1; } }

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 2rem; }
.filters a {
  border: 0; border-radius: var(--pill); padding: .45rem 1rem; font-size: .88rem;
  background: var(--g-100); color: var(--tx-2); transition: background .2s, color .2s;
}
.filters a:hover { background: var(--g-200); color: var(--tx); }
.filters a.on { background: var(--ink); color: #fff; }

.article { font-size: 1.08rem; line-height: 1.7; }
.article > * + * { margin-top: 1.1em; }
.article h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); margin-top: 2em; margin-bottom: .15em; }
.article h3 { font-size: clamp(1.2rem, 1.08rem + .55vw, 1.45rem); margin-top: 1.7em; }
.article p { color: var(--tx-2); }
.article p:first-of-type { font-size: 1.14em; color: var(--tx); letter-spacing: -.017em; }
.article ul { padding-left: 1.2rem; color: var(--tx-2); }

.postnav {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.postnav a { background: var(--g-50); border-radius: var(--r-lg); padding: 1.4rem clamp(1rem, 2.5vw, 1.6rem); transition: background .25s; }
.postnav a:hover { background: var(--g-100); }
.postnav span { font-size: .84rem; color: var(--tx-3); }
.postnav b { display: block; font-size: 1.1rem; font-weight: 580; letter-spacing: -.025em; margin-top: .35rem; line-height: 1.3; }
.postnav a.nx { text-align: right; }

/* ------------------------------------------------------- 18. galeria */

.gal { display: grid; gap: clamp(.5rem, 1.1vw, .8rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gal { grid-template-columns: repeat(4, 1fr); } }
.gal-i {
  position: relative; overflow: hidden; border-radius: var(--r-sm);
  cursor: zoom-in; background: var(--g-100); aspect-ratio: 1;
}
.gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gal-i:hover img { transform: scale(1.05); }
.gal:not(.uniform) .gal-i:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.lb {
  position: fixed; inset: 0; z-index: 120; background: rgba(8, 9, 13, .92);
  display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  backdrop-filter: blur(12px);
}
.lb.on { display: grid; }
.lb img { max-width: min(96vw, 1200px); max-height: 82svh; border-radius: var(--r-sm); object-fit: contain; }
.lb-cap { color: rgba(255, 255, 255, .78); text-align: center; margin-top: 1rem; font-size: .9rem; }
.lb-x, .lb-p, .lb-n {
  position: absolute; background: rgba(255, 255, 255, .14); border: 0;
  color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; transition: background .2s;
}
.lb-x:hover, .lb-p:hover, .lb-n:hover { background: rgba(255, 255, 255, .26); }
.lb-x { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-p { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-n { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------- 19. faq */

.faq { display: grid; gap: .5rem; }
.faq-i { background: var(--g-50); border-radius: var(--r-lg); transition: background .25s; }
.faq-i:hover { background: var(--g-100); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem clamp(1.1rem, 2.2vw, 1.6rem);
  font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem); font-weight: 570;
  letter-spacing: -.022em; line-height: 1.35; color: var(--ink);
}
.faq-ic {
  flex: none; width: 24px; height: 24px; position: relative; margin-top: .15rem;
}
.faq-ic::before, .faq-ic::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--tx-3); border-radius: 2px;
  transition: transform .35s var(--ease);
}
.faq-ic::before { width: 13px; height: 1.8px; transform: translate(-50%, -50%); }
.faq-ic::after { width: 1.8px; height: 13px; transform: translate(-50%, -50%); }
.faq-i.on .faq-ic::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.faq-i.on .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  color: var(--tx-2); padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) 1.3rem; max-width: 68ch;
}
.dark .faq-i { background: rgba(255, 255, 255, .06); }
.dark .faq-i:hover { background: rgba(255, 255, 255, .1); }
.dark .faq-q { color: #fff; }
.dark .faq-ic::before, .dark .faq-ic::after { background: var(--on-dark-2); }

/* ------------------------------------------------------- 20. formularze */

.form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: .4rem; }
.field label { font-size: .88rem; font-weight: 540; color: var(--tx-2); letter-spacing: -.01em; }
.field label .req { color: var(--acc); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--tx); letter-spacing: -.011em;
  background: var(--g-50); border: 1px solid transparent; border-radius: var(--r-sm);
  padding: .85rem 1rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2386868b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; background: var(--w); border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, .14);
}
.field.err input, .field.err select, .field.err textarea { border-color: #d0342c; background: #fdf3f2; }
.field .msg { font-size: .82rem; color: #c0392b; min-height: 0; }
.dark .field label { color: var(--on-dark-2); }
.dark .field input, .dark .field select, .dark .field textarea {
  background: rgba(255, 255, 255, .07); color: #fff;
}
.dark .field input:focus, .dark .field select:focus, .dark .field textarea:focus {
  background: rgba(255, 255, 255, .12); border-color: var(--acc-3);
}
.dark .field input::placeholder, .dark .field textarea::placeholder { color: rgba(255, 255, 255, .4); }

.file-drop {
  border: 1.5px dashed var(--line); border-radius: var(--r-sm); padding: 1rem 1.1rem;
  display: flex; align-items: center; gap: .9rem; cursor: pointer; background: var(--g-50);
  transition: border-color .2s, background .2s;
}
.file-drop:hover, .file-drop.over { border-color: var(--acc); background: var(--acc-soft); }
.file-drop input { display: none; }
.file-drop .fi {
  width: 36px; height: 36px; border-radius: var(--r-xs); background: var(--acc-soft);
  display: grid; place-items: center; color: var(--acc); flex: none;
}
.file-drop b { display: block; font-size: .92rem; font-weight: 560; }
.file-drop small { color: var(--tx-3); font-size: .82rem; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--tx-2); line-height: 1.5; }
.check input { flex: none; width: 19px; height: 19px; margin-top: .1rem; accent-color: var(--acc); }
.check a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.dark .check { color: var(--on-dark-2); }
.dark .check a { color: var(--acc-3); }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-note {
  display: flex; gap: .65rem; align-items: flex-start; padding: 1rem 1.1rem;
  border-radius: var(--r-sm); background: var(--acc-soft); font-size: .89rem; color: var(--tx-2);
}
.dark .form-note { background: rgba(255, 255, 255, .07); color: var(--on-dark-2); }

.alert { padding: 1rem 1.2rem; border-radius: var(--r-sm); font-size: .93rem; display: none; }
.alert.on { display: block; }
.alert.ok { background: #e9f7ee; color: #18653a; }
.alert.bad { background: #fdecea; color: #a2382c; }

/* -------------------------------------------------------- 21. czesne */

.price {
  display: flex; flex-direction: column; background: var(--g-50); border: 0;
  border-radius: var(--r-xl); padding: clamp(1.5rem, 2.8vw, 2.2rem); height: 100%;
  transition: background .3s var(--ease);
}
.price:hover { background: var(--g-100); }
.price.hi { background: var(--ink); color: var(--on-dark); }
.price.hi:hover { background: var(--ink-2); }
.price.hi h3, .price.hi .price-v { color: #fff; }
.price-k { font-size: .86rem; font-weight: 600; color: var(--acc); }
.price.hi .price-k { color: var(--acc-3); }
.price-v {
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 680; letter-spacing: -.045em;
  line-height: 1; margin: .8rem 0 .25rem; color: var(--ink); font-feature-settings: 'tnum' 1;
}
.price-u { font-size: .95rem; color: var(--tx-3); }
.price.hi .price-u { color: var(--on-dark-2); }
.price-n { font-size: .88rem; color: var(--tx-3); }
.price.hi .price-n { color: var(--on-dark-2); }
.price ul { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: .65rem; }
.price li { position: relative; padding-left: 1.5rem; font-size: .94rem; color: var(--tx-2); }
.price.hi li { color: var(--on-dark); }
.price li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 14px; height: 8px;
  border-left: 1.8px solid var(--acc); border-bottom: 1.8px solid var(--acc);
  transform: rotate(-45deg) scale(.75);
}
.price.hi li::before { border-color: var(--acc-3); }
.price .btn { margin-top: auto; align-self: flex-start; }

.iban {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  font-size: clamp(1rem, .9rem + .65vw, 1.3rem); font-weight: 560; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.copy {
  border: 0; background: rgba(255, 255, 255, .14); color: inherit;
  border-radius: var(--pill); padding: .4rem .9rem; font-size: .82rem; cursor: pointer;
  transition: background .2s;
}
.copy:hover { background: rgba(255, 255, 255, .26); }

/* --------------------------------------------------------- 22. kontakt */

.cinfo { display: grid; gap: .5rem; }
.cinfo-i {
  background: var(--g-50); border-radius: var(--r-lg); padding: 1.2rem clamp(1.1rem, 2.2vw, 1.5rem);
  display: flex; gap: .9rem; align-items: flex-start; transition: background .25s;
}
.cinfo-i:hover { background: var(--g-100); }
.cinfo-ic {
  width: 40px; height: 40px; border-radius: var(--r-xs); background: var(--acc-soft);
  color: var(--acc); display: grid; place-items: center; flex: none;
}
.cinfo-i b { display: block; font-size: .84rem; color: var(--tx-3); margin-bottom: .2rem; font-weight: 500; }
.cinfo-i span, .cinfo-i a { font-size: 1.02rem; font-weight: 540; letter-spacing: -.017em; color: var(--ink); }
.cinfo-i a:hover { color: var(--acc); }

.mapwrap { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--g-100); }
.mapwrap iframe { width: 100%; height: clamp(300px, 45vh, 460px); border: 0; display: block; }
.mapwrap img { width: 100%; height: clamp(300px, 45vh, 460px); object-fit: cover; }
.map-go {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 0; border-radius: var(--pill); padding: .8rem 1.4rem;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  color: var(--ink); font-size: .94rem; font-weight: 560; box-shadow: var(--sh-2);
  transition: background .2s, transform .2s;
}
.map-go:hover { background: #fff; transform: translate(-50%, -50%) scale(1.02); }
.mapwrap.live .map-go, .mapwrap.live img { display: none; }
.map-note { display: block; margin-top: .7rem; font-size: .84rem; color: var(--tx-3); }
.mapwrap.live + .map-note { display: none; }

/* ------------------------------------------------------------ 23. CTA */

.cta {
  position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark);
  padding-block: clamp(4rem, 7.5vw, 6.5rem); text-align: center;
}
.cta-in { position: relative; z-index: 1; }
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; }
.cta-grid { display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); justify-items: center; }
.cta .btn-row { justify-content: center; }
.cta .mono-list { text-align: left; max-width: 480px; width: 100%; margin-inline: auto; }

/* --------------------------------------------------------- 24. stopka */

.ftr {
  background: var(--g-50); color: var(--tx-2);
  padding-block: clamp(3rem, 5.5vw, 4.5rem) 1.8rem;
}
.ftr-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px) { .ftr-grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; } }
.ftr img.flogo { height: 44px; width: auto; margin-bottom: 1.1rem; filter: invert(1) grayscale(1) brightness(.28); }
.ftr h4, .ftr .h-sm {
  font-size: .85rem; font-weight: 620; color: var(--ink); margin-bottom: .9rem; letter-spacing: -.01em;
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr a { transition: color .2s; font-size: .92rem; }
.ftr a:hover { color: var(--acc); }
.ftr p { font-size: .92rem; line-height: 1.6; color: var(--tx-3); }
.ftr .fmeta { display: grid; gap: .5rem; font-size: .92rem; }
.ftr .fmeta b { color: var(--ink); font-weight: 560; }
@media (max-width: 1079px) { .ftr { padding-bottom: 5.5rem; } }

.ftr-bar {
  margin-top: clamp(2.2rem, 4.5vw, 3.2rem); padding-top: 1.3rem;
  border-top: 1px solid var(--line-2);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--tx-3);
}
.ftr-bar nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.soc { display: flex; gap: .5rem; }
.soc a {
  width: 38px; height: 38px; border-radius: 50%; background: var(--g-100);
  display: grid; place-items: center; color: var(--tx-2);
  transition: background .2s, color .2s;
}
.soc a:hover { background: var(--ink); color: #fff; }
.soc svg { width: 16px; height: 16px; }

/* ------------------------------------------------------- 25. animacje */

[data-rv] { opacity: 0; transform: translateY(18px); }
[data-rv].in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease-out) var(--d, 0ms), transform .7s var(--ease-out) var(--d, 0ms);
}
[data-rv='fade'] { transform: none; }
[data-rv='left'] { transform: translateX(-20px); }
[data-rv='right'] { transform: translateX(20px); }
[data-rv='scale'] { transform: scale(.97); }
[data-rv='clip'] { opacity: 1; clip-path: inset(0 0 100% 0); transform: none; }
[data-rv='clip'].in { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--ease-out) var(--d, 0ms); }

.word { display: inline-block; vertical-align: bottom; }
.word > span { display: inline-block; transform: translateY(.32em); opacity: 0; will-change: transform, opacity; }
.rv-words.in .word > span {
  transform: none; opacity: 1;
  transition: transform .75s var(--ease-out) calc(var(--wi, 0) * 34ms),
              opacity .75s var(--ease-out) calc(var(--wi, 0) * 34ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .word > span { transform: none !important; opacity: 1 !important; }
}

/* ------------------------------------------------------- 26. drobiazgi */

.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }
.dark .rule { background: var(--line-dark); }

.tagline-list, .check-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.tagline-list li {
  position: relative; padding-left: 1.6rem; font-size: .98rem; color: var(--tx-2); line-height: 1.5;
}
.tagline-list li::before {
  content: ''; position: absolute; left: 0; top: .45em; width: 15px; height: 8px;
  border-left: 1.9px solid var(--acc); border-bottom: 1.9px solid var(--acc);
  transform: rotate(-45deg) scale(.78);
}
.dark .tagline-list li { color: var(--on-dark-2); }
.dark .tagline-list li::before { border-color: var(--acc-3); }

.badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.badge {
  border: 0; border-radius: var(--pill); padding: .42rem 1rem;
  font-size: .86rem; color: var(--tx-2); background: var(--g-100); letter-spacing: -.008em;
}
.dark .badge { background: rgba(255, 255, 255, .12); color: var(--on-dark); }

.stages { display: grid; gap: clamp(.7rem, 1.3vw, 1rem); }
@media (min-width: 900px) { .stages { grid-template-columns: repeat(3, 1fr); } }
.stage { background: var(--g-50); border-radius: var(--r-xl); padding: clamp(1.4rem, 2.6vw, 2rem); }
.stage-l { font-size: .85rem; font-weight: 620; color: var(--acc); }
.stage h3 { margin: .6rem 0 1rem; }
.stage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.stage li { font-size: .94rem; color: var(--tx-2); padding-left: 1rem; position: relative; line-height: 1.5; }
.stage li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--acc); opacity: .55;
}

.steps { display: grid; gap: .4rem; }
.step {
  display: grid; gap: clamp(.7rem, 1.6vw, 1.4rem); grid-template-columns: 44px minmax(0, 1fr);
  padding: clamp(1rem, 2vw, 1.4rem); border-radius: var(--r-lg);
  align-items: start; background: var(--g-50); transition: background .25s var(--ease);
}
.step:hover { background: var(--g-100); }
.dark .step { background: rgba(255, 255, 255, .06); }
.dark .step:hover { background: rgba(255, 255, 255, .1); }
.step-n {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--acc); color: #fff; font-size: .88rem; font-weight: 620;
  letter-spacing: -.02em; font-feature-settings: 'tnum' 1;
}
.dark .step-n { background: var(--acc-3); color: var(--ink); }
.step h4, .step .h-sm { margin-bottom: .25rem; }
.step p { color: var(--tx-2); font-size: .95rem; max-width: 58ch; }
.dark .step p { color: var(--on-dark-2); }

.quote {
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem); font-weight: 620;
  letter-spacing: -.035em; line-height: 1.24; color: var(--ink); max-width: 26ch;
}
.dark .quote { color: #fff; }
.quote-by { margin-top: 1.2rem; font-size: .9rem; color: var(--tx-3); }
.dark .quote-by { color: var(--on-dark-2); }

.mono-list { display: grid; gap: 0; }
.mono-list > div {
  display: flex; justify-content: space-between; gap: 1.4rem; padding: .8rem 0;
  border-bottom: 1px solid var(--line-2); font-size: .95rem;
}
.dark .mono-list > div { border-color: var(--line-dark); }
.mono-list b { font-weight: 540; }
.mono-list span { color: var(--tx-3); text-align: right; }
.dark .mono-list span { color: var(--on-dark-2); }

/* pływający pasek kontaktu na telefonie */
.dock {
  position: fixed; left: 50%; transform: translate(-50%, 130%); bottom: 14px; z-index: 80;
  display: flex; gap: .35rem; padding: .35rem; border-radius: var(--pill);
  background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sh-2); transition: transform .5s var(--ease-out);
}
.dock.on { transform: translate(-50%, 0); }
@media (min-width: 1080px) { .dock { display: none; } }
.dock a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1rem;
  border-radius: var(--pill); color: var(--tx); font-size: .87rem; font-weight: 550; white-space: nowrap;
}
.dock a.pri { background: var(--acc); color: #fff; }
.dock svg { width: 15px; height: 15px; }

/* ikona ogólna */
.ico { width: 24px; height: 24px; }

/* -------------------------------------------------------- 27. panel */

.panel-tbl { width: 100%; border-collapse: collapse; font-size: .89rem; background: var(--w); }
.panel-tbl th, .panel-tbl td { padding: .7rem .8rem; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.panel-tbl th { background: var(--g-50); font-size: .8rem; color: var(--tx-3); font-weight: 600; }
.panel-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.pill { display: inline-block; padding: .15rem .6rem; border-radius: var(--pill); background: var(--acc-soft); color: var(--acc); font-size: .78rem; font-weight: 550; }

/* --------------------------------------------------------- 28. 404 */

.e404 { min-height: 66svh; display: grid; place-items: center; text-align: center; }
.e404 .big {
  font-size: clamp(5rem, 18vw, 11rem); font-weight: 700; letter-spacing: -.06em;
  line-height: .9; color: var(--g-100); margin-bottom: .6rem;
}
.e404-search { display: flex; gap: .5rem; max-width: 420px; margin: 1.6rem auto 0; }
.e404-search input {
  flex: 1; font: inherit; font-size: .97rem; background: var(--g-50);
  border: 1px solid transparent; border-radius: var(--pill); padding: .75rem 1.2rem;
}
.e404-search input:focus { outline: 0; background: var(--w); border-color: var(--acc); box-shadow: 0 0 0 4px rgba(47, 107, 255, .14); }

/* ------------------------------------------------------------- 29. druk */

@media print {
  .topbar, .hdr, .drawer, .dock, .lb, .btn-row, .soc, .gal, .hero-media, .phero-media { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sec, .sec-t, .sec-b { padding-block: 1rem; }
  .dark, .cta, .ftr, .price.hi { background: #fff !important; color: #000 !important; }
  .dark h1, .dark h2, .dark h3, .dark p, .cta h2, .cta p { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .bt, .card, .step, .faq-i, .stage, .price { background: #fff !important; border: 1px solid #ccc; }
}

/* ---------------------------------------------- 30. warianty rzędu cech */

.feats.four { gap: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (min-width: 800px) { .feats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feats.four .feat { text-align: left; }
.feats.four .feat .bt-ic { margin-inline: 0; }
.feats.four .feat p { margin-inline: 0; font-size: .94rem; }
@media (max-width: 799px) {
  .feats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------- 31. dopięcia kontrastu */

/* pasek górny: szary na szarym był nieczytelny */
.topbar { color: var(--tx-2); }
.topbar a { color: var(--tx-2); }

/* logo w jasnej stopce — wersja ciemna, bez filtrów */
.ftr img.flogo { filter: none; height: 40px; }

/* znak cechy: większy na wyśrodkowanym rzędzie */
.feat .bt-ic { width: 54px; height: 54px; border-radius: var(--r-sm); margin-bottom: 1.1rem; }
.feat .bt-ic svg, .feat .bt-ic .ico { width: 26px; height: 26px; }

/* monogramy kadry na szarej sekcji muszą się odcinać */
.tint .roster-m, .tint .fac-av { background: var(--w); }
.tint .roster-i:hover { background: var(--w); }
.tint .roster-i:hover .roster-m { background: var(--acc-soft); }

/* ------------------------------------------------ 32. dopięcia podstron */

/* powtarzany nagłówek profilu nie musi mieć skali tytułu strony */
.profile-row h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem); }

/* karta cennika: wartością bywa dłuższe hasło, nie tylko kwota */
.price-v { line-height: 1.06; text-wrap: balance; }

/* strona kadry: pole wyszukiwania w rytmie formularzy */
.fac-search input {
  width: 100%; font: inherit; font-size: .97rem; background: var(--g-50);
  border: 1px solid transparent; border-radius: var(--pill); padding: .72rem 1.2rem;
}
.fac-search input:focus {
  outline: 0; background: var(--w); border-color: var(--acc);
  box-shadow: 0 0 0 4px rgba(47, 107, 255, .14);
}

/* ------------------------------------------------- 33. stany z JavaScriptu */

/* płynne wejście zdjęć ładowanych leniwie */
img[data-fade] { opacity: 0; transition: opacity .5s var(--ease); }
img[data-fade].ready { opacity: 1; }

/* mapa w trakcie wczytywania ramki */
.mapwrap.loading .map-go { opacity: .6; pointer-events: none; }

/* --------------------------------------------- 34. cele dotykowe i drobiazgi */

/* odnośniki w stopce miały 18 px wysokości — za mało na palec */
.ftr ul a, .ftr-bar nav a { display: inline-block; padding-block: .25rem; }
.ftr ul { gap: .35rem; }

.check input { width: 20px; height: 20px; }

/* pole wyboru profilu na stronie profili — stan aktywny czytelny */
.chip[data-spy].on { background: var(--ink); color: #fff; }

/* -------------------------------------------- 35. kontrast w ciemnych blokach */

/* odpowiedzi FAQ i listy „etykieta → wartość” na ciemnym tle */
.dark .faq-a p { color: var(--on-dark-2); }
.dark .card p, .dark .card .mono-list span { color: var(--on-dark-2); }
.dark.card { background: var(--ink); color: var(--on-dark); }
.dark.card:hover { background: var(--ink-2); }
.dark.card .kicker { color: var(--acc-3); }

/* pole wysyłki plików w ciemnej sekcji */
.dark .file-drop {
  background: rgba(255, 255, 255, .06); border-color: var(--line-dark);
}
.dark .file-drop:hover, .dark .file-drop.over {
  background: rgba(255, 255, 255, .1); border-color: var(--acc-3);
}
.dark .file-drop .fi { background: rgba(143, 180, 255, .16); color: var(--acc-3); }
.dark .file-drop b { color: #fff; }
.dark .file-drop small { color: var(--on-dark-2); }

/* --------------------------------------------- 36. nagłówek karty nauczyciela */

.fac-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.fac-head > div { flex: 1 1 320px; }
.fac-head h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); max-width: 20ch; }

/* krótkie zdanie-manifest w kafelku */
.quote-sm {
  font-size: 1.22rem; font-weight: 560; line-height: 1.32;
  letter-spacing: -.024em; color: var(--ink);
}
.dark .quote-sm { color: #fff; }