/* ============================================================
   SKILL & CHILL — style.css
   Design system: ciemny, premium, technologiczny
   2026-06-24
   ============================================================ */

/* ── 1. DESIGN TOKENS ── */
:root {
  --color-accent:     #57EB91;
  --color-accent-rgb: 87, 235, 145;

  --bg-base:         #09090B;
  --bg-surface:      #0F1113;
  --bg-card:         #141719;
  --bg-card-hover:   #181C1F;
  --bg-cta:          #0B1510;

  --accent:          var(--color-accent);
  --accent-hover:    var(--color-accent);
  --accent-dim:      rgba(var(--color-accent-rgb), 0.10);
  --accent-glow:     rgba(var(--color-accent-rgb), 0.15);

  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(var(--color-accent-rgb), 0.28);
  --border-subtle:   rgba(255, 255, 255, 0.04);

  --text-primary:    #F0F2F1;
  --text-muted:      #8A9490;
  --text-faint:      #4E5854;

  --nav-height:      72px;
  --radius-card:     16px;
  --radius-sm:       10px;

  --shape-panel:     4px;
  --shape-card:      4px;
  --shape-control:   4px;
  --shape-tag:       2px;

  --shadow-card:     0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-hover:    0 0 0 1px var(--border-hover), 0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-glow:     0 0 60px rgba(var(--color-accent-rgb), 0.12);

  --transition:      0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* fallback */
  overflow-x: clip;   /* nie tworzy scroll-containera → position:sticky działa */
}

body.no-scroll { overflow: hidden; }

/* Warstwa kursora tworzy własny kontekst pomiędzy tłem body a treścią. */
body {
  isolation: isolate;
}

body > main {
  position: relative;
  z-index: auto;
}

body > footer {
  position: relative;
  z-index: 2;
}

main.page-entered {
  animation: none;
  opacity: 1;
  transform: none;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
address { font-style: normal; }

/* ── ORGANIC BACKGROUND CURSOR GLOW ──────────────────────────────── */
.sc-cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: strict;
  transition: none;
  will-change: opacity;
}

.sc-cursor-glow__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media (any-hover: none) and (any-pointer: coarse) {
  .sc-cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cursor-glow { display: none; }
}

/* ── 3. TYPOGRAPHY ── */
h1, h2, h3, h4 {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Nazwy marek / produktów nie powinny się łamać w środku */
.brand-nowrap {
  white-space: nowrap;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 600; }
h4 { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; }

p { color: var(--text-muted); line-height: 1.72; }

/* ── 4. LAYOUT ── */
.container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
  padding: 96px 0;
}

.section--surface {
  background-color: var(--bg-surface);
}

.section--slim {
  padding: 40px 0;
}

main {
  animation: pageEnter 420ms ease both;
}

.section::before,
.service-block::before,
.product-section::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.055), transparent);
  pointer-events: none;
}

.section--surface::after,
.service-block--alt::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--color-accent-rgb), 0.025), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.012), transparent 28%);
  pointer-events: none;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Section Header */
.section-header {
  margin-bottom: 56px;
}

.section-header--center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 56px;
}

.section-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.section-title {
  color: var(--text-primary);
  margin-bottom: 20px;
  text-wrap: balance;
}

.section-desc {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.72;
}

.section-footer {
  margin-top: 48px;
  text-align: center;
}

/* ── 5. BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--shape-control);
  padding: 13px 28px;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
}

.btn--primary {
  background-color: var(--accent);
  color: #09090B;
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.3);
}

.btn--secondary {
  background-color: transparent;
  color: var(--accent);
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.40);
}
.btn--secondary:hover {
  background-color: var(--accent-dim);
  border-color: var(--accent);
}

.btn--sm {
  padding: 9px 20px;
  font-size: 0.84rem;
}

/* ── 6. NAVBAR ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background:
    linear-gradient(180deg, rgba(9, 11, 12, 0.72), rgba(9, 9, 11, 0.54)),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.035), transparent 34%, rgba(var(--color-accent-rgb), 0.025));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  --scroll-progress: 0%;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar::before,
.navbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
}

.navbar::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}

.navbar::after {
  right: auto;
  width: var(--scroll-progress);
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.10), rgba(var(--color-accent-rgb), 0.58), rgba(255,255,255,0.20));
  box-shadow: 0 0 14px rgba(var(--color-accent-rgb), 0.16);
  transition: width 0.08s linear;
}

.navbar.scrolled {
  background:
    linear-gradient(180deg, rgba(7, 10, 10, 0.96), rgba(8, 9, 10, 0.88)),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.052), transparent 36%, rgba(var(--color-accent-rgb), 0.035));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.24), inset 0 -1px 0 rgba(var(--color-accent-rgb), 0.08);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-logo img {
  height: 40px;
  width: auto;
}

.nav-menu { flex: 1; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-item { position: relative; }

.nav-link, .nav-link--btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 7px;
  overflow: hidden;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.nav-link::before,
.nav-link--btn::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.62), transparent);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.nav-link::after,
.nav-link--btn::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.0);
  box-shadow: none;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.nav-link:hover, .nav-link--btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.035);
}

.nav-link:hover::before,
.nav-link--btn:hover::before,
.nav-link--active::before,
.nav-link--btn[aria-expanded="true"]::before {
  opacity: 1;
  transform: scaleX(1);
}

.nav-link:hover::after,
.nav-link--btn:hover::after,
.nav-link--active::after,
.nav-link--btn[aria-expanded="true"]::after {
  background: rgba(var(--color-accent-rgb), 0.70);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.26);
}

.nav-link:focus-visible,
.nav-link--btn:focus-visible {
  outline: 1px solid rgba(var(--color-accent-rgb), 0.34);
  outline-offset: 2px;
}

.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.nav-item--has-dropdown:hover .nav-chevron,
.nav-link--btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown mega-menu */
/* FIX: top:100% eliminuje lukę między przyciskiem a panelem.
   Padding-top:8px daje wizualny odstęp bez fizycznej przerwy.
   ::before bridge dodatkowo chroni przed edge-case'ami cross-browser. */
.nav-dropdown {
  position: absolute;
  top: 100%;                          /* było: calc(100% + 8px) — ta 8px luka to był root cause */
  left: 50%;
  background:
    radial-gradient(circle at 18% 0%, rgba(var(--color-accent-rgb), 0.065), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 30%),
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px),
    rgba(13, 16, 18, 0.96);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 8px 24px 24px;             /* 8px top padding = wizualny odstęp bez fizycznej przerwy */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255,255,255,0.045);
  min-width: 600px;
  z-index: 100;
  overflow: visible;
}

/* Niewidoczny hover bridge: wypełnia ewentualną przerwę powyżej panelu */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-dropdown::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.22), transparent 42%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.nav-dropdown--mega { min-width: 680px; }

#dropdown-produkty { min-width: 760px; }

.nav-item--has-dropdown:hover .nav-dropdown,
.nav-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  padding-top: 18px;
}

.mega-col {
  position: relative;
  padding: 4px 18px 0;
}

.mega-col + .mega-col {
  border-left: 1px solid rgba(255,255,255,0.055);
}

.mega-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
  padding-left: 12px;
  position: relative;
}

.mega-heading::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}

.mega-col ul { display: flex; flex-direction: column; gap: 6px; }

.mega-heading--spaced { margin-top: 20px; }

#dropdown-produkty .mega-col:first-child .mega-heading--spaced {
  margin-top: 24px;
  padding-top: 1px;
}

.mega-link {
  position: relative;
  font-size: 0.84rem;
  color: var(--text-muted);
  padding: 7px 10px 7px 22px;
  border-radius: 6px;
  transition: color var(--transition), background-color var(--transition), transform var(--transition);
  display: block;
  overflow: hidden;
}

.mega-link::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.mega-link::after {
  content: '›';
  position: absolute;
  right: 10px;
  top: 50%;
  color: rgba(var(--color-accent-rgb), 0.0);
  transform: translateY(-50%) translateX(-4px);
  transition: color var(--transition), transform var(--transition);
}

.mega-link:hover,
.mega-link:focus-visible {
  color: var(--text-primary);
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.075), rgba(255,255,255,0.024));
  transform: translateX(1px);
}

.mega-link:hover::before,
.mega-link:focus-visible::before {
  background: rgba(var(--color-accent-rgb), 0.74);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.22);
}

.mega-link:hover::after,
.mega-link:focus-visible::after {
  color: rgba(var(--color-accent-rgb), 0.62);
  transform: translateY(-50%) translateX(0);
}

.mega-link:focus-visible {
  outline: 1px solid rgba(var(--color-accent-rgb), 0.30);
  outline-offset: 2px;
}

/* Navbar right */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Language toggle */
.lang-wrap { position: relative; }

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all var(--transition);
}
.lang-toggle:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.05); }

.flag-img { border-radius: 2px; }

.lang-menu {
  position: absolute;
  top: 100%;           /* bez luki — padding-top: 8px poniżej */
  padding-top: 8px;
  right: 0;
  background-color: #111316;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  z-index: 200;
}

.lang-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 0.84rem;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all var(--transition);
}
.lang-item img { border-radius: 2px; flex-shrink: 0; }
.lang-item:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.06); }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background-color var(--transition);
}
.hamburger:hover { background-color: rgba(255,255,255,0.06); }

.hamburger-line {
  display: block;
  width: 20px;
  height: 1.8px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
  transform-origin: center;
}

.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* ── 7. MOBILE OVERLAY & MENU ── */
/* BUG FIX: display:none blocked opacity transition — switched to pointer-events approach */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 90vw);
  background-color: #0F1113;
  border-left: 1px solid var(--border);
  z-index: 999;
  overflow-y: auto;
  padding: 80px 24px 32px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-nav-list { display: flex; flex-direction: column; }

.mobile-nav-link {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--transition);
}
.mobile-nav-link:hover { color: var(--accent); }

/* Mobile accordion */
.mobile-accordion { border-bottom: 1px solid var(--border-subtle); }

.mobile-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
}
.mobile-accordion-btn svg {
  flex-shrink: 0;
  transition: transform 0.22s ease;
  color: var(--text-muted);
}
.mobile-accordion-btn.active svg { transform: rotate(180deg); }
.mobile-accordion-btn.active { color: var(--accent); }

.mobile-accordion-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-bottom: 0;
}
.mobile-accordion-content.active {
  max-height: min(68vh, 720px);
  padding-bottom: 12px;
  overflow-y: auto;
}

.mega-link--all-products {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.mobile-product-group + .mobile-product-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.mobile-menu-heading {
  position: relative;
  margin: 2px 12px 7px;
  padding-left: 13px;
  color: var(--color-accent);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mobile-menu-heading::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--color-accent);
  transform: translateY(-50%) rotate(45deg);
}

.mobile-product-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 760px) {
  #dropdown-produkty { min-width: 0; }
}

.mobile-sub-link {
  display: block;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all var(--transition);
}
.mobile-sub-link:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.05); }

.mobile-menu-footer {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-lang-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mobile-lang-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.mobile-lang-item:hover { color: var(--text-primary); border-color: var(--border-hover); }

/* ── 8. HERO ── */
.hero {
  position: relative;
  min-height: 100vh;     /* fallback for older browsers */
  min-height: 100svh;    /* small viewport height — avoids mobile browser chrome overlap */
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* Miękki start hero — maskuje nagłe pojawienie się tła dot-pattern i poświaty */
#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(
    to bottom,
    rgba(9,9,11,0.86) 0%,
    rgba(9,9,11,0.48) 34%,
    rgba(9,9,11,0.12) 68%,
    transparent       100%
  );
  pointer-events: none;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center top, rgba(var(--color-accent-rgb), 0.11) 0%, transparent 65%);
  pointer-events: none;
}

.hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1fr);
  gap: clamp(42px, 4.2vw, 56px);
  align-items: center;
  padding-top: 48px;
  padding-bottom: 80px;
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 590px;
}

.hero-title {
  color: var(--text-primary);
  max-width: 13.6ch;
  line-height: 1.03;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.hero-subline {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.68;
  max-width: 560px;
  margin-bottom: 32px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background-color: rgba(var(--color-accent-rgb), 0.07);
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  border-radius: var(--shape-tag);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Hero visual — business operating system panel */
.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ops-panel {
  width: 100%;
  max-width: 520px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%),
    radial-gradient(circle at 18% 24%, rgba(var(--color-accent-rgb), 0.12), transparent 32%),
    radial-gradient(circle at 82% 30%, rgba(105,135,180,0.10), transparent 30%),
    #0B0F11;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 72px rgba(0,0,0,0.54), 0 0 0 1px rgba(255,255,255,0.045), 0 18px 80px rgba(var(--color-accent-rgb), 0.055);
}

.ops-panel__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: rgba(13,18,20,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.075);
  backdrop-filter: blur(14px);
}

.ops-panel__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  border-radius: 8px;
  color: var(--accent);
  background: rgba(var(--color-accent-rgb), 0.09);
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  font-size: 0.76rem;
  font-weight: 700;
}

.ops-panel__tabs {
  display: flex;
  gap: 7px;
  margin-right: auto;
}

.ops-panel__tabs span {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.ops-panel__tabs span:first-child {
  background: rgba(var(--color-accent-rgb), 0.48);
}

.ops-panel__state {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ops-panel__state span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
}

.ops-panel__state span:first-child {
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.62);
}

.ops-panel__body {
  position: relative;
  aspect-ratio: 16 / 10.4;
  overflow: hidden;
  padding: 22px;
}

.ops-grid-lines {
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255,255,255,0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, black 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 12%, transparent 76%);
}

.ops-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ops-line {
  stroke: rgba(162,174,168,0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ops-flow {
  stroke: rgba(var(--color-accent-rgb), 0.62);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 0.035 0.965;
  animation: opsFlow 5.2s linear infinite;
  filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), 0.30));
  vector-effect: non-scaling-stroke;
}

.ops-flow--b { animation-delay: -0.8s; }
.ops-flow--c { animation-delay: -1.5s; }
.ops-flow--d { animation-delay: -2.2s; }
.ops-flow--e { animation-delay: -2.9s; }

@keyframes opsFlow {
  to { stroke-dashoffset: -1; }
}

.ops-module {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 112px;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24,29,31,0.94), rgba(12,16,18,0.90));
  box-shadow: 0 16px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}

.ops-module::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  right: 12px;
  top: 12px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.82);
  box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.45);
}

.ops-module strong {
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.2;
}

.ops-module--core {
  left: 50%;
  top: 50%;
  z-index: 2;
  min-width: 142px;
  min-height: 90px;
  transform: translate(-50%, -50%);
  border-color: rgba(var(--color-accent-rgb), 0.28);
  background: linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.16), rgba(13,17,19,0.92));
  box-shadow: 0 22px 48px rgba(0,0,0,0.40), 0 0 34px rgba(var(--color-accent-rgb), 0.08), inset 0 1px 0 rgba(255,255,255,0.07);
}

.ops-module--it { left: 9%; top: 18%; }
.ops-module--docs { right: 7%; top: 18%; }
.ops-module--workflow { left: 8%; bottom: 20%; }
.ops-module--ai { right: 8%; bottom: 22%; }

.ops-status {
  position: absolute;
  z-index: 3;
  padding: 6px 10px 6px 24px;
  color: rgba(240,242,241,0.86);
  background: rgba(9,13,14,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.ops-status::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.82);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.42);
  transform: translateY(-50%);
}

.ops-status--agent { left: 36%; top: 12%; }
.ops-status--workflow { right: 8%; top: 47%; }
.ops-status--documents { left: 6%; top: 50%; }
.ops-status--erp { left: 38%; bottom: 11%; }

/* ═══════════════════════════════════════════════
   OPS PANEL — interaktywny mini-dashboard
   ═══════════════════════════════════════════════ */

.ops-module {
  cursor: pointer;
  user-select: none;
  transition: opacity 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.ops-status {
  cursor: pointer;
  user-select: none;
  transition: border-color 190ms ease;
}

.ops-module:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.ops-status:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ops-module:hover,
.ops-module:focus-visible {
  border-color: rgba(var(--color-accent-rgb), 0.36);
}

.ops-status:hover,
.ops-status:focus-visible {
  border-color: rgba(var(--color-accent-rgb), 0.28);
}

/* ── Stan hovering (ustawiany przez JS) ── */

.ops-panel--hovering .ops-module {
  opacity: 0.38;
}

.ops-panel--hovering .ops-module--core {
  opacity: 0.52;
}

.ops-panel--hovering.ops-panel--hover-it       .ops-module--it,
.ops-panel--hovering.ops-panel--hover-docs     .ops-module--docs,
.ops-panel--hovering.ops-panel--hover-workflow .ops-module--workflow,
.ops-panel--hovering.ops-panel--hover-ai       .ops-module--ai {
  opacity: 1;
  border-color: rgba(var(--color-accent-rgb), 0.46);
  box-shadow: 0 16px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.07),
              0 0 0 1px rgba(var(--color-accent-rgb), 0.14);
}

.ops-panel--hovering.ops-panel--hover-core .ops-module:not(.ops-module--core) {
  opacity: 0.48;
}

.ops-panel--hovering.ops-panel--hover-core .ops-module--core {
  opacity: 1;
  border-color: rgba(var(--color-accent-rgb), 0.54);
  box-shadow: 0 22px 48px rgba(0,0,0,0.40), 0 0 28px rgba(var(--color-accent-rgb), 0.11),
              inset 0 1px 0 rgba(255,255,255,0.09);
}

/* ── Linie SVG — dimowanie i podświetlenie ── */

.ops-panel--hovering .ops-flow {
  stroke: rgba(var(--color-accent-rgb), 0.17);
  filter: none;
}

.ops-panel--hovering.ops-panel--hover-it       .ops-flow--a,
.ops-panel--hovering.ops-panel--hover-docs     .ops-flow--b,
.ops-panel--hovering.ops-panel--hover-workflow .ops-flow--c,
.ops-panel--hovering.ops-panel--hover-ai       .ops-flow--d {
  stroke: rgba(var(--color-accent-rgb), 0.92);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(var(--color-accent-rgb), 0.40));
}

.ops-panel--hovering.ops-panel--hover-core .ops-flow--a,
.ops-panel--hovering.ops-panel--hover-core .ops-flow--b,
.ops-panel--hovering.ops-panel--hover-core .ops-flow--c,
.ops-panel--hovering.ops-panel--hover-core .ops-flow--d {
  stroke: rgba(var(--color-accent-rgb), 0.78);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 3px rgba(var(--color-accent-rgb), 0.34));
}

.ops-panel--hovering.ops-panel--hover-it       .ops-line--a,
.ops-panel--hovering.ops-panel--hover-docs     .ops-line--b,
.ops-panel--hovering.ops-panel--hover-workflow .ops-line--c,
.ops-panel--hovering.ops-panel--hover-ai       .ops-line--d {
  stroke: rgba(255,255,255,0.10);
}

/* Aktywny (kliknięty) moduł */
.ops-module[aria-pressed="true"] {
  border-color: rgba(var(--color-accent-rgb), 0.50) !important;
}

/* ── Panel informacyjny ── */

.ops-info-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 230ms ease, opacity 190ms ease;
}

.ops-info-panel.is-visible {
  grid-template-rows: 1fr;
  opacity: 1;
}

.ops-info-panel__inner {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.ops-info-panel__text {
  flex: 1;
  min-width: 0;
}

.ops-info-panel__title {
  display: block;
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-info-panel__desc {
  color: rgba(162,174,168,0.82);
  font-size: 0.67rem;
  line-height: 1.48;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ops-info-panel__cta {
  flex-shrink: 0;
  padding: 6px 10px;
  background: rgba(var(--color-accent-rgb), 0.10);
  border: 1px solid rgba(var(--color-accent-rgb), 0.26);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  transition: background 170ms ease, border-color 170ms ease;
}

.ops-info-panel__cta:hover {
  background: rgba(var(--color-accent-rgb), 0.18);
  border-color: rgba(var(--color-accent-rgb), 0.42);
}

.ops-info-panel__cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ops-module,
  .ops-status,
  .ops-info-panel,
  .ops-info-panel__cta {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }

  .navbar::after {
    display: none;
  }

  .nav-link::before,
  .nav-link--btn::before,
  .nav-link::after,
  .nav-link--btn::after,
  .mega-link,
  .mega-link::before,
  .mega-link::after,
  .nav-dropdown {
    transition: none;
  }

  .ops-flow,
  .hvb-pulse {
    animation: none;
  }
}

/* Hero badge overlay */
.hero-visual-badge {
  position: absolute;
  bottom: -16px;
  right: -12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: #1A1D20;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.hvb-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.4); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0); }
}

/* ── 9. SOCIAL PROOF ── */
.social-proof {
  padding: 42px 0 46px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--color-accent-rgb), 0.035), transparent 58%),
    var(--bg-surface);
}

.proof-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  margin-bottom: 28px;
}

.marquee-wrap {
  overflow: hidden;
  position: relative;
  line-height: 0;
  padding: 3px 0;
}

.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(32px, 7vw, 112px);
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-surface), transparent);
}
.marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-surface), transparent);
}

.marquee-track {
  display: inline-flex;
  vertical-align: top;
  will-change: transform;
  animation: marquee 40s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  padding: 6px clamp(6px, .75vw, 11px);
  flex-shrink: 0;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-to, -50%)); }
}

.client-logo {
  display: block;
  width: clamp(156px, 15vw, 194px);
  height: clamp(72px, 6.5vw, 84px);
  padding: 15px 20px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  opacity: 1;
  visibility: visible;
  filter: none;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;
  background: rgba(247, 249, 248, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
}

.client-logo--erste {
  padding: 16px 25px;
}

@media (hover: hover) and (pointer: fine) {
  .client-logo:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(var(--color-accent-rgb), 0.10);
  }
}

/* ── 10. O NAS ── */
.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.about-badge {
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background-color: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--shape-tag);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.about-badge:hover {
  color: var(--accent);
  border-color: rgba(var(--color-accent-rgb), 0.3);
  background-color: var(--accent-dim);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar-card {
  padding: 32px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--shape-card);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.pillar-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.32);
}

.pillar-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-dim);
  border-radius: 12px;
  color: var(--accent);
  margin-bottom: 20px;
}

.pillar-title {
  color: var(--text-primary);
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.pillar-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── 11. USŁUGI ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Center last 2 cards when grid has 5 items (3+2 → balanced centering) */
@media (min-width: 1025px) {
  .services-grid .service-card:nth-child(4) { grid-column-start: 2; }
}

.service-card {
  padding: 32px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: all var(--transition);
}
.service-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-dim);
  border-radius: 12px;
  color: var(--accent);
  margin-bottom: 20px;
}

.service-title {
  color: var(--text-primary);
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.service-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 20px;
}

.service-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

.service-tags li {
  font-size: 0.78rem;
  color: var(--text-faint);
  padding-left: 12px;
  position: relative;
}
.service-tags li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent);
}

.service-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--transition), letter-spacing var(--transition);
  margin-top: auto;
}
.service-link:hover { letter-spacing: 0.02em; }

/* ── 11b. SERVICES SHOWCASE ── */
.svc-showcase {
  display: grid;
  grid-template-columns: 268px 1fr;
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: var(--shape-panel);
  overflow: hidden;
  background: #0F1214;
  position: relative;
}

/* Rail */
.svc-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}

.svc-rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: none;
  border-radius: var(--shape-control);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #A4B0AC;
  position: relative;
  transition: color var(--transition), background var(--transition);
  width: 100%;
}

.svc-rail-item:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.04);
}

.svc-rail-item.is-active {
  color: var(--text-primary);
  background: rgba(var(--color-accent-rgb), 0.07);
}

.svc-rail-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2.5px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.svc-rail-item:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.5);
  outline-offset: 2px;
}

.svc-rail-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: var(--text-faint);
  transition: background var(--transition), color var(--transition);
}

.svc-rail-item:hover .svc-rail-icon {
  color: var(--text-muted);
}

.svc-rail-item.is-active .svc-rail-icon {
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--accent);
}

.svc-rail-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}

.svc-rail-chevron {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
}

.svc-rail-item.is-active .svc-rail-chevron {
  opacity: 1;
  transform: translateX(0);
}

/* Detail panel */
.svc-panel {
  position: relative;
  padding: 44px 48px;
  transition: opacity 0.2s ease;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.45) 0%, transparent 55%);
  pointer-events: none;
  z-index: 3;
}

.svc-panel.is-changing {
  opacity: 0;
  pointer-events: none;
}

.svc-panel-content[hidden] {
  display: none;
}

/* Treść panelu — nad warstwą graficzną */
.svc-panel-content {
  position: relative;
  z-index: 2;
}

/* Warstwa graficzna usługi — analogicznie jak .prod-visual */
.svc-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  transition: opacity 0.22s ease;
}

.svc-visual--hidden {
  opacity: 0;
}

/* Scrim — ciemna warstwa przy lewej krawędzi dla czytelności tekstu */
.svc-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(10,14,15,0.96) 0%,
    rgba(10,14,15,0.88) 24%,
    rgba(10,14,15,0.60) 44%,
    rgba(10,14,15,0.22) 62%,
    transparent         78%
  );
  pointer-events: none;
}

/* Warstwa ostra — dominuje po prawej */
.svc-visual__sharp {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.38) 32%,
    rgba(0,0,0,0.82) 56%,
    #000             100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.12) 0%,
    rgba(0,0,0,0.38) 32%,
    rgba(0,0,0,0.82) 56%,
    #000             100%
  );
}

/* Warstwa rozmyta — dominuje po lewej, zanika w prawo */
.svc-visual__blurred {
  position: absolute;
  inset: -14px;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: blur(24px);
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.52) 34%,
    rgba(0,0,0,0.18) 56%,
    transparent       72%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.52) 34%,
    rgba(0,0,0,0.18) 56%,
    transparent       72%
  );
}

.svc-panel-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-accent-rgb), 0.1);
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  border-radius: 4px;
  color: var(--accent);
  margin-bottom: 24px;
  flex-shrink: 0;
}

.svc-panel-title {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #F4F7F5;
  margin-bottom: 12px;
  line-height: 1.15;
}

.svc-panel-desc {
  font-size: 0.93rem;
  color: #C2CCC9;
  line-height: 1.72;
  margin-bottom: 26px;
  max-width: 500px;
}

.svc-panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.svc-panel-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.87rem;
  color: #E3EAE7;
  font-weight: 600;
}

.svc-panel-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.85;
}

.svc-panel-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

/* Tablet */
@media (max-width: 1024px) {
  .svc-showcase {
    grid-template-columns: 230px 1fr;
  }
  .svc-panel {
    padding: 36px 38px;
  }
  .svc-visual__blurred { filter: blur(18px); }
}

/* Mobile — stacked */
@media (max-width: 768px) {
  .svc-showcase {
    grid-template-columns: 1fr;
    margin-top: 32px;
    border-radius: var(--shape-panel);
  }
  .svc-rail {
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: rgba(0,0,0,0.22);
  }
  .svc-rail-item {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 10px 12px;
    border-radius: var(--shape-control);
    gap: 8px;
  }
  .svc-rail-item::before { display: none; }
  .svc-rail-item.is-active {
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  }
  .svc-rail-icon { width: 28px; height: 28px; }
  .svc-rail-name { font-size: 0.78rem; }
  .svc-rail-chevron { display: none; }
  .svc-panel {
    padding: 28px 24px;
    min-height: unset;
  }
  .svc-visual__blurred { filter: blur(12px); }
  .svc-visual::after {
    background: linear-gradient(
      to right,
      rgba(10,14,15,0.97) 0%,
      rgba(10,14,15,0.90) 28%,
      rgba(10,14,15,0.62) 50%,
      rgba(10,14,15,0.20) 70%,
      transparent         86%
    );
  }
}

@media (max-width: 480px) {
  .svc-rail-item {
    min-width: 120px;
    padding: 9px 10px;
  }
  .svc-rail-icon { display: none; }
  .svc-panel { padding: 22px 18px; }
}

/* ── 12. SONORA AI AGENT ── */
/* BUG FIX: removed redundant padding:96px 0 — inherited from .section */
.sonora-section {
  position: relative;
  background-color: var(--bg-base);
  overflow: hidden;
}

.sonora-glow {
  position: absolute;
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.sonora-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}

.sonora-sub {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: -8px;
  margin-bottom: 24px;
}

.sonora-lead {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.74;
  margin-bottom: 28px;
}

.sonora-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.sonora-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.sonora-facts li svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

/* Sonora phone visual */
.sonora-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sonora-phone {
  width: 220px;
  aspect-ratio: 9/19;
  background-color: #141719;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), var(--shadow-glow);
  position: relative;
}

.sonora-phone::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  background-color: rgba(255,255,255,0.15);
  border-radius: 100px;
  z-index: 2;
}

.sonora-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
}

.sonora-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sonora-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  background: linear-gradient(180deg, #0A0E0F 0%, #0D1510 100%);
}

.sonora-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
}

.sonora-wave span {
  display: block;
  width: 4px;
  border-radius: 100px;
  background-color: var(--accent);
  animation: wave 1.2s ease-in-out infinite;
}
.sonora-wave span:nth-child(1) { height: 14px; animation-delay: 0s; }
.sonora-wave span:nth-child(2) { height: 26px; animation-delay: 0.1s; }
.sonora-wave span:nth-child(3) { height: 34px; animation-delay: 0.2s; }
.sonora-wave span:nth-child(4) { height: 22px; animation-delay: 0.3s; }
.sonora-wave span:nth-child(5) { height: 16px; animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50%       { transform: scaleY(0.45); opacity: 0.35; }
}

.sonora-placeholder-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.sonora-placeholder-sub {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
}

.sonora-dots {
  display: flex;
  gap: 6px;
}
.sonora-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  animation: dotPulse 1.5s ease-in-out infinite;
}
.sonora-dots span:nth-child(2) { animation-delay: 0.2s; }
.sonora-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%       { opacity: 1; transform: scale(1.1); }
}

/* ── 13. PRODUKTY ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 28px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: all var(--transition);
  cursor: pointer;
}
.product-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.product-icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-dim);
  border-radius: 10px;
  color: var(--accent);
  margin-bottom: 16px;
}

.product-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.product-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.product-link-hint {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition);
}
.product-card:hover .product-link-hint {
  opacity: 1;
  transform: translateX(0);
}

/* ── 13b. PRODUCT SHOWCASE (homepage) ── */
.prod-showcase {
  display: grid;
  grid-template-columns: 1fr 296px;
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: var(--shape-panel);
  overflow: hidden;
  background: #0F1214;
  align-items: stretch;
}

/* Featured panel */
.prod-featured {
  position: relative;
  padding: 52px 56px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.2s ease;
}

.prod-featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.45) 0%, transparent 55%);
  pointer-events: none;
  z-index: 3;
}

.prod-featured.is-changing {
  opacity: 0;
  pointer-events: none;
}

.prod-featured-content[hidden] {
  display: none;
}

.prod-featured-icon {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--color-accent-rgb), 0.1);
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  border-radius: 4px;
  color: var(--accent);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.prod-featured-name {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.1;
}

.prod-featured-desc {
  font-size: 0.91rem;
  color: var(--text-muted);
  line-height: 1.72;
  margin-bottom: 16px;
  max-width: 420px;
}

.prod-featured-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

/* Copy wrapper */
.prod-featured-copy {
  display: flex;
  flex-direction: column;
}

/* Label — kategoria produktu */
.prod-featured-label {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 8px;
}

/* Lead — hasło wartości */
.prod-featured-lead {
  font-size: 1.0rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 10px;
  max-width: 420px;
}

/* Tagi / wyróżniki */
.prod-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.prod-featured-tags span {
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--text-faint);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--shape-tag);
  padding: 3px 11px;
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ── ANIMACJA WEJŚCIA — stan domyślny: elementy ukryte (bez przejścia) ── */
.prod-featured-content .prod-featured-icon,
.prod-featured-content .prod-featured-label,
.prod-featured-content .prod-featured-name,
.prod-featured-content .prod-featured-lead,
.prod-featured-content .prod-featured-desc,
.prod-featured-content .prod-featured-tags,
.prod-featured-content .prod-featured-cta {
  opacity: 0;
  transform: translateY(10px);
}

.prod-featured-content .prod-featured-cta {
  visibility: hidden;
}

/* is-entering: staggerowane pojawianie się treści */
.prod-featured-content.is-entering .prod-featured-icon {
  opacity: 1;
  transform: none;
  transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0ms;
}

.prod-featured-content.is-entering .prod-featured-label {
  opacity: 1;
  transform: none;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 80ms;
}

.prod-featured-content.is-entering .prod-featured-name {
  opacity: 1;
  transform: none;
  transition: opacity 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 160ms;
}

.prod-featured-content.is-entering .prod-featured-lead {
  opacity: 1;
  transform: none;
  transition: opacity 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 250ms;
}

.prod-featured-content.is-entering .prod-featured-desc {
  opacity: 1;
  transform: none;
  transition: opacity 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 340ms;
}

.prod-featured-content.is-entering .prod-featured-tags {
  opacity: 1;
  transform: none;
  transition: opacity 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 460ms;
}

.prod-featured-content.is-entering .prod-featured-cta {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0s;
  transition-delay: 580ms;
}

/* Reduced motion: bez opóźnień i bez translateY */
@media (prefers-reduced-motion: reduce) {
  .prod-featured-content .prod-featured-icon,
  .prod-featured-content .prod-featured-label,
  .prod-featured-content .prod-featured-name,
  .prod-featured-content .prod-featured-lead,
  .prod-featured-content .prod-featured-desc,
  .prod-featured-content .prod-featured-tags,
  .prod-featured-content .prod-featured-cta {
    transform: none;
  }
  .prod-featured-content.is-entering .prod-featured-icon,
  .prod-featured-content.is-entering .prod-featured-label,
  .prod-featured-content.is-entering .prod-featured-name,
  .prod-featured-content.is-entering .prod-featured-lead,
  .prod-featured-content.is-entering .prod-featured-desc,
  .prod-featured-content.is-entering .prod-featured-tags {
    opacity: 1;
    transition: opacity 80ms ease;
    transition-delay: 0ms;
  }
  .prod-featured-content.is-entering .prod-featured-cta {
    opacity: 1;
    visibility: visible;
    transition: opacity 80ms ease, visibility 0s;
    transition-delay: 0ms;
  }
}

/* Treść panelu — nad warstwą graficzną */
.prod-featured-content {
  position: relative;
  z-index: 2;
}

/* Warstwa graficzna — kontener (sharp + blurred) */
.prod-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  transition: opacity 0.22s ease;
}

.prod-visual--hidden {
  opacity: 0;
}

/* Scrim — ciemna warswa przy lewej krawędzi dla czytelności tekstu */
.prod-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(15,18,20,0.72) 0%,
    rgba(15,18,20,0.30) 40%,
    transparent         65%
  );
  pointer-events: none;
}

/* Warstwa ostra — dominuje po prawej */
.prod-visual__sharp {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.62) 28%,
    rgba(0,0,0,0.90) 56%,
    #000             100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.42) 0%,
    rgba(0,0,0,0.62) 28%,
    rgba(0,0,0,0.90) 56%,
    #000             100%
  );
}

/* Warstwa rozmyta — dominuje po lewej, zanika w prawo */
.prod-visual__blurred {
  position: absolute;
  inset: -10px; /* kompensacja artefaktów blur przy krawędziach */
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  filter: blur(16px);
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 40%,
    transparent       68%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0.62) 0%,
    rgba(0,0,0,0.28) 40%,
    transparent       68%
  );
}

/* Product index rail */
.prod-switcher {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  background: transparent;
}

.prod-switch-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 14px 17px 12px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-muted);
  width: 100%;
  position: relative;
  transition: color var(--transition), border-color var(--transition);
}

.prod-switch-item:last-child {
  border-bottom: none;
}

.prod-idx {
  flex-shrink: 0;
  width: 22px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  line-height: 1.5;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
  transition: color var(--transition);
}

.prod-switch-icon {
  display: none;
}

.prod-switch-meta {
  min-width: 0;
  flex: 1;
}

.prod-switch-name {
  display: block;
  font-size: 0.81rem;
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform var(--transition);
}

.prod-switch-desc {
  display: block;
  font-size: 0.7rem;
  color: var(--text-faint);
  line-height: 1.4;
}

.prod-switch-dot {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  align-self: center;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition), transform var(--transition);
  color: var(--accent);
}

.prod-switch-dot::after {
  content: '→';
  font-size: 0.78rem;
  line-height: 1;
  display: block;
}

/* Active state */
.prod-switch-item.is-active {
  color: var(--text-primary);
  background: transparent;
  border-left-color: var(--accent);
}

.prod-switch-item.is-active .prod-idx {
  color: var(--accent);
}

.prod-switch-item.is-active .prod-switch-dot {
  opacity: 1;
  transform: translateX(0);
  background: none;
  box-shadow: none;
}

/* Hover state */
.prod-switch-item:hover {
  color: var(--text-primary);
  background: transparent;
}

.prod-switch-item:hover .prod-switch-name {
  transform: translateX(3px);
}

.prod-switch-item:hover .prod-switch-dot {
  opacity: 0.4;
  transform: translateX(0);
}

.prod-switch-item:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.5);
  outline-offset: 2px;
}

/* Tablet */
@media (max-width: 1024px) {
  .prod-showcase {
    grid-template-columns: 1fr 256px;
  }

  .prod-featured {
    padding: 40px 44px;
  }
}

/* Mobile — stacked: featured on top, switcher as horizontal scroll below */
@media (max-width: 768px) {
  .prod-showcase {
    grid-template-columns: 1fr;
    border-radius: var(--shape-panel);
  }

  .prod-featured {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 28px 24px;
    justify-content: flex-start;
  }

  .prod-visual__blurred { filter: blur(10px); }

  .prod-visual::after {
    background: linear-gradient(
      to right,
      rgba(15,18,20,0.80) 0%,
      rgba(15,18,20,0.46) 36%,
      rgba(15,18,20,0.12) 66%,
      transparent         84%
    );
  }

  /* Mobile: horizontal index scroll */
  .prod-switcher {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0;
    padding: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }

  .prod-switcher::-webkit-scrollbar { height: 3px; }
  .prod-switcher::-webkit-scrollbar-track { background: transparent; }
  .prod-switcher::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

  .prod-switch-item {
    flex-shrink: 0;
    width: 148px;
    min-height: 44px;
    scroll-snap-align: start;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    border-left: none;
    border-right: 1px solid rgba(255,255,255,0.06);
    border-top: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    gap: 4px;
    padding: 12px 10px;
  }

  .prod-switch-item:last-child {
    border-right: none;
  }

  .prod-switch-item.is-active {
    border-top-color: var(--accent);
    background: transparent;
  }

  .prod-switch-name {
    white-space: normal;
    font-size: 0.76rem;
    transform: none !important;
  }

  .prod-switch-desc { display: none; }

  .prod-switch-dot { display: none; }
}

@media (max-width: 480px) {
  .prod-switch-item { width: 126px; }
  .prod-featured { padding: 22px 18px; }
  .prod-featured-icon { width: 52px; height: 52px; }
}

/* Mobile: opóźnienia animacji skrócone o ~25% */
@media (max-width: 768px) {
  .prod-featured-content.is-entering .prod-featured-icon  { transition-delay: 0ms; }
  .prod-featured-content.is-entering .prod-featured-label { transition-delay: 60ms; }
  .prod-featured-content.is-entering .prod-featured-name  { transition-delay: 120ms; }
  .prod-featured-content.is-entering .prod-featured-lead  { transition-delay: 190ms; }
  .prod-featured-content.is-entering .prod-featured-desc  { transition-delay: 255ms; }
  .prod-featured-content.is-entering .prod-featured-tags  { transition-delay: 345ms; }
  .prod-featured-content.is-entering .prod-featured-cta   { transition-delay: 435ms; }
  .prod-featured-tags { margin-bottom: 20px; }
  .prod-featured-lead { font-size: 0.95rem; }
}

/* ── 14. DLACZEGO ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  padding: 36px 32px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--shape-card);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.why-card:hover {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 4px 20px rgba(0,0,0,0.32);
}

.why-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.35;
  margin-bottom: 20px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.why-title {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.why-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.68;
}

/* ── 15. PORTFOLIO ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.portfolio-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--transition);
}
.portfolio-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.portfolio-img-wrap {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #0A0D0F;
}

.portfolio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.4s ease;
}
.portfolio-card:hover .portfolio-img { transform: scale(1.04); }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(9,9,11,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.portfolio-card:hover .portfolio-overlay { opacity: 1; }

.portfolio-overlay-btn {
  padding: 9px 20px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent);
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.5);
  border-radius: var(--radius-sm);
  background-color: rgba(var(--color-accent-rgb), 0.08);
  transition: all var(--transition);
}
.portfolio-overlay-btn:hover {
  background-color: rgba(var(--color-accent-rgb), 0.18);
  border-color: var(--accent);
}

.portfolio-info { padding: 20px 24px 24px; }

.portfolio-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ptag {
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent);
  background-color: rgba(var(--color-accent-rgb), 0.08);
  border-radius: var(--shape-tag);
}

.portfolio-title {
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.portfolio-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── 15. PORTFOLIO SHOWCASE (homepage) ── */
.pf-showcase {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 16px;
  align-items: start;
  margin-top: 48px;
}

/* Featured panel */
.pf-featured {
  position: relative;
  border-radius: var(--shape-panel);
  border: 1px solid var(--border);
  overflow: hidden;
  background: #0F1214;
  transition: none;
}

.pf-featured::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.55) 0%, transparent 55%);
  z-index: 2;
  pointer-events: none;
}

.pf-featured.is-changing {
  opacity: 1;
  pointer-events: none;
}

.pf-featured-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px),
    #090D0F;
  background-size: 28px 28px;
}

.pf-featured-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-featured.is-changing .pf-featured-img {
  opacity: 0.34;
  transform: scale(1.018) translateX(5px);
}

/* Corner accent marks */
.pf-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 3;
}

.pf-corner--tl {
  top: 10px;
  left: 10px;
  border-top: 1.5px solid rgba(var(--color-accent-rgb), 0.6);
  border-left: 1.5px solid rgba(var(--color-accent-rgb), 0.6);
}

.pf-corner--br {
  bottom: 10px;
  right: 10px;
  border-bottom: 1.5px solid rgba(255,255,255,0.2);
  border-right: 1.5px solid rgba(255,255,255,0.2);
}

.pf-featured-body {
  padding: 22px 26px 26px;
  border-top: 1px solid rgba(255,255,255,0.04);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 320ms ease;
}

.pf-featured.is-changing .pf-featured-body {
  opacity: 0.35;
  transform: translateY(5px);
}

.pf-featured-tags {
  margin-bottom: 11px;
}

.pf-featured-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.2;
}

.pf-featured-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 20px;
}

.pf-featured-cta {
  display: inline-flex;
  align-items: center;
}

/* Selector panel */
.pf-selector {
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pf-sel-item {
  display: grid;
  grid-template-columns: 72px 1fr 14px;
  gap: 11px;
  align-items: center;
  padding: 9px 12px 9px 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 2.5px solid transparent;
  border-radius: var(--shape-control);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
  transition: border-color var(--transition), background var(--transition);
}

.pf-sel-item:hover {
  border-color: rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.025);
}

.pf-sel-item.is-active {
  border-color: rgba(var(--color-accent-rgb), 0.22);
  border-left-color: var(--accent);
  background: rgba(var(--color-accent-rgb), 0.05);
}

.pf-sel-item:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.5);
  outline-offset: 2px;
}

.pf-sel-thumb {
  width: 72px;
  height: 41px;
  border-radius: 2px;
  overflow: hidden;
  background: #090D0F;
  flex-shrink: 0;
}

.pf-sel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 240ms ease, opacity 240ms ease;
  opacity: 1;
}

.pf-sel-item.is-active .pf-sel-thumb img,
.pf-sel-item:hover .pf-sel-thumb img {
  opacity: 1;
}

.pf-sel-item.is-active .pf-sel-thumb img {
  transform: scale(1.025);
}

.pf-sel-meta {
  min-width: 0;
}

.pf-sel-name {
  display: block;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-sel-cats {
  display: block;
  font-size: 0.69rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pf-sel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  transition: background var(--transition), box-shadow var(--transition);
  justify-self: center;
}

.pf-sel-item.is-active .pf-sel-dot {
  background: var(--accent);
  box-shadow: 0 0 7px rgba(var(--color-accent-rgb), 0.55);
}

/* Tablet — still two columns, tighter selector */
@media (max-width: 1024px) {
  .pf-showcase {
    grid-template-columns: 1fr 252px;
    gap: 12px;
  }

  .pf-sel-item {
    grid-template-columns: 58px 1fr 12px;
    gap: 9px;
    padding: 8px 10px 8px 8px;
  }

  .pf-sel-thumb {
    width: 58px;
    height: 33px;
  }
}

/* Mobile — stacked, selector becomes horizontal scroll */
@media (max-width: 768px) {
  .pf-showcase {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .pf-selector {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }

  .pf-selector::-webkit-scrollbar {
    height: 3px;
  }

  .pf-selector::-webkit-scrollbar-track {
    background: transparent;
  }

  .pf-selector::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
  }

  .pf-sel-item {
    flex-shrink: 0;
    width: 192px;
    scroll-snap-align: start;
    grid-template-columns: 58px 1fr 12px;
    gap: 9px;
    padding: 8px 10px 8px 8px;
  }

  .pf-sel-thumb {
    width: 58px;
    height: 33px;
  }

  .pf-featured-body {
    padding: 16px 18px 20px;
  }
}

@media (max-width: 480px) {
  .pf-sel-item {
    width: 170px;
    grid-template-columns: 52px 1fr;
  }

  .pf-sel-dot {
    display: none;
  }

  .pf-sel-thumb {
    width: 52px;
    height: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-featured-img,
  .pf-featured-body,
  .pf-sel-thumb img {
    transition: none;
  }

  .pf-featured.is-changing .pf-featured-img,
  .pf-featured.is-changing .pf-featured-body {
    opacity: 1;
    transform: none;
  }
}

/* ── UTILITY ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── 16. ZESPÓŁ — KARUZELA ── */
.team-carousel {
  --tc-slide-w:    340px;
  --tc-offset:     354px;
  --tc-side-scale: 0.78;
  --tc-side-op:    0.50;
  --tc-side-blur:  3px;
  --tc-brightness: 0.58;
  --tc-track-h:    480px;
  --tc-ease:       0.55s cubic-bezier(0.35, 0, 0.25, 1);

  position: relative;
  overflow: hidden;
  padding-bottom: 52px;
  margin-top: 48px;
}

.team-carousel-track {
  position: relative;
  height: var(--tc-track-h);
  touch-action: pan-y;
}

.team-carousel:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Slides — base ── */
.team-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tc-slide-w);
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
  filter: none;
  transition:
    transform var(--tc-ease),
    opacity   var(--tc-ease),
    filter    var(--tc-ease);
  will-change: transform, opacity, filter;
  z-index: 1;
  pointer-events: none;
  outline: none;
}

.team-slide .team-card {
  padding: 32px 24px 28px;
  text-align: center;
}

/* ── Position states ── */
.team-slide.tc-active {
  z-index: 3;
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.team-slide.tc-prev {
  z-index: 2;
  transform: translateX(calc(-50% - var(--tc-offset))) translateY(-50%) scale(var(--tc-side-scale));
  opacity: var(--tc-side-op);
  filter: blur(var(--tc-side-blur)) brightness(var(--tc-brightness));
  cursor: pointer;
  pointer-events: auto;
}

.team-slide.tc-next {
  z-index: 2;
  transform: translateX(calc(-50% + var(--tc-offset))) translateY(-50%) scale(var(--tc-side-scale));
  opacity: var(--tc-side-op);
  filter: blur(var(--tc-side-blur)) brightness(var(--tc-brightness));
  cursor: pointer;
  pointer-events: auto;
}

.team-slide.tc-hidden-left {
  z-index: 0;
  transform: translateX(calc(-50% - var(--tc-offset) * 2.1)) translateY(-50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
}

.team-slide.tc-hidden-right {
  z-index: 0;
  transform: translateX(calc(-50% + var(--tc-offset) * 2.1)) translateY(-50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
}

/* Disable all pointer events inside non-active slides so clicks navigate */
.team-slide:not(.tc-active) .team-card,
.team-slide:not(.tc-active) .team-card * {
  pointer-events: none;
}

/* Active card hover */
.team-slide.tc-active .team-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
}

/* ── Shared card styles ── */
.team-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.team-img-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 2px solid var(--border);
  background-color: var(--bg-base);
  transition: border-color var(--transition);
}
.team-slide.tc-active .team-card:hover .team-img-wrap { border-color: rgba(var(--color-accent-rgb), 0.4); }

.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.team-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.team-role {
  font-size: 0.85rem;
  color: var(--text-faint);
  line-height: 1.4;
  margin-bottom: 18px;
}

.team-social {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.team-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition);
}
.team-social-link:hover {
  color: var(--accent);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  background-color: var(--accent-dim);
}

/* ── Arrow buttons ── */
.team-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.team-carousel-btn--prev { left: 16px; }
.team-carousel-btn--next { right: 16px; }

.team-carousel-btn:hover,
.team-carousel-btn:focus-visible {
  border-color: rgba(var(--color-accent-rgb), 0.38);
  color: var(--accent);
  background: var(--accent-dim);
  outline: none;
}

/* ── Dot indicators ── */
.team-carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}

.team-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
  flex-shrink: 0;
}

.team-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.team-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.45);
}

/* ── 17. CTA BANNER ── */
.cta-banner {
  position: relative;
  padding: 96px 0;
  background-color: var(--bg-cta);
  overflow: hidden;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.10);
}

.cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

.cta-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

.cta-sub {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  line-height: 1.65;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.cta-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-faint);
}
.cta-address svg { flex-shrink: 0; color: var(--text-faint); }

/* ── 18. FOOTER ── */
.footer {
  background-color: #060708;
  border-top: 1px solid var(--border-subtle);
  padding-top: 72px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-logo { height: 34px; width: auto; margin-bottom: 16px; }

.footer-tagline {
  font-size: 0.84rem;
  color: var(--text-faint);
  line-height: 1.65;
  margin-bottom: 20px;
}

.footer-address {
  font-size: 0.84rem;
  color: var(--text-faint);
  line-height: 1.9;
  margin-bottom: 20px;
}
.footer-address a {
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-address a:hover { color: var(--accent); }

.footer-eu-badge img {
  height: 40px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(0.3);
  transition: opacity var(--transition);
  border-radius: 4px;
}
.footer-eu-badge:hover img { opacity: 1; filter: grayscale(0); }

.footer-heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 20px;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-list a {
  font-size: 0.86rem;
  color: var(--text-muted);
  transition: color var(--transition);
  line-height: 1.4;
}
.footer-list a:hover { color: var(--accent); }

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-social-link:hover { color: var(--accent); }

.footer-legal a {
  font-size: 0.8rem;
  color: var(--text-faint);
  transition: color var(--transition);
}
.footer-legal a:hover { color: var(--text-muted); }

.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding: 20px 0;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: var(--text-faint);
  text-align: center;
}

/* ── 19. COOKIE BANNER ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(17, 19, 22, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-text {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.cookie-link {
  color: var(--accent);
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all var(--transition);
}

.cookie-btn--primary {
  background-color: var(--accent);
  color: #09090B;
}
.cookie-btn--primary:hover { background-color: var(--accent-hover); }

.cookie-btn--ghost {
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.cookie-btn--ghost:hover { color: var(--text-primary); background-color: rgba(255,255,255,0.05); }

/* ── 20. ANIMATIONS (IntersectionObserver) ── */
[data-fade] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-fade].visible {
  opacity: 1;
  transform: translateY(0);
}

[data-fade-child] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-fade-child].visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 21. RESPONSIVE ── */

/* 1200px — team carousel responsive */
@media (max-width: 1200px) {
  .team-carousel {
    --tc-slide-w: 310px;
    --tc-offset:  320px;
  }
}

/* 1024px — tablet */
@media (max-width: 1024px) {
  .nav-menu    { display: none; }
  .nav-cta     { display: none; }
  .lang-wrap   { display: none; }
  .hamburger   { display: flex; }
  /* overlay uses pointer-events approach — no display change needed */

  #hero::before { height: 160px; }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    max-width: 820px;
  }

  .hero-content {
    max-width: 700px;
    margin: 0 auto;
    align-items: center;
  }

  .hero-title,
  .hero-subline {
    max-width: 100%;
  }

  .hero-badges,
  .hero-actions { justify-content: center; }

  .hero-visual { display: none; }

  .services-grid      { grid-template-columns: repeat(2, 1fr); }
  .products-grid      { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid     { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid       { grid-template-columns: repeat(2, 1fr); }
  .why-grid           { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: 1fr 1fr; gap: 36px; }
  .team-carousel {
    --tc-slide-w: 290px;
    --tc-offset:  268px;
    --tc-track-h: 445px;
  }

  .sonora-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sonora-visual { order: -1; }
  .sonora-phone  { width: 180px; }

  .section-header--center {
    max-width: 100%;
  }
}

/* 768px */
@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  .section { padding: 72px 0; }

  .hero-title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    line-height: 1.07;
    letter-spacing: -0.035em;
  }

  .hero-subline {
    font-size: 1rem;
    line-height: 1.66;
  }

  .services-grid  { grid-template-columns: 1fr; }
  .products-grid  { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .pillars-grid   { grid-template-columns: 1fr; }
  .why-grid       { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; gap: 32px; }
  .team-carousel {
    --tc-slide-w:    260px;
    --tc-offset:     230px;
    --tc-side-scale: 0.74;
    --tc-track-h:    415px;
  }
  .team-carousel .team-img-wrap { width: 120px; height: 120px; margin-bottom: 16px; }

  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn { width: 100%; justify-content: center; max-width: 320px; }

  .marquee-group { gap: 12px; }
}

/* 480px */
@media (max-width: 480px) {
  #hero::before { height: 120px; }
  .hero-grid    { padding-top: 24px; padding-bottom: 48px; }
  .hero-subline { margin-bottom: 28px; }
  .team-carousel {
    --tc-slide-w:    250px;
    --tc-offset:     196px;
    --tc-side-scale: 0.70;
    --tc-side-blur:  2px;
    --tc-track-h:    390px;
  }
  .team-carousel .team-img-wrap { width: 96px; height: 96px; margin-bottom: 12px; }
  .team-carousel-btn { width: 40px; height: 40px; }
  .team-carousel-btn--prev { left: 8px; }
  .team-carousel-btn--next { right: 8px; }

  .cookie-inner { flex-direction: column; align-items: flex-start; }
  .cookie-actions { width: 100%; }
  .cookie-btn   { flex: 1; text-align: center; }

  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* 360px — smallest supported viewport */
@media (max-width: 360px) {
  .container { padding: 0 16px; }
  h1 { font-size: 1.9rem; }
  .btn { padding: 12px 20px; font-size: 0.86rem; }
  .marquee-group { gap: 10px; }
  .client-logo { width: 146px; height: 68px; padding: 13px 16px; }
  .team-carousel {
    --tc-slide-w:    220px;
    --tc-offset:     150px;
    --tc-track-h:    330px;
    margin-top: 32px;
  }
  .team-carousel .team-img-wrap { width: 78px; height: 78px; margin-bottom: 10px; }
  .team-carousel-btn { width: 36px; height: 36px; }
  .team-carousel-btn--prev { left: 4px; }
  .team-carousel-btn--next { right: 4px; }
}

/* ============================================================
   INNER PAGES — Shared components and page-specific styles
   ============================================================ */

/* ── ACTIVE NAV LINK ── */
.nav-link--active {
  color: var(--text-primary) !important;
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  padding: calc(var(--nav-height) + 56px) 0 52px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-base);
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 260px;
  background: radial-gradient(ellipse at center top, rgba(var(--color-accent-rgb), 0.08) 0%, transparent 65%);
  pointer-events: none;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--text-faint); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--accent); }

.page-hero-title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 14px;
  text-wrap: balance;
}
.page-hero-desc {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 560px;
  line-height: 1.65;
}

/* ── STICKY SUBNAV (uslugi) ── */
.subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  background-color: rgba(9,9,11,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 0;
}
.subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 14px 18px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
}
.subnav-link:hover { color: var(--text-primary); }
.subnav-link.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── SERVICE BLOCKS (uslugi.html) ── */
.service-block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 80px 0;
}
.service-block--alt { background-color: var(--bg-base); }

/* ── SERVICE BLOCK BACKGROUND VISUALS ── */

.service-visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.service-visual-bg img {
  position: absolute;
  top: -12%;
  right: -4%;
  width: min(78vw, 1280px);
  height: 124%;
  object-fit: cover;
  object-position: right center;
  display: block;
  opacity: 0.50;
  filter: blur(5px) brightness(0.76) saturate(0.90);
  transform: scale(1.04);
}

.service-visual-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #09090B              0%,
      rgba(9,9,11,0.99)    26%,
      rgba(9,9,11,0.84)    42%,
      rgba(9,9,11,0.54)    58%,
      rgba(9,9,11,0.20)    76%,
      rgba(9,9,11,0.04)    100%
    ),
    linear-gradient(
      180deg,
      #09090B              0%,
      rgba(9,9,11,0.92)    3%,
      rgba(9,9,11,0.72)    8%,
      rgba(9,9,11,0.44)    15%,
      rgba(9,9,11,0.20)    24%,
      rgba(9,9,11,0.06)    33%,
      rgba(9,9,11,0.00)    42%,
      rgba(9,9,11,0.00)    58%,
      rgba(9,9,11,0.06)    67%,
      rgba(9,9,11,0.20)    76%,
      rgba(9,9,11,0.44)    85%,
      rgba(9,9,11,0.72)    92%,
      rgba(9,9,11,0.92)    97%,
      #09090B              100%
    );
}

.service-block > .container {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  .service-visual-bg img {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.30;
    filter: blur(8px) brightness(0.62) saturate(0.76);
    transform: none;
  }
  .service-visual-bg::after {
    background:
      linear-gradient(
        90deg,
        #050707              0%,
        rgba(5,7,7,0.99)     38%,
        rgba(5,7,7,0.92)     54%,
        rgba(5,7,7,0.55)     72%,
        rgba(5,7,7,0.10)     100%
      ),
      linear-gradient(
        180deg,
        #050707              0%,
        rgba(5,7,7,0.82)     6%,
        rgba(5,7,7,0.00)     22%,
        rgba(5,7,7,0.00)     78%,
        rgba(5,7,7,0.82)     94%,
        #050707              100%
      );
  }
  .service-block--alt .service-visual-bg::after {
    background:
      linear-gradient(
        90deg,
        #0F1113              0%,
        rgba(15,17,19,0.99)  38%,
        rgba(15,17,19,0.92)  54%,
        rgba(15,17,19,0.55)  72%,
        rgba(15,17,19,0.10)  100%
      ),
      linear-gradient(
        180deg,
        #0F1113              0%,
        rgba(15,17,19,0.82)  6%,
        rgba(15,17,19,0.00)  22%,
        rgba(15,17,19,0.00)  78%,
        rgba(15,17,19,0.82)  94%,
        #0F1113              100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-visual-bg img { transition: none; }
}

.service-intro {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.service-icon-xl {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--accent-dim);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
  border-radius: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.service-h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--text-primary);
  margin-bottom: 10px;
  text-wrap: balance;
}
.service-lead {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.72;
}

.service-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.service-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  transition: border-color var(--transition);
}
.sp-item:hover { border-color: var(--border-hover); }
.sp-item svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.sp-item strong { color: var(--text-primary); font-weight: 600; }

/* Tech stack pills */
.tech-stack { margin-top: 20px; }
.tech-stack-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
.tech-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.tech-pill {
  padding: 4px 11px;
  font-size: 0.76rem; font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  transition: all var(--transition);
}
.tech-pill:hover { color: var(--accent); border-color: rgba(var(--color-accent-rgb), 0.3); }

/* Service side panel */
.service-side { display: flex; flex-direction: column; gap: 20px; }

.subcategory-list { display: flex; flex-direction: column; gap: 8px; }
.subcat-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.88rem; color: var(--text-muted);
}
.subcat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
}

.methodology-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.method-card {
  padding: 18px 14px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all var(--transition);
}
.method-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.method-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.method-sub { font-size: 0.72rem; color: var(--text-faint); margin-top: 3px; }

.tech-console {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 34%),
    linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    rgba(10,13,15,0.82);
  background-size: auto, 32px 32px, 32px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.tech-console::before,
.tech-console::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.tech-console::before {
  left: 22px;
  top: 34px;
  bottom: 34px;
  width: 1px;
  background: linear-gradient(transparent, rgba(var(--color-accent-rgb), 0.22), transparent);
}

.tech-console::after {
  right: 14px;
  top: 14px;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.32);
  border-right: 1px solid rgba(var(--color-accent-rgb), 0.32);
}

.tech-console__rail {
  position: relative;
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px 10px 22px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 7px;
  background: rgba(8,11,12,0.66);
  animation: techRailIn 520ms ease both;
  animation-delay: calc((var(--rail) - 1) * 70ms);
}

.tech-console__rail::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.36);
  box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb), 0.045);
  transform: translateY(-50%);
}

.tech-console__rail::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 14px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.18), transparent 42%);
  transform: translateY(-50%);
  pointer-events: none;
}

.tech-console__label {
  position: relative;
  z-index: 1;
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tech-console__nodes {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tech-console .tech-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 5px;
  background: rgba(16,21,23,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(240,242,241,0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  transition: color var(--transition), border-color var(--transition), background-color var(--transition), transform var(--transition);
}

.tech-console .tech-pill:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.28);
  background: rgba(var(--color-accent-rgb), 0.075);
  transform: translateY(-1px);
}

@keyframes techRailIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.methodology-grid {
  position: relative;
  gap: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 10px;
  background: rgba(10,13,15,0.72);
}

.methodology-grid::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.20), transparent);
  pointer-events: none;
}

.method-card {
  position: relative;
  z-index: 1;
  border-radius: 6px;
  background: rgba(16,20,22,0.88);
}

.method-card + .method-card {
  margin-left: 8px;
}

.method-card:hover {
  transform: none;
  background: rgba(var(--color-accent-rgb), 0.055);
}

.digital-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.024), transparent 38%),
    rgba(10,13,15,0.78);
}

.digital-flow::before {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.20), rgba(255,255,255,0.08), rgba(var(--color-accent-rgb), 0.16));
  pointer-events: none;
}

.digital-flow__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.085);
  border-radius: 6px;
  background: rgba(12,16,18,0.92);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.digital-flow__step::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.36);
  transform: translateX(-50%) rotate(45deg);
}

.digital-flow__step:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.24);
  background: rgba(var(--color-accent-rgb), 0.055);
}

.service-cta-box {
  padding: 24px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.service-cta-box p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 14px; }

/* Audit steps */
.audit-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.audit-step {
  padding: 20px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all var(--transition);
}
.audit-step:hover { border-color: var(--border-hover); }
.audit-step-num {
  font-size: 1.4rem; font-weight: 700;
  color: var(--accent); opacity: 0.4;
  line-height: 1; margin-bottom: 8px;
}
.audit-step-title {
  font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 5px;
}
.audit-step-desc {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
}

/* ── PRODUKTY PAGE ── */
.product-section {
  position: relative;
  padding: 64px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.product-section:last-child { border-bottom: none; }

.product-section-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.product-section-title {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--text-primary);
  margin-bottom: 6px;
}
.product-section-desc {
  font-size: 0.88rem; color: var(--text-muted);
  margin-bottom: 28px; max-width: 560px;
}

.product-listing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.product-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all var(--transition);
  color: inherit;
  text-decoration: none;
}
.product-item:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.product-item-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--accent-dim);
  border-radius: 8px;
  color: var(--accent);
  flex-shrink: 0;
}
.product-item-name {
  font-size: 0.9rem; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px; line-height: 1.3;
}
.product-item-desc {
  font-size: 0.79rem; color: var(--text-muted); line-height: 1.45;
}
.product-item-badge {
  display: inline-block;
  font-size: 0.68rem; font-weight: 500;
  padding: 2px 8px;
  border-radius: 100px;
  background-color: rgba(var(--color-accent-rgb), 0.08);
  color: var(--accent);
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  margin-top: 5px;
}

/* ── PORTFOLIO PAGE (full) ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 0 32px;
}
.filter-btn {
  padding: 8px 18px;
  font-size: 0.81rem; font-weight: 500;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.filter-btn.active {
  color: var(--accent);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  background-color: var(--accent-dim);
}

.pf-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-bottom: 80px;
}

.pf-full-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all var(--transition);
}
.pf-full-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.pf-full-card.hidden { display: none; }

.pf-full-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background-color: #0A0D0F;
  position: relative;
}
.pf-full-img img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform 0.4s ease;
  display: block;
}
.pf-full-card:hover .pf-full-img img { transform: scale(1.04); }

/* CSS placeholder for cards without images */
.pf-placeholder-bg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.pf-placeholder-bg--enterprise  { background: linear-gradient(135deg,#091510 0%,#0D2018 100%); }
.pf-placeholder-bg--digitalizacja { background: linear-gradient(135deg,#080F18 0%,#0C1828 100%); }
.pf-placeholder-bg--skanowanie  { background: linear-gradient(135deg,#120E18 0%,#1A1428 100%); }
.pf-placeholder-bg--podpis      { background: linear-gradient(135deg,#180D08 0%,#281508 100%); }
.pf-placeholder-bg--web         { background: linear-gradient(135deg,#080E18 0%,#0A1420 100%); }
.pf-placeholder-bg--graphics    { background: linear-gradient(135deg,#180810 0%,#250D18 100%); }
.pf-placeholder-bg--mobile      { background: linear-gradient(135deg,#080A18 0%,#0C0E28 100%); }

.pf-initials {
  font-size: 2rem; font-weight: 700;
  color: rgba(var(--color-accent-rgb), 0.22);
  letter-spacing: -0.02em;
  z-index: 1;
  user-select: none;
}

.pf-full-info { padding: 16px 20px 20px; }
.pf-full-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pf-full-title {
  font-size: 0.95rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 5px;
}
.pf-full-desc {
  font-size: 0.81rem; color: var(--text-muted); line-height: 1.5;
}

.pf-no-results {
  display: none;
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: var(--text-faint);
  font-size: 0.9rem;
}
.pf-no-results.visible { display: block; }

/* ── PARTNERZY PAGE ── */
.partner-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 64px;
}
.partner-card {
  padding: 26px 20px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: all var(--transition);
}
.partner-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.partner-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-card));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.partner-name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.partner-type { font-size: 0.74rem; color: var(--text-faint); }

.tech-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.tech-partner-card {
  padding: 28px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  display: flex; align-items: flex-start; gap: 20px;
  transition: all var(--transition);
}
.tech-partner-card:hover { border-color: var(--border-hover); }
.tech-partner-badge {
  padding: 6px 16px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--accent);
  background-color: rgba(var(--color-accent-rgb), 0.08);
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.2);
  border-radius: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.tech-partner-info h3 { font-size: 0.95rem; color: var(--text-primary); margin-bottom: 6px; }
.tech-partner-info p { font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; }

/* ── KONTAKT PAGE ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 64px;
  align-items: start;
  padding: 72px 0 96px;
}
.contact-intro-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  color: var(--text-primary); margin-bottom: 8px;
}
.contact-intro-lead {
  font-size: 0.95rem; color: var(--text-muted);
  line-height: 1.65; margin-bottom: 36px;
}

.contact-detail {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.contact-detail-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--accent-dim);
  border-radius: 10px;
  color: var(--accent); flex-shrink: 0;
}
.contact-detail-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 2px;
}
.contact-detail-value {
  font-size: 0.9rem; color: var(--text-primary); line-height: 1.5;
}
.contact-detail-value a { color: var(--text-primary); transition: color var(--transition); }
.contact-detail-value a:hover { color: var(--accent); }

.contact-social-wrap {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.contact-social-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px;
}
.contact-social-links { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-social-link {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-size: 0.81rem; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all var(--transition);
}
.contact-social-link:hover {
  color: var(--accent);
  border-color: rgba(var(--color-accent-rgb), 0.3);
  background-color: var(--accent-dim);
}

.contact-form-card {
  padding: 36px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.contact-form-title { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 4px; }
.contact-form-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 28px; }

.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-label {
  display: block;
  font-size: 0.79rem; font-weight: 500;
  color: var(--text-muted); margin-bottom: 6px;
}
.form-label .req { color: var(--accent); margin-left: 2px; }

.form-control {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.88rem; font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
.form-control:focus {
  border-color: rgba(var(--color-accent-rgb), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.07);
}
.form-control::placeholder { color: var(--text-faint); }

textarea.form-control { resize: vertical; min-height: 120px; line-height: 1.55; }

select.form-control {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4L6 7.5L9.5 4' stroke='%238A9490' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.form-note {
  margin-top: 16px; padding: 11px 14px;
  background-color: rgba(255,255,255,0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 0.76rem; color: var(--text-faint); line-height: 1.55;
}
.form-note strong { color: var(--text-muted); }

/* ── BLOG PLACEHOLDER ── */
.blog-placeholder {
  min-height: calc(100vh - var(--nav-height));
  display: flex; align-items: center; justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.blog-ph-inner { max-width: 460px; }
.blog-ph-icon {
  width: 68px; height: 68px;
  border-radius: 18px;
  background-color: var(--accent-dim);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  margin: 0 auto 24px;
}
.blog-ph-title {
  font-size: 1.8rem; color: var(--text-primary);
  margin-bottom: 12px;
}
.blog-ph-desc {
  color: var(--text-muted); line-height: 1.65; margin-bottom: 28px;
}

/* ── SYSTEM MODULE CARD LANGUAGE ── */
.module-card,
.pillar-card,
.service-card,
.product-card,
.why-card,
.portfolio-card,
.team-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--shape-card);
  border-color: rgba(255,255,255,0.085);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006)),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Carousel team card — preserve person-card radius */
.team-card {
  border-radius: 10px;
}

.module-card::before,
.pillar-card::before,
.service-card::before,
.product-card::before,
.why-card::before,
.portfolio-card::before,
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.18), transparent 34%) top left / 76px 1px no-repeat,
    linear-gradient(rgba(var(--color-accent-rgb), 0.16), transparent 48%) top left / 1px 58px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,0.11), transparent 40%) bottom right / 92px 1px no-repeat;
  opacity: 0.62;
  transition: opacity var(--transition), background-size var(--transition);
}

.module-card:hover,
.pillar-card:hover,
.service-card:hover,
.product-card:hover,
.why-card:hover,
.portfolio-card:hover,
.team-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.24);
  box-shadow: 0 16px 38px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.055);
}

.module-card:hover::before,
.pillar-card:hover::before,
.service-card:hover::before,
.product-card:hover::before,
.why-card:hover::before,
.portfolio-card:hover::before,
.team-card:hover::before {
  opacity: 1;
  background-size: 112px 1px, 1px 82px, 116px 1px;
}

.module-card--featured {
  border-color: rgba(var(--color-accent-rgb), 0.20);
  background:
    linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.055), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.026), rgba(255,255,255,0.006)),
    var(--bg-card);
}

.module-card__corner {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.48);
  border-right: 1px solid rgba(var(--color-accent-rgb), 0.48);
  pointer-events: none;
}

.system-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}

.technical-tag,
.ptag,
.product-item-badge,
.tech-pill,
.about-badge {
  border-radius: var(--shape-tag);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.technical-tag:hover,
.tech-pill:hover,
.about-badge:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.24);
  background: rgba(var(--color-accent-rgb), 0.055);
}

.pillar-icon,
.service-icon,
.product-icon-wrap,
.product-item-icon,
.contact-detail-icon,
.blog-ph-icon,
.service-icon-xl {
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.11), rgba(var(--color-accent-rgb), 0.035)),
    var(--bg-surface);
  border: 1px solid rgba(var(--color-accent-rgb), 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.product-card,
.product-item {
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.08), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 34%),
    var(--bg-card);
}

.product-card:hover .product-link-hint {
  opacity: 0.92;
}

.products-grid,
.product-listing {
  gap: 16px;
}

.portfolio-card,
.pf-full-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.024), transparent 34%),
    #101315;
}

.portfolio-img-wrap,
.pf-full-img {
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    #090D0F;
  background-size: 28px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.065);
}

.portfolio-info,
.pf-full-info {
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.035);
}

.portfolio-overlay {
  background:
    linear-gradient(135deg, rgba(9,13,14,0.86), rgba(9,9,11,0.74)),
    linear-gradient(rgba(var(--color-accent-rgb), 0.10), rgba(var(--color-accent-rgb), 0.02));
}

.pf-placeholder-bg {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(var(--color-accent-rgb), 0.13), transparent 34%),
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px;
}

.pf-placeholder-bg::before,
.pf-placeholder-bg::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.pf-placeholder-bg::before {
  inset: 18px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 8px;
}

.pf-placeholder-bg::after {
  left: 50%;
  top: 50%;
  width: 120px;
  height: 1px;
  background: rgba(var(--color-accent-rgb), 0.20);
  transform: translate(-50%, -50%);
  box-shadow: 0 34px 0 rgba(255,255,255,0.08), 0 -34px 0 rgba(255,255,255,0.08);
}

.pf-initials {
  min-width: 64px;
  padding: 9px 12px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.20);
  border-radius: 8px;
  color: rgba(240,242,241,0.72);
  background: rgba(8,12,13,0.72);
  box-shadow: 0 12px 30px rgba(0,0,0,0.26);
  text-align: center;
}

/* ── PORTFOLIO COMMAND GALLERY ── */
.filter-bar {
  position: sticky;
  top: calc(var(--nav-height) + 10px);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 34px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), transparent 42%),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.035), transparent 36%),
    rgba(8,11,12,0.88);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.filter-bar::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.18), transparent 46%, rgba(255,255,255,0.08));
  pointer-events: none;
}

.filter-btn {
  position: relative;
  min-height: 34px;
  padding: 8px 14px 8px 26px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(14,18,20,0.72);
  color: var(--text-muted);
  overflow: hidden;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.filter-btn::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%) rotate(45deg);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.filter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.07), transparent 48%);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.24);
  background: rgba(var(--color-accent-rgb), 0.055);
}

.filter-btn:hover::before,
.filter-btn.active::before {
  background: rgba(var(--color-accent-rgb), 0.76);
  box-shadow: 0 0 9px rgba(var(--color-accent-rgb), 0.22);
}

.filter-btn:hover::after,
.filter-btn.active::after {
  opacity: 1;
  transform: translateX(0);
}

.pf-full-grid {
  align-items: stretch;
  gap: 18px;
}

.pf-full-grid.is-filtering .pf-full-card:not(.hidden) {
  animation: pfFilterIn 160ms ease both;
}

.pf-full-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.016), rgba(255,255,255,0.004)),
    #101315;
  border-color: rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pf-full-card:nth-child(1) {
  grid-column: span 2;
}

.pf-full-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.22);
  box-shadow: 0 16px 38px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.055);
  transform: translateY(-2px);
}

.pf-full-img {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.065);
}

.pf-full-img::after {
  content: '';
  position: absolute;
  inset: auto 14px 12px auto;
  width: 34px;
  height: 1px;
  background: rgba(var(--color-accent-rgb), 0.24);
  box-shadow: -12px -12px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}

.pf-full-img img {
  filter: none;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.pf-full-card:hover .pf-full-img img {
  transform: scale(1.025);
  filter: none;
}

.pf-full-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 22px;
}

.pf-full-tags {
  margin-bottom: 12px;
}

.pf-full-title {
  font-size: 1rem;
  line-height: 1.22;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.pf-full-desc {
  font-size: 0.83rem;
  line-height: 1.58;
}

.pf-placeholder-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--color-accent-rgb), 0.10), transparent 30%),
    linear-gradient(rgba(255,255,255,0.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.034) 1px, transparent 1px),
    #090D0F;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

.pf-placeholder-bg::before {
  inset: 16px;
  border-radius: 7px;
  border-color: rgba(255,255,255,0.070);
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(var(--color-accent-rgb), 0.16) 22% 23%, transparent 23% 100%),
    linear-gradient(180deg, transparent 0 42%, rgba(255,255,255,0.08) 42% 43%, transparent 43% 100%);
}

.pf-placeholder-bg::after {
  width: 132px;
  background: rgba(var(--color-accent-rgb), 0.18);
  box-shadow: 0 32px 0 rgba(255,255,255,0.075), 0 -32px 0 rgba(255,255,255,0.075), 48px 0 0 rgba(255,255,255,0.055);
}

.pf-placeholder-bg--enterprise {
  background-color: #0B1411;
}
.pf-placeholder-bg--digitalizacja {
  background-color: #0A1118;
}
.pf-placeholder-bg--skanowanie {
  background-color: #111019;
}
.pf-placeholder-bg--podpis {
  background-color: #17110D;
}
.pf-placeholder-bg--web {
  background-color: #0A1018;
}
.pf-placeholder-bg--graphics {
  background-color: #160E13;
}

.pf-initials {
  min-width: 68px;
  border-radius: 7px;
  color: rgba(240,242,241,0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent),
    rgba(8,12,13,0.78);
  border-color: rgba(var(--color-accent-rgb), 0.18);
}

/* ── PRODUCT ECOSYSTEM PAGE ── */
.product-command-bar {
  position: sticky;
  top: calc(var(--nav-height) + 10px);
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 34px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.032), transparent 42%),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.035), transparent 36%),
    rgba(8,11,12,0.88);
  box-shadow: 0 14px 34px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.product-command-link {
  position: relative;
  min-height: 34px;
  padding: 8px 14px 8px 26px;
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 6px;
  color: var(--text-muted);
  background: rgba(14,18,20,0.72);
  font-size: 0.81rem;
  font-weight: 500;
  overflow: hidden;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.product-command-link::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%) rotate(45deg);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.product-command-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.07), transparent 48%);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity var(--transition), transform var(--transition);
  pointer-events: none;
}

.product-command-link:hover,
.product-command-link:focus-visible {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.24);
  background: rgba(var(--color-accent-rgb), 0.055);
}

.product-command-link:hover::before,
.product-command-link:focus-visible::before {
  background: rgba(var(--color-accent-rgb), 0.72);
  box-shadow: 0 0 9px rgba(var(--color-accent-rgb), 0.22);
}

.product-command-link:hover::after,
.product-command-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.product-section {
  overflow: hidden;
}

.product-section .container {
  position: relative;
  z-index: 1;
}

.product-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--color-accent-rgb), 0.035), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.010), transparent 30%);
  pointer-events: none;
}

.product-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  border-radius: 5px;
  background: rgba(var(--color-accent-rgb), 0.045);
  color: rgba(var(--color-accent-rgb), 0.82);
}

.product-section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.62);
  transform: rotate(45deg);
}

.product-section-title {
  margin-top: 14px;
}

.product-listing {
  position: relative;
  gap: 16px;
  grid-auto-flow: dense;
}

.product-listing::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255,255,255,0.040);
  border-radius: 12px;
  pointer-events: none;
}

.product-item {
  align-items: flex-start;
  min-height: 146px;
  padding: 18px;
  border-radius: 8px;
  border-color: rgba(255,255,255,0.075);
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.095), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.022), transparent 38%),
    rgba(13,16,18,0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.032);
}

.product-item::after {
  right: 12px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.035);
}

.product-item:hover {
  border-color: rgba(var(--color-accent-rgb), 0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
  transform: translateY(-2px);
}

.product-item:target {
  border-color: rgba(var(--color-accent-rgb), 0.38);
  box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.18), inset 0 1px 0 rgba(255,255,255,0.045);
}

.product-item-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.105), rgba(var(--color-accent-rgb), 0.026)),
    rgba(9,13,14,0.86);
  border-color: rgba(var(--color-accent-rgb), 0.16);
}

.product-item-name {
  font-size: 0.94rem;
  line-height: 1.25;
  margin-bottom: 5px;
}

.product-item-desc {
  line-height: 1.52;
}

.product-item-badge {
  margin-top: 9px;
  border-radius: 5px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.032);
  border-color: rgba(255,255,255,0.075);
}

.product-item--featured {
  grid-column: span 2;
  min-height: 178px;
  padding: 22px;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--color-accent-rgb), 0.105), transparent 30%),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.12), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.034), transparent 34%),
    rgba(12,16,17,0.92);
}

.product-item--featured .product-item-icon {
  width: 44px;
  height: 44px;
}

.product-item--featured .product-item-name {
  font-size: 1.05rem;
}

.product-item--featured .product-item-badge {
  color: rgba(var(--color-accent-rgb), 0.82);
  border-color: rgba(var(--color-accent-rgb), 0.18);
  background: rgba(var(--color-accent-rgb), 0.055);
}

/* ── CONTACT REQUEST CONSOLE ── */
.contact-layout {
  grid-template-columns: minmax(280px, 0.92fr) minmax(520px, 1.28fr);
  gap: clamp(42px, 5vw, 72px);
}

.contact-intro-title {
  letter-spacing: -0.02em;
}

.contact-intro-lead {
  max-width: 500px;
}

.contact-detail {
  position: relative;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  margin-bottom: 10px;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.075), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.020), transparent 42%),
    rgba(13,16,18,0.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.contact-detail:hover {
  border-color: rgba(var(--color-accent-rgb), 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}

.contact-detail::before {
  display: none;
}

.contact-detail::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.34);
  transform: rotate(45deg);
}

.contact-detail-icon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(var(--color-accent-rgb), 0.10), rgba(var(--color-accent-rgb), 0.024)),
    rgba(9,13,14,0.88);
  border: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.contact-detail-label {
  color: rgba(var(--color-accent-rgb), 0.70);
}

.contact-social-wrap {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.contact-social-links {
  gap: 8px;
}

.contact-social-link {
  position: relative;
  min-height: 36px;
  padding: 8px 13px 8px 28px;
  border-radius: 6px;
  border-color: rgba(255,255,255,0.07);
  background: rgba(13,16,18,0.64);
  overflow: hidden;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.contact-social-link::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: rgba(255,255,255,0.18);
  transform: translateY(-50%) rotate(45deg);
  transition: background-color var(--transition), box-shadow var(--transition);
}

.contact-social-link:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.22);
  background: rgba(var(--color-accent-rgb), 0.045);
}

.contact-social-link:hover::before {
  background: rgba(var(--color-accent-rgb), 0.72);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.20);
}

.contact-form-card {
  position: relative;
  padding: 34px;
  border-radius: 12px;
  border-color: rgba(255,255,255,0.085);
  background:
    radial-gradient(circle at 16% 0%, rgba(var(--color-accent-rgb), 0.070), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.034), transparent 34%),
    linear-gradient(rgba(255,255,255,0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.020) 1px, transparent 1px),
    rgba(12,15,17,0.92);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
  box-shadow: 0 24px 58px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05);
}

.contact-form-card::before {
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.22), transparent 36%) top left / 120px 1px no-repeat,
    linear-gradient(rgba(var(--color-accent-rgb), 0.16), transparent 48%) top left / 1px 86px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,0.10), transparent 40%) bottom right / 120px 1px no-repeat;
}

.contact-form-title {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.contact-form-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.68);
  transform: translateY(-50%) rotate(45deg);
}

.contact-form-sub {
  max-width: 560px;
  margin-bottom: 26px;
}

.form-row {
  gap: 16px;
}

.form-group {
  position: relative;
  margin-bottom: 18px;
}

.form-label {
  letter-spacing: 0.01em;
}

.form-control {
  min-height: 44px;
  border-radius: 7px;
  border-color: rgba(255,255,255,0.075);
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.055), transparent 2px) left / 2px 100% no-repeat,
    rgba(7,10,11,0.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.030);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.form-control:hover {
  border-color: rgba(255,255,255,0.13);
}

.form-control:focus {
  border-color: rgba(var(--color-accent-rgb), 0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.040), 0 0 0 1px rgba(var(--color-accent-rgb), 0.08);
  background-color: rgba(9,13,14,0.92);
}

textarea.form-control {
  min-height: 132px;
}

.contact-form-card .btn--primary {
  position: relative;
  overflow: hidden;
}

.contact-form-card .btn--primary::after {
  content: '›';
  margin-left: 6px;
  transition: transform var(--transition);
}

.contact-form-card .btn--primary:hover::after {
  transform: translateX(3px);
}

.form-submit-note {
  display: none;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.14);
  border-radius: 7px;
  background: rgba(var(--color-accent-rgb), 0.045);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════
   00 BRAND INTRO — pełnoekranowe intro marki
   ═══════════════════════════════════════════════ */

.brand-intro {
  --brand-model-scale: 2;        /* ← zmień tę wartość, aby powiększyć / zmniejszyć logo 3D */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

/* Warstwa 1 — tło */
.brand-intro__bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/bg/BG_Light_9.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Nakładka tonalna + rozszerzony gradient przejścia do hero */
.brand-intro__atmosphere {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(6,8,10,0.46)  0%,
      rgba(6,8,10,0.08) 24%,
      rgba(6,8,10,0.08) 46%,
      rgba(6,8,10,0.58) 66%,
      rgba(9,9,11,0.88)  78%,
      rgba(9,9,11,1.00)  88%,
      rgba(9,9,11,1.00) 100%
    ),
    radial-gradient(ellipse 58% 38% at 50% 48%, rgba(var(--color-accent-rgb), 0.055) 0%, transparent 72%);
  z-index: 1;
}

/* Strefa przejścia — dolny overlay z subtelną petrolową poświatą */
.brand-intro::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 320px;
  background:
    linear-gradient(
      to bottom,
      transparent                  0%,
      rgba(var(--color-accent-rgb), 0.020)       26%,
      rgba(var(--color-accent-rgb), 0.010)       48%,
      rgba(9,9,11,0.58)           62%,
      rgba(9,9,11,0.92)           76%,
      rgba(9,9,11,1.00)           86%,
      rgba(9,9,11,1.00)          100%
    ),
    radial-gradient(ellipse 44% 52% at 64% 16%, rgba(var(--color-accent-rgb), 0.028) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Warstwa 3 — model 3D wycentrowany w viewport */
.brand-intro__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
}

/* Kontener modelu — outer (parallax transform tu) */
.brand-intro__model-wrap {
  position: relative;
  width: min(480px, 80vw);
  height: min(380px, 56vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Subtelna poświata za modelem */
.brand-intro__model-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--color-accent-rgb), 0.08) 0%,
    rgba(var(--color-accent-rgb), 0.03) 44%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Inner — float animation (osobny element by nie kolidować z parallax) */
.brand-intro__model-float {
  width: 100%;
  height: 100%;
  animation: brandIntroFloat 7s ease-in-out infinite;
  position: relative;
  z-index: 1;
  overflow: visible;
}

@keyframes brandIntroFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* Skala modelu — transform: scale tu, osobna warstwa by nie kolidować z float i parallax */
.brand-intro__model-scale {
  width: 100%;
  height: 100%;
  transform: scale(var(--brand-model-scale));
  transform-origin: center center;
}

/* model-viewer */
.brand-intro__model {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  --progress-bar-height: 0px;
  --progress-bar-color: transparent;
}

/* Fallback gdy model-viewer nie załaduje się (brak CDN / JS wyłączony) */
model-viewer:not(:defined) {
  display: block;
  background: url('../img/misc/sclogo.png') no-repeat center / contain;
}

/* Tagline — tekst pod modelem */
.brand-intro__tagline {
  position: relative;
  z-index: 3;                   /* ponad skalowanym modelem */
  font-size: clamp(1rem, 2.4vw, 1.42rem);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.42;
  letter-spacing: -0.01em;
  margin: 28px 0 0;
  max-width: 540px;
  min-height: 1.5em;
  transition: opacity 380ms ease, transform 380ms ease;
}

.brand-intro__tagline.bi-fading {
  opacity: 0;
  transform: translateY(10px);
}

/* ─── Boczne strefy sloganów ─── */
.brand-intro-copy-zone {
  position: absolute;
  top: var(--nav-height);
  bottom: 100px;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.brand-intro-copy-zone--left {
  left: 0;
  right: 66%;
  justify-content: flex-start;
  padding-left: clamp(28px, 4vw, 60px);
  /* kierunek animacji: wejście z lewej, wyjście w lewo */
  --bi-tx-in:  -16px;
  --bi-tx-out: -12px;
}

.brand-intro-copy-zone--right {
  left: 66%;
  right: 0;
  justify-content: flex-end;
  padding-right: clamp(28px, 4vw, 60px);
  text-align: right;
  /* kierunek animacji: wejście z prawej, wyjście w prawo */
  --bi-tx-in:  16px;
  --bi-tx-out: 12px;
}

.brand-intro-copy-item {
  opacity: 0;
  transform: translateX(var(--bi-tx-in, -16px));
  filter: blur(4px);
  font-size: clamp(28px, 2.2vw, 42px);
  font-weight: 700;
  color: rgba(240, 242, 240, 0.92);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: min(300px, 26vw);
  text-shadow:
    0 1px 6px rgba(0, 0, 0, 0.65),
    0 3px 20px rgba(0, 0, 0, 0.38);
  transition: opacity 620ms ease, transform 620ms ease, filter 620ms ease;
}

.brand-intro-copy-item.bi-copy-in {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
}

.brand-intro-copy-item.bi-copy-out {
  opacity: 0;
  transform: translateX(var(--bi-tx-out, -12px));
  filter: blur(3px);
  transition: opacity 580ms ease, transform 580ms ease, filter 580ms ease;
}

/* Wskaźnik scrollowania */
.brand-intro__scroll-wrap {
  position: relative;
  z-index: 2;
  padding-bottom: 36px;
  display: flex;
  justify-content: center;
}

.brand-intro__scroll-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(240,242,241,0.46);
  text-decoration: none;
  font-size: 0.70rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.brand-intro__scroll-btn:hover,
.brand-intro__scroll-btn:focus-visible {
  color: rgba(240,242,241,0.76);
}

.brand-intro__scroll-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.brand-intro__scroll-label {
  display: block;
}

.brand-intro__scroll-line {
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--color-accent-rgb), 0.46) 100%);
}

.brand-intro__scroll-arrow {
  color: rgba(var(--color-accent-rgb), 0.62);
  animation: biScrollBounce 2.4s ease-in-out infinite;
}

@keyframes biScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ── Responsywność ── */

@media (max-width: 1024px) {
  .brand-intro { --brand-model-scale: 1.7; }    /* ← tablet */
  .brand-intro::after  { height: 240px; }
  .brand-intro__model-wrap {
    width: min(380px, 78vw);
    height: min(300px, 52vw);
  }
  .brand-intro__tagline {
    font-size: clamp(0.95rem, 2.8vw, 1.22rem);
  }
  /* Strefy boczne — ukryte poniżej 1024px */
  .brand-intro-copy-zone { display: none; }
}

@media (max-width: 768px) {
  .brand-intro {
    --brand-model-scale: 1.4;   /* ← mobile landscape / mały tablet */
    min-height: 90vh;
    min-height: 90svh;
  }
  .brand-intro::after  { height: 180px; }
  .brand-intro__model-wrap {
    width: min(300px, 82vw);
    height: min(240px, 56vw);
  }
}

@media (max-width: 480px) {
  .brand-intro { --brand-model-scale: 1.3; }    /* ← mobile portrait */
  .brand-intro::after  { height: 140px; }
  .brand-intro__model-wrap {
    width: min(260px, 86vw);
    height: min(200px, 60vw);
  }
  .brand-intro__tagline {
    font-size: 0.96rem;
    max-width: 300px;
  }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .brand-intro__model-float {
    animation: none;
  }
  .brand-intro__scroll-arrow {
    animation: none;
  }
  .brand-intro__tagline {
    transition: none;
  }
  .brand-intro-copy-item {
    transition: none;
    transform: none;
    filter: none;
  }
}

.form-submit-note.visible {
  display: block;
}

.form-note {
  margin-top: 18px;
  padding: 13px 14px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent),
    rgba(9,12,13,0.70);
  border-color: rgba(255,255,255,0.065);
}

@keyframes pfFilterIn {
  from { opacity: 0.72; transform: scale(0.992); }
  to { opacity: 1; transform: scale(1); }
}

.partner-card {
  min-height: 150px;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(var(--color-accent-rgb), 0.10), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 42%),
    var(--bg-card);
}

.partner-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(var(--color-accent-rgb), 0.18), transparent) 50% 43px / 72% 1px no-repeat,
    linear-gradient(rgba(var(--color-accent-rgb), 0.14), transparent) 50% 12px / 1px 58px no-repeat,
    linear-gradient(270deg, rgba(255,255,255,0.10), transparent 46%) bottom right / 70px 1px no-repeat;
}

.partner-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(var(--color-accent-rgb), 0.22), rgba(var(--color-accent-rgb), 0.055) 54%, transparent 56%),
    #0B1011;
  border: 1px solid rgba(var(--color-accent-rgb), 0.24);
  color: rgba(240,242,241,0.88);
  box-shadow: 0 0 0 7px rgba(255,255,255,0.025), inset 0 1px 0 rgba(255,255,255,0.08);
}

.partner-avatar::before,
.partner-avatar::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.partner-avatar::before {
  inset: -8px;
  border: 1px solid rgba(255,255,255,0.065);
}

.partner-avatar::after {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--accent);
  opacity: 0.26;
  transform: translate(-50%, -50%);
}

.partner-network {
  position: relative;
  min-height: 560px;
  margin: 10px 0 72px;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--color-accent-rgb), 0.075), transparent 26%),
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px),
    rgba(8,10,11,0.46);
  background-size: auto, 42px 42px, 42px 42px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.partner-network::before,
.partner-network::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.partner-network::before {
  inset: 24px;
  border: 1px solid rgba(255,255,255,0.045);
  border-radius: 10px;
}

.partner-network::after {
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.partner-network-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.partner-network-line {
  stroke: rgba(151,166,158,0.18);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke var(--transition), stroke-width var(--transition), opacity var(--transition);
}

.partner-network:has(.partner-card:hover) .partner-network-line {
  stroke: rgba(151,166,158,0.12);
}

.partner-network:has(.partner-card--gs:hover) .partner-network-line--gs,
.partner-network:has(.partner-card--it:hover) .partner-network-line--it,
.partner-network:has(.partner-card--gz:hover) .partner-network-line--gz,
.partner-network:has(.partner-card--mm:hover) .partner-network-line--mm,
.partner-network:has(.partner-card--si:hover) .partner-network-line--si,
.partner-network:has(.partner-card--td:hover) .partner-network-line--td,
.partner-network:has(.partner-card--lt:hover) .partner-network-line--lt,
.partner-network:has(.partner-card--dg:hover) .partner-network-line--dg {
  stroke: rgba(var(--color-accent-rgb), 0.45);
  stroke-width: 1.35;
}

.partner-network-anchor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  background:
    radial-gradient(circle, rgba(var(--color-accent-rgb), 0.14), rgba(10,15,16,0.92) 62%),
    #0B1011;
  box-shadow: 0 20px 48px rgba(0,0,0,0.34), 0 0 0 10px rgba(255,255,255,0.018), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translate(-50%, -50%);
}

.partner-network-anchor__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: 10px;
  border-radius: 50%;
  color: var(--accent);
  background: rgba(var(--color-accent-rgb), 0.055);
  border: 1px solid rgba(var(--color-accent-rgb), 0.18);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: .04em;
  text-align: center;
}

.partner-network .partner-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  margin: 0;
}

.partner-network .partner-card {
  position: absolute;
  width: min(220px, 22%);
  min-height: 138px;
  padding: 20px 18px;
  transform: translate(-50%, -50%);
}

.partner-network .partner-card:hover {
  transform: translate(-50%, calc(-50% - 4px));
}

.partner-card--gs { left: 12%; top: 22%; }
.partner-card--it { left: 36%; top: 18%; }
.partner-card--gz { left: 64%; top: 18%; }
.partner-card--mm { left: 88%; top: 22%; }
.partner-card--si { left: 12%; top: 52%; }
.partner-card--td { left: 88%; top: 52%; }
.partner-card--lt { left: 28%; top: 80%; }
.partner-card--dg { left: 72%; top: 80%; }

.partner-network .partner-avatar {
  width: 54px;
  height: 54px;
  margin-bottom: 2px;
  font-size: 1rem;
}

.partner-network .partner-name,
.partner-network .partner-type {
  position: relative;
  z-index: 1;
}

.partner-network .partner-name {
  max-width: 100%;
  line-height: 1.25;
}

.tech-partner-card {
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.07), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.026), transparent 36%),
    var(--bg-card);
}

.tech-partner-card:hover {
  box-shadow: 0 16px 38px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.055);
}

.tech-partner-badge {
  border-radius: 6px;
  background: rgba(var(--color-accent-rgb), 0.055);
  border-color: rgba(var(--color-accent-rgb), 0.22);
}

.contact-form-card {
  box-shadow: 0 20px 48px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.045);
}

.service-cta-box {
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.07), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.024), transparent 36%),
    var(--bg-card);
}

.method-card,
.audit-step {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.024), transparent 36%),
    #101315;
}

.audit-step-num,
.why-number {
  color: rgba(var(--color-accent-rgb), 0.72);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .module-card,
  .pillar-card,
  .service-card,
  .product-card,
  .why-card,
  .portfolio-card,
  .team-card {
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  }

  .module-card:hover,
  .pillar-card:hover,
  .service-card:hover,
  .product-card:hover,
  .why-card:hover,
  .portfolio-card:hover,
  .team-card:hover {
    transform: none;
  }

  .team-slide {
    transition: opacity 0.15s ease;
  }
  /* Remove blur on reduced motion — blur is a disorienting visual effect */
  .team-slide.tc-prev,
  .team-slide.tc-next {
    filter: brightness(0.62);
  }
}

/* ── TARGETED SERVICE CONTROL-ROOM COMPONENTS ── */
.service-points {
  gap: 8px;
}

.sp-item,
.process-row,
.capability-row {
  position: relative;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 18px;
  border-radius: 6px;
  border-color: rgba(255,255,255,0.075);
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.105), transparent 2px) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 44%),
    rgba(13,16,18,0.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.026);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.sp-item:hover,
.process-row:hover,
.capability-row:hover {
  border-color: rgba(var(--color-accent-rgb), 0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  transform: none;
}

.sp-item svg {
  width: 18px;
  height: 18px;
  padding: 3px;
  margin-top: 1px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.20);
  border-radius: 4px;
  background: rgba(var(--color-accent-rgb), 0.055);
  color: rgba(var(--color-accent-rgb), 0.82);
}

.sp-item::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.10), transparent 36%) top left / 66px 1px no-repeat,
    linear-gradient(rgba(var(--color-accent-rgb), 0.12), transparent 48%) top left / 1px 44px no-repeat;
}

.sp-item::after {
  right: 10px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.035);
}

.subcategory-list {
  gap: 6px;
}

.subcat-item {
  position: relative;
  padding: 8px 10px 8px 24px;
  border-radius: 5px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.045);
}

.subcat-dot {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(var(--color-accent-rgb), 0.48);
  transform: translateY(-50%) rotate(45deg);
}

.tech-stack {
  margin-top: 0;
}

.tech-console .tech-pill {
  border-radius: 5px;
  background: rgba(16,21,23,0.92);
  border-color: rgba(255,255,255,0.08);
  color: rgba(240,242,241,0.72);
}

.tech-console .tech-pill:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.28);
  background: rgba(var(--color-accent-rgb), 0.075);
}

.methodology-grid .method-card {
  border-radius: 6px;
  background: rgba(16,20,22,0.88);
}

.digital-flow {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .contact-detail,
  .contact-social-link,
  .form-control,
  .contact-form-card .btn--primary::after {
    transition: none;
  }

  .product-command-link,
  .product-command-link::before,
  .product-command-link::after,
  .product-item {
    transition: none;
  }

  .pf-full-grid.is-filtering .pf-full-card:not(.hidden) {
    animation: none;
  }

  .pf-full-img img,
  .filter-btn,
  .filter-btn::before,
  .filter-btn::after,
  .pf-full-card {
    transition: none;
  }

  .tech-console__rail,
  .tech-console .tech-pill,
  .digital-flow__step {
    animation: none;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
  }

  .tech-console .tech-pill:hover {
    transform: none;
  }
}

/* ── RESPONSIVE — inner pages ── */
@media (max-width: 1024px) {
  .service-content       { grid-template-columns: 1fr; gap: 32px; }
  .product-listing       { grid-template-columns: repeat(2, 1fr); }
  .product-item--featured { grid-column: span 2; }
  #podpis .product-listing { grid-template-columns: repeat(2, 1fr) !important; }
  .pf-full-grid          { grid-template-columns: repeat(2, 1fr); }
  .pf-full-card:nth-child(1) { grid-column: span 2; }
  .partner-cards         { grid-template-columns: repeat(2, 1fr); }
  .tech-partners-grid    { grid-template-columns: 1fr; }
  .contact-layout        { grid-template-columns: 1fr; gap: 40px; }
  .audit-steps           { grid-template-columns: 1fr; }
  .methodology-grid      { grid-template-columns: repeat(3, 1fr); }
  .digital-flow          { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .service-intro         { grid-template-columns: 1fr; }
  .service-icon-xl       { display: none; }
  .service-block         { padding: 56px 0; }
  .product-listing       { grid-template-columns: 1fr; }
  .product-item--featured { grid-column: auto; }
  #podpis .product-listing { grid-template-columns: 1fr !important; }
  .product-command-bar {
    position: relative;
    top: auto;
    flex-wrap: nowrap;
    margin-bottom: 28px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-command-bar::-webkit-scrollbar { display: none; }
  .product-command-link { flex: 0 0 auto; }
  .pf-full-grid          { grid-template-columns: 1fr; }
  .pf-full-card:nth-child(1) { grid-column: auto; }
  .filter-bar {
    position: relative;
    top: auto;
    margin-bottom: 26px;
  }
  .partner-cards         { grid-template-columns: repeat(2, 1fr); }
  .form-row              { grid-template-columns: 1fr; }
  .contact-form-card     { padding: 24px; }
  .contact-layout        { padding: 56px 0 80px; }
  .contact-detail        { min-height: 68px; }
  .tech-partners-grid    { grid-template-columns: 1fr; }
  .methodology-grid      { grid-template-columns: 1fr; }

  .methodology-grid::before {
    left: 50%;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 1px;
    height: auto;
    background: linear-gradient(transparent, rgba(var(--color-accent-rgb), 0.18), transparent);
  }

  .method-card + .method-card {
    margin-left: 0;
    margin-top: 8px;
  }

  .digital-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .digital-flow::before {
    left: 50%;
    right: auto;
    top: 26px;
    bottom: 26px;
    width: 1px;
    height: auto;
    transform: translateX(-50%);
  }

  .digital-flow__step {
    min-height: 46px;
  }
}

@media (max-width: 480px) {
  .tech-console {
    padding: 12px;
  }

  .tech-console__rail {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .tech-console__rail::after {
    display: none;
  }

  .tech-console__nodes {
    gap: 6px;
  }

  .sp-item {
    padding-right: 14px;
  }
}

@media (max-width: 1024px) {
  .partner-network {
    min-height: 520px;
  }

  .partner-network .partner-card {
    width: min(205px, 25%);
  }

  .partner-network-anchor {
    width: 112px;
    height: 112px;
  }

  .partner-network-anchor__mark {
    width: 76px;
    height: 76px;
    padding: 8px;
    font-size: .62rem;
  }
}

@media (max-width: 900px) {
  .partner-network {
    min-height: 0;
    padding: 22px;
    margin-bottom: 56px;
  }

  .partner-network::before,
  .partner-network::after,
  .partner-network-lines {
    display: none;
  }

  .partner-network-anchor {
    position: relative;
    left: auto;
    top: auto;
    width: 96px;
    height: 96px;
    margin: 4px auto 24px;
    transform: none;
  }

  .partner-network-anchor__mark {
    width: 70px;
    height: 70px;
    padding: 8px;
    font-size: .58rem;
  }

  .partner-network .partner-cards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .partner-network .partner-card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 140px;
    transform: none;
  }

  .partner-network .partner-card:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 560px) {
  .partner-network {
    padding: 18px;
  }

  .partner-network .partner-cards {
    grid-template-columns: 1fr;
  }

  .partner-network .partner-card {
    min-height: 128px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-network-line,
  .partner-network .partner-card {
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition), stroke var(--transition);
  }

  .partner-network .partner-card:hover {
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .partner-network .partner-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-featured,
  .svc-panel,
  .prod-featured {
    transition: none;
  }

  .svc-rail-chevron {
    transition: none;
    transform: none;
  }
}

/* ── HOMEPAGE SHAPE SYSTEM — asymmetric hover accents ──
   Applied after SYSTEM MODULE to override border shorthand per-family.
   pillar-card: top edge active accent
   why-card:    left edge active accent (distinct rhythm from pillar)
   ────────────────────────────────────────────────────────────────── */
.pillar-card:hover {
  border-top-color: rgba(var(--color-accent-rgb), 0.52);
}

.why-card:hover {
  border-left-color: rgba(var(--color-accent-rgb), 0.52);
}

@media (prefers-reduced-motion: reduce) {
  .prod-switch-item,
  .prod-switch-name,
  .prod-switch-dot,
  .prod-idx {
    transition: none;
  }
  .prod-switch-item:hover .prod-switch-name {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-wrap {
    overflow: visible;
  }

  .marquee-track {
    display: block;
    width: 100%;
    animation: none;
    transform: none !important;
  }

  .marquee-group:first-child {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .marquee-group[aria-hidden="true"] {
    display: none;
  }

  .client-logo:hover {
    transform: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SERVICE WORKSPACE — uslugi.html interactive tab component
   ═══════════════════════════════════════════════════════════════════════ */

.sw {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--shape-card);
  background:
    linear-gradient(
      148deg,
      rgba(255,255,255,0.058) 0%,
      rgba(255,255,255,0.016) 30%,
      rgba(255,255,255,0.003) 52%,
      transparent 68%
    ),
    linear-gradient(
      180deg,
      rgba(13,18,22,0.52) 0%,
      rgba(8,11,14,0.60) 100%
    );
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(124%);
  -webkit-backdrop-filter: blur(12px) saturate(124%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    inset 1px 0 0 rgba(255,255,255,0.04),
    0 14px 38px rgba(0,0,0,0.26);
}

/* specular glass-top highlight */
.sw::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent  0%,
    rgba(255,255,255,0.18) 18%,
    rgba(255,255,255,0.34) 46%,
    rgba(255,255,255,0.18) 80%,
    transparent  100%
  );
  pointer-events: none;
  z-index: 0;
}

/* top bar */
.sw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.014);
}
.sw-bar__identity {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.sw-bar__code {
  flex-shrink: 0;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(var(--color-accent-rgb), 0.58);
  font-variant-numeric: tabular-nums;
}
.sw-bar__title {
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-bar__status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.sw-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.62);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.10);
}
.sw-status-text {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sw-bar__controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.sw-ctrl {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.07);
}

/* tabbar */
.sw-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow-x: auto;
  scrollbar-width: none;
}
.sw-tabs::-webkit-scrollbar { display: none; }

.sw-tab {
  position: relative;
  flex-shrink: 0;
  padding: 8px 13px;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}
.sw-tab:last-child { border-right: none; }
.sw-tab:hover:not(.is-active) {
  color: var(--text-muted);
  background: rgba(255,255,255,0.022);
}
.sw-tab.is-active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.030);
}
.sw-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.sw-tab:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.50);
  outline-offset: -2px;
  z-index: 1;
}

/* panel body */
.sw-body {
  flex: 1;
  padding: 18px 16px 14px;
  min-height: 176px;
}
.sw-panel[hidden] { display: none; }

@keyframes swPanelIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sw-panel.is-entering {
  animation: swPanelIn 210ms ease both;
}

.sw-panel__cat {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(var(--color-accent-rgb), 0.64);
  margin-bottom: 5px;
}
.sw-panel__desc {
  font-size: 0.80rem;
  color: var(--text-muted);
  line-height: 1.56;
  margin-bottom: 13px;
}

/* tech / scope nodes */
.sw-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sw-node {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 0.71rem;
  font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: rgba(240,242,241,0.74);
  background: rgba(14,19,21,0.90);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--shape-tag);
  letter-spacing: 0.02em;
  transition:
    color var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}
.sw-node:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.28);
  background: rgba(var(--color-accent-rgb), 0.07);
}

/* ── SW-CHIP — interactive button version of sw-node ── */
.sw-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-size: 0.71rem;
  font-weight: 500;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: rgba(240,242,241,0.74);
  background: rgba(14,19,21,0.90);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--shape-tag);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}
.sw-chip:hover {
  color: var(--text-primary);
  border-color: rgba(var(--color-accent-rgb), 0.28);
  background: rgba(var(--color-accent-rgb), 0.07);
}
.sw-chip.is-active {
  color: var(--accent);
  border-color: rgba(var(--color-accent-rgb), 0.52);
  background: rgba(var(--color-accent-rgb), 0.11);
}

/* ── SW-DETAIL — chip description strip ── */
.sw-detail {
  min-height: 76px;
  margin-top: 12px;
  padding: 10px 12px 11px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.14);
  border-radius: var(--shape-tag);
  background: rgba(3,10,8,0.60);
}
.sw-detail__label {
  display: block;
  font-size: 0.51rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: rgba(var(--color-accent-rgb), 0.60);
  margin-bottom: 5px;
}
.sw-detail__title {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.sw-detail__text {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.48;
  margin: 0;
}

@keyframes swDetailIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sw-detail.is-updating {
  animation: swDetailIn 200ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .sw-detail.is-updating { animation: none; }
}

/* footer CTA */
.sw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.010);
  flex-wrap: wrap;
}
.sw-footer__text {
  font-size: 0.78rem;
  color: var(--text-faint);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}
.sw-footer__btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* sp-item — editorial strip style, replaces bordered-card look */
.sp-item {
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.10), transparent 2px) left / 2px 100% no-repeat,
    transparent;
  box-shadow: none;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sp-item:last-child { border-bottom: none; }
.sp-item:hover {
  border-bottom-color: rgba(255,255,255,0.055);
  background:
    linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.18), transparent 2px) left / 2px 100% no-repeat,
    transparent;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .sw-panel.is-entering { animation: none; }
}

@media (max-width: 768px) {
  .sw-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .sw-body { min-height: 160px; }
}


/* ═══════════════════════════════════════════
   SKILL & CHILL SIGNAL LAYER
   ═══════════════════════════════════════════ */

/* ── 1. Signal Rail (fixed, right side, desktop only) ── */
.sc-signal-rail {
  position: fixed;
  right: 44px;   /* odsunięty od scrollbara przeglądarki */
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  padding: 0;
  margin: 0;
}

@media (max-width: 1199px) {
  .sc-signal-rail { display: none; }
}

.sc-signal-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.3s, box-shadow 0.3s, transform 0.25s;
}

.sc-signal-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px;   /* więcej oddechu między etykietą a kropką */
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-family: inherit;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.sc-signal-dot:hover::after,
.sc-signal-dot.is-active::after {
  opacity: 1;
}

.sc-signal-dot.is-active {
  background: var(--accent, var(--color-accent));
  box-shadow: 0 0 6px 2px rgba(var(--color-accent-rgb), 0.38);
  transform: scale(1.35);
}

.sc-signal-dot:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.2);
}

/* ── 2. Section Scan-Line on Enter ── */
.section-signal {
  position: relative;
}

.section-signal::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 28%,
    rgba(var(--color-accent-rgb), 0.38) 40%,
    rgba(var(--color-accent-rgb), 0.72) 50%,
    rgba(var(--color-accent-rgb), 0.38) 60%,
    transparent 72%,
    transparent 100%
  );
  background-size: 300% 100%;
  background-position: 0% 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

@keyframes sc-scanline {
  0%   { background-position: 0% 0;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { background-position: 100% 0; opacity: 0; }
}

.section-signal.sc-scanning::after {
  animation: sc-scanline 680ms ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .section-signal::after { display: none; }
}

/* ── 3. Cursor Spotlight ── */
.signal-spotlight {
  position: relative;
}

.signal-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    rgba(var(--color-accent-rgb), 0.055) 0%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.signal-spotlight.is-lit::before {
  opacity: 1;
}

@media (max-width: 1023px) {
  .signal-spotlight::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-spotlight::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   26. SCENE LAYOUT SYSTEM — sceniczny scroll
   ═══════════════════════════════════════════════════════════════

   KILL SWITCH: usuń class="scene-layout" z <html> aby wyłączyć
   cały mechanizm i wrócić do klasycznego ciągłego scrolla.

   Sekcje snapowane (scroll-snap-align: start):
     #intro-3d, #hero  — pełne ekrany (100svh), twarda zmiana scen
     #o-nas, #uslugi, #produkty — miękki snap (proximity)

   Sekcje flow (bez snapowania):
     .social-proof, #sonora, #dlaczego, #portfolio, #zespol, #kontakt
     — śledzenie IntersectionObserver, normalny scroll

   ─────────────────────────────────────────────────────────────── */

/* Kontener sceniczny — proximity snap, bez override na anchor links */
html.scene-layout {
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}

/* Sekcje snapowane — punkt zaczepienia na górze sekcji */
.scene-section--snap {
  scroll-snap-align: start;
}

/* Intro i hero przeszły do .home-scene-stage — nie snapują już jako bezpośrednie
   dzieci scroll-container. Snap dotyczy teraz #o-nas, #uslugi, #produkty. */

/* Środkowe sceny treściowe — minimalna wysokość dla efektu scenicznego */
html.scene-layout #o-nas,
html.scene-layout #uslugi,
html.scene-layout #produkty {
  min-height: 85vh;   /* fallback */
  min-height: 85svh;  /* override: uwzględnia chrome mobilnej przeglądarki */
}

/* ─── Klasy stanu sceny (ustawiane przez JS SceneController) ─── */
/* .scene-section.is-inview  — sekcja aktualnie widoczna w viewport */
/* .scene-section.has-entered — sekcja weszła w viewport co najmniej raz */
/* .scene-section.is-past    — sekcja minięta (bottom < 0) */

/* Subtelne rozjaśnienie aktywnej sceny — opcjonalne, można wyłączyć */
.scene-section.is-inview {
  --scene-presence: 1;
}

/* Animacja wejścia treści dla snapowanych scen (hero, o-nas, uslugi, produkty) */
html.scene-layout .scene-section--snap [data-fade] {
  transition:
    opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Tonalne przejście intro → hero ─── */
/* Istniejące gradienty brand-intro__atmosphere i brand-intro::after
   już tworzą ciemne zejście u dołu intro. Nakładka top hero ('#hero::before')
   tworzy miękki start. Razem dają filmowy efekt przejścia. */

/* Miękki "wlot" hero-content po snapie — delikatne opóźnienie fade-in */
html.scene-layout #hero.scene-section--snap [data-fade]:not(.visible) {
  transition-delay: 0.08s;
}

/* ─── Mobile (≤768px) — wyłącz snap, normalny scroll ─── */
@media (max-width: 768px) {
  html.scene-layout {
    scroll-snap-type: none;
  }
  html.scene-layout #o-nas,
  html.scene-layout #uslugi,
  html.scene-layout #produkty {
    min-height: 0;
  }
}

/* ─── Reduced motion — wyłącz snap i przywróć scroll-padding ─── */
@media (prefers-reduced-motion: reduce) {
  html.scene-layout {
    scroll-snap-type: none;
    scroll-padding-top: calc(var(--nav-height) + 16px);
  }
  html.scene-layout .scene-section--snap [data-fade] {
    transition-delay: 0s;
    transition-duration: 0.01s;
  }
}

/* ═══════════════════════════════════════════════════════════════
   27. HOME SCENE STAGE — intro 3D → hero crossfade
   ═══════════════════════════════════════════════════════════════

   Pinned two-layer stage: intro i hero nakładają się w sticky viewport.
   • .home-scene-stage (min-height: 210svh) → scroll track
   • .home-scene-stage__sticky (height: 100svh, sticky top:0) → viewport
   • .brand-intro / #hero → position:absolute inset:0 → obie w tym samym miejscu
   • JS (stage-js-active + --scene-progress 0→1) → CSS calc() animuje warstwy

   KILL SWITCH: usuń class="scene-layout" z <html>
   DEBUG:       dodaj class="debug-scenes" do <html>
   ─────────────────────────────────────────────────────────────── */

/* ─── Scroll track ─── */
.home-scene-stage {
  position: relative;
  min-height: 210vh;
  min-height: 210svh;
  background: var(--bg-base);
  --intro-out: 0;
  --hero-in: 0;
  --overlay-alpha: 0;
}

/* ─── Sticky viewport ─── */
.home-scene-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-base);
}

/* ─── Transition overlay: ciemna faza między scenami (~progress 0.55–0.65) ─── */
.home-scene-stage__sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--bg-base);
  opacity: var(--overlay-alpha, 0);
  pointer-events: none;
}

/* ─── WARSTWY ABSOLUTNE — KRYTYCZNE ─────────────────────────────
   Wysoka specyficzność + !important gwarantują wygraną nad
   .brand-intro { position:relative } i .hero { position:relative }.
   Obie sekcje wypełniają sticky viewport (100svh × 100vw) i nakładają się. */
.home-scene-stage .brand-intro,
.home-scene-stage #intro-3d,
.home-scene-stage #hero,
.home-scene-stage .hero,
.home-scene-stage .scene-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

/* ─── Hero: flex centering w kontekście stage ─── */
.home-scene-stage #hero {
  display: flex;
  align-items: center;
}

/* ─── Layer 1 — Intro (widoczna na starcie) ─── */
.scene-layer--intro {
  z-index: 1;
  will-change: opacity, filter, transform;
  opacity: 1;
  filter: blur(0px);
  transform: none;
  pointer-events: auto;
}

/* ─── Layer 2 — Hero (ukryta dopóki JS nie uruchomi animacji) ─── */
.scene-layer--hero {
  z-index: 2;
  will-change: opacity, transform;
  opacity: 0;
  transform: none;
  pointer-events: none;
}

/* ─── Animacje aktywne tylko z .stage-js-active (dodane przez JS) ─── */

.home-scene-stage.stage-js-active .scene-layer--intro {
  opacity: calc(1 - var(--intro-out, 0));
  filter: blur(calc(var(--intro-out, 0) * 20px));
  transform:
    scale(calc(1 - var(--intro-out, 0) * 0.04))
    translateY(calc(var(--intro-out, 0) * -24px));
}

.home-scene-stage.stage-js-active .scene-layer--hero {
  opacity: var(--hero-in, 0);
  transform: none;
  pointer-events: none;
}

/* Treść hero: slide-up podczas wejścia sceny */
.home-scene-stage.stage-js-active #hero .hero-grid {
  transform: translateY(calc((1 - var(--hero-in, 0)) * 32px));
  will-change: transform;
}

.home-scene-stage.stage-js-active.is-hero-active .scene-layer--intro {
  pointer-events: none;
}
.home-scene-stage.stage-js-active.is-hero-active .scene-layer--hero {
  pointer-events: auto;
}

/* ─── Debug: html.debug-scenes ─── */
html.debug-scenes .home-scene-stage         { outline: 2px dashed #ff6b6b; }
html.debug-scenes .home-scene-stage__sticky { outline: 2px dashed #ffd93d; }
html.debug-scenes .scene-layer--intro       { outline: 2px solid var(--color-accent); }
html.debug-scenes .scene-layer--hero        { outline: 2px solid #4d96ff; }
html.debug-scenes .home-scene-stage::after {
  content:
    'p: '     attr(data-progress)
    '  out: ' attr(data-intro-out)
    '  in: '  attr(data-hero-in);
  position: fixed;
  top: 80px;
  left: 16px;
  background: rgba(0, 0, 0, 0.85);
  color: var(--color-accent);
  font: 11px/1.4 monospace;
  padding: 4px 10px;
  border-radius: 4px;
  z-index: 9999;
  pointer-events: none;
}

/* ─── Mobile (≤768px) — stage wyłączony, normalny flow sekcji ─── */
@media (max-width: 768px) {
  .home-scene-stage {
    min-height: 0;
    height: auto;
    background: transparent;
  }
  .home-scene-stage__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    isolation: auto !important;
    background: transparent !important;
  }
  .home-scene-stage__sticky::after { display: none; }
  .home-scene-stage #hero .hero-grid { transform: none !important; will-change: auto !important; }
  .home-scene-stage .brand-intro,
  .home-scene-stage #intro-3d,
  .home-scene-stage #hero,
  .home-scene-stage .hero,
  .home-scene-stage .scene-layer,
  .scene-layer--intro,
  .scene-layer--hero {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: revert !important;
    max-height: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    will-change: auto !important;
    z-index: auto !important;
  }
}

/* ─── Reduced motion — stage wyłączony, normalny flow sekcji ─── */
@media (prefers-reduced-motion: reduce) {
  .home-scene-stage {
    min-height: 0;
    height: auto;
    background: transparent;
  }
  .home-scene-stage__sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    isolation: auto !important;
    background: transparent !important;
  }
  .home-scene-stage__sticky::after { display: none; }
  .home-scene-stage #hero .hero-grid { transform: none !important; will-change: auto !important; }
  .home-scene-stage .brand-intro,
  .home-scene-stage #intro-3d,
  .home-scene-stage #hero,
  .home-scene-stage .hero,
  .home-scene-stage .scene-layer,
  .scene-layer--intro,
  .scene-layer--hero {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: revert !important;
    max-height: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: auto !important;
    will-change: auto !important;
    z-index: auto !important;
  }
}

/* ══ 28. SCENE FLOW — sceniczne wejścia sekcji po hero ═══════════════════════
   Sekcje wchodzą jako osobne sceny: opacity + translateY → pełna widoczność.
   Sterowane przez has-entered (Scene Controller) i html.scene-layout / .scene-flow.

   Klasy na sekcjach:
     .sfa              → bazowe wejście
     .sfa.sfa--strong  → mocniejsze (o-nas, uslugi, produkty, zespol)
     .sfa.sfa--light   → delikatne (social-proof, sonora, portfolio, kontakt)

   Kill switch: usuń class="scene-layout" z <html> (lub "scene-flow" na podstronach).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Transition ─── */
:is(html.scene-layout, html.scene-flow) .sfa {
  transition:
    opacity  0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}
:is(html.scene-layout, html.scene-flow) .sfa.sfa--strong { transition-duration: 0.80s; }
:is(html.scene-layout, html.scene-flow) .sfa.sfa--light  { transition-duration: 0.55s; }

/* ─── Pre-animation state ─── */
:is(html.scene-layout, html.scene-flow) .sfa:not(.has-entered) {
  opacity: 0.88;
  transform: translateY(32px);
}
:is(html.scene-layout, html.scene-flow) .sfa.sfa--strong:not(.has-entered) {
  opacity: 0.76;
  transform: translateY(44px);
}
:is(html.scene-layout, html.scene-flow) .sfa.sfa--light:not(.has-entered) {
  opacity: 0.92;
  transform: translateY(20px);
}

/* ─── Animated-in: wyższa specyficzność bije wszystkie warianty ─── */
:is(html.scene-layout, html.scene-flow) .sfa.has-entered,
:is(html.scene-layout, html.scene-flow) .sfa.sfa--strong.has-entered,
:is(html.scene-layout, html.scene-flow) .sfa.sfa--light.has-entered {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Scroll margin ─── */
.sfa {
  scroll-margin-top: calc(var(--nav-height) + 12px);
}

/* ─── Mobile: naturalny flow ─── */
@media (max-width: 768px) {
  :is(html.scene-layout, html.scene-flow) .sfa,
  :is(html.scene-layout, html.scene-flow) .sfa:not(.has-entered),
  :is(html.scene-layout, html.scene-flow) .sfa.sfa--strong:not(.has-entered),
  :is(html.scene-layout, html.scene-flow) .sfa.sfa--light:not(.has-entered) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Reduced motion: zero przejść ─── */
@media (prefers-reduced-motion: reduce) {
  :is(html.scene-layout, html.scene-flow) .sfa,
  :is(html.scene-layout, html.scene-flow) .sfa:not(.has-entered),
  :is(html.scene-layout, html.scene-flow) .sfa.sfa--strong:not(.has-entered),
  :is(html.scene-layout, html.scene-flow) .sfa.sfa--light:not(.has-entered) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════
   PRODUCT CATALOGUE — premium 2-col card grid
   ══════════════════════════════════════════════ */

/* ── grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
  /* nie pozwól dzieciom wylewać się poza kontener */
  overflow: hidden;
}

@media (min-width: 1440px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* ── bazowa karta produktu ──
   min-width: 0 zapobiega wymuszeniu pełnej szerokości przez zawartość flex */
.product-grid .product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 190px;
  min-width: 0;
  /* żadna karta nie może rozciągać się na więcej niż jedną kolumnę */
  grid-column: auto;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 60%),
    linear-gradient(160deg, rgba(13, 19, 19, 0.90) 0%, rgba(6, 8, 8, 0.96) 100%);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  color: inherit;
  cursor: default;
  scroll-margin-top: 160px;
}

/* subtelna linia świetlna na górze karty */
.product-grid .product-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
  z-index: 1;
}

/* zielony shine — pojawia się na hover */
.product-grid .product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.07) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.30s ease;
  pointer-events: none;
  z-index: 0;
}

.product-grid .product-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.30);
  box-shadow:
    0 0 0 1px rgba(var(--color-accent-rgb), 0.10),
    0 10px 28px rgba(0, 0, 0, 0.34),
    0 0 48px rgba(var(--color-accent-rgb), 0.04);
  transform: translateY(-4px);
}

.product-grid .product-card:hover::before {
  opacity: 1;
}

/* highlight po wejściu przez anchor */
.product-grid .product-card:target {
  border-color: rgba(var(--color-accent-rgb), 0.45);
  box-shadow:
    0 0 0 1px rgba(var(--color-accent-rgb), 0.18),
    0 0 32px rgba(var(--color-accent-rgb), 0.07);
}

/* ── featured — wyróżnienie wizualne, BEZ zmiany rozmiaru ── */
.product-grid .product-card--featured {
  grid-column: auto; /* NIGDY nie span 2 */
  border-color: rgba(255, 255, 255, 0.11);
  background:
    radial-gradient(ellipse at 14% 12%, rgba(var(--color-accent-rgb), 0.09) 0%, transparent 48%),
    linear-gradient(160deg, rgba(14, 22, 20, 0.93) 0%, rgba(6, 9, 8, 0.97) 100%);
}

/* zielona linia akcentu na górze featured */
.product-grid .product-card--featured::after {
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.22), rgba(var(--color-accent-rgb), 0.06), transparent);
}

/* ── ikona ── */
.product-grid .product-card__icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(var(--color-accent-rgb), 0.12), rgba(var(--color-accent-rgb), 0.04));
  border: 1px solid rgba(var(--color-accent-rgb), 0.16);
  border-radius: 8px;
  color: var(--accent);
  flex-shrink: 0;
  margin-bottom: 14px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.product-grid .product-card:hover .product-card__icon {
  background: linear-gradient(160deg, rgba(var(--color-accent-rgb), 0.20), rgba(var(--color-accent-rgb), 0.08));
  border-color: rgba(var(--color-accent-rgb), 0.30);
}

.product-grid .product-card__icon svg {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
}

/* ── treść karty ── */
.product-grid .product-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 7px;
  line-height: 1.3;
  min-width: 0;
}

.product-grid .product-card__desc {
  font-size: 0.80rem;
  color: var(--text-muted);
  line-height: 1.60;
  flex: 1;
  margin-bottom: 14px;
  min-width: 0;
}

/* ── footer karty: tagi + domena ── */
.product-grid .product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  min-width: 0;
}

.product-grid .product-card__tag {
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-faint);
  flex-shrink: 0;
}

.product-grid .product-card__tag--accent {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-color: rgba(var(--color-accent-rgb), 0.20);
  color: var(--accent);
}

.product-grid .product-card__domain {
  margin-left: auto;
  font-size: 0.69rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  opacity: 0.68;
  transition: opacity 0.18s ease;
  /* nie wymuś pełnej szerokości przez nowrap */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.product-grid .product-card__domain:hover {
  opacity: 1;
}

/* ── scroll offset kategorii ── */
.product-category {
  scroll-margin-top: 160px;
}

/* ── responsywność ── */
@media (max-width: 760px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
  }

  .product-grid .product-card {
    min-height: auto;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card,
  .product-grid .product-card::before {
    transition: none;
    transform: none !important;
  }

  .product-grid .product-card__icon {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT SUBNAV — sticky category bar (poza sekcjami)
   ══════════════════════════════════════════════════════════ */

.product-subnav {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  background: rgba(5, 8, 9, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 28px rgba(0, 0, 0, 0.28);
}

/* Bar wewnątrz subnav — przebija istniejący sticky */
.product-subnav .product-command-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}

/* Status po prawej */
.product-command-status {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 12px 0 12px 16px;
  flex-shrink: 0;
}

/* Linki wewnątrz subnav */
.product-subnav .product-command-link {
  padding: 12px 16px 12px 32px !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 0.80rem !important;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

.product-subnav .product-command-link:hover,
.product-subnav .product-command-link:focus-visible {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(var(--color-accent-rgb), 0.35) !important;
}

/* Aktywna kategoria */
.product-subnav .product-command-link.is-active {
  color: var(--accent) !important;
  background: rgba(var(--color-accent-rgb), 0.06) !important;
  border-bottom-color: var(--accent) !important;
}

.product-subnav .product-command-link.is-active::before {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.50) !important;
}

/* Mobile: poziomy scroll */
@media (max-width: 760px) {
  .product-subnav .product-command-bar {
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .product-subnav .product-command-bar::-webkit-scrollbar { display: none; }
  .product-subnav .product-command-link { flex: 0 0 auto !important; }
  .product-command-status { display: none; }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CATEGORY SECTION — subtelne radial tło
   ══════════════════════════════════════════════════════════ */

.product-category {
  position: relative;
  overflow: hidden;
}

.product-category::before {
  content: '';
  position: absolute;
  inset: -8% 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(var(--color-accent-rgb), 0.07) 0%, transparent 36%),
    radial-gradient(circle at 16% 82%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 40%);
  opacity: 0.8;
}

.product-category > .container {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD — ulepszone hover / shine / target / anchors
   ══════════════════════════════════════════════════════════ */

/* Scroll margin uwzgledniający nav + subnav */
body .product-category {
  scroll-margin-top: 56px;
}

body .product-grid .product-card {
  scroll-margin-top: 168px;
}

/* Shine diagonal na hover */
.product-grid .product-card::before {
  background:
    linear-gradient(
      128deg,
      rgba(var(--color-accent-rgb), 0.10) 0%,
      rgba(var(--color-accent-rgb), 0.03) 42%,
      transparent 60%
    ) !important;
}

/* Mocniejszy hover edge glow */
.product-grid .product-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(var(--color-accent-rgb), 0.14),
    0 12px 32px rgba(0, 0, 0, 0.40),
    0 0 60px rgba(var(--color-accent-rgb), 0.06) !important;
  transform: translateY(-4px) !important;
}

/* Domain widoczność na hover */
.product-grid .product-card:hover .product-card__domain {
  opacity: 1 !important;
}

/* Ikonka jasność na hover */
.product-grid .product-card:hover .product-card__icon {
  background: linear-gradient(160deg, rgba(var(--color-accent-rgb), 0.24), rgba(var(--color-accent-rgb), 0.10)) !important;
  border-color: rgba(var(--color-accent-rgb), 0.36) !important;
  box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.14) !important;
}

/* Target highlight — zielona ramka + pulse */
@keyframes product-card-pulse {
  0%   { box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.20), 0 0 0 4px rgba(var(--color-accent-rgb), 0.08); }
  60%  { box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.40), 0 0 0 10px rgba(var(--color-accent-rgb), 0.03); }
  100% { box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.22), 0 0 32px rgba(var(--color-accent-rgb), 0.08); }
}

.product-grid .product-card:target {
  border-color: rgba(var(--color-accent-rgb), 0.50) !important;
  animation: product-card-pulse 1.4s ease-out 0.2s 1 forwards;
}

@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card:target {
    animation: none;
    box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.22), 0 0 24px rgba(var(--color-accent-rgb), 0.08);
  }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD STAGGER — wejście w viewport
   ══════════════════════════════════════════════════════════ */

.product-grid .product-card.pc-hidden {
  opacity: 0;
  transform: translateY(14px);
}

.product-grid .product-card.pc-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.42s ease, transform 0.42s ease;
}

@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card.pc-hidden,
  .product-grid .product-card.pc-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══ PRODUCTS GRID FINAL OVERRIDE — przebija wszystko ══ */
body .product-category .product-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

body .product-category .product-grid > .product-card {
  grid-column: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 190px !important;
}

body .product-category .product-grid > .product-card.product-card--featured {
  grid-column: auto !important;
}

body .product-category .product-card__icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  flex-shrink: 0 !important;
}

body .product-category .product-card__icon svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block !important;
}

@media (min-width: 1500px) {
  body .product-category .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body .product-category .product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   PRODUCT PAGE — background crossfade stage
   ══════════════════════════════════════════════════════════ */

/* ── KLUCZOWA POPRAWKA: sekcje produktów muszą mieć transparentne tło
   .section--surface (solid bg-color) przykrywało fixed bg-stage.
   Scopujemy przez .products-main, żeby nie dotknąć innych stron. ── */
.products-main .product-category {
  background-color: transparent !important;
}

/* Warstwa-scena: fixed, poniżej całej treści strony produktów */
.product-bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Lżejszy overlay — maskuje bez zabijania tła */
.product-bg-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(5, 7, 7, 0.96) 0%,
      rgba(5, 7, 7, 0.82) 22%,
      rgba(5, 7, 7, 0.52) 48%,
      rgba(5, 7, 7, 0.20) 76%,
      rgba(5, 7, 7, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 7, 0.92) 0%,
      rgba(5, 7, 7, 0.36) 18%,
      rgba(5, 7, 7, 0.08) 44%,
      rgba(5, 7, 7, 0.10) 72%,
      rgba(5, 7, 7, 0.84) 100%
    );
}

/* Indywidualna warstwa obrazu — bardziej widoczna niż poprzednio */
.product-bg-layer {
  position: absolute;
  inset: -8%;
  opacity: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  filter: blur(6px) brightness(0.72) saturate(0.90);
  transform: scale(1.05);
  transition: opacity 500ms ease;
  will-change: opacity;
}

/* Mapowanie obrazów */
.product-bg-layer--enterprise  { background-image: url('../img/product-bg/ProdBG_1_2.png'); }
.product-bg-layer--workflow    { background-image: url('../img/product-bg/ProdBG_2_10.png'); }
.product-bg-layer--ocr         { background-image: url('../img/product-bg/ProdBG_2_10.png'); }
.product-bg-layer--signature   { background-image: url('../img/product-bg/ProdBG_4_8.png'); }

/* Treść nad tłem — NIE dotykamy .product-subnav (ma własne position:sticky z-index:40) */
.page-hero,
.product-category,
.cta-banner {
  position: relative;
  z-index: 2;
}

/* Bezwzględny zakaz przechwytywania kliknięć przez warstwę tła i jej dzieci */
.product-bg-stage,
.product-bg-stage::before,
.product-bg-stage::after,
.product-bg-layer,
.product-bg-layer::before,
.product-bg-layer::after {
  pointer-events: none !important;
}

/* Karty produktów: subtelny glass — ledwo wyczuwalna przezroczystość */
.products-main .product-grid .product-card {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 60%),
    linear-gradient(160deg, rgba(10, 15, 14, 0.74) 0%, rgba(5, 7, 7, 0.84) 100%) !important;
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
}

/* Mobile: mocniejszy blur, mniejsza opacity */
@media (max-width: 760px) {
  .product-bg-layer {
    filter: blur(9px) brightness(0.56) saturate(0.80);
  }
}

/* Reduced motion: wyłącz transition */
@media (prefers-reduced-motion: reduce) {
  .product-bg-layer {
    transition: none;
  }
}

/* Ostateczny porządek warstw: tła sekcji < smuga < właściwa treść. */
main .container,
.brand-intro__content,
.hero-grid {
  position: relative;
  z-index: 21;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO — solutions showcase
   ═══════════════════════════════════════════════════════════════════ */
.home-page .navbar:not(.scrolled) {
  background: rgba(3, 8, 9, 0.88);
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero.hero--solutions {
  min-height: 100svh;
  display: block;
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(28px, 4.2vh, 52px)) 0 clamp(40px, 6vh, 72px);
  background: #020708;
  isolation: isolate;
}

.hero.hero--solutions::before {
  display: none;
}

.hero-solutions__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 5, 7, 0.78) 0%, rgba(1, 5, 7, 0.68) 48%, rgba(1, 5, 7, 0.93) 100%),
    linear-gradient(90deg, rgba(0, 5, 7, 0.54), transparent 45%, rgba(0, 6, 7, 0.25)),
    url('../img/bg/BG_Light_9.png') center / cover no-repeat;
  filter: saturate(1.18) contrast(1.04);
  transform: scale(1.01);
}

.hero-solutions__backdrop::before,
.hero-solutions__backdrop::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.hero-solutions__backdrop::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(var(--color-accent-rgb), 0.08), transparent 42%),
    radial-gradient(ellipse at 0% 42%, rgba(var(--color-accent-rgb), 0.11), transparent 23%),
    radial-gradient(ellipse at 100% 47%, rgba(var(--color-accent-rgb), 0.12), transparent 24%);
}

.hero-solutions__backdrop::after {
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, rgba(0, 3, 4, 0.86));
}

.hero-solutions__inner {
  width: min(100% - 48px, 1480px);
  max-width: 1480px;
  margin-inline: auto;
}

.hero-solutions__header {
  max-width: 980px;
  margin: 0 auto clamp(24px, 3.8vh, 40px);
  text-align: center;
}

.hero-solutions__title {
  margin: 0;
  font-size: clamp(2.65rem, 4.25vw, 4.75rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.052em;
  text-wrap: balance;
}

.hero-solutions__title span,
.hero-solutions__title strong {
  display: block;
}

.hero-solutions__title span {
  color: #f5f7f6;
}

.hero-solutions__title strong {
  color: var(--color-accent);
  font-weight: 400;
  text-shadow: 0 0 34px rgba(var(--color-accent-rgb), 0.12);
}

.hero-solutions__lead {
  max-width: 790px;
  margin: clamp(16px, 2.3vh, 24px) auto 0;
  color: rgba(230, 236, 233, 0.76);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.55;
  text-wrap: balance;
}

.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.solution-card {
  position: relative;
  min-width: 0;
  height: clamp(315px, 35vh, 390px);
  overflow: hidden;
  border: 1px solid rgba(167, 195, 183, 0.22);
  border-radius: clamp(22px, 2vw, 30px);
  background:
    linear-gradient(145deg, rgba(14, 22, 22, 0.88), rgba(3, 9, 10, 0.76)),
    radial-gradient(circle at 50% 100%, rgba(var(--color-accent-rgb), 0.08), transparent 56%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  transition: transform 360ms cubic-bezier(.2, .8, .2, 1), border-color 360ms ease, box-shadow 360ms ease;
}

.solution-card::after {
  content: '';
  position: absolute;
  inset: auto 6% -34px;
  height: 72px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.16);
  filter: blur(34px);
  pointer-events: none;
}

.solution-card:hover,
.solution-card:focus-within {
  transform: translateY(-7px);
  border-color: rgba(var(--color-accent-rgb), 0.48);
  box-shadow: 0 30px 86px rgba(0, 0, 0, 0.48), 0 0 34px rgba(var(--color-accent-rgb), 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.solution-card__heading {
  position: relative;
  z-index: 3;
  padding: clamp(22px, 2vw, 30px) 82px 0 clamp(22px, 2vw, 30px);
}

.solution-card__heading h2 {
  margin: 0 0 4px;
  color: #f4f7f5;
  font-size: clamp(1.25rem, 1.55vw, 1.62rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.solution-card__heading p {
  margin: 0;
  color: rgba(220, 229, 225, 0.68);
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  line-height: 1.3;
}

.solution-card__arrow {
  position: absolute;
  top: clamp(20px, 1.8vw, 27px);
  right: clamp(20px, 1.8vw, 27px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(46px, 4vw, 56px);
  aspect-ratio: 1;
  color: #00170c;
  border: 1px solid rgba(var(--color-accent-rgb), 0.46);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--color-accent), var(--color-accent));
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42);
  transition: transform 280ms ease, filter 280ms ease, box-shadow 280ms ease;
}

.solution-card__arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.solution-card__arrow:hover,
.solution-card__arrow:focus-visible {
  transform: translate(2px, -2px);
  filter: brightness(1.08);
  box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.34), 0 0 0 4px rgba(var(--color-accent-rgb), 0.13);
  outline: none;
}

.solution-card__visual {
  position: absolute;
  inset: 92px 16px 0;
  transform-origin: 50% 80%;
  transition: transform 380ms cubic-bezier(.2, .8, .2, 1);
}

.solution-card:hover .solution-card__visual,
.solution-card:focus-within .solution-card__visual {
  transform: scale(1.025);
}

/* Card 1 — responsive application mockup */
.app-laptop {
  position: absolute;
  left: 12%;
  right: 0;
  bottom: -7%;
  height: 72%;
  overflow: hidden;
  border: 1px solid rgba(157, 185, 174, 0.3);
  border-radius: 12px 12px 4px 4px;
  background: #070d0e;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.58), 0 0 24px rgba(var(--color-accent-rgb), 0.08);
  transform: perspective(900px) rotateX(2deg) rotateY(-4deg);
}

.app-window-bar,
.tools-topbar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  color: rgba(224, 235, 230, 0.62);
  font-size: 8px;
  background: rgba(18, 29, 29, 0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.app-window-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.62);
}

.app-window-bar span { margin-left: 6px; }
.app-dashboard { display: grid; grid-template-columns: 24% 1fr; height: calc(100% - 26px); }
.app-sidebar { display: flex; flex-direction: column; gap: 12px; padding: 13px 9px; background: #091112; border-right: 1px solid rgba(255,255,255,.06); }
.app-sidebar b { color: var(--color-accent); font-size: 9px; }
.app-sidebar span { width: 78%; height: 4px; border-radius: 5px; background: rgba(181, 205, 195, 0.16); }
.app-main { padding: 13px 12px; }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.app-kpis i { padding: 8px 6px; color: #edf6f1; font-size: 14px; font-style: normal; border-radius: 6px; background: rgba(255,255,255,.045); }
.app-kpis small { display: block; margin-top: 2px; color: rgba(213, 229, 220, .43); font-size: 6px; font-weight: 400; }
.app-chart { position: relative; height: 48%; margin-top: 12px; overflow: hidden; border-radius: 7px; background: linear-gradient(180deg, rgba(var(--color-accent-rgb), .06), rgba(255,255,255,.02)); }
.app-chart::before,
.app-chart::after { content: ''; position: absolute; inset: 0; }
.app-chart::before { background: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(255,255,255,.045) 21px); }
.app-chart::after { left: 5%; top: 48%; width: 90%; height: 2px; background: var(--color-accent); box-shadow: 25px -13px 0 var(--color-accent), 52px -5px 0 var(--color-accent), 78px -28px 0 var(--color-accent), 106px -23px 0 var(--color-accent), 135px -46px 0 var(--color-accent); transform: rotate(-7deg); filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), .8)); }

.app-phone {
  position: absolute;
  left: 1%;
  bottom: -4%;
  z-index: 2;
  width: 28%;
  min-width: 82px;
  height: 70%;
  padding: 18px 10px 10px;
  overflow: hidden;
  border: 2px solid rgba(150, 177, 168, 0.55);
  border-radius: 18px;
  background: linear-gradient(165deg, #0a1314, #030707);
  box-shadow: 0 15px 34px rgba(0, 0, 0, .65), 0 0 20px rgba(var(--color-accent-rgb), .11);
  transform: rotate(-2deg);
}
.phone-speaker { position: absolute; top: 7px; left: 38%; width: 24%; height: 3px; border-radius: 4px; background: #253334; }
.app-phone strong { display: block; color: #eef7f2; font-size: 10px; }
.app-phone > small { color: rgba(216, 230, 223, .48); font-size: 6px; }
.phone-score { margin-top: 14px; color: #ecfff6; font-size: 23px; }
.phone-score span { display: block; color: rgba(213, 230, 222, .47); font-size: 6px; }
.phone-chart { position: relative; height: 31%; margin-top: 8px; border-radius: 6px; background: linear-gradient(160deg, rgba(var(--color-accent-rgb), .16), rgba(255,255,255,.025)); }
.phone-chart::after { content: ''; position: absolute; left: 14%; right: 10%; top: 54%; height: 2px; background: var(--color-accent); transform: rotate(-15deg); box-shadow: 14px -7px 0 var(--color-accent), 29px -4px 0 var(--color-accent); }
.phone-nav { position: absolute; display: flex; justify-content: space-around; left: 8px; right: 8px; bottom: 8px; }
.phone-nav i { width: 6px; height: 6px; border-radius: 2px; background: var(--color-accent); opacity: .7; }

/* Card 2 — business dashboard */
.tools-window {
  position: absolute;
  inset: 7% 0 -4%;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), 0.55);
  border-radius: 13px;
  background: #071011;
  box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 24px rgba(var(--color-accent-rgb), .1);
}
.tools-topbar { height: 30px; gap: 14px; }
.tools-topbar b { color: var(--color-accent); }
.tools-topbar span { color: #eff9f3; font-size: 10px; }
.tools-topbar i { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.tools-body { display: grid; grid-template-columns: 18% 1fr; height: calc(100% - 30px); }
.tools-sidebar { display: flex; flex-direction: column; gap: 14px; padding: 15px 10px; border-right: 1px solid rgba(255,255,255,.06); background: #091213; }
.tools-sidebar span { width: 78%; height: 5px; border-radius: 6px; background: rgba(185,208,198,.16); }
.tools-content { padding: 12px; }
.tools-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.tools-kpis i { padding: 8px 5px; color: rgba(212,226,219,.45); font-size: 6px; font-style: normal; border-radius: 6px; background: rgba(255,255,255,.04); }
.tools-kpis b { display: block; margin-bottom: 2px; color: #eff8f3; font-size: 13px; }
.tools-columns { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7px; margin-top: 8px; }
.tools-columns > div { min-width: 0; padding: 10px; border-radius: 7px; background: rgba(255,255,255,.035); }
.tools-columns strong { display: block; margin-bottom: 10px; color: #e8f3ed; font-size: 7px; }
.tools-columns span { display: block; width: var(--w); height: 4px; margin: 9px 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-accent) 0 64%, rgba(255,255,255,.09) 64%); }
.tools-columns small { display: flex; justify-content: space-between; gap: 3px; padding: 6px 0; color: rgba(211,225,217,.48); font-size: 5px; border-bottom: 1px solid rgba(255,255,255,.05); }
.tools-columns small b { color: var(--color-accent); font-size: inherit; }

/* Card 3 — AI network */
.ai-visual { inset-inline: 8px; }
.ai-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai-links path { fill: none; stroke: rgba(var(--color-accent-rgb), .55); stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), .72)); stroke-dasharray: 5 5; animation: aiFlow 8s linear infinite; }
.ai-links circle { fill: var(--color-accent); filter: drop-shadow(0 0 6px var(--color-accent)); }
.ai-core { position: absolute; left: 50%; top: 54%; display: grid; place-items: center; width: 76px; aspect-ratio: 1; border: 1px solid rgba(var(--color-accent-rgb), .74); background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .24), rgba(3,12,11,.92)); box-shadow: 0 0 32px rgba(var(--color-accent-rgb), .34), inset 0 0 22px rgba(var(--color-accent-rgb), .14); transform: translate(-50%,-50%) rotate(30deg); }
.ai-core::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(var(--color-accent-rgb), .72); background: rgba(var(--color-accent-rgb), .16); }
.ai-core span { position: relative; z-index: 1; color: var(--color-accent); font-size: 12px; font-weight: 700; transform: rotate(-30deg); text-shadow: 0 0 12px var(--color-accent); }
.ai-node { position: absolute; width: 35%; max-width: 150px; padding: 9px 10px; border: 1px solid rgba(158,190,177,.24); border-radius: 9px; background: rgba(8,18,18,.87); box-shadow: 0 8px 20px rgba(0,0,0,.26), inset 0 0 16px rgba(var(--color-accent-rgb), .035); }
.ai-node b { display: block; color: #dff6ea; font-size: 8px; }
.ai-node b::before { content: '✦'; margin-right: 5px; color: var(--color-accent); }
.ai-node small { display: block; margin-top: 3px; color: rgba(214,228,221,.49); font-size: 5.5px; line-height: 1.25; }
.ai-node--data { top: 9%; left: 1%; }
.ai-node--auto { top: 9%; right: 1%; }
.ai-node--integrations { bottom: 5%; left: 0; }
.ai-node--reports { bottom: 5%; right: 0; }

@keyframes aiFlow { to { stroke-dashoffset: -40; } }

@media (max-width: 1080px) {
  .hero.hero--solutions { padding-bottom: 64px; }
  .solution-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-card { height: 360px; }
  .solution-card--ai { grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
}

@media (max-width: 700px) {
  .hero.hero--solutions { overflow: clip; padding-top: calc(var(--nav-height) + 34px); padding-bottom: 48px; }
  .hero-solutions__inner { width: min(100% - 30px, 520px); }
  .hero-solutions__header { margin-bottom: 28px; }
  .hero-solutions__title { font-size: clamp(2.15rem, 10.4vw, 3.25rem); line-height: 1.07; letter-spacing: -0.045em; }
  .hero-solutions__lead { font-size: .98rem; line-height: 1.58; }
  .solution-cards { grid-template-columns: 1fr; gap: 16px; }
  .solution-card,
  .solution-card--ai { grid-column: auto; width: 100%; height: 350px; }
  .solution-card__heading { padding-top: 23px; }
  .solution-card__visual { top: 90px; }
}

@media (max-width: 390px) {
  .hero-solutions__inner { width: min(100% - 22px, 520px); }
  .solution-card { height: 330px; border-radius: 21px; }
  .solution-card__heading { padding-left: 20px; }
  .app-phone { min-width: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .solution-card,
  .solution-card__visual,
  .solution-card__arrow { transition: none; }
  .solution-card:hover,
  .solution-card:focus-within,
  .solution-card:hover .solution-card__visual,
  .solution-card:focus-within .solution-card__visual { transform: none; }
  .ai-links path { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME HERO — AI products
   ══════════════════════════════════════════════════════════════════════════ */
.hero.hero--ai {
  position: relative;
  display: flex;
  min-height: 100svh;
  padding: calc(var(--nav-height) + clamp(22px, 3.2vh, 38px)) 0 clamp(24px, 4vh, 44px);
  overflow: hidden;
  color: #f4f8f6;
  background: #020708;
  isolation: isolate;
}

.hero.hero--ai::before { display: none; }

.hero-ai__backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 5, 7, .95) 0%, rgba(1, 6, 7, .9) 34%, rgba(1, 8, 8, .6) 72%, rgba(0, 8, 6, .48) 100%),
    linear-gradient(180deg, rgba(0, 4, 5, .73), rgba(0, 6, 6, .58) 50%, rgba(0, 4, 5, .88)),
    url('../img/bg/BG_Light_9.png') center / cover no-repeat;
  filter: saturate(1.2) contrast(1.08);
}

.hero-ai__backdrop::before,
.hero-ai__backdrop::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.hero-ai__backdrop::before {
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(var(--color-accent-rgb), .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-accent-rgb), .12) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, transparent 25%, #000 70%);
}

.hero-ai__backdrop::after {
  inset: -20% 0 auto 42%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(var(--color-accent-rgb), .13), transparent 63%);
  filter: blur(28px);
  animation: heroAmbient 8s ease-in-out infinite alternate;
}

.hero-ai__backdrop > i {
  position: absolute;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 6px var(--color-accent), 0 0 18px rgba(var(--color-accent-rgb), .8);
  animation: heroSpark 4.6s ease-in-out infinite;
}
.hero-ai__backdrop > i:nth-child(1) { left: 56%; top: 24%; }
.hero-ai__backdrop > i:nth-child(2) { left: 78%; top: 66%; animation-delay: -1.7s; }
.hero-ai__backdrop > i:nth-child(3) { right: 4%; top: 31%; animation-delay: -3s; }

.hero-ai__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100% - 48px, 1480px);
  max-width: 1480px;
  margin-inline: auto;
}

.hero-ai__main {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  align-items: center;
  min-height: clamp(405px, 60vh, 560px);
}

.hero-ai__copy {
  position: relative;
  z-index: 3;
  padding: 6px clamp(18px, 2.8vw, 48px) 12px 0;
}

.hero-ai__title {
  margin: 0;
  color: #f4f7f6;
  font-size: clamp(2.25rem, 3.35vw, 4.15rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.055em;
}

.hero-ai__line { display: block; white-space: nowrap; }
.hero-ai__title em { color: var(--color-accent); font-style: normal; text-shadow: 0 0 32px rgba(var(--color-accent-rgb), .14); }

.hero-ai__lead {
  max-width: 620px;
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  color: rgba(225, 234, 230, .76);
  font-size: clamp(.96rem, 1.13vw, 1.15rem);
  line-height: 1.58;
}

.hero-ai__actions { display: flex; gap: 16px; margin-top: clamp(22px, 3.4vh, 34px); }

.hero-ai__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-width: 205px;
  min-height: 51px;
  padding: 12px 22px;
  border: 1px solid var(--color-accent);
  border-radius: 9px;
  font-size: .98rem;
  font-weight: 600;
  transition: transform 250ms ease, color 250ms ease, background 250ms ease, box-shadow 250ms ease;
}
.hero-ai__button span { margin-left: auto; font-size: 1.25rem; line-height: 1; }
.hero-ai__button--primary { color: #00160c; background: linear-gradient(135deg, var(--color-accent), var(--color-accent)); box-shadow: 0 11px 28px rgba(var(--color-accent-rgb), .15); }
.hero-ai__button--outline { color: var(--color-accent); background: rgba(3, 15, 13, .34); }
.hero-ai__button:hover,
.hero-ai__button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--color-accent-rgb), .24); outline: none; }
.hero-ai__button--outline:hover,
.hero-ai__button--outline:focus-visible { color: #06120c; background: var(--color-accent); }

.hero-ai__visual {
  position: relative;
  align-self: stretch;
  min-height: 405px;
  overflow: hidden;
  border: 1px solid rgba(var(--color-accent-rgb), .26);
  border-radius: clamp(28px, 3vw, 46px);
  background:
    radial-gradient(circle at 50% 52%, rgba(var(--color-accent-rgb), .17), transparent 29%),
    radial-gradient(ellipse at 78% 82%, rgba(var(--color-accent-rgb), .11), transparent 35%),
    linear-gradient(150deg, rgba(17, 41, 34, .5), rgba(2, 11, 11, .7));
  box-shadow: inset 0 0 70px rgba(var(--color-accent-rgb), .04), 0 20px 70px rgba(0, 0, 0, .26);
  backdrop-filter: blur(5px);
}

.hero-ai__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .25;
  background-image: radial-gradient(circle, rgba(var(--color-accent-rgb), .34) 1px, transparent 1.5px);
  background-size: 21px 21px;
  mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}

.hero-ai__circuits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-ai__circuits path { fill: none; stroke: rgba(var(--color-accent-rgb), .45); stroke-width: 1.2; stroke-dasharray: 9 6; filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), .65)); animation: heroCircuit 12s linear infinite; }
.hero-ai__circuits circle { fill: var(--color-accent); filter: drop-shadow(0 0 7px var(--color-accent)); animation: heroNode 2.8s ease-in-out infinite alternate; }

.hero-ai__card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  width: min(31%, 245px);
  min-height: 86px;
  padding: 15px 17px;
  border: 1px solid rgba(163, 205, 187, .23);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(24, 43, 39, .9), rgba(9, 22, 21, .87));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(14px);
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.hero-ai__card:hover { transform: translateY(-4px); border-color: rgba(var(--color-accent-rgb), .48); box-shadow: 0 18px 38px rgba(0,0,0,.4), 0 0 25px rgba(var(--color-accent-rgb), .09); }
.hero-ai__card > svg { flex: 0 0 37px; width: 37px; height: 37px; fill: none; stroke: var(--color-accent); stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(var(--color-accent-rgb), .4)); }
.hero-ai__card h2 { margin: 0 0 4px; color: #f0f5f2; font-size: clamp(.86rem, 1.03vw, 1.03rem); line-height: 1.15; white-space: nowrap; }
.hero-ai__card p { margin: 0; color: rgba(217, 229, 223, .62); font-size: clamp(.68rem, .79vw, .82rem); line-height: 1.42; }
.hero-ai__card--automation { left: 5.5%; top: 8%; }
.hero-ai__card--optimization { right: 5.5%; top: 8%; }
.hero-ai__card--apps { left: 5.5%; bottom: 8%; }
.hero-ai__card--data { right: 5.5%; bottom: 8%; }

.hero-ai__core {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 2;
  width: clamp(112px, 12vw, 170px);
  aspect-ratio: 1.35;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 28px rgba(var(--color-accent-rgb), .45));
  animation: heroCoreFloat 4.8s ease-in-out infinite;
}
.hero-ai__core-layer {
  position: absolute;
  left: 50%;
  width: 72%;
  aspect-ratio: 1.45;
  border: 1px solid rgba(var(--color-accent-rgb), .72);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .25), rgba(5, 32, 26, .92));
  box-shadow: inset 0 0 22px rgba(var(--color-accent-rgb), .2), 0 0 18px rgba(var(--color-accent-rgb), .25);
  transform: translateX(-50%) rotateX(58deg) rotateZ(45deg);
}
.hero-ai__core-layer--back { top: 34%; opacity: .42; }
.hero-ai__core-layer--middle { top: 22%; opacity: .7; }
.hero-ai__core-layer--front { top: 6%; display: grid; place-items: center; background: linear-gradient(145deg, rgba(var(--color-accent-rgb), .4), rgba(9, 57, 43, .94)); }
.hero-ai__core-layer--front::after { content: ''; position: absolute; inset: 13%; border: 1px solid rgba(var(--color-accent-rgb), .63); border-radius: 6px; }
.hero-ai__core b { position: relative; z-index: 2; color: var(--color-accent); font-size: clamp(1.1rem, 1.7vw, 1.7rem); font-style: italic; transform: rotateZ(-45deg) rotateX(-45deg); text-shadow: 0 0 12px var(--color-accent); }

.hero-ai__strips { display: grid; grid-template-columns: 42% 58%; gap: clamp(18px, 2.5vw, 38px); margin-top: clamp(16px, 2.5vh, 26px); }
.hero-ai__strip {
  display: grid;
  align-items: center;
  min-height: 70px;
  margin: 0;
  padding: 10px 18px;
  list-style: none;
  border: 1px solid rgba(var(--color-accent-rgb), .23);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(11, 28, 25, .75), rgba(4, 18, 17, .61));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}
.hero-ai__strip--benefits { grid-template-columns: repeat(4, 1fr); }
.hero-ai__strip--industries { grid-template-columns: repeat(5, 1fr); }
.hero-ai__strip li { display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; color: rgba(237, 244, 241, .88); font-size: clamp(.7rem, .76vw, .82rem); line-height: 1.28; }
.hero-ai__strip--benefits li + li { border-left: 1px solid rgba(156, 189, 175, .2); }
.hero-ai__strip svg { flex: 0 0 29px; width: 29px; height: 29px; fill: none; stroke: var(--color-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--color-accent-rgb), .25)); }

@keyframes heroAmbient { to { transform: translate3d(4%, 2%, 0) scale(1.08); opacity: .75; } }
@keyframes heroSpark { 0%,100% { opacity: .2; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.25); } }
@keyframes heroCircuit { to { stroke-dashoffset: -90; } }
@keyframes heroNode { to { opacity: .45; } }
@keyframes heroCoreFloat { 50% { transform: translate(-50%, calc(-50% - 7px)); } }

@media (max-width: 1180px) {
  .hero-ai__main { grid-template-columns: minmax(0, 46%) minmax(0, 54%); }
  .hero-ai__strips { grid-template-columns: 46% 54%; }
  .hero-ai__title { font-size: clamp(2.15rem, 3.55vw, 3.2rem); }
  .hero-ai__line { white-space: normal; }
  .hero-ai__card { width: 36%; padding-inline: 13px; }
  .hero-ai__card--automation, .hero-ai__card--apps { left: 3%; }
  .hero-ai__card--optimization, .hero-ai__card--data { right: 3%; }
}

@media (max-width: 900px) {
  .hero.hero--ai { min-height: auto; }
  .hero-ai__inner { width: min(100% - 36px, 760px); }
  .hero-ai__main { grid-template-columns: 1fr; gap: 34px; }
  .hero-ai__copy { max-width: 680px; padding-right: 0; }
  .hero-ai__title { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .hero-ai__visual { min-height: 430px; }
  .hero-ai__strips { grid-template-columns: 1fr; gap: 14px; }
  .hero-ai__strip { min-height: 76px; }
}

@media (max-width: 600px) {
  .hero.hero--ai { padding-top: calc(var(--nav-height) + 28px); padding-bottom: 34px; }
  .hero-ai__inner { width: min(100% - 28px, 520px); }
  .hero-ai__title { font-size: clamp(2.15rem, 10vw, 3.25rem); line-height: 1.07; }
  .hero-ai__lead { font-size: .95rem; line-height: 1.56; }
  .hero-ai__actions { flex-direction: column; gap: 12px; }
  .hero-ai__button { width: 100%; min-width: 0; }
  .hero-ai__main { gap: 28px; }
  .hero-ai__visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 150px 10px 12px; border-radius: 25px; overflow: hidden; }
  .hero-ai__circuits { height: 170px; }
  .hero-ai__core { top: 76px; width: 128px; }
  .hero-ai__card { position: relative; inset: auto; width: auto; min-height: 122px; padding: 13px 10px; flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 13px; }
  .hero-ai__card > svg { width: 30px; height: 30px; flex-basis: 30px; }
  .hero-ai__card h2 { font-size: .8rem; white-space: normal; }
  .hero-ai__card p { font-size: .68rem; }
  .hero-ai__strips { margin-top: 14px; }
  .hero-ai__strip { padding: 14px 10px; }
  .hero-ai__strip--benefits { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .hero-ai__strip--industries { grid-template-columns: repeat(3, 1fr); gap: 18px 0; }
  .hero-ai__strip li { justify-content: flex-start; padding: 0 8px; font-size: .7rem; }
  .hero-ai__strip--benefits li + li { border-left: 0; }
  .hero-ai__strip svg { width: 25px; height: 25px; flex-basis: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ai__backdrop::after,
  .hero-ai__backdrop > i,
  .hero-ai__circuits path,
  .hero-ai__circuits circle,
  .hero-ai__core { animation: none; }
  .hero-ai__button,
  .hero-ai__card { transition: none; }
  .hero-ai__button:hover,
  .hero-ai__button:focus-visible,
  .hero-ai__card:hover { transform: none; }
}

/* Shared Kompas Rolnika product screen inside the existing laptop mockup. */
.kompas-laptop {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  transform: translateY(-50%);
  transform-origin: center;
}

.kompas-laptop[hidden] {
  display: none !important;
}

.kompas-laptop .kompas-laptop__screen {
  position: absolute !important;
  z-index: 1;
  top: 9.7222% !important;
  left: 15.9375% !important;
  width: 67.96875% !important;
  height: 75.8333% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
}

.kompas-laptop .kompas-laptop__frame {
  position: absolute !important;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  pointer-events: none;
  filter: none !important;
  transform: none !important;
}

.pf-featured-media .kompas-laptop--featured {
  z-index: 2;
  transition: opacity 320ms ease, transform 320ms ease;
}

.pf-featured-media.is-kompas > .pf-featured-img {
  opacity: 0;
  visibility: hidden;
}

.pf-featured.is-changing .kompas-laptop--featured {
  opacity: .34;
  transform: translateY(-50%) scale(1.018);
}

body .pf-sel-thumb .kompas-laptop img,
body .pf-kompas-media .kompas-laptop img {
  opacity: 1;
  filter: none;
  transform: none;
}

.pf-sel-thumb {
  position: relative;
}

.pf-sel-item.is-active .kompas-laptop--thumb {
  transform: translateY(-50%) scale(1.025);
}

.pf-kompas-media .kompas-laptop {
  transition: transform .35s ease;
}

.pf-full-card:hover .pf-kompas-media .kompas-laptop {
  transform: translateY(-50%) scale(1.025);
}

.pf-full-card:hover .pf-kompas-media .kompas-laptop img {
  transform: none;
}

.prod-visual--kompas .prod-visual__sharp {
  background-position: right 28px center;
  background-size: min(72%, 760px) auto;
}

.prod-visual--kompas .prod-visual__blurred {
  background-position: center;
  background-size: cover;
}

@media (max-width: 700px) {
  .prod-visual--kompas .prod-visual__sharp {
    background-position: center;
    background-size: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-featured-media .kompas-laptop--featured,
  .pf-kompas-media .kompas-laptop {
    transition: none;
  }

  .pf-sel-item.is-active .kompas-laptop--thumb,
  .pf-full-card:hover .pf-kompas-media .kompas-laptop {
    transform: translateY(-50%);
  }
}