/* ==========================================================================
   technolutions.pl — Components
   Buttons, labels, cards, navbar, footer, forms, faq, slider, sticky CTA
   Maps the Figma "Components" library (53:971) to reusable CSS classes.
   ========================================================================== */

/* ==========================================================================
   BUTTONS  — mapped 1 : 1 from Figma component "Part: Button" (515:26677)
   Properties:  Size    — Small | Normal | Large
                State   — Default | Hover | OnClick
                Color   — Orange | Dark | White
                Variant — Primary | Secondary | Arrow | Link
                Icon    — False | True
   ========================================================================== */

/* ── Base ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-fs: var(--fs-btn-m);
  --btn-py: 10px;
  --btn-px: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-family: var(--font-heading);
  font-size: var(--btn-fs);
  font-weight: var(--fw-regular);
  line-height: 1;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: 100px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

/* ── Icon=True — arrow fades/slides in on hover ──────────────────────── */
.btn--icon .btn__arrow {
  width: 0;
  height: 1.1em;
  flex: none;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: width 220ms ease, opacity 180ms ease, transform 220ms ease;
}
@media (hover: hover) {
  .btn--icon:hover .btn__arrow {
    width: 1.1em;
    opacity: 1;
    transform: translateX(0);
  }
}
.btn--icon:focus-visible .btn__arrow {
  width: 1.1em;
  opacity: 1;
  transform: translateX(0);
}
.btn .icon {
  width: 1em;
  height: 1em;
  flex: none;
}

/* ── Size=Small ──────────────────────────────────────────────────────── */
.btn--s {
  --btn-fs: var(--fs-btn-s);
  --btn-py: 6px;
  --btn-px: 16px;
}

/* ── Size=Large ──────────────────────────────────────────────────────── */
.btn--l {
  --btn-fs: var(--fs-btn-l);
  --btn-py: 16px;
  --btn-px: 32px;
  border-width: 1.5px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Variant=Primary, Color=Orange (default) ─────────────────────────── */
.btn--primary {
  background: var(--c-brand-500);
  color: var(--c-white);
  border-color: var(--c-brand-500);
}
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--c-brand-600);
    border-color: var(--c-brand-600);
  }
}
.btn--primary:active {
  background: var(--c-brand-700);
  border-color: var(--c-brand-700);
}

/* ── Variant=Primary, Color=Dark ─────────────────────────────────────── */
.btn--primary.btn--dark {
  background: var(--c-natural-900);
  border-color: var(--c-natural-900);
  color: var(--c-white);
}
@media (hover: hover) {
  .btn--primary.btn--dark:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-natural-900);
  }
}
.btn--primary.btn--dark:active {
  background: var(--c-natural-200);
  border-color: var(--c-natural-200);
  color: var(--c-natural-900);
}

/* ── Variant=Primary, Color=White ────────────────────────────────────── */
.btn--primary.btn--white {
  background: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-natural-900);
}
@media (hover: hover) {
  .btn--primary.btn--white:hover {
    background: var(--c-natural-900);
    border-color: var(--c-natural-900);
    color: var(--c-white);
  }
}
.btn--primary.btn--white:active {
  background: var(--c-natural-800);
  border-color: var(--c-natural-800);
  color: var(--c-white);
}

/* ── Variant=Secondary, Color=Dark (default on light bg) ─────────────── */
.btn--secondary {
  background: transparent;
  color: var(--c-natural-900);
  border-color: var(--c-natural-900);
}
@media (hover: hover) {
  .btn--secondary:hover {
    background: var(--c-natural-900);
    border-color: var(--c-natural-900);
    color: var(--c-white);
  }
}
.btn--secondary:active {
  background: var(--c-natural-800);
  border-color: var(--c-natural-800);
  color: var(--c-white);
}

/* ── Variant=Secondary, Color=White (on dark bg) ─────────────────────── */
.btn--secondary.btn--white {
  color: var(--c-white);
  border-color: var(--c-white);
}
@media (hover: hover) {
  .btn--secondary.btn--white:hover {
    background: var(--c-white);
    border-color: var(--c-white);
    color: var(--c-natural-900);
  }
}
.btn--secondary.btn--white:active {
  background: var(--c-natural-200);
  border-color: var(--c-natural-200);
  color: var(--c-natural-900);
}

/* ── Variant=Link, Color=White ───────────────────────────────────────── */
.btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-white);
  font-weight: var(--fw-regular);
}
@media (hover: hover) {
  .btn--link:hover {
    color: var(--c-brand-500);
  }
}
.btn--link:active {
  color: var(--c-brand-500);
}

/* ── Variant=Arrow ───────────────────────────────────────────────────── */
.btn--arrow {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-natural-900);
  border-radius: 100px;
  background: var(--c-white);
  color: var(--c-natural-900);
}
@media (hover: hover) {
  .btn--arrow:hover {
    background: var(--c-natural-900);
    border-color: var(--c-natural-900);
    color: var(--c-white);
  }
}
.btn--arrow:active {
  background: var(--c-natural-800);
  border-color: var(--c-natural-900);
  color: var(--c-white);
}
.btn--arrow.btn--s {
  width: 30px;
  height: 30px;
}
.btn--arrow.btn--l {
  width: 64px;
  height: 64px;
}

/* ── Disabled ────────────────────────────────────────────────────────── */
.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   CHECKBOX — mapped 1:1 from Figma component "CheckBox" (3164:15462)
   Properties:  property1 — Default | Chceck
   ========================================================================== */
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 150ms ease, border-color 150ms ease;
}
.checkbox:checked {
  background: var(--c-brand-500);
  border-color: var(--c-brand-500);
}
.checkbox:checked::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M11.5 4L5.5 10L2.5 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checkbox:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 2px;
}

/* ==========================================================================
   LABEL / BADGE
   ========================================================================== */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  color: var(--c-brand-700);
  background: var(--c-brand-50);
  border-radius: var(--radius-s);
}
.label--violet {
  color: var(--c-purple-700);
  background: var(--c-purple-100);
}
.label--dark {
  color: var(--c-white);
  background: var(--c-white-10);
}
.label--m {
  font-size: var(--fs-body-m);
  padding: 8px 16px;
}
.label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  flex: none;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-32);
  background: var(--c-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  transition: border-color var(--transition), transform var(--transition),
    box-shadow var(--transition);
}
@media (hover: hover) {
  .card:hover {
    border-color: var(--c-natural-400);
    box-shadow: var(--shadow-md);
  }
}
.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--c-brand-500);
}
.card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}
.card__text {
  font-size: var(--fs-body-m);
  color: var(--text-body);
}

/* Dark feature card (devices section) */
.card--dark {
  background: var(--c-natural-800);
  border-color: var(--c-natural-700);
  color: var(--c-white-70);
}
@media (hover: hover) {
  .card--dark:hover {
    border-color: var(--c-brand-500);
  }
}
.card--dark .card__title {
  color: var(--c-white);
}
.card--dark .card__text {
  color: var(--c-white-60);
}

/* Purple feature card ("Dlaczego Technolutions?") */
.card--purple {
  background: var(--c-purple-600);
  border-color: var(--c-purple-600);
  color: var(--c-white-80);
}
@media (hover: hover) {
  .card--purple:hover {
    background: var(--c-purple-700);
    border-color: var(--c-purple-500);
  }
}
.card--purple .card__title,
.card--purple .card__icon {
  color: var(--c-white);
}
.card--purple .card__text {
  color: var(--c-white-70);
}

/* Image card (with photo + body) */
.image-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-natural-900);
  color: var(--c-white);
}
.image-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.image-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
@media (hover: hover) {
  .image-card:hover .image-card__media img {
    transform: scale(1.04);
  }
}
.image-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  padding: var(--sp-24);
}
.image-card__body .card__title {
  color: var(--c-white);
}

/* Slider card */
.slider-card {
  flex: 0 0 auto;
  width: 516px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  background: var(--c-white);
  border: 1px solid var(--border-subtle);
}
.slider-card__media {
  aspect-ratio: 16 / 9;
  background: var(--c-natural-100);
  overflow: hidden;
}
.slider-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   IMAGE PLACEHOLDER  (used until real assets are wired in)
   ========================================================================== */
.img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media {
  position: relative;
  overflow: hidden;
  background: var(--c-natural-100);
  border-radius: var(--radius-m);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
#site-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}
.navbar {
  background: var(--c-white);
  color: var(--c-natural-900);
  box-shadow: 0 2px 5px rgba(131, 130, 130, 0.25);
  transition: box-shadow 200ms ease;
  width: 100%;
}
.navbar.is-sticky {
  box-shadow: 0 4px 12px rgba(24, 24, 27, 0.12);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  max-width: var(--layout-container);
  margin-inline: auto;
  padding: 8px 16px;
}
.navbar__logo {
  display: block;
  position: relative;
  width: 205.1px;
  height: 49.5px;
  overflow: hidden;
  flex: none;
}
.navbar__logo img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
}
.navbar__logo .lg-full {
  width: 195.1px;
}
.navbar__logo .lg-ring {
  width: 108.2px;
}
.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: 1 1 auto;
  justify-content: center;
}
/* ==========================================================================
   NAVLINK — global nav-link component (Part: nav-link)
   Variants: default (dark text) | --light (white text for dark backgrounds)
   ========================================================================== */
.navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  white-space: nowrap;
  color: var(--c-natural-900);
  padding: 8px 6px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .navlink:hover {
    color: var(--c-brand-500);
  }
}
.navlink:focus-visible {
  color: var(--c-brand-500);
}
.navlink[aria-current="page"] {
  color: var(--c-brand-500);
}
.navlink--light {
  color: var(--c-white);
}
@media (hover: hover) {
  .navlink--light:hover {
    color: var(--c-brand-500);
    background: none;
  }
}
.navlink--light:focus-visible {
  color: var(--c-brand-500);
  background: none;
}
.navlink .chev {
  width: 16px;
  height: 16px;
  flex: none;
}
/* Legacy alias — keep .navbar__link working */
.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  white-space: nowrap;
  color: var(--c-natural-900);
  padding: 8px 6px;
  border-radius: 8px;
  transition: color var(--transition);
}
@media (hover: hover) {
  .navbar__link:hover {
    color: var(--c-brand-500);
  }
}
.navbar__link:focus-visible {
  color: var(--c-brand-500);
}
.navbar__link[aria-current="page"] {
  color: var(--c-brand-500);
}
.navbar__link .chev {
  width: 16px;
  height: 16px;
  flex: none;
}
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.nav-search {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--c-natural-900);
  transition: color var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .nav-search:hover {
    color: var(--c-brand-500);
    transform: scale(1.08);
  }
}
.nav-search:focus-visible {
  color: var(--c-brand-500);
  transform: scale(1.08);
}
.nav-search svg,
.nav-search img {
  width: 16px;
  height: 16px;
}
.navbar__toggle {
  display: none;
  gap: var(--sp-4);
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  color: var(--c-natural-900);
}
.navbar__toggle-label {
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  pointer-events: none;
}
.navbar__toggle span:first-child,
.navbar__toggle span:first-child::before,
.navbar__toggle span:first-child::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.navbar__toggle span:first-child::before {
  position: absolute;
  top: -5px;
}
.navbar__toggle span:first-child::after {
  position: absolute;
  top: 5px;
}
.navbar.is-open .navbar__toggle span:first-child {
  background: transparent;
}
.navbar.is-open .navbar__toggle span:first-child::before {
  transform: translateY(5px) rotate(45deg);
}
.navbar.is-open .navbar__toggle span:first-child::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Search bar drop-down (expands under navbar) */
.nav-searchbar {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -8px);
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(516px, 90vw);
  padding: 8px;
  background: var(--c-white);
  border: 1px solid var(--c-natural-100);
  border-radius: 100px;
  box-shadow: 0 0 27px rgba(131, 130, 130, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), transform var(--transition),
    visibility var(--transition);
}
.navbar.search-open .nav-searchbar {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 12px);
}
.nav-searchbar__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
}
.nav-searchbar__icon svg,
.nav-searchbar__icon img {
  width: 16px;
  height: 16px;
}
.nav-searchbar input {
  flex: 1;
  border: 0;
  background: none;
  font-size: var(--fs-body-m);
  color: var(--c-natural-900);
  outline: none;
}
.nav-searchbar input:focus {
  outline: none;
}
.nav-searchbar input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}
.nav-searchbar input::placeholder {
  color: var(--c-black-40);
}
.nav-searchbar:focus-within {
  border-color: var(--c-natural-400);
  box-shadow: 0 0 0 2px rgba(131, 130, 130, 0.2), 0 0 27px rgba(131, 130, 130, 0.15);
}
.nav-searchbar__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--c-natural-600);
  transition: color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .nav-searchbar__close:hover {
    color: var(--c-natural-900);
    background: var(--c-natural-100);
  }
}
.nav-searchbar__close svg {
  width: 16px;
  height: 16px;
}

/* Instant-search results (CMS previews under the search box) */
.nav-searchbar__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  background: var(--c-white);
  border: 1px solid var(--c-natural-100);
  border-radius: var(--radius-s);
  box-shadow: 0 12px 32px rgba(131, 130, 130, 0.18);
}
.nav-searchbar__results[hidden] {
  display: none;
}
.nav-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  color: var(--c-natural-900);
  text-decoration: none;
  transition: background var(--transition);
}
.nav-search-result:hover,
.nav-search-result.is-active {
  background: var(--c-natural-100);
}
.nav-search-result__thumb {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 8px;
  object-fit: cover;
  background: var(--c-natural-100);
  display: grid;
  place-items: center;
  color: var(--c-natural-400);
}
.nav-search-result__thumb svg {
  width: 20px;
  height: 20px;
}
.nav-search-result__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-search-result__title {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-m);
  color: var(--c-natural-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-search-result__type {
  font-size: var(--fs-body-s);
  color: var(--c-natural-600);
}
.nav-searchbar__status {
  padding: 14px 12px;
  margin: 0;
  font-size: var(--fs-body-s);
  color: var(--c-natural-600);
}

/* ==========================================================================
   NAVBAR DROPDOWNS — mega menu (Urządzenia) + mini dropdown (O nas)
   ========================================================================== */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-item--mega {
  position: static;
}
.navbar__link .chev {
  transition: transform 200ms ease;
}
@media (hover: hover) {
  .nav-item:hover > .navbar__link .chev {
    transform: rotate(180deg);
  }
}
.nav-item:focus-within > .navbar__link .chev,
.nav-item.is-open > .navbar__link .chev {
  transform: rotate(180deg);
}

/* Mini dropdown (O nas) */
.nav-mini {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 8px;
  background: var(--c-white);
  border: 1px solid var(--c-natural-100);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(24, 24, 27, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 95;
}
@media (hover: hover) {
  .nav-item--mini:hover .nav-mini {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.nav-item--mini:focus-within .nav-mini {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-mini a {
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  color: var(--c-natural-900);
  transition: color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .nav-mini a:hover {
    color: var(--c-brand-500);
    background: var(--c-natural-50);
  }
}

/* Mega menu (Urządzenia) — matches Figma Part: Menu-mega */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100dvh - 100%);
  background: var(--c-white);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 90;
}
@media (hover: hover) {
  .nav-item--mega:hover .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.nav-item--mega:focus-within .mega,
.nav-item--mega.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Backdrop overlay (anchored to the navbar bottom, like .mega, so it never
   overlaps the navbar itself — e.g. when the WP admin bar offsets the header) */
.nav-item--mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
  pointer-events: none;
  z-index: 80;
}
@media (hover: hover) {
  .nav-item--mega:hover::after {
    opacity: 1;
    visibility: visible;
  }
}
.nav-item--mega:focus-within::after,
.nav-item--mega.is-open::after {
  opacity: 1;
  visibility: visible;
}
.mega__inner {
  width: 100%;
  max-width: var(--layout-full);
  max-height: calc(100dvh - var(--navbar-h, 80px));
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: hidden;
}
.mega__sidebar {
  width: 420px;
  min-width: 340px;
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24) var(--sp-32);
  background: var(--c-natural-100);
  overflow-y: auto;
}
.mega__sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.mega__sidebar-title,
.mega-panel__count {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--c-natural-500);
  margin: 0;
}

/* Sidebar category item (Part: menu-label) */
.mega-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  width: 100%;
  min-height: 66px;
  padding: 12px;
  text-align: left;
  border-radius: 20px;
  border: 0.9px solid var(--c-white);
  background: var(--c-natural-50);
  color: var(--c-natural-600);
  transition: background var(--transition), border-color var(--transition);
}
.mega-cat__left {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-width: 0;
  flex: 1 1 auto;
}
.mega-cat__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-natural-500);
  transition: background var(--transition), color var(--transition);
}
.mega-cat__icon-art {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}
.mega-cat__icon-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  max-width: none;
  transition: opacity var(--transition);
}
.mega-cat__icon-img--white {
  opacity: 0;
}
.mega-cat.is-active .mega-cat__icon-img--gray {
  opacity: 0;
}
.mega-cat.is-active .mega-cat__icon-img--white {
  opacity: 1;
}
.mega-cat__icon svg {
  width: 20px;
  height: 20px;
}
.mega-cat__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.mega-cat__name {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-600);
  transition: color var(--transition);
}
.mega-cat__sub {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: var(--lh-heading);
  color: var(--c-natural-500);
}
.mega-cat__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--c-natural-500);
}
.mega-cat__arrow svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .mega-cat:hover {
    border-color: var(--c-white);
    background: var(--c-white);
  }
}
.mega-cat.is-active .mega-cat__icon {
  background: var(--c-brand-500);
  color: var(--c-white);
}
.mega-cat.is-active .mega-cat__name {
  color: var(--c-natural-900);
  font-weight: var(--fw-bold);
}

/* Right content panel */
.mega__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  padding: var(--sp-div-gap);
  background: var(--c-natural-50);
  overflow: hidden;
}
.mega__panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.mega-panel {
  display: none;
  flex: 1 1 auto;
}
.mega-panel.is-active {
  display: block;
}
.mega-panel__label {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--c-natural-200);
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--c-natural-500);
  margin-bottom: 16px;
}
.mega-panel__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3, 32px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-natural-900);
  margin: 0 0 4px;
}
.mega-panel__sub {
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 0 0 32px;
}
.mega-panel__count {
  margin: 0 0 16px;
}
.mega-devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12);
  align-content: start;
}
.mega-device {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 0.9px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.mega-device__dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: var(--c-natural-700);
  transition: background var(--transition);
}
.mega-device a {
  flex: 1 0 0;
  min-width: 1px;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-700);
  word-break: break-word;
  transition: color var(--transition);
}
@media (hover: hover) {
  .mega-device:hover {
    background: var(--c-natural-100);
    border-color: transparent;
  }
  .mega-device:hover a {
    color: var(--c-natural-900);
  }
  .mega-device:hover .mega-device__dot {
    background: var(--c-natural-900);
  }
}

/* Bottom cards row */
.mega__cards {
  flex: none;
  display: grid;
  grid-template-columns: 616fr 364fr;
  gap: var(--sp-16);
  align-items: start;
}
.mega-promo {
  display: flex;
  gap: var(--sp-textwrap-gap);
  align-items: center;
  padding: var(--sp-20) var(--sp-32);
  border-radius: var(--radius-l);
  background: var(--c-white);
  overflow: hidden;
  transition: background var(--transition);
}
@media (hover: hover) {
  .mega-promo:hover {
    background: var(--c-brand-500);
  }
}
.mega-promo__thumb {
  flex: none;
  width: 112px;
  height: 112px;
  align-self: center;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--c-natural-200);
}
.mega-promo__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms ease;
}
@media (hover: hover) {
  .mega-promo:hover .mega-promo__thumb img {
    transform: scale(1.12);
  }
}
.mega-promo__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
}
.mega-promo__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
  transition: color var(--transition);
}
.mega-promo__text {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  transition: color var(--transition);
}
.mega-promo__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--c-natural-900);
  transition: color var(--transition);
}
.mega-promo__link svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .mega-promo:hover .mega-promo__title,
  .mega-promo:hover .mega-promo__link {
    color: var(--c-white);
  }
  .mega-promo:hover .mega-promo__text {
    color: var(--c-white-80);
  }
}
.mega-support {
  display: flex;
  gap: var(--sp-8);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-16);
  height: 152px;
  border-radius: var(--radius-l);
  background: var(--c-white);
  transition: box-shadow var(--transition);
}
@media (hover: hover) {
  .mega-support:hover {
    box-shadow: var(--shadow-md);
  }
}
.mega-support__avatar {
  flex: none;
  width: 88px;
  height: 96px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: #1b1b19;
}
.mega-support__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-support__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
}
.mega-support__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--c-natural-500);
}
.mega-support__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-m);
  color: var(--c-natural-900);
}
.mega-support__icon {
  margin-left: auto;
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-natural-100);
  color: var(--c-natural-900);
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) {
  .mega-support:hover .mega-support__icon {
    background: var(--c-brand-500);
    color: var(--c-white);
  }
}
.mega-support__icon svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   MOBILE NAV DRAWER (mnav) — slide-in sidebars: root → groups → devices
   Hidden by default; enabled in the ≤1024px media query below.
   Matches Figma: Part Menu-mega (Mobile), Grupy urządzeń, Wybrana kategoria.
   ========================================================================== */
body.mnav-open {
  overflow: hidden;
}
.mnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.mnav.is-open {
  visibility: visible;
  pointer-events: auto;
}
.mnav__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  padding: var(--sp-32) var(--sp-16);
  background: var(--c-natural-100);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  transition: transform 300ms ease;
}
.mnav__panel--root {
  z-index: 1;
}
.mnav__panel--groups {
  z-index: 2;
}
.mnav__mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.mnav__panel--devices {
  z-index: 4;
  width: 85vw;
  background: var(--c-white);
}
.mnav.is-open .mnav__panel--root {
  transform: translateX(0);
}
.mnav.at-groups .mnav__panel--groups {
  transform: translateX(0);
}
.mnav.at-devices .mnav__panel--devices {
  transform: translateX(0);
}
.mnav.at-devices .mnav__mask {
  opacity: 1;
  visibility: visible;
}

/* Panel header */
.mnav__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
}
.mnav__heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-natural-500);
}
.mnav__close {
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--c-natural-900);
}
.mnav__close svg {
  width: 16px;
  height: 16px;
}
.mnav__head--back {
  justify-content: flex-start;
}
.mnav__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--c-natural-900);
}
.mnav__back svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Root nav links */
.mnav__links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.mnav-link,
.mnav-link--split {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
  border-bottom: 1px solid var(--c-natural-300);
}
.mnav-link {
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 16px 8px;
  text-align: left;
}
.mnav-link[aria-current="page"] {
  color: var(--c-brand-500);
}
/* Split button: link label + separate toggle */
.mnav-link--split {
  padding: 0;
  gap: 0;
}
.mnav-link__label {
  flex: 1;
  padding: 16px 8px;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
}
.mnav-link__label[aria-current="page"] {
  color: var(--c-brand-500);
}
.mnav-link__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 52px;
  min-height: 52px;
  padding: 0 8px;
  color: var(--c-natural-900);
  border-left: 1px solid var(--c-natural-300);
}
.mnav-acc {
  width: 100%;
}
.mnav-link .chev,
.mnav-link svg,
.mnav-link__toggle .chev {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 200ms ease;
}
.mnav-acc.is-open .mnav-link__toggle .chev {
  transform: rotate(180deg);
}
.mnav-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.mnav-acc.is-open .mnav-sub {
  grid-template-rows: 1fr;
}
.mnav-sub__inner {
  overflow: hidden;
}
.mnav-sub__link {
  display: block;
  padding: 12px 8px 12px 20px;
  font-family: var(--font-heading);
  font-size: var(--fs-body-m);
  color: var(--c-natural-600);
  border-bottom: 1px solid var(--c-natural-300);
}

/* Support card (orange box) */
.mnav-support {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-8) var(--sp-16) var(--sp-8) var(--sp-8);
  border-radius: var(--radius-s);
  background: var(--c-brand-500);
}
.mnav-support__avatar {
  flex: none;
  width: 88px;
  height: 96px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--c-white-20);
}
.mnav-support__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mnav-support__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1 1 auto;
  min-width: 0;
}
.mnav-support__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--c-white-70);
}
.mnav-support__title {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--c-white);
}
.mnav-support__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-natural-900);
  color: var(--c-white);
}
.mnav-support__icon svg {
  width: 16px;
  height: 16px;
}

/* Chip (UrzÄ…dzenia / Wybrana kategoria) */
.mnav__chip {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--c-natural-200);
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--c-natural-500);
}

/* Groups list */
.mnav__groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.mnav-group {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  width: 100%;
  min-height: 66px;
  padding: 12px;
  text-align: left;
  border-radius: 20px;
  border: 0.9px solid var(--c-white);
  background: var(--c-natural-50);
  transition: background var(--transition), border-color var(--transition);
}
.mnav-group:active {
  background: var(--c-white);
}
.mnav-group__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-white);
  color: var(--c-natural-500);
}
.mnav-group__icon svg {
  width: 20px;
  height: 20px;
}
.mnav-group__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  flex: 1 1 auto;
}
.mnav-group__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
}
.mnav-group__sub {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: var(--lh-heading);
  color: var(--c-natural-500);
}
.mnav-group__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--c-natural-500);
}
.mnav-group__arrow svg {
  width: 16px;
  height: 16px;
}

/* Devices panel */
.mnav__devwrap {
  flex: 1 1 auto;
}
.mnav-devpanel {
  display: none;
  flex-direction: column;
  gap: var(--sp-16);
}
.mnav-devpanel.is-active {
  display: flex;
}
.mnav-dev__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 28px;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-natural-900);
}
.mnav-dev__sub {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
}
.mnav-devices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mnav-device {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 16px 0;
  border-bottom: 1px solid var(--c-natural-200);
}
.mnav-device__dot {
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: var(--c-natural-900);
}
.mnav-device a {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--c-natural-900);
}
.mnav-devices__empty {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body-m);
  color: var(--c-natural-500);
}

@media (max-width: 1024px) {
  .navbar__inner {
    max-width: 100%;
    padding-inline: var(--sp-container-pad);
  }
  .navbar__logo {
    width: 150px;
    height: 36.2px;
  }
  .navbar__logo img {
    height: 73.1px;
  }
  .navbar__logo .lg-full {
    width: 142.5px;
  }
  .navbar__logo .lg-ring {
    width: 79px;
  }
  .navbar__actions {
    gap: 8px;
  }
  .navbar__actions .btn {
    display: none;
  }
  .navbar__toggle {
    display: inline-flex;
  }
  .navbar__menu {
    display: none;
  }
  .mnav {
    display: block;
  }
  .hero__actions {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  position: relative;
  background: var(--c-natural-900);
  color: var(--c-white-50);
  overflow: hidden;
}
.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
.footer__main {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-48);
  max-width: var(--layout-full);
  margin-inline: auto;
  width: 100%;
  padding: 0 0 32px;
}
.footer__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-32);
  max-width: 988px;
  min-height: 528px;
  padding-left: var(--sp-section-pad);
  padding-top: var(--sp-section-pad);
  flex: 1;
}
.footer__logo {
  position: relative;
  width: 205.1px;
  height: 49.5px;
  overflow: hidden;
  display: block;
}
.footer__logo img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
}
.footer__logo .lg-full {
  width: 195.1px;
}
.footer__logo .lg-ring {
  width: 108.2px;
}
.footer__headline {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -1.8px;
  color: var(--c-white);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
}
.footer__right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 528px;
  padding-top: var(--sp-section-pad);
  flex: 1;
  align-items: flex-start;
  align-self: stretch;
}
.footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
}
.footer__social .btn--link {
  font-size: var(--fs-link-l);
  line-height: 1.2;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: var(--fw-regular);
  gap: 10px;
}
@media (hover: hover) {
  .footer__social .btn--link:hover {
    color: var(--c-brand-500);
  }
  .footer__social .btn--link:hover .social__arrow {
    width: 16px;
    opacity: 1;
    transform: translateX(0);
  }
}
.footer__social .btn--link:active {
  color: var(--c-brand-500);
}
.social__arrow {
  flex: none;
  width: 0;
  height: 16px;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: width 220ms ease, opacity 180ms ease, transform 220ms ease;
}
.footer__social .btn--link:focus-visible .social__arrow {
  width: 16px;
  opacity: 1;
  transform: translateX(0);
}
.footer__eu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-16);
}
.footer__eu-logo {
  display: block;
  object-fit: contain;
  flex: none;
}
.footer__eu-logo--funds {
  width: 180px;
  height: 100px;
}
.footer__eu-logo--eu {
  width: 180px;
  height: 40px;
}
.footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  max-width: var(--layout-full);
  margin-inline: auto;
  width: 100%;
  height: 64px;
  padding: 1px var(--sp-section-pad) 0;
  border-top: 1px solid var(--c-white-10);
  font-family: var(--font-text);
  font-size: var(--fs-body-s);
  color: var(--c-white-50);
}
.footer__legal {
  display: flex;
  gap: var(--sp-32);
}
.footer__legal a {
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  color: var(--c-white-50);
}
@media (hover: hover) {
  .footer__legal a:hover {
    color: #fff;
  }
}
@media (max-width: 1024px) {
  .footer__main {
    flex-direction: column;
    padding: 0 var(--sp-container-pad) var(--sp-container-pad);
    gap: var(--sp-40);
  }
  .footer__main, .footer__bottom {
    max-width: 100%;
  }
  .footer__left {
    min-height: auto;
    padding-left: 0;
    padding-top: var(--sp-section-pad);
    gap: var(--sp-24);
    max-width: none;
  }
  .footer__logo {
    width: 150px;
    height: 36px;
  }
  .footer__logo img {
    height: 72px;
  }
  .footer__logo .lg-full {
    width: 142.5px;
  }
  .footer__logo .lg-ring {
    width: 79px;
  }
  .footer__headline {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -1.8px;
  }
  .footer__nav {
    flex-direction: column;
  }
  .footer__actions {
    flex-wrap: nowrap;
    gap: var(--sp-16);
  }
  .footer__actions .btn {
    flex: 1 0 0;
    min-width: 0;
    padding: 10px 24px;
    border-width: 1px;
    font-size: var(--fs-btn-m);
    font-weight: var(--fw-regular);
    text-transform: none;
  }
  .footer__right {
    padding-top: 0;
    align-items: center;
    gap: var(--sp-32);
    max-width: none;
  }
  .footer__social {
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-24);
    width: 100%;
  }
  .footer__social .btn--link {
    font-size: var(--fs-link-m);
    letter-spacing: 2px;
  }
  .footer__eu {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--sp-16);
    width: 100%;
  }
  .footer__eu-logo--funds {
    width: 116px;
    height: 64px;
  }
  .footer__eu-logo--eu {
    width: 116px;
    height: 26px;
  }
  .footer__right > .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 33px var(--sp-container-pad) var(--sp-container-pad);
    gap: var(--sp-32);
  }
  .footer__legal {
    order: -1;
    justify-content: space-between;
  }
  .footer__bottom > span {
    text-align: center;
  }
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
  padding: var(--sp-40);
  background: var(--c-white);
  border: 1px solid var(--border-subtle);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.field label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--c-natural-300);
  border-radius: var(--radius-s);
  background: var(--c-white);
  font-size: var(--fs-body-m);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}
.field textarea {
  min-height: 120px;
  resize: vertical;
}
@media (max-width: 560px) {
  .form {
    padding: var(--sp-24);
  }
  .form__row {
    grid-template-columns: 1fr;
  }
}

/* search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
  max-width: 516px;
  padding: 10px 14px;
  background: var(--c-white);
  border: 1px solid var(--c-natural-300);
}
.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: var(--fs-body-m);
}

/* ==========================================================================
   FAQ (accordion)
   ========================================================================== */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.faq__item {
  background: var(--c-natural-50);
  border-radius: 20px;
  overflow: clip;
  border: 1px solid transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .faq__item:hover {
    border-color: var(--c-natural-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
}
.faq__item.is-open {
  border-color: var(--c-natural-300);
}
/* On muted backgrounds, items use white to remain visually distinct */
.section--muted .faq__item {
  background: var(--c-white);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
  padding: var(--sp-24);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
  cursor: pointer;
  background: transparent;
  border: none;
}
.faq__q:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: -2px;
}
.faq__q .faq__sign {
  flex: none;
  width: 14px;
  height: 14px;
  position: relative;
}
.faq__q .faq__sign::before,
.faq__q .faq__sign::after {
  content: "";
  position: absolute;
  background: var(--c-natural-900);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition: transform 240ms ease;
}
.faq__q .faq__sign::before {
  width: 14px;
  height: 2px;
}
.faq__q .faq__sign::after {
  width: 2px;
  height: 14px;
}
.faq__item.is-open .faq__sign::after {
  transform: rotate(90deg);
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.faq__a > div {
  overflow: hidden;
}
.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}
.faq__a p {
  padding: 0 var(--sp-24) var(--sp-24);
  border-top: 1px solid var(--c-natural-300);
  padding-top: var(--sp-24);
  color: var(--c-natural-500);
  font-family: var(--font-heading);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  max-width: var(--layout-content);
}

/* ==========================================================================
   SLIDER (horizontal scroll)
   ========================================================================== */
.slider {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  overflow: visible;
}
.slider__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.slider__track {
  display: flex;
  gap: var(--sp-24);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--sp-32) var(--sp-8);
  scroll-padding-inline: var(--sp-container-pad);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar {
  display: none;
}
.slider__track > * {
  scroll-snap-align: start;
}
.slider__nav {
  display: flex;
  gap: var(--sp-8);
}

/* ==========================================================================
   STICKY CTA (Figma: Contact-box Type=Small / Fixed — node 3008:94069)
   ========================================================================== */
.sticky-cta {
  position: fixed;
  right: var(--sp-24);
  bottom: var(--sp-24);
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding: var(--sp-16) var(--sp-32);
  width: 364px;
  max-width: calc(100vw - 48px);
  background: var(--c-natural-800, #27272a);
  color: var(--c-white);
  border-radius: var(--radius-s);
  box-shadow: 0 4px 11.4px rgba(0,0,0,0.25);
  text-decoration: none;
  transition: box-shadow var(--transition), transform var(--transition), opacity 0.35s ease;
}
.sticky-cta--footer-hidden {
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (min-width: 1025px) {
  .sticky-cta:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    transform: translateY(-2px);
  }
}
.sticky-cta__avatar {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 100000px;
  position: relative;
  background: var(--c-natural-900);
  margin-right: 16px;
}
.sticky-cta__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border-radius: 100000px;
  border: 1px solid var(--c-natural-700);
}
.sticky-cta__pulse {
  position: absolute;
  inset: 0;
  border-radius: 100000px;
  z-index: 0;
  pointer-events: none;
}
.sticky-cta__pulse::before,
.sticky-cta__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 136, 0, 0.6);
  box-shadow: 0 0 12px 4px rgba(255, 136, 0, 0.3);
  opacity: 0;
  animation: pulse-outward 6s ease-out infinite;
}
.sticky-cta__pulse::after {
  animation-delay: 3s;
}
/* Avatar pulse intensifies on hover — desktop only */
@media (hover: hover) and (min-width: 1025px) {
  .sticky-cta:hover .sticky-cta__pulse::before,
  .sticky-cta:hover .sticky-cta__pulse::after {
    border-color: rgba(255, 136, 0, 0.8);
    box-shadow: 0 0 16px 6px rgba(255, 136, 0, 0.45);
  }
}
.sticky-cta:focus-within .sticky-cta__pulse::before,
.sticky-cta:focus-within .sticky-cta__pulse::after {
  border-color: rgba(255, 136, 0, 0.8);
  box-shadow: 0 0 16px 6px rgba(255, 136, 0, 0.45);
}
.sticky-cta__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.sticky-cta__name {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  line-height: var(--lh-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta__role {
  font-size: var(--fs-body-m);
  color: var(--c-white-50);
  line-height: var(--lh-normal);
  /* Long roles wrap onto new lines, capped at 3 lines (then ellipsis). */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Details hidden by default, revealed on hover/focus */
.sticky-cta__details {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: 0;
}
@media (hover: hover) and (min-width: 1025px) {
  .sticky-cta:hover .sticky-cta__details {
    max-height: 200px;
    opacity: 1;
    margin-top: 16px;
  }
}
.sticky-cta:focus-within .sticky-cta__details {
  max-height: 200px;
  opacity: 1;
  margin-top: 16px;
}
.sticky-cta__line {
  width: 100%;
  height: 1px;
  background: var(--c-natural-700);
}
.sticky-cta__row {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.sticky-cta__row svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--c-brand-500);
}
.sticky-cta__row a,
.sticky-cta__row span {
  font-size: var(--fs-body-m);
  color: var(--c-white);
  text-decoration: none;
}
@media (hover: hover) {
  .sticky-cta__row a:hover {
    text-decoration: underline;
  }
}
/* Close button – hidden globally, only used on mobile */
.sticky-cta__close {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: var(--c-white-50, rgba(255,255,255,0.5));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex: none;
  z-index: 1;
}
.sticky-cta__close svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}
@media (hover: hover) and (min-width: 1025px) {
  .sticky-cta__close:hover {
    color: var(--c-white);
  }
}

/* Single Application / Industry: hide floating sticky-cta on desktop only
   (the large specialist card already lives in the right column). */
@media (min-width: 1025px) {
  body.single-application .sticky-cta,
  body.single-industry .sticky-cta {
    display: none;
  }
}

/* ── Tablet + Mobile (≤ 1024px): 58×58 px circle → tap to open ─────── */
@media (max-width: 1024px) {

  /*
   * Closed state: compact circle.
   * NO overflow:hidden on the container — pulse rings animate to scale(2)
   * and must escape the 58px boundary to be visible.
   * Text is hidden via its own max-height:0 / overflow:hidden instead.
   */
  .sticky-cta {
    width: 58px;
    padding: 0;
    border-radius: 29px;         /* exact half of 58 px → clean circle */
    justify-content: center;
    cursor: pointer;
    /* Opening transition — spring easing for a natural "pop" */
    transition:
      width         0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
      border-radius 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
      padding       0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow    var(--transition),
      transform     var(--transition);
  }

  .sticky-cta__avatar {
    margin-right: 0;
    transition: margin 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
  }

  /*
   * Text: clipped via own max-height so it takes 0 height in the flex row,
   * keeping the container at exactly 58px without overflow:hidden.
   * Opens with a slight delay so the container expands first.
   */
  .sticky-cta__text {
    display: flex;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.3s ease 0.12s,
      opacity    0.22s ease 0.18s;
  }

  /* Open state: full card (tablet width) */
  .sticky-cta.is-open {
    width: 320px;
    max-width: calc(100vw - 48px);
    padding: 16px 36px 16px 16px;
    border-radius: var(--radius-s);
    cursor: default;
    justify-content: flex-start;
    /* Closing transition — ease-out, no spring */
    transition:
      width         0.28s cubic-bezier(0.4, 0, 0.2, 1),
      border-radius 0.28s cubic-bezier(0.4, 0, 0.2, 1),
      padding       0.28s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow    var(--transition),
      transform     var(--transition);
  }

  .sticky-cta.is-open .sticky-cta__avatar {
    margin-right: 16px;
  }

  /* Text expands and fades in; on close — collapses before container shrinks */
  .sticky-cta.is-open .sticky-cta__text {
    max-height: 120px;
    opacity: 1;
    transition:
      max-height 0.25s ease,
      opacity    0.15s ease;
  }

  .sticky-cta.is-open .sticky-cta__details {
    max-height: 200px;
    opacity: 1;
    margin-top: 16px;
  }

  .sticky-cta.is-open .sticky-cta__close {
    display: flex;
  }
}

/* ── Mobile only (≤ 560px): tighter positioning and narrower card ──── */
@media (max-width: 560px) {
  .sticky-cta {
    right: var(--sp-12);
    bottom: var(--sp-12);
  }
  .sticky-cta.is-open {
    width: 280px;
    max-width: calc(100vw - 24px);
  }
}

/* ==========================================================================
   LOGO STRIP
   ========================================================================== */
.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-48);
  padding-block: var(--sp-32);
}
.logo-strip span {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--c-natural-400);
  filter: grayscale(1);
  transition: color var(--transition), filter var(--transition);
}
@media (hover: hover) {
  .logo-strip span:hover {
    color: var(--c-natural-700);
    filter: none;
  }
}

/* ==========================================================================
   HERO / SECTION HEADER
   ========================================================================== */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: var(--sp-textwrap-max);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}
.breadcrumb a {
  color: var(--c-brand-600);
}
@media (hover: hover) {
  .breadcrumb a:hover {
    color: var(--c-brand-600);
  }
}
.breadcrumb span {
  color: var(--c-natural-300);
}

/* ==========================================================================
   HOMEPAGE HERO
   ========================================================================== */
.hero {
  background: var(--c-natural-100);
  padding-block: var(--sp-section-pad);
}
.hero__container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-container-gap);
}
.hero__row--top {
  display: flex;
  gap: var(--sp-container-gap);
  align-items: flex-end;
}
.hero__title {
  flex: 1 1 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-natural-900);
  margin: 0;
}
.hero__intro {
  flex: 0 0 515px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-action-gap, 16px);
}
.hero__lead {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 0;
}
.hero__row--media {
  display: flex;
  gap: var(--sp-16);
  align-items: stretch;
  transform: translateZ(0);
}
.hero__media--lab {
  flex: 1 1 0;
  height: 500px;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.hero__media--lab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.hero__people {
  position: relative;
  flex: 1 1 auto;
  min-height: 336px;
  border-radius: var(--radius-l);
  overflow: hidden;
  background-color: #18181b;
  background-image: linear-gradient(
    59deg,
    rgba(52, 52, 59, 0.5) 0%,
    rgba(13, 13, 15, 0.5) 100%
  );
}
.hero__people-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: hard-light;
  pointer-events: none;
}
.hero__people-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__people-anim svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.hero__people-blob {
  position: absolute;
  left: 50%;
  top: calc(50% + 80px);
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.hero__people-blob img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero__people-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* purple promo box */
.promo-box {
  position: relative;
  display: flex;
  gap: var(--sp-textwrap-gap);
  align-items: center;
  overflow: hidden;
  padding: var(--sp-20) var(--sp-32);
  border-radius: var(--radius-l);
  background: var(--c-purple-500);
  min-height: 148px;
  transition: background var(--transition);
}
@media (hover: hover) {
  .promo-box:hover {
    background: var(--c-purple-950);
  }
}
.promo-box__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
.promo-box__thumb {
  position: relative;
  flex: none;
  width: 108px;
  height: 108px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--c-natural-200);
}
.promo-box__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 450ms ease;
}
@media (hover: hover) {
  .promo-box:hover .promo-box__thumb img {
    transform: scale(1.08);
  }
}
.promo-box__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: 388px;
}
.promo-box__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-white);
  margin: 0;
}
.promo-box__text {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-50);
  margin: 0;
}
.promo-box__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  text-decoration: underline;
  color: var(--c-purple-950, #2d0d42);
  transition: color var(--transition);
}
.promo-box__link svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) {
  .promo-box:hover .promo-box__link {
  color: var(--c-purple-500);
}
}


@media (max-width: 1024px) {
  .hero__row--top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-div-gap);
  }
  .hero__intro {
    flex-basis: auto;
  }
  .hero__row--media {
    flex-direction: column;
  }
  .hero__media--lab {
    flex: none;
    height: 500px;
  }
  .hero__col {
    flex-direction: row;
  }
  .hero__people {
    min-height: 148px;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .hero .promo-box {
    flex: 1 1 0;
    min-height: 148px;
    min-width: 0;
    overflow: hidden;
  }
}
@media (max-width: 560px) {
  .hero__actions {
    flex-direction: column;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero__media--lab {
    height: 280px;
  }
  .hero__col {
    flex-direction: column;
  }
  .hero__people {
    min-height: 142px;
    flex: none;
  }
  .hero .promo-box {
    min-height: auto;
    flex: none;
    padding: var(--sp-16);
  }
}

/* ==========================================================================
   HOMEPAGE — DEVICES SECTION (dark, tabbed)
   ========================================================================== */
.devices {
  position: relative;
  overflow: clip;
  background: #18181b;
  color: var(--c-white);
  padding-block: var(--sp-section-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-section-gap);
}
.devices__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.devices__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(65.54deg, rgba(52, 52, 59, 0.5) 0.46%, rgba(13, 13, 15, 0.5) 100%);
  z-index: 1;
}
.devices__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #17171a 0%, #17171a 53.32%, rgba(23, 23, 26, 0) 100%);
  z-index: 5;
}
.devices__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: hard-light;
  z-index: 0;
}
.devices__lines {
  position: absolute;
  top: 0;
  right: 0;
  width: 1480px;
  height: 1053px;
  max-width: none;
  object-fit: fill;
  mix-blend-mode: soft-light;
  opacity: 1;
  z-index: 2;
}
.devices__blob {
  position: absolute;
  top: 0;
  right: 0;
  width: 726px;
  height: 581px;
  max-width: none;
  object-fit: fill;
  mix-blend-mode: lighten;
  z-index: 3;
}
.devices__people {
  position: absolute;
  top: -198px;
  right: -111px;
  width: 1113px;
  height: 747px;
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 4;
}
.devices__container {
  position: relative;
  z-index: 10;
  max-width: var(--layout-container);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--sp-container-pad);
}
.devices__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap, 32px);
  align-items: flex-start;
}
.devices__title {
  max-width: var(--layout-narrow);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: #fff;
  margin: 0;
}
.devices__lead {
  max-width: var(--layout-narrow);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-white-80);
  margin: 0;
}
.devices__content {
  position: relative;
  z-index: 10;
  max-width: var(--layout-container);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--sp-container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-container-gap, 64px);
}
.devices__filters {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  padding-bottom: var(--sp-16);
  padding-inline: var(--sp-container-pad);
  margin-inline: calc(-1 * var(--sp-container-pad));
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.devices__filters::-webkit-scrollbar {
  height: 4px;
}
.devices__filters::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
}
.dev-tab {
  flex: 0 0 408px;
  display: flex;
  gap: var(--sp-16);
  align-items: center;
  height: 104px;
  padding: var(--sp-24) 36px;
  border-radius: var(--radius-l);
  background: var(--c-white-5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  text-align: left;
  color: #fff;
  cursor: pointer;
  transition: border-color var(--transition);
}
@media (hover: hover) {
  .dev-tab:hover {
    border-color: rgba(255, 255, 255, 0.4);
  }
}
.dev-tab.is-active {
  border-color: var(--c-brand-500);
}
.dev-tab__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--c-brand-500);
  color: #fff;
}
.dev-tab__icon svg {
  width: 20px;
  height: 20px;
}
.dev-tab__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.dev-tab__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: #fff;
}
.dev-tab.is-active .dev-tab__title {
  color: var(--c-brand-500);
}
.dev-tab__sub {
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-white-60);
}
.devices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
}
.devices__grid[data-dev-panel] {
  display: none;
}
.devices__grid[data-dev-panel].is-active {
  display: grid;
}
.dev-card {
  display: flex;
  gap: var(--sp-12);
  align-items: flex-start;
}
.dev-card > span:last-child {
  display: flex;
  flex-direction: column;
}
.dev-card__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: #fff;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .dev-card:hover .dev-card__arrow {
    transform: translateX(3px);
    color: var(--c-brand-500);
  }
}
.dev-card__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: #fff;
  margin: 0;
  transition: color var(--transition);
}
@media (hover: hover) {
  .dev-card:hover .dev-card__title {
    color: var(--c-brand-500);
  }
}
.dev-card__desc {
  display: block;
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 4px 0 0;
}
@media (max-width: 1024px) {
  .devices__bg {
    display: none;
  }
  .devices__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dev-tab {
    flex-basis: 320px;
  }
}
@media (max-width: 560px) {
  .devices {
    overflow: visible;
  }
  .devices__filters {
    position: sticky;
    top: 66px;
    z-index: 20;
    background: #18181b;
    margin-inline: calc(-1 * var(--sp-container-pad));
    padding-inline: var(--sp-container-pad);
  }
  .devices__grid {
    grid-template-columns: 1fr;
  }
  .dev-tab {
    flex-basis: 278px;
    height: 93px;
    padding: 20px;
  }
}

/* ==========================================================================
   HOMEPAGE — "DLACZEGO" SLIDER (purple cards)
   ========================================================================== */
.why {
  background: #fff;
  padding-block: var(--sp-section-pad);
  overflow-x: clip;
  overflow-y: visible;
}
.why__container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-container-gap, 64px);
  overflow: visible;
}
.why__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
}
.why__intro {
  max-width: var(--layout-content);
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
}
.why__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: #000;
  margin: 0;
}
.why__lead {
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
}
.why__nav {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}
.slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 1px solid var(--c-natural-900);
  background: #fff;
  color: var(--c-natural-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) {
  .slider-arrow:hover {
    background: var(--c-natural-900);
    color: #fff;
  }
}
.slider-arrow:disabled,
.slider-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.slider-arrow svg {
  width: 20px;
  height: 20px;
}
.why__track {
  display: flex;
  gap: var(--sp-24);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  height: auto;
  /* padding-block-start >= translateY(32px) prevents top clipping */
  /* padding-block-end >= shadow offset(28)+blur(48) - translateY(32) = 44px prevents bottom clipping */
  padding-block: var(--sp-40) 80px;
  /* Full-viewport width so cards on the right are not clipped */
  width: 100vw;
  margin-left: calc((100vw - 100%) / -2);
  /* Align first card with the container content edge on all screen sizes */
  padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  /* Right margin so last card has breathing room */
  padding-inline-end: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  scroll-padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
}
.why__track::-webkit-scrollbar {
  display: none;
}
/* On touch devices the hover-lift + shadow never fires, so the generous
   padding-block-end is not needed — reduce it to match the top side. */
@media (hover: none) {
  .why__track,
  .proc__track,
  .mft-cards__track {
    padding-block-end: var(--sp-16);
  }
}

/* ==========================================================================
   PURPLE CARD — unified card component for all purple sliding card sections
   Used in: .why__track (homepage, MFT-5000) and .proc__track (O nas, Serwis)
   ========================================================================== */
.purple-card {
  flex: none;
  width: 516px;
  max-width: 85vw;
  scroll-snap-align: start;
  background: var(--c-purple-500);
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad) var(--sp-div-gap);
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: flex-start;
  transform: translateY(0);
  transition: background 220ms ease, transform 260ms ease, box-shadow 260ms ease;
}
@media (hover: hover) {
  .purple-card:hover {
    background: var(--c-purple-600);
    transform: translateY(-32px);
    box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
  }
}
.purple-card:focus-within {
  background: var(--c-purple-600);
  transform: translateY(-32px);
  box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
}
.purple-card__badge {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-natural-900);
  flex: none;
}
.purple-card__badge svg {
  width: 28px;
  height: 28px;
}
.purple-card__badge--num {
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  color: var(--c-purple-900);
}
.purple-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
}
.why--device .purple-card__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
  margin: 0;
}
.why--device .why__top { justify-content: flex-end; }
.why--device .why__container { gap: var(--sp-16); }
.why--device { padding-block-start: 0; }
/* padding-block-start inherited from .why__track (var(--sp-40)) — keeps room for translateY(-32px) hover lift */
.purple-card__text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white-70);
  margin: 0;
}
@media (max-width: 560px) {
  .purple-card {
    width: 328px;
    max-width: 85vw;
    border-radius: 40px;
    padding: var(--sp-24);
    min-height: 288px;
  }
  .why__top {
    flex-direction: column;
    align-items: flex-start;
  }
  .why__nav {
    display: none;
  }
  .why__track {
    gap: 8px;
    padding-block: 0;
  }
}

/* ==========================================================================
   HOMEPAGE — EVENT SECTION (dark gradient banner)
   ========================================================================== */
.event {
  background: var(--c-natural-50);
  padding-block: var(--sp-section-pad);
}
.event__container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
}
.event .event-card {
  position: relative;
  display: flex;
  gap: var(--sp-div-gap);
  align-items: center;
  padding: var(--sp-div-gap);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(to bottom, #2e2e32, #18181b);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .event .event-card:hover {
    border-color: rgba(247, 148, 29, 0.65);
    box-shadow: 0 24px 60px rgba(24, 24, 27, 0.22);
  }
}
.event .event-card__liner {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 1240px;
  height: 418px;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: difference;
  pointer-events: none;
}
.event .event-card__poster {
  position: relative;
  flex: none;
  width: 480px;
  height: 354px;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.event .event-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
@media (hover: hover) {
  .event .event-card:hover .event-card__poster img {
    transform: scale(1.04);
  }
}
.event .event-card__content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  align-items: flex-start;
  min-width: 0;
}
.event-badge {
  background: var(--c-purple-500);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  padding: var(--sp-4) var(--sp-12);
  border-radius: 12px;
}
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  padding-top: var(--sp-16);
}
.event-meta__item {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  color: var(--c-natural-400);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}
.event-meta__item svg {
  width: 16px;
  height: 16px;
}
.event .event-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: #fff;
  margin: 0;
}
.event .event-card__text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event .event-card__action {
  padding-top: 16px;
}
@media (max-width: 1024px) {
  .event .event-card {
    flex-direction: column;
    align-items: stretch;
  }
  .event .event-card__poster {
    width: 100%;
    height: auto;
    aspect-ratio: 480 / 354;
  }
}

/* ==========================================================================
   HOMEPAGE — GRID SECTION (orange service box + 2 image cards)
   ========================================================================== */
.grid-sec {
  background: #fff;
  padding-block: var(--sp-section-pad);
}
.grid-sec__container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
}
.grid-sec__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-div-gap);
}
.service-box {
  grid-column: 1 / span 2;
  position: relative;
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad);
  overflow: hidden;
  background: var(--c-brand-600);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .service-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(234, 121, 14, 0.35);
  }
}
.service-box__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}
.service-box__cols {
  position: relative;
  display: flex;
  gap: var(--sp-container-gap);
  align-items: center;
}
.service-box__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  min-width: 0;
}
.service-box__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
  max-width: var(--layout-content);
}
.service-box__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: #fff;
  margin: 0;
}
.service-box__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-white-80);
  margin: 0;
}
.service-features {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: var(--sp-24);
  width: 528px;
  max-width: 100%;
  border-radius: var(--radius-s);
  list-style: none;
}
.service-features::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  background: rgba(247, 148, 29, 0.35);
  z-index: -1;
  pointer-events: none;
  transition: inset 400ms ease, border-radius 400ms ease, background 400ms ease;
}
.service-feature {
  display: flex;
  gap: var(--sp-12);
  align-items: center;
}
.service-feature__icon {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background: var(--c-brand-700);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background var(--transition), color var(--transition);
}
.service-feature__icon svg {
  width: 14px;
  height: 14px;
}
.service-feature__text {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: #fff;
  margin: 0;
}
.service-box__media {
  flex: 1;
  align-self: stretch;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 360px;
}
.service-box__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
@media (hover: hover) {
  .service-box:hover .service-box__media img {
    transform: scale(1.04);
  }
  .service-box:hover .service-features::before {
    inset: 0;
    background: var(--c-brand-500);
    border-radius: var(--radius-l);
  }
  .service-box:hover .service-feature__icon {
    background: #fff;
    color: var(--c-brand-700);
  }
}
.promo-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-div-gap);
  border: 1px solid transparent;
}

/* ── Overlay layers (appear on hover) ────────────────────────────────── */
.promo-card::before,
.promo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
}
/* Black 50% overlay */
.promo-card::before {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
/* Texture overlay (cta-texture.webp) at 50% opacity */
.promo-card::after {
  background: url('../img/cta-texture.webp') center / cover no-repeat;
  z-index: 2;
}
@media (hover: hover) {
  .promo-card:hover::before {
    opacity: 1;
  }
  .promo-card:hover::after {
    opacity: 0.5;
  }
}

/* ── Background image ────────────────────────────────────────────────── */
.promo-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
  z-index: 0;
}

/* ── Glass container ─────────────────────────────────────────────────── */
.promo-card__glass {
  position: relative;
  background: var(--c-natural-900);
  backdrop-filter: blur(29px);
  border-radius: var(--radius-l);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  z-index: 3;
  transition: background 320ms ease;
}
@media (hover: hover) {
  .promo-card:hover .promo-card__glass {
    background: #fff;
  }
}

/* ── Head ────────────────────────────────────────────────────────────── */
.promo-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* ── Title ───────────────────────────────────────────────────────────── */
.promo-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: #fff;
  margin: 0;
  transition: color 320ms ease;
}
@media (hover: hover) {
  .promo-card:hover .promo-card__title {
    color: #0f172b;
  }
}

/* ── Text ────────────────────────────────────────────────────────────── */
.promo-card__text {
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--c-white-80);
  margin: 0;
  transition: color 320ms ease;
}
@media (hover: hover) {
  .promo-card:hover .promo-card__text {
    color: #3f3f46;
  }
}
@media (hover: hover) {
  /* ── Button — invert from white to dark on card hover ────────────────── */
.promo-card:hover .btn--secondary.btn--white {
  border-color: var(--c-natural-900);
  color: var(--c-natural-900);
  background: transparent;
}
}

@media (hover: hover) {
  .promo-card:hover .btn--secondary.btn--white:hover {
  background: var(--c-natural-900);
  border-color: var(--c-natural-900);
  color: var(--c-white);
}
}

@media (max-width: 1024px) {
  .grid-sec__grid {
    grid-template-columns: 1fr;
  }
  .service-box {
    grid-column: 1;
    padding: 24px 16px;
    border-radius: var(--radius-m);
  }
  .service-box__cols {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-div-gap);
  }
  .service-box__title {
    letter-spacing: 0.5px;
  }
  .service-box__head {
    gap: var(--sp-textwrap-gap);
  }
  .service-features {
    padding: var(--sp-16);
    border-radius: var(--radius-s);
  }
  .service-box__media {
    flex: none;
    width: 100%;
    height: 240px;
    border-radius: var(--radius-s);
  }
  .service-box__action {
    width: 100%;
  }
  .service-box__action .btn {
    width: 100%;
    --btn-fs: var(--fs-btn-m);
    --btn-py: 10px;
    --btn-px: 24px;
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: 0;
  }
  .promo-card {
    min-height: 440px;
    border-radius: var(--radius-l);
    padding: 24px 16px;
    border-color: #fff;
  }
  .promo-card__glass {
    border-radius: 20px;
    padding: var(--sp-16);
    gap: var(--sp-20);
  }

  /* ── Mobile: apply hover states by default ─────────────────────────── */
  .service-box {
    transform: translateY(-2px);
    box-shadow: 0 24px 60px rgba(234, 121, 14, 0.35);
  }
  .service-box .service-features::before {
    inset: 0;
    background: rgba(247, 148, 29, 0.35);
    border-radius: var(--radius-s);
  }
  .promo-card::before {
    opacity: 1;
  }
  .promo-card::after {
    opacity: 0.5;
  }
  .promo-card .promo-card__glass {
    background: #fff;
  }
  .promo-card .promo-card__title {
    color: #0f172b;
  }
  .promo-card .promo-card__text {
    color: #3f3f46;
  }
  .promo-card .btn--secondary.btn--white {
    border-color: var(--c-natural-900);
    color: var(--c-natural-900);
    background: transparent;
  }
}

/* ==========================================================================
   HOMEPAGE — CONTACT SECTION (form + intro)
   ========================================================================== */
.contact {
  position: relative;
  background: #fff;
  padding-block: var(--sp-section-pad);
  overflow: hidden;
}
/* Hover state background (texture + gradient) — While hovering, 600ms slow */
.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-natural-50, #f9f9fa);
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
.contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 0%, #fff 93%),
    url('../img/cta-texture.webp') center / cover no-repeat;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .contact:not(:has(.contact__cols--top)):hover::before {
    opacity: 1;
  }
  .contact:not(:has(.contact__cols--top)):hover::after {
    opacity: 0.04;
  }
}
.contact__container {
  position: relative;
  z-index: 1;
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
}
.contact__cols {
  display: flex;
  gap: var(--sp-container-gap);
  align-items: center;
}
.contact__form {
  flex: 1;
  min-width: 0;
  max-width: var(--layout-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
  padding: var(--sp-40) var(--sp-div-gap);
  border: 1px solid var(--c-natural-300);
  border-radius: var(--radius-l);
  background: #fff;
  transition: background 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}
/* Form elevated state on hover (CTA sections only) — 600ms slow ease */
@media (hover: hover) {
  .contact:not(:has(.contact__cols--top)):hover .contact__form {
    background: linear-gradient(130deg, #fff 0%, rgba(255,255,255,0.85) 100%);
    border-color: transparent;
    box-shadow: 0 -14px 250px 0 rgba(31, 32, 51, 0.15);
  }
  .contact:not(:has(.contact__cols--top)):hover .contact__form-title {
    color: var(--c-brand-500);
  }
  .contact:not(:has(.contact__cols--top)):hover .cfield__label {
    color: var(--c-natural-900);
  }
}
.contact__form-title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-natural-900);
  margin: 0;
  transition: color 600ms ease;
}
.contact__fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.contact__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.cfield {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-div-gap);
  align-items: center;
}
.cfield--area {
  align-items: flex-start;
}
.cfield__label {
  flex: none;
  width: 140px;
  font-family: var(--font-heading);
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-600);
  transition: color 600ms ease;
}
.cfield__control {
  flex: 1;
  min-width: 0;
  background: rgba(160, 181, 188, 0.08);
  border: none;
  border-radius: 8px;
  padding: 8px;
  font-family: inherit;
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
}
.cfield__control::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.cfield__control:focus {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 1px;
}
textarea.cfield__control {
  min-height: 103px;
  resize: vertical;
}
.cfield__control--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2318181b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* Custom select dropdown (matches nav-mini style) */
.cselect {
  position: relative;
  flex: 1;
  min-width: 0;
}
.cselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(160, 181, 188, 0.08);
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
  cursor: pointer;
  transition: background var(--transition);
}
@media (hover: hover) {
  .cselect__trigger:hover {
    background: rgba(160, 181, 188, 0.14);
  }
}
.cselect__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cselect__value--placeholder {
  color: var(--c-natural-500);
}
.cselect__chev {
  flex: none;
  width: 12px;
  height: 8px;
  color: var(--c-natural-900);
  transition: transform 200ms ease;
}
.cselect.is-open .cselect__chev {
  transform: rotate(180deg);
}
.cselect__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 8px;
  background: var(--c-white, #fff);
  border: 1px solid var(--c-natural-100);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(24, 24, 27, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 50;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}
.cselect.is-open .cselect__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cselect__option {
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: var(--fs-body-s);
  color: var(--c-natural-900);
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .cselect__option:hover {
    color: var(--c-brand-500);
    background: var(--c-natural-50);
  }
}
.cselect__option[aria-selected="true"] {
  color: var(--c-brand-500);
  font-weight: var(--fw-medium);
}
.contact__file {
  position: relative;
  display: flex;
  gap: var(--sp-8);
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-16);
  border: 1px solid var(--c-natural-300);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
@media (hover: hover) {
  .contact__file:hover {
    border-color: var(--c-brand-500);
    background: var(--c-brand-50);
  }
}
.contact__file:focus-within {
  border-color: var(--c-brand-500);
  background: var(--c-brand-50);
}
.contact__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact__file svg {
  width: 24px;
  height: 24px;
  color: var(--c-natural-900);
  flex: none;
}
.contact__file-text {
  display: flex;
  flex-direction: column;
}
.contact__file-link {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
  text-decoration: underline;
}
.contact__file-hint {
  font-size: var(--fs-body-s);
  line-height: var(--lh-heading);
  color: var(--c-natural-500);
  margin: 0;
}
.contact__file-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--c-natural-500);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
}
.contact__file-remove:hover {
  color: var(--c-natural-900);
  background: var(--c-natural-200);
}
.contact__file--has-file {
  border-color: #067a3a;
  background: rgba(0, 201, 80, 0.08);
}
.contact__file--has-file svg {
  color: #067a3a;
}
.contact__file--has-file .contact__file-link {
  color: var(--c-natural-900);
  text-decoration: none;
  word-break: break-word;
}
.contact__file--has-file .contact__file-hint {
  color: #067a3a;
}
.contact__file--has-file .contact__file-remove {
  display: inline-flex;
}
.contact__file--error {
  border-color: #c81e2a;
  background: rgba(251, 44, 54, 0.08);
}
.contact__file--error svg {
  color: #c81e2a;
}
.contact__file--error .contact__file-hint {
  color: #c81e2a;
}
.contact__consent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  align-items: flex-start;
}
.contact__consent input {
  flex: none;
  margin-top: 2px;
}
.contact__consent label {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
}
.contact__consent a {
  color: #3b82f6;
  text-decoration: underline;
}
.contact__actions {
  display: flex;
  gap: var(--sp-16);
  align-items: center;
}

/* ==========================================================================
   FORM UX — submit gating + animated success/error feedback note
   ========================================================================== */
/* Collapsed until a message is shown (JS) or rendered server-side (no-JS). */
[data-form-note]:empty { display: none; }

.form-feedback {
  display: none;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  padding: 10px var(--sp-16);
  border-radius: var(--radius-s);
  font-family: var(--font-text);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.form-feedback.is-visible {
  display: inline-flex;
  animation: tlFormFeedbackIn 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.form-feedback__icon { display: inline-flex; flex: none; width: 18px; height: 18px; }
.form-feedback__icon svg { width: 100%; height: 100%; display: block; }
.form-feedback__text { min-width: 0; }
.form-feedback--success { background: rgba(0, 201, 80, 0.12); color: #067a3a; }
.form-feedback--error { background: rgba(251, 44, 54, 0.1); color: #c81e2a; }

@keyframes tlFormFeedbackIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .form-feedback.is-visible { animation: none; }
}

/* Submit button stays muted ("grayed") until the form is valid — JS toggles [disabled]. */
.contact__actions .btn[disabled],
.contact__form .btn[type="submit"][disabled],
.event-form .btn[type="submit"][disabled] {
  opacity: 1;
  background: var(--c-natural-200);
  border-color: var(--c-natural-200);
  color: var(--c-natural-500);
  cursor: not-allowed;
  position: relative;
  pointer-events: auto;
}
.contact__actions .btn[disabled]::after,
.contact__form .btn[type="submit"][disabled]::after,
.event-form .btn[type="submit"][disabled]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: var(--radius-s);
  background: var(--c-natural-900);
  color: #fff;
  font-family: var(--font-text);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  transform: translateX(-50%) translateY(4px);
}
.contact__actions .btn[disabled]:hover::after,
.contact__form .btn[type="submit"][disabled]:hover::after,
.event-form .btn[type="submit"][disabled]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* While the request is in flight. */
.contact__form.is-submitting .btn[type="submit"],
.event-form.is-submitting .btn[type="submit"] {
  opacity: 0.85;
  pointer-events: none;
}

/* Live per-field validation errors. */
.required-mark {
  color: #c81e2a;
  font-weight: var(--fw-semibold);
  margin-left: 2px;
}
.field-error {
  display: none;
  /* Force the message onto its own full-width line inside the flex rows
     (.cfield / .event-form__row / consent) so it never shares the row with
     the input and squeezes it into an unusable sliver. */
  flex: 0 0 100%;
  width: 100%;
  font-family: var(--font-text);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: #c81e2a;
  margin-top: 4px;
  /* Wrap long messages instead of overflowing the form container. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.field-error.is-visible {
  display: block;
  animation: tlFieldErrorIn 250ms ease;
}
/* Align the error under the input on horizontal rows (label beside input).
   padding (not margin) keeps the box within its 100% width — box-sizing:
   border-box means the offset stays inside, so the text never overflows. */
@media (min-width: 1025px) {
  .cfield .field-error {
    padding-left: calc(140px + var(--sp-div-gap));
  }
}
@media (min-width: 561px) and (max-width: 1024px) {
  .contact--device .cfield .field-error {
    padding-left: calc(140px + var(--sp-div-gap));
  }
}
@media (min-width: 641px) {
  .event-form__row .field-error {
    padding-left: calc(140px + var(--sp-div-gap));
  }
}
.cfield__control.is-invalid,
.event-form__input.is-invalid,
.checkbox.is-invalid {
  border-color: #c81e2a;
}
@keyframes tlFieldErrorIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .field-error.is-visible { animation: none; }
}

.contact__intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
  max-width: var(--layout-content);
}
.contact__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
  margin: 0;
}
.contact__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 0;
}

/* ---------- Contact — device variant (form + sales image) ---------- */
.contact--device { background: #fff; }
.contact--device::before,
.contact--device::after { display: none; }
.contact--device .contact__container { position: relative; }
.contact__device-card {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--c-brand-500);
  padding: var(--sp-section-pad);
  min-height: 720px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__device-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  background: url('../img/cta-texture.webp') center / cover no-repeat;
  opacity: 0.15;
  pointer-events: none;
}
.contact__cols--device {
  position: relative;
  align-items: stretch;
  gap: var(--sp-div-gap);
  z-index: 1;
}
.contact--device .contact__form {
  flex: 1;
  border-color: transparent;
  box-shadow: none;
  background: linear-gradient(129deg, #fff 0%, rgba(255,255,255,0.85) 100%);
  transition: background 0.3s ease;
}
@media (hover: hover) {
  .contact__device-card:hover .contact__form {
    background: #fff;
  }
}
.contact__sales {
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--c-brand-100);
  overflow: hidden;
}
.contact__sales-logo {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 205px;
  height: auto;
  z-index: 3;
}
.contact__sales-sygnet {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 544px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}
.contact__sales-photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 415px;
  height: 636px;
  z-index: 2;
  object-fit: cover;
  object-position: center 25%;
}

@media (max-width: 1024px) {
  .contact--device .contact__device-card {
    padding: var(--sp-24);
    border-radius: var(--radius-l);
    min-height: auto;
  }
  .contact--device .contact__device-card::before { border-radius: var(--radius-l); }
  .contact--device .contact__cols--device {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-16);
  }
  .contact--device .contact__sales {
    order: -1;
    flex: none;
    height: 460px;
    min-height: unset;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.8);
  }
  .contact--device .contact__sales-logo { width: 205px; }
  .contact--device .contact__sales-sygnet {
    width: 540px;
    height: 538px;
    left: 98px;
    bottom: auto;
    top: 166px;
    transform: none;
  }
  .contact--device .contact__sales-photo { width: 239px; height: 365px; }

  /* Device variant: keep form labels horizontal on tablet */
  .contact--device .cfield {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-div-gap);
  }
  .contact--device .cfield--area {
    align-items: flex-start;
  }
  .contact--device .cfield__label {
    width: 140px;
  }
  /* Override general :has(.is-revealed) orange title — device tablet keeps dark title */
  .contact.contact--device .contact__form .contact__form-title {
    color: var(--c-natural-900);
  }
}

@media (max-width: 560px) {
  .contact--device .contact__device-card {
    padding: var(--sp-16);
    border-radius: var(--radius-l);
    min-height: 720px;
  }
  .contact--device .contact__cols--device {
    gap: var(--sp-16);
  }
  .contact--device .contact__sales {
    height: 265px;
    border-radius: 24px;
  }
  .contact--device .contact__sales-logo { width: 133px; top: 11px; }
  .contact--device .contact__sales-sygnet {
    width: 334px;
    height: 311px;
    left: -4px;
    bottom: auto;
    top: 94px;
    transform: none;
  }
  .contact--device .contact__sales-photo { width: 133px; height: 204px; }
  .contact--device .contact__form {
    padding: var(--sp-24) var(--sp-16);
    border-radius: 24px;
    gap: var(--sp-div-gap);
  }
  .contact.contact--device .contact__form .contact__form-title {
    color: var(--c-brand-500);
  }
  .contact--device .contact__inputs {
    gap: var(--sp-16);
  }
  .contact--device .cfield {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .contact--device .cfield--area {
    align-items: stretch;
  }
  .contact--device .cfield__label {
    width: auto;
    font-size: var(--fs-body-m);
    color: var(--c-natural-900);
  }
  .contact--device .contact__actions .btn {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .contact__cols {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .contact__form {
    max-width: 100%;
  }
  .cfield {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .cfield--area {
    align-items: stretch;
  }
  .cfield__label {
    width: auto;
  }

  /* ── Mobile: apply hover state when form scrolls into view ─────────── */
  .contact:has(.contact__form.is-revealed)::before {
    opacity: 1;
  }
  .contact:has(.contact__form.is-revealed)::after {
    opacity: 0.04;
  }
  .contact:has(.contact__form.is-revealed) .contact__form {
    background: linear-gradient(130deg, #fff 0%, rgba(255,255,255,0.85) 100%);
    border-color: transparent;
    box-shadow: 0 -14px 250px 0 rgba(31, 32, 51, 0.15);
  }
  .contact:has(.contact__form.is-revealed) .contact__form-title {
    color: var(--c-brand-500);
  }
  .contact:has(.contact__form.is-revealed) .cfield__label {
    color: var(--c-natural-900);
  }
}
/* Device variant overrides — must follow general :has() rules for cascade */
@media (max-width: 1024px) {
  .contact.contact--device .contact__form .contact__form-title {
    color: var(--c-natural-900);
  }
}
@media (max-width: 560px) {
  .contact.contact--device .contact__form .contact__form-title {
    color: var(--c-brand-500);
  }
}

/* ==========================================================================
   HOMEPAGE — PARTNERS (logo marquee)
   ========================================================================== */
.partners {
  background: #fff;
  padding-block: var(--sp-section-pad);
}
.partners__container {
  max-width: var(--layout-container);
  margin-inline: auto;
  padding-inline: var(--sp-container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: center;
}
.partners__label {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: #0a0a0a;
  text-align: center;
  margin: 0;
}
.partners__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  display: flex;
  gap: var(--sp-container-gap);
  align-items: center;
  width: max-content;
  animation: partners-scroll 32s linear infinite;
}
@media (hover: hover) {
  .partners__viewport:hover .partners__track {
    animation-play-state: paused;
  }
}
.partners__logo {
  flex: none;
  width: auto;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
/* Uniwersytet Warszawski crest is taller in the Figma design (65px) */
.partners__logo[alt*="Uniwersytet"],
.partners__logo[src*="partner-uw"] {
  max-height: 60px;
}
@media (hover: hover) {
  .partners__logo:hover {
    filter: grayscale(0);
    opacity: 1;
  }
}
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

/* ==========================================================================
   PAGE HERO — dark hero with breadcrumb + right-side image
   (reusable across all inner pages)
   ========================================================================== */
.page-hero {
  position: relative;
  background: var(--c-natural-900);
  overflow: hidden;
  padding-block: var(--sp-section-pad);
  min-height: 850px;
  display: flex;
  align-items: center;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero__img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(62vw, 917px);
  object-fit: cover;
  object-position: right center;
}
.page-hero__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(62vw, 917px);
  background: linear-gradient(90deg, var(--c-natural-900) 0%, rgba(24, 24, 27, 0) 100%);
}
.page-hero__sygnet-frame {
  position: absolute;
  bottom: 0;
  left: -100px;
  width: 882px;
  height: 686px;
  pointer-events: none;
}
.page-hero__vector {
  position: absolute;
  right: 0;
  top: 0;
  width: 983px;
  height: 981px;
  max-width: none;
  object-fit: fill;
  opacity: 0.1;
  mix-blend-mode: soft-light;
}
.page-hero__container {
  position: relative;
  width: 100%;
  max-width: calc(var(--layout-container) + 2 * var(--sp-section-pad));
  margin-inline: auto;
  padding-inline: var(--sp-section-pad);
}
.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  align-items: flex-start;
  max-width: var(--layout-narrow);
}
.page-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-white);
}
.page-hero__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white-80);
}
.page-hero__lead strong {
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--c-white-60);
  font-weight: var(--fw-regular);
  transition: color var(--transition);
}
@media (hover: hover) {
  .breadcrumb a:hover {
    color: var(--c-white);
  }
}
.breadcrumb .breadcrumb__sep {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--c-white-60);
  align-items: center;
  justify-content: center;
}
.breadcrumb .breadcrumb__current {
  color: var(--c-brand-500);
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   ABOUT GRID — image trio + text
   ========================================================================== */
.about {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.about__cols {
  display: flex;
  gap: var(--sp-container-gap);
  align-items: center;
}
.about__media {
  display: flex;
  gap: var(--sp-8);
  flex: 1 1 0;
  min-width: 0;
  height: 487px;
}
.about__media-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  flex: 1 1 0;
  min-width: 0;
}
.about__img {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-m);
}
.about__img--top {
  height: 184px;
  flex: none;
  overflow: hidden;
}
.about__img--fill {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}
.about__img--tall {
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  flex: 1 1 0;
}
.about__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
.about__p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.about__p--bold {
  font-weight: var(--fw-bold);
  color: var(--c-natural-700);
}

/* ==========================================================================
   PROCESS SLIDER — numbered purple cards + CTA card
   (reuses [data-slider] + .slider__track mechanics)
   ========================================================================== */
.proc {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
  overflow: visible;
}
.proc__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-bottom: var(--sp-8);
}
.proc__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
  max-width: var(--layout-content);
}
.proc__nav {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}
.proc__track {
  display: flex;
  gap: var(--sp-24);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* padding-block-start >= translateY(32px) prevents hover clipping */
  padding-block: 40px 60px;
  /* Full-viewport width so cards are never clipped on wide screens */
  width: 100vw;
  margin-left: calc((100vw - 100%) / -2);
  padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  padding-inline-end: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  scroll-padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  scrollbar-width: none;
}
.proc__track::-webkit-scrollbar { display: none; }
/* .proc-card is now the unified .purple-card component — see PURPLE CARD section above */
.proc-card {
  flex: none;
  width: 516px;
  max-width: 85vw;
  scroll-snap-align: start;
  background: var(--c-purple-500);
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad) var(--sp-div-gap);
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: flex-start;
  transform: translateY(0);
  transition: background 220ms ease, transform 260ms ease, box-shadow 260ms ease;
}.proc-card:focus-within {
  background: var(--c-purple-600);
  transform: translateY(-32px);
  box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
}

@media (hover: hover) {
  .proc-card:hover {
  background: var(--c-purple-600);
  transform: translateY(-32px);
  box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
}
}

.proc-card__num {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  color: var(--c-purple-900);
  flex: none;
}
.proc-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
}
.proc-card__text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white-70);
}
.proc-cta {
  flex: none;
  width: 516px;
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid var(--c-natural-500);
  background: linear-gradient(180deg, #2e2e32, var(--c-natural-900));
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  padding: var(--sp-div-gap);
  transition: border-color var(--transition), background var(--transition),
    transform var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .proc-cta:hover {
    border-color: var(--c-brand-500);
    background: linear-gradient(180deg, #3a3a3f, #1f1f24);
    transform: translateY(-4px);
    box-shadow: 0 24px 48px rgba(24, 24, 27, 0.3);
  }
}
.proc-cta__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: difference;
  pointer-events: none;
}
.proc-cta__content {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  align-items: flex-start;
}
.proc-cta__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
}
.proc-cta__avatar {
  position: relative;
  flex: 1 1 0;
  align-self: stretch;
  border-radius: var(--radius-l);
  background: #1b1b19;
  overflow: hidden;
}
.proc-cta__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   VALUES — dark section + cream value cards
   ========================================================================== */
.values {
  position: relative;
  background: var(--c-natural-900);
  padding-block: var(--sp-section-pad);
  overflow: hidden;
}
.values__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
.values__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-container-gap);
}
.values__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: var(--layout-content);
}
.values__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-white);
}
.values__lead {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-400);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 302px));
  gap: var(--sp-16);
  align-items: end;
  justify-content: space-between;
}
.value-card {
  position: relative;
  background: var(--c-brand-50);
  border-radius: var(--radius-l);
  padding: var(--sp-div-gap);
  height: 420px;
  min-height: 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  justify-content: flex-start;
  overflow: hidden;
  transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.value-card::after {
  content: "";
  position: absolute;
  left: calc(50% + 174.49px);
  top: calc(50% + 174.5px);
  width: 195px;
  height: 195px;
  transform: translate(-50%, -50%);
  background: url("../img/value-card-ellipse.webp") center / 100% 100% no-repeat;
  pointer-events: none;
  transition: left 260ms ease, top 260ms ease, width 260ms ease, height 260ms ease;
}
@media (hover: hover) {
  .value-card:hover {
    background: var(--c-white);
  }
  .value-card:hover::after {
    left: calc(50% + 5.99px);
    top: calc(50% + 6px);
    width: 532px;
    height: 532px;
  }
}
.value-card:focus-within {
  background: var(--c-white);
}
.value-card:focus-within::after {
  left: calc(50% + 5.99px);
  top: calc(50% + 6px);
  width: 532px;
  height: 532px;
}
.value-card__icon {
  width: 56px;
  height: 56px;
  border: 1.8px solid var(--c-natural-900);
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-natural-900);
  flex: none;
  position: relative;
  z-index: 1;
}
.value-card__icon svg,
.value-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.value-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  position: relative;
  z-index: 1;
  width: 100%;
}
.value-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-natural-900);
}
.value-card__text {
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: var(--c-natural-700);
}

/* ==========================================================================
   TIMELINE — vertical history axis
   ========================================================================== */
.timeline {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.timeline__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-container-gap);
}
.timeline__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
.timeline__lead {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.timeline__list {
  position: relative;
  max-width: var(--layout-content);
  margin-inline: auto;
  --timeline-year-w: 280px;
  --timeline-gap: var(--sp-24);
  --timeline-dot: 16px;
  --timeline-axis-x: calc(var(--timeline-year-w) + var(--timeline-gap) + (var(--timeline-dot) / 2));
  --timeline-progress: 0;
}
.timeline__list::before,
.timeline__list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--timeline-axis-x);
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}
.timeline__list::before {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--c-purple-100) 0 8px,
    transparent 8px 16px
  );
}
.timeline__list::after {
  bottom: auto;
  height: 100%;
  background: var(--c-purple-500);
  transform: translateX(-50%) scaleY(var(--timeline-progress));
  transform-origin: top center;
  transition: transform 120ms linear;
}
.tl-row {
  display: grid;
  grid-template-columns: var(--timeline-year-w) var(--timeline-dot) 1fr;
  column-gap: var(--timeline-gap);
  align-items: center;
  padding-bottom: var(--sp-64);
  position: relative;
  z-index: 1;
}
.tl-row:last-child { padding-bottom: 0; }
.tl-row__year {
  text-align: right;
  font-size: var(--fs-h1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-300);
  white-space: nowrap;
  transition: color var(--transition);
}
.tl-row.is-active .tl-row__year { color: var(--c-natural-900); }
.tl-row__axis {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--timeline-dot);
  height: var(--timeline-dot);
}
.tl-row__dot {
  position: relative;
  display: block;
  width: var(--timeline-dot);
  height: var(--timeline-dot);
  border-radius: 100px;
  background: var(--c-purple-300);
  border: 0;
  box-sizing: border-box;
  z-index: 2;
  transition: background var(--transition);
}
.tl-row.is-active .tl-row__dot { background: var(--c-purple-500); }
.tl-row__dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: var(--c-white);
}
.tl-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.tl-row__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-300);
  transition: color var(--transition);
}
.tl-row.is-active .tl-row__title { color: var(--c-natural-900); }
.tl-row__lead {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-300);
  transition: color var(--transition);
}
.tl-row.is-active .tl-row__lead { color: var(--c-natural-700); }
.tl-row__lead strong { font-weight: var(--fw-bold); color: var(--c-natural-300); }
.tl-row.is-active .tl-row__lead strong { color: var(--c-natural-900); }
.tl-row__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.tl-row__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-300);
  transition: color var(--transition);
}
.tl-row.is-active .tl-row__list li { color: var(--c-natural-700); }
.tl-row__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: var(--c-purple-500);
}

/* ==========================================================================
   CTA BOX — orange box with team card
   ========================================================================== */
.cta-sec {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.cta-box {
  position: relative;
  background: transparent;
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad);
  overflow: visible;
  display: flex;
  gap: var(--sp-section-pad);
  align-items: center;
  min-height: 720px;
  isolation: isolate;
}
.cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-brand-500);
  transition: inset 320ms ease, background 320ms ease;
  z-index: 0;
}
.cta-box__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.cta-box__content {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: flex-start;
  z-index: 2;
}
.cta-box__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-white);
}
.cta-box__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white);
  max-width: var(--layout-card);
}
.cta-box .btn {
  position: relative;
  z-index: 2;
}
.cta-box__card {
  position: relative;
  flex: none;
  width: 592px;
  height: 592px;
  background: var(--c-white-80);
  border-radius: var(--radius-xl);
  overflow: hidden;
  z-index: 2;
}
.cta-box__team {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: hover) {
  .cta-box:hover::before {
    inset: -6px;
    background: var(--c-brand-600);
  }
}

/* ==========================================================================
   RESPONSIVE — inner page components
   ========================================================================== */
@media (max-width: 1024px) {
  .about__cols { gap: var(--sp-div-gap); }
  .values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-card {
    min-height: 240px;
  }
  .cta-box { flex-direction: column; }
  .cta-box__card { width: min(592px, 100%); height: auto; aspect-ratio: 1; }
  .page-hero {
    min-height: 850px;
    padding-block: var(--sp-section-pad);
  }
  .page-hero__img {
    width: 69.625%;
    height: 100%;
    object-position: center right;
  }
  .page-hero__cover {
    width: 69.625%;
    height: 100%;
    background: linear-gradient(90deg, var(--c-natural-900) 0%, rgba(24,24,27,0) 100%);
  }
  .page-hero__sygnet-frame {
    bottom: 0;
    left: 0;
    width: 882px;
    height: 686px;
    overflow: hidden;
  }
  .page-hero__vector {
    right: auto;
    left: -101px;
    top: 0;
    width: 983px;
    height: 981px;
    max-width: none;
    object-fit: fill;
    mix-blend-mode: soft-light;
    opacity: 0.1;
  }
}
@media (max-width: 768px) {
  .about__cols { flex-direction: column; }
  .about__media { flex: none; height: 360px; }
  .page-hero__title { font-size: var(--fs-h1); }
  .values__grid {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--sp-16);
    margin-inline: calc(-1 * var(--sp-container-pad));
    padding-inline: var(--sp-container-pad);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
  }
  .values__grid::-webkit-scrollbar {
    display: none;
  }
  .values__grid::after {
    content: "";
    flex: 0 0 var(--sp-container-pad);
  }
  .value-card {
    flex: 0 0 302px;
    height: auto;
    min-height: auto;
    padding: var(--sp-24);
    border-radius: var(--radius-m);
    scroll-snap-align: start;
  }
  .value-card__icon {
    width: 48px;
    height: 48px;
  }
  .value-card__icon svg,
  .value-card__icon img {
    width: 24px;
    height: 24px;
  }
  .proc-card, .proc-cta { width: 300px; }
  .timeline__list {
    --timeline-year-w: 116px;
    --timeline-gap: var(--sp-12);
    --timeline-dot: 16px;
  }
  .tl-row {
    padding-bottom: var(--sp-40);
  }
  .tl-row__year {
    font-size: var(--fs-h3);
    letter-spacing: var(--ls-normal);
  }
  .cta-box {
    padding: var(--sp-div-gap);
    border-radius: var(--radius-l);
    gap: var(--sp-div-gap);
    min-height: auto;
  }
  .cta-box__card { border-radius: var(--radius-l); }
  .cta-box .btn {
    width: 100%;
    --btn-fs: var(--fs-btn-m);
    --btn-py: 10px;
    --btn-px: 24px;
    border-width: 1px;
    font-weight: var(--fw-regular);
    text-transform: none;
    letter-spacing: 0;
  }
  .cta-box .btn__arrow { display: none; }
}
@media (max-width: 560px) {
  .about__media { height: 343px; }
}
@media (max-width: 480px) {
  .page-hero__img {
    width: 100%;
    opacity: 0.25;
    object-position: center center;
  }
  .page-hero__cover {
    width: 100%;
    background: linear-gradient(90deg, var(--c-natural-900) 0%, rgba(24,24,27,0) 100%);
  }
}

/* ==========================================================================
   PAGE HERO — team variant (group photo over orange sygnet)
   ========================================================================== */
.page-hero__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: hard-light;
  pointer-events: none;
}
.page-hero__img-group {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1110px;
  height: 847px;
  overflow: hidden;
  pointer-events: none;
}
.page-hero__sygnet {
  position: absolute;
  top: 0;
  left: 0;
  width: 1304px;
  height: 1302px;
  max-width: none;
  pointer-events: none;
}
.page-hero__team {
  position: absolute;
  left: 101px;
  top: 74px;
  width: 1053px;
  height: 853px;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}
.page-hero--team {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
}

/* Team hero — tablet overrides (Figma node 3212:25015, ≤ 1024px) */
@media (max-width: 1024px) {
  /* Content to top-left: override section's align-items: center */
  .page-hero--team {
    align-items: flex-start;
  }
  /* Override global [class$="__content"] full-width rule — constrain to Figma text-wrapper width */
  .page-hero--team .page-hero__content {
    max-width: 530px;
    width: 100%;
  }
  /* Image group: bottom-right, Figma tablet dimensions */
  .page-hero--team .page-hero__img-group {
    width: 800px;
    height: 847px;
  }
  .page-hero--team .page-hero__sygnet {
    left: 164px;
    top: 346px;
    width: 778px;
    height: 776px;
  }
  .page-hero--team .page-hero__team {
    left: 224px;
    top: 390px;
    width: 628px;   /* 104.39% of Figma container 602px — matches inner-img scale */
    height: 509px;  /* 110.35% of Figma container 461px — floor clipped by group overflow */
  }
}

/* Service page: hero uses one composed background image from Figma asset. */
body[data-page="serwis"] .page-hero--team {
  min-height: 850px;
}
body[data-page="serwis"] .page-hero__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  z-index: 0;
}
body[data-page="serwis"] .page-hero__img-group {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 961px;
  height: 697px;
  overflow: hidden;
  pointer-events: none;
}
body[data-page="serwis"] .page-hero__team {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
body[data-page="serwis"] .page-hero__texture,
body[data-page="serwis"] .page-hero__figure {
  display: none;
}
body[data-page="serwis"] .page-hero__people {
  right: 0;
  bottom: 0;
  width: min(66vw, 980px);
  max-width: none;
  height: 90%;
  justify-content: flex-end;
}
body[data-page="serwis"] .page-hero__content {
  max-width: 560px;
  position: relative;
  z-index: 2;
}

/* Serwis hero -- tablet overrides (Figma node 3245:30200) */
@media (max-width: 1024px) {
  body[data-page="serwis"] .page-hero__title {
    font-size: 60px;
  }
  body[data-page="serwis"] .page-hero__content {
    max-width: 530px;
  }
  body[data-page="serwis"] .page-hero__lead {
    max-width: 427px;
    font-size: 18px;
    line-height: 1.45;
  }
  body[data-page="serwis"] .page-hero__img-group {
    width: 800px;
    height: 491px;
  }
  body[data-page="serwis"] .page-hero__team {
    object-position: right bottom;
  }
}

/* ==========================================================================
   TEAM GRID — personal cards
   ========================================================================== */
.team {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.team__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: var(--layout-content);
  margin-bottom: var(--sp-section-pad);
}
.team__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
.team__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
}
.personal-card {
  background: var(--c-white);
  border-radius: var(--radius-s);
  padding: var(--sp-16);
  box-shadow: 0 0 36px rgba(24, 24, 27, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: center;
  min-width: 0;
}
.personal-card__photo {
  position: relative;
  width: 100%;
  height: 530px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: linear-gradient(77.02465164781474deg, rgb(66, 66, 74) 0.46025%, rgb(47, 47, 53) 100%);
}
.personal-card__sygnet {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  z-index: 1;
}
.personal-card__person {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 105%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  z-index: 2;
}
.personal-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
  width: 100%;
}
.personal-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-12);
}
.personal-card__name {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.personal-card__name h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  letter-spacing: var(--ls-wide);
  color: var(--c-black);
}
.personal-card__role {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-bold);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-brand-500);
  width: 100%;
  white-space: normal;
  word-break: break-word;
}
.personal-card__contact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  align-items: flex-end;
}
.personal-card__email {
  font-size: var(--fs-body-m);
  color: var(--c-black);
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.personal-card__in {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.personal-card__in img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.personal-card__divider {
  height: 1px;
  width: 100%;
  background: var(--c-natural-300);
}
.personal-card__about {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: rgba(0, 0, 0, 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   TEAM PROCESS — 2x2 cross grid with center pulse
   ========================================================================== */
.team-process {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.team-process__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
  text-align: center;
  margin-bottom: 56px;
}
.team-process__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.team-process__grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--c-natural-200);
}
.team-process__grid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--c-natural-200);
}
.team-process__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 100px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.5);
  animation: team-pulse 2.2s ease-out infinite;
}
.team-process__center img { width: 52px; height: 52px; }
@keyframes team-pulse {
  0% { box-shadow: 0 0 0 0 rgba(247, 148, 29, 0.45); }
  70% { box-shadow: 0 0 0 18px rgba(247, 148, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(247, 148, 29, 0); }
}
.point-card {
  display: flex;
  gap: var(--sp-16);
  align-items: flex-start;
  padding: var(--sp-48);
  transition: background var(--transition);
  border-radius: 2px;
}
@media (hover: hover) {
  .point-card:hover {
    background: rgba(247, 148, 29, 0.05);
  }
}
.point-card__num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: var(--c-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-medium);
  color: var(--c-brand-500);
}
.point-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: 6px;
}
.point-card__over {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-natural-400);
}
.point-card__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
@media (max-width: 1024px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personal-card__photo { height: clamp(360px, 48vw, 530px); }
}
@media (max-width: 768px) {
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .personal-card__photo { height: clamp(380px, 90vw, 530px); }
  .page-hero__img-group { opacity: 0.25; }
  .team-process__grid { grid-template-columns: 1fr; }
  .team-process__grid::before { display: none; }
  .point-card { padding: var(--sp-24) 0; }
}
@media (max-width: 480px) {
  .personal-card__top { flex-direction: column; gap: var(--sp-8); }
  .personal-card__contact { align-items: flex-start; }
}

/* ==========================================================================
   PAGE HERO — trio people cutouts (serwis)
   ========================================================================== */
.page-hero__people {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 90%;
  width: 64%;
  max-width: 780px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
.page-hero__people img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
}
.page-hero__people img:nth-child(1) { margin-right: -56px; height: 96%; }
.page-hero__people img:nth-child(2) { height: 88%; z-index: 2; }
.page-hero__people img:nth-child(3) { margin-left: -56px; height: 96%; }

/* ==========================================================================
   SERVICES — sticky title + service list
   ========================================================================== */
.services {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.services__cols {
  display: grid;
  grid-template-columns: 303px 1fr;
  column-gap: var(--sp-container-gap);
  overflow: hidden;
}
.services__title {
  position: sticky;
  top: 96px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
.services__list {
  display: flex;
  flex-direction: column;
}
.service-point {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  border-bottom: 1px solid var(--c-natural-200);
}
.service-point:first-child { padding-top: 0; }
.service-point:last-child { border-bottom: 0; }
.service-point__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-natural-900);
}
.service-point__icon svg {
  width: 28px;
  height: 28px;
}
.service-point__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}

/* ==========================================================================
   SERVICE BANNER — dark globe banner
   ========================================================================== */
.service-banner {
  position: relative;
  background: var(--c-natural-900);
  padding-block: var(--sp-section-pad);
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.service-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, #1a1a18 0%, rgba(26, 26, 24, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.service-banner__video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}
.service-banner__container {
  position: relative;
  z-index: 2;
}
.service-banner__content {
  max-width: 416px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
}
.service-banner__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-white);
}
.service-banner__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white-80);
}
@media (max-width: 1024px) {
  .service-banner__video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ==========================================================================
   CMS GALLERY — tabbed purple card with image gallery
   ========================================================================== */
.cms-gallery {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.cms-gallery__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
  max-width: var(--layout-content);
  margin: 0 auto var(--sp-container-gap);
  text-align: center;
}
.cms-gallery__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
}
.cms-gallery__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.cms-gallery__tabs {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-12);
  margin-bottom: var(--sp-div-gap);
  scrollbar-width: thin;
  scrollbar-color: var(--c-natural-300) transparent;
}
.cms-gallery__tabs::-webkit-scrollbar { height: 4px; }
.cms-gallery__tabs::-webkit-scrollbar-track { background: transparent; }
.cms-gallery__tabs::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }
.cms-tab {
  flex: 0 0 auto;
  background: var(--c-natural-50);
  border: 1px solid var(--c-white);
  border-radius: 20px;
  min-height: 66px;
  padding: var(--sp-12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease;
}
@media (hover: hover) {
  .cms-tab:hover {
    border-color: var(--c-natural-300);
  }
}
.cms-tab__title {
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-600);
  white-space: nowrap;
}
.cms-tab__sub {
  font-size: 12px;
  line-height: 16.5px;
  color: var(--c-natural-500);
  white-space: nowrap;
}
.cms-tab.is-active {
  border-color: var(--c-natural-900);
}
.cms-tab.is-active .cms-tab__title {
  color: var(--c-natural-900);
}
/* Tablet/mobile: full-bleed horizontal scroll */
@media (max-width: 1024px) {
  .cms-gallery__tabs {
    padding-inline: var(--sp-container-pad);
    margin-inline: calc(-1 * var(--sp-container-pad));
  }
}
.cms-card {
  background: var(--c-purple-500);
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad);
  overflow: visible;
  transform: translateY(0);
  transition: background 220ms ease, transform 260ms ease, box-shadow 260ms ease;
}
@media (hover: hover) {
  .cms-card:hover,
  .cms-card:focus-within {
    background: var(--c-purple-600);
    transform: translateY(-32px);
    box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
  }
}
.cms-card:focus-within {
  background: var(--c-purple-600);
  transform: translateY(-32px);
  box-shadow: 0 28px 48px rgba(45, 13, 66, 0.22);
}
.cms-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-bottom: var(--sp-div-gap);
}
.cms-card__text {
  max-width: var(--layout-content);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.cms-card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
}
.cms-card__desc {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-white-70);
}
.cms-card__nav {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}
.cms-card__track {
  display: flex;
  gap: var(--sp-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 8px;
}
.cms-card__track::-webkit-scrollbar { display: none; }
.cms-card__img {
  flex: none;
  width: 516px;
  height: 325px;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.cms-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   SERVICE REALIZATION — tab-based content component for service section
   Contains: header + description + gallery (no hover effects)
   ========================================================================== */
.service-realizations {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.service-realizations__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-bottom: var(--sp-40);
}
.service-realizations__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
  max-width: var(--layout-content);
}
.service-realizations__nav {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}
.service-realization {
  background: var(--c-purple-500);
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
/* Hidden realization panels (tab switching) — needed because .service-realization
   sets display:flex, which otherwise overrides the UA [hidden] rule. */
.service-realization[hidden] {
  display: none;
}
.service-realization__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-div-gap);
}
.service-realization__content {
  flex: 1;
  max-width: var(--layout-content);
}
.service-realization__nav {
  display: flex;
  gap: var(--sp-8);
  flex: none;
}
.service-realization__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
  margin-bottom: var(--sp-20);
}
.service-realization__text {
  font-size: var(--fs-body-m);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.7);
}
.service-realization__gallery {
  display: flex;
  gap: var(--sp-24);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-right: -64px;
  padding-right: 64px;
}
.service-realization__gallery::-webkit-scrollbar { display: none; }
@media (max-width: 1024px) {
  .service-realization__gallery {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    padding-bottom: var(--sp-12);
  }
  .service-realization__gallery::-webkit-scrollbar { display: block; height: 4px; }
  .service-realization__gallery::-webkit-scrollbar-track { background: transparent; }
  .service-realization__gallery::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 100px; }
}
.service-realization__img {
  flex: 0 0 auto;
  width: 516px;
  height: 325px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  scroll-snap-align: start;
  margin-top: var(--sp-32);
}
.service-realization__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .service-realization { padding: var(--sp-40); }
  .service-realization__header { flex-direction: column; }
  .service-realization__gallery { margin-right: -40px; padding-right: 40px; }
  .service-realization__img { width: 300px; height: 200px; border-radius: var(--radius-l); margin-top: 16px; }
}
@media (max-width: 560px) {
  .service-realization { padding: var(--sp-24); border-radius: var(--radius-l); }
  .service-realization__gallery { margin-right: -24px; padding-right: 24px; }
  .service-realization__gallery.slider__track { padding-block: 0 var(--sp-12); }
  .service-realization__img { width: 260px; height: auto; aspect-ratio: 4 / 3; margin-top: 0; }
}

/* ==========================================================================
   CTA SIMPLE — orange box (box-4)
   ========================================================================== */
.cta-simple {
  padding-block: var(--sp-section-pad);
  background: var(--c-white);
}
.cta-simple__box {
  position: relative;
  background: transparent;
  border-radius: var(--radius-xl);
  padding: var(--sp-section-pad);
  overflow: visible;
}
.cta-simple__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-brand-600);
  border-radius: inherit;
  z-index: 0;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .cta-simple__box:hover::before {
    transform: scale(1.02);
  }
}
.cta-simple__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
}
.cta-simple__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: flex-start;
  z-index: 1;
}
.cta-simple__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-textwrap-gap);
  max-width: var(--layout-content);
}
.cta-simple__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-white);
}
.cta-simple__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-white-80);
}

@media (max-width: 1024px) {
  .services__cols { grid-template-columns: 1fr; row-gap: var(--sp-div-gap); }
  .services__title { position: static; }
  .services__title br { display: none; }
  .cms-card { padding: var(--sp-40); border-radius: 40px; }
  .cms-card__img { width: 440px; }
}
@media (max-width: 768px) {
  body[data-page="serwis"] .page-hero--team { min-height: 680px; }
  body[data-page="serwis"] .page-hero__container { padding-inline: 24px; }
  body[data-page="serwis"] .page-hero__title {
    font-size: clamp(42px, 12vw, 56px);
    line-height: 1.04;
  }
  body[data-page="serwis"] .page-hero__people {
    width: min(120vw, 760px);
    opacity: 1;
    right: 0;
    bottom: 0;
  }
  .cms-card__top { flex-direction: column; }
  .cms-card__img { width: 300px; height: 200px; }
  .cta-simple__box { padding: var(--sp-div-gap); border-radius: var(--radius-l); }
  .cta-simple__title { font-size: var(--fs-h3); }
}

/* Serwis hero -- mobile overrides (Figma node 3245:31275) */
@media (max-width: 560px) {
  body[data-page="serwis"] .page-hero--team {
    min-height: 100svh;
    padding-top: 120px;
    padding-bottom: 64px;
  }
  body[data-page="serwis"] .page-hero__container {
    padding-inline: var(--sp-container-pad);
  }
  body[data-page="serwis"] .page-hero__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
  }
  body[data-page="serwis"] .page-hero__lead {
    max-width: 100%;
    line-height: 1.45;
  }
  body[data-page="serwis"] .page-hero__img-group {
    right: auto;
    left: 0;
    width: 100%;
    height: 321px;
    opacity: 1;
  }
  body[data-page="serwis"] .page-hero__team {
    object-fit: cover;
    object-position: center bottom;
  }
}

/* ==========================================================================
   CATALOG HERO — light hero (breadcrumb + title + lead)
   ========================================================================== */
.cat-hero {
  padding-block-start: var(--sp-40);
  padding-block-end: var(--sp-24);
  background: var(--c-white);
}
.cat-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  align-items: flex-start;
}
.cat-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  max-width: var(--layout-content);
}
.cat-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-black);
}
.cat-hero__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.breadcrumb--light a {
  color: rgba(0, 0, 0, 0.5);
  transition: color var(--transition);
}
@media (hover: hover) {
  .breadcrumb--light a:hover {
    color: var(--c-natural-900);
  }
}
.breadcrumb--light .breadcrumb__sep { color: var(--c-natural-400); }

/* ==========================================================================
   DEVICE CATALOG — category sidebar + device card grid
   ========================================================================== */
.device-cat {
  padding-bottom: var(--sp-section-pad);
  background: var(--c-white);
}
.device-cat__cols {
  display: grid;
  grid-template-columns: 388px 1fr;
  gap: var(--sp-div-gap);
  align-items: start;
}
.device-cat__sidebar {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.device-cat__sidebar-title {
  font-size: 12px;
  line-height: 16.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-natural-400);
  padding-inline: 32px;
}
.cat-label {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16);
  border-radius: var(--radius-s);
  cursor: pointer;
  text-align: left;
  background: transparent;
  transition: background var(--transition);
}
@media (hover: hover) {
  .cat-label:hover {
    background: var(--c-natural-50);
  }
}
.cat-label.is-active {
  background: var(--c-natural-50);
}
.cat-label__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--c-natural-100, #f4f4f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-natural-600);
}
.cat-label.is-active .cat-label__icon {
  background: var(--c-brand-500);
  color: var(--c-white);
}
.cat-label__icon svg { width: 22px; height: 22px; }
.cat-label__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 0; }
.cat-label__name {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-natural-900);
}
.cat-label__sub {
  font-size: 12px;
  line-height: 16.5px;
  color: var(--c-natural-500);
}
.cat-label__arrow { flex: none; color: var(--c-natural-400); display: none; }
.cat-label.is-active .cat-label__arrow { display: block; }
.device-cat__labels-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.device-cat__grid {
  align-content: start;
}
.device-cat__panel {
  display: none;
}
.device-cat__panel.is-active {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
  align-content: start;
}
.device-cat__panel.is-active .device-cat__empty {
  grid-column: 1 / -1;
}
.device-cat__empty {
  color: var(--c-natural-400);
  font-size: var(--fs-body-m);
  padding: var(--sp-24);
}
.device-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: var(--sp-24);
  border-radius: var(--radius-s);
  background: var(--c-natural-50);
  transition: background var(--transition);
}
@media (hover: hover) {
  .device-card:hover {
    background: var(--c-natural-100, #f4f4f5);
  }
}
.device-card__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-natural-900);
}
.device-card__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.device-card__name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--c-natural-900);
}
.device-card__desc {
  font-size: var(--fs-body-s);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
}
@media (max-width: 1024px) {
  /* Full-bleed: section, group column and device list span the whole screen */
  .device-cat .container {
    max-width: 100%;
    padding-inline: 0;
  }
  .device-cat__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .device-cat__sidebar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--c-natural-100);
    padding: var(--sp-24) var(--sp-32);
    gap: var(--sp-16);
    overflow: visible;
  }
  .device-cat__sidebar-title {
    padding-inline: 0;
    font-size: 14px;
    color: var(--c-natural-500);
  }
  .device-cat__sidebar .cat-label {
    flex: 0 0 280px;
    padding: var(--sp-8);
    border-radius: var(--radius-s);
    background: var(--c-natural-50);
    border: 1px solid var(--c-white);
  }
  .device-cat__sidebar .cat-label.is-active {
    background: var(--c-natural-50);
    border-color: var(--c-white);
  }
  .device-cat__sidebar .cat-label__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--c-white);
  }
  .device-cat__sidebar .cat-label.is-active .cat-label__icon {
    background: var(--c-brand-500);
    color: var(--c-white);
  }
  .device-cat__sidebar .cat-label__name {
    font-size: var(--fs-body-s);
    font-weight: var(--fw-regular);
    color: var(--c-natural-600);
  }
  .device-cat__sidebar .cat-label.is-active .cat-label__name {
    font-weight: var(--fw-bold);
    color: var(--c-natural-900);
  }
  .device-cat__sidebar .cat-label__arrow {
    display: block;
    width: 16px;
    height: 16px;
  }
  /* Horizontal scrollable category labels (swipe / drag-to-scroll) */
  .device-cat__labels-wrap {
    display: flex;
    flex-direction: row;
    gap: var(--sp-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
    cursor: grab;
    /* break out of sidebar padding so scroll track spans full width */
    margin-inline: calc(-1 * var(--sp-32));
    padding-inline: var(--sp-32);
  }
  .device-cat__labels-wrap.is-dragging { cursor: grabbing; }
  .device-cat__labels-wrap::-webkit-scrollbar { display: none; }

  /* Grid: 3 columns, compact cards */
  .device-cat__grid {
    padding: var(--sp-32);
    background: var(--c-natural-50);
    overflow: hidden;
  }
  .device-cat__panel.is-active {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }
  .device-card {
    padding: var(--sp-16) var(--sp-8);
    border-radius: var(--radius-l);
    gap: var(--sp-12);
    align-items: center;
    overflow: hidden;
    min-width: 0;
    background: var(--c-natural-100);
  }
  .device-card__arrow {
    width: 16px;
    height: 16px;
    margin-top: 0;
    flex-shrink: 0;
  }
  .device-card__body {
    min-width: 0;
  }
  .device-card__name {
    font-size: var(--fs-body-l);
    line-height: var(--lh-heading);
  }
  .device-card__desc {
    font-size: 12px;
    line-height: 16.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cat-hero__title { font-size: var(--fs-h1); }
}
@media (max-width: 768px) {
  .device-cat__panel.is-active { grid-template-columns: 1fr; }
  /* Tighter group buttons; horizontal swipe (drag-to-scroll) on mobile */
  .device-cat__labels-wrap {
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    cursor: grab;
    margin-inline: calc(-1 * var(--sp-32));
    padding-inline: var(--sp-32);
  }
  .device-cat__labels-wrap.is-dragging { cursor: grabbing; }
  .cat-hero__title { font-size: var(--fs-h2); }
}

/* ==========================================================================
   DEVICE GROUP GRID — photo cards (category overline + title + desc)
   ========================================================================== */
.device-grid {
  padding-bottom: var(--sp-section-pad);
  background: var(--c-white);
}
.device-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-16);
}
.device-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-white);
  border-radius: 48px;
  padding: var(--sp-16);
  border: 1px solid transparent;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .device-tile:hover {
    box-shadow: 0 12px 32px rgba(24, 24, 27, 0.08);
    transform: translateY(-4px);
  }
}
.device-tile__img {
  width: 100%;
  height: 256px;
  border-radius: var(--radius-m);
  background: var(--c-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device-tile__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-16) var(--sp-16) 0;
  width: 100%;
}
.device-tile__cat {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-purple-500);
  text-align: center;
}
.device-tile__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  color: var(--c-natural-900);
  text-align: center;
}
.device-tile__desc {
  font-size: var(--fs-body-m);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
  text-align: center;
}
@media (max-width: 1024px) {
  .device-grid__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .device-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .device-tile {
    border-radius: 32px;
    padding: var(--sp-16) 12px;
    box-shadow: 0 0 54px 0 rgba(131, 130, 130, 0.15);
  }
  .device-tile__img { height: 117px; border-radius: 24px; }
  .device-tile__content { gap: var(--sp-4); padding: var(--sp-16) 0 0; }
  .device-tile__name { font-size: var(--fs-body-l); line-height: 1.45; }
  .device-tile__desc { font-size: 12px; line-height: 1.45; }
}

/* ==========================================================================
   APLIKACJE — filterable CMS list (reuses .device-grid/.device-tile)
   ========================================================================== */
.cms-list {
  background: var(--c-white);
  padding-bottom: var(--sp-section-pad);
}
.cms-list__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  margin-bottom: var(--sp-div-gap);
}
.cms-list__overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-natural-500);
}
.cms-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}
.cms-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 100px;
  border: 1px solid var(--c-natural-500);
  background: var(--c-white);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-regular);
  color: var(--c-natural-500);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .cms-filter:hover {
    border-color: var(--c-natural-900);
    color: var(--c-natural-900);
  }
}
.cms-filter.is-active {
  background: var(--c-brand-500);
  border-color: var(--c-brand-500);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
}
/* App card variant: borderless, photo cover */
.device-tile--cover { border-color: transparent; }
.device-tile--cover .device-tile__img img { object-fit: cover; }
.device-tile.is-hidden { display: none; }

/* — Filters: mobile horizontal scroll + swipe — */
@media (max-width: 768px) {
  .cms-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cms-filters::-webkit-scrollbar { display: none; }
  .cms-filter { flex-shrink: 0; }
}

/* — Card --cover variant: mobile refinements — */
@media (max-width: 768px) {
  .device-tile--cover {
    border-radius: var(--radius-l);
    padding: var(--sp-16) var(--sp-12);
    overflow: hidden;
    box-shadow: 0 0 54px rgba(131, 130, 130, 0.15);
  }
  .device-tile--cover .device-tile__img {
    height: 117px;
  }
  .device-tile--cover .device-tile__content {
    gap: var(--sp-4);
    padding: var(--sp-16) 0 0;
  }
  .device-tile--cover .device-tile__name {
    font-size: var(--fs-body-l);
    line-height: 1.45;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   MFT-5000 — PRODUCT DETAIL PAGE
   ========================================================================== */
/* Generic text tab-bar (reused across product sections) */
.mft-tabs {
  display: flex;
  gap: var(--sp-div-gap);
  border-bottom: 1px solid var(--c-natural-200);
  margin-bottom: 0;
}
.mft-tabs--dark { border-bottom-color: rgba(255, 255, 255, 0.15); }
.mft-tab {
  position: relative;
  padding: 12px 0;
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-natural-400);
  cursor: pointer;
  background: none;
  transition: color var(--transition);
}
.mft-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--c-brand-500);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.mft-tab.is-active { color: var(--c-brand-500); }
.mft-tab.is-active::after { transform: scaleX(1); }
.mft-tab-panel { display: none; }
.mft-tab-panel.is-active { display: block; }

/* Marked table tabs (.mft-table) — independent horizontal scroll.
   Desktop: drag-to-scroll + scrollbar when tabs overflow the width.
   Touch: native swipe scrolls the tab bar only (panel does not change). */
.mft-table .mft-tabs {
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  -webkit-overflow-scrolling: touch;
  border-bottom: 0;
  padding-bottom: 12px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 12px);
  background-size: 100% 1px;
}
.mft-table .mft-tabs.is-scrollable { cursor: grab; }
.mft-table .mft-tabs.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.mft-table .mft-tab { flex-shrink: 0; }
.mft-table .mft-tab::after { bottom: 0; }
.mft-table .mft-tabs::-webkit-scrollbar { height: 6px; }
.mft-table .mft-tabs::-webkit-scrollbar-track { background: transparent; }
.mft-table .mft-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 100px; }

/* Config tabs — same horizontal drag-to-scroll logic as .mft-table .mft-tabs, light theme. */
.mft-config .mft-tabs {
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: var(--c-natural-300) transparent;
  -webkit-overflow-scrolling: touch;
  border-bottom: 0;
  padding-bottom: 12px;
  background-image: linear-gradient(var(--c-natural-200), var(--c-natural-200));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 12px);
  background-size: 100% 1px;
}
.mft-config .mft-tabs.is-scrollable { cursor: grab; }
.mft-config .mft-tabs.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.mft-config .mft-tab { flex-shrink: 0; }
.mft-config .mft-tab::after { bottom: 0; }
.mft-config .mft-tabs::-webkit-scrollbar { height: 6px; }
.mft-config .mft-tabs::-webkit-scrollbar-track { background: transparent; }
.mft-config .mft-tabs::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }

/* Hero */
.mft-hero { padding-block: var(--sp-section-pad); background: var(--c-white); }
.mft-hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-container-gap);
}
.mft-hero__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-container-gap);
  align-items: start;
}
.mft-hero__content { display: flex; flex-direction: column; gap: var(--sp-24); }
.mft-hero__text { display: flex; flex-direction: column; gap: var(--sp-textwrap-gap); max-width: var(--layout-narrow); }
.mft-hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--c-natural-900);
}
.mft-hero__lead {
  font-size: var(--fs-body-l);
  line-height: var(--lh-relaxed);
  color: var(--c-natural-500);
}
.mft-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-8);
}
.spec-card {
  background: var(--c-natural-50);
  border: 1px solid var(--c-natural-100, #f1f1f3);
  border-radius: var(--radius-s);
  padding: var(--sp-20) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.spec-card__label {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-natural-500);
  font-weight: var(--fw-medium);
}
.spec-card__value {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--c-natural-900);
}
.mft-hero__media { display: flex; flex-direction: column; gap: 10px; }
.mft-hero__main-img {
  width: 100%;
  aspect-ratio: 592 / 503;
  border-radius: var(--radius-l);
  object-fit: contain;
  background: var(--c-natural-50);
}
.mft-hero__thumbs-wrap { display: flex; align-items: center; gap: var(--sp-8); }
.mft-hero__thumbs { display: flex; gap: var(--sp-8); overflow-x: auto; scrollbar-width: none; flex: 1; }
.mft-hero__thumbs::-webkit-scrollbar { display: none; }
.mft-thumbs-nav {
  flex-shrink: 0;
  width: 32px;
  height: 112px;
  border-radius: 10px;
  background: var(--c-natural-100);
  border: 1px solid var(--c-natural-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  transition: background 0.15s;
  color: var(--c-natural-700);
}
@media (hover: hover) {
  .mft-thumbs-nav:hover { background: var(--c-natural-200); }
}

.mft-thumbs-nav.is-visible { visibility: visible; }
.mft-thumb {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(0, 0, 0, 0.35);
  object-fit: cover;
  background: var(--c-natural-50);
  cursor: pointer;
}
.mft-thumb--active { border: 2px solid #1d1d1d; }
.mft-hero__actions { display: flex; gap: var(--sp-16); flex-wrap: wrap; }

/* Application table (dark) + test cards */
.mft-table { background: var(--c-natural-900); padding-block: var(--sp-section-pad); position: relative; overflow: hidden; }
.mft-table::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(247, 148, 29, 0.15), transparent 70%);
  pointer-events: none;
}
.mft-table__head { display: flex; flex-direction: column; gap: var(--sp-textwrap-gap); max-width: var(--layout-content); margin-bottom: var(--sp-40); position: relative; z-index: 1; }
.mft-table__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-white); }
.mft-table__lead { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-white-70); }
.mft-table__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12);
  margin-top: var(--sp-32);
  position: relative;
  z-index: 2;
}
.test-card {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-24) 36px;
  border-radius: var(--radius-l);
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}
.test-card__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: var(--c-brand-500);
  color: var(--c-white);
  display: grid;
  place-items: center;
}
.test-card__icon svg { width: 20px; height: 20px; }
.test-card__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.test-card__title {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--c-white);
}
.test-card__desc { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-white-60); }

/* Modular section (light) */
.mft-modular { background: var(--c-white); padding-block: var(--sp-section-pad); }
.mft-modular__head { display: flex; gap: var(--sp-container-gap); align-items: start; margin-bottom: var(--sp-40); }
.mft-modular__title { flex: 1; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-natural-900); }
.mft-modular__desc { flex: 1; max-width: var(--layout-card); font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-500); }
.modular-tabs {
  display: flex;
  gap: var(--sp-8);
  margin-bottom: var(--sp-32);
  overflow-x: auto;
  scroll-snap-type: none;
  scrollbar-width: thin;
  scrollbar-color: var(--c-natural-300) transparent;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-8);
}
.modular-tabs.is-scrollable { cursor: grab; }
.modular-tabs.is-dragging { cursor: grabbing; user-select: none; scroll-behavior: auto; }
.modular-tabs::-webkit-scrollbar { height: 6px; }
.modular-tabs::-webkit-scrollbar-track { background: transparent; }
.modular-tabs::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }
.modular-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border-radius: var(--radius-s);
  background: var(--c-natural-50);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  min-width: 230px;
  flex-shrink: 0;
}
@media (hover: hover) {
  .modular-tab:hover {
    background: var(--c-natural-100);
    border-color: var(--c-natural-200);
  }
}
.modular-tab.is-active {
  background: #3f3f46;
  border-color: var(--c-natural-900);
}
.modular-tab__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.modular-tab__icon img { width: 100%; height: 100%; object-fit: contain; }
.modular-tab__text { display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; }
.modular-tab__name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  color: var(--c-natural-500);
  line-height: var(--lh-normal);
}
@media (hover: hover) {
  .modular-tab:hover .modular-tab__name {
  color: var(--c-natural-500);
}
}

.modular-tab.is-active .modular-tab__name {
  color: var(--c-white);
}
.modular-tab__sub {
  font-size: var(--fs-body-s);
  color: var(--c-natural-400);
  line-height: var(--lh-normal);
}
@media (hover: hover) {
  .modular-tab:hover .modular-tab__sub {
  color: var(--c-natural-400);
}
}

.modular-tab.is-active .modular-tab__sub {
  color: var(--c-natural-400);
}
.modular-panel { background: var(--c-natural-50); border-radius: var(--radius-l); padding: var(--sp-section-pad); }
.modular-panel__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-section-pad); align-items: start; }
.modular-panel__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); color: var(--c-natural-900); margin-bottom: var(--sp-16); }
.modular-panel__desc { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-500); margin-bottom: var(--sp-40); }
.modular-vals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.modular-val__label { font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.7px; text-transform: uppercase; color: var(--c-natural-500); margin-bottom: var(--sp-8); }
.modular-val__value { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-900); }
.modular-panel__img { width: 100%; border-radius: var(--radius-m); object-fit: contain; position: sticky; top: 96px; }

/* Feature grid (dark sections: key features + software) */
.mft-features { background: var(--c-natural-900); padding-block: var(--sp-section-pad); position: relative; overflow: hidden; }
.mft-features__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-white); margin-bottom: var(--sp-section-pad); max-width: var(--layout-content); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-div-gap); align-items: start; }
.feature-item { display: flex; gap: var(--sp-12); }
.feature-item__icon { flex: none; width: 24px; height: 24px; color: var(--c-brand-500); }
.feature-item__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.feature-item__title { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: 0.7px; text-transform: uppercase; color: var(--c-white); }
.feature-item__desc { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-white-60); }

/* Specification block (light: sidebar tabs + table) */
.mft-spec { background: var(--c-white); padding-block: var(--sp-section-pad); }
.mft-spec__cols { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-container-gap); align-items: start; }
.mft-spec__side { display: flex; flex-direction: column; gap: var(--sp-24); }
.mft-spec__tabs-track { display: flex; flex-direction: column; gap: var(--sp-8); }
.mft-spec__intro { display: flex; flex-direction: column; gap: var(--sp-16); }
.mft-spec__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -1px; color: var(--c-natural-900); }
.mft-spec__lead { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-500); }
.spec-side__tab {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16);
  border-radius: var(--radius-s);
  background: var(--c-natural-50);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .spec-side__tab:hover {
  background: var(--c-natural-100);
  border-color: var(--c-natural-200);
}
}

.spec-side__tab.is-active {
  background: #3f3f46;
  border-color: var(--c-natural-900);
}
.spec-side__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex: none;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.spec-side__icon img { width: 100%; height: 100%; object-fit: contain; }
.spec-side__text { display: flex; flex-direction: column; gap: var(--sp-2); }
.spec-side__name {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  color: var(--c-natural-500);
  line-height: var(--lh-normal);
}
@media (hover: hover) {
  .spec-side__tab:hover .spec-side__name {
  color: var(--c-natural-500);
}
}

.spec-side__tab.is-active .spec-side__name { color: var(--c-white); }
.spec-side__sub {
  font-size: var(--fs-body-s);
  color: var(--c-natural-400);
  line-height: var(--lh-normal);
}
@media (hover: hover) {
  .spec-side__tab:hover .spec-side__sub {
  color: var(--c-natural-400);
}
}

.spec-side__tab.is-active .spec-side__sub {
  color: var(--c-natural-400);
}
.spec-panel { background: var(--c-natural-50); border-radius: var(--radius-l); padding: var(--sp-32) var(--sp-48); }
.spec-panel__title { font-size: var(--fs-h4); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); color: var(--c-natural-900); margin-bottom: var(--sp-16); }
.spec-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-24); padding: var(--sp-16) 0; border-top: 1px solid var(--c-natural-200); }
.spec-row__key { font-size: var(--fs-body-s); color: var(--c-natural-500); }
.spec-row__val { font-size: var(--fs-body-s); color: var(--c-natural-900); }

/* Config scope (light: 3 colored cards) */
.mft-config { background: var(--c-white); padding-block: var(--sp-section-pad); }
.mft-config__head { display: flex; flex-direction: column; gap: var(--sp-textwrap-gap); max-width: var(--layout-content); margin-bottom: var(--sp-div-gap); }
.mft-config__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-natural-900); }
.mft-config__lead { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-500); }
.mft-config__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); margin-top: var(--sp-32); }
.config-card {
  border-radius: var(--radius-m);
  padding: var(--sp-div-gap);
  border: 1px solid var(--c-natural-200);
  background: var(--c-natural-50);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.config-card--orange { background: #fff8ed; border-color: #ffe0b3; }
.config-card--orange .config-card__title { color: var(--c-brand-600); }
.config-card--purple { background: #faf5ff; border-color: #e9d5ff; }
.config-card--purple .config-card__title { color: var(--c-purple-500); }
.config-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); }
.config-card__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--c-natural-900); }
.config-card__badge { flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--fw-medium); padding: 4px 10px; border-radius: 100px; background: var(--c-natural-200); color: var(--c-natural-600); white-space: nowrap; line-height: 1; }
.config-card--orange .config-card__badge { background: var(--c-brand-500); color: #fff; }
.config-card--purple .config-card__badge { background: var(--c-purple-500); color: #fff; }
.config-card__desc { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-500); }

/* Apps + related-devices sliders (light) */
.mft-cards { background: var(--c-white); padding-block: var(--sp-section-pad); overflow-x: clip; }
.mft-cards__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); margin-bottom: var(--sp-32); }
.mft-cards__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-natural-900); }
.mft-cards__track { display: flex; gap: var(--sp-24); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-block: 8px 48px;
  width: 100vw;
  margin-left: calc((100vw - 100%) / -2);
  padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  padding-inline-end: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
  scroll-padding-inline-start: max(var(--sp-container-pad), calc((100vw - var(--sp-container-max)) / 2 + var(--sp-container-pad)));
}
.mft-cards__track::-webkit-scrollbar { display: none; }

/* MFT sliders reuse shared .device-tile component from Aplikacje */
.mft-cards__track .device-tile {
  flex: 0 0 400px;
  max-width: 85vw;
  scroll-snap-align: start;
}

@media (max-width: 1024px) {
  .mft-hero__cols { grid-template-columns: 1fr; }
  .mft-specs { grid-template-columns: repeat(3, 1fr); }
  .mft-hero__main-img { aspect-ratio: 16 / 9; object-fit: cover; }
  .mft-table__cards { grid-template-columns: repeat(2, 1fr); }
  .mft-modular__head { flex-direction: column; gap: var(--sp-24); }
  .modular-panel__cols { grid-template-columns: 1fr; }
  .modular-panel { padding: var(--sp-40); }
  .modular-panel__img { position: static; order: -1; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .mft-cards__track .device-tile { flex: 0 0 320px; }
  .mft-spec__cols { grid-template-columns: 1fr; gap: var(--sp-40); overflow: hidden; }
  .mft-spec__side { flex-direction: column; gap: var(--sp-16); }
  .mft-spec__tabs-track {
    flex-direction: row;
    gap: var(--sp-16);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-12);
    scrollbar-width: thin;
    scrollbar-color: var(--c-natural-300) transparent;
  }
  .mft-spec__tabs-track::-webkit-scrollbar { height: 4px; }
  .mft-spec__tabs-track::-webkit-scrollbar-track { background: transparent; }
  .mft-spec__tabs-track::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }
  .spec-side__tab { flex: 1 0 200px; min-width: 200px; }
  .spec-panel { padding: var(--sp-32); }
  .mft-config__cards { grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
  .mft-cards__track .device-tile { flex: 0 0 320px; }
}
@media (max-width: 768px) {
  .mft-specs { grid-template-columns: repeat(2, 1fr); }
  .mft-spec__cols > * { min-width: 0; }
  .spec-panel { background: var(--c-natural-100); border-radius: var(--radius-m); padding: var(--sp-20) var(--sp-16); min-width: 0; max-width: 100%; overflow: hidden; }
  .spec-panel__title { font-size: 24px; line-height: 1.35; margin-bottom: var(--sp-16); }
  .spec-row { grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-top: none; border-bottom: 1px solid var(--c-natural-300); align-items: start; min-width: 0; }
  .spec-row__key { padding: var(--sp-12) 0; font-size: 16px; line-height: 1.45; min-width: 0; overflow-wrap: break-word; }
  .spec-row__val { padding: 18px 0 18px var(--sp-24); font-size: 16px; line-height: 1.45; min-width: 0; overflow-wrap: break-word; }
  .modular-tabs {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .modular-tabs::-webkit-scrollbar { display: none; }
  .modular-tab { flex: none; min-width: 200px; }
  .spec-side__tab { flex: none; min-width: 0; }
  .modular-tab__name,
  .spec-side__name { white-space: nowrap; }
  .modular-tab__sub,
  .spec-side__sub { white-space: nowrap; }
  .mft-config__cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mft-specs { grid-template-columns: repeat(2, 1fr); }
  .mft-table__cards {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: var(--sp-32);
    width: 100vw;
    margin-left: calc((100vw - 100%) / -2);
    padding-inline: var(--sp-container-pad);
    scroll-padding-inline-start: var(--sp-container-pad);
  }
  .mft-table__cards::-webkit-scrollbar { display: none; }
  .mft-table__cards .test-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-16) 20px;
    height: auto;
  }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .mft-hero__head { gap: var(--sp-div-gap); }
  .mft-hero__main-img { aspect-ratio: 4 / 3; }
  .mft-hero__actions { flex-direction: column; }
  .mft-hero__actions .btn { width: 100%; justify-content: center; }

  .mft-cards__track { padding-block-end: var(--sp-16); gap: var(--sp-16); }
  .mft-cards__track .device-tile {
    flex: 0 0 240px;
    border-radius: 32px;
    padding: var(--sp-16) 12px;
    box-shadow: 0 0 54px 0 rgba(131, 130, 130, 0.15);
  }
  .mft-cards__track .device-tile__img { height: 117px; }
  .mft-cards__track .device-tile__content { gap: var(--sp-4); padding: var(--sp-16) 0 0; }
  .mft-cards__track .device-tile__name { font-size: var(--fs-body-l); line-height: 1.45; }
  .mft-cards__track .device-tile__desc { font-size: var(--fs-body-l); line-height: 1.45; }

  /* Modular panel — mobile (match Figma 3223:31359) */
  .modular-panel { padding: var(--sp-16); }
  .modular-panel__cols { gap: var(--sp-24); }
  .modular-panel__img { order: -1; height: 240px; object-fit: cover; border: 1px solid var(--c-natural-100); border-radius: var(--radius-m); overflow: clip; }
  .modular-panel__title { font-size: 32px; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: 0.6px; margin-bottom: 20px; }
  .modular-panel__desc { font-size: 16px; line-height: 1.45; margin-bottom: var(--sp-24); }
  .modular-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
  .modular-val__label { font-size: 14px; line-height: 1.2; letter-spacing: 0.7px; color: var(--c-natural-900); }
  .modular-val__value { font-size: 16px; line-height: 1.35; letter-spacing: 1.2px; opacity: 0.9; color: var(--c-natural-700); }

  /* Config scope — mobile (match Figma 3223:30385) */
  .mft-config { background: var(--c-natural-50); }
  .mft-config__head { margin-bottom: var(--sp-container-gap); }
  .mft-config .mft-tabs {
    gap: 32px;
    padding-inline: 24px;
    padding-bottom: var(--sp-12);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--c-natural-300) transparent;
    scroll-snap-type: x mandatory;
  }
  .mft-config .mft-tabs::-webkit-scrollbar { height: 4px; }
  .mft-config .mft-tabs::-webkit-scrollbar-track { background: transparent; }
  .mft-config .mft-tabs::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }
  .mft-config .mft-tab { scroll-snap-align: start; flex-shrink: 0; }
  .mft-config__cards {
    display: flex;
    gap: var(--sp-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: var(--sp-32);
    width: 100vw;
    margin-left: calc((100vw - 100%) / -2);
    padding-inline: var(--sp-container-pad);
    scroll-padding-inline-start: var(--sp-container-pad);
  }
  .mft-config__cards::-webkit-scrollbar { display: none; }
  .config-card {
    flex: 0 0 326px;
    scroll-snap-align: start;
    border-radius: 32px;
    padding: 21px 25px;
    min-height: 128px;
    border-color: var(--c-natural-300);
  }
  .config-card--orange { border-color: #fdbf7d; }
  .config-card--purple { border-color: #d4aef4; }
  .config-card__top {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .config-card__badge {
    background: var(--c-natural-500);
    color: var(--c-natural-50);
    padding: 4px 12px;
  }
  .config-card--orange .config-card__badge { background: var(--c-brand-500); color: #fff8ed; }
  .config-card--purple .config-card__badge { background: var(--c-purple-500); color: #fbf5fe; }
  .config-card__title { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.45; }
  .config-card__desc { font-size: var(--fs-body-s); line-height: 1.45; color: rgba(0, 0, 0, 0.7); }
}

/* ==========================================================================
   APPLICATION DETAIL — two-column CMS content + sticky contact card
   (reusable across application detail pages: leki-i-suplementy, etc.)
   ========================================================================== */
.app-detail { background: var(--c-white); padding-block: var(--sp-section-pad); }
.app-detail__cols { display: grid; grid-template-columns: 1fr minmax(280px, 336px); gap: clamp(48px, 6vw, 112px); align-items: start; }
.app-detail__main { display: flex; flex-direction: column; gap: var(--sp-88); min-width: 0; }
.app-detail__section-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-natural-900); margin-bottom: var(--sp-32); }

/* Related devices grid (responsive 2-col, reuses .device-tile) */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-16); align-items: start; }

/* Sticky contact card aside */
.app-detail__aside { position: sticky; top: 96px; align-self: start; }
/* ════════════════════════════════════════════════════════════════
   CONTACT COMPONENTS (Figma: Contact_components 3035:48453)
   Part: Contact-box — content width 300px is fixed in Figma.
   Large = 300 + 2×40 = 380px · sm-pad = 300 + 2×28 = 356px · Small = 300 + 2×32 = 364px
   ════════════════════════════════════════════════════════════════ */
.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-div-gap);
  padding: var(--sp-40);
  width: 380px;
  max-width: 100%;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: linear-gradient(180deg, #2e2e32 0%, var(--c-natural-900) 100%);
  isolation: isolate;
}
/* Type=Large/small-padding (1395:33843) — 356px */
.contact-card--sm-pad { padding: 28px; gap: var(--sp-24); width: 356px; }
.contact-card--sm-pad .contact-card__content { gap: var(--sp-24); }
/* Type=Small (466:9129 Default / 466:9135 Hover) — 364px, collapses to name-label only */
.contact-card--small {
  position: relative;
  top: auto;
  gap: var(--sp-16);
  align-items: center;
  padding: var(--sp-16) var(--sp-32);
  width: 364px;
  background: var(--c-natural-800, #27272a);
  box-shadow: 0 4px 11.4px rgba(0,0,0,0.25);
}
.contact-card--small .contact-card__title { font-size: var(--fs-body-m); letter-spacing: 0; }
/* Small: content (line + details) hidden by default, revealed on hover/focus */
.contact-card--small .contact-card__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}.contact-card--small:focus-within .contact-card__content {
  max-height: 360px;
  opacity: 1;
}

@media (hover: hover) {
  .contact-card--small:hover .contact-card__content {
  max-height: 360px;
  opacity: 1;
}
}
.contact-card--small:focus-within .contact-card__pulse {
  border-color: var(--c-brand-500);
  opacity: 1;
}

@media (hover: hover) {
  /* Small: avatar pulse ring turns brand-orange on hover (Figma Hover state) */
.contact-card--small:hover .contact-card__pulse {
  border-color: var(--c-brand-500);
  opacity: 1;
}
}

/* Background texture */
.contact-card__tex { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; mix-blend-mode: difference; pointer-events: none; z-index: -1; }
/* Optional header image */
.contact-card__image { height: 180px; border-radius: var(--radius-s); overflow: hidden; }
.contact-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Part: Name label (466:9147) — avatar + name/role, content width 300px */
.contact-card__head { display: flex; gap: var(--sp-16); align-items: center; width: 300px; max-width: 100%; }
/* Avatar — Large (100px) */
.contact-card__avatar { width: 100px; height: 100px; flex: none; border-radius: 100000px; position: relative; background: var(--c-natural-900); }
.contact-card__avatar img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; border-radius: 100000px; border: 1px solid var(--c-natural-700); }
/* Avatar — Small (58px) */
.contact-card__avatar--sm { width: 58px; height: 58px; }
/* Part: puls-animate — rings expand outward from behind avatar and fade */
.contact-card__pulse {
  position: absolute;
  inset: 0;
  border-radius: 100000px;
  z-index: 0;
  pointer-events: none;
}
.contact-card__pulse::before,
.contact-card__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 136, 0, 0.6);
  box-shadow: 0 0 12px 4px rgba(255, 136, 0, 0.3);
  opacity: 0;
  animation: pulse-outward 6s ease-out infinite;
}
.contact-card__pulse::after {
  animation-delay: 3s;
}
@keyframes pulse-outward {
  0% {
    transform: scale(1);
    opacity: 0.7;
    filter: blur(0px);
  }
  45% {
    transform: scale(2);
    opacity: 0;
    filter: blur(6px);
  }
  100% {
    transform: scale(2);
    opacity: 0;
    filter: blur(6px);
  }
}
/* Part: contact-content — wraps text + line + details (gap 24px in Figma) */
.contact-card__content { display: flex; flex-direction: column; gap: var(--sp-24); width: 300px; max-width: 100%; }
.contact-card__textwrap { display: flex; flex-direction: column; gap: var(--sp-8); }
/* Text */
.contact-card__name { font-size: var(--fs-body-l); font-weight: var(--fw-semibold); color: var(--c-white); line-height: var(--lh-normal); }
.contact-card__role { font-size: var(--fs-body-m); color: var(--c-white-50); line-height: var(--lh-normal); }
.contact-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); line-height: var(--lh-heading); color: var(--c-white); }
/* Heading-4 Regular in app-detail template (Figma 1428:45512) */
.app-detail .contact-card__title { font-weight: var(--fw-regular); }
.contact-card__text { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-white); }
/* Divider */
.contact-card__line { height: 1px; background: var(--c-white-20); }
/* Part: contact-details_wrapper (675:24482) — body-1/2/3 = 1/2/3 rows */
.contact-card__details { display: flex; flex-direction: column; gap: var(--sp-16); }
.contact-card__row { display: flex; gap: var(--sp-16); align-items: center; }
.contact-card__row svg { width: 24px; height: 24px; flex: none; color: var(--c-white); }
.contact-card__row a, .contact-card__row span { font-size: var(--fs-body-m); color: var(--c-white); text-decoration: underline; line-height: var(--lh-normal); }
@media (hover: hover) {
  .contact-card__row a:hover { color: var(--c-brand-500); }
}

/* Action button area */
.contact-card__action { display: flex; align-items: flex-start; }

/* ── Part: file-box (965:45084) — attachment add button (Dark / Light) ── */
.file-box {
  display: inline-flex;
  gap: var(--sp-8);
  align-items: flex-start;
  padding: var(--sp-16);
  width: 204px;
  max-width: 100%;
  border-radius: 8px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.file-box__icon { width: 24px; height: 24px; flex: none; }
.file-box__icon svg { width: 100%; height: 100%; display: block; }
.file-box__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0; word-break: break-word; }
.file-box__title { font-size: var(--fs-body-m); font-weight: var(--fw-semibold); line-height: var(--lh-normal); text-decoration: underline; }
.file-box__hint { font-size: 12px; line-height: var(--lh-normal); }
/* Mode=Dark (466:9106) — filled natural-700 bg, white text */
.file-box--dark { background: var(--c-natural-700, #3f3f46); }
.file-box--dark .file-box__icon { color: var(--c-white); }
.file-box--dark .file-box__title { color: var(--c-white); }
.file-box--dark .file-box__hint { color: var(--c-white-80, rgba(255,255,255,0.8)); }
@media (hover: hover) {
  .file-box--dark:hover { background: var(--c-natural-600, #52525b); }
}

/* Mode=Light (965:45085) — outlined, dark text */
.file-box--light { border: 1px solid var(--c-natural-300, #d1d1d6); }
.file-box--light .file-box__icon { color: var(--c-natural-900); }
.file-box--light .file-box__title { color: var(--c-natural-900); }
.file-box--light .file-box__hint { color: var(--c-natural-500, #838282); }
@media (hover: hover) {
  .file-box--light:hover { border-color: var(--c-natural-500, #838282); }
}


/* ── Sticky contact CTA (mobile bottom bar) ──────────────────────── */
.sticky-contact {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--c-natural-900);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 14px rgba(29,29,29,0.15);
  display: none;
}
.sticky-contact__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-white);
}
.sticky-contact__head { display: flex; gap: var(--sp-16); align-items: center; flex: 1; min-width: 0; }
.sticky-contact__info { min-width: 0; }
.sticky-contact__info .contact-card__name { font-size: var(--fs-body-l); }
.sticky-contact__info .contact-card__role { font-size: var(--fs-body-s); }
.sticky-contact__expand {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 12px;
  color: var(--c-white);
  white-space: nowrap;
}
.sticky-contact__expand svg { width: 16px; height: 16px; transition: transform var(--transition); }
/* Panel sits ABOVE the toggle (Figma Open: details above name-label) */
.sticky-contact__panel { max-height: 0; overflow: hidden; padding-inline: 16px; transition: max-height 0.3s ease, padding 0.3s ease; }
.sticky-contact__panel.is-open { max-height: 200px; padding-top: 16px; }
.sticky-contact__toggle[aria-expanded="true"] .sticky-contact__expand svg { transform: rotate(180deg); }

@media (max-width: 768px) {
  .sticky-contact { display: block; }
}

/* Rich-text prose article */
.prose { display: flex; flex-direction: column; gap: var(--sp-div-gap); align-items: flex-start; }
.prose-label { display: inline-flex; align-items: center; padding: var(--sp-8) var(--sp-16); border-radius: 8px; background: #e6cdf9; }
.prose-label span { font-size: var(--fs-body-s); letter-spacing: 0.3px; color: #2d0d42; line-height: 1.2; }
.prose__block { display: flex; flex-direction: column; gap: var(--sp-20); max-width: var(--layout-content); width: 100%; }
.prose__h { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); color: var(--c-natural-900); }
.prose__p { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); }
.prose__p + .prose__p { margin-top: -4px; }
.prose__list { list-style: disc; padding-left: 27px; display: flex; flex-direction: column; gap: var(--sp-2); }
.prose__list li { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); }
.prose__figure { display: flex; flex-direction: column; gap: var(--sp-8); width: 100%; }
.prose__figure img { width: 100%; border-radius: 8px; object-fit: cover; display: block; }
.prose__figure--small img { width: 215px; height: 215px; }
.prose__caption { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-500); }
.prose__caption a, .prose__p a { color: #3b82f6; text-decoration: underline; word-break: break-word; }

/* Application body: native editor (the_content) styled to match .prose rhythm */
.app-prose { width: 100%; max-width: var(--layout-content); }
.app-prose > * { margin: 0; }
.app-prose > * + * { margin-top: var(--sp-div-gap); }
.app-prose > :is(h1, h2, h3, h4, h5, h6) + * { margin-top: var(--sp-20); }
.app-prose > p + p,
.app-prose > .prose__p + .prose__p { margin-top: var(--sp-20); }
.app-prose > p + :is(ul, ol) { margin-top: var(--sp-20); }
.app-prose > :is(ul, ol) + p { margin-top: var(--sp-20); }
.app-prose > * + :is(figure, .wp-caption) { margin-top: var(--sp-48); }
.app-prose > *:first-child { margin-top: 0; }
.app-prose :is(h2, h3, h4, h5, h6) { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); color: var(--c-natural-900); }
.app-prose p { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); }
.app-prose :is(ul, ol) { padding-left: 27px; display: flex; flex-direction: column; gap: var(--sp-2); }
.app-prose ul { list-style: disc; }
.app-prose ol { list-style: decimal; }
.app-prose li { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); }
.app-prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.app-prose figure, .app-prose .wp-caption { display: flex; flex-direction: column; gap: var(--sp-8); margin: 0; max-width: 100%; }
.app-prose figure img, .app-prose .wp-caption img { width: 100%; }
.app-prose figcaption, .app-prose .wp-caption-text { font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-500); margin: 0; }
.app-prose .aligncenter { margin-left: auto; margin-right: auto; }
.app-prose a { color: #3b82f6; text-decoration: underline; word-break: break-word; }

/* Event single — prose rhythm + partner logo height (1:1 with static event page) */
.app-prose--event > p + p { margin-top: 16px; }
.app-prose--event h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--text-strong); }
.partners--event .partners__logo { height: 40px; max-height: 40px; width: auto; }

/* Industry tab accordion + image slider */
.industry-tab { background: var(--c-white); padding-block: var(--sp-section-pad); }
.industry-tab__inner { display: flex; gap: var(--sp-48); align-items: flex-start; }
.industry-tab__left { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-div-gap); }
.industry-tab__label { align-self: flex-start; display: inline-flex; align-items: center; padding: var(--sp-8) var(--sp-16); border-radius: 8px; background: #e6cdf9; }
.industry-tab__label span { font-size: var(--fs-body-s); letter-spacing: 0.3px; color: #2d0d42; line-height: 1.2; }
.industry-tab__list { display: flex; flex-direction: column; gap: var(--sp-24); }
.ind-acc { display: flex; flex-direction: column; gap: var(--sp-24); }
.ind-acc__btn { display: flex; align-items: center; gap: var(--sp-8); background: none; border: none; cursor: pointer; padding: 0; text-align: left; }
.ind-acc__btn-title { font-size: var(--fs-h4); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); line-height: var(--lh-heading); color: var(--c-natural-500); transition: color var(--transition), font-size var(--transition), font-weight var(--transition); }
.ind-acc__btn-icon { width: 16px; height: 16px; flex: none; color: var(--c-natural-500); transition: opacity var(--transition); }
.ind-acc__panel { display: none; flex-direction: column; gap: var(--sp-24); }
.ind-acc__h { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); color: var(--c-natural-900); }
.ind-acc__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); }
.ind-acc__list li { padding-left: 20px; position: relative; }
.ind-acc__list li::before { content: "\2022"; position: absolute; left: 0; color: var(--c-natural-500); }
.ind-acc__text { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-500); white-space: pre-line; }
.ind-acc__users { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-600); }
.ind-acc__link { display: inline-flex; align-items: center; gap: var(--sp-8); align-self: flex-start; font-size: var(--fs-body-m); font-weight: var(--fw-medium); color: var(--c-brand-500); text-decoration: none; transition: gap var(--transition), color var(--transition); }
.ind-acc__link svg { width: 16px; height: 16px; flex: none; transition: transform var(--transition); }
.ind-acc__link:hover { color: var(--c-brand-600, #2563eb); }
.ind-acc__link:hover svg { transform: translateX(3px); }
.ind-acc__users strong { font-weight: var(--fw-semibold); color: var(--c-natural-900); }
.ind-acc__div { height: 1px; background: var(--c-natural-300); }
.ind-acc.is-active .ind-acc__panel { display: flex; }
.ind-acc.is-active .ind-acc__btn-title { color: var(--c-natural-900); font-weight: var(--fw-semibold); font-size: var(--fs-h3); letter-spacing: var(--ls-normal); line-height: var(--lh-snug); }
.ind-acc.is-active .ind-acc__btn-icon { opacity: 0; width: 0; overflow: hidden; }
.industry-tab__media { flex: 1 1 50%; min-width: 0; position: sticky; top: 96px; display: flex; flex-direction: column; }
.industry-tab__frame { height: 560px; border-radius: var(--radius-l); overflow: hidden; background: #2c2c2e; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); position: relative; }
.industry-tab__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.industry-tab__frame img.is-active { opacity: 1; }
.industry-tab__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.4), rgba(0,0,0,0)); pointer-events: none; }
.industry-tab__nav { position: absolute; right: 16px; bottom: 16px; display: flex; gap: var(--sp-16); align-items: center; padding: 12px 24px; border-radius: 100px; background: var(--c-white); box-shadow: 0 10px 7.5px rgba(0,0,0,0.1), 0 4px 3px rgba(0,0,0,0.1); z-index: 2; }
.industry-tab__indicator { display: flex; align-items: center; gap: 6px; }
.industry-tab__spin { width: 16px; height: 16px; flex: none; color: var(--c-natural-900); }
.industry-tab__spin circle { transition: stroke-dasharray 400ms ease; }
.industry-tab__counter { font-size: var(--fs-body-m); font-weight: var(--fw-regular); color: var(--c-natural-900); white-space: nowrap; }
.industry-tab__arrows { display: flex; gap: var(--sp-8); }
.industry-tab__arrow { width: 28px; height: 28px; border-radius: 1000px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--c-natural-900); transition: background var(--transition); }
@media (hover: hover) {
  .industry-tab__arrow:hover { background: var(--c-natural-100, #f1f1f3); }
}

.industry-tab__arrow svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .app-detail__cols { grid-template-columns: 1fr; gap: var(--sp-48); }
  .app-detail__aside { display: none; }
  .contact-card { position: relative; top: 0; }
  .industry-tab__inner { flex-direction: column; align-items: stretch; gap: var(--sp-div-gap); }
  .industry-tab__left { flex: none; width: 100%; }
  .industry-tab__media { position: relative; top: 0; }
  .industry-tab__frame { height: auto; aspect-ratio: 1; display: none; }
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-detail__main { gap: 56px; }
  .industry-tab__inner { gap: var(--sp-24); }
}

/* ============================================================
   BRANŻE — industry directory (4-col grid of compact cards)
   reuses .device-grid / .device-tile / .device-tile--cover
   ============================================================ */
.device-grid__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .device-grid__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .device-grid__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   WYDARZENIA — events list (horizontal cards)
   ============================================================ */
.events { background: var(--c-white); padding-bottom: var(--sp-section-pad); }
.events__list { display: flex; flex-direction: column; gap: var(--sp-16); }
.event-card {
  display: flex;
  gap: var(--sp-div-gap);
  align-items: center;
  min-height: 300px;
  padding: var(--sp-16);
  border-radius: var(--radius-l);
  background: var(--c-white);
  overflow: visible;
  transition: box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .event-card:hover { box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
}

.event-card__img { width: 349px; height: 268px; flex: none; border-radius: var(--radius-m); overflow: hidden; background: var(--c-natural-900); }
.event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
@media (hover: hover) {
  .event-card:hover .event-card__img img { transform: scale(1.05); }
}

.event-card__content { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-12); align-items: flex-start; }
.event-status { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-4) var(--sp-12); border-radius: 12px; align-self: flex-start; width: fit-content; }
.event-status span { display: flex; align-items: center; justify-content: center; }
.event-status span { font-size: var(--fs-body-s); line-height: var(--lh-normal); }
.event-status--open { background: var(--c-purple-500); position: relative; overflow: visible; z-index: 1; }
.event-status--open::before,
.event-status--open::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1.5px solid rgba(163, 96, 226, 0.6);
  box-shadow: 0 0 10px 4px rgba(163, 96, 226, 0.35);
  opacity: 0;
  animation: statusPulseOut 6s ease-out infinite;
  pointer-events: none;
}
.event-status--open::after { animation-delay: 3s; }
@keyframes statusPulseOut {
  0%  { transform: scaleX(1) scaleY(1); opacity: 0.8; filter: blur(1px); }
  50% { transform: scaleX(1.5) scaleY(2.2); opacity: 0; filter: blur(8px); }
  100%{ transform: scaleX(1.5) scaleY(2.2); opacity: 0; filter: blur(8px); }
}
.event-status--open span { color: var(--c-white); }
.event-status--closed { background: rgba(0,0,0,0.9); }
.event-status--closed span { color: var(--c-white); }
.event-status--past { background: var(--c-natural-200); }
.event-status--past span { color: var(--c-natural-500); }
.event-card__meta { display: flex; gap: var(--sp-16); align-items: center; padding-top: var(--sp-16); }
.event-card__meta-item { display: flex; gap: var(--sp-4); align-items: center; }
.event-card__meta-item svg { width: 16px; height: 16px; flex: none; color: var(--c-natural-400); }
.event-card__meta-item span { font-size: var(--fs-overline); font-weight: var(--fw-medium); letter-spacing: 0.7px; line-height: 1.2; text-transform: uppercase; color: var(--c-natural-400); white-space: nowrap; }
.event-card__text { display: flex; flex-direction: column; gap: var(--sp-8); width: 100%; }
.event-card__title { font-size: var(--fs-h4); font-weight: var(--fw-regular); letter-spacing: var(--ls-wide); line-height: var(--lh-heading); color: var(--c-natural-900); }
.event-card__desc { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-500); }
.events__list .event-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.events__list .event-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.event-card__action { padding-top: var(--sp-16); }
.event-card__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 100px;
  border: 1px solid var(--c-natural-900); background: none;
  font-size: var(--fs-body-m); color: var(--c-natural-900); line-height: 1;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) {
  .event-card__btn:hover { background: var(--c-natural-900); color: var(--c-white); }
}


@media (max-width: 768px) {
  .event-card { flex-direction: column; align-items: stretch; }
  .event-card__img { width: 100%; height: 220px; }
}

/* Homepage featured event card: scoped to avoid the generic events-list card rules above. */
.event .event-card {
  position: relative;
  display: flex;
  gap: var(--sp-div-gap);
  align-items: center;
  min-height: auto;
  padding: var(--sp-div-gap);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #2e2e32 0%, #18181b 100%);
  backdrop-filter: blur(5px);
  transition: box-shadow var(--transition);
}
@media (hover: hover) {
  .event .event-card:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 60px rgba(24, 24, 27, 0.22);
}
}

.event .event-card__liner {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 1240px;
  height: 418px;
  object-fit: cover;
  opacity: 0.1;
  mix-blend-mode: difference;
  pointer-events: none;
}
.event .event-card__poster {
  position: relative;
  flex: none;
  width: 480px;
  height: 354px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--c-white);
}
.event .event-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
@media (hover: hover) {
  .event .event-card:hover .event-card__poster img {
  transform: scale(1.04);
}
}

.event .event-card__content {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  align-items: flex-start;
}
.event .event-card__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--c-white);
  margin: 0;
}
.event .event-card__text {
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--c-natural-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event .event-card__action {
  padding-top: 16px;
}
@media (max-width: 1024px) {
  .event .event-card {
    flex-direction: column;
    align-items: stretch;
  }
  .event .event-card__poster {
    width: 100%;
    height: auto;
    aspect-ratio: 480 / 354;
  }
}
@media (max-width: 560px) {
  .event .event-card {
    gap: 24px;
  }
  .event .event-card__poster {
    height: 243px;
    aspect-ratio: unset;
  }
  .event-meta {
    padding-top: 8px;
  }
  .event-meta__item:first-child:not(:has(svg)) {
    display: none;
  }
  .event .event-card__text {
    margin-top: -4px;
  }
}

/* ============================================================
   WYDARZENIE — event detail page
   ============================================================ */
.event-hero { position: relative; background: var(--c-natural-900); overflow: hidden; padding-block: 40px 96px; }

.event-hero .container { position: relative; z-index: 1; }
.event-hero__grid { display: flex; gap: 112px; align-items: stretch; margin-top: 40px; }
.event-hero__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-div-gap); justify-content: flex-end; }
.event-hero__title { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--c-white); }
.event-hero__lead { font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-white-80); max-width: var(--layout-narrow); }
.event-hero__lead strong { font-weight: var(--fw-bold); color: var(--c-white-80); }
.event-hero__meta { display: flex; gap: var(--sp-16); align-items: center; padding-top: var(--sp-16); border-top: 1px solid rgba(255,255,255,0.25); align-self: flex-start; }
.event-hero__meta-item { display: flex; gap: var(--sp-4); align-items: center; }
.event-hero__meta-item svg { width: 16px; height: 16px; flex: none; color: var(--c-natural-400); }
.event-hero__meta-item span { font-size: var(--fs-overline); font-weight: var(--fw-medium); letter-spacing: 0.7px; line-height: 1.2; text-transform: uppercase; color: var(--c-natural-400); white-space: nowrap; }

/* Registration form card (hero right) */
.event-form { flex: 1 1 0; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: var(--sp-48); padding: var(--sp-24) var(--sp-32); border-radius: var(--radius-l); background: var(--c-white); scroll-margin-top: 100px; }
.event-form__title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); line-height: var(--lh-snug); color: var(--c-natural-900); }
.event-form__body { display: flex; flex-direction: column; gap: var(--sp-16); width: 100%; }
.event-form__rows { display: flex; flex-direction: column; gap: var(--sp-8); }
.event-form__row { display: flex; flex-wrap: wrap; gap: var(--sp-div-gap); align-items: center; }
.event-form__label { width: 140px; flex: none; font-family: var(--font-text); font-size: var(--fs-body-l); line-height: var(--lh-normal); color: var(--c-natural-600); }
.event-form__label small { display: block; font-size: 12px; color: var(--c-natural-400); }
.event-form__input { flex: 1 1 0; min-width: 0; padding: var(--sp-8); border-radius: 8px; border: none; background: rgba(160,181,188,0.08); font-family: var(--font-text); font-size: var(--fs-body-m); color: var(--c-natural-900); line-height: var(--lh-normal); }
.event-form__input::placeholder { color: rgba(0,0,0,0.35); }
.event-form__input:focus { outline: 2px solid var(--c-brand-500); outline-offset: 0; }
.event-form__consent { display: flex; flex-wrap: wrap; gap: var(--sp-12); align-items: flex-start; }
.event-form__consent input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--c-brand-500); }
.event-form__consent label { flex: 1 1 0; min-width: 0; font-size: var(--fs-body-s); line-height: var(--lh-normal); color: var(--c-natural-900); }
.event-form__consent a { color: #3b82f6; text-decoration: underline; }

/* Partners + gallery */
.event-gallery { background: var(--c-white); }
.event-gallery .container { padding-top: 0; }
.event-gallery__img { width: 100%; height: auto; aspect-ratio: 1248 / 620; object-fit: cover; border-radius: var(--radius-xl); display: block; }
.event-gallery__slider { position: relative; }
.event-gallery__frame { position: relative; overflow: hidden; }
.event-gallery__track { display: flex; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; transform: translateX(calc(var(--g-index, 0) * -100%)); }
.event-gallery__slide { flex: 0 0 100%; min-width: 0; }
.event-gallery__btn--prev,
.event-gallery__btn--next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.event-gallery__btn--prev { left: 20px; }
.event-gallery__btn--next { right: 20px; }
.event-gallery__nav { margin-top: 8px; display: flex; justify-content: center; }
.event-gallery__dots { display: flex; gap: 6px; align-items: center; }
.event-gallery__dot { width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: var(--c-natural-300); transition: background 200ms, transform 200ms; }
.event-gallery__dot.is-active { background: var(--c-natural-800); transform: scale(1.4); }

/* Desktop: clip the frame with the image's radius so the slide transition never reveals square corners */
@media (min-width: 1025px) {
  .event-gallery__frame { border-radius: var(--radius-xl); }
  .event-gallery__img { border-radius: 0; }
}

/* Sticky dark event contact card (article aside) */
.event-contact-card { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--sp-20); padding: 28px; border-radius: var(--radius-s); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #2e2e32 0%, var(--c-natural-900) 100%); }
.event-contact-card__cover { width: 100%; height: 180px; border-radius: var(--radius-s); overflow: hidden; }
.event-contact-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-contact-card__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); line-height: var(--lh-heading); color: var(--c-white); }
.event-contact-card__text { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-white); }
.event-contact-card__content { display: flex; flex-direction: column; gap: var(--sp-8); }

@media (max-width: 1024px) {
  .event-hero__grid { flex-direction: column; gap: var(--sp-48); }
  .event-contact-card { position: relative; top: 0; }
}
@media (max-width: 640px) {
  .event-form__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .event-form__label { width: 100%; }
  .event-gallery__img { border-radius: var(--radius-l); }
}

/* Event CTA mobile — visible only on tablet & mobile */
.event-cta-mobile { display: none; padding-block: var(--sp-48); }
@media (max-width: 1024px) {
  .event-cta-mobile { display: block; }
  .event-cta-mobile .event-contact-card { position: relative; top: 0; }
}

/* ==========================================================================
   SLIDER NAV HIDDEN ON TABLET & MOBILE (swipe replaces arrows/dots)
   ========================================================================== */
@media (max-width: 1024px) {
  .slider__nav,
  .why__nav,
  .proc__nav,
  .cms-card__nav,
  .service-realizations__nav,
  .service-realization__nav,
  .industry-tab__nav,
  .mft-thumbs-nav,
  .event-gallery__nav,
  .event-gallery__btn--prev,
  .event-gallery__btn--next {
    display: none;
  }

  /* Event gallery — native horizontal scroll + swipe on tablet/mobile (slide transform reset) */
  .event-gallery__frame { overflow: visible; }
  .event-gallery__track {
    display: flex;
    gap: var(--sp-16);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--c-natural-300) transparent;
    padding-bottom: var(--sp-12);
    transform: none;
    transition: none;
  }
  .event-gallery__track::-webkit-scrollbar { display: block; height: 4px; }
  .event-gallery__track::-webkit-scrollbar-track { background: transparent; }
  .event-gallery__track::-webkit-scrollbar-thumb { background: var(--c-natural-300); border-radius: 100px; }
  .event-gallery__slide {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
/* Contact hero (reuses .contact section + form) — left intro column */
.contact__cols--top { align-items: stretch; }
.contact__intro--top { flex: 1; min-width: 0; gap: 64px; max-width: none; justify-content: center; }
.contact__intro-head { display: flex; flex-direction: column; gap: var(--sp-div-gap); }
.contact__details { display: flex; flex-direction: column; gap: var(--sp-16); list-style: none; margin: 0; padding: 0; max-width: 300px; }
.contact__detail { display: flex; gap: var(--sp-16); align-items: flex-start; }
.contact__detail svg { width: 24px; height: 24px; flex: none; color: var(--c-natural-900); }
.contact__detail a, .contact__detail span { font-family: var(--font-heading); font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-900); text-decoration: underline; }
@media (hover: hover) {
  .contact__detail a:hover { color: var(--c-brand-500); }
}

.contact__detail--addr a { font-size: var(--fs-body-l); color: rgba(0, 0, 0, 0.8); }
.contact__form-title--brand { color: var(--c-brand-500); }

/* Specialists section (reuses .contact-card visuals in a 3-col grid) */
.specialists { background: var(--c-white); padding-block: var(--sp-section-pad); }
.specialists__container { max-width: var(--layout-container); margin-inline: auto; padding-inline: var(--sp-container-pad); display: flex; flex-direction: column; gap: var(--sp-div-gap); align-items: center; }
.specialists__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); color: var(--c-natural-900); text-align: center; max-width: var(--layout-content); margin: 0; }
.specialists__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-div-gap); width: 100%; align-items: stretch; }
.contact-card--grid { position: relative; top: auto; width: 100%; }

/* Map section */
.map { background: var(--c-white); padding-block: var(--sp-section-pad); }
.map__container { max-width: var(--layout-container); margin-inline: auto; padding-inline: var(--sp-container-pad); display: flex; flex-direction: column; gap: var(--sp-16); align-items: center; }
.map__embed { width: 100%; height: 640px; border-radius: var(--radius-s); border: 0; display: block; }
.map__link { display: inline-flex; gap: 6px; align-items: center; }
.map__link svg { width: 24px; height: 24px; flex: none; color: var(--c-brand-500); }
.map__link a { font-family: var(--font-heading); font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-900); text-decoration: underline; }
@media (hover: hover) {
  .map__link a:hover { color: var(--c-brand-500); }
}


/* Company legal-details bar */
.company-details { background: var(--c-white); padding-block: var(--sp-section-pad); }
.company-details__container { max-width: var(--layout-container); margin-inline: auto; padding-inline: var(--sp-container-pad); }
.company-details__row { display: flex; align-items: stretch; justify-content: space-between; gap: var(--sp-24); }
.company-details__item { display: flex; flex-direction: column; gap: var(--sp-8); justify-content: center; }
.company-details__label { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-overline); letter-spacing: 0.7px; line-height: 1; text-transform: uppercase; color: var(--c-black); }
.company-details__value { font-family: var(--font-heading); font-weight: var(--fw-regular); font-size: var(--fs-body-l); line-height: var(--lh-normal); color: rgba(0, 0, 0, 0.8); }
.company-details__value a { color: inherit; text-decoration: underline; }
@media (hover: hover) {
  .company-details__value a:hover { color: var(--c-brand-500); }
}

.company-details__sep { width: 1px; align-self: stretch; flex: none; background: rgba(0, 0, 0, 0.1); }

@media (max-width: 1024px) {
  .specialists__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 100%; margin-inline: auto; }
  .company-details__row {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .company-details__sep {
    display: block;
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}
@media (max-width: 1024px) {
  .contact__cols--top { flex-direction: column-reverse; }
  .contact__intro--top { gap: var(--sp-div-gap); }
}
@media (max-width: 640px) {
  .specialists__grid { grid-template-columns: minmax(0, 1fr); }
  .company-details__row {
    gap: 16px;
  }
  .company-details__row .company-details__item:nth-of-type(3),
  .company-details__row .company-details__item:nth-of-type(4),
  .company-details__row .company-details__item:nth-of-type(5) {
    grid-column: span 1;
  }
  .map__embed { height: 360px; }
}

/* ==========================================================================
   PROJEKTY UE (EU-funded projects)
   ========================================================================== */
.eu-projects { background: var(--c-white); padding-block: var(--sp-section-pad); }
.eu-projects__container { max-width: var(--layout-container); margin-inline: auto; padding-inline: var(--sp-container-pad); display: flex; flex-direction: column; gap: 64px; align-items: center; }
.eu-projects__body { width: 100%; max-width: var(--layout-content); margin-inline: auto; display: flex; flex-direction: column; gap: 64px; }
.eu-projects__divider { width: 100%; height: 1px; background: var(--c-natural-200); }
.eu-project { width: 100%; }
.eu-project .h2 { letter-spacing: var(--ls-wide); }
.eu-meta { display: flex; flex-direction: column; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; width: 100%; }
.eu-meta li { font-size: var(--fs-body-m); line-height: var(--lh-normal); color: var(--c-natural-500); }
.eu-meta li strong { font-weight: var(--fw-bold); }
.eu-projects__logos { width: 100%; max-width: 1248px; height: auto; display: block; margin-inline: auto; }

/* ==========================================================================
   TABLET / MOBILE — global full-width overrides (≤ 1024px)
   All containers, tracks, and content wrappers stretch to 100%.
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- Containers --- */
  [class$="__container"],
  [class*="__container "] {
    width: 100%;
    max-width: 100%;
    padding-inline: var(--sp-container-pad);
  }

  /* --- Content wrappers (text blocks capped at 800/592/520 on desktop) --- */
  [class$="__content"],
  [class*="__content "],
  .devices__content {
    width: 100%;
    max-width: 100%;
  }

  /* --- Slider tracks: simplified padding on tablet --- */
  .why__track,
  .proc__track,
  .mft-cards__track {
    padding-inline-start: var(--sp-container-pad);
    padding-inline-end: var(--sp-container-pad);
    scroll-padding-inline-start: var(--sp-container-pad);
    /* Reduce the desktop-sized bottom padding (needed for hover shadow lift) to
       a minimum-safe value — 44 px = shadow-offset(28) + blur(48) − lift(32).
       On touch devices the @media (hover:none) block tightens it further. */
    padding-block-end: 44px;
  }

  /* --- Navbar full-width --- */
  .navbar__inner {
    max-width: 100%;
    padding-inline: var(--sp-container-pad);
  }

  /* --- Footer full-width --- */
  .footer__main,
  .footer__bottom {
    max-width: 100%;
  }

  /* --- Page-hero container --- */
  .page-hero__container {
    max-width: 100%;
    padding-inline: var(--sp-container-pad);
  }
}