:root{
  --granat:#1c2b4a;
  --granat-ciemny:#152139;
  --tekst:#2b3444;
  --ramka:#dde2ea;
  --blad:#c0392b;
  --ok:#1e8449;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tekst);
  background:#e9eef4 url("img/tlo.png") center/cover no-repeat fixed;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.35));
  pointer-events:none;
}
body.blokada{overflow:hidden}

.wrap{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,40px);
}

/* ---------- karta ---------- */
.card{
  width:100%;
  max-width:520px;
  background:#fff;
  border-radius:clamp(14px,2.5vw,18px);
  padding:clamp(26px,6vw,40px) clamp(20px,5vw,40px) clamp(22px,4vw,30px);
  box-shadow:0 24px 60px rgba(20,33,57,.25),0 2px 8px rgba(20,33,57,.08);
  animation:wjazd .7s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes wjazd{
  from{opacity:0;transform:translateY(28px) scale(.98)}
  to{opacity:1;transform:none}
}

h1{
  margin:0 0 8px;
  font-size:clamp(20px,5.5vw,30px);
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--granat);
}
.lead{
  margin:0 0 clamp(20px,4vw,28px);
  text-align:center;
  font-size:clamp(14px,3.4vw,15px);
  line-height:1.5;
  color:#5b6577;
}

/* ---------- pola ---------- */
.field{margin-bottom:22px;animation:pojaw .6s ease both}
.field:nth-of-type(1){animation-delay:.12s}
.field:nth-of-type(2){animation-delay:.20s}
.field:nth-of-type(3){animation-delay:.28s}
@keyframes pojaw{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* obudowa pola: ikona + input + etykieta wskakująca na ramkę */
.input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  background:#fff;
  border:1.5px solid var(--ramka);
  border-radius:12px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.input-wrap:hover{border-color:#b9c3d3}
.input-wrap:focus-within{
  border-color:var(--granat);
  box-shadow:0 8px 22px rgba(28,43,74,.13);
  transform:translateY(-1px);
}

.ikona{
  flex:0 0 auto;
  width:19px;height:19px;
  margin-left:16px;
  fill:none;stroke:#a3adbe;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .25s,transform .25s;
}
.input-wrap:focus-within .ikona{stroke:var(--granat);transform:scale(1.08)}

input[type=text],input[type=tel]{
  flex:1 1 auto;
  min-width:0;
  padding:17px 14px;
  font-size:16px;              /* 16px = iPhone nie przybliża pola przy wpisywaniu */
  line-height:1.25;
  font-family:inherit;
  color:var(--tekst);
  background:transparent;
  border:0;
  outline:none;
}
input:-webkit-autofill{-webkit-text-fill-color:var(--tekst);-webkit-box-shadow:0 0 0 40px #fff inset}

/* ETYKIETA — startuje w środku pola, po kliknięciu wskakuje na ramkę.
   Ruch i zmniejszenie robi wyłącznie transform (skala), a nie font-size —
   dzięki temu tekst nie przelicza się co klatkę i nie "skacze" na szerokości. */
.input-wrap > label{
  position:absolute;
  left:47px;
  top:50%;
  padding:0 6px;
  font-size:16px;
  font-weight:500;
  line-height:1;
  color:#98a2b3;
  white-space:nowrap;
  background:#fff;
  border-radius:4px;
  pointer-events:none;
  transform-origin:left center;
  transform:translate(0,-50%) scale(1);
  will-change:transform;
  backface-visibility:hidden;
  transition:transform .3s cubic-bezier(.22,.9,.28,1),
             color .25s ease;
}
.input-wrap:focus-within > label,
.input-wrap > input:not(:placeholder-shown) + label{
  transform:translate(-33px,calc(-50% - 27px)) scale(.78);
  color:var(--granat);
}
.input-wrap > input:not(:focus):not(:placeholder-shown) + label{color:#6b7488}

/* zielony ptaszek po poprawnym wypełnieniu */
.ptaszek-ok{
  flex:0 0 auto;
  width:18px;height:18px;
  margin-right:16px;
  fill:none;stroke:var(--ok);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;
  stroke-dashoffset:30;
  opacity:0;
  transition:opacity .2s;
}
.input-wrap.ok .ptaszek-ok{opacity:1;animation:rysuj .45s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes rysuj{to{stroke-dashoffset:0}}

.input-wrap.invalid{
  border-color:var(--blad);
  animation:drzenie .4s;
}
.input-wrap.invalid .ikona{stroke:var(--blad)}
.input-wrap.invalid > label{color:var(--blad)}
@keyframes drzenie{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

.err{
  display:block;
  margin-top:7px;
  padding-left:2px;
  font-size:12.5px;
  color:var(--blad);
  animation:blad-in .3s ease both;
}
.err:empty{margin-top:0;animation:none}
@keyframes blad-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* pole-pułapka na boty */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- zgoda / checkbox ---------- */
.consent{margin-top:6px;margin-bottom:0}
.check{
  position:relative;
  font-size:inherit;
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin:0;
  padding:12px 14px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  border-radius:12px;
  cursor:pointer;
  transition:background .25s;
}
.check:hover{background:#f5f7fb}
.check input{position:absolute;opacity:0;width:0;height:0}

.box{
  position:relative;
  flex:0 0 auto;
  width:24px;height:24px;
  margin-top:1px;
  background:#fff;
  border:1.5px solid #ccd4e0;
  border-radius:7px;
  transition:background .3s cubic-bezier(.2,.8,.25,1),border-color .3s,transform .2s;
}
/* rozchodząca się poświata po zaznaczeniu */
.box::before{
  content:"";
  position:absolute;inset:-1.5px;
  border-radius:7px;
  border:2px solid var(--granat);
  opacity:0;
  transform:scale(1);
}
.box svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  padding:4px;
  fill:none;stroke:#fff;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;
  stroke-dashoffset:24;
  transition:stroke-dashoffset .3s cubic-bezier(.2,.8,.25,1) .06s;
}
.check:hover .box{border-color:var(--granat);transform:scale(1.05)}
.check input:checked + .box{background:var(--granat);border-color:var(--granat)}
.check input:checked + .box svg{stroke-dashoffset:0}
.check input:checked + .box::before{animation:puls .5s ease-out}
@keyframes puls{
  from{opacity:.55;transform:scale(1)}
  to{opacity:0;transform:scale(1.75)}
}
.check input:focus-visible + .box{box-shadow:0 0 0 4px rgba(28,43,74,.16)}

.check-text{
  font-size:clamp(13.5px,3.4vw,14.5px);
  line-height:1.55;
  color:#4a5468;
  transition:color .25s;
}
.check:hover .check-text{color:var(--tekst)}

.consent.invalid .box{border-color:var(--blad);animation:drzenie .4s}

/* ---------- przycisk ---------- */
.btn{
  position:relative;
  display:block;
  width:100%;
  margin-top:20px;
  padding:17px 20px;
  font:600 15px/1 inherit;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
  background:var(--granat);
  border:0;
  border-radius:10px;
  cursor:pointer;
  overflow:hidden;
  transition:background .2s,transform .15s,box-shadow .2s;
}
.btn:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(28,43,74,.2)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(28,43,74,.2)}
.btn:disabled{opacity:.75;cursor:default;transform:none;box-shadow:none}
.btn::before{
  content:"";
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  /* bez powrotu animacji po zjechaniu myszką — reset jest natychmiastowy i niewidoczny */
  transition:none;
}

/* hover tylko tam, gdzie naprawdę jest kursor (na dotyku nie „przykleja się”) */
@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover{
    background:var(--granat-ciemny);
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(28,43,74,.25);
  }
  .btn:not(:disabled):hover::before{left:140%;transition:left .6s ease}
}

.btn-maly{display:inline-block;width:auto;margin:0;padding:13px 26px;font-size:14px}

.spinner{
  display:none;
  width:17px;height:17px;
  margin-left:10px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  vertical-align:-3px;
  animation:obrot .7s linear infinite;
}
.btn.loading .spinner{display:inline-block}
@keyframes obrot{to{transform:rotate(360deg)}}

.status{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.5;
  text-align:center;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s,transform .3s;
}
.status.show{opacity:1;transform:none}
.status.ok{color:var(--ok)}
.status.bad{color:var(--blad)}

/* ---------- link do regulaminu ---------- */
.terms-link{margin:20px 0 0;text-align:center}
.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 4px;
  font:500 13.5px/1.4 inherit;
  color:#5b6577;
  background:none;
  border:0;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(91,101,119,.35);
  transition:color .2s,text-decoration-color .2s;
}
.link:hover{color:var(--granat);text-decoration-color:var(--granat)}
.ico{
  width:16px;height:16px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- popup z regulaminem ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:clamp(12px,4vw,32px)}
.modal[hidden]{display:none}

.modal-tlo{
  position:absolute;inset:0;
  background:rgba(16,25,43,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .3s ease;
}
.modal.open .modal-tlo{opacity:1}

.modal-okno{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:600px;
  max-height:calc(100dvh - 2 * clamp(12px,4vw,32px));
  background:#fff;
  border-radius:16px;
  box-shadow:0 30px 70px rgba(12,20,36,.45);
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:opacity .32s cubic-bezier(.2,.8,.25,1),transform .32s cubic-bezier(.2,.8,.25,1);
}
.modal.open .modal-okno{opacity:1;transform:none}

.modal-naglowek{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px clamp(20px,5vw,30px) 16px;
  border-bottom:1px solid var(--ramka);
}
.modal-naglowek h2{
  margin:0;
  font-size:clamp(17px,4.4vw,20px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--granat);
}
.zamknij{
  flex:0 0 auto;
  width:38px;height:38px;
  display:grid;place-items:center;
  color:#7a8497;
  background:#f3f5f9;
  border:0;border-radius:50%;
  cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.zamknij svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
}
.zamknij:hover{background:var(--granat);color:#fff;transform:rotate(90deg)}

.modal-tresc{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#c2cbdb transparent;
  padding:18px clamp(20px,5vw,30px) 8px;
  font-size:clamp(13.5px,3.4vw,14.5px);
  line-height:1.7;
  color:#4a5468;
}
.modal-tresc::-webkit-scrollbar{width:8px}
.modal-tresc::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.modal-tresc::-webkit-scrollbar-thumb{
  background:#c2cbdb;
  border:2px solid #fff;      /* odstęp od krawędzi — pasek nie dotyka treści */
  border-radius:8px;
  transition:background .2s;
}
.modal-tresc::-webkit-scrollbar-thumb:hover{background:var(--granat)}

.modal-tresc h3{
  margin:22px 0 8px;
  font-size:clamp(14px,3.6vw,15px);
  color:var(--granat);
}
.modal-tresc ol,.modal-tresc ul{margin:0;padding-left:20px}
.modal-tresc li{margin-bottom:9px}
.modal-tresc li::marker{color:var(--granat)}

/* wpisy pojawiają się kaskadowo po otwarciu popupu */
.modal.open .modal-tresc > *{animation:wpis .45s ease both}
.modal.open .modal-tresc > *:nth-child(1){animation-delay:.10s}
.modal.open .modal-tresc > *:nth-child(2){animation-delay:.18s}
.modal.open .modal-tresc > *:nth-child(3){animation-delay:.26s}
@keyframes wpis{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.modal-stopka{
  padding:16px clamp(20px,5vw,30px) 22px;
  border-top:1px solid var(--ramka);
  text-align:right;
}

/* ---------- telefony i tablety ---------- */
@media (max-width:640px){
  body{background-attachment:scroll;background-position:center center}
  .wrap{padding-top:22px;padding-bottom:22px}
  .card{margin:auto}   /* wyśrodkowanie, a przy wyższej treści zwykłe przewijanie */
}

/* niskie ekrany w poziomie (np. telefon obrócony) */
@media (min-width:641px) and (max-height:560px){
  .modal{padding:12px}
  .modal-okno{max-height:calc(100dvh - 24px)}
  .modal-naglowek{padding-top:16px;padding-bottom:12px}
}

/* telefon: popup na cały ekran, wjeżdżający od dołu */
@media (max-width:640px){
  .modal{padding:0;align-items:stretch}
  .modal-okno{
    max-width:none;
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    transform:translateY(100%) scale(1);
    transition:transform .38s cubic-bezier(.2,.8,.25,1),opacity .25s;
  }
  .modal.open .modal-okno{transform:none}
  .modal-naglowek{
    padding:calc(18px + env(safe-area-inset-top)) 20px 15px;
  }
  .modal-tresc{padding:18px 20px 10px}
  .modal-stopka{
    padding:14px 20px calc(16px + env(safe-area-inset-bottom));
    text-align:center;
  }
  .btn-maly{width:100%}
  /* na dotyku systemowy pasek wystarczy — treść nie traci szerokości */
  .modal-tresc::-webkit-scrollbar{width:4px}
  .modal-tresc::-webkit-scrollbar-thumb{border:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}