:root{
  /* Light / elegant */
  --bg:#f6f8ff;
  --card:#ffffff;
  --line:rgba(11,18,32,.12);

  /* Tekst */
  --text:#0f172a;
  --muted:#475569;

  --brand1:#1bb7e6;
  --brand2:#6a5cff;

  --shadow:0 18px 60px rgba(16,24,40,.10);
  --radius:20px;
  --max:1040px;

  /* Logo */
  --logoH: 72px;
  --logoHMobile: 56px;
  --logoMaxW: 320px;
  --logoMaxWMobile: 200px;

  /* Footer logo */
  --footerLogoH: 92px;
  --footerLogoHMobile: 78px;
  --footerLogoMaxW: 260px;
  --footerLogoMaxWMobile: 220px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% 2%, rgba(27,183,230,.12), transparent 60%),
    radial-gradient(900px 520px at 88% 8%, rgba(106,92,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), #ffffff 85%);
  line-height:1.55;
}

a{color:inherit}
.container{width:min(var(--max), calc(100% - 40px)); margin:0 auto}

/* Focus */
:focus-visible{
  outline:3px solid rgba(106,92,255,.35);
  outline-offset:3px;
  border-radius:10px;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-9999px;
  top:8px;
}
.skip-link:focus{
  left:8px;
  z-index:9999;
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* =========================
   Header
========================= */
.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.80);
  border-bottom:1px solid var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  min-height:calc(var(--logoH) + 20px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  min-width:240px;
}

/* ✅ Logo proporcjonalne */
.brand__logo{
  height:var(--logoH);
  width:auto;
  max-width:var(--logoMaxW);
  object-fit:contain;
  border-radius:10px;
  filter:drop-shadow(0 10px 18px rgba(16,24,40,.14));
}

.brand__name{
  font-weight:800;
  letter-spacing:.2px;
  font-size:20px;
  line-height:1.1;
}

.brand__tag{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
}

.nav{display:flex; gap:10px; align-items:center}
.nav a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border-radius:12px;
}
.nav a:hover{
  color:var(--text);
  background:rgba(11,18,32,.04);
}

.menu{
  display:none;
  border:1px solid var(--line);
  background:rgba(11,18,32,.03);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

/* Mobile nav – działa przez [hidden] */
.mobile-nav{
  padding:0 0 12px;
}
.mobile-nav[hidden]{ display:none !important; }

.mobile-nav a{
  display:block;
  padding:10px 0;
  color:var(--muted);
  text-decoration:none;
}
.mobile-nav a:hover{color:var(--text)}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(11,18,32,.04);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
button.btn{font:inherit; cursor:pointer}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(11,18,32,.06);
  border-color:rgba(11,18,32,.16);
}
.btn--primary{
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 40px rgba(106,92,255,.16);
}
.btn--ghost{background:rgba(11,18,32,.03)}

/* =========================
   Hero / Video cards
========================= */
.hero{padding:14px 0 18px}

.video-card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:14px;
}

.video-card__top{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
}

h1{
  margin:2px 0 10px;
  font-size:clamp(24px, 3.2vw, 38px);
  line-height:1.12;
  letter-spacing:-.5px;
}

.lead{
  margin:0 0 12px;
  color:var(--muted);
  max-width:none;
  font-size:15px;
}

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

.video{
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  border:1px solid var(--line);
  background:#000;
  margin-top:10px;
}

/* Value proposition benefits */
.benefits{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  display:grid;
  gap:8px;
}
.benefits li{
  position:relative;
  padding-left:22px;
  color:var(--muted);
  line-height:1.5;
}
.benefits li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--text);
  opacity:.9;
  font-weight:800;
}

/* Pills */
.pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.10);
  background:rgba(11,18,32,.03);
  color:rgba(11,18,32,.78);
  font-size:13px;
  font-weight:600;
}

/* =========================
   Cards / Lists
========================= */
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:22px;
  padding:14px;
  box-shadow:0 10px 30px rgba(16,24,40,.06);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(11,18,32,.18);
  background:#fff;
}

.card h2{margin:0 0 8px; font-size:16px; letter-spacing:-.2px}
.card h3{margin:0 0 10px; font-size:15px; letter-spacing:-.2px}

.list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}
.list li{margin:7px 0}
.list strong{color:var(--text)}

/* =========================
   Sections / Grids
========================= */
.section{padding:24px 0}

.section--alt{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(11,18,32,.02);
}

.section h2{
  margin:0 0 12px;
  font-size:clamp(18px, 2.2vw, 26px);
  letter-spacing:-.35px;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.section-head p{
  margin:0;
  color:var(--muted);
  max-width:none;
}

.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.grid-4{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}

/* Equal-height cards in grids */
.grid-3, .grid-4{align-items:stretch}
.grid-3 > .card, .grid-4 > .card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.grid-3 > .card .lead:last-child,
.grid-4 > .card .lead:last-child{margin-bottom:0}

/* =========================
   NIS2
========================= */
.nis2-box{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:16px;
}

.nis2-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
  align-items:stretch;
}

.nis2-item{
  height:100%;
  display:flex;
  flex-direction:column;
}

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

.nis2-details{
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.nis2-details summary{
  cursor:pointer;
  font-weight:800;
  color:var(--text);
  list-style:none;
}
.nis2-details summary::-webkit-details-marker{display:none;}
.nis2-details summary::after{
  content:"  +";
  font-weight:900;
  color:var(--muted);
}
.nis2-details[open] summary::after{content:"  –";}
.nis2-details__body{margin-top:10px;}

/* =========================
   Contact (poprawione odstępy)
========================= */
.contact{
  width:100%;
  margin:0;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:22px;
  padding:16px;
  box-shadow:var(--shadow);
}

.contact__lead{margin:0 0 12px; color:var(--muted)}
.contact__cta{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* było 24px */
.contact__hr{margin:18px 0;}

.contact__list{
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px 18px;             /* było 12px 26px */
}

.contact__item{
  margin:0;
  display:grid;
  grid-template-columns:120px 1fr;  /* było 140px */
  column-gap:12px;
  align-items:baseline;
  padding:6px 0;             /* było 10px 0 */
}

.contact__item dt,
.contact__item dd{
  margin:0;
  line-height:1.35;
}

.contact__item dt{
  font-weight:600;
  color:var(--muted);
}

.contact__item dd{
  overflow-wrap:anywhere;
}

.contact__item dd a{
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}

/* Form */
.grid-2{
  display:grid;
  gap:12px;
}
@media (min-width: 720px){
  .grid-2{grid-template-columns:1fr 1fr;}
}

.contact__form label{display:grid; gap:6px;}
.contact__form input,
.contact__form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:11px 12px;
  background:#fff;
  color:var(--text);
  font:inherit;
}
.contact__form textarea{resize:vertical; min-height:120px;}
.contact__form input::placeholder,
.contact__form textarea::placeholder{color:rgba(71,85,105,.8);}

.contact__textarea{margin-top:12px;}
.contact__consent{
  display:flex !important;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
}
.contact__consent input{
  width:18px !important;
  height:18px !important;
  margin-top:3px;
}
.contact__small{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* =========================
   Footer
========================= */
.footer{
  padding:18px 0;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.70);
}

.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.footer__left{display:flex; align-items:center; gap:12px}

/* ✅ Footer logo proporcjonalne */
.footer__logo{
  height:var(--footerLogoH);
  width:auto;
  max-width:var(--footerLogoMaxW);
  object-fit:contain;
  border-radius:10px;
}

.footer__name{font-weight:800}
.footer__muted{color:var(--muted); font-size:13px}

.footer__top{
  color:var(--muted);
  text-decoration:none;
}
.footer__top:hover{
  color:var(--text);
  text-decoration:underline;
}

/* =========================
   Modal
========================= */
.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
}

.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.modal__dialog{
  position:relative;
  max-width:760px;
  width:calc(100% - 24px);
  margin:48px auto;
  background:#fff;
  border-radius:16px;
  padding:18px;
  border:1px solid rgba(11,18,32,.12);
  box-shadow:var(--shadow);
}

.modal__close{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color:rgba(11,18,32,.75);
}
.modal__close:hover{color:rgba(11,18,32,.95);}

/* Honeypot */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* =========================
   Cookies banner
========================= */
.cookie[hidden]{display:none !important;}
.cookie{
  position:fixed;
  left:0; right:0;
  bottom:14px;
  z-index:9999;
  padding:0 14px;
}

.cookie__card{
  width:min(var(--max), calc(100% - 0px));
  margin:0 auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border-radius:22px;
  box-shadow:var(--shadow);
  padding:14px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
}

.cookie__text{max-width:80ch;}
.cookie__title{font-weight:900; letter-spacing:-.2px;}
.cookie__desc{margin:6px 0 0; color:var(--muted); font-size:14px;}
.cookie__link{display:inline-block; margin-top:6px; color:var(--muted); font-size:13px; text-decoration:underline;}
.cookie__actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

.cookie__panel{
  width:min(var(--max), calc(100% - 0px));
  margin:10px auto 0;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  border-radius:22px;
  box-shadow:var(--shadow);
}

.cookie__panel-inner{padding:14px;}

.cookie__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid rgba(11,18,32,.08);
}
.cookie__row:last-child{border-bottom:none;}

.cookie__label{font-weight:800;}
.cookie__small{color:var(--muted); font-size:13px; margin-top:2px;}

.cookie__pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,18,32,.03);
  font-weight:800;
  font-size:12px;
}
.cookie__pill--on{opacity:.9}

.cookie__panel-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:12px;
}

/* Toggle switch */
.switch{position:relative; display:inline-flex; width:52px; height:30px;}
.switch input{opacity:0; width:0; height:0;}
.switch__track{
  position:absolute; inset:0;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(11,18,32,.10);
  transition:all .15s ease;
}
.switch__track::after{
  content:"";
  position:absolute;
  width:24px; height:24px;
  left:3px; top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 20px rgba(16,24,40,.12);
  transition:transform .15s ease;
}
.switch input:checked + .switch__track{
  background:linear-gradient(135deg, var(--brand1), var(--brand2));
}
.switch input:checked + .switch__track::after{
  transform:translateX(22px);
}

/* =========================
   Responsive
========================= */
@media (max-width: 1100px){
  .grid-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .nis2-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width: 980px){
  .grid-3{grid-template-columns:1fr}
  .section-head{align-items:flex-start}
  .nis2-grid{grid-template-columns:1fr;}
}

@media (max-width: 900px){
  .cookie__card{flex-direction:column; align-items:stretch;}
  .cookie__actions{justify-content:flex-start;}
}

@media (max-width: 720px){
  .nav{display:none}
  .menu{display:inline-flex}

  .header__inner{padding:8px 0;}

  .brand__logo{
    height:var(--logoHMobile);
    width:auto;
    max-width:var(--logoMaxWMobile);
    border-radius:10px;
  }

  .footer__logo{
    height:var(--footerLogoHMobile);
    width:auto;
    max-width:var(--footerLogoMaxWMobile);
  }

  /* kontakt: 2 kolumny -> 1 kolumna na mobile */
  .contact__list{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .grid-4{grid-template-columns:1fr}
  .container{width:min(var(--max), calc(100% - 28px))}
  .contact__item{grid-template-columns:1fr;}
}