/* ==========================================================================
   Gdzie Po Kredyt — wersja "Odczarowane"
   Ciemna, nocna scena. Jedyne barwy marki: granat #003478 i zloto #6A6021
   z wizytowki, rozpisane na odcienie. Zero bibliotek zewnetrznych.
   ========================================================================== */

:root{
  /* --- granat: od nocy po swiatlo --- */
  --night:#041525;
  --navy-900:#062138;
  --navy-800:#0A2C4C;
  --navy-700:#003478;   /* z logo */
  --navy-600:#0B4A9E;
  --navy-400:#4E82C8;
  --navy-200:#9FC0E6;
  --navy-100:#D3E3F5;

  /* --- zloto: od cienia po blask --- */
  --gold-800:#4A421A;
  --gold-700:#6A6021;   /* z logo */
  --gold-600:#8C7C2C;
  --gold-500:#B49B3C;
  --gold-400:#D0B75F;
  --gold-300:#E6D49A;

  /* --- neutralne, ciagle w tonacji marki --- */
  --porcelain:#F7F4ED;
  --paper:#FFFFFF;
  --ink:#0C1520;
  --muted:#5D6A78;

  --font-display:"Bodoni Moda","Didot","Times New Roman",serif;
  --font-sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1220px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --r:18px;
  --r-lg:26px;
  --ease:cubic-bezier(.16,.84,.34,1);
  --glow:0 40px 120px -50px rgba(180,155,60,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0;color:var(--navy-100);background:var(--night);
  font-family:var(--font-sans);font-size:1rem;line-height:1.65;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
/* ziarno na calej stronie — granat przestaje byc plaski */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:url("../img/ziarno.png") repeat;opacity:.5;mix-blend-mode:overlay;
}
img,svg,canvas{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.04;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4.5rem,10vw,9rem);position:relative}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--gold-400);color:var(--night);padding:.7rem 1.1rem;border-radius:8px}

/* ---------- wspolne elementy typograficzne ---------- */
.kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-400);font-weight:400;
}
.kicker::before{content:"";width:1.8rem;height:1px;background:currentColor;opacity:.7}
.kicker--dark{color:var(--gold-700)}

.display{font-size:clamp(2.9rem,7vw,6rem);line-height:.98;letter-spacing:-.02em}
.h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.h3{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.lede{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--navy-200);max-width:54ch;font-weight:300}
.lede--ink{color:var(--muted)}
em.shine{
  font-style:italic;
  background:linear-gradient(96deg,var(--gold-300),var(--gold-500) 45%,var(--gold-300));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.head{display:grid;gap:1.15rem;margin-bottom:clamp(2.5rem,5vw,4rem);max-width:46rem}
.head--center{margin-inline:auto;text-align:center;justify-items:center}

/* ---------- przyciski ---------- */
.btn{
  --bg:var(--gold-400);--fg:var(--night);--bd:var(--gold-400);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.25rem;padding:.9rem 1.75rem;min-width:fit-content;white-space:nowrap;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);border-radius:999px;
  font-weight:500;font-size:.94rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.btn::after{ /* przeciagniecie blaskiem przy najechaniu */
  content:"";position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(208,183,95,.7)}
.btn:hover::after{transform:translateX(110%)}
.btn--ghost{--bg:transparent;--fg:var(--navy-100);--bd:rgba(159,192,230,.32)}
.btn--ghost:hover{--bg:rgba(159,192,230,.08);box-shadow:none}
.btn--ink{--bg:var(--navy-700);--fg:#fff;--bd:var(--navy-700)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* ---------- naglowek ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),backdrop-filter .4s}
.header.is-stuck{background:rgba(4,21,37,.78);backdrop-filter:blur(18px) saturate(140%)}
.header__bar{display:flex;align-items:center;gap:1.5rem;min-height:5.25rem}
.header__logo{flex:none;display:flex;align-items:center;text-decoration:none}
.header__logo img{width:clamp(7.5rem,11vw,9.5rem);filter:brightness(0) invert(1);opacity:.95;
  transition:opacity .3s var(--ease)}
.header__logo:hover img{opacity:1}
.nav{margin-left:auto;display:none}
.nav ul{display:flex;align-items:center;gap:clamp(1.1rem,2vw,2.1rem)}
.nav a{position:relative;text-decoration:none;font-size:.88rem;letter-spacing:.03em;color:var(--navy-200);
  padding-block:.35rem;white-space:nowrap;transition:color .25s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-400);
  transition:right .35s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.header__cta{display:none}
.progress{position:absolute;left:0;bottom:0;height:1px;width:100%;background:rgba(159,192,230,.12)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-700),var(--gold-300));
  transition:width .1s linear}

.burger{margin-left:auto;flex:none;width:3rem;height:3rem;display:grid;place-items:center;cursor:pointer;
  background:rgba(159,192,230,.07);border:1px solid rgba(159,192,230,.2);border-radius:999px}
.burger span{width:1.05rem;height:1px;background:var(--navy-100);position:relative;display:block}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--navy-100);
  transition:transform .35s var(--ease),top .35s var(--ease)}
.burger span::before{top:-.36rem}
.burger span::after{top:.36rem}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:45;background:rgba(4,21,37,.97);backdrop-filter:blur(10px);
  display:grid;align-content:center;gap:.4rem;padding:6rem var(--gutter) 3rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{font-family:var(--font-display);font-size:clamp(1.9rem,7vw,2.6rem);text-decoration:none;
  padding-block:.45rem;border-bottom:1px solid rgba(159,192,230,.12);color:#fff}
.drawer .btn{margin-top:1.75rem;justify-self:start}
@media (min-width:64rem){
  .nav{display:block}
  .header__cta{display:inline-flex}
  .burger,.drawer{display:none}
}

/* ==========================================================================
   HERO — "soczewka": mgla pojec finansowych, ktora rozjasnia sie pod kursorem
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;
  padding-block:clamp(7rem,14vh,10rem) clamp(3rem,8vh,5rem);overflow:hidden;isolation:isolate}

/* tlo: warstwice mazurskich jezior, bardzo wolno dryfujace */
.hero__map{position:absolute;inset:-12% -6%;z-index:-3;opacity:.5;
  background:url("../img/kontury-mazury.svg") center/cover no-repeat;
  animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.08)}}

/* swiatlo: dwa zlote zrodla i granatowa poswiata */
.hero__glow{position:absolute;inset:0;z-index:-4;pointer-events:none}
.hero__glow span{position:absolute;border-radius:50%;filter:blur(90px)}
.hero__glow span:nth-child(1){width:46rem;height:46rem;left:-10rem;top:-14rem;
  background:radial-gradient(circle,rgba(180,155,60,.28),transparent 66%);animation:float-a 30s ease-in-out infinite alternate}
.hero__glow span:nth-child(2){width:40rem;height:40rem;right:-12rem;bottom:-16rem;
  background:radial-gradient(circle,rgba(11,74,158,.5),transparent 66%);animation:float-b 36s ease-in-out infinite alternate}
@keyframes float-a{to{transform:translate3d(5rem,3rem,0) scale(1.15)}}
@keyframes float-b{to{transform:translate3d(-4rem,-3rem,0) scale(.9)}}

/* mgla i jej ostra wersja — obie warstwy leza na sobie */
.fog,.lens{position:absolute;inset:0;z-index:-2;pointer-events:none;
  display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:.35rem 1.35rem;
  padding:6rem 2rem;transform:rotate(-8deg) scale(1.25);transform-origin:center;
  font-size:clamp(.78rem,1.15vw,1rem);letter-spacing:.16em;text-transform:uppercase;user-select:none}
.fog{
  color:rgba(159,192,230,.3);filter:blur(3.5px);
  /* mgla nie wchodzi na kolumne z tekstem — wygaszamy ja po lewej */
  -webkit-mask-image:linear-gradient(90deg,transparent 0 26%,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0 26%,#000 46%);
}
.lens{
  z-index:-1;color:var(--gold-300);filter:none;font-weight:400;
  /* dwie maski naraz: krag soczewki ORAZ wygaszenie po lewej stronie */
  -webkit-mask-image:
    radial-gradient(circle var(--lens-r,180px) at var(--lens-x,50%) var(--lens-y,42%),
      #000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%),
    linear-gradient(90deg,transparent 0 26%,#000 46%);
  mask-image:
    radial-gradient(circle var(--lens-r,180px) at var(--lens-x,50%) var(--lens-y,42%),
      #000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%),
    linear-gradient(90deg,transparent 0 26%,#000 46%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.fog span,.lens span{white-space:nowrap}
/* delikatna obwodka soczewki */
.hero__ring{position:absolute;z-index:-1;width:calc(var(--lens-r,180px) * 2);height:calc(var(--lens-r,180px) * 2);
  left:var(--lens-x,50%);top:var(--lens-y,42%);transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(208,183,95,.22);pointer-events:none;
  box-shadow:0 0 90px 20px rgba(180,155,60,.09) inset}

.hero__inner{position:relative;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;width:100%}
.hero__copy{display:grid;gap:1.6rem;justify-items:start;max-width:38rem}
.hero h1{font-size:clamp(3rem,7.4vw,6.1rem);line-height:.96;color:#fff;text-wrap:balance}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;transform:translateY(102%);animation:rise 1.1s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
.hero__note{font-size:.82rem;color:var(--navy-200);opacity:.72;display:flex;align-items:center;gap:.5rem;
  transition:opacity .7s var(--ease)}
.hero__note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-400);
  box-shadow:0 0 0 0 rgba(208,183,95,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(208,183,95,0)}100%{box-shadow:0 0 0 0 rgba(208,183,95,0)}}

/* karta z portretem — reaguje przechyleniem na ruch kursora */
.hero__card{position:relative;justify-self:center;width:min(100%,25rem);perspective:1200px}
.hero__card-inner{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(165deg,var(--navy-800),var(--night));
  box-shadow:0 50px 120px -60px rgba(0,0,0,.9),0 0 0 1px rgba(208,183,95,.18);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);
  transform-style:preserve-3d;
}
.hero__card-inner img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 10%;
  filter:saturate(.85) contrast(1.06) brightness(.95)}
.hero__card-inner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(4,21,37,.85) 100%)}
.hero__tag{
  position:absolute;left:1.25rem;right:1.25rem;bottom:1.15rem;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
}
.hero__tag b{display:block;font-family:var(--font-display);font-size:1.45rem;color:#fff;font-weight:500}
.hero__tag span{display:block;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
.hero__seal{
  flex:none;width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:1px solid rgba(208,183,95,.5);background:rgba(4,21,37,.55);backdrop-filter:blur(6px);
  font-size:.62rem;letter-spacing:.1em;color:var(--gold-300);line-height:1.25;
}
.hero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  display:grid;justify-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(159,192,230,.6)}
.hero__scroll i{display:block;width:1px;height:2.6rem;background:linear-gradient(var(--gold-400),transparent);
  animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (min-width:62rem){
  .hero__inner{grid-template-columns:1.15fr .85fr}
  .hero__card{justify-self:end}
}

/* ---------- pasek liczb ---------- */
.figures{border-block:1px solid rgba(159,192,230,.12);background:rgba(6,33,56,.5)}
.figures ul{display:grid;grid-template-columns:repeat(2,1fr)}
.figures li{padding:clamp(1.5rem,3vw,2.25rem) clamp(.75rem,2vw,1.5rem);display:grid;gap:.35rem;
  border-right:1px solid rgba(159,192,230,.1);border-bottom:1px solid rgba(159,192,230,.1)}
.figures li:nth-child(2n){border-right:0}
.figures li:nth-child(n+3){border-bottom:0}
.figures b{font-family:var(--font-display);font-size:clamp(1.9rem,3.6vw,2.9rem);color:#fff;font-weight:500;
  font-variant-numeric:tabular-nums}
.figures span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy-200);opacity:.8}
@media (min-width:56rem){
  .figures ul{grid-template-columns:repeat(4,1fr)}
  .figures li{border-bottom:0}
  .figures li:nth-child(2n){border-right:1px solid rgba(159,192,230,.1)}
  .figures li:last-child{border-right:0}
}

/* ---------- sciezki: przelaczane karty ---------- */
.paths__tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2.5rem}
.tab{
  padding:.7rem 1.25rem;border-radius:999px;border:1px solid rgba(159,192,230,.22);
  background:transparent;color:var(--navy-200);font-size:.9rem;cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.tab:hover{color:#fff;border-color:rgba(208,183,95,.45)}
.tab[aria-selected="true"]{background:var(--gold-400);border-color:var(--gold-400);color:var(--night);font-weight:500}
.panel[hidden]{display:none}
.panel{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;animation:fade .55s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel__body{display:grid;gap:1.15rem}
.panel__body p{color:var(--navy-200);font-weight:300}
.panel__list{display:grid;gap:.75rem;margin-top:.4rem}
.panel__list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.97rem;color:var(--navy-200)}
.panel__list svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.3rem;color:var(--gold-400)}
.panel__art{position:relative;display:grid;place-items:center;padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid rgba(159,192,230,.14);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(10,44,76,.75),rgba(4,21,37,.4));min-height:16rem}
.panel__art svg{width:min(100%,19rem);height:auto;overflow:visible}
.panel__art svg [data-draw]{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  animation:draw 2.4s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (min-width:56rem){.panel{grid-template-columns:1.05fr .95fr}}

/* ---------- kalkulator ---------- */
.calc{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.calc__box{
  border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.75rem);
  background:linear-gradient(160deg,rgba(10,44,76,.9),rgba(4,21,37,.75));
  border:1px solid rgba(208,183,95,.2);box-shadow:var(--glow);display:grid;gap:1.75rem;align-content:start;
}
.ctrl{display:grid;gap:.7rem}
.ctrl__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.ctrl__top label{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-200)}
.ctrl__val{font-family:var(--font-display);font-size:1.35rem;color:var(--gold-300);font-variant-numeric:tabular-nums}
input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:2px;background:rgba(159,192,230,.25);
  outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:1.15rem;height:1.15rem;border-radius:50%;
  background:var(--gold-400);border:3px solid var(--night);box-shadow:0 0 0 1px var(--gold-500),0 6px 18px -6px rgba(208,183,95,.9);
  transition:transform .2s var(--ease)}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type="range"]::-moz-range-thumb{width:1.15rem;height:1.15rem;border-radius:50%;background:var(--gold-400);
  border:3px solid var(--night);box-shadow:0 0 0 1px var(--gold-500)}
.calc__out{
  display:grid;gap:1.25rem;border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.75rem);align-content:center;
  background:radial-gradient(120% 120% at 20% 0%,rgba(11,74,158,.45),rgba(4,21,37,.9));
  border:1px solid rgba(159,192,230,.16);
}
.calc__rata{display:grid;gap:.3rem}
.calc__rata b{font-family:var(--font-display);font-size:clamp(3rem,7vw,4.6rem);line-height:1;color:#fff;
  font-weight:500;font-variant-numeric:tabular-nums}
.calc__rata span{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300)}
.calc__split{display:grid;gap:.55rem}
.calc__bar{height:.55rem;border-radius:999px;overflow:hidden;display:flex;background:rgba(159,192,230,.14)}
.calc__bar i{display:block;height:100%;transition:width .5s var(--ease)}
.calc__bar i:nth-child(1){background:linear-gradient(90deg,var(--navy-600),var(--navy-400))}
.calc__bar i:nth-child(2){background:linear-gradient(90deg,var(--gold-600),var(--gold-300))}
.calc__legend{display:flex;flex-wrap:wrap;gap:1.25rem;font-size:.84rem;color:var(--navy-200)}
.calc__legend b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums}
.calc__legend span{display:inline-flex;align-items:center;gap:.5rem}
.calc__legend i{width:.6rem;height:.6rem;border-radius:50%;flex:none}
.calc__legend span:nth-child(1) i{background:var(--navy-400)}
.calc__legend span:nth-child(2) i{background:var(--gold-300)}
.calc__foot{font-size:.76rem;color:var(--navy-200);opacity:.7;line-height:1.55;border-top:1px solid rgba(159,192,230,.14);
  padding-top:1rem}
@media (min-width:56rem){.calc{grid-template-columns:1.05fr .95fr}}

/* ---------- proces ---------- */
.steps-shell{position:relative}
.steps{position:relative;display:grid;gap:clamp(2rem,4vw,3rem)}
.steps::before{content:"";position:absolute;left:1.1rem;top:.5rem;bottom:.5rem;width:1px;
  background:rgba(159,192,230,.16)}
.steps__fill{position:absolute;left:1.1rem;top:.5rem;width:1px;height:0;
  background:linear-gradient(var(--gold-300),var(--gold-600));transition:height .15s linear}
.step{position:relative;padding-left:3.6rem;display:grid;gap:.5rem}
.step__dot{position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--night);border:1px solid rgba(208,183,95,.4);font-size:.74rem;color:var(--gold-300);
  font-variant-numeric:tabular-nums;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.step.is-on .step__dot{background:var(--gold-400);color:var(--night);transform:scale(1.08)}
.step p{color:var(--navy-200);max-width:62ch;font-weight:300}
@media (min-width:64rem){
  .steps{grid-template-columns:repeat(4,1fr);gap:1.75rem}
  .steps::before,.steps__fill{left:.5rem;right:.5rem;top:1.1rem;bottom:auto;width:auto;height:1px}
  .steps__fill{width:0;height:1px;background:linear-gradient(90deg,var(--gold-300),var(--gold-600));transition:width .15s linear}
  .step{padding:3.6rem 0 0}
}

/* ---------- o mnie ---------- */
.about{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
.about__media{position:relative;justify-self:center;width:min(100%,24rem)}
.about__media img{border-radius:var(--r-lg);box-shadow:0 50px 110px -60px #000}
.about__media::after{content:"";position:absolute;inset:auto -1.25rem -1.25rem auto;width:65%;height:70%;
  border:1px solid rgba(208,183,95,.35);border-radius:var(--r-lg);z-index:-1}
.about__body{display:grid;gap:1.2rem}
.about__body p{color:var(--navy-200);font-weight:300}
.quote{
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.6vw,1.95rem);line-height:1.28;
  color:#fff;padding-left:1.5rem;border-left:1px solid var(--gold-500);margin-block:.5rem;
}
.about__meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.5rem}
.chip{font-size:.78rem;letter-spacing:.06em;color:var(--gold-300);border:1px solid rgba(208,183,95,.28);
  border-radius:999px;padding:.35rem .85rem}
@media (min-width:56rem){.about{grid-template-columns:.8fr 1.2fr}}

/* ---------- opinie ---------- */
.rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.25rem;
  scrollbar-width:thin;scrollbar-color:rgba(208,183,95,.5) transparent}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:rgba(208,183,95,.5);border-radius:4px}
.rail figure{flex:0 0 min(88%,24rem);scroll-snap-align:start;margin:0;display:grid;gap:1.15rem;align-content:start;
  padding:clamp(1.5rem,3vw,2.1rem);border-radius:var(--r-lg);border:1px solid rgba(159,192,230,.14);
  background:linear-gradient(160deg,rgba(10,44,76,.6),rgba(4,21,37,.35));
  transition:border-color .35s var(--ease),transform .35s var(--ease)}
.rail figure:hover{border-color:rgba(208,183,95,.4);transform:translateY(-4px)}
.rail blockquote{margin:0;font-family:var(--font-display);font-size:1.18rem;line-height:1.45;color:#fff;font-weight:400}
.rail figcaption{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--navy-200);
  border-top:1px solid rgba(159,192,230,.14);padding-top:.9rem}
.rail figcaption b{color:var(--gold-300);font-weight:500}
.stars{display:flex;gap:.15rem;color:var(--gold-400)}
.stars svg{width:1rem;height:1rem}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:56rem}
.faq details{border:1px solid rgba(159,192,230,.16);border-radius:var(--r);padding:0 1.35rem;
  background:rgba(10,44,76,.35);transition:border-color .3s var(--ease),background .3s var(--ease)}
.faq details[open]{border-color:rgba(208,183,95,.38);background:rgba(10,44,76,.6)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:center;padding-block:1.15rem;
  font-family:var(--font-display);font-size:1.12rem;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:.6rem;height:.6rem;
  border-right:1px solid var(--gold-400);border-bottom:1px solid var(--gold-400);transform:rotate(45deg);
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{color:var(--navy-200);padding-bottom:1.25rem;font-weight:300;max-width:62ch}

/* ---------- kontakt: jasny panel jako kontrapunkt ---------- */
.contact{background:var(--porcelain);color:var(--ink);border-radius:clamp(20px,4vw,42px);
  padding:clamp(2rem,5vw,4rem);display:grid;gap:clamp(2rem,4vw,3.5rem);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;right:-8rem;top:-8rem;width:26rem;height:26rem;border-radius:50%;
  background:radial-gradient(circle,rgba(180,155,60,.16),transparent 65%)}
.contact h2,.contact .quote{color:var(--ink)}
.contact .kicker{color:var(--gold-700)}
.contact__aside{position:relative;display:grid;gap:1.4rem;align-content:start}
.contact__direct{display:grid;gap:.7rem}
.contact__direct a{display:flex;gap:.9rem;align-items:center;text-decoration:none;padding:.95rem 1.15rem;
  border:1px solid rgba(12,21,32,.12);border-radius:var(--r);transition:border-color .3s var(--ease),background .3s var(--ease)}
.contact__direct a:hover{border-color:var(--gold-500);background:rgba(180,155,60,.07)}
.contact__direct svg{width:1.2rem;height:1.2rem;flex:none;color:var(--gold-700)}
.contact__direct b{display:block;font-weight:500}
.contact__direct small{display:block;font-size:.78rem;color:var(--muted)}
.hours{display:grid;gap:.3rem;font-size:.88rem;color:var(--muted)}
.hours div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.3rem;
  border-bottom:1px dotted rgba(12,21,32,.14)}
.hours b{color:var(--ink);font-weight:500}

.form{position:relative;display:grid;gap:1.1rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field .req{color:var(--gold-700)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;border:1px solid rgba(12,21,32,.15);border-radius:12px;background:var(--paper);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-700);
  box-shadow:0 0 0 3px rgba(0,52,120,.1)}
.field textarea{min-height:7rem;resize:vertical}
.field__err{font-size:.8rem;color:#9E2B22;display:none}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#9E2B22}
.field.is-bad .field__err{display:block}
.form__row{display:grid;gap:1.1rem}
@media (min-width:38rem){.form__row{grid-template-columns:1fr 1fr}}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--muted);line-height:1.5}
.consent input{margin-top:.2rem;width:1.05rem;height:1.05rem;flex:none;accent-color:var(--navy-700)}
.consent a{color:var(--navy-700)}
.form__note{font-size:.78rem;color:var(--muted)}
.form__status{display:none;padding:.9rem 1.1rem;border-radius:12px;font-size:.9rem}
.form__status.ok{display:block;background:#E8F3EA;color:#1D5A2E;border:1px solid #BCDCC3}
.form__status.bad{display:block;background:#FBEBE9;color:#8C231B;border:1px solid #F0C7C2}
.hp{position:absolute;left:-9999px}
@media (min-width:56rem){.contact{grid-template-columns:.85fr 1.15fr}}

/* ---------- stopka ---------- */
.footer{border-top:1px solid rgba(159,192,230,.12);padding-block:clamp(3rem,6vw,4.5rem);margin-top:clamp(4rem,8vw,7rem)}
.footer__grid{display:grid;gap:2.25rem}
.footer__brand img{width:10rem;filter:brightness(0) invert(1);opacity:.9}
.footer__brand p{margin-top:1rem;font-size:.88rem;color:var(--navy-200);max-width:34ch;font-weight:300}
.footer h4{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:1rem;font-weight:400}
.footer ul{display:grid;gap:.55rem;font-size:.9rem;color:var(--navy-200)}
.footer a{text-decoration:none;transition:color .25s var(--ease)}
.footer a:hover{color:#fff}
.socials{display:flex;gap:.55rem;margin-top:1.25rem}
.socials a{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(159,192,230,.2);transition:border-color .3s var(--ease),background .3s var(--ease)}
.socials a:hover{border-color:var(--gold-400);background:rgba(208,183,95,.12)}
.socials svg{width:1.05rem;height:1.05rem}
.legal{margin-top:2rem;font-size:.76rem;color:rgba(159,192,230,.6);line-height:1.6;max-width:72ch}
.footer__bottom{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid rgba(159,192,230,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.78rem;color:var(--navy-200)}
@media (min-width:56rem){.footer__grid{grid-template-columns:1.5fr .8fr .8fr 1fr}}

/* ---------- pasek mobilny ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.6rem;
  padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(4,21,37,.92);backdrop-filter:blur(14px);border-top:1px solid rgba(159,192,230,.14);
  transform:translateY(120%);transition:transform .45s var(--ease)}
.callbar.is-on{transform:none}
.callbar .btn{flex:1;min-height:2.95rem;font-size:.88rem;padding-inline:1rem}
@media (min-width:64rem){.callbar{display:none}}
@media (max-width:63.99rem){body.has-callbar{padding-bottom:4.6rem}}

/* ---------- odsloniecia ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .hero h1 .line > span{transform:none;animation:none}
  .hero__map,.hero__glow span{animation:none}
  .panel__art svg [data-draw]{stroke-dashoffset:0;animation:none}
}

/* ---------- hero: warstwa fotograficzna, ktora "odczarowuje sie" pod soczewka ---------- */
.hero__photo{
  position:absolute;inset:0;z-index:-6;pointer-events:none;
  background:url("../img/tlo-hero.webp") center/cover no-repeat;
  filter:grayscale(.35) brightness(.5) contrast(1.06);
  transform:scale(1.06);animation:breathe 40s ease-in-out infinite alternate;
}
.hero__photo--lit{
  /* nad zaslona (.hero::before, takze -1): inaczej soczewka rozjasnia warstwe,
     ktora zaraz potem jest przygaszana i przy ciemnym ekranie nic nie widac */
  z-index:-1;filter:brightness(1.15) saturate(1.05);opacity:1;
  -webkit-mask-image:radial-gradient(circle var(--lens-r,180px) at var(--lens-x,50%) var(--lens-y,42%),
    #000 0%,#000 38%,rgba(0,0,0,.4) 70%,transparent 100%);
  mask-image:radial-gradient(circle var(--lens-r,180px) at var(--lens-x,50%) var(--lens-y,42%),
    #000 0%,#000 38%,rgba(0,0,0,.4) 70%,transparent 100%);
}
@keyframes breathe{to{transform:scale(1.14)}}
.hero::before{ /* przyciemnienie nad mgla — dzieki temu tekst zawsze wygrywa */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,rgba(4,21,37,.9) 0%,rgba(4,21,37,.62) 45%,rgba(4,21,37,.38) 100%);
}
@media (max-width:61.99rem){
  .hero::before{background:linear-gradient(180deg,rgba(4,21,37,.86) 0%,rgba(4,21,37,.78) 32%,rgba(4,21,37,.58) 60%,rgba(4,21,37,.88) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero__photo{animation:none}}

/* na telefonie soczewka jest mniejsza i startuje wyzej */
@media (max-width:47.99rem){
  .fog,.lens{transform:rotate(-9deg) scale(1.3);gap:.25rem .8rem;
    font-size:.62rem;letter-spacing:.1em}
  .fog{-webkit-mask-image:linear-gradient(180deg,transparent 0 38%,#000 56%);
       mask-image:linear-gradient(180deg,transparent 0 38%,#000 56%)}
  .lens{
    -webkit-mask-image:
      radial-gradient(circle var(--lens-r,130px) at var(--lens-x,50%) var(--lens-y,42%),
        #000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%),
      linear-gradient(180deg,transparent 0 38%,#000 56%);
    mask-image:
      radial-gradient(circle var(--lens-r,130px) at var(--lens-x,50%) var(--lens-y,42%),
        #000 0%,#000 42%,rgba(0,0,0,.55) 68%,transparent 100%),
      linear-gradient(180deg,transparent 0 38%,#000 56%);
  }
  .hero__card{width:min(78%,17rem)}
  .hero__tag b{font-size:1.2rem}
}

/* ---------- strona prawna ---------- */
.legal-page{padding-top:clamp(8rem,14vw,11rem)}
.legal-doc{display:grid;gap:1.35rem;max-width:44rem}
.legal-doc h2{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-top:1.2rem}
.legal-doc p,.legal-doc li{color:var(--navy-200);font-weight:300}
.legal-doc a{color:var(--gold-300)}
.legal-doc ul{display:grid;gap:.5rem;padding-left:1.15rem;list-style:disc}
.legal-doc ul li::marker{color:var(--gold-500)}

/* ==========================================================================
   Podstrony uslugowe
   ========================================================================== */
.pagehero{
  position:relative;display:grid;align-items:end;overflow:hidden;isolation:isolate;
  min-height:clamp(26rem,62vh,36rem);padding-block:clamp(8rem,16vh,11rem) clamp(2.5rem,6vw,4rem);
}
.pagehero__img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;filter:brightness(1.15);
  transform:scale(1.06);animation:breathe 44s ease-in-out infinite alternate}
.pagehero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(105deg,rgba(4,21,37,.9) 0%,rgba(4,21,37,.7) 48%,rgba(4,21,37,.35) 100%)}
.pagehero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,var(--gold-600),transparent)}
.pagehero__inner{position:relative;display:grid;gap:1.15rem;max-width:44rem}
.pagehero h1{font-size:clamp(2.5rem,5.4vw,4.2rem);color:#fff;line-height:1.02}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.78rem;color:var(--navy-200);opacity:.85}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs i{font-style:normal;color:var(--gold-500)}

.split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:56rem){.split{grid-template-columns:1.25fr .75fr}}

.prose{display:grid;gap:1.15rem;max-width:62ch}
.prose h2{margin-top:1.3rem}
.prose p{color:var(--navy-200);font-weight:300}
.prose strong{color:#fff;font-weight:400}
.prose a{color:var(--gold-300)}

.checklist{display:grid;gap:.8rem}
.checklist li{display:flex;gap:.75rem;align-items:flex-start;color:var(--navy-200);font-weight:300}
.checklist svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.3rem;color:var(--gold-400)}
.checklist b{color:#fff;font-weight:400}

.side{display:grid;gap:1.1rem;padding:clamp(1.5rem,3vw,2rem);border-radius:var(--r-lg);
  border:1px solid rgba(208,183,95,.22);background:linear-gradient(160deg,rgba(10,44,76,.85),rgba(4,21,37,.6));
  box-shadow:var(--glow)}
.side h3{font-size:1.2rem;color:#fff}
.side p{font-size:.94rem;color:var(--navy-200);font-weight:300}
.side dl{display:grid;gap:.65rem;margin:0}
.side dl div{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;
  border-bottom:1px dotted rgba(159,192,230,.2);padding-bottom:.5rem}
.side dt{color:var(--navy-200)}
.side dd{margin:0;color:#fff;font-weight:400;text-align:right}

.cards{display:grid;gap:1.15rem}
@media (min-width:44rem){.cards--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:56rem){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{padding:clamp(1.35rem,2.6vw,1.9rem);border-radius:var(--r-lg);display:grid;gap:.6rem;align-content:start;
  border:1px solid rgba(159,192,230,.14);background:linear-gradient(160deg,rgba(10,44,76,.55),rgba(4,21,37,.3));
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(208,183,95,.38)}
.card h3{font-size:1.15rem;color:#fff}
.card p{font-size:.93rem;color:var(--navy-200);font-weight:300}
.card__n{font-family:var(--font-display);font-size:.9rem;color:var(--gold-400)}

.cta-band{position:relative;overflow:hidden;border-radius:clamp(20px,4vw,42px);
  padding:clamp(2rem,5vw,3.5rem);border:1px solid rgba(208,183,95,.25);
  background:linear-gradient(120deg,rgba(0,52,120,.55),rgba(4,21,37,.9));
  display:grid;gap:1.5rem;align-items:center}
.cta-band::before{content:"";position:absolute;right:-12%;top:-60%;width:32rem;height:32rem;border-radius:50%;
  background:radial-gradient(circle,rgba(208,183,95,.22),transparent 62%);pointer-events:none}
.cta-band h2{color:#fff;max-width:18ch;position:relative}
.cta-band .lede{position:relative}
.cta-band .btn-row{position:relative}
@media (min-width:52rem){.cta-band{grid-template-columns:1.25fr .75fr}.cta-band .btn-row{justify-self:end}}

/* na telefonie zaslona podstrony idzie z gory na dol — inaczej naglowek laduje
   na najjasniejszym fragmencie zdjecia */
@media (max-width:61.99rem){
  .pagehero::before{background:linear-gradient(180deg,rgba(4,21,37,.88) 0%,rgba(4,21,37,.72) 45%,rgba(4,21,37,.92) 100%)}
}

/* ---------------------------------------------------------------------------
   Poprawka: panel kontaktowy byl przycinany po prawej na waskich ekranach.

   Adres e-mail to jeden nierozdzielny ciag znakow. Element siatki domyslnie
   ma min-width:auto, czyli NIE kurczy sie ponizej szerokosci swojej najdluzszej
   niepodzielnej tresci — kolumna rozpychala sie szerzej niz panel, a
   overflow:hidden (potrzebne dla zaokraglonych rogow) ucinalo reszte.

   min-width:0 pozwala kolumnie sie zwezic, a overflow-wrap lamie sam adres.
   --------------------------------------------------------------------------- */
.contact > *{min-width:0}
.contact__direct a{min-width:0}
.contact__direct span{min-width:0;overflow-wrap:anywhere}
.contact__direct b{overflow-wrap:anywhere}
.hours div{min-width:0}
.hours span:first-child{min-width:0;overflow-wrap:anywhere}

/* ta sama pulapka czyha w stopce i w kartach — zabezpieczamy z gory */
.footer__grid > *{min-width:0}
.footer ul{overflow-wrap:anywhere}
.card,.side,.panel__body,.prose{min-width:0}

/* na najwezszych ekranach adres schodzi o stopien nizej, zeby nie lamal sie
   w trzech miejscach */
@media (max-width:26rem){
  .contact__direct b{font-size:.92rem;letter-spacing:-.01em}
}

/* ta sama pulapka co w wersji jasnej: przycisk z nowrap rozpychal szuflade menu */
.drawer{overflow-x:clip}
.drawer > *{min-width:0}
.drawer .btn{white-space:normal;min-width:0;text-align:center;padding-inline:1.2rem;line-height:1.3}

/* ta sama pulapka: .drawer a obejmowalo <a class="btn"> i nadawalo mu krój
   szeryfowy w rozmiarze naglowka razem z dolna kreska */
.drawer a.btn{
  font-family:var(--font-sans);
  font-size:.94rem;
  font-weight:500;
  letter-spacing:.02em;
  border-bottom:0;
  padding-block:.9rem;
}


/* ---------------------------------------------------------------------------
   Widoczność soczewki przy przyciemnionym ekranie telefonu.

   Zgłoszenie z testu: przy automatycznej regulacji jasności efektu praktycznie
   nie widać — trzeba ręcznie rozjaśnić telefon. Efekt opierał się na różnicach
   luminancji rzędu kilku procent, a te znikają pierwsze, gdy ekran przygasa.

   Podbijamy trzy rzeczy naraz: jasność samych słów w soczewce, poświatę wokół
   nich (żeby odcinały się od tła niezależnie od jego jasności) oraz czytelność
   obwódki, która podpowiada, gdzie soczewka w ogóle jest.
   --------------------------------------------------------------------------- */
.lens{color:#F0E2AE}
.lens span{text-shadow:0 0 22px rgba(240,226,174,.35)}
.hero__ring{border-color:rgba(230,212,154,.32)}

@media (max-width:47.99rem){
  .fog{color:rgba(159,192,230,.42)}
  .lens{color:#F7EDC8;font-weight:500}
  .lens span{text-shadow:0 0 16px rgba(247,237,200,.55),0 1px 2px rgba(4,21,37,.6)}
  .hero__photo--lit{filter:brightness(1.35) saturate(1.1)}
  .hero__ring{
    border-color:rgba(247,237,200,.5);
    box-shadow:0 0 70px 16px rgba(208,183,95,.16) inset,0 0 30px rgba(208,183,95,.12);
  }
  /* podpowiedz pod przyciskami: teraz przechodza za nia slowa z soczewki,
     wiec potrzebuje wlasnego tla, zeby zostac czytelna */
  .hero__note{
    display:inline-flex;color:var(--navy-100);opacity:1;
    background:rgba(4,21,37,.72);backdrop-filter:blur(6px);
    padding:.4rem .85rem .4rem .7rem;border-radius:999px;
    border:1px solid rgba(159,192,230,.14);
  }
}