:root{
  --bg: #f5f6f8;
  --text: #1f2a37;
  --muted: #556070;
  --line: #e2e6ea;

  --pro: #27AE60;
  --pra: #F1C40F;

  --btn: #27AE60;
  --btnText: #ffffff;

  --bad: #E74C3C;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Header (centered jak w pierwszym stylu) */
.header{
  text-align:center;
  background:#fff;
  border-bottom: 1px solid var(--line);
  padding: 18px 12px 14px;
}

.title{
  margin: 6px 0 4px;
  font-size: 34px;
  font-weight: 800;
}
.title .pro{ color: var(--pro); }
.title .pra{ color: var(--pra); }
.title .colon{ color: #000; margin: 0 6px; }
.subtitle{
  margin: 0 0 4px;
  color: var(--muted);
}

/* Banner tło za głównym panelem */
.container{
  max-width: 900px;
  margin: 22px auto 72px;
  padding: 40px 14px;
  background-image: url("images/banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  position: relative;
}

/* Delikatne przyciemnienie żeby tekst był czytelny */
.container::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.85);
  border-radius:10px;
  z-index:0;
}

/* Panel musi być nad overlay */
.panel{
  position: relative;
  z-index: 1;
  background:#ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}

/* Form */
.form{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

input[type="text"]{
  flex: 1 1 420px;
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  font-size: 16px;
}

.btn{
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  cursor:pointer;
  font-weight: 700;
}

.btn.primary{
  background: var(--btn);
  color: var(--btnText);
  border: none;
}

.btn.danger{
  background: var(--bad);
  color: #fff;
  border: none;
}

.btn:hover{ opacity: .95; }

/* Results */
.result{
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.resultLine{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 16px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fafbfc;
  font-weight: 800;
}

.comment{
  margin-top: 8px;
  color: var(--muted);
}

.alt{
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed #cfd6dd;
  border-radius: 6px;
  background: #fbfcfe;
}

.altTitle{ font-weight: 800; margin-bottom: 6px; }
.altBody{ font-weight: 700; }
.altWhy{ margin-top: 6px; color: var(--muted); }

.actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stats{
  margin-top: 10px;
  padding: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  white-space: pre-line;
}

.smallPrint h2{
  margin: 0 0 8px;
  font-size: 16px;
}
.muted{ color: var(--muted); }

.traceWrap{ margin-top: 10px; }
.trace{ color: #7a8596; font-size: 12px; }

/* Footer z linkami (regulamin/polityka) */
.footer{
  position: static;
  left:0; right:0; bottom:0;
  background:#fff;
  border-top: 1px solid var(--line);
  padding: 14px 12px;
  text-align:center;
  color: #6b7584;
  font-size: 13px;
}

.sep{ margin: 0 6px; color: #9aa3af; }

.linkBtn{
  background:none;
  border:none;
  color: #3b82f6;
  cursor:pointer;
  font: inherit;
  padding: 0;
}
.linkBtn:hover{ text-decoration: underline; }

/* Dialog */
.dialog{
  width: min(680px, calc(100% - 18px));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0;
}
.dialog::backdrop{ background: rgba(0,0,0,0.35); }
.dialogInner{ padding: 16px; }
.dialogInner h3{ margin: 0 0 8px; }
.dialogActions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 640px){
  .form{ flex-direction: column; align-items: stretch; }
  input[type="text"]{ flex: 1 1 auto; width: 100%; }
}

/* HERO banner na pełną szerokość */
.hero{
  width: 100%;
  min-height: 420px;
  background-image: url("images/banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}

/* ograniczamy szerokość treści, ale banner jest full */
.heroInner{
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 14px 34px;
}

/* panel na zdjęciu – czytelny bez “mleka” na całym bannerze */
.panelMain{
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  border-radius: 10px;
}

/* Body już nie potrzebuje szarego tła pod bannerem – ale może zostać */
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Upewnij się, że stary .container nie psuje layoutu */
.container{ 
  max-width: 720px;
  margin: 22px auto 72px;
  padding: 0 14px;
}

/* Sekcje pod bannerem */
.content{
  max-width: 1100px;
  margin: 80px auto 140px;
  padding: 0 20px;
}

.sectionTitle{
  text-align: center;
  font-size: 34px;
  margin: 60px 0 40px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Kafle “kroki” w kolumnie */
.steps{
  display: grid;
  gap: 24px;
  margin-bottom: 80px;
}

/* Grid kafelków */
.grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 120px;
}


/* Kafelek */
.tile{
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}


.tileTitle{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}

.tileText{
  color: #6b7280;
  font-size: 15px;
  line-height: 1.6;
}

/* Responsywność */
@media (max-width: 960px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
  .sectionTitle{ font-size: 24px; }
}

/* Stopka fixed zasłania treść — dodajemy miejsce na dole strony */
:root{
  --footer-h: 2px; /* dopasuj jeśli Twoja stopka jest wyższa */
}

body{
  padding-bottom: calc(var(--footer-h) + 24px);
}

main{
  padding-bottom: calc(var(--footer-h) + 24px);
}

/* dla pewności, żeby ostatnia sekcja miała jeszcze oddech */
.content{
  margin-bottom: 80px; /* już nie musi być gigantyczny */
}

.hint{
  display: block;          
  font-size: 12px;         
  color: #9aa3af;          
  margin-top: 6px;
}

/* --- MODERN UPGRADE (drop-in) --- */

:root{
  --r: 16px;
  --r2: 22px;
  --shadow: 0 18px 50px rgba(0,0,0,0.18);
  --shadow2: 0 10px 30px rgba(0,0,0,0.12);
  --border: rgba(255,255,255,0.28);
  --textDark: #111827;
  --muted2: rgba(17,24,39,0.64);
}

/* Hero banner: trochę wyższy + ładne kadrowanie */
.hero{
  min-height: 520px;
  background-position: center;
}

/* Panel na bannerze – glassmorphism, ale “produktywnie” */
.panelMain{
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: 22px;
}

/* Typografia – mniej “Arial 2008” */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--textDark);
}

/* Form: nowocześnie, oddychająco */
.form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 10px;
}

input[type="text"]{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 14px 14px;
  font-size: 16px;
  background: rgba(255,255,255,0.9);
  box-shadow: var(--shadow2);
}

input[type="text"]:focus{
  outline: none;
  border-color: rgba(39,174,96,0.45);
  box-shadow: 0 0 0 4px rgba(39,174,96,0.18), var(--shadow2);
}

/* Primary button – bardziej “app” */
.btn.primary{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 14px 24px rgba(39,174,96,0.22);
}

/* Hint: małe i szare (jak chciałeś) */
.hint, small{
  display: block;
  margin-top: 6px;
  color: var(--muted2);
  font-size: 12px;
}

/* Actions: chips */
.actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.actions .btn{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.actions .btn:hover{
  transform: translateY(-1px);
  transition: 0.18s ease;
}

/* Result: karta */
.result{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.resultLine{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

.badge{
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
}

/* Komentarz i alternatywa – bardziej czytelne */
.comment{
  margin-top: 10px;
  color: rgba(17,24,39,0.78);
  font-size: 16px;
  line-height: 1.55;
}

.alt{
  margin-top: 14px;
  border-radius: var(--r);
  border: 1px dashed rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.92);
  padding: 14px;
}

.altTitle{
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.altBody{
  font-weight: 800;
  margin-bottom: 6px;
}

.altWhy{
  color: rgba(17,24,39,0.70);
  line-height: 1.55;
}

/* Trace: dyskretny */
.trace{
  color: rgba(17,24,39,0.50);
  font-size: 12px;
}

/* --- MOBILE: układ idealny --- */
@media (max-width: 720px){
  .hero{
    min-height: 560px;
  }

  .heroInner{
    padding: 18px 12px 24px;
  }

  .panelMain{
    padding: 16px;
    border-radius: 18px;
  }

  .form{
    grid-template-columns: 1fr;
  }

  .btn.primary{
    width: 100%;
  }

  input[type="text"]{
    width: 100%;
  }

  /* chips na mobile: pełna szerokość po 2 w rzędzie */
  .actions{
    gap: 10px;
  }
  .actions .btn{
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
}

@media (max-width: 420px){
  .actions .btn{
    flex: 1 1 100%;
  }
}


/* ========================= */
/* EXECUTIVE ZONE */
/* ========================= */

.execZone{
  padding: 80px 20px;
  background: linear-gradient(180deg, #f9fafb 0%, #eef2f7 100%);
}

.execZone h2{
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
}

.execIntro{
  text-align: center;
  color: rgba(0,0,0,0.6);
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.execGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

.execCard{
  background: white;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.execCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 25px 45px rgba(0,0,0,0.12);
}

.execCard h3{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.execCard p{
  color: rgba(0,0,0,0.7);
  line-height: 1.6;
}

.execCard.highlight{
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
}

.execCard.highlight p{
  color: rgba(255,255,255,0.95);
}

.execInner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}