:root{
  --bg: #ffffff;
  --text: #081018;
  --muted: #5b6573;
  --primary: #0d3b66;
  --primary-600:#0b3357;
  --accent:#1e90ff;
  --surface:#f5f7fa;
  --card:#ffffff;
  --border:#e6e9ef;
  --shadow:0 10px 25px rgba(13,59,102,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
img{max-width:100%;height:auto;border-radius:12px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* Header */
header{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:0}
.brand .title{font-weight:800;letter-spacing:.2px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{padding:10px 12px;border-radius:10px}
nav a:hover{background:var(--surface);text-decoration:none}
.cta{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);font-weight:600}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{background:transparent;border:1px solid var(--border);box-shadow:none}
/* Mobile nav */
.burger{display:none;border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff}
@media (max-width:900px){
  nav ul{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:12px}
  nav ul.open{display:flex;flex-direction:column}
  .burger{display:inline-flex}
}
/* Hero */
.hero{padding:56px 0 32px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 12px}
.hero p.lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero img.hero-logo{width:100%; max-width:520px; display:block; margin:auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.08));}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1{font-size:32px}
}
/* Sections */
section{padding:56px 0;border-top:1px solid var(--border)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px}
.section-head h2{margin:0;font-size:28px}
.section-head p{margin:0;color:var(--muted)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card h3{margin:8px 0 8px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12px;color:var(--muted)}

/* About: two-column with large media left */
.about .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center}
.about .content .kicker{color:var(--muted); margin:0 0 8px}
.about .content h2{margin:0 0 10px; font-size:28px}
.about .content p{margin:0 0 10px}
.about .horiz-features{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.about .horiz-features .chip{border:1px solid var(--border); background:var(--surface); padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px}
.about .stats{display:flex; gap:16px; align-items:center; margin-top:10px; color:var(--muted)}

/* News cards */
.news .post{display:flex;flex-direction:column;gap:10px}
.post .meta{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px}

/* Benefits: split with image on right */
.benefits.alt .wrap{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.benefits.alt .feature{display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:var(--shadow); margin-bottom:12px}
.benefits.alt .feature .icon{font-size:22px; line-height:1}
@media (max-width:900px){ .about .wrap, .benefits.alt .wrap { grid-template-columns:1fr }}

/* Timeline for actions/successes */
.timeline{background:var(--surface)}
.timeline .road{position:relative; margin:24px 0}
.timeline .road::before{content:""; position:absolute; left:calc(50% - 1px); top:0; bottom:0; width:2px; background:var(--border)}
.timeline .item{position:relative; width:calc(50% - 14px); margin:0 0 22px}
.timeline .item .card{padding:16px}
.timeline .item::before{content:""; position:absolute; top:18px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,.1)}
.timeline .left{margin-right:auto; padding-right:24px}
.timeline .left::before{right:-6px}
.timeline .right{margin-left:auto; padding-left:24px}
.timeline .right::before{left:-6px}
@media (max-width:900px){
  .timeline .road::before{left:8px}
  .timeline .item{width:100%; padding-left:28px}
  .timeline .left, .timeline .right{margin:0}
  .timeline .left::before, .timeline .right::before{left:2px}
}

/* Board: two-column members for variety */
.board .member{display:flex;gap:14px;align-items:center}
.board .member img{width:84px;height:84px;border-radius:16px;object-fit:cover}
.board .member .info{flex:1}
.board .grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
@media (max-width:900px){ .board .grid-2{grid-template-columns:1fr}}

/* Join: horizontal steps */
.steps .rail{display:flex; gap:14px; align-items:stretch; flex-wrap:wrap}
.steps .step{flex:1 1 240px; border:1px solid var(--border); border-radius:16px; background:var(--card); padding:16px; box-shadow:var(--shadow)}
.steps .step .num{width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:800; border:1px solid var(--border); margin-bottom:8px; background:#fff}

/* Contact: swap columns order for variety on desktop */
.contact .cols{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.contact .cols.swap{grid-template-columns: .8fr 1.2fr}
@media (max-width:900px){.contact .cols, .contact .cols.swap{grid-template-columns:1fr}}

/* Footer */
footer{padding:40px 0;border-top:1px solid var(--border);color:var(--muted)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr}}
footer .brand img{width:32px;height:32px}
footer a{color:var(--muted)}
/* Utility */
.muted{color:var(--muted)}
.hidden{display:none}
/* About full-screen */
.about{min-height:100vh; display:flex; align-items:center}
@media (max-width:900px){ .about{min-height:auto} }

/* Form label layout: stack caption and input */
form label{display:flex; flex-direction:column; gap:6px}

/* About: full-bleed 50/50 halves */
.about.fullbleed{padding:0; border-top:1px solid var(--border)}
.about.fullbleed .full{width:100vw; margin-left:calc(50% - 50vw); display:grid; grid-template-columns:1fr 1fr; min-height:100vh}
.about.fullbleed .media{position:relative; min-height:50vh}
.about.fullbleed .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0}
.about.fullbleed .content{display:flex; align-items:center; padding:clamp(20px, 6vw, 72px); background:#fff}
@media (max-width:900px){
  .about.fullbleed .full{grid-template-columns:1fr; min-height:auto}
  .about.fullbleed .media{min-height:240px}
}


/* === Adjust 'O nas' height to be just above content (no full 100vh) === */
.about{min-height:auto; display:block}
.about.fullbleed .full{min-height:auto}
.about.fullbleed .media{min-height:0; height:100%}


/* === Contact form polish === */
form.card{padding:22px 20px}
form .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:900px){ form .grid{grid-template-columns:1fr} }
form label{font-weight:600; color:var(--text)}
form small.help{color:var(--muted)}
/* Inputs */
input,select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px;
  background:#fff; transition:border-color .2s ease, box-shadow .2s ease;
}
input::placeholder, textarea::placeholder{color:#9aa3af}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(30,144,255,.12);
}
/* Checkbox consent */
label.consent{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:flex-start; font-weight:500}
label.consent input[type="checkbox"]{width:18px; height:18px; margin-top:2px; accent-color: var(--primary)}
/* Actions row */
form .actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:6px}
form .actions .help{margin-left:6px}


/* === Contact: stretch form to fill column height === */
.contact .cols, .contact .cols.swap{align-items:stretch}
.contact .cols form.card{display:flex; flex-direction:column; height:100%}
.contact .cols form.card .grid{flex:0 0 auto}
.contact .cols form.card textarea{flex:1 1 auto; min-height:200px}
.contact .cols form.card .actions{margin-top:auto}


/* === Colorful UI polish === */
:root{
  --primary: #0d3b66;
  --primary-600: #0b3357;
  --accent: #1e66ff;          /* mocniejszy niebieski */
  --accent-2: #e63946;        /* ciepła czerwień dla akcentów */
  --bg: #ffffff;
  --bg-tint-1: #f5f8ff;       /* lekko niebieskie tło sekcji */
  --bg-tint-2: #fff6f6;       /* lekko czerwone tło sekcji */
  --chip-bg: #eef2ff;
  --chip-text: #1e3a8a;
}
/* Delikatny gradient w hero i na timeline */
.hero{background:linear-gradient(180deg, rgba(30,102,255,.05), transparent)}
.timeline{background:var(--bg-tint-2)}
.news{background:var(--bg-tint-1)}
.about.fullbleed .content{background:linear-gradient(180deg, #ffffff, #f9fbff)}

/* Przyciski w gradiencie */
.btn.primary{
  background-image:linear-gradient(90deg, var(--primary), #1b5fbf);
  border-color:#1b5fbf;
}
.btn.primary:hover{filter:brightness(.95)}

/* Chipy i badge w kolorze */
.about .horiz-features .chip{
  background:var(--chip-bg);
  color:var(--chip-text);
  border-color:#dbe4ff;
}

/* Oś czasu: punkt i linia bardziej widoczne */
.timeline .road::before{background:linear-gradient(var(--accent-2), #ff9aa2)}
.timeline .item::before{background:var(--accent-2)}

/* Linki w treści */
a{color:#1552cc}
a:hover{color:#0f47b6}

/* Karty: delikatny kolorowy top-border dla wyróżnienia */
.card{border-top:3px solid rgba(30,102,255,.12)}
.benefits.alt .feature{border-top:3px solid rgba(230,57,70,.16)}

/* Formularz: spójne kolory focus */
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(30,102,255,.14);
}
label.consent input[type="checkbox"]{accent-color: var(--accent)}


/* === Zarząd: v2 mosaic layout with effects === */
.board.v2{background:linear-gradient(180deg, rgba(13,59,102,.03), transparent)}
.board.v2 .wrap{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
@media (max-width:1100px){ .board.v2 .wrap{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .board.v2 .wrap{grid-template-columns:1fr} }

.profile{position:relative; background:var(--card); border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:var(--shadow); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.profile:hover{transform:translateY(-6px) rotate(-0.4deg); box-shadow:0 18px 40px rgba(13,59,102,.18)}
.profile::after{content:""; position:absolute; inset:-1px; background:linear-gradient(120deg, transparent, rgba(30,102,255,.18), transparent); transform:translateX(-110%); transition:transform .6s ease; pointer-events:none}
.profile:hover::after{transform:translateX(110%)}

.profile .meta{display:flex; gap:14px; align-items:center}
.profile img.avatar{width:96px; height:96px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.12)}
.profile h3{margin:6px 0 2px}
.profile p.role{margin:0; color:var(--muted)}
.profile .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.profile .tag{font-size:12px; padding:6px 10px; background:var(--surface); border:1px solid var(--border); border-radius:999px}

/* Stagger for visual rhythm */
.board.v2 .wrap > .profile:nth-child(3n+2){margin-top:12px}
.board.v2 .wrap > .profile:nth-child(3n+3){margin-top:24px}


/* === Timeline progressive reveal === */
.timeline{position:relative; overflow:hidden}
.timeline .road{position:relative; margin:24px 0}
.timeline .item{opacity:0; transform:translateY(24px)}
.timeline .item.visible{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
.timeline .card{position:relative}
.timeline .card img.thumb{width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:8px; display:block}

/* Progress line that grows with scroll */
.timeline .road::after{
  content:""; position:absolute; left:calc(50% - 1px); top:0; width:2px; height:0;
  background:linear-gradient(var(--accent-2), #ffb3bd); transition:height .4s ease;
}
.timeline.progress .road::after{height:100%}

/* Subtle float-on-hover for cards */
.timeline .card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(13,59,102,.12)}

/* Spacing tune for dense lists */
.timeline .item .card{padding:16px 18px}


/* === Header mobile & RWD improvements === */
header{position:sticky; top:0; z-index:1000; transition:box-shadow .25s ease, background-color .25s ease}
header.scrolled{box-shadow:0 8px 22px rgba(13,59,102,.08); background:rgba(255,255,255,.95)}
/* Better container width control */
:root{--container:1200px}
.container{max-width:var(--container)}
section{scroll-margin-top:80px}

/* Mobile nav panel */
@media (max-width:900px){
  nav ul{
    position:fixed; left:0; right:0; top:64px; bottom:0;
    display:none; flex-direction:column; gap:10px;
    background:#fff; padding:16px 20px 24px; border-top:1px solid var(--border);
    overflow:auto; z-index:1001;
    transform:translateY(-8px); opacity:.0; transition:transform .25s ease, opacity .25s ease;
  }
  nav ul.open{display:flex; transform:translateY(0); opacity:1}
  .burger{display:inline-flex}
  body.nav-open{overflow:hidden}
  .nav-backdrop{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.28);
    backdrop-filter: blur(2px); z-index:1000; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .nav-backdrop.show{opacity:1; pointer-events:auto}
  nav a{padding:14px 12px; border-radius:12px}
  nav a:active{background:var(--surface)}
}

/* Tap targets */
nav a{padding:12px 14px}
/* Focus visibility */
:focus-visible{outline:3px solid rgba(30,102,255,.35); outline-offset:2px; border-radius:12px}

/* === Reveal animations (safe defaults) === */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
.reveal.left{transform:translateX(-24px)}
.reveal.right{transform:translateX(24px)}
.reveal.left.in, .reveal.right.in{transform:none}

/* Hover micro-interactions */
.card{transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(13,59,102,.12)}
.btn{transition:transform .1s ease, filter .2s ease}
.btn:active{transform:scale(.98)}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}


/* === Mobile fixes (header, CTA, safe area) === */
:root{ --safeTop: env(safe-area-inset-top, 0px); }
header{ padding-top: var(--safeTop); }
.nav{gap:10px}
.brand .title{word-break:break-word}
@media (max-width:520px){
  .brand .title{font-size:15px; line-height:1.15; max-width:60vw}
  .cta .btn.primary{padding:10px 12px; font-size:14px; border-radius:12px}
}
@media (max-width:420px){
  .cta .btn.ghost{display:none} /* ukryj 'Najnowsze' na bardzo wąskich ekranach */
}
/* iOS body lock when nav open */
body.nav-open{overflow:hidden; position:fixed; inset:auto 0 0 0; width:100%}

/* Contact: on mobile show FORM first, MAP second */
@media (max-width:900px){
  #kontakt .cols{display:flex; flex-direction:column}
  #kontakt .cols > form.card{order:1}
  #kontakt .cols > .card{order:2}
}

/* Timeline mobile alignment (ensure left rail) */
@media (max-width:900px){
  .timeline .road::before{left:10px}
  .timeline .item{padding-left:32px}
  .timeline .left::before, .timeline .right::before{left:6px}
}

/* Post titles wrap better on mobile */
@media (max-width:520px){
  .section-head h2{word-break:break-word}
}


/* === Fix central red line in timeline === */
.timeline .road::after{display:none!important} /* disable old progress line */
@media (max-width:900px){
  .timeline .road::before{left:12px!important}
  .timeline .item{padding-left:36px}
  .timeline .left::before, .timeline .right::before{left:8px!important}
}

/* === Compact mobile header === */
@media (max-width:640px){
  .brand img{width:32px; height:32px}
  .brand .title{font-size:14px; line-height:1.2; max-width:58vw}
  .cta{display:none} /* hide big top CTA */
  header .nav{padding:10px 0}
  nav a{padding:12px}
  .mobile-cta{position:fixed; left:12px; right:12px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px); z-index:1100}
  .mobile-cta .btn.primary{width:100%; padding:14px 16px; border-radius:14px}
  body.nav-open .mobile-cta{display:none} /* hide bottom CTA when menu open */
}

/* === Mobile nav panel robustness === */
@media (max-width:900px){
  nav ul{
    position:fixed; left:0; right:0; top:var(--headerH, 72px); bottom:0;
    z-index:1003; /* above backdrop (1001) */
  }
  .nav-backdrop{z-index:1001}
}