/* System projektowy landingów szkoleniowych — spójny z zbigniewgronowski.pl
   Paleta i typografia zdjęte 1:1 z żywej strony (Manrope, czerń, zieleń #39A751). */

@import url('/assets/manrope.css');

:root{
  --bg:#000000;            /* tło jak na stronie */
  --bg-soft:#070807;
  --karta:#0e0e0e;         /* ciemna karta */
  --karta-2:#0b0d0b;
  --linia:#1e2b1a;         /* obwódka w zielonawej czerni */
  --linia-2:#161d15;
  --tekst:#d2d7dc;         /* jasnoszary tekst */
  --tekst-mocny:#eef1f3;
  --naglowek:#ffffff;      /* białe nagłówki */
  --przygasz:#8b939b;      /* opisy, stopka */
  --zielen:#39A751;        /* akcent */
  --zielen-hover:#2f9946;
  --zielen-ciemna:#308e45;
  --zielen-tlo:rgba(57,167,81,.10);
  --blad:#ff6b6b;
  --blad-tlo:rgba(255,107,107,.08);
  --radius:7px;
  --radius-duzy:14px;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tekst);
  font-family:var(--font); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:32px 18px 48px; display:flex; justify-content:center;
  background-image:radial-gradient(1200px 500px at 50% -10%, rgba(57,167,81,.08), transparent 60%);
  background-repeat:no-repeat;
}
.karta-strony{width:100%; max-width:560px}
.waska{max-width:520px}

/* marka / nagłówek strony */
.marka{display:flex; align-items:baseline; gap:10px; margin-bottom:26px}
.marka .imie{font-size:1.15rem; font-weight:800; color:var(--naglowek); letter-spacing:-.02em}
.marka .pod{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--przygasz)}

h1{font-size:clamp(1.9rem,6vw,2.6rem); line-height:1.12; letter-spacing:-.03em;
   color:var(--naglowek); margin:0 0 14px; font-weight:800}
h2{font-size:1.15rem; color:var(--naglowek); margin:0 0 10px; font-weight:800}
.lead{font-size:1.05rem; color:var(--tekst); margin:0 0 28px}
a{color:var(--zielen); text-decoration:none}
a:hover{color:var(--zielen-hover)}

/* karta / sekcja */
.karta{background:var(--karta); border:1px solid var(--linia); border-radius:var(--radius-duzy);
  padding:22px 20px; margin-bottom:16px}

/* pola formularza */
label{display:block; font-weight:700; color:var(--naglowek); margin:0 0 8px; font-size:.95rem}
label.opis{font-weight:500; color:var(--przygasz); font-size:.86rem; line-height:1.5; margin:0}
input[type=text],input[type=email],textarea{
  width:100%; padding:14px; font-size:1.05rem; font-family:inherit; min-height:52px;
  color:var(--tekst-mocny); background:rgba(255,255,255,.03);
  border:1.5px solid var(--linia); border-radius:var(--radius);
}
textarea{min-height:96px; resize:vertical; line-height:1.55}
input::placeholder,textarea::placeholder{color:#5a6169}
input:focus,textarea:focus{outline:none; border-color:var(--zielen); box-shadow:0 0 0 3px var(--zielen-tlo)}
.pole{margin-bottom:18px}

/* zgoda RODO */
.zgoda{display:flex; gap:12px; align-items:flex-start; margin:22px 0 4px}
.zgoda input{width:22px; height:22px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--zielen)}
.zgoda label{font-weight:400; font-size:.86rem; color:var(--przygasz); line-height:1.55; margin:0}

/* przyciski */
.btn{display:flex; align-items:center; justify-content:center; width:100%; min-height:56px;
  padding:15px 30px; font-size:1.02rem; font-weight:600; font-family:inherit; cursor:pointer;
  color:#fff; background:var(--zielen); border:none; border-radius:var(--radius); text-decoration:none;
  transition:background .15s ease}
.btn:hover{background:var(--zielen-hover); color:#fff}
.btn:disabled{opacity:.55; cursor:default}
.btn-obrys{background:transparent; color:var(--naglowek); border:1.5px solid var(--linia)}
.btn-obrys:hover{background:rgba(255,255,255,.04); color:#fff; border-color:var(--zielen)}

/* komunikat błędu */
.blad{display:none; margin-top:16px; padding:12px 14px; border-radius:var(--radius);
  background:var(--blad-tlo); border:1px solid rgba(255,107,107,.35); color:var(--blad); font-size:.92rem}
.blad a{color:var(--blad); text-decoration:underline}

/* znacznik sukcesu (kółko) */
.znak{width:64px; height:64px; margin:0 auto 20px; border-radius:50%;
  background:var(--zielen); color:#fff; display:flex; align-items:center; justify-content:center; font-size:30px}

/* segment / oceny / chipsy */
.segment{display:flex; gap:10px}
.segment button{flex:1; min-height:56px; padding:12px 8px; font-size:1rem; font-family:inherit;
  background:transparent; color:var(--tekst); border:1.5px solid var(--linia); border-radius:var(--radius); cursor:pointer}
.segment button[aria-pressed=true]{background:var(--zielen); color:#fff; border-color:var(--zielen); font-weight:700}
.oceny{display:flex; gap:8px}
.oceny button{flex:1; aspect-ratio:1/1; min-height:54px; font-size:1.2rem; font-weight:800; font-family:inherit;
  background:transparent; color:var(--tekst); border:1.5px solid var(--linia); border-radius:var(--radius); cursor:pointer}
.oceny button[aria-pressed=true]{background:var(--zielen); color:#fff; border-color:var(--zielen)}
.skala{display:flex; justify-content:space-between; font-size:.8rem; color:var(--przygasz); margin-top:8px}
.chipsy{display:flex; flex-wrap:wrap; gap:9px}
.chipsy button{padding:11px 16px; min-height:46px; font-size:.95rem; font-family:inherit;
  background:transparent; color:var(--tekst); border:1.5px solid var(--linia); border-radius:999px; cursor:pointer}
.chipsy button[aria-pressed=true]{background:var(--zielen-tlo); color:#fff; border-color:var(--zielen); font-weight:600}

/* generator opinii — wynik */
.propozycja{background:var(--karta); border:1px solid var(--linia); border-radius:var(--radius-duzy); padding:20px; margin-bottom:14px}
.etykieta{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--zielen); font-weight:800; margin-bottom:10px}
.tresc{font-size:1.02rem; line-height:1.65; color:var(--tekst-mocny); white-space:pre-wrap; margin-bottom:16px}
.kopiuj{width:100%; min-height:50px; font-size:.98rem; font-weight:600; font-family:inherit;
  background:transparent; color:var(--zielen); border:1.5px solid var(--zielen); border-radius:var(--radius); cursor:pointer}
.kopiuj:hover{background:var(--zielen-tlo)}
.kroki{font-size:.9rem; color:var(--przygasz); margin:22px 0 14px; text-align:center}
.uczciwosc{font-size:.9rem; color:var(--przygasz); font-style:italic; margin:0 0 18px; text-align:center}
.linki{display:flex; flex-direction:column; gap:12px; margin-top:6px}

/* ładowanie */
.ladowanie{text-align:center; padding:40px 20px; color:var(--przygasz)}
.spinner{width:34px; height:34px; margin:0 auto 16px; border:3px solid var(--linia);
  border-top-color:var(--zielen); border-radius:50%; animation:obrot .9s linear infinite}
@keyframes obrot{to{transform:rotate(360deg)}}

/* stopka */
.stopka{margin-top:28px; font-size:.82rem; color:var(--przygasz); text-align:center; line-height:1.6}
.stopka a{color:var(--przygasz); text-decoration:underline}

[hidden]{display:none !important}