:root {
      /* === Kolory === */
      --primary: #2F43A5;   /* niebieski */
      --primary-700: #283A91;
      --dark: #2E3A59;      /* granat dla typografii */
      --accent: #3C5AE8;    /* jaśniejszy niebieski na hover */
      --muted: #6B7280;     /* szary tekst pomocniczy */
      --bg: #ffffff;
      --bg-soft: #F6F8FF;   /* bardzo jasny niebieski pod sekcje */
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--dark);
      background: var(--bg);
      line-height: 1.6;
    }

    /* === Header / Nawigacja === */
    .header {
      position: sticky;
      top: 0; inset-inline: 0;
      z-index: 1000;
      backdrop-filter: saturate(180%) blur(8px);
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
    }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

    .nav {
      display: flex; align-items: center; justify-content: space-between;
      height: 72px;
    }
    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .brand .wordmark { font-weight: 700; letter-spacing: 0.5px; font-size: 1.25rem; color: var(--dark); }
    .brand .sub { font-weight: 500; font-size: .9rem; color: var(--primary); margin-left: 4px; }

    .menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
    .menu a {
      display: inline-flex; align-items: center; gap: 8px;
      text-decoration: none; color: var(--dark);
      padding: 10px 14px; border-radius: 12px;
      font-weight: 500;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .menu a:hover { background: var(--bg-soft); color: var(--primary); transform: translateY(-1px); }
    .menu a.active { background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary-700); }

    .menu .logo-chip {
      padding: 6px 10px; border-radius: 12px; line-height: 0;
    }
    .logo-chip svg { width: 28px; height: 28px; display: block; }

    /* === Sekcje === */
    section { padding: 88px 0; scroll-margin-top: 84px; }

    .hero {
      min-height: calc(100dvh - 72px);
      display: grid; place-items: center;
      background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, white), white);
    }
    .hero-inner { text-align: center; max-width: 900px; padding: 40px 20px; }
    .eyebrow { color: var(--primary); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
    h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      line-height: 1.1; margin: 14px 0 16px; color: var(--dark);
    }
    .lead { color: var(--muted); font-size: clamp(1rem, 2.2vw, 1.125rem); }

    .cta-row { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
    .btn { border: 0; cursor: pointer; padding: 12px 18px; border-radius: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--accent); }
    .btn-ghost { background: transparent; color: var(--primary); border: 2px solid color-mix(in srgb, var(--primary) 35%, white); }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

    .grid-3 {
      display: grid; gap: 24px; margin-top: 28px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

    .card {
      background: white; border: 1px solid color-mix(in srgb, var(--primary) 10%, white);
      border-radius: 18px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(47,67,165,.12); border-color: color-mix(in srgb, var(--primary) 22%, white); }

    h2 { font-size: clamp(1.6rem, 3.3vw, 2.2rem); margin: 0 0 14px; }
    h3 { font-size: 1.1rem; margin: 0 0 6px; }
    .muted { color: var(--muted); }

    .section-alt { background: var(--bg-soft); }

    /* === Stopka === */
    footer { padding: 40px 0; border-top: 1px solid color-mix(in srgb, var(--primary) 10%, white); }
    .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .small { font-size: .925rem; color: var(--muted); }

    /* Drobne ulepszenia dostępności */
    :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, white); outline-offset: 2px; border-radius: 12px; }

#oprogramowanie .slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 40px 0;
}

#oprogramowanie .slide-track {
  display: flex;
  animation: scroll 25s linear infinite;
}

#oprogramowanie .card {
  width: 280px;
  min-width: 280px;
  margin: 0 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
}

/* animacja */
@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* pauzowanie na hover */
#oprogramowanie .slider:hover .slide-track {
  animation-play-state: paused;
}




/* domyślnie menu w poziomie */
.menu {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* hamburger ukryty na desktopie */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
}

/* widok mobilny */
@media (max-width: 768px) {
  .menu {
    display: none;             /* ukryte dopóki nie klikniesz hamburgera */
    flex-direction: column;
    background: white;
    position: absolute;
    top: 70px; /* wysokość nagłówka */
    right: 10px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  .menu.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
  }
}