/*
Apply any theme variable overwrites that were set via admin theme settings.
Note: This file is a placeholder, it will be automatically/dynamically overwritten from the theme settings.
This will apply to ANY/ALL themes loaded, and before any of the core files are loaded.
*/

/* =========================
   TOKENS
   ========================= */
:root{
  --home-maxw: 1180px;
  --gutter: 22px;

  --r-xl: 22px;
  --r-lg: 16px;
  --r-md: 14px;

  --glass-dark: color-mix(in srgb, var(--black-1) 28%, transparent);
  --glass-dark-2: color-mix(in srgb, var(--black-1) 40%, transparent);
  --glass-border: color-mix(in srgb, var(--white-8) 22%, transparent);

  --text-on-hero: var(--white-1);
  --muted-on-hero: color-mix(in srgb, var(--white-1) 78%, transparent);
}

/* helper kontener (używaj w HTML jak zechcesz) */
.page-index .home-container{
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================
   NAJWAŻNIEJSZA NAPRAWA
   NIE ruszamy globalnie .contr bo header też go używa.
   Resetujemy TYLKO ten w main content (z index.php).
   ========================= */

/* wyczyść “stare” wrappery na home */
.page-index .main__content{ background: transparent; }

/* ZAMIAST: .page-index .contr { ... }  (to rozwalało header) */
.page-index .main__content > .contr{
  max-width: none;
  padding: 0;
}

/* home wrapper */
.page-index .main__content .home{
  padding: 0;
}

/* =========================
   HEADER (dark glass, czytelny)
   ========================= */
.header.header--modern{
  position: sticky;
  top: 0;
  z-index: 100;

  background: var(--glass-dark) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid var(--glass-border) !important;
}

.header__inner.header__inner--modern{
  padding: 12px 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Logo */
.header__logo.header__logo--modern{
  color: var(--white-1) !important;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 14px;
  line-height: 1;
  opacity: .95;
}
.header__logo.header__logo--modern:hover{ opacity: 1; }

/* Wymuszenie czytelności wszystkiego w headerze */
.header.header--modern,
.header.header--modern *{
  color: color-mix(in srgb, var(--white-1) 90%, transparent) !important;
}

/* Linki */
.header.header--modern a,
.header.header--modern .link{
  color: color-mix(in srgb, var(--white-1) 86%, transparent) !important;
}
.header.header--modern a:hover,
.header.header--modern .link:hover{
  color: var(--white-1) !important;
}

/* Dropdowny / selecty / przyciski w headerze */
.header.header--modern .dropdown,
.header.header--modern .dropdown__label,
.header.header--modern .btn,
.header.header--modern button,
.header.header--modern select,
.header.header--modern .header__lang,
.header.header--modern .header__profile{
  
  border: 1px solid color-mix(in srgb, var(--white-8) 22%, transparent) !important;
  border-radius: 12px !important;
}

/* Hovery */
.header.header--modern .dropdown__label:hover,
.header.header--modern .btn:hover,
.header.header--modern button:hover{
  background: color-mix(in srgb, var(--white-1) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--white-8) 36%, transparent) !important;
}

/* Ikony w headerze */
.header.header--modern svg.icon{
  color: var(--white-1) !important;
  fill: currentColor !important;
  opacity: .95;
}

/* Breadcrumbs: na home wyłączone */
.page-index .breadcrumbs{
  display: none !important;
}

/* =========================
   HERO
   ========================= */
.page-index .hero{
  position: relative;
  min-height: clamp(620px, 86vh, 860px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 44px 0 52px;
}

/* tło hero */
.page-index .hero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 420px at 22% 18%, color-mix(in srgb, var(--tertiary) 48%, transparent), transparent 68%),
    radial-gradient(900px 380px at 78% 20%, color-mix(in srgb, var(--secondary) 46%, transparent), transparent 70%),
    radial-gradient(1000px 520px at 50% 110%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 92%, var(--black-1)),
      color-mix(in srgb, var(--primary) 28%, var(--main-background))
    );
  filter: saturate(1.05);
}

.page-index .hero__inner{
  position: relative;
  z-index: 1;
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
  align-items: center;
}

.page-index .hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 24%, transparent);
  color: color-mix(in srgb, var(--white-1) 88%, transparent);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 14px;
}

.page-index .hero__title{
  margin: 0 0 10px 0;
  color: var(--text-on-hero);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(36px, 4.2vw, 56px);
}

.page-index .hero__subtitle{
  margin: 0 0 18px 0;
  color: var(--muted-on-hero);
  font-size: 15px;
  line-height: 1.6;
  max-width: 70ch;
}

.page-index .hero__search{
  margin: 10px 0 18px;
}
.page-index .hero__search input,
.page-index .hero__search .input,
.page-index .hero__search .search__input{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 55%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 14px;
}

/* CTA */
.page-index .hero__actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.page-index .cta{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: var(--r-lg);
  text-decoration: none;

  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 58%, transparent);
  backdrop-filter: blur(12px);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
  min-height: 78px;
}
.page-index .cta:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.26);
  border-color: color-mix(in srgb, var(--white-8) 90%, transparent);
  background: color-mix(in srgb, var(--surface) 98%, transparent);
}

.page-index .cta__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: color-mix(in srgb, var(--primary) 88%, var(--black-1));
  border: 1px solid color-mix(in srgb, var(--white-8) 18%, transparent);
}

.page-index .cta__icon .icon{
  width: 20px;
  height: 20px;
  color: var(--white-1);
}

.page-index .cta__title{
  display: block;
  font-weight: 950;
  font-size: 13px;
  color: color-mix(in srgb, var(--black-1) 86%, var(--white-1));
  margin-bottom: 2px;
}

.page-index .cta__desc{
  display: block;
  font-size: 12px;
  color: color-mix(in srgb, var(--black-1) 62%, var(--white-1));
}

/* primary */
.page-index .cta--primary{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--white-1) 96%, transparent),
    color-mix(in srgb, var(--white-1) 90%, transparent)
  );
  border-color: color-mix(in srgb, var(--tertiary) 60%, var(--white-8));
}
.page-index .cta--primary .cta__icon{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tertiary) 92%, var(--black-1)),
    color-mix(in srgb, var(--primary) 88%, var(--black-1))
  );
}

/* meta pills */
.page-index .hero__meta{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-index .meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 22%, transparent);
  color: color-mix(in srgb, var(--white-1) 88%, transparent);
  font-size: 12px;
  backdrop-filter: blur(12px);
}
.page-index .meta-pill__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green-1) 88%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green-1) 18%, transparent);
}

/* art */
.page-index .hero__art{ display: grid; justify-items: end; }
.page-index .hero-art{
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 10 / 9;
  border-radius: var(--r-xl);
}
.page-index .hero-blob{
  position: absolute;
  inset: -30px -30px -30px -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  opacity: 0.95;
}
.page-index .hero-blob__a{ fill: color-mix(in srgb, var(--white-1) 14%, transparent); }
.page-index .hero-blob__b{ fill: color-mix(in srgb, var(--white-1) 10%, transparent); }
.page-index .hero-blob__c{ fill: color-mix(in srgb, var(--white-1) 8%, transparent); }

.page-index .hero-art__panel{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 92%;
  border-radius: var(--r-xl);
  padding: 18px 18px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 55%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.18);
}
.page-index .hero-art__panel-title{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin-bottom: 6px;
  font-size: 14px;
}
.page-index .hero-art__panel-desc{
  color: var(--font__sec-clr);
  font-size: 12px;
  line-height: 1.5;
}

/* =========================
   “JAK TO DZIAŁA”
   ========================= */
.page-index .strip{
  position: relative;
  padding: 64px 0 64px;

  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--tertiary) 10%, transparent), transparent 70%),
    radial-gradient(900px 420px at 80% 20%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 78%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

.page-index .strip__head{
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 22px;
}

.page-index .strip__title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--font__pri-clr);
  font-size: clamp(22px, 2.1vw, 30px);
}

.page-index .strip__desc{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 14px;
  line-height: 1.6;
  max-width: 80ch;
}

/* Steps */
.page-index .steps{
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.page-index .step{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;

  padding: 20px;
  border-radius: var(--r-xl);

  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.page-index .step:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.14);
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}

.page-index .step__num{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  font-weight: 950;
  color: var(--secondary);

  background: color-mix(in srgb, var(--tertiary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}

.page-index .step__title{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin: 0 0 6px 0;
  font-size: 15px;
}

.page-index .step__desc{
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* =========================
   STOPKA
   ========================= */
.page-index .site-footer{
  padding: 44px 0 54px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 94%, var(--black-1)),
      color-mix(in srgb, var(--primary) 86%, var(--black-1))
    );
  color: color-mix(in srgb, var(--white-1) 86%, transparent);
}

.page-index .site-footer__grid{
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.page-index .site-footer h3{
  margin: 0 0 10px 0;
  color: var(--white-1);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-index .site-footer p{
  margin: 0 0 8px 0;
  font-size: 13px;
  color: color-mix(in srgb, var(--white-1) 82%, transparent);
}

.page-index .site-footer a{
  color: color-mix(in srgb, var(--white-1) 86%, transparent);
  text-decoration: none;
}
.page-index .site-footer a:hover{
  color: var(--white-1);
  text-decoration: underline;
}

.page-index .site-footer__admin{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--white-8) 16%, transparent);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1040px){
  .page-index .hero__inner{ grid-template-columns: 1fr; }
  .page-index .hero__art{ justify-items: start; }
  .page-index .hero__actions{ grid-template-columns: 1fr; }
  .page-index .steps{ grid-template-columns: 1fr; }
  .page-index .site-footer__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 520px){
  :root{ --gutter: 16px; }
  .page-index .hero{ padding: 32px 0 40px; }
  .page-index .hero__kicker{ font-size: 11px; }
}
/* =========================
   HEADER FIX (musi być na końcu pliku)
   ========================= */

.header.header--modern{
  position: sticky;
  top: 0;
  z-index: 999;

  background: color-mix(in srgb, var(--black-1) 18%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid color-mix(in srgb, var(--white-8) 18%, transparent) !important;
}

.header__inner.header__inner--modern{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 0 !important;
}

/* Brand: dwie linie, nowocześnie */
.header__logo.header__logo--modern{
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;

  text-decoration: none !important;
  color: var(--white-1) !important;
  line-height: 1.1 !important;
}

.header__logo.header__logo--modern .header__brand{
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
  font-size: 14px !important;
  opacity: .98 !important;
}

.header__logo.header__logo--modern .header__tag{
  font-size: 11px !important;
  opacity: .72 !important;
  color: color-mix(in srgb, var(--white-1) 80%, transparent) !important;
}

/* Akcje po prawej: wszystko w jednym rzędzie */
.header__actions{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 240px;
}

/* Wymuszenie koloru linków i ikon w headerze */
.header.header--modern a,
.header.header--modern .link{
  color: color-mix(in srgb, var(--white-1) 88%, transparent) !important;
}
.header.header--modern a:hover,
.header.header--modern .link:hover{
  color: var(--white-1) !important;
}

/* Dropdowny / selektory / przyciski w headerze (HESK lubi robić białe kwadraty) */
.header.header--modern .dropdown,
.header.header--modern .dropdown__label,
.header.header--modern .btn,
.header.header--modern button,
.header.header--modern select{
  
  border: 1px solid color-mix(in srgb, var(--white-8) 22%, transparent) !important;
  border-radius: 12px !important;
  color: var(--white-1) !important;
}

.header.header--modern .dropdown__label:hover,
.header.header--modern .btn:hover,
.header.header--modern button:hover{
  background: color-mix(in srgb, var(--white-1) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--white-8) 36%, transparent) !important;
}

/* Ikony (żeby nie ginęły) */
.header.header--modern svg.icon{
  color: var(--white-1) !important;
  fill: currentColor !important;
  opacity: .95;
}

/* Breadcrumbs pod headerem: nadal wyłącz na home */
.page-index .breadcrumbs{
  display: none !important;
}
/* =========================
   HEADER - ciemny i czytelny (nadpisanie szarego)
   ========================= */

.header.header--modern{
  background: rgba(10, 18, 32, 0.72) !important; /* ciemny navy glass */
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* Tekst i linki w headerze na biało */
.header.header--modern,
.header.header--modern *{
  color: rgba(255,255,255,0.92) !important;
}

/* Logo/brand mocniejsze */
.header__logo.header__logo--modern .header__brand{
  color: rgba(255,255,255,0.98) !important;
}
.header__logo.header__logo--modern .header__tag{
  color: rgba(255,255,255,0.70) !important;
}

/* Przyciski/selecty/dropdowny w headerze */
.header.header--modern .dropdown,
.header.header--modern .dropdown__label,
.header.header--modern .btn,
.header.header--modern button,
.header.header--modern select{
  
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.92) !important;
}

.header.header--modern .dropdown__label:hover,
.header.header--modern .btn:hover,
.header.header--modern button:hover{
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Ikony */
.header.header--modern svg.icon{
  color: rgba(255,255,255,0.92) !important;
  fill: currentColor !important;
}
/* =========================
   INDEX: JAK TO DZIAŁA - wersja "premium strip"
   (bez zmiany HTML)
   ========================= */

.page-index .home-steps{
  /* pełna sekcja, a nie mały bloczek */
  max-width: none;
  margin: 0;
  padding: 64px 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;

  background:
    radial-gradient(900px 420px at 15% 10%, color-mix(in srgb, var(--tertiary) 10%, transparent), transparent 70%),
    radial-gradient(900px 420px at 85% 20%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 82%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

/* nagłówek sekcji */
.page-index .home-section__head{
  max-width: var(--home-maxw);
  margin: 0 auto 22px;
  padding: 0 var(--gutter);
  display: grid;
  gap: 10px;
}

.page-index .home-section__title{
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 950;
  letter-spacing: -0.02em;
}

.page-index .home-section__desc{
  font-size: 14px;
  line-height: 1.6;
  max-width: 85ch;
}

/* grid kart */
.page-index .home-steps__grid{
  max-width: var(--home-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  position: relative;
}

/* subtelna “linia” łącząca (na dużych ekranach) */
@media (min-width: 980px){
  .page-index .home-steps__grid::before{
    content:"";
    position:absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 28px;                 /* wysokość mniej więcej na środku numerków */
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--tertiary) 35%, transparent),
      transparent
    );
    opacity: .45;
    pointer-events: none;
  }
}

/* karta kroku */
.page-index .home-step{
  padding: 22px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  position: relative;
  overflow: hidden;
}

/* delikatny highlight w rogu (premium vibe) */
.page-index .home-step::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--tertiary) 18%, transparent),
    transparent 70%
  );
  opacity: .8;
  pointer-events:none;
}

.page-index .home-step:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.14);
  border-color: color-mix(in srgb, var(--tertiary) 26%, var(--white-8));
}

/* numer: większy, bardziej “produktowy” */
.page-index .home-step__num{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-weight: 950;
  font-size: 14px;
  color: color-mix(in srgb, var(--secondary) 92%, black);

  background: color-mix(in srgb, var(--tertiary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tertiary) 24%, var(--white-8));
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
  margin-bottom: 14px;
}

.page-index .home-step__title{
  font-weight: 950;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--font__pri-clr);
}

.page-index .home-step__desc{
  font-size: 13px;
  line-height: 1.65;
  color: var(--font__sec-clr);
}

/* responsive */
@media (max-width: 980px){
  .page-index .home-steps{ padding: 44px 0; }
  .page-index .home-steps__grid{ grid-template-columns: 1fr; }
}
/* =========================
   INDEX: STRIP / STEPS (Twoje aktualne HTML)
   ========================= */

.page-index .strip{
  position: relative;
  padding: clamp(52px, 6vw, 84px) 0;
  overflow: hidden;

  background:
    radial-gradient(900px 420px at 15% 10%, color-mix(in srgb, var(--tertiary) 12%, transparent), transparent 70%),
    radial-gradient(900px 420px at 85% 20%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 84%, white)
    );

  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

/* duże, miękkie "bloby" w tle żeby było wow, ale nadal minimalistycznie */
.page-index .strip::before,
.page-index .strip::after{
  content:"";
  position:absolute;
  width: 720px;
  height: 720px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .22;
  pointer-events:none;
}
.page-index .strip::before{
  left: -260px;
  top: -420px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tertiary) 42%, transparent), transparent 62%);
}
.page-index .strip::after{
  right: -260px;
  top: -380px;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 38%, transparent), transparent 62%);
}

/* head */
.page-index .strip__head{
  display: grid;
  gap: 10px;
  margin-bottom: 26px;
}

.page-index .strip__title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--font__pri-clr);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
}

.page-index .strip__desc{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 14px;
  line-height: 1.7;
  max-width: 80ch;
}

/* grid */
.page-index .steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}

/* subtelna linia łącząca kroki (tylko desktop) */
@media (min-width: 980px){
  .page-index .steps::before{
    content:"";
    position:absolute;
    left: 16px;
    right: 16px;
    top: 26px;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--tertiary) 34%, transparent),
      transparent
    );
    opacity: .55;
    pointer-events:none;
  }
}

/* karta kroku */
.page-index .step{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;

  padding: 22px;
  border-radius: 22px;

  background: color-mix(in srgb, var(--surface) 96%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);

  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  overflow: hidden;
}

/* highlight w rogu */
.page-index .step::after{
  content:"";
  position:absolute;
  right: -70px;
  top: -70px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--tertiary) 18%, transparent),
    transparent 62%
  );
  opacity: .9;
  pointer-events:none;
}

.page-index .step:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.14);
  border-color: color-mix(in srgb, var(--tertiary) 28%, var(--white-8));
}

/* numer */
.page-index .step__num{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  font-weight: 950;
  font-size: 14px;
  color: color-mix(in srgb, var(--secondary) 92%, black);

  background: color-mix(in srgb, var(--tertiary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tertiary) 24%, var(--white-8));
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

/* tekst */
.page-index .step__title{
  margin: 0 0 6px 0;
  font-weight: 950;
  color: var(--font__pri-clr);
  font-size: 15px;
}

.page-index .step__desc{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 980px){
  .page-index .steps{ grid-template-columns: 1fr; }
  .page-index .step{ padding: 18px; }
}
/* =========================
   HOW (NOWA SEKCJA "JAK TO DZIAŁA")
   ========================= */

.page-index .how{
  position: relative;
  padding: clamp(64px, 7vw, 96px) 0;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, var(--tertiary) 12%, transparent), transparent 68%),
    radial-gradient(900px 420px at 90% 15%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 82%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

.page-index .how__bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .25;
  background:
    radial-gradient(650px 650px at 0% 10%, color-mix(in srgb, var(--tertiary) 28%, transparent), transparent 60%),
    radial-gradient(650px 650px at 100% 30%, color-mix(in srgb, var(--secondary) 24%, transparent), transparent 60%);
  filter: blur(10px);
}

.page-index .how__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 26px;
  align-items: start;
}

/* LEFT */
.page-index .how__kicker{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--font__pri-clr);
  width: fit-content;
}

.page-index .how__title{
  margin: 14px 0 10px;
  font-weight: 950;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  color: var(--font__pri-clr);
}

.page-index .how__desc{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 14px;
  line-height: 1.75;
  max-width: 70ch;
}

/* stats */
.page-index .how__stats{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-index .how-stat{
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 96%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);
}

.page-index .how-stat__num{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 22px;
  color: var(--font__pri-clr);
  line-height: 1;
  margin-bottom: 6px;
}

.page-index .how-stat__label{
  font-size: 12px;
  color: var(--font__sec-clr);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* RIGHT */
.page-index .how-steps{
  display: grid;
  gap: 14px;
  position: relative;
}

.page-index .how-step{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.page-index .how-step:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.14);
  border-color: color-mix(in srgb, var(--tertiary) 28%, var(--white-8));
}

.page-index .how-step__badge{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 950;
  letter-spacing: .06em;
  color: var(--white-1);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 92%, var(--black-1)),
    color-mix(in srgb, var(--tertiary) 76%, var(--black-1))
  );
  border: 1px solid color-mix(in srgb, var(--white-8) 18%, transparent);
}

.page-index .how-step__title{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin: 2px 0 6px;
  font-size: 15px;
}

.page-index .how-step__desc{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.65;
}

/* note */
.page-index .how__note{
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(420px 160px at 20% 20%, color-mix(in srgb, var(--tertiary) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 96%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.10);
}

.page-index .how__noteTitle{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.page-index .how__noteDesc{
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.65;
}

/* responsive */
@media (max-width: 1040px){
  .page-index .how__inner{ grid-template-columns: 1fr; }
  .page-index .how__stats{ grid-template-columns: 1fr; }
}
/* =========================================================
   FLOW PAGES: category-select / create-ticket / confirmation
   Spójny styl z homepage: gradient, glass, karty, typografia
   ========================================================= */

:root{
  --flow-maxw: 1180px;
  --flow-gutter: 22px;

  --flow-r-xl: 22px;
  --flow-r-lg: 16px;
  --flow-r-md: 14px;

  --flow-glass: color-mix(in srgb, var(--surface) 92%, transparent);
  --flow-glass-border: color-mix(in srgb, var(--white-8) 58%, transparent);

  --flow-hero-text: var(--white-1);
  --flow-hero-muted: color-mix(in srgb, var(--white-1) 78%, transparent);
}

/* wspólny kontener */
.page-category-select .flow-container,
.page-create-ticket .flow-container,
.page-create-ticket-confirmation .flow-container{
  max-width: var(--flow-maxw);
  margin: 0 auto;
  padding: 0 var(--flow-gutter);
}

/* wyczyść stare wrappery na tych stronach */
.page-category-select .contr,
.page-create-ticket .contr,
.page-create-ticket-confirmation .contr{
  max-width: none;
  padding: 0;
}

.page-category-select .main__content,
.page-create-ticket .main__content,
.page-create-ticket-confirmation .main__content{
  background: transparent;
  padding: 0;
}

/* breadcrumbs: zostaw, ale zrób subtelniejsze (albo ukryj jeśli chcesz) */
.page-category-select .breadcrumbs,
.page-create-ticket .breadcrumbs,
.page-create-ticket-confirmation .breadcrumbs{
  opacity: .95;
}

/* ====== Flow Hero (góra strony) ====== */
.flow-hero{
  position: relative;
  padding: 54px 0 26px;
  overflow: hidden;
}

.flow-hero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 420px at 22% 18%, color-mix(in srgb, var(--tertiary) 42%, transparent), transparent 68%),
    radial-gradient(900px 380px at 78% 20%, color-mix(in srgb, var(--secondary) 40%, transparent), transparent 70%),
    radial-gradient(1000px 520px at 50% 110%, color-mix(in srgb, var(--primary) 36%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 92%, var(--black-1)),
      color-mix(in srgb, var(--primary) 28%, var(--main-background))
    );
  filter: saturate(1.05);
}

.flow-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

.flow-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--white-1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 24%, transparent);
  color: color-mix(in srgb, var(--white-1) 88%, transparent);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 14px;
}

.flow-hero__title{
  margin: 0 0 10px 0;
  color: var(--flow-hero-text);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.02;
  font-size: clamp(28px, 3.6vw, 44px);
}

.flow-hero__subtitle{
  margin: 0;
  color: var(--flow-hero-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 70ch;
}

/* panel po prawej (glass) */
.flow-panel{
  border-radius: var(--flow-r-xl);
  padding: 18px 18px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 55%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.18);
}

.flow-panel__title{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin-bottom: 6px;
  font-size: 14px;
}
.flow-panel__desc{
  color: var(--font__sec-clr);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

/* ====== Flow Body strip ====== */
.flow-body{
  position: relative;
  padding: 34px 0 64px;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--tertiary) 10%, transparent), transparent 70%),
    radial-gradient(900px 420px at 80% 20%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 78%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

/* główna karta */
.flow-card{
  border-radius: var(--flow-r-xl);
  padding: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.12);
}

/* nagłówek sekcji wewnątrz karty */
.flow-card__head{
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.flow-card__h{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--font__pri-clr);
  font-size: 20px;
}
.flow-card__p{
  margin: 0;
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.6;
}

/* ====== Category select: grid linków ====== */
.flow-cat-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.flow-cat{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--flow-r-lg);
  text-decoration: none;

  background: color-mix(in srgb, var(--main-background) 42%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);

  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.flow-cat:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.14);
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
  background: color-mix(in srgb, var(--surface) 98%, transparent);
}

.flow-cat__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tertiary) 92%, var(--black-1)),
    color-mix(in srgb, var(--primary) 88%, var(--black-1))
  );
  border: 1px solid color-mix(in srgb, var(--white-8) 18%, transparent);
}

.flow-cat__icon .icon{
  width: 18px;
  height: 18px;
  color: var(--white-1);
}

.flow-cat__title{
  margin: 0;
  font-weight: 950;
  color: var(--font__pri-clr);
  font-size: 14px;
}

/* select dropdown wariant */
.flow-form-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.flow-form-row .form-control{
  border-radius: 14px;
}

/* ====== Create ticket: form polish ====== */
.page-create-ticket .article__heading--form{
  margin: 0 0 12px 0;
}

.page-create-ticket .article-heading-tip{
  margin: 0 0 18px 0;
}

.page-create-ticket .form-submit-ticket{
  margin-top: 10px;
}

.page-create-ticket .divider{
  opacity: .9;
}

/* stopka formularza: lepiej wygląda na nowym layout */
.page-create-ticket .form-footer{
  margin-top: 18px;
}

/* Confirmation: center panel */
.flow-center{
  display: grid;
  place-items: start;
}

/* responsywność */
@media (max-width: 1040px){
  .flow-hero__inner{ grid-template-columns: 1fr; }
  .flow-cat-grid{ grid-template-columns: 1fr; }
  .flow-form-row{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  :root{ --flow-gutter: 16px; }
  .flow-hero{ padding: 40px 0 20px; }
}

/* === Category select UX polish (scoped) === */
.page-category-select .hero {
  padding: 44px 0 22px;
  background: radial-gradient(1200px 420px at 25% 10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(13,110,253,.90) 0%, rgba(13,110,253,.60) 55%, rgba(248,249,250,1) 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.page-category-select .hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .page-category-select .hero__inner {
    grid-template-columns: 1fr;
  }
}

.page-category-select .hero__badge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.22);
  margin-bottom: 10px;
}

.page-category-select .hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(28px, 3.2vw, 44px);
}

.page-category-select .hero__desc {
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  max-width: 62ch;
}

.page-category-select .tip-card {
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.page-category-select .tip-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.page-category-select .tip-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,110,253,.10);
  color: rgba(13,110,253,1);
  font-weight: 900;
  user-select: none;
}

.page-category-select .tip-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
}

.page-category-select .tip-card__text {
  margin: 0;
  font-size: 13px;
  color: rgba(0,0,0,.62);
  line-height: 1.45;
}

.page-category-select .panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 18px 34px;
}

.page-category-select .panel__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
}

.page-category-select .panel__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
}

.page-category-select .panel__sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

/* Category grid */
.page-category-select .cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .page-category-select .cat-grid {
    grid-template-columns: 1fr;
  }
}

.page-category-select a.cat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  background: rgba(248,249,250,1);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.page-category-select a.cat-card:hover,
.page-category-select a.cat-card:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: rgba(13,110,253,.30);
  background: #fff;
  outline: none;
}

.page-category-select .cat-card__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.page-category-select .cat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(13,110,253,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(13,110,253,1);
  flex: 0 0 auto;
  font-weight: 900;
}

.page-category-select .cat-card__name {
  font-size: 15px;
  font-weight: 800;
  color: rgba(0,0,0,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-category-select .cat-card__meta {
  font-size: 12px;
  color: rgba(0,0,0,.52);
  margin-top: 2px;
}

.page-category-select .cat-card__chev {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(13,110,253,1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Quick actions */
.page-category-select .quick {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.page-category-select .quick__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
}

.page-category-select .quick__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 768px) {
  .page-category-select .quick__grid {
    grid-template-columns: 1fr;
  }
}

.page-category-select a.quick__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.page-category-select a.quick__btn:hover,
.page-category-select a.quick__btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  border-color: rgba(13,110,253,.30);
  outline: none;
}

.page-category-select .quick__label {
  font-size: 13px;
  font-weight: 800;
  color: rgba(0,0,0,.75);
}

.page-category-select .quick__hint {
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* === Tuning: mniej pustki, większy focus na kategoriach === */

/* mniejszy hero */
.page-category-select .hero{
  padding: 28px 0 16px;
}

/* panel szerszy i bliżej hero */
.page-category-select .panel{
  max-width: 1240px;        /* było 1100 */
  margin-top: -8px;
  padding-top: 10px;
}

/* karta bardziej "premium", ale nie nadęta */
.page-category-select .panel__card{
  padding: 22px;
  border-radius: 20px;
}

/* kategorie większe */
.page-category-select .cat-grid{
  gap: 14px;
}

.page-category-select a.cat-card{
  padding: 16px 16px;
  border-radius: 18px;
}

/* mniej agresywny ">" */
.page-category-select .cat-card__chev{
  background: transparent !important;
  color: rgba(13,110,253,1) !important;
  border: 1px solid rgba(13,110,253,.30);
}

/* ikona po lewej spokojniejsza */
.page-category-select .cat-card__icon{
  background: rgba(13,110,253,.08);
}

/* Quick actions jako drobny bonus, nie konkurencja */
.page-category-select .quick{
  margin-top: 12px;
  padding-top: 12px;
  opacity: .92;
}

.page-category-select .quick__grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-category-select a.quick__btn{
  background: rgba(248,249,250,1);
  border-radius: 16px;
}

/* Quick chevron też outline */
.page-category-select a.quick__btn .cat-card__chev{
  width: 32px;
  height: 32px;
  border-radius: 12px;
}
/* ===== Category Select: layout that doesn't look like a floating widget ===== */

/* hero mniej "banner", bardziej nagłówek sekcji */
.page-category-select .hero{
  padding: 22px 0 10px;
  background: linear-gradient(180deg, rgba(13,110,253,.88) 0%, rgba(13,110,253,.62) 60%, rgba(248,249,250,1) 100%);
}

/* TIP: mniejszy, bardziej "inline" */
.page-category-select .tip-card{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px 12px;
}

/* panel bliżej hero i szerszy */
.page-category-select .panel{
  max-width: 1280px;
  margin: -8px auto 0;
  padding: 8px 18px 26px;
}

/* karta ma być główna, więc większa */
.page-category-select .panel__card{
  padding: 26px;
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
}

/* tytuł i opis trochę większe */
.page-category-select .panel__title{
  font-size: 18px;
}
.page-category-select .panel__sub{
  font-size: 14px;
}

/* kategorie jako "duże przyciski" */
.page-category-select .cat-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.page-category-select a.cat-card{
  padding: 18px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

/* hover bardziej subtelny i premium */
.page-category-select a.cat-card:hover,
.page-category-select a.cat-card:focus{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  border-color: rgba(13,110,253,.28);
}

/* ikona po lewej większa */
.page-category-select .cat-card__icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: rgba(13,110,253,.10);
}

/* chevron spokojny */
.page-category-select .cat-card__chev{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: transparent !important;
  border: 1px solid rgba(13,110,253,.30);
  color: rgba(13,110,253,1) !important;
}

/* Quick actions: przeniesiemy pod kartę, styl jak linki/małe kafelki */
.page-category-select .quick{
  max-width: 1280px;
  margin: 14px auto 0;
  padding: 0 18px 22px;
  border-top: 0;
}

.page-category-select .quick__title{
  font-size: 13px;
  color: rgba(0,0,0,.60);
  margin-bottom: 10px;
}

.page-category-select .quick__grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-category-select a.quick__btn{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 12px 14px;
}

.page-category-select a.quick__btn:hover,
.page-category-select a.quick__btn:focus{
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  border-color: rgba(13,110,253,.25);
}

/* mobile */
@media (max-width: 768px){
  .page-category-select .cat-grid{ grid-template-columns: 1fr; }
  .page-category-select .quick__grid{ grid-template-columns: 1fr; }
}
/* ===== HERO + CARD: kontrolowany overlap (fix "sklejone") ===== */

.page-category-select .hero{
  padding: 44px 0 64px;               /* wyższe hero */
  border-bottom: 0;
}

.page-category-select .hero__inner{
  align-items: center;
}

/* panel wchodzi w hero kontrolowanie */
.page-category-select .panel{
  max-width: 1180px;
  margin: -42px auto 0;               /* overlap */
  padding: 0 18px 26px;
}

/* karta dostaje porządny cień i oddech */
.page-category-select .panel__card{
  padding: 26px;
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}

/* Tip trochę niżej, żeby oddychał */
.page-category-select .tip-card{
  transform: translateY(6px);
}

/* mobile: overlap mniejszy */
@media (max-width: 768px){
  .page-category-select .hero{ padding: 34px 0 48px; }
  .page-category-select .panel{ margin-top: -28px; }
}
.page-category-select .tip-card{
  background: rgba(255,255,255,.88);
}
/* ===== Flow pages: ten sam overlap vibe co category-select (Opcja A) ===== */
.page-create-ticket .flow-hero,
.page-create-ticket-confirmation .flow-hero{
  padding: 44px 0 64px;
}

.page-create-ticket .flow-body,
.page-create-ticket-confirmation .flow-body{
  margin-top: -42px;
}

@media (max-width: 768px){
  .page-create-ticket .flow-hero,
  .page-create-ticket-confirmation .flow-hero{ padding: 34px 0 48px; }
  .page-create-ticket .flow-body,
  .page-create-ticket-confirmation .flow-body{ margin-top: -28px; }
}
/* ===== Create Ticket: dopieszczamy formularz (żeby nie wyglądał jak default HESK) ===== */

.page-create-ticket .flow-container{
  max-width: 1180px;
}

/* karta formularza: węższa i bardziej "focus" */
.page-create-ticket .flow-card{
  max-width: 980px;
  margin: 0 auto;
  border-radius: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,.10);
}

/* header karty: więcej oddechu */
.page-create-ticket .flow-card__head{
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* etykiety: spójne i czytelne */
.page-create-ticket .form-group .label,
.page-create-ticket .param .label{
  font-weight: 700;
  color: rgba(0,0,0,.72);
}

/* odstępy między polami */
.page-create-ticket .form-group{
  margin-bottom: 18px;
}

/* inputy: większe */
.page-create-ticket .form-control{
  border-radius: 14px;
  padding: 12px 12px;
  min-height: 44px;
  border: 1px solid rgba(0,0,0,.10);
  transition: box-shadow .14s ease, border-color .14s ease;
}

.page-create-ticket .form-control:focus{
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 0 0 4px rgba(13,110,253,.10);
  outline: none;
}

/* textarea: większa i wygodniejsza */
.page-create-ticket textarea.form-control{
  min-height: 220px;
  resize: vertical;
}

/* divider: delikatniejszy */
.page-create-ticket .divider{
  border-top: 1px solid rgba(0,0,0,.06);
  margin: 18px 0;
}

/* sekcja priorytetu: niech wygląda jak reszta */
.page-create-ticket .param{
  padding: 14px 0 2px;
}

.page-create-ticket .dropdown-select select{
  border-radius: 14px;
  min-height: 44px;
  border: 1px solid rgba(0,0,0,.10);
}

/* załączniki: trochę bardziej "karta w karcie" */
.page-create-ticket .param--attach .attach{
  padding: 12px;
  border-radius: 18px;
  border: 1px dashed rgba(0,0,0,.16);
  background: rgba(248,249,250,1);
}

/* stopka formularza: przycisk wyraźniejszy i większy */
.page-create-ticket .form-footer{
  padding-top: 12px;
}

.page-create-ticket .btn.btn-full{
  border-radius: 16px;
  min-height: 48px;
  font-weight: 800;
}

/* na mobile: mniej szerokości, mniej paddingów */
@media (max-width: 768px){
  .page-create-ticket .flow-card{
    max-width: 100%;
  }
  .page-create-ticket textarea.form-control{
    min-height: 180px;
  }
}
/* ===== Create Ticket: overlap formularza na hero (jak category-select) ===== */

.page-create-ticket .flow-hero{
  padding: 44px 0 64px;
}

.page-create-ticket .flow-body{
  margin-top: -42px;      /* to jest overlap */
  position: relative;
  z-index: 2;
}

@media (max-width: 768px){
  .page-create-ticket .flow-hero{ padding: 34px 0 48px; }
  .page-create-ticket .flow-body{ margin-top: -28px; }
}
/* ===== HARD overlap for create-ticket (works even if HESK fights back) ===== */

.page-create-ticket .flow-hero{
  padding: 52px 0 86px !important; /* więcej miejsca na overlap */
  position: relative !important;
  z-index: 1 !important;
}

.page-create-ticket .flow-body{
  margin-top: -64px !important;    /* faktyczny overlap */
  padding-top: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

/* jeśli jakiś wrapper trzyma odstęp */
.page-create-ticket .flow-container{
  position: relative !important;
  z-index: 5 !important;
}

/* zabezpieczenie przed ukrywaniem overlapu */
.page-create-ticket .main__content,
.page-create-ticket .main,
.page-create-ticket main{
  overflow: visible !important;
}

/* mobile */
@media (max-width: 768px){
  .page-create-ticket .flow-hero{ padding: 40px 0 72px !important; }
  .page-create-ticket .flow-body{ margin-top: -44px !important; }
}
/* fallback: jeśli wrappery przeszkadzają, podciągnij samą kartę */
.page-create-ticket .flow-card{
  transform: translateY(-52px) !important;
}

@media (max-width: 768px){
  .page-create-ticket .flow-card{ transform: translateY(-34px) !important; }
}
/* ===== Create Ticket: overlap subtelny, bez zasłaniania hero ===== */

/* dajemy hero więcej dolnej przestrzeni */
.page-create-ticket .flow-hero{
  padding: 54px 0 120px !important;   /* klucz: większy bottom */
  position: relative !important;
  z-index: 1 !important;
}

/* formularz podciągamy tylko trochę */
.page-create-ticket .flow-body{
  margin-top: -58px !important;       /* subtelny overlap */
  position: relative !important;
  z-index: 5 !important;
}

/* karta niech będzie center i niech nie rośnie za bardzo */
.page-create-ticket .flow-card{
  max-width: 980px;
  margin: 0 auto;
}

/* tip/checklist niech zostanie nad wszystkim */
.page-create-ticket .flow-panel{
  position: relative !important;
  z-index: 6 !important;
}

/* usuń wcześniejsze "młotki" jeśli je wkleiłeś */
.page-create-ticket .flow-card{
  transform: none !important;
}

/* mobile */
@media (max-width: 768px){
  .page-create-ticket .flow-hero{ padding: 40px 0 92px !important; }
  .page-create-ticket .flow-body{ margin-top: -42px !important; }
}
/* ===== Create Ticket: tuning overlap (ma wyglądać jak spójny blok) ===== */

.page-create-ticket .flow-hero{
  padding: 52px 0 104px !important;  /* mniej pustki na dole */
}

.page-create-ticket .flow-body{
  margin-top: -72px !important;      /* karta bliżej hero */
}

/* checklist trochę niżej, żeby nie robił "sufitu" */
.page-create-ticket .flow-panel{
  transform: translateY(10px);
}

/* delikatniejszy cień karty (żeby overlap wyglądał naturalnie) */
.page-create-ticket .flow-card{
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
}

/* mobile */
@media (max-width: 768px){
  .page-create-ticket .flow-hero{ padding: 40px 0 86px !important; }
  .page-create-ticket .flow-body{ margin-top: -54px !important; }
  .page-create-ticket .flow-panel{ transform: translateY(6px); }
}
/* ===== Create Ticket: PRAWDZIWY overlap (karta wchodzi na hero) ===== */

.page-create-ticket .flow-hero{
  padding: 52px 0 120px !important;     /* miejsce żeby karta miała na co nachodzić */
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;         /* ważne: nie ucina overlapu */
}

/* nie skracamy hero marginem */
.page-create-ticket .flow-body{
  margin-top: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* podnosimy kartę nad hero */
.page-create-ticket .flow-card{
  position: relative !important;
  top: -64px !important;                /* TO jest overlap */
  z-index: 3 !important;
}

/* checklist ma być nad tłem, ale pod kartą nie musi */
.page-create-ticket .flow-panel{
  position: relative !important;
  z-index: 2 !important;
}

/* Mobile */
@media (max-width: 768px){
  .page-create-ticket .flow-hero{ padding: 40px 0 92px !important; }
  .page-create-ticket .flow-card{ top: -44px !important; }
}
/* ===== My Tickets: flow layout ===== */

.page-my-tickets .flow-hero{
  padding: 52px 0 120px !important;
  overflow: visible !important;
}

.page-my-tickets .flow-card{
  position: relative !important;
  top: -64px !important;
  z-index: 3 !important;
  max-width: 1180px;
  margin: 0 auto;
}

.page-my-tickets .mytickets-search{
  margin-top: 10px;
  margin-bottom: 18px;
}

.page-my-tickets .mytickets-table-wrap{
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

/* tabela: spokojniej, nowocześniej */
.page-my-tickets table.mytickets-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.page-my-tickets table.mytickets-table thead th{
  background: rgba(13,110,253,.10);
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 800;
}

.page-my-tickets table.mytickets-table th,
.page-my-tickets table.mytickets-table td{
  padding: 12px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,.06);
  white-space: nowrap;
}

.page-my-tickets table.mytickets-table tbody tr:hover{
  background: rgba(13,110,253,.05);
}

.page-my-tickets table.mytickets-table tbody tr.new{
  background: rgba(13,110,253,.10);
}

/* footer/pager */
.page-my-tickets .mytickets-footer{
  padding-top: 12px;
}

@media (max-width: 768px){
  .page-my-tickets .flow-hero{ padding: 40px 0 92px !important; }
  .page-my-tickets .flow-card{ top: -44px !important; }
}
/* ===== My Tickets: kompozycja (hero niższe, panel normalny, karta szersza) ===== */

.page-my-tickets .flow-hero{
  padding: 44px 0 96px !important; /* było za wysokie */
}

.page-my-tickets .flow-hero__inner{
  align-items: center;
}

/* Panel "Szybkie info" ma być kartą, nie lotniskiem */
.page-my-tickets .flow-panel{
  max-width: 420px !important;
  width: 100% !important;
}

/* Karta z tabelą powinna być szersza */
.page-my-tickets .flow-card{
  max-width: 1280px !important; /* było ~1180 */
  top: -56px !important;        /* delikatnie mniej overlapu */
}

/* Search: niech wygląda jak część karty, a nie inna aplikacja */
.page-my-tickets .help-search,
.page-my-tickets .mytickets-search{
  margin: 0 0 16px 0 !important;
}

/* Tabela: delikatne zaokrąglenie i mniej "excel vibe" */
.page-my-tickets .mytickets-table-wrap{
  border-radius: 14px;
  overflow: hidden; /* żeby header się ładnie klipował */
}

@media (max-width: 900px){
  .page-my-tickets .flow-hero{ padding: 36px 0 84px !important; }
  .page-my-tickets .flow-card{ top: -44px !important; }
  .page-my-tickets .flow-panel{ max-width: 100% !important; }
}
/* ===== My Tickets: hero nie przyklejone do lewej ===== */

.page-my-tickets .flow-hero__inner{
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* jak hero ma lecieć szeroko, to tekst i tak ma mieć max szerokość */
.page-my-tickets .flow-hero__inner > div:first-child{
  max-width: 720px;
}

/* kicker/tytuł trochę oddechu */
.page-my-tickets .flow-hero__kicker{
  margin-left: 0 !important;
}

.page-my-tickets .flow-hero__title{
  margin-top: 10px;
}

/* Na ultra szerokich ekranach niech to nie ucieka w kosmos */
@media (min-width: 1400px){
  .page-my-tickets .flow-hero__inner{
    max-width: 1320px;   /* trzymamy w ryzach */
    margin: 0 auto;
  }
}
/* View ticket hero: panel ma być kartą, nie banerem */
.page-view-ticket .flow-hero__inner{
  align-items: flex-start;
}

.page-view-ticket .flow-hero__inner .flow-panel{
  flex: 0 0 380px;      /* NIE rośnie, ma stałą bazę */
  width: 380px;
  max-width: 380px;
}

/* Na mniejszych ekranach niech spada pod tytuł */
@media (max-width: 980px){
  .page-view-ticket .flow-hero__inner{
    flex-direction: column;
    gap: 16px;
  }
  .page-view-ticket .flow-hero__inner .flow-panel{
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
}
/* View ticket: wszystko ma być jak na innych stronach */
.page-view-ticket .main__content,
.page-view-ticket .contr{
  max-width: 1200px;     /* albo tyle co masz w innych flow-container */
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Ticket layout: rozmowa + prawa kolumna */
.page-view-ticket .ticket{

  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

/* prawa kolumna niech nie rozpycha */
.page-view-ticket .ticket__params{
  min-width: 0;
}

/* na mniejszych ekranach składaj w jedną kolumnę */
@media (max-width: 1100px){
  .page-view-ticket .ticket{
    grid-template-columns: 1fr;
  }
}
.page-view-ticket .flow-hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* VIEW TICKET: ZBIJ SZEROKOŚĆ CAŁEJ TREŚCI POD HERO */
.page-view-ticket .main__content > .contr {
  max-width: 1200px !important;   /* dopasuj do innych stron (np. 1140/1200/1280) */
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
}

/* jeśli gdzieś masz jeszcze wrapper, który robi full width */
.page-view-ticket .ticket,
.page-view-ticket .ticket__body,
.page-view-ticket .ticket__params {
  max-width: 100% !important;
}

/* ułóż “Rozmowa” + “Szczegóły” jak człowiek */
.page-view-ticket .ticket {

  grid-template-columns: minmax(0, 1fr) 340px; /* prawa kolumna */
  gap: 18px !important;
  align-items: start;
}

/* typowe zabezpieczenie przed rozpychaniem */
.page-view-ticket .ticket__body { min-width: 0; }
.page-view-ticket .ticket__params { min-width: 0; }

/* responsywność */
@media (max-width: 1100px) {
  .page-view-ticket .ticket {
    grid-template-columns: 1fr !important;
  }
}
.page-view-ticket .ticket,
.page-view-ticket .ticket * {
  max-width: 100%;
}
/* Kontener jak wszędzie indziej (to jest “lekarstwo na szeroko”) */
.page-view-ticket .main__content > .contr{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Grid rozmowa + szczegóły */
.page-view-ticket .flow-grid-2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

/* Żeby długie rzeczy nie rozpychały kolumny */
.page-view-ticket .flow-grid-2 > *{
  min-width: 0;
}

/* Mobile */
@media (max-width: 1100px){
  .page-view-ticket .flow-grid-2{
    grid-template-columns: 1fr;
  }
}
/* View ticket: przywróć normalną szerokość jak na innych podstronach */
.page-view-ticket .content-wrap{
  width: 100%;
  max-width: 1200px;          /* ustaw jak masz na innych stronach (np. 1140/1200/1280) */
  margin: 0 auto;
  padding: 0 24px;            /* żeby nie kleiło się do krawędzi */
  box-sizing: border-box;
}

/* jak Ci coś robi “full width” na kartach/gridzie */
.page-view-ticket .flow-grid-2{
  width: 100%;
  max-width: 100%;
}
/* HERO overlay */
.page-view-ticket .hero,
.page-view-ticket .page-hero{
  position: relative;
  overflow: hidden;
}

/* warstwa przyciemniająca */
.page-view-ticket .hero::after,
.page-view-ticket .page-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* treść hero nad overlayem */
.page-view-ticket .hero > *,
.page-view-ticket .page-hero > *{
  position: relative;
  z-index: 1;
}
/* Rozmowa: niech bloki wiadomości nie ograniczają się bez sensu */
.page-view-ticket .ticket__body_block{
  max-width: 100%;
}

/* Nagłówki odpowiedzi: niech się nie łamią jak Tetris */
.page-view-ticket .ticket__body_block .block--head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-view-ticket .ticket__body_block .block--head .contact{
  min-width: 0;              /* mega ważne przy flex */
  word-break: break-word;
}

/* jeśli masz po prawej ikony (print itp.) */
.page-view-ticket .ticket__body_block .block--head .btn{
  flex: 0 0 auto;
}
/* =========================================================
   HOTFIX PACK (doklej na sam koniec pliku)
   - overlay na hero dla view-ticket (bo masz flow-hero)
   - stabilny layout rozmowa + szczegóły
   ========================================================= */

/* 1) Overlay na HERO (view-ticket) - poprawne selektory */
.page-view-ticket .flow-hero{
  position: relative !important;
  overflow: hidden !important;
}
.page-view-ticket .flow-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.page-view-ticket .flow-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,0) 100%
  ) !important;
}
.page-view-ticket .flow-hero__inner{
  position: relative !important;
  z-index: 2 !important;
}

/* 2) Kontrolowana szerokość pod hero (view-ticket) */
.page-view-ticket .flow-body .flow-container{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* 3) Grid: rozmowa + szczegóły (Twoje .flow-grid-2) */
.page-view-ticket .flow-grid-2{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 22px !important;
  align-items: start !important;
}
.page-view-ticket .flow-grid-2 > *{ min-width: 0 !important; }

@media (max-width: 1100px){
  .page-view-ticket .flow-grid-2{
    grid-template-columns: 1fr !important;
  }
}

/* 4) Rozmowa: nagłówek bloku niech się nie łamie losowo */
.page-view-ticket .ticket__body_block .block--head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
}
.page-view-ticket .ticket__body_block .block--head .contact{
  min-width:0 !important;
  word-break:break-word !important;
}
.page-view-ticket .ticket__body_block .block--head .btn{
  flex:0 0 auto !important;
}
/* =========================================================
   VIEW TICKET: wiadomości w "Rozmowa" mają być pełnej szerokości kolumny
   (bo teraz są przycięte max-width i wycentrowane)
   ========================================================= */

.page-view-ticket .ticket__body{
  /* gdyby gdzieś było flex/center, kasujemy */
  display: block !important;
}

/* Najważniejsze: zdejmij limit szerokości z bloczków wiadomości */
.page-view-ticket .ticket__body_block{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Jeśli oryginał ma "inline-block" albo dziwne aligny, to też ubijamy */
.page-view-ticket .ticket__body_block.original-message,
.page-view-ticket .ticket__body_block.response{
  display: block !important;
}

/* Czasem nagłówek wiadomości ma własne ograniczenie */
.page-view-ticket .ticket__body_block .block--description,
.page-view-ticket .ticket__body_block .block--head{
  max-width: none !important;
}
/* =========================================================
   VIEW TICKET: fix "wąska rozmowa"
   Problem zwykle siedzi w .ticket__body (max-width + center / flex)
   ========================================================= */

.page-view-ticket .ticket{
  width: 100% !important;
  max-width: none !important;
}

/* tu najczęściej HESK robi ograniczenie */
.page-view-ticket .ticket__body{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  /* jeśli było flex+centrowanie, ubijamy */
  display: block !important;
}

/* wiadomości mają wypełniać kolumnę */
.page-view-ticket .ticket__body_block{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
}
/* VIEW TICKET: rozmowa ma wypełniać lewą kolumnę, bez limitów z HESK */
.page-view-ticket .ticket{
  width: 100% !important;
  max-width: 100% !important;
}

/* tu zwykle siedzi winowajca: max-width + margin:auto */
.page-view-ticket .ticket__body{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* jak HESK ustawił flex i centrowanie */
  display: block !important;
}

/* każde “okienko” wiadomości też ma mieć pełną szerokość kolumny */
.page-view-ticket .ticket__body_block{
  width: 100% !important;
  max-width: none !important;
}
/* =========================================================
   KNOWLEDGE BASE – FLOW STYLE
   Spójne z hero / ticket / category flow
   ========================================================= */

/* ---------- GLOBAL KB LAYOUT ---------- */
.page-view-category .main__content,
.page-view-article .main__content,
.page-search-results .main__content{
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--tertiary) 10%, transparent), transparent 70%),
    radial-gradient(900px 420px at 80% 20%, color-mix(in srgb, var(--secondary) 8%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 78%, white)
    );
  padding: 36px 0 72px;
}

.page-view-category .contr,
.page-view-article .contr,
.page-search-results .contr{
  max-width: 1180px;
  padding: 0 22px;
}

/* ---------- SEARCH (top) ---------- */
.help-search{
  margin-bottom: 28px;
}

.help-search .search{
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), .12);
}

/* ---------- HEADERS ---------- */
.block__head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.block__head h1,
.block__head h2,
.block__head h3{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--font__pri-clr);
}

/* ---------- CATEGORY GRID ---------- */
.topics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.topics__block{
  background: var(--surface);
  border-radius: 20px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), .12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.topics__block:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), .16);
}

.topics__title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 15px;
}

.topics__title a{
  color: var(--font__pri-clr);
  text-decoration: none;
}

.topics__list{
  margin-top: 10px;
}

.topics__list li{
  margin-bottom: 6px;
}

.topics__list a{
  color: var(--font__sec-clr);
  text-decoration: none;
}

.topics__list a:hover{
  text-decoration: underline;
}

/* ---------- ARTICLE PREVIEWS ---------- */
.preview{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  padding: 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), .10);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  text-decoration: none;
}

.preview:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), .16);
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}

.preview__title{
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--font__pri-clr);
}

.preview__text p{
  font-size: 13px;
  color: var(--font__sec-clr);
}

/* ---------- ARTICLE VIEW ---------- */
.ticket--article{
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: 22px;
}

.ticket__body{
  background: var(--surface);
  border-radius: 22px;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), .14);
}

.ticket__body h1{
  font-weight: 950;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.block--description{
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- ATTACHMENTS ---------- */
.block--uploads{
  margin-top: 18px;
  font-size: 13px;
}

.block--uploads a{
  color: var(--tertiary);
}

/* ---------- SIDEBAR (meta) ---------- */
.ticket__params{
  display: grid;
  gap: 16px;
}

.params--block{
  background: var(--surface);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--white-8) 80%, transparent);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), .12);
}

.accordion-title{
  padding: 14px 18px;
  font-weight: 900;
}

.accordion-body{
  padding: 0 18px 18px;
}

.params--block .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 13px;
  margin-bottom: 6px;
}

.params--block .title{
  color: var(--font__sec-clr);
}

/* ---------- RELATED ---------- */
.params--block ul{
  margin-top: 6px;
}

.params--block ul li{
  margin-bottom: 6px;
}

/* ---------- RATING ---------- */
.rate{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- TABS (popular / latest) ---------- */
.tabbed__head{
  margin-bottom: 10px;
}

.tabbed__head_tabs{
  display: flex;
  gap: 10px;
}

.tabbed__head_tabs li{
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
  font-weight: 900;
  font-size: 12px;
}

.tabbed__head_tabs li.current{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tertiary) 92%, var(--black-1)),
      color-mix(in srgb, var(--primary) 88%, var(--black-1))
    );
  color: var(--white-1);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .topics{ grid-template-columns: 1fr; }
  .ticket--article{ grid-template-columns: 1fr; }
}
/* =========================
   KNOWLEDGE BASE – spójny styl z resztą (hero + karta)
   dopisać na koniec
   ========================= */

:root{
  --kb-maxw: var(--home-maxw);
}

/* container zgodny z home */
.kb-container{
  max-width: var(--kb-maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.kb-shell{
  max-width: none;
  padding: 0;
}

/* HERO (KB) */
.page-view-category .kb-hero,
.page-view-article .kb-hero,
.page-search-results .kb-hero{
  position: relative;
  padding: 44px 0 44px;
  overflow: hidden;
}

.page-view-category .kb-hero__bg,
.page-view-article .kb-hero__bg,
.page-search-results .kb-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 420px at 22% 18%, color-mix(in srgb, var(--tertiary) 40%, transparent), transparent 68%),
    radial-gradient(900px 380px at 78% 20%, color-mix(in srgb, var(--secondary) 36%, transparent), transparent 70%),
    radial-gradient(1000px 520px at 50% 110%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary) 86%, var(--black-1)),
      color-mix(in srgb, var(--primary) 20%, var(--main-background))
    );
}

.kb-hero__inner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
  align-items: start;
}

.kb-hero__search .search__input,
.kb-hero__search input{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 55%, transparent);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}

/* prawa karta w hero */
.kb-stat-card{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 55%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.16);
  padding: 16px;
  backdrop-filter: blur(12px);
}

.kb-stat-card__title{
  font-weight: 950;
  color: var(--font__pri-clr);
  margin-bottom: 8px;
  font-size: 14px;
}

.kb-stat-card__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}

.kb-stat-card__hint{
  font-size: 12px;
  color: var(--font__sec-clr);
  line-height: 1.5;
}

/* chipy */
.kb-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  background: color-mix(in srgb, var(--white-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--white-8) 22%, transparent);
  color: color-mix(in srgb, var(--white-1) 90%, transparent);
  font-weight: 900;
  font-size: 12px;
}
.kb-chip .icon{ width:16px; height:16px; color: currentColor; }
.kb-chip:hover{
  background: color-mix(in srgb, var(--white-1) 16%, transparent);
  border-color: color-mix(in srgb, var(--white-8) 36%, transparent);
  color: var(--white-1);
}

/* stat mini w article */
.kb-stat-mini{
  display:grid;
  gap:8px;
  margin-top: 6px;
}
.kb-stat-mini__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.kb-stat-mini__k{ color: var(--font__sec-clr); }
.kb-stat-mini__v{ color: var(--font__pri-clr); font-weight: 900; }
.kb-link{ color: inherit; text-decoration: none; }
.kb-link:hover{ text-decoration: underline; }

/* SEKCJA + karta */
.kb-section{
  padding: 34px 0 56px;
  background:
    radial-gradient(900px 420px at 20% 10%, color-mix(in srgb, var(--tertiary) 8%, transparent), transparent 70%),
    radial-gradient(900px 420px at 80% 20%, color-mix(in srgb, var(--secondary) 6%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--main-background) 96%, white),
      color-mix(in srgb, var(--main-background) 78%, white)
    );
  border-top: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
}

.kb-card{
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow_med) hsla(var(--shadow-1-hsla), 0.12);
  padding: 18px;
}

/* Head */
.kb-card__head{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 12px;
}
.kb-card__title{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--font__pri-clr);
}

/* Folderline */
.kb-folderline{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--main-background) 40%, white);
  border: 1px solid color-mix(in srgb, var(--white-8) 70%, transparent);
  margin-bottom: 14px;
  font-size: 12px;
}
.kb-folderline a{ text-decoration:none; color: var(--font__pri-clr); font-weight: 900; }
.kb-folderline a:hover{ text-decoration: underline; }
.kb-folderline__sep .icon{ width:14px; height:14px; opacity: .7; }
.kb-folderline__current{ font-weight: 950; color: var(--font__pri-clr); display:inline-flex; gap:8px; align-items:center; }
.kb-folderline__crumb{ display:inline-flex; gap:8px; align-items:center; }
.kb-folderline__root{ display:inline-flex; gap:8px; align-items:center; }

/* Grid folderów */
.kb-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kb-folder{
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 16px;
}
.kb-folder__title{
  margin:0 0 10px 0;
  font-weight: 950;
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 14px;
}
.kb-folder__title a{ color: var(--font__pri-clr); text-decoration:none; }
.kb-folder__title a:hover{ text-decoration: underline; }
.kb-folder__list{
  margin:0;
  padding-left: 18px;
  color: var(--font__sec-clr);
  font-size: 13px;
  line-height: 1.6;
}
.kb-folder__list a{ color: var(--font__pri-clr); text-decoration:none; }
.kb-folder__list a:hover{ text-decoration: underline; }
.kb-folder__more a{ font-weight: 950; }
.kb-folder__empty{ font-size: 12px; color: var(--font__sec-clr); }

/* Lista artykułów */
.kb-list__head h3{
  margin: 10px 0 12px 0;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--font__pri-clr);
}

.kb-item{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 16px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}
.kb-item:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
  background: color-mix(in srgb, var(--main-background) 26%, white);
  box-shadow: var(--shadow_small) hsla(var(--shadow-1-hsla), 0.12);
}

.kb-item__icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--tertiary) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}
.kb-item__icon .icon{ width:18px; height:18px; color: var(--secondary); }

.kb-item__text{ min-width: 0; display:grid; gap: 4px; }
.kb-item__title{
  font-weight: 950;
  color: var(--font__pri-clr);
  font-size: 13px;
}
.kb-item__desc{
  color: var(--font__sec-clr);
  font-size: 12px;
  line-height: 1.5;
}

.kb-item__meta{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--font__sec-clr);
  font-size: 12px;
  white-space: nowrap;
}
.kb-meta{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}
.kb-meta .icon{ width:16px; height:16px; opacity: .75; }

/* Article */
.kb-article-card{ padding: 18px; }
.kb-article__content{
  font-size: 13px;
  line-height: 1.7;
  color: var(--font__pri-clr);
}
.kb-attachments{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
}
.kb-attachments__title{
  font-weight: 950;
  margin-bottom: 10px;
}
.kb-attach{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  background: color-mix(in srgb, var(--main-background) 26%, white);
  margin: 0 10px 10px 0;
  color: var(--font__pri-clr);
}
.kb-attach:hover{
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}
.kb-rate{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 13px;
  color: var(--font__sec-clr);
}
.kb-rate__sep{ opacity: .6; }
.kb-article__back{
  margin-top: 18px;
  text-align:right;
}

.kb-related{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
}
.kb-related__title{ font-weight: 950; margin-bottom: 10px; }
.kb-related__list{
  margin:0;
  padding-left: 18px;
  color: var(--font__sec-clr);
  line-height: 1.7;
}
.kb-related__list a{ color: var(--font__pri-clr); text-decoration:none; }
.kb-related__list a:hover{ text-decoration: underline; }

/* alert */
.kb-alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  background: color-mix(in srgb, var(--warning-1) 10%, white);
  color: var(--font__pri-clr);
  font-size: 13px;
}
.kb-alert--warn{
  background: color-mix(in srgb, var(--warning-1) 12%, white);
}

/* tabs */
.kb-tabs{ margin-top: 18px; }
.kb-tabs__head{
  display:flex;
  gap: 10px;
  margin-bottom: 12px;
}
.kb-tab{
  appearance:none;
  border: 1px solid color-mix(in srgb, var(--white-8) 82%, transparent);
  background: color-mix(in srgb, var(--main-background) 20%, white);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 950;
  font-size: 12px;
  cursor:pointer;
  color: var(--font__pri-clr);
}
.kb-tab.is-active{
  background: color-mix(in srgb, var(--tertiary) 14%, white);
  border-color: color-mix(in srgb, var(--tertiary) 22%, var(--white-8));
}
.kb-tabpane{ display:none; }
.kb-tabpane.is-visible{ display:block; }

.kb-empty{
  text-align:center;
  padding: 22px 10px;
  color: var(--font__sec-clr);
}

/* responsive */
@media (max-width: 1040px){
  .kb-hero__inner{ grid-template-columns: 1fr; }
  .kb-grid{ grid-template-columns: 1fr; }
}
/* =========================
   KB WIDTH FIX (bo .contr dusiło)
   ========================= */

.kb-page{
  padding: 0 !important;
}

/* upewnij się, że KB nie dziedziczy "ciasnej" kolumny */
.page-view-category .main__content > .contr,
.page-view-article .main__content > .contr,
.page-search-results .main__content > .contr{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* nasz wrapper ma być full */
.kb-shell{
  max-width: none;
  width: 100%;
}
/* =========================
   KB HERO typography + breadcrumbs readability
   ========================= */

/* breadcrumbsy w headerze nad hero (HESK je wyrzuca globalnie) */
.page-view-category .breadcrumbs,
.page-view-article .breadcrumbs,
.page-search-results .breadcrumbs{
  background: rgba(0,0,0,.25) !important;
  padding: 8px 12px;
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.page-view-category .breadcrumbs a,
.page-view-article .breadcrumbs a,
.page-search-results .breadcrumbs a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none;
}

.page-view-category .breadcrumbs,
.page-view-article .breadcrumbs,
.page-search-results .breadcrumbs{
  color: rgba(255,255,255,.8) !important;
}

/* KB hero tekst zawsze jasny */
.kb-hero .kb-hero__kicker,
.kb-hero .kb-hero__context,
.kb-hero .kb-hero__title,
.kb-hero .kb-hero__subtitle{
  color: #fff;
}

.kb-hero .kb-hero__subtitle{
  color: rgba(255,255,255,.86);
  max-width: 760px;
}

/* porządek w “Forum Media… | Helpdesk …” */
.kb-hero__topline{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.kb-hero__kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
}

.kb-hero__context{
  font-size: 12px;
  opacity: .92;
}

/* tytuł KB w hero bardziej “helpdeskowo” */
.kb-hero__title{
  margin: 0 0 6px 0;
  line-height: 1.1;
}

/* linki w hero żeby nie robiły czarnego syfu */
.kb-hero a{
  color: rgba(255,255,255,.92);
}
.kb-hero a:hover{
  color: #fff;
}

/* na wąskich ekranach niech to nie wygląda jak puzzle */
@media (max-width: 860px){
  .kb-hero__inner{
    grid-template-columns: 1fr !important;
  }
  .kb-hero__art{
    display: none;
  }
}