/* ======= Design tokens (brand palette) ======= */
    :root {
      --primary: #1E3A8A;
      /* granat */
      --secondary: #0EA5A3;
      /* turkus */
      --accent: #60A5FA;
      /* jasny niebieski */
      --bg: #F8FAFC;
      /* tło */
      --text: #0F172A;
      /* ciemny tekst */
      --radius: 1.25rem;
      --shadow: 0 8px 30px rgba(2, 6, 23, 0.08);
    }

    /* ======= Global base ======= */
    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-family: 'Poppins', 'Inter', sans-serif;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .text-accent {
      color: var(--accent) !important;
    }

    /* ======= Navbar ======= */
    .navbar-custom {
      transition: all .25s ease;
    }

    .navbar-transparent {
      background: transparent;
    }

    .navbar-solid {
      background: #fff;
      box-shadow: 0 6px 20px rgba(2, 6, 23, .06);
    }

    .navbar .nav-link {
      font-weight: 500;
    }

    .navbar .btn-outline-secondary {
      border-color: var(--secondary);
      color: var(--secondary);
    }

    .navbar .btn-outline-secondary:hover {
      background: var(--secondary);
      color: #fff;
    }

    /* ======= Hero ======= */
    .hero {
      position: relative;
      min-height: 92vh;
      display: grid;
      place-items: center;
      color: #fff;
      background: radial-gradient(1200px 600px at 20% 20%, rgba(14, 165, 163, .15), transparent),
        linear-gradient(to bottom right, rgba(30, 58, 138, .9), rgba(14, 165, 163, .8)),
        url('/bg.jpg?v=1') center/cover no-repeat;
      overflow: hidden;
    }

    .hero .overlay-blur {
      position: absolute;
      inset: 0;
      backdrop-filter: blur(2px);
    }

    .hero .container {
      position: relative;
      z-index: 2;
    }

    .hero-badges .badge {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .2);
    }

    /* ======= Cards / benefits ======= */
    .benefit-card {
      border: 1px solid rgba(2, 6, 23, .06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: transform .2s ease, box-shadow .2s ease;
      background: #fff;
    }

    .benefit-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 40px rgba(2, 6, 23, .12);
    }

    .benefit-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--secondary), var(--accent));
      color: #fff;
    }

    /* ======= Stats bar ======= */
    .stats {
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .stat {
      display: flex;
      gap: .75rem;
      align-items: center;
    }

    /* ======= Waves separators ======= */
    .wave {
      display: block;
      line-height: 0;
    }

    /* ======= Contact form ======= */
    .form-usp i {
      font-size: 1.25rem;
    }

    .btn-primary {
      background: var(--primary);
      border-color: var(--primary);
    }

    .btn-primary:hover {
      filter: brightness(1.05);
    }

    .btn-outline-primary {
      color: var(--secondary);
      border-color: var(--secondary);
    }

    .btn-outline-primary:hover {
      background: var(--secondary);
      color: #fff;
    }

    /* ======= Focus styles (a11y) ======= */
    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 2px;
      border-radius: 8px;
    }

    /* ======= Reveal-on-scroll animations ======= */
    .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ======= Footer ======= */
    footer {
      color: #0b1220;
    }

    /* ======= Utilities ======= */
    .grayscale img {
      filter: grayscale(1);
      opacity: .85;
      transition: filter .2s ease, opacity .2s ease;
    }

    .grayscale img:hover {
      filter: none;
      opacity: 1;
    }