/* ZDZ CERT — wspólny system wizualny (PL hub + silvyvoj.cz refresh)
   Neutralna tożsamość drogowa: papier/asfalt + retroreflekt amber, sygnałowa czerwień punktowo.
   Display: Archivo (signage)  ·  Body: Hanken Grotesk */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* paleta OKLCH — neutrale dociągnięte w ciepły asfaltowy odcień */
  --paper:      oklch(0.971 0.006 85);
  --paper-2:    oklch(0.945 0.007 84);
  --surface:    oklch(0.992 0.004 85);
  --line:       oklch(0.885 0.008 82);
  --line-soft:  oklch(0.925 0.007 83);
  --ink:        oklch(0.235 0.012 80);
  --ink-2:      oklch(0.435 0.012 80);
  --ink-3:      oklch(0.585 0.012 82);

  /* kolor marki ZDZ — petrol/turkus (z logo monogramu) */
  --brand:      oklch(0.555 0.072 205);
  --brand-deep: oklch(0.455 0.068 207);
  --brand-light:oklch(0.74 0.085 200);   /* na ciemnym tle */
  --brand-tint: oklch(0.95 0.02 200);    /* delikatne tło hover */

  /* akcenty drogowe (hi-vis, punktowo) */
  --amber:      oklch(0.812 0.158 78);   /* retroreflekt / pasy / CTA */
  --amber-deep: oklch(0.66 0.14 70);
  --signal:     oklch(0.545 0.205 27);   /* sygnałowa czerwień — znak regulacyjny, punktowo */
  --asphalt:    oklch(0.255 0.009 78);   /* ciemne pasy / footer / hero plate */

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --space-4xl: 96px; --space-5xl: 128px;

  --maxw: 1200px;
  --radius: 4px;       /* ostre, techniczne */
  --radius-lg: 8px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--amber); color: var(--asphalt); }

h1, h2, h3, .display {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-xl); }
@media (max-width: 640px) { .wrap { padding-inline: var(--space-lg); } }

/* ——— eyebrow / etykiety techniczne ——— */
.eyebrow {
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--brand-deep);
}

/* ——— pasy oznakowania poziomego (motyw) ——— */
.lane {
  height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--asphalt) 0 38px, transparent 38px 64px);
  opacity: 0.9;
}

/* ═══════════ PASEK OPERATORA ═══════════ */
.topstrip { background: var(--asphalt); color: oklch(0.86 0.01 82); }
.topstrip .wrap { padding-block: 7px; font-size: 0.78rem; letter-spacing: 0.01em; display: flex; align-items: center; gap: var(--space-xs); }
.topstrip b { color: var(--paper); font-weight: 600; }
.topstrip .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-light); }

/* ═══════════ NAGŁÓWEK ═══════════ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: var(--space-sm); }
.brand-mark {                /* realny monogram ZDZ jako badge na kolorze marki */
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; padding: 5px;
  background: var(--brand); border-radius: var(--radius);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 1.18rem; letter-spacing: 0.01em; line-height: 1;
}
.brand-name span { color: var(--brand-deep); }
.brand-sub {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin-top: 3px;
}
.nav { display: flex; align-items: center; gap: var(--space-xl); }
.nav a { font-size: 0.94rem; font-weight: 500; color: var(--ink-2); transition: color .2s; }
.nav a:hover { color: var(--ink); }
@media (max-width: 880px) { .nav .nav-links { display: none; } }

/* ——— przyciski ——— */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.92rem;
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; transition: all .2s var(--ease);
}
.btn-primary { background: var(--asphalt); color: var(--paper); }
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }
.btn-amber { background: var(--amber); color: var(--asphalt); }
.btn-amber:hover { background: var(--amber-deep); color: var(--paper); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }

/* ═══════════ HERO ═══════════ */
.hero { padding-top: var(--space-4xl); padding-bottom: var(--space-3xl); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-3xl); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-2xl); } }

.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--brand-deep); }
.hero-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2);
  margin-top: var(--space-lg); max-width: 56ch;
}
.hero-cta { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); flex-wrap: wrap; }
.hero-partner {
  margin-top: var(--space-xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--space-md);
  font-size: 0.9rem; color: var(--ink-3);
}
.hero-partner b { color: var(--ink-2); font-weight: 600; }

/* hero plate — stylizowany znak na słupku + retroreflekt */
.sign-plate {
  position: relative; aspect-ratio: 1 / 1.08;
  background:
    radial-gradient(120% 90% at 30% 20%, color-mix(in oklch, var(--amber) 22%, transparent), transparent 60%),
    var(--asphalt);
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  box-shadow: 0 30px 60px -30px oklch(0.25 0.01 80 / 0.5);
  overflow: hidden;
}
.sign-plate::after { /* pasy oznakowania u dołu */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 26px, transparent 26px 52px);
  opacity: 0.85;
}
.sign-disc {
  width: 58%; aspect-ratio: 1; border-radius: 50%;
  border: 14px solid var(--signal);
  background: var(--surface);
  display: grid; place-items: center;
  position: relative;
}
.sign-disc::before { /* belka zakazu */
  content: ""; position: absolute; width: 100%; height: 14px; background: var(--signal);
  transform: rotate(-45deg);
}
.sign-arrow { font-family: 'Archivo'; font-weight: 800; font-size: 2.4rem; color: var(--asphalt); }
.plate-tag {
  position: absolute; top: var(--space-md); left: var(--space-md);
  font-family: 'Archivo'; font-weight: 600; font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--amber); opacity: 0.9;
}

/* ═══════════ PROOF STRIP ═══════════ */
.proof { border-block: 1px solid var(--line); background: var(--surface); }
.proof .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg); padding-block: var(--space-xl);
}
@media (max-width: 760px) { .proof .wrap { grid-template-columns: repeat(2, 1fr); } }
.proof-item .k {
  font-family: 'Archivo'; font-weight: 800; font-size: 1.5rem; color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
}
.proof-item .k small { font-size: 0.8rem; font-weight: 600; color: var(--brand-deep); }
.proof-item .l { font-size: 0.86rem; color: var(--ink-3); margin-top: 2px; }

/* ═══════════ SEKCJE ═══════════ */
section { padding-block: var(--space-4xl); }
.section-head { max-width: 60ch; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: var(--space-md); }
.section-head p { color: var(--ink-2); margin-top: var(--space-md); font-size: 1.05rem; }

/* karty „co certyfikujemy" — pełne obramowanie, numer wiodący (bez side-stripe) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-xl);
  transition: border-color .25s, transform .25s var(--ease);
}
.card:hover { border-color: var(--brand); transform: translateY(-3px); }
.card .num {
  font-family: 'Archivo'; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em;
  color: var(--brand-deep);
}
.card h3 { font-size: 1.28rem; margin-block: var(--space-sm) var(--space-sm); }
.card p { color: var(--ink-2); font-size: 0.97rem; }
.card ul { list-style: none; margin-top: var(--space-md); display: grid; gap: 6px; }
.card li { font-size: 0.9rem; color: var(--ink-2); padding-left: 18px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--brand); border-radius: 1px; }

/* „jak to działa" — kroki z osią */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
.step { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; position: relative; }
.step:not(:last-child) { border-right: 1px solid var(--line); padding-right: var(--space-lg); }
@media (max-width: 860px) { .step { border-right: none !important; } }
.step .sn {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--asphalt);
  display: grid; place-items: center; font-family: 'Archivo'; font-weight: 800;
  margin-bottom: var(--space-md); background: var(--paper);
}
.step:last-child .sn { background: var(--brand); border-color: var(--brand); color: var(--paper); }
.step h3 { font-size: 1.08rem; margin-bottom: 6px; }
.step p { font-size: 0.92rem; color: var(--ink-2); }

/* sekcja akredytacji — ciemna */
.dark { background: var(--asphalt); color: var(--paper); }
.dark h2 { color: var(--paper); }
.dark .section-head p { color: oklch(0.82 0.01 82); }
.accred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); margin-top: var(--space-xl); }
.accred {
  border: 1px solid oklch(0.42 0.01 80); border-radius: var(--radius-lg);
  padding: var(--space-lg); background: oklch(0.30 0.009 78);
}
.accred .t { font-family: 'Archivo'; font-weight: 700; font-size: 1.05rem; color: var(--brand-light); }
.accred p { font-size: 0.9rem; color: oklch(0.82 0.01 82); margin-top: 6px; }

/* ═══════════ KONTAKT / FORMULARZ ═══════════ */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-3xl); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-2xl); } }
.field { display: grid; gap: 6px; margin-bottom: var(--space-md); }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font-family: inherit; font-size: 0.97rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 30%, transparent);
}
.contact-aside .ci { display: flex; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--line); }
.contact-aside .ci .ck { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); min-width: 92px; }
.contact-aside .ci .cv { font-weight: 500; }

/* ═══════════ STOPKA ═══════════ */
.footer { background: var(--asphalt); color: oklch(0.82 0.01 82); padding-block: var(--space-3xl) var(--space-xl); }
.footer a { color: oklch(0.82 0.01 82); }
.footer a:hover { color: var(--brand-light); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-2xl); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; gap: var(--space-xl); } }
.footer h4 { font-family: 'Archivo'; color: var(--paper); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-md); }
.footer ul { list-style: none; display: grid; gap: 8px; font-size: 0.92rem; }
.partner-lockup { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); padding: var(--space-md); border: 1px solid oklch(0.42 0.01 80); border-radius: var(--radius-lg); }
.partner-lockup .pl-t { font-size: 0.8rem; color: oklch(0.72 0.01 82); }
.partner-lockup .pl-t b { color: var(--paper); display: block; font-family: 'Archivo'; font-size: 0.98rem; }
.footer-bottom { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid oklch(0.38 0.01 80); font-size: 0.82rem; color: oklch(0.66 0.01 82); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); }

/* ═══════════ PODSTRONA NORMY ═══════════ */
.badge {
  display: inline-block; font-family: 'Archivo'; font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.04em; padding: 3px 9px;
  border-radius: 999px; background: var(--brand-tint); color: var(--brand-deep);
}
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-md); }
.part { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); background: var(--surface); }
.part .pn { font-family: 'Archivo'; font-weight: 800; color: var(--brand-deep); font-size: 1.02rem; }
.part h3 { font-size: 1.02rem; margin: 6px 0; }
.part p { font-size: 0.9rem; color: var(--ink-2); }

/* tabela charakterystyk */
.ntable { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: var(--space-md); }
.ntable th, .ntable td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ntable thead th { font-family: 'Archivo'; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); }
.ntable tbody tr:hover { background: var(--brand-tint); }
.ntable td .cls { font-family: 'Archivo'; font-weight: 700; color: var(--brand-deep); }

/* przepływ systemu 1 */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); counter-reset: f; margin-top: var(--space-lg); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr 1fr; } }
.fstep { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-lg); position: relative; }
.fstep .fn { font-family: 'Archivo'; font-weight: 800; color: var(--amber-deep); font-size: 0.78rem; letter-spacing: 0.08em; }
.fstep h4 { font-family: 'Archivo'; font-size: 1rem; margin: 6px 0 4px; }
.fstep p { font-size: 0.86rem; color: var(--ink-2); }
.fstep.no { border-color: var(--brand); }
.fstep.no .fn { color: var(--brand-deep); }

/* ═══════════ CHECKLISTA ZKP ═══════════ */
.checkwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-xl); }
.checkbar { height: 8px; background: var(--paper-2); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-lg); }
.checkbar i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .35s var(--ease); }
.checkprog { font-family: 'Archivo'; font-weight: 700; color: var(--ink-2); font-size: 0.9rem; margin-bottom: var(--space-md); }
.checklist { list-style: none; display: grid; gap: 2px; }
.checklist li { display: flex; gap: var(--space-sm); align-items: flex-start; padding: 10px 8px; border-radius: var(--radius); cursor: pointer; transition: background .15s; }
.checklist li:hover { background: var(--brand-tint); }
.checklist input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; cursor: pointer; }
.checklist .ct { font-size: 0.95rem; }
.checklist .cs { font-size: 0.82rem; color: var(--ink-3); }
.checklist li.done .ct { color: var(--ink-3); text-decoration: line-through; }

/* przyciski pobierania */
.dlrow { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-lg); }
.dl { display: flex; align-items: center; gap: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); background: var(--surface); transition: border-color .2s, transform .2s var(--ease); }
.dl:hover { border-color: var(--brand); transform: translateY(-2px); }
.dl .di { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--brand-tint); border-radius: var(--radius); font-family: 'Archivo'; font-weight: 800; color: var(--brand-deep); font-size: 0.72rem; }
.dl .dt { font-family: 'Archivo'; font-weight: 600; font-size: 0.95rem; }
.dl .dd { font-size: 0.8rem; color: var(--ink-3); }

/* reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); animation: rise .7s var(--ease) forwards; }
  .reveal:nth-child(2) { animation-delay: .08s; }
  .reveal:nth-child(3) { animation-delay: .16s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}