/* ═══════════════════════════════════════════════════════════════════
   isiko.pl · style.css · v3 · 2-col hero + CTO section + no tilt/glow
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #0A0A0A;
  --ink-2:      #121215;
  --ink-3:      #1A1A1E;
  --paper:      #FFFFFF;
  --dim:        rgba(255,255,255,.78);
  --mute:       rgba(255,255,255,.48);
  --faint:      rgba(255,255,255,.14);
  --ghost:      rgba(255,255,255,.06);
  --sage:       #C7F05A;
  --sage-dim:   rgba(199,240,90,.14);
  --sun:        #FFD84D;
  --blue:       #2E5CFF;

  --f-display:  'Space Grotesk', sans-serif;
  --f-body:     'Inter', sans-serif;
  --f-serif:    'Instrument Serif', serif;
  --f-mono:     'JetBrains Mono', monospace;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --slide-pad-y: clamp(80px, 10vh, 120px);
  --slide-pad-x: clamp(48px, 7vw, 120px);
}

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

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  width: 100%;
  min-height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--sage); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; color: inherit; font: inherit; }

.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.hl {
  background: var(--sage);
  color: var(--ink);
  padding: 0 0.14em 0.04em;
  line-height: 1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hl-inline { color: var(--sage); }
.dot-end { color: var(--sage); }

/* ════════════════════════════════════════════
   TOP CHROME
   ════════════════════════════════════════════ */
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding: 20px clamp(20px, 3vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.top > * { pointer-events: auto; }

.top-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.03em;
  color: var(--paper);
  opacity: 0;
  transition: opacity .3s var(--ease-out), transform .3s;
}
.top-mark.visible { opacity: 1; }
.top-mark:hover { color: var(--sage); }

.top-actions { display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .3s var(--ease-out); }
.top-actions.visible { opacity: 1; }
.top-btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--faint);
  background: rgba(255,255,255,.03);
  color: var(--dim);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s var(--ease-out);
  height: 40px;
  min-width: 40px;
}
.top-btn:hover {
  border-color: var(--sage);
  color: var(--paper);
}
/* Lang dropdown */
.lang-dropdown {
  position: relative;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.lang-toggle svg {
  transition: transform .2s var(--ease-out);
  opacity: .6;
}
.lang-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  opacity: 1;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(10px);
  border: 1px solid var(--faint);
  border-radius: 10px;
  padding: 6px;
  z-index: 50;
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--dim);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  border: none;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lang-menu a:hover {
  background: rgba(255,255,255,.05);
  color: var(--paper);
}
.lang-menu a.lang-active {
  color: var(--sage);
  background: rgba(199,240,90,.05);
}
.lang-menu .lang-code {
  font-weight: 600;
  letter-spacing: .12em;
  min-width: 22px;
}
.top-btn-cta {
  background: var(--sage);
  color: var(--ink);
  border-color: var(--sage);
  padding: 10px 18px;
}
.top-btn-cta:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ════════════════════════════════════════════
   PROGRESS BAR
   ════════════════════════════════════════════ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.04);
  z-index: 39;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--sage);
  transition: width .25s var(--ease-out);
  box-shadow: 0 0 8px var(--sage);
}

/* ════════════════════════════════════════════
   DOTS NAV (right)
   ════════════════════════════════════════════ */
.dots {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.dots.visible { opacity: 1; }

.dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--mute);
  background: transparent;
  cursor: pointer;
  transition: all .3s var(--ease-out);
  padding: 0;
}
.dot:hover { border-color: var(--paper); }
.dot.active {
  background: var(--sage);
  border-color: var(--sage);
  box-shadow: 0 0 12px var(--sage);
  transform: scale(1.3);
}
.dot-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--faint);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease-out);
}
.dot:hover .dot-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ════════════════════════════════════════════
   SCROLL HINT (vertical arrow down)
   ════════════════════════════════════════════ */
.hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mute);
  font-size: 10px;
  opacity: 0;
  transition: opacity .4s;
}
.hint svg { transform: rotate(0deg); }
.hint.visible { opacity: 1; animation: hint-bob 2.8s ease-in-out infinite; }
.hint.hidden { opacity: 0; pointer-events: none; }
@keyframes hint-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ════════════════════════════════════════════
   SLIDES · horizontal
   ════════════════════════════════════════════ */
.slides {
  display: block;
  width: 100%;
}

.slide {
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  padding: var(--slide-pad-y) var(--slide-pad-x);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ════════════════════════════════════════════
   01 · HERO · 2-column
   ════════════════════════════════════════════ */
.slide-hero { background: var(--ink); }

.hero-inner-2col {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  text-align: left;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
}

/* Starry swirl bg */
.starry {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.swirl {
  position: absolute;
  border-radius: 50%;
  opacity: 0.045;
  will-change: transform;
  background: conic-gradient(
    from var(--a, 0deg),
    transparent,
    rgba(199,240,90,.3),
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
}
.sw-1 {
  width: 55vmax; height: 55vmax;
  top: -15%; right: -10%;
  --a: 0deg;
  animation: spin 45s linear infinite;
}
.sw-2 {
  width: 40vmax; height: 40vmax;
  bottom: -12%; left: -8%;
  --a: 180deg;
  animation: spin-r 60s linear infinite;
  opacity: 0.04;
}
.sw-3 {
  width: 25vmax; height: 25vmax;
  top: 20%; left: 30%;
  --a: 90deg;
  animation: spin 30s linear infinite;
  opacity: 0.03;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-r { to { transform: rotate(-360deg); } }

.hero-left { max-width: 900px; }

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 40px;
  opacity: 0;
}
.pill-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ink);
}

.hero-headline {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(48px, 7.5vw, 136px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--paper);
  margin-bottom: 32px;
}
.hero-headline .line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}
.hero-headline .hl {
  display: inline-block;
  padding: 0 0.14em 0.02em;
}

.hero-sub {
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 640px;
  margin-bottom: 36px;
  opacity: 0;
}
.hero-sub b { color: var(--paper); font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  margin-bottom: 40px;
}

.hero-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--mute);
  opacity: 0;
}
.hero-meta .sep { color: var(--sage); }

.hero-proof {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: var(--dim);
  opacity: 0;
  margin-bottom: 28px;
  line-height: 1.6;
}
.hero-proof a {
  color: var(--paper);
  border-bottom: 1px dashed var(--sage);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.hero-proof a:hover { color: var(--sage); border-bottom-color: var(--paper); }
.hero-proof .sep { color: var(--sage); }
.hero-proof .proof-tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mute);
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--sage);
  border-radius: 999px;
  margin-right: 4px;
}

/* Hero right — logo */
.hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.hero-logo-wrap {
  width: 100%;
  max-width: 540px;
  transition: transform 0.4s var(--ease-out);
}
.hero-logo {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 32px rgba(199,240,90,.18));
}
.hero-logo .letter { opacity: 0; }
.hero-logo-wrap.idle-pulse { animation: logo-breathe 3.5s ease-in-out infinite; }
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background .25s, color .25s, box-shadow .3s;
  text-transform: lowercase;
}
.btn-primary {
  background: var(--sage);
  color: var(--ink);
}
.btn-primary:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(199,240,90,.3);
}
.btn-ghost {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
}
.btn-xl { padding: 20px 32px; font-size: 16px; }

/* ════════════════════════════════════════════
   SECTION HEAD
   ════════════════════════════════════════════ */
.sec-head { max-width: 1100px; margin-bottom: 56px; }
.sec-num {
  color: var(--sage);
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-bottom: 16px;
}
.sec-kicker { color: var(--mute); margin-bottom: 28px; }
.sec-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin-bottom: 20px;
}
.sec-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 680px;
}

/* ════════════════════════════════════════════
   02 · DOLEGLIWOŚCI · editorial 2-col layout
   ════════════════════════════════════════════ */
.slide-dolega { background: var(--ink); }

.dolega-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
}

.dolega-aside { align-self: center; }
.dolega-aside .sec-num { color: var(--sage); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 16px; }
.dolega-aside .sec-kicker { color: var(--mute); margin-bottom: 28px; }
.dolega-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin-bottom: 24px;
}
.dolega-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 460px;
  margin-bottom: 36px;
}
.dolega-ruler {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--faint);
  color: var(--sage);
}

.dolega-list {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
}

.dolega-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--faint);
  align-items: baseline;
  transition: border-color .3s, padding-left .35s var(--ease-out);
  cursor: default;
  position: relative;
}
.dolega-row:last-child { border-bottom: 1px solid var(--faint); }
.dolega-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sage);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease-out);
}
.dolega-row:hover::before {
  transform: scaleY(1);
}
.dolega-row:hover {
  border-top-color: transparent;
  padding-left: 16px;
}
.dolega-row:hover + .dolega-row { border-top-color: transparent; }

.dr-num {
  color: var(--mute);
  font-size: 11px;
  align-self: start;
  margin-top: 6px;
}
.dr-q {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.3;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.dr-q::before { content: '"'; color: var(--sage); margin-right: 2px; }
.dr-q::after  { content: '"'; color: var(--sage); margin-left: 2px; }
.dr-a {
  color: var(--sage);
  font-size: 10px;
  white-space: nowrap;
  align-self: center;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .3s, transform .35s var(--ease-out);
}
.dolega-row:hover .dr-a {
  opacity: 1;
  transform: translateX(0);
}

.dolega-row-sage {
  background: var(--sage);
  margin-top: 8px;
  padding: 22px 24px;
  border-top: none !important;
  grid-template-columns: 52px 1fr;
}
.dolega-row-sage::before { display: none; }
.dolega-row-sage .dr-num { color: var(--ink); opacity: 0.55; }
.dolega-row-sage .dr-q { color: var(--ink); }
.dolega-row-sage .dr-q::before,
.dolega-row-sage .dr-q::after { display: none; }
.dolega-row-sage:hover { padding-left: 24px; }

/* ════════════════════════════════════════════
   03 · CTO slash styling
   ════════════════════════════════════════════ */
.cto-slash {
  color: var(--ink);
  opacity: 0.45;
  font-weight: 400;
  margin: 0 0.04em;
}

/* ════════════════════════════════════════════
   08 · KONTAKT FORM
   ════════════════════════════════════════════ */
.kontakt-form {
  padding: 28px 30px 24px;
  background: var(--ghost);
  border: 1px solid var(--faint);
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transition: border-color .3s;
  max-width: 560px;
  width: 100%;
}
.kontakt-form:focus-within { border-color: var(--sage); }

.kf-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.kf-field { display: flex; flex-direction: column; gap: 8px; }
.kf-field label {
  color: var(--mute);
  font-size: 10px;
}
.kf-field input,
.kf-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--faint);
  padding: 10px 0 12px;
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  outline: none;
  transition: border-color .25s;
  resize: none;
}
.kf-field input::placeholder,
.kf-field textarea::placeholder {
  color: rgba(255,255,255,.25);
  font-weight: 300;
}
.kf-field input:focus,
.kf-field textarea:focus {
  border-color: var(--sage);
}
.kf-full { grid-column: 1 / -1; }

.kf-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--faint);
  flex-wrap: wrap;
}
.kf-foot .mono {
  color: var(--mute);
  font-size: 10px;
  max-width: 420px;
  line-height: 1.5;
}
.kf-foot .btn { margin-left: auto; }

.kf-success,
.kf-error {
  color: var(--sage);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 20px;
  background: rgba(199,240,90,.08);
  border: 1px solid var(--sage);
  border-radius: 2px;
  text-align: center;
  margin-top: 12px;
}
.kf-error {
  color: #FF6B6B;
  background: rgba(255,107,107,.06);
  border-color: #FF6B6B;
}

/* ════════════════════════════════════════════
   03 · CTO PROPOZYCJA
   ════════════════════════════════════════════ */
.slide-cto { background: var(--ink); }

.cto-layout {
  align-items: center;
  justify-content: center;
  max-width: 1400px;
  padding-top: 60px;
}

.cto-hero {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(44px, 7.2vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 20px 0 36px;
  max-width: 100%;
}
.cto-hero .line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
}
.cto-hero .hl {
  display: inline-block;
  padding: 0 0.12em 0.02em;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .cto-hero { font-size: clamp(36px, 11vw, 64px) !important; }
  .cto-hero .line { white-space: normal; }
}

.cto-sub {
  font-size: clamp(17px, 1.4vw, 24px);
  line-height: 1.5;
  color: var(--dim);
  max-width: 900px;
  margin-bottom: 48px;
  opacity: 0;
}

.cto-stats {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  opacity: 0;
  padding: 28px 0;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}
.cto-stat { display: flex; flex-direction: column; gap: 6px; }
.cto-stat-num {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--sage);
}
.cto-stat-label { color: var(--mute); font-size: 10px; }
.cto-sep {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 48px;
  color: var(--faint);
  line-height: 1;
  margin-bottom: 12px;
}

.cto-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
}

/* ════════════════════════════════════════════
   04 · METODA
   ════════════════════════════════════════════ */
.slide-metoda { background: var(--ink); }

.metoda-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1600px;
  align-content: start;
}

.met-step {
  background: var(--ghost);
  border: 1px solid var(--faint);
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  transition: all .4s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.met-step::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, var(--sage-dim), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.met-step:hover { border-color: var(--sage); }
.met-step:hover::before { opacity: 1; }
.met-step:hover .met-disc { transform-origin: center; transform: translate(50px, 50px) scale(1.12) translate(-50px, -50px); }
.met-step:hover .met-arc { stroke-width: 4.5; }

.met-icon {
  margin-bottom: 24px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.met-disc, .met-arc { transition: all .35s var(--ease-out); transform-box: fill-box; }
.met-num { color: var(--sage); margin-bottom: 12px; }
.met-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 46px;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 20px;
  color: var(--paper);
}
.met-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim);
}

.met-principle {
  margin-top: 28px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  letter-spacing: -0.02em;
  color: var(--mute);
}
.met-principle b {
  background: var(--sage);
  color: var(--ink);
  padding: 0 0.2em 0.04em;
  font-weight: 500;
}

/* ════════════════════════════════════════════
   05 · PRAKTYKA · editorial list (spójny z dolega)
   ════════════════════════════════════════════ */
.slide-praktyka { background: var(--ink); }

.praktyka-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
}

.praktyka-aside .sec-num { color: var(--sage); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 16px; }
.praktyka-aside .sec-kicker { color: var(--mute); margin-bottom: 28px; }
.praktyka-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin-bottom: 24px;
}
.praktyka-lead {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 460px;
  margin-bottom: 36px;
}
.praktyka-ruler {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--faint);
  color: var(--sage);
}

.praktyka-list {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 100%;
}

.praktyka-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--faint);
  align-items: center;
  position: relative;
  transition: padding-left .35s var(--ease-out), border-color .3s;
}
.praktyka-row:last-child { border-bottom: 1px solid var(--faint); }
.praktyka-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sage);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease-out);
}
.praktyka-row:hover::before { transform: scaleY(1); }
.praktyka-row:hover {
  border-top-color: transparent;
  padding-left: 16px;
}
.praktyka-row:hover + .praktyka-row { border-top-color: transparent; }

.pr-num {
  color: var(--mute);
  font-size: 11px;
  align-self: start;
  margin-top: 4px;
}
.pr-body { display: flex; flex-direction: column; gap: 6px; }
.pr-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--paper);
}
.pr-badge {
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: 10px;
  margin-left: 6px;
  text-transform: uppercase;
}
.pr-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 640px;
}
.pr-link {
  color: var(--sage);
  font-size: 10px;
  white-space: nowrap;
  transition: letter-spacing .3s;
  align-self: center;
}
.praktyka-row:hover .pr-link { letter-spacing: 0.22em; }

/* ════════════════════════════════════════════
   06 · PRODUKTY
   ════════════════════════════════════════════ */
.slide-produkty { background: var(--ink); }

.prod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1600px;
  margin-bottom: 24px;
}

.prod-card {
  background: var(--ghost);
  border: 1px solid var(--faint);
  padding: 44px 40px 52px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  transition: all .4s var(--ease-out);
  min-height: 400px;
  cursor: pointer;
}
.prod-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 30%, var(--sage-dim), transparent 45%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.prod-card:hover {
  border-color: var(--sage);
  box-shadow: 0 20px 48px rgba(199,240,90,.1);
}
.prod-card:hover .prod-glow { opacity: 1; }

.prod-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.prod-mark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 68px;
  line-height: 0.9;
  letter-spacing: -0.06em;
  color: var(--paper);
}
.prod-mark span { color: var(--sage); }
.prod-mark-meport span { color: var(--sun); }

.prod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 60%;
}
.prod-tags span {
  font-size: 9px;
  padding: 4px 9px;
  border: 1px solid var(--faint);
  border-radius: 2px;
  color: var(--dim);
}

.prod-name {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--paper);
}
.prod-tagline {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--sage);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.prod-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim);
  flex: 1;
}
.prod-desc b { color: var(--paper); font-weight: 500; }
.prod-cta {
  color: var(--sage);
  font-size: 11px;
  padding-top: 16px;
  border-top: 1px solid var(--faint);
  transition: letter-spacing .3s var(--ease-out);
}
.prod-card:hover .prod-cta { letter-spacing: 0.22em; }

.prod-foot {
  text-align: center;
  color: var(--mute);
  font-size: 10px;
}

/* ════════════════════════════════════════════
   07 · KAROL
   ════════════════════════════════════════════ */
.slide-karol { background: var(--ink); }

.karol-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* Circular portrait — jak logo (ring + inner disc with photo) */
.portrait-circle {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 20px auto 0;
}
.portrait-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--paper);
  border-radius: 50%;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.portrait-img {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background-color: var(--ink-3);
  background-size: cover;
  background-position: center 30%;   /* lekko do góry, żeby twarz była w środku koła */
  background-repeat: no-repeat;
  transition: transform .4s var(--ease-out);
}
.portrait-circle:hover .portrait-ring {
  border-color: var(--sage);
  transform: scale(1.02);
}
.portrait-circle:hover .portrait-img {
  transform: scale(1.04);
}

.karol-quote {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--sage);
  margin-top: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--sage);
}

.karol-right .sec-title { margin-top: 24px; margin-bottom: 32px; }

.karol-bio {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dim);
  margin-bottom: 20px;
  max-width: 760px;
}
.karol-bio b { color: var(--paper); font-weight: 600; }

.karol-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 28px 0;
  padding: 24px 0;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
}
.meta-label { color: var(--mute); margin-bottom: 6px; font-size: 10px; }
.meta-val {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.karol-links {
  display: flex;
  gap: 24px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  flex-wrap: wrap;
}
.karol-links a {
  color: var(--sage);
  border-bottom: 1px solid transparent;
  transition: all .25s;
}
.karol-links a:hover {
  color: var(--paper);
  border-color: var(--paper);
}

/* ════════════════════════════════════════════
   08 · KONTAKT · 2-col
   ════════════════════════════════════════════ */
.slide-kontakt { background: var(--ink); }

.kontakt-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  justify-content: center;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding-block: 40px 60px;
}

.kontakt-left { max-width: 640px; }
.kontakt-left .sec-num { color: var(--sage); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 16px; }
.kontakt-left .sec-kicker { color: var(--mute); margin-bottom: 24px; }

.kontakt-hero {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(52px, 7vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--paper);
  margin: 14px 0 24px;
}
.kontakt-hero .line { display: block; opacity: 0; transform: translateY(30px); }

.kontakt-sub {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--dim);
  max-width: 560px;
  margin-bottom: 28px;
  opacity: 0;
}

.kontakt-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  opacity: 0;
}

.kontakt-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  padding-top: 24px;
  border-top: 1px solid var(--faint);
  opacity: 0;
}
.kontakt-meta .meta-label { margin-bottom: 6px; color: var(--mute); }
.kontakt-meta .meta-val {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.kontakt-meta .meta-val a {
  color: var(--paper);
  border-bottom: 1px solid var(--faint);
  transition: border .2s, color .2s;
}
.kontakt-meta .meta-val a:hover { border-color: var(--sage); color: var(--sage); }

.kf-title {
  color: var(--sage);
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════
   COOKIES BANNER
   ════════════════════════════════════════════ */
.cookies {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  max-width: 640px;
  width: calc(100vw - 40px);
  background: rgba(10,10,10,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--faint);
  border-radius: 8px;
  padding: 16px 20px;
  opacity: 0;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.cookies[hidden] { display: none; }
.cookies.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.cookies-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.cookies p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--dim);
  flex: 1 1 280px;
  margin: 0;
}
.cookies p b { color: var(--paper); }
.cookies p a {
  color: var(--sage);
  border-bottom: 1px solid var(--faint);
}
.cookies-actions .btn {
  padding: 10px 18px;
  font-size: 12px;
}
@media (max-width: 620px) {
  .cookies-inner { flex-direction: column; align-items: stretch; }
  .cookies-actions .btn { width: 100%; justify-content: center; }
}

/* Footer link styling */
.mini-foot a {
  color: var(--mute);
  border-bottom: 1px solid transparent;
  transition: color .2s, border .2s;
}
.mini-foot a:hover {
  color: var(--sage);
  border-color: var(--sage);
}

.mini-foot {
  position: absolute;
  bottom: 32px;
  left: var(--slide-pad-x);
  right: var(--slide-pad-x);
  display: flex;
  justify-content: space-between;
  color: var(--mute);
  font-size: 9px;
  flex-wrap: wrap;
  gap: 12px;
}

/* ════════════════════════════════════════════
   RESPONSIVE · mobile fallback
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .slide-inner { padding: 140px 24px 80px; max-width: 100%; }

  /* Mobile: logo NAD buttonami (Karol request — wersja mobilna) */
  .top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 24px;
  }
  .top-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Mobile: dots u dołu, nie po prawej */
  .dots {
    position: fixed;
    bottom: 20px;
    right: auto;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(10,10,10,.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--faint);
    border-radius: 100px;
    z-index: 50;
  }
  .dots .dot { width: 8px; height: 8px; }
  .dot-tooltip { display: none; }

  .hint { display: none; }

  .hero-inner-2col { grid-template-columns: 1fr; gap: 48px; }
  .hero-left { text-align: left; order: 2; }
  .hero-right { max-width: 340px; margin: 0 auto; order: 1; }
  .hero-logo-wrap { max-width: 320px; }

  .dolega-layout { grid-template-columns: 1fr; gap: 40px; }
  .dolega-list { max-height: none; }
  .dr-q { font-size: 19px; }
  .dr-a { display: none; }

  .praktyka-layout { grid-template-columns: 1fr; gap: 40px; }
  .praktyka-list { max-height: none; }
  .praktyka-row { grid-template-columns: 40px 1fr; }
  .pr-link { grid-column: 2; margin-top: 6px; }

  .kontakt-layout { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
  .kontakt-left { max-width: 100%; }

  .kontakt-form { padding: 24px; max-width: 100%; }
  .kf-foot { flex-direction: column; align-items: stretch; }
  .kf-foot .btn { width: 100%; justify-content: center; margin-left: 0; }
  .metoda-steps { grid-template-columns: 1fr; }
  .met-callout { max-width: 100%; }
  .case-grid { grid-template-columns: 1fr; }
  .prod-grid { grid-template-columns: 1fr; }
  .karol-layout { grid-template-columns: 1fr; }
  .karol-meta { grid-template-columns: 1fr 1fr; }
  .kontakt-meta { grid-template-columns: 1fr 1fr; gap: 20px; }

  .hero-headline { font-size: clamp(42px, 13vw, 72px); }
  .cto-hero { font-size: clamp(56px, 14vw, 100px); }
  .kontakt-hero { font-size: clamp(56px, 16vw, 120px); }

  .cto-stats { gap: 16px; }
  .cto-sep { display: none; }
}

@media (max-width: 520px) {
  .dolega-grid { grid-template-columns: 1fr; }
  .karol-meta { grid-template-columns: 1fr; }
  .kontakt-meta { grid-template-columns: 1fr; }
  .portrait-initials { font-size: 120px; }
  .btn { width: 100%; justify-content: center; }
  .cto-stats { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero-headline .line, .hero-sub, .hero-cta, .hero-meta, .eyebrow-pill,
  .cto-hero .line, .cto-sub, .cto-stats, .cto-cta,
  .kontakt-hero .line, .kontakt-sub, .kontakt-cta, .kontakt-form, .kontakt-meta {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-logo .letter { opacity: 1 !important; }
}