:root {
  --navy: #10278d;
  --gray: #9b9ea7;
  --hd-white: #ffffff;
  --hd-blue: #749ede;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: #ffffff; color: #222;
  font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 1.5;
}
a { color: var(--navy); }
img { border: 0; }

/* --- HEADER --- */
/* Tło: poziomy gradient — po lewej biel, strefa przejścia ~40% wokół centrum
   (30%..70%) gdzie biel przechodzi w jasny błękit (--hd-blue), po prawej szary
   A1pixel (--gray). Dolne 15% paska tła jest białe (warstwa pionowa). */
.header {
  width: 100%;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%,
      #ffffff 85%, #ffffff 100%),
    linear-gradient(to right,
      var(--hd-white) 0%, var(--hd-white) 30%,
      var(--hd-blue) 50%,
      var(--gray) 70%, var(--gray) 100%);
  border-bottom: 2px solid var(--navy);
}
.header-inner {
  max-width: 1100px; margin: 0 auto; display: flex; align-items: center;
  min-height: 150px; padding: 10px 20px;
}
/* logo + motto wyrównane do lewej; grafika produktów przy prawej krawędzi */
.header-left  { flex: 1; display: flex; flex-direction: column; align-items: flex-start;
                text-align: left; padding-left: 4px; }
.header-left .logo-link { display: inline-block; transition: transform .2s ease,
                          filter .2s ease; }
.header-left .logo-link:hover { transform: scale(1.05);
                                filter: drop-shadow(0 4px 10px rgba(16,39,141,.35)); }
.header-left img { max-height: 78px; width: auto; }
.header-left .subtitle { color: var(--navy); font-weight: bold; margin-top: 8px; font-size: 15px; }
.header-right { flex: 1; text-align: right; }
.header-right img { max-height: 130px; width: auto; max-width: 100%; }

/* --- MENU --- */
/* Pasek menu w kolorze szarym A1pixel; tekst granatowy (A1pixel navy). */
.menu { background: var(--gray); }
.menu-inner { max-width: 1100px; margin: 0 auto; display: flex; padding: 0 20px; }
.menu-item { position: relative; }
.menu-item > a {
  display: block; color: var(--navy); text-decoration: none; padding: 12px 22px;
  font-weight: bold; transition: background .15s ease, color .15s ease;
}
.menu-item > a:hover { background: var(--navy); color: #fff; }
.menu-item > a.active { background: var(--navy); color: #fff; }
.menu-item > a .caret { font-size: 10px; margin-left: 6px; opacity: .8; }

/* rozwijane menu pionowe z sekcjami danej strony (mikroanimacja) */
.submenu {
  position: absolute; left: 0; top: 100%; min-width: 240px; margin: 0; padding: 0;
  background: #fff; border: 1px solid var(--gray); border-top: 3px solid var(--navy);
  box-shadow: 0 10px 24px rgba(0,0,0,.20); list-style: none; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block; color: var(--navy); text-decoration: none;
  padding: 10px 16px; border-bottom: 1px solid #eee; white-space: nowrap;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.submenu a:last-child { border-bottom: 0; }
.submenu a:hover { background: var(--navy); color: #fff; padding-left: 24px; }

/* --- BREADCRUMB --- */
.breadcrumb { max-width: 1100px; margin: 0 auto; padding: 8px 20px; color: var(--gray);
              font-size: 12px; }
.breadcrumb a { color: var(--gray); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; }

/* --- CONTENT --- */
.content { max-width: 1100px; margin: 0 auto; padding: 20px; min-height: 300px; }

/* styl "nagłówek": granatowy, bold, 200% */
.heading { color: var(--navy); font-weight: bold; font-size: 200%; margin: 24px 0 12px; }
h1.heading { margin-top: 8px; }

.section { margin: 30px 0; }
.section > h2.section-title { color: var(--navy); font-weight: bold; font-size: 200%;
                              border-bottom: 2px solid var(--gray); padding-bottom: 4px; margin-bottom: 16px; }
.subsection-title { color: var(--navy); font-weight: bold; font-size: 150%;
                    margin: 20px 0 10px; }

/* --- TILES --- */
/* maks. 7 kafelków w rzędzie (7*100px + 6*18px = 808px), wyrównane do prawej,
   z marginesem prawym o szerokości jednego kafelka (100px) */
.tiles { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end;
         max-width: 808px; margin-left: auto; margin-right: 100px; }
.tile { width: 100px; text-decoration: none; color: #333; text-align: center; }
.tile img { width: 100px; height: 100px; border: 3px solid var(--gray);
            display: block; transition: transform .15s ease, border-color .15s ease,
            box-shadow .15s ease; }
.tile:hover img { border-color: var(--navy); transform: scale(1.06);
                  box-shadow: 0 4px 14px rgba(16,39,141,.35); }
.tile .caption { display: block; margin-top: 6px; font-size: 12px; line-height: 1.2; }
.tile:hover .caption { color: var(--navy); }

/* --- FIRMY (podstrony produktów) --- */
.company { margin: 26px 0; padding-bottom: 18px; border-bottom: 1px solid #eee; }
.company-top { display: flex; align-items: center; justify-content: space-between;
               flex-wrap: wrap; gap: 12px; }
.company-top .logo img { max-height: 56px; width: auto; }
/* logo dostawcy = hiperłącze (Poziom4 link) z mikroanimacją */
.company-top .logo a { display: inline-block; transition: transform .2s ease,
                       filter .2s ease; }
.company-top .logo a:hover { transform: translateY(-3px) scale(1.05);
                             filter: drop-shadow(0 6px 12px rgba(16,39,141,.35)); }
.company-top .strip img { width: 450px; max-width: 100%; height: auto;
                          border: 1px solid #eee; transition: transform .2s ease,
                          box-shadow .2s ease; }
.company-top .strip a { display: inline-block; }
.company-top .strip a:hover img { transform: scale(1.02);
                                  box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.company-name { color: var(--navy); font-weight: bold; font-size: 200%; margin: 10px 0 4px; }
/* Nagłówek 2 (Poziom 4): szary, 150% rozmiaru bazowego */
.header2 { color: var(--gray); font-weight: bold; font-size: 150%; margin: 10px 0 4px; }
.company-link a { font-weight: bold; }
.company-variant { color: var(--gray); font-size: 13px; margin-top: 2px; }

/* --- LISTY (white papers / kalkulatory) --- */
ul.doclist { list-style: none; padding: 0; }
ul.doclist li { padding: 8px 0; border-bottom: 1px solid #eee; }
ul.doclist li a { font-weight: bold; text-decoration: none; }
ul.doclist li a:hover { text-decoration: underline; }
.calc-link a { font-weight: bold; }

/* --- O FIRMIE --- */
.about-title { color: var(--navy); font-weight: bold; font-size: 200%;
               text-decoration: underline; margin: 26px 0 10px; }
.about p { margin: 8px 0; white-space: pre-wrap; }   /* zachowuje wcięcia z plików .txt */

/* --- FOOTER --- */
/* to samo tło co nagłówek (poziomy gradient biel -> błękit -> szary,
   z białym dolnym pasem 15%) */
/*
.footer {
  width: 100%; margin-top: 40px;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 85%,
      #ffffff 85%, #ffffff 100%),
    linear-gradient(to right,
      var(--hd-white) 0%, var(--hd-white) 30%,
      var(--hd-blue) 50%,
      var(--gray) 70%, var(--gray) 100%);
  border-top: 2px solid var(--navy);
}
*/
.footer {
  width: 100%;
  margin-top: 40px;
  background: #ffffff;
  border-top: 2px solid var(--navy);
}

.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap;
                align-items: center; gap: 30px; padding: 15px; }
.footer-col { flex: 1; min-width: 200px; }
.footer-col h3 { color: var(--navy); margin: 0 0 6px; font-size: 13px; }
.footer-col .line { white-space: pre-line; font-size: 11px; }
.footer-col .mail { margin-top: 6px; font-size: 11px; }
.footer-col .mail a { font-weight: bold; text-decoration: none;
                      transition: color .13s ease; }
.footer-col .mail a:hover { text-decoration: underline; color: var(--navy); }
.footer-qr { text-align: center; }
.footer-qr img { width: 140px; height: auto; }
.versionstamp { text-align: center; color: var(--gray); font-size: 11px;
                padding: 8px 20px 16px; }