/* ===============================
   PALETA (odświeżona)
   =============================== */
:root{
  --bg:#f6f7f8;            /* tło */
  --txt:#111827;           /* główny tekst (mocniejszy kontrast) */
  --muted:#5b6775;         /* tekst opisowy */
  --brand:#0b3b2e;         /* zielony firmowy */
  --brand-600:#115a46;     /* hover dla CTA */
  --brand-50:#eaf5f1;      /* delikatne tło elementów */
  --border:#e7ece9;        /* obramowania kart */
  --card:#ffffff;          /* karty/sekcje */
}

/* ===============================
   GLOBAL
   =============================== */
*{ box-sizing:border-box }

html,body{
  margin:0;
  padding:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

.container{ max-width:1160px; margin:0 auto; padding:0 20px }

/* ===============================
   TYPOGRAFIA
   =============================== */
h1,h2,h3,h4{
  color:var(--txt);
  letter-spacing:-0.01em;
  line-height:1.2;
  margin:0.2em 0 0.35em;
}
h1{ font-weight:800; font-size:clamp(32px, 4.2vw, 44px) }
h2{ font-weight:700; font-size:clamp(22px, 2.2vw, 28px) }
h3{ font-weight:600; font-size:clamp(18px, 1.6vw, 20px) }

.lead{ font-size:18px; color:#374151; opacity:.95 }

/* ===============================
   CTA (przyciski)
   =============================== */
.btn{
  display:inline-block;
  font-weight:700;
  border-radius:14px;
  padding:14px 18px;
  border:1px solid transparent;
  transition: transform .08s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn:active{ transform:translateY(1px) }

.btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 20px rgba(11,59,46,.22);
}
.btn-primary:hover{ background:var(--brand-600) }
.btn-primary:focus{ outline:none; box-shadow:0 0 0 4px rgba(11,59,46,.25) }

.btn-secondary{
  background:#fff;
  color:var(--brand);
  border:1px solid var(--brand);
}
.btn-secondary:hover{ background:var(--brand-50) }

/* ===============================
   HERO
   =============================== */
header.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#fff;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
  padding:56px 0;
}
.lead{ color:#f1f5f9; opacity:.96 }

/* ===============================
   BLOKI / KARTY
   =============================== */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px }
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px }
.kpi{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:14px;
  border-radius:12px;
  text-align:center;
}

section{ padding:56px 0 }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--brand-50);
  color:var(--brand);
  border:1px solid #d9e4dd;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 4px 14px rgba(17,24,39,0.06);
}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.step{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
}

.faq-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
}
details summary{ cursor:pointer; font-weight:600 }
details[open]{ border-color:#cfe0d7 }

/* ===============================
   GALERIA
   =============================== */
.gallery{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  align-items:start;
  justify-items:center;
}
.gallery .item{ text-align:center; max-width:100% }
.gallery img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery img:hover{
  transform:scale(1.05);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.gallery figcaption{
  margin-top:10px;
  font-weight:600;
  color:#374151;
}

/* ===============================
   FORMULARZE
   =============================== */
.form-card{ background:transparent; padding:0; border:none }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.form-grid .full{ grid-column:1/-1 }
.input-wrap{ position:relative }
.input-wrap svg{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  stroke:#5b6775;
  transition:stroke .2s ease, transform .2s ease;
}
.input-wrap input,
.input-wrap select,
.input-wrap textarea{
  width:100%;
  padding:14px 16px 14px 40px;
  border-radius:10px;
  border:1px solid #ccd5cf;
  background:#fff;
  font-size:15px;
  transition:.2s;
}
.input-wrap textarea{
  padding-left:40px;
  min-height:110px;
  resize:vertical;
}
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(11,59,46,.15);
}
.input-wrap:focus-within svg{
  stroke:var(--brand);
  transform:translateY(-50%) scale(1.1);
}
label{ font-size:14px; font-weight:600; margin-bottom:6px; display:block; color:var(--txt) }
.form-note{ font-size:13px; color:var(--muted); margin-bottom:10px }

/* ===============================
   FOOTER
   =============================== */
footer{ background:#0f2d25; color:#dfeee9 }
footer a{ color:#dfeee9 }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; padding:28px 0 }
.foot-small{
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 0;
  font-size:13px;
  color:#c7d7d1;
}

/* ===============================
   RESPONSYWNOŚĆ
   =============================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .grid-2{ grid-template-columns:1fr }
  .process{ grid-template-columns:1fr 1fr }
  .gallery{ grid-template-columns:1fr 1fr }
  h1{ font-size:34px }
  .cta-row{ gap:10px }
}
@media (max-width: 680px){
  .process{ grid-template-columns:1fr }
  .gallery{ grid-template-columns:1fr }
}
@media (max-width: 640px){
  .btn{ width:100%; text-align:center }
}