/* ====== PALETA (white + #34439d) ====== */
:root{
  --brand: #34439d;
  --bg: #ffffff;
  --text: rgba(0,0,0,.86);
  --muted: rgba(0,0,0,.55);
  --soft: rgba(52,67,157,.06);   /* jaśniejsze tło kart, sekcji */
  --line: rgba(52,67,157,.16);   /* delikatne obramowania */
  --shadow: 0 8px 26px rgba(52,67,157,.15);
  --radius: 14px;
  --container: 1120px;
  --header-h: 84px;              /* aktualna wysokość headera */
}

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

.container{width:100%;max-width:var(--container);margin-inline:auto;padding:0 20px}
.section{padding:72px 0}
.section.alt{background: var(--soft)}
.section-title{font-size:clamp(26px, 2.8vw, 36px);margin:0 0 18px;color:var(--brand)}

/* ====== HEADER ====== */
.site-header{
  position:sticky; top:0; z-index:50; background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--header-h);
  padding: 20px;
}
.brand .logo{
  color:#fff; padding:8px 12px; border-radius:10px;
  font-weight:800; letter-spacing:.4px; font-size:18px;
}

.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav a{color:var(--brand);text-decoration:none;padding:10px 12px;border-radius:10px}
.nav a:hover{background:var(--soft)}

/* ====== NAV – MOBILE (ukryte do kliknięcia) ====== */
.nav{
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  background:#fff;
  border-bottom:1px solid var(--line);
  display: none;            /* całkowicie niewidoczne */
  opacity: 0;               /* pod animację wejścia */
  transform: translateY(-8px);
  padding:18px 20px;
}
.nav.open{
  display: block;           /* pokaż po kliknięciu */
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nav ul{flex-direction:column}
.nav-toggle{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;cursor:pointer}
.nav-toggle-bar{width:22px;height:2px;background:var(--brand);display:block;position:relative}
.nav-toggle-bar::before,.nav-toggle-bar::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--brand); transform-origin:center; transition:.2s
}
.nav-toggle-bar::before{top:-6px}
.nav-toggle-bar::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{transform:rotate(45deg); top:0}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{transform:rotate(-45deg); top:0}

/* ====== NAV – DESKTOP ====== */
@media (min-width: 880px){
  /* pokaż i ustaw menu po prawej */
  .nav{
    position: static;
    transform: none;      /* wyłącza wysuwane menu z mobile */
    background: transparent;
    padding: 0;
    border: 0;
    margin-left: auto;    /* dociśnij na prawo w .header-inner (flex) */
    display: block;       /* zawsze widoczne na desktopie */
    opacity: 1;
  }
  .nav ul{
    display: flex;
    flex-direction: row;  /* poziomo */
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav li{ display: inline-block; }
  .nav a{ padding: 10px 14px; }
  .nav-toggle{ display: none; } /* ukryj burgera na desktopie */
}

/* ====== HERO ====== */
.hero{
  padding: 80px 0 40px;
  background:
    radial-gradient(900px 420px at 80% 10%, rgba(52,67,157,.10), transparent 60%),
    radial-gradient(700px 320px at 10% 20%, rgba(52,67,157,.06), transparent 60%);
}
.hero-inner{display:grid;gap:32px;align-items:center}
.hero-text h1{font-size: clamp(28px, 5vw, 44px); line-height:1.15; margin:0 0 12px; color:var(--brand)}
.hero-text p{color:var(--muted); margin:0 0 20px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700;
  transition:transform .12s ease, background .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-ghost{border:2px solid var(--brand);color:var(--brand); background:#fff}
.btn-ghost:hover{background:var(--brand); color:#fff}

.hero-illustration{display:grid;grid-template-columns:repeat(3, 1fr); gap:12px}
.device{height:86px;border-radius:12px;background:linear-gradient(165deg, rgba(52,67,157,.10), rgba(52,67,157,.03));border:1px solid var(--line)}
@media (min-width: 920px){
  .hero-inner{grid-template-columns: 1.1fr .9fr}
  .device{height:120px}
}

/* ====== KARTY USŁUG ====== */
.cards{display:grid;gap:16px}
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding:20px; box-shadow: var(--shadow); color:var(--text)
}
.card .icon{color:var(--brand); display:inline-grid; place-items:center; width:48px; height:48px; background:rgba(52,67,157,.10); border-radius:12px; margin-bottom:10px}
.card h3{margin:6px 0 6px; color:var(--brand)}
.card p{margin:0;color:var(--muted)}
@media (min-width: 680px){ .cards{grid-template-columns: repeat(3,1fr)} }

/* ====== O NAS / DLACZEGO ====== */
.grid-2{display:grid;gap:24px}
@media (min-width: 920px){ .grid-2{grid-template-columns:1.1fr .9fr} }
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand)}
.features{display:grid;gap:14px}
@media (min-width: 680px){ .features{grid-template-columns:repeat(3,1fr); align-content: center;} }
.feature{
  background:#fff; border:1px solid var(--line); padding:18px; border-radius:14px; box-shadow: var(--shadow)
}
.badge{display:inline-block;background:rgba(52,67,157,.10);color:var(--brand);border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:12px;margin-right:8px}

/* ====== KONTAKT / MAPA ====== */
.map{display:grid;place-items:center}
.map-skeleton{
  width:100%; min-height:300px; border-radius:14px;
  background: repeating-linear-gradient(45deg, rgba(52,67,157,.06) 0 10px, rgba(52,67,157,.12) 10px 20px);
  border:1px solid var(--line); color:var(--brand); display:grid; place-items:center;
}

/* ====== FOOTER ====== */
.site-footer{padding:30px 0;border-top:1px solid var(--line);background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted)}
.back-to-top{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(52,67,157,.10);color:var(--brand);text-decoration:none;border:1px solid var(--line)
}

/* ====== REVEAL ====== */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
.reveal.active{opacity:1; transform:none; align-content: center;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
  .btn:hover{transform:none}
}

/* === OFFSET KOTWIC (żeby menu nie zasłaniało sekcji) === */
section[id],
article[id],
div[id],
h1[id], h2[id], h3[id]{
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* === MOBILE GAP FIX (menu przyklejone pod header) === */
@media (max-width: 879px){
  /* upewniamy się, że header tworzy kontekst dla pozycji absolutnej */
  .site-header{ position: sticky; }
  .header-inner{ position: relative; }

  /* menu mobilne pod dolną krawędzią headera (bez przerwy) */
  .nav{
    position: absolute;   /* zamiast fixed */
    top: 100%;            /* dokładnie pod headerem */
    left: 0; right: 0;
    z-index: 60;

    /* nadpisania animacji/pozycji, żeby nie zostawał „cień” */
    transform: none;      /* usuń translateY(-8px) */
    opacity: 0;
    display: none;
  }
  .nav.open{
    display: block;
    opacity: 1;
    transition: opacity .2s ease;
  }

  /* jeśli widzisz 1px przerwę przez obramowania – odkomentuj: */
  /* .nav{ margin-top: -1px; } */
}