/* ============================================================
   upadlosc123.pl — INDYWIDUALNY design system  ·  v2
   Koncept: "Klarowna droga do życia bez długów"
   Glina/terakota (ciepło) · Teal (zaufanie) · Świt/bursztyn (nadzieja)
   Ręcznie autorski. Fraunces (display) + Inter (tekst).
   Kontrast: każda para tekst/tło ≥ WCAG AA. Focus-visible wszędzie.
   ============================================================ */

:root{
  /* — Glina / terakota — */
  --clay-900:#4E2416; --clay-800:#6B331E; --clay-700:#8A4227; --clay-600:#A6532F;
  --clay-500:#BC6742; --clay-300:#E6BBA3; --clay-100:#F6E5D9; --clay-50:#FCF3ED;
  /* — Teal (przyciemniony dla kontrastu tekstu na wypełnieniu) — */
  --teal-900:#0F3644; --teal-800:#154A5B; --teal-700:#17596C; --teal-600:#1E6E86;
  --teal-300:#8FC3D4; --teal-100:#DCEAEF; --teal-50:#EFF6F8;
  /* — Świt / bursztyn (akcent nadziei) — */
  --dawn-700:#8A5A1E; --dawn-500:#D98A3D; --dawn-300:#F1C48A; --dawn-100:#FBEBD6;
  /* — Neutralne ciepłe — */
  --paper:#FBF6F0; --paper-2:#F4EBE0; --paper-3:#EFE4D6; --surface:#FFFFFF;
  --ink-900:#231810; --ink-800:#33261B; --ink-700:#43362A; --ink-500:#6C5A4B; --ink-400:#8A7767;
  --line:#EADFD3; --line-strong:#DBC9B7;
  /* — Semantyczne — */
  --ok-bg:#DEEEE2; --ok-fg:#1E5B3A; --warn-bg:#FBEBD6; --warn-fg:#8A5A1E; --info-bg:#DCEAEF; --info-fg:#0F3644;
  --focus:#1E6E86;

  --font-display:"Fraunces","Georgia",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tight:-0.02em; --wide:0.13em;

  /* Skala odstępów (rytm 4px) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:42px; --s8:60px; --s9:84px; --s10:120px;

  --r-xl:26px; --r-lg:18px; --r-md:13px; --r-sm:9px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(35,24,16,.06);
  --sh-sm:0 2px 6px -2px rgba(35,24,16,.10), 0 1px 2px rgba(35,24,16,.06);
  --sh-md:0 12px 30px -12px rgba(35,24,16,.20), 0 3px 8px -4px rgba(35,24,16,.10);
  --sh-lg:0 34px 80px -30px rgba(78,36,22,.34), 0 10px 24px -12px rgba(35,24,16,.16);
  --wrap:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-700);font-family:var(--font-sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:.005em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}

h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink-900);font-weight:600;letter-spacing:var(--tight);line-height:1.08;margin:0}
p{margin:0 0 1rem}
:where(a):focus-visible,:where(button):focus-visible,:where(summary):focus-visible,.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

a{color:var(--teal-700);text-decoration:none;transition:color .12s}
.link{background-image:linear-gradient(var(--clay-500),var(--clay-500));background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s}
.link:hover{background-size:100% 2px;color:var(--clay-800)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:var(--wide);text-transform:uppercase;color:var(--clay-700)}
.eyebrow::before{content:"";width:24px;height:2px;background:linear-gradient(90deg,var(--dawn-500),var(--clay-600));border-radius:2px}
.muted{color:var(--ink-500)}
.serif{font-family:var(--font-display)}
.lede{font-size:20px;color:var(--ink-700);line-height:1.55}

/* — PRZYCISKI (kontrast gwarantowany, jawne bg+color) — */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-sans);
  font-weight:600;font-size:15.5px;line-height:1;padding:13px 22px;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.btn--primary{background:var(--clay-700);color:#fff;box-shadow:0 8px 20px -8px rgba(138,66,39,.6)}
.btn--primary:hover{background:var(--clay-800);transform:translateY(-2px);box-shadow:0 14px 28px -8px rgba(138,66,39,.66)}
.btn--teal{background:var(--teal-700);color:#fff;box-shadow:0 8px 20px -8px rgba(23,89,108,.55)}
.btn--teal:hover{background:var(--teal-800);transform:translateY(-2px)}
.btn--ghost{background:var(--surface);color:var(--ink-900);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--clay-600);color:var(--clay-800);background:var(--clay-50)}
.btn--light{background:#fff;color:var(--clay-800)}
.btn--light:hover{background:#FFF6EF;transform:translateY(-2px)}
.btn--lg{padding:16px 28px;font-size:17px}
.btn--sm{padding:9px 15px;font-size:14px}
.btn--block{width:100%}

/* — Karty — */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:26px}
.card--soft{background:var(--clay-50);border-color:var(--line)}
.card--teal{background:var(--teal-50);border-color:var(--teal-100)}
.card--accent{position:relative}
.card--accent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(90deg,var(--dawn-500),var(--clay-600))}
.card--hover{transition:transform .16s ease, box-shadow .16s ease}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}

/* — Chip / badge / dot — */
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink-800);box-shadow:var(--sh-xs)}
.chip:hover{border-color:var(--clay-300)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;letter-spacing:.01em}
.badge--ok{background:var(--ok-bg);color:var(--ok-fg)}
.badge--info{background:var(--info-bg);color:var(--info-fg)}
.badge--warn{background:var(--warn-bg);color:var(--warn-fg)}
.badge--clay{background:var(--clay-100);color:var(--clay-800)}
/* aliasy klas używanych w widokach (spójność wsteczna, kontrast AA) */
.badge--teal{background:var(--ok-bg);color:var(--ok-fg)}
.badge--dawn{background:var(--warn-bg);color:var(--warn-fg)}
.hero__lead{font-size:20px;color:var(--ink-700);max-width:48ch;margin-bottom:28px}
.assess__gauge{height:12px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;margin:12px 0 8px}
.assess__gauge>span{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--teal-600),var(--clay-600))}
.dot{width:8px;height:8px;border-radius:50%;flex:none}

/* — Listy z sygnaturowym checkiem — */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:8px 0 8px 32px;color:var(--ink-700)}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:50%;
  background:var(--ok-bg);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E5B3A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");background-repeat:no-repeat;background-position:center}

/* — Sekcje — */
section{padding:var(--s9) 0}
.section-head{max-width:660px;margin:0 0 var(--s7)}
.section-head h2{font-size:clamp(29px,4vw,42px);margin-bottom:14px;line-height:1.05}
.section-head .lede{font-size:19px;color:var(--ink-500)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* — Nawigacja — */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.5) blur(12px);background:rgba(251,246,240,.85);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink-900);letter-spacing:var(--tight);display:flex;align-items:center;gap:10px}
.brand__mark{width:28px;height:28px;flex:none}
.nav__links{display:flex;gap:30px;align-items:center}
.nav__links a{color:var(--ink-700);font-weight:500;font-size:15px}
.nav__links a:not(.btn):hover{color:var(--clay-800)}

/* — HERO — */
.hero{position:relative;overflow:hidden;padding:var(--s8) 0 var(--s9)}
.hero__dawn{position:absolute;top:-280px;right:-180px;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(217,138,61,.22),rgba(217,138,61,.06) 42%,transparent 62%);pointer-events:none}
.hero__grid{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(42px,6vw,66px);margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--clay-700);position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--dawn-300);opacity:.55;border-radius:3px;z-index:-1}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero__trust{display:flex;gap:22px;flex-wrap:wrap;align-items:center;color:var(--ink-500);font-size:14.5px}
.hero__trust b{color:var(--ink-900)}

/* — Karta oceny w hero — */
.assess{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:26px;transform:rotate(-1.3deg)}
.assess::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--r-xl) var(--r-xl) 0 0;background:linear-gradient(90deg,var(--dawn-500),var(--clay-600),var(--teal-600))}
.assess__top{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.assess__title{font-family:var(--font-display);font-size:19px;color:var(--ink-900)}
.gauge{height:12px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;margin:12px 0 8px}
.gauge>span{display:block;height:100%;width:78%;background:linear-gradient(90deg,var(--teal-600),var(--clay-600))}
.assess__row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}

/* — Statystyki — */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat__num{font-family:var(--font-display);font-size:42px;color:var(--clay-700);line-height:1;font-weight:600}
.stat__lbl{color:var(--ink-500);font-size:14.5px;margin-top:8px}

/* — Ścieżka procesu — */
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.path::before{content:"";position:absolute;top:28px;left:8%;right:8%;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--clay-300),var(--dawn-300),var(--teal-300));z-index:0}
.step{position:relative;z-index:1;text-align:center}
.step__n{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:var(--surface);border:2.5px solid var(--clay-600);color:var(--clay-700);font-family:var(--font-display);font-weight:700;font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm)}
.step h4{font-size:18px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--ink-500);margin:0}

/* — Cechy — */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.feature__ic{width:50px;height:50px;border-radius:var(--r-md);background:var(--clay-100);color:var(--clay-800);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feature h3{font-size:20px;margin-bottom:9px}
.feature p{color:var(--ink-500);font-size:15px;margin:0}

/* — Opinie — */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-xs)}
.quote p{font-family:var(--font-display);font-size:18px;color:var(--ink-900);line-height:1.5;margin:0}
.quote__who{display:flex;align-items:center;gap:12px;margin-top:18px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--clay-300),var(--dawn-300));display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--clay-900);flex:none}

/* — FAQ — */
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:12px;overflow:hidden;box-shadow:var(--sh-xs)}
.faq summary{cursor:pointer;padding:19px 22px;font-family:var(--font-display);font-size:18px;color:var(--ink-900);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--clay-600);font-size:26px;font-family:var(--font-sans);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--clay-800)}
.faq p{padding:0 22px 20px;color:var(--ink-500);margin:0}

/* — Formularze — */
.field{display:block;margin-bottom:18px}
.field>label{display:block;font-size:14px;font-weight:600;color:var(--ink-800);margin-bottom:7px}
.input,select.input,textarea.input{width:100%;font-family:inherit;font-size:16px;color:var(--ink-900);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:13px 15px;transition:border-color .12s, box-shadow .12s}
.input:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px var(--teal-100)}
.opt{display:flex;gap:12px;align-items:center;border:1.5px solid var(--line-strong);border-radius:var(--r-md);padding:14px 16px;cursor:pointer;background:var(--surface);transition:border-color .12s, background .12s}
.opt:hover{border-color:var(--clay-400,#C88A6C)}
.opt--sel{border-color:var(--clay-600);background:var(--clay-50)}

/* — Świt CTA — */
.dawn-cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:var(--s8) 48px;text-align:center;background:linear-gradient(135deg,var(--clay-800),var(--clay-600));color:#fff}
.dawn-cta::after{content:"";position:absolute;bottom:-340px;left:50%;transform:translateX(-50%);width:960px;height:640px;border-radius:50%;background:radial-gradient(circle at 50% 0,rgba(241,196,138,.5),transparent 60%)}
.dawn-cta h2{position:relative;color:#fff;font-size:clamp(29px,4vw,44px);margin-bottom:14px}
.dawn-cta p{position:relative;color:#F7E9DE;font-size:19px;max-width:54ch;margin:0 auto 26px}

/* — Stopka — */
.footer{background:var(--ink-900);color:#CFBDAC;padding:var(--s8) 0 var(--s5)}
.footer a{color:#E6D2BF}.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:var(--s6)}
.footer h5{color:#fff;font-family:var(--font-display);font-size:16px;margin:0 0 14px}
.footer__legal{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;color:#A99377;line-height:1.6}

/* — App shell — */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.side{background:#271C13;color:#E3D3C3;padding:22px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.side .brand{color:#fff;font-size:19px;margin:4px 8px 24px}
.side__group{font-size:11px;letter-spacing:var(--wide);text-transform:uppercase;color:#9C846E;margin:22px 12px 8px}
.side a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--r-sm);color:#D8C5B3;font-size:14.5px;font-weight:500;margin-bottom:2px}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.active{background:var(--clay-700);color:#fff;box-shadow:0 6px 16px -8px rgba(138,66,39,.8)}
.main{padding:30px 36px;background:var(--paper);min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;gap:16px}
.topbar h1{font-size:26px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.kpi .card{padding:20px}.kpi .stat__num{font-size:32px}

/* — Timeline — */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 24px 32px;border-left:2px solid var(--line-strong)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-9px;top:1px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.tl li.done::before{background:var(--teal-600);border-color:var(--teal-600)}
.tl li.active::before{background:var(--clay-600);border-color:var(--clay-600);box-shadow:0 0 0 5px var(--clay-100)}
.tl__t{font-family:var(--font-display);font-size:17px;color:var(--ink-900)}
.tl__d{font-size:13.5px;color:var(--ink-500);margin-top:2px}

/* — Dropzone / OCR — */
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--clay-50);padding:36px;text-align:center;color:var(--ink-500);transition:border-color .14s, background .14s}
.dropzone:hover{border-color:var(--clay-600);background:var(--clay-100)}
.dropzone strong{color:var(--ink-900);display:block;margin-bottom:4px;font-size:16px}
.ocr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-top:10px;box-shadow:var(--sh-xs)}
.progress{height:8px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;width:130px;flex:none}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--teal-600),var(--teal-300))}

/* — Kanban — */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.col{background:var(--paper-2);border-radius:var(--r-md);padding:12px}
.col__h{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink-700);padding:4px 6px 12px;text-transform:uppercase;letter-spacing:.04em}
.lead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px;margin-bottom:9px;box-shadow:var(--sh-xs);cursor:grab}
.lead:hover{border-color:var(--clay-300)}
.lead__n{font-weight:600;color:var(--ink-900);font-size:14.5px}
.lead__m{font-size:12.5px;color:var(--ink-500);margin-top:3px}

/* — Tabela — */
.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xs)}
.table th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);padding:14px 16px;background:var(--paper-2)}
.table td{padding:15px 16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-800)}
.table tr:hover td{background:var(--clay-50)}

/* — Responsywność — */
@media(max-width:920px){
  .hero__grid,.grid-3,.grid-2,.stats,.path,.kpi,.board,.footer__grid{grid-template-columns:1fr}
  .path::before{display:none}
  .app{grid-template-columns:1fr}.side{position:static;height:auto}
  .nav__links a:not(.btn){display:none}
  section{padding:var(--s8) 0}
}