:root{
  --bg:#fafafa;
  --text:#111;
  --muted:#666;
  --card:#fff;
  --stroke:rgba(17,17,17,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.10);
  --red:#d40000;
  --radius:18px;
}
body{ overflow-x: hidden; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans";
  color:var(--text);
  background:var(--bg);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.9}

.container{max-width:1100px; margin:0 auto; padding:0 18px;}
.skip{position:absolute; left:-9999px}
.skip:focus{left:18px; top:18px; background:#fff; padding:10px 12px; border:1px solid var(--stroke); border-radius:10px; z-index:999}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,250,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--stroke);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:700;}
.brand__dot{width:10px; height:10px; background:var(--red); border-radius:50%;}
.nav{display:flex; gap:18px; font-weight:600; color:var(--muted);}
.topbar__cta{display:flex; gap:10px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; font-weight:700;
  border:1px solid var(--stroke);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--red); color:#fff; border-color:rgba(0,0,0,.0); box-shadow:0 10px 24px rgba(212,0,0,.18);}
.btn--ghost{background:#fff;}
.btn--full{width:100%}

.hero{position:relative; padding:56px 0 56px; overflow:hidden;}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center;}
h1{font-size:42px; line-height:1.1; margin:0 0 10px;}
.lead{font-size:18px; color:var(--muted); margin:0 0 18px;}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 18px;}
.badges{list-style:none; padding:0; margin:0; display:grid; gap:10px; color:var(--muted);}
.badges li{padding-left:18px; position:relative;}
.badges li:before{content:""; width:8px; height:8px; background:var(--red); border-radius:50%; position:absolute; left:0; top:.45em;}

.hero__card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
}
.logoCard__logo{position:relative; display:inline-block; margin-bottom:12px;}
.logoCard__word{font-size:54px; font-weight:800; letter-spacing:.5px;}
.logoCard__bar{display:inline-block; width:10px; height:58px; background:var(--red); margin-left:8px; transform: translateY(6px); border-radius:2px;}
.logoCard__sub{display:block; font-size:18px; color:var(--muted); margin-left:6px; margin-top:-10px;}
.logoCard__tag{margin:6px 0 14px; color:var(--muted);}

.logoCard__contacts{display:grid; gap:10px;}
.contactPill{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
}
.ico{width:22px; display:inline-flex; justify-content:center}

.bgLines{
  position:absolute; inset:-40px;
  background:
    linear-gradient(135deg, transparent 60%, rgba(212,0,0,.08) 60% 60.5%, transparent 60.5%),
    linear-gradient(315deg, transparent 70%, rgba(17,17,17,.06) 70% 70.5%, transparent 70.5%);
  pointer-events:none;
}

.section{padding:44px 0;}
.section--alt{background: linear-gradient(180deg, rgba(17,17,17,.03), transparent);}
.section__head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px;}
h2{font-size:28px; margin:0;}
.section__dash{width:18px; height:3px; background:var(--red); border-radius:2px; transform: translateY(-6px);}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.card h3{margin:0 0 8px; font-size:16px;}
.card p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}

.tiles{display:grid; grid-template-columns: repeat(4,1fr); gap:14px;}
.tile{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  text-align:left;
}
.tile__icon{font-size:22px; margin-bottom:8px}
.tile h3{margin:0 0 6px; font-size:15px;}
.tile p{margin:0; color:var(--muted); font-size:13px; line-height:1.4;}

.why{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start;}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.checklist li{padding-left:22px; position:relative; color:var(--text);}
.checklist li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--red); font-weight:900;}
.muted{color:var(--muted)}
.tiny{font-size:12px}

.formCard{
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}
.formCard h3{margin:0 0 10px}
form{display:grid; gap:12px; margin-top:12px;}
label span{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:#fff;
  outline:none;
}
input:focus, textarea:focus{border-color: rgba(212,0,0,.55); box-shadow: 0 0 0 4px rgba(212,0,0,.10);}

.footer{
  border-top:1px solid var(--stroke);
  padding:20px 0;
  background:#f6f6f6;
}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.footer__right{display:flex; gap:14px; align-items:center; color:var(--muted); font-weight:600;}

@media (max-width: 920px){
  .hero__grid, .why{grid-template-columns: 1fr; }
  h1{font-size:34px}
  .tiles{grid-template-columns: repeat(2,1fr)}
  .cards{grid-template-columns: repeat(2,1fr)}
}

@media (max-width: 560px){
  .nav{display:none}
  .cards{grid-template-columns: 1fr}
  .tiles{grid-template-columns: 1fr}
  .topbar__cta{gap:8px}
}

.brand--logo{
  display:flex;
  align-items:center;
}

.brandLogo{
  height:40px;          /* główna wysokość logo */
  width:auto;
  display:block;
}

/* mobile – trochę mniejsze */
@media (max-width: 560px){
  .brandLogo{
    height:34px;
  }
}
@media (max-width: 560px){
  .topbar__inner{
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .topbar__inner > *{
    min-width: 0;
  }
}
@media (max-width: 560px){
  .brandLogo{
    max-width: 140px;   /* KLUCZOWE */
    height: auto;
  }
}
.heroLogo{
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 12px;
}

/* mobile */
@media (max-width: 560px){
  .heroLogo{
    width: 150px;
    align-items: center;
    text-align: center;
  }
}
.hero__card{
  text-align: left;
  align-items: center;
}

@media (max-width: 560px){
  .hero__card{
    text-align: center;
  }

  .hero__card .logoCard__contacts{
    align-items: center;
  }
}
/* --- UI Motion (subtelnie, premium) --- */
:root{
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --t-fast: 140ms;
  --t-med: 220ms;
}

/* wszystkie klikalne */
a, button{
  -webkit-tap-highlight-color: transparent;
}

/* przyciski */
.btn{
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    filter var(--t-fast) var(--ease-out),
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
  will-change: transform;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.btn:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* delikatny "glow" dla czerwonego CTA */
.btn--solid:hover{
  filter: brightness(1.02);
  box-shadow: 0 14px 34px rgba(212,0,0,.18);
}

/* focus dostępność (klawiatura) */
.btn:focus-visible,
.contactPill:focus-visible,
.nav a:focus-visible,
.mobileNav a:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(212,0,0,.14);
  border-color: rgba(212,0,0,.45);
}

/* karty/elementy klikalne */
.card, .tile, .contactPill{
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}

.card:hover, .tile:hover, .contactPill:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
}

/* Na urządzeniach dotykowych: wyłącz hover "na siłę" */
@media (hover: none){
  .btn:hover, .card:hover, .tile:hover, .contactPill:hover{
    transform: none;
    box-shadow: inherit;
  }
}

/* Szanuj użytkowników z wyłączonymi animacjami */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* lepsze wrażenie na mobile */
.hero, .section{
  scroll-margin-top: 84px; /* żeby anchor linki nie chowały się pod sticky header */
}

input, textarea, button{
  font-size: 16px; /* zapobiega auto-zoom w iOS */
}

.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

// Delikatne reveal bez bibliotek
const revealEls = document.querySelectorAll(".section, .hero__card, .cards, .tiles, .why");
revealEls.forEach(el => el.classList.add("reveal"));

const io = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) entry.target.classList.add("is-visible");
  });
}, { threshold: 0.12 });

revealEls.forEach(el => io.observe(el));

/* Fade-in strony po załadowaniu */
body{
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.2,.8,.2,1);
}

body.is-loaded{
  opacity: 1;
}
body.is-leaving{
  opacity: 0;
}

// Fade-in przy ładowaniu
window.addEventListener("load", () => {
  document.body.classList.add("is-loaded");
});

html{ scroll-behavior: smooth; }

/* żeby sekcja nie chowała się pod sticky header */
.hero, .section{
  scroll-margin-top: 84px;
}

/* Sekcje: delikatny reveal */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms cubic-bezier(.2,.8,.2,1), transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* szanuj preferencje użytkownika */
@media (prefers-reduced-motion: reduce){
  body{ opacity: 1 !important; transition: none !important; }
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

// Reveal elementów podczas scrolla (fade-in)
const revealTargets = document.querySelectorAll(".hero__left, .hero__card, .section");

revealTargets.forEach(el => el.classList.add("reveal"));

const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add("is-visible");
  });
}, { threshold: 0.12 });

revealTargets.forEach(el => io.observe(el));
/* Kafelki – hover w kolorze logo */
.card, .tile{
  transition:
    background-color 220ms cubic-bezier(.2,.8,.2,1),
    color 220ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms cubic-bezier(.2,.8,.2,1),
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 220ms cubic-bezier(.2,.8,.2,1);
}

/* Teksty w kafelkach */
.card h3, .tile h3,
.card p,  .tile p{
  transition: color 220ms cubic-bezier(.2,.8,.2,1);
}

/* Hover tylko tam, gdzie faktycznie istnieje (desktop) */
@media (hover: hover){
  .card:hover, .tile:hover{
    background-color: var(--red);   /* 🔴 dokładnie jak w logo */
    border-color: var(--red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 46px rgba(212,0,0,.22);
  }

  .card:hover h3, .tile:hover h3,
  .card:hover p,  .tile:hover p{
    color: #fff;
  }

  /* jeśli gdzieś używasz .muted */
  .card:hover .muted,
  .tile:hover .muted{
    color: rgba(255,255,255,.92);
  }
}