/* =====================================================================
   design-v2 — propozycja wyglądu (nakładka podglądowa)

   Ładowana WYŁĄCZNIE gdy w adresie jest ?design=v2 (patrz layout.php).
   Nie zmienia niczego w produkcyjnym wyglądzie — to warstwa do porównania:

       http://127.0.0.1:8000/            ← obecny
       http://127.0.0.1:8000/?design=v2  ← propozycja

   Co naprawia (i dlaczego obecny layout czyta się jak domyślny szablon):

   1. Paleta slate Tailwinda (#0f172a / #64748b / #e2e8f0 / #f8fafc) — to
      dosłownie domyślne zmienne frameworka, użyte w 40+ miejscach home.css.
      Zastąpione odcieniami wyprowadzonymi z brandowego #206BB3.
   2. Jednolity border-radius 12px na wszystkim (karty, obrazy, kafle).
      Zejście do 4px — ostro, technicznie, pod firmę IT.
   3. Rozmyte cienie „w spoczynku" (0 4px 16px rgba(15,23,42,.06)) — nie
      dają głębi, dodają mgły. Cień tylko na hover, kierunkowy.
   4. Obrys 1px #e2e8f0 dookoła kart + border-top jako separator sekcji.
      Zamiast tego: rytm naprzemiennych teł i krawędź akcentu na karcie.
   5. Wszystko wyśrodkowane i wszystko font-weight:800. Realna skala
      typograficzna + nagłówki sekcji do lewej z kreską akcentu.
   ===================================================================== */

:root {
    /* wyprowadzone z #206BB3, nie z domyślnej palety frameworka */
    --v2-ink:        #0E2138;  /* nagłówki   (było #0f172a) */
    --v2-body:       #46586E;  /* tekst      (było #475569) */
    --v2-muted:      #5A6B80;  /* opisy      (było #64748b) */
    --v2-line:       #DCE5EF;  /* linie      (było #e2e8f0) */
    --v2-wash:       #F4F7FA;  /* tło sekcji (było #f8fafc) */
    --v2-brand:      #206BB3;
    --v2-brand-dark: #17518A;
    --v2-brand-wash: #EAF2FA;
    --v2-radius:     4px;
}

/* ---------------------------------------------------------------
   1. Nagłówki sekcji — z centrowanego bloku na wyrównane do lewej
      z kreską akcentu. Centrowanie wszystkiego to główny powód,
      dla którego strona czyta się jak wygenerowana.
   --------------------------------------------------------------- */
.it44-section-head {
    text-align: left;
    max-width: 720px;
    margin: 0 0 48px;
    padding-top: 22px;
    border-top: 3px solid var(--v2-brand);
    display: inline-block;
}

.it44-section-head h2 {
    color: var(--v2-ink);
    font-size: 2.35rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.it44-section-head p {
    color: var(--v2-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

.it44-section-head--light {
    border-top-color: #4C93D6;
}

.it44-section-head--light h2 { color: #ffffff; }
.it44-section-head--light p  { color: #B8C7D9; }

/* ---------------------------------------------------------------
   2. Przyciski — ostra krawędź, bez „pływania" w górę na hover
   --------------------------------------------------------------- */
.it44-btn {
    border-radius: var(--v2-radius);
    padding: 15px 34px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.it44-btn--primary:hover {
    background: var(--v2-brand-dark);
    transform: none;
    box-shadow: none;
}

.it44-btn--outline {
    border: 1px solid rgba(255, 255, 255, .45);
}

.it44-btn--outline:hover {
    background: #ffffff;
    color: var(--v2-ink);
    border-color: #ffffff;
}

/* ---------------------------------------------------------------
   3. Karty usług — bez obrysu i bez cienia w spoczynku.
      Znacznik przynależności: krawędź akcentu, która wjeżdża na hover.
   --------------------------------------------------------------- */
.it44-services {
    background: var(--v2-wash);
    padding: 96px 0;
}

.it44-service-card {
    background: #ffffff;
    border-radius: var(--v2-radius);
    box-shadow: none;
    border-bottom: 3px solid transparent;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.it44-service-card:hover {
    transform: none;
    border-bottom-color: var(--v2-brand);
    box-shadow: 0 18px 34px -18px rgba(14, 33, 56, .45);
}

.it44-service-card__img {
    background: var(--v2-line);
}

.it44-service-card__body {
    padding: 24px 24px 28px;
}

.it44-service-card__body h3 {
    color: var(--v2-ink);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}

.it44-service-card__body p {
    color: var(--v2-muted);
}

/* ---------------------------------------------------------------
   4. Efektywność
   --------------------------------------------------------------- */
.it44-efficiency { padding: 96px 0; }

.it44-efficiency__text h2 {
    color: var(--v2-ink);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.it44-efficiency__text h3 {
    color: var(--v2-brand);
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 0 0 18px;
    order: -1;
}

.it44-efficiency__text p { color: var(--v2-body); }

.it44-check-list li { color: var(--v2-body); }

.it44-check-list li::before {
    content: "";
    width: 7px;
    height: 7px;
    background: var(--v2-brand);
    top: .55em;
    left: 2px;
}

/* płaski panel zamiast gradientu w szarościach + zaokrąglenia 16px */
.it44-efficiency__stat {
    background: var(--v2-wash);
    border-radius: var(--v2-radius);
    border-left: 3px solid var(--v2-brand);
    padding: 34px;
}

.it44-efficiency__stat h4 {
    color: var(--v2-ink);
    font-size: .84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-align: left;
    margin: 0 0 22px;
}

/* ---------------------------------------------------------------
   5. Strefa AI — separator 1px zastąpiony zmianą tła
   --------------------------------------------------------------- */
.it44-ai-zone {
    border-top: 0;
    background: #ffffff;
    padding: 96px 0;
}

.it44-ai-card {
    border: 0;
    border-radius: var(--v2-radius);
    box-shadow: none;
    background: var(--v2-wash);
    border-bottom: 3px solid transparent;
    transition: border-color .18s ease, background-color .18s ease;
}

.it44-ai-card:hover {
    transform: none;
    box-shadow: none;
    background: #ffffff;
    border-bottom-color: var(--v2-brand);
}

.it44-ai-card__img { background: var(--v2-line); }

.it44-ai-card__kicker {
    color: var(--v2-brand);
    font-size: .72rem;
    letter-spacing: .14em;
}

.it44-ai-card__body h3 {
    color: var(--v2-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.it44-ai-card__body p { color: var(--v2-muted); }

/* ---------------------------------------------------------------
   6. Rozwiązania / technologie
   --------------------------------------------------------------- */
.it44-solutions {
    padding: 96px 0;
    background: var(--v2-wash);
}

.it44-solutions-tags {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 56px;
}

/* z „pigułek" na prostokątne znaczniki — czytają się jak spis technologii,
   a nie jak tagi z domyślnego szablonu */
.it44-solutions-tags span {
    background: #ffffff;
    color: var(--v2-body);
    border-radius: var(--v2-radius);
    border-left: 2px solid var(--v2-brand);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .02em;
    padding: 9px 16px;
}

.it44-solution-row {
    border-top: 1px solid var(--v2-line);
    padding: 44px 0;
}

.it44-solution-row__text h4 {
    color: var(--v2-ink);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.it44-solution-row__text p { color: var(--v2-body); }

.it44-solution-row__media img { border-radius: var(--v2-radius); }

/* ---------------------------------------------------------------
   7. Kolaż powitalny — biała ramka 6px to czysty efekt „polaroida"
   --------------------------------------------------------------- */
.it44-welcome { background: #ffffff; }

.it44-welcome__main {
    border-radius: var(--v2-radius);
    box-shadow: 0 30px 60px -30px rgba(14, 33, 56, .5);
}

.it44-welcome__secondary {
    border: 0;
    border-radius: var(--v2-radius);
    outline: 10px solid #ffffff;
    box-shadow: 0 30px 60px -30px rgba(14, 33, 56, .55);
}

/* ---------------------------------------------------------------
   8. Szkolenia (sekcja ciemna) — jasny tekst zostaje jasny
   --------------------------------------------------------------- */
.it44-training {
    background: #0E2138;
    padding: 96px 0;
}

.it44-training__text h2 {
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.it44-training__text p { color: #B8C7D9; }

.it44-stat__bar {
    border-radius: 0;
    height: 6px;
    background: rgba(255, 255, 255, .1);
}

.it44-stat__bar span {
    border-radius: 0;
    background: #4C93D6;
}

.it44-stat p { color: #B8C7D9; }

.it44-training__growth { color: #ffffff; }

/* ---------------------------------------------------------------
   9. Dlaczego warto
   --------------------------------------------------------------- */
.it44-why-us {
    background: var(--v2-wash);
    padding: 96px 0;
}

.it44-why-us__media img { border-radius: var(--v2-radius); }

.it44-why-us__content h2 {
    color: var(--v2-ink);
    font-size: 2.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.it44-why-us__content > p { color: var(--v2-muted); }

/* numer w kółku → numer na kresce: mniej „ikonkowo", bardziej redakcyjnie */
.it44-why-us__num {
    width: auto;
    height: auto;
    min-width: 30px;
    border-radius: 0;
    background: transparent;
    color: var(--v2-brand);
    font-size: 1.35rem;
    font-weight: 700;
    align-items: flex-start;
    justify-content: flex-start;
    border-top: 3px solid var(--v2-brand);
    padding-top: 8px;
    line-height: 1;
}

.it44-why-us__item h4 {
    color: var(--v2-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

.it44-why-us__item p { color: var(--v2-muted); }

/* ---------------------------------------------------------------
   10. Oferta usług
   --------------------------------------------------------------- */
.it44-offer {
    border-top: 0;
    padding: 80px 0;
}

.it44-offer__list h2 {
    color: var(--v2-ink);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
}

.it44-offer__item-icon {
    border-radius: var(--v2-radius);
    background: var(--v2-brand-wash);
    width: 32px;
    height: 32px;
}

.it44-offer__item-icon svg { width: 16px; height: 16px; }

.it44-offer__list li { color: var(--v2-body); }

.it44-offer__counter-icon {
    border-radius: var(--v2-radius);
    background: var(--v2-brand-wash);
}

.it44-offer__counter strong {
    color: var(--v2-brand);
    font-size: 3.4rem;
    letter-spacing: -0.03em;
}

.it44-offer__counter span {
    color: var(--v2-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .76rem;
}

/* ---------------------------------------------------------------
   11. Hero — panel gubi zaokrąglenie 10px i rozjaśnia przyciemnienie
   --------------------------------------------------------------- */
.custom-col-r { border-radius: 0; }

.custom-col-r:hover { transform: none; }

.custom-wrapper-container::before {
    background: linear-gradient(180deg, rgba(14, 33, 56, .35) 0%, rgba(14, 33, 56, .72) 100%);
}

.hero-main-text { letter-spacing: -0.03em; }

/* ---------------------------------------------------------------
   12. Chrom strony
   --------------------------------------------------------------- */
.main-header { background: #0E2138; }

.main-header.is-sticky {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12);
}

@media (max-width: 992px) {
    .it44-section-head h2,
    .it44-efficiency__text h2,
    .it44-training__text h2,
    .it44-why-us__content h2 { font-size: 1.8rem; }

    .it44-services,
    .it44-efficiency,
    .it44-ai-zone,
    .it44-solutions,
    .it44-training,
    .it44-why-us { padding: 68px 0; }
}