:root{
  --code: #003e7b;
  --local: #ff6201;
  --primary: #003e7b;
  --accent: #ff6201;
  --bg: #f7f8fb;
  --fg: #111;
  --muted:#6B7280;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --surface:#ffffff;
  --line:#e7eaf0;
  --text:#0f172a;
}
@media (prefers-color-scheme: dark){:root{--bg:#0b1724;--fg:#F3F4F6;--muted:#9CA3AF}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;color:var(--fg);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
.container{width:min(1120px,92vw);margin:0 auto}
.brand-name .code{color:var(--code);font-weight:800}
.brand-name .local{color:var(--local);font-weight:800}
header.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg),transparent 15%);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in oklab,var(--fg),transparent 90%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:38px;width:auto;background:transparent}
nav ul{list-style:none;display:flex;gap:20px;margin:0;padding:0}nav a{padding:10px 12px;border-radius:10px}
nav a:hover{background:color-mix(in oklab,var(--accent),transparent 80%)}
.hero{padding:70px 0 30px;position:relative;overflow:clip;background:color-mix(in oklab,var(--primary),transparent 95%)}
.offer{padding:70px 0 30px;position:relative;overflow:clip;background:color-mix(in oklab,var(--primary),transparent 98%)}
.kontakt{padding:70px 0 30px;position:relative;overflow:clip;background:color-mix(in oklab,var(--primary),transparent 98%)}
.card{background:color-mix(in oklab,var(--bg),#fff 6%);border:1px solid color-mix(in oklab,var(--fg),transparent 92%);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.section{padding:56px 0}.section h2{font-size:clamp(26px,3vw,36px);margin:0 0 10px}.lead{color:var(--muted)}
.grid{display:grid;gap:24px}.grid.cols-2{grid-template-columns:1fr}@media(min-width:900px){.grid.cols-2{grid-template-columns:1.2fr 1fr}}
table{width:100%;border-collapse:collapse}th,td{padding:10px 8px;border-bottom:1px solid color-mix(in oklab,var(--fg),transparent 90%)}
.badge{font-size:12px;background:color-mix(in oklab,var(--primary),transparent 70%);padding:4px 10px;border-radius:999px;border:1px solid color-mix(in oklab,var(--primary),transparent 40%)}
.teaser{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.t{display:flex;gap:12px;align-items:center;border:1px solid color-mix(in oklab,var(--fg),transparent 90%);border-radius:16px;padding:14px;min-height:72px}
.t img.icon{width:40px;height:40px;flex:0 0 40px;object-fit:contain;display:block}
.to{display:flex;gap:12px;align-items:center;border:0;border-radius:16px;padding:14px;min-height:72px}
.to img.icon{width:100px;height:100px;flex:0 0 40px;object-fit:contain;display:block;border-radius:16px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;border:1px solid color-mix(in oklab,var(--accent),transparent 60%);background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn.outline{background:transparent;color:var(--accent)}
input,textarea,select{width:100%;max-width:600px;max-height:350px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--fg),transparent 85%);background:color-mix(in oklab,var(--bg),#fff 4%);color:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in oklab,var(--accent),transparent 50%);outline-offset:2px}
footer{padding:40px 0 80px;background-color:#FFFFFF;border-top:3px solid color-mix(in oklab,var(--accent),transparent 50%)}
.reveal{opacity:0;transform:translateY(12px);transition:all .6s cubic-bezier(.22,.61,.36,1)}.reveal.in{opacity:1;transform:none}
@media(max-width:900px){.teaser{grid-template-columns:1fr}}

.plines{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;color:#000;}


/* Breadcrumbs */
.breadcrumbs{background: color-mix(in oklab, var(--bg), #fff 6%); border-bottom:1px solid color-mix(in oklab, var(--fg), transparent 92%);}
.breadcrumbs .container{padding:10px 0}
.breadcrumbs ol{list-style:none; display:flex; gap:8px; margin:0; padding:0; font-size:14px; color:var(--muted)}
.breadcrumbs li a{color:var(--accent)}
.breadcrumbs li::after{content:"/"; margin:0 6px; color:var(--muted)}
.breadcrumbs li[aria-current="page"]::after{content:""}
/* Cards grid */
.cards{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 900px){ .cards{grid-template-columns:1fr 1fr 1fr} }
.card.cover img{width:100%; height:160px; object-fit:cover; border-radius:12px; background: #eee}
.why img{width:100%; height:350px; object-fit:cover; border-radius:12px; background: #FFFFFF}
.meta{font-size:13px; color:var(--muted)}
.blog-list article{border:1px solid color-mix(in oklab, var(--fg), transparent 90%); border-radius:16px; padding:14px; background: color-mix(in oklab, var(--bg), #fff 6%)}
.blog-list h3{margin:6px 0}
.tag{font-size:12px; padding:3px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--accent), transparent 60%); color: var(--accent);}

/* --- Mobile navigation --- */
.mobile-toggle{display:inline-flex;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer}
.mobile-toggle span{display:block;width:26px;height:3px;background:color-mix(in oklab,var(--fg), transparent 0%);border-radius:2px}
#primary-nav{display:none;position:absolute;right:12px;top:58px;background:color-mix(in oklab,var(--bg), #fff 8%);border:1px solid color-mix(in oklab,var(--fg), transparent 90%);border-radius:12px;box-shadow:var(--shadow)}
#primary-nav ul{display:flex;flex-direction:column;gap:6px;padding:10px}
#primary-nav a{display:block;padding:10px 12px;border-radius:10px}
@media (min-width: 900px){
  .mobile-toggle{display:none}
  #primary-nav{position:static;display:block;background:transparent;border:0;box-shadow:none}
  #primary-nav ul{flex-direction:row;gap:20px;padding:0}
}
.nav-open #primary-nav{display:block}

/* Active nav state */
nav a.active{background: color-mix(in oklab, var(--accent), transparent 85%); border:1px solid color-mix(in oklab, var(--accent), transparent 60%);}

.credit{font-size:12px;color:var(--muted);}
.btn.outline{border-color: color-mix(in oklab, var(--accent), transparent 40%);}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:color-mix(in oklab,var(--fg),transparent 0%);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;z-index:9999;max-width:90vw}
#toast.error{background:#b91c1c}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}


.form-wrap{position:relative}
.form-toast{position:absolute; right:0; top:-10px; transform:translateY(-100%); background:color-mix(in oklab,var(--accent), transparent 0%); color:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); max-width:min(360px, 92vw); z-index:1000; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;}
.form-toast.error{background:#b91c1c}
.form-toast.show{opacity:1; transform:translateY(-110%)}
@media (max-width: 600px){ .form-toast{left:0; right:auto; transform:translateY(-100%)} }

.form-wrap{position:relative}
.form-flash{position:absolute; right:0; top:-10px; transform:translateY(-100%); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); z-index:1000; max-width:min(380px,92vw); font-weight:500}
.form-flash.ok{background: color-mix(in oklab, var(--accent), transparent 0%); color:#fff}
.form-flash.error{background:#b91c1c; color:#fff}
@media (max-width: 640px){ .form-flash{left:0; right:auto} }

.consent{display:flex; align-items:center; gap:8px; font-size:14px; margin:8px 0 12px}
.consent a{text-decoration:underline}
.form-wrap{position:relative}
.form-flash{position:absolute; right:0; top:-10px; transform:translateY(-100%); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); z-index:1000; max-width:min(380px,92vw); font-weight:500}
.form-flash.ok{background: color-mix(in oklab, var(--accent), transparent 0%); color:#fff}
.form-flash.error{background:#b91c1c; color:#fff}
@media (max-width: 640px){ .form-flash{left:0; right:auto} }


.form-error{margin-top:6px;color:#b91c1c;font-size:14px}
input.invalid, textarea.invalid, select.invalid{border-color:#b91c1c; box-shadow:0 0 0 3px rgba(185,28,28,.15)}
body.blurred main, body.blurred header, body.blurred footer{ filter: blur(3px); transition: filter .2s ease }
.modal-success{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:9999}
.modal-success.show{opacity:1; pointer-events:all}
.modal-success .box{background:#fff; padding:24px; border-radius:16px; max-width:420px; width:92%; text-align:center; box-shadow:var(--shadow)}
.modal-success h3{margin:0 0 8px; font-size:22px}
.modal-success p{margin:0 0 16px}
.modal-success .btn{padding:10px 16px; border-radius:12px}

form.contact{display:grid;grid-template-columns:1fr;gap:22px}

form.contact .btn[type="submit"]{display:block;width:100%;padding:14px 18px;border-radius:12px}

.char-counter{display:block;text-align:right;font-size:13px;opacity:.85;margin-top:6px}
.char-counter .muted{opacity:.6}

form.contact { display:grid; grid-template-columns:1fr; gap:5px }

.consent-wrap{display:flex; flex-direction:column; gap:4px; margin-top:2px}
.consent-label{display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.4}
.consent-label input[type="checkbox"]{margin-top:3px;max-width: 25px;}
.consent-wrap .form-error{margin-top:2px}

input.valid, textarea.valid, select.valid{border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.12)}

.hero-slider { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.hero-slider .slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .5s ease; }
.hero-slider .slide { width: 100%; aspect-ratio: 16/10; background: #0b0f1a; display: flex; align-items: center; justify-content: center; }
.hero-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-slider .nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,.35); color:#fff; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.hero-slider .nav:hover { background: rgba(0,0,0,.5); }
.hero-slider .prev { left: 10px; }
.hero-slider .next { right: 10px; }

.hero-slider .dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-slider .dots button { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-slider .dots button[aria-selected="true"] { background: #fff; width: 24px; }

@media (prefers-reduced-motion: reduce) {
  .hero-slider .slides { transition: none; }
  .hero-slider .nav, .hero-slider .dots button { transition: none; }
}
/* --- Blog slider --- */
#blog .blog-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

#blog .blog-controls{
  display:flex;
  gap:.5rem;
}

#blog .blog-controls button{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--code);
  background:#fff;
  color:var(--code);
  font-size:1.2rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s;
}
#blog .blog-controls button:hover{
  background:color-mix(in oklab, var(--code), #fff 88%);
}

/* zamieniamy .blog-list na horyzontalny tor */
#blog .blog-slider{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scroll-behavior:smooth;
}

/* Twoje .blog-list article już są wystylowane w styles.css,
   tu tylko dokładamy szerokość i snap */
#blog .blog-slider article{
  flex:0 0 280px;
  scroll-snap-align:start;
}

@media (min-width: 1024px){
  #blog .blog-slider article{
    flex:0 0 320px;
  }
}

/* na bardzo małych ekranach chowamy strzałki – i tak jest swipe */
@media (max-width: 540px){
  #blog .blog-controls{display:none;}
}
/* --- Referencje slider --- */
#referencje .ref-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}

#referencje .ref-controls {
  display:flex;
  gap:.5rem;
}

#referencje .ref-controls button {
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--code, #003e7b);
  background:#fff;
  color:var(--code, #003e7b);
  font-size:1.2rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s;
}
#referencje .ref-controls button:hover {
  background:rgba(0,62,123,.06);
}

#referencje .ref-track {
  display:flex;
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:.5rem;
  scroll-behavior:smooth;
}

#referencje .ref-track .card {
  flex:0 0 340px;
  background:#fff;
  border:1px solid rgba(0,0,0,.03);
  border-radius:1.1rem;
  padding:1.1rem 1.1rem 1.1rem;
  box-shadow:0 12px 30px rgba(0,0,0,.03);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:.65rem;
}

#referencje .ref-track .ref-top {
  display:flex;
  align-items:center;
  gap:.7rem;
}

#referencje .ref-track .avatar {
  width:40px;
  height:40px;
  border-radius:999px;
  background:rgba(255,98,1,.15);
  color:#ff6201;
  font-weight:700;
  font-size:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  flex:0 0 40px;
}

#referencje .ref-track .who .name {
  font-weight:600;
  font-size:.85rem;
  color:#000;
}
#referencje .ref-track .who .role {
  font-size:.7rem;
  color:#6b7280;
}

#referencje .ref-track .stars {
  margin-left:auto;
  font-size:.65rem;
  letter-spacing:.12em;
  color:#ffb347; /* delikatne złoto */
  white-space:nowrap;
}

#referencje .ref-track .card p {
  font-size:.83rem;
  line-height:1.4;
  color:#1f2937;
}

/* desktop większy */
@media (min-width: 1024px) {
  #referencje .ref-track .card {
    flex:0 0 380px;
  }
}

/* mobile: chowamy strzałki */
@media (max-width: 540px){
  #referencje .ref-controls { display:none; }
}

/* --- Social media --- */
#social .social-wrap {
  text-align:center;
}

#social h2 {
  margin-bottom:.3rem;
}

#social .social-text {
  color:#6b7280;
  font-size:.85rem;
  margin-bottom:1rem;
}

#social .social-list {
  display:block;
  gap:.75rem;
}

#social .social-btn {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.04);
  border-radius:.9rem;
  padding:.4rem .8rem .4rem .45rem;
  text-decoration:none;
  color:#003e7b;
  box-shadow:0 8px 24px rgba(0,0,0,.03);
  transition:transform .12s ease-out, box-shadow .12s;
}

#social .social-btn .icon {
  width:30px;
  height:30px;
  border-radius:.7rem;
  background:rgba(0,62,123,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#social .social-btn .icon svg {
  width:16px;
  height:16px;
  fill:currentColor;
}

#social .social-btn .label {
  font-weight:500;
  font-size:0.9rem;
  white-space:nowrap;
  text-align: center;
}

#social .social-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.05);  
}

/* kolorki per kanał */
#social .social-btn.li { color:#0a66c2; }
#social .social-btn.fb { color:#0866ff; }
#social .social-btn.yt {
  color:#ff0000;
}
#social .social-btn.gg {
  color:#ff6201;
}

@media (max-width: 540px) {
  #social .social-list {
    flex-direction:column;
    align-items:flex-start;
  }
  #social .social-btn {
    width:100%;
    justify-content:flex-start;
  }
}