/* ========================================================================== 
   KOMPONENTY INTERFEJSU
   ========================================================================== */
.theme-logo { position: relative; display: inline-grid; flex: 0 0 auto; }
.theme-logo img { grid-area: 1 / 1; }
.theme-logo__dark { display: none; }
html[data-theme="dark"] .theme-logo__light { display: none; }
html[data-theme="dark"] .theme-logo__dark { display: block; }
.theme-logo--brand { width: 38px; height: 38px; }

.social-links { display: flex; align-items: center; gap: 3px; }
.social-links a,
.icon-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.social-links a:hover,
.icon-button:hover { color: var(--text); border-color: var(--line); background: var(--surface-muted); transform: translateY(-1px); }
.social-links svg,
.icon-button svg { width: 17px; height: 17px; fill: currentColor; }
.menu-toggle { display: none; }

.segmented-switch {
  height: 36px;
  padding: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-muted);
  color: var(--text-faint);
  font: 760 .62rem/1 var(--font-mono);
  letter-spacing: .035em;
}
.segmented-switch button {
  min-width: 44px;
  height: 28px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.segmented-switch button:hover { color: var(--text); transform: translateY(-1px); }
.segmented-switch button.is-active {
  background: var(--surface-elevated);
  color: var(--accent-strong);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--text) 10%, transparent);
}
.language-switch img {
  width: 18px;
  height: 12px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 15%, transparent);
}
.theme-switch button { min-width: 66px; }
.theme-switch svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}


.panel-kicker { display: inline-flex; align-items: center; gap: 11px; color: var(--hero-soft); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.terminal-command { margin-top: 34px; color: var(--hero-faint); font: 500 .72rem/1.5 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-content { background: var(--surface-hero); }

.hero-title { width: 100%; margin: 18px 0 0; max-width: 100%; font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 4.8rem); font-weight: 600; line-height: 1.03; letter-spacing: -.055em; }
.type-line { display: block; min-height: 1.03em; white-space: nowrap; }
.type-line:nth-child(1) { color: var(--hero-line-1); }
.type-line:nth-child(2) { color: var(--hero-line-2); }
.type-line:nth-child(3) { color: var(--hero-line-3); }
.hero-lead { max-width: 760px; margin: 28px 0 0; color: var(--hero-soft); font-size: 1rem; }
.panel--hero .button--ghost { border-color: var(--hero-tag-border); background: var(--hero-tag-bg); color: var(--hero-text); }
.panel--hero .button--ghost:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--hero-tag-border)); background: color-mix(in srgb, var(--accent-soft) 42%, transparent); }
.hero-console {
  min-height: 72px;
  padding: 14px clamp(24px, 4vw, 54px);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--hero-border);
  background: var(--surface-hero-console);
  color: var(--hero-faint);
  font-size: .62rem;
  letter-spacing: .08em;
}
.hero-console > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.hero-console > div span { padding: .38rem .55rem; border: 1px solid var(--hero-tag-border); border-radius: 8px; background: var(--hero-tag-bg); color: var(--hero-soft); letter-spacing: .02em; }

.panel-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading-row h2,
.panel-heading-row h3 { margin: 8px 0 0; letter-spacing: -.04em; }
.panel-heading-row h2 { font-size: 1.65rem; }
.status-lamp { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 14%, transparent), 0 0 14px color-mix(in srgb, var(--signal) 55%, transparent); }
.control-description { margin: 16px 0 0; color: var(--text-soft); font-size: .88rem; }

.metric-grid { margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--line); }
.metric-item { padding: 14px; background: var(--surface); }
.metric-item dt { color: var(--text-faint); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.metric-item dd { margin: 4px 0 0; font-size: .78rem; font-weight: 760; }

 .panel--ticker { overflow: hidden; display: flex; align-items: center; }
.ticker-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-marquee var(--ticker-duration, 24s) linear infinite;
}
.ticker-group { display: flex; flex: 0 0 auto; align-items: center; white-space: nowrap; }
.ticker-item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 24px; padding-right: 24px; color: var(--text-soft); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ticker-item i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); }

.panel--story h3 { max-width: 780px; margin: 28px 0 18px; font-size: clamp(1.75rem, 2.7vw, 3.15rem); line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; }
.panel--story > p { max-width: 800px; color: var(--text-soft); }
.check-list { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-list li { min-height: 58px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); color: var(--text-soft); font-size: .82rem; font-weight: 700; }
.check-list li span { color: var(--accent); font-weight: 900; }


.principle-list { display: grid; grid-template-columns: 1fr; }
.principle-item { min-height: 0; padding: 25px 24px; display: grid; grid-template-columns: auto 1fr; gap: 16px; border-bottom: 1px solid var(--line); }
.principle-item:last-child { border-bottom: 0; }
.principle-item > span { color: var(--accent); font-family: var(--font-mono); font-size: .7rem; font-weight: 800; }
.principle-item h3 { margin: 0 0 10px; font-size: 1.16rem; letter-spacing: -.035em; }
.principle-item p { margin: 0; color: var(--text-soft); font-size: .86rem; }

.service-card { min-height: 430px; padding: 24px; display: flex; flex-direction: column; }
.service-card:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); transform: translateY(-4px); box-shadow: 0 28px 74px color-mix(in srgb, var(--accent) 10%, transparent); }
.service-topline { display: flex; align-items: center; justify-content: space-between; }
.service-code { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 13px; background: var(--surface-muted); color: var(--accent); font-family: var(--font-mono); font-size: .72rem; font-weight: 850; }
.service-number { color: var(--text-faint); font-family: var(--font-mono); font-size: .66rem; }
.service-card h3 { margin: 30px 0 13px; font-size: 1.24rem; letter-spacing: -.04em; }
.service-card > p { color: var(--text-soft); font-size: .86rem; }
.service-card ul { margin-top: 18px; display: grid; gap: 8px; }
.service-card li { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: .78rem; }
.service-card li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.service-card-footer {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
}
.service-card-footer span { color: var(--accent); font: 820 .82rem/1 var(--font-mono); }
.service-card-footer small { font: 700 .59rem/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }


.service-explorer-head { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 32px; }
.service-explorer-head h3 { margin: 12px 0 0; font-size: clamp(1.6rem, 2.7vw, 2.8rem); line-height: 1; letter-spacing: -.055em; }
.service-explorer-head > p { margin: 0; color: var(--text-soft); font-size: .88rem; }
.service-tabs { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.service-tabs button { padding: .72rem .9rem; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: .79rem; font-weight: 750; transition: all .2s var(--ease); }
.service-tabs button span { color: var(--text-faint); font-family: var(--font-mono); font-size: .62rem; }
.service-tabs button:hover,
.service-tabs button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.service-detail-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.service-detail-card { min-height: 310px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-muted); animation: detail-in .45s var(--ease) var(--detail-delay, 0ms) both; }
.service-detail-index { color: var(--accent); font-family: var(--font-mono); font-size: .67rem; font-weight: 800; }
.service-detail-card h4 { margin: 24px 0 12px; font-size: 1.08rem; letter-spacing: -.03em; }
.service-detail-card p { color: var(--text-soft); font-size: .82rem; }
.service-outcome { margin-top: 22px; padding-top: 16px; display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 8px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: .7rem; }
.service-outcome strong { color: var(--accent); text-transform: uppercase; }

.panel--stack-matrix { overflow: hidden; }
.stack-matrix-copy {
  padding: clamp(24px, 4vw, 42px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  gap: 14px;
  border-bottom: 1px solid var(--line);
}
.stack-matrix-copy > * { justify-self: start; text-align: left; }
.stack-matrix-copy > div { min-width: 0; }
.stack-matrix-copy h3 { margin: 0; max-width: 24ch; font-size: clamp(1.6rem, 2.7vw, 2.8rem); line-height: 1; letter-spacing: -.055em; text-align: left; }
.stack-matrix-copy p { margin: 2px 0 0; max-width: 74ch; color: var(--text-soft); font-size: .87rem; text-align: left; }
.technology-matrix { display: grid; }
.tech-layer {
  min-height: 118px;
  padding: 22px clamp(20px, 3vw, 34px);
  display: grid;
  grid-template-columns: 54px minmax(220px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-muted) 58%, transparent), transparent 44%);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.tech-layer:last-child { border-bottom: 0; }
.tech-layer:hover { background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.tech-layer-code { color: var(--accent); font: 820 .68rem/1 var(--font-mono); }
.tech-layer-copy h4 { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
.tech-layer-copy p { margin: 6px 0 0; color: var(--text-soft); font-size: .77rem; }
.tech-layer-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tech-layer-tools span {
  padding: .6rem .72rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elevated);
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 740;
  box-shadow: var(--shadow-sm);
}

.stack-group { min-height: 300px; padding: 26px; }
.stack-group-heading { display: flex; align-items: center; gap: 13px; }
.stack-group-heading span { color: var(--accent); font-family: var(--font-mono); font-size: .68rem; font-weight: 800; }
.stack-group-heading h3 { margin: 0; font-size: 1.08rem; }
.stack-group > p { margin: 20px 0 0; color: var(--text-soft); font-size: .82rem; }
.tool-list { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 8px; }
.tool-list span { padding: .62rem .76rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-muted); color: var(--text-soft); font-size: .75rem; font-weight: 740; }
.stack-map-copy h3 { margin: 14px 0 11px; font-size: 1.55rem; line-height: 1.04; letter-spacing: -.05em; }
.stack-map-copy p { margin: 0; color: var(--text-soft); font-size: .85rem; }
.stack-rider-copy { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 30px; }
.stack-rider-copy h3 { margin: 12px 0 0; font-size: clamp(1.6rem, 2.7vw, 2.75rem); line-height: 1; letter-spacing: -.055em; }
.stack-rider-copy p { margin: 0; color: var(--text-soft); font-size: .86rem; }

.partners-marquee { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.partners-marquee-track { width: max-content; min-width: 100%; display: flex; flex-wrap: nowrap; align-items: stretch; will-change: transform; transform: translate3d(0, 0, 0); }
.partners-group { display: flex; flex: 0 0 auto; align-items: stretch; gap: 1px; padding-right: 1px; background: var(--line); }
.partner-logo { width: clamp(164px, 15.5vw, 210px); min-height: 112px; flex: 0 0 clamp(164px, 15.5vw, 210px); display: grid; place-items: center; padding: 20px; background: var(--surface); }
.partner-logo__image { max-width: 145px; max-height: 46px; opacity: .7; filter: grayscale(.9); transition: opacity .25s var(--ease), filter .25s var(--ease), transform .25s var(--ease); }
.partner-logo:hover .partner-logo__image { opacity: 1; filter: grayscale(0); transform: scale(1.045); }
.partner-logo__dark { display: none; }
html[data-theme="dark"] .partner-logo__light { display: none; }
html[data-theme="dark"] .partner-logo__dark { display: block; }
html[data-theme="dark"] .partner-logo[data-filter-mode="invert-dark"] .partner-logo__single { filter: grayscale(1) brightness(0) invert(1); }
.partner-logo__fallback { color: var(--text-faint); font-family: var(--font-mono); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-align: center; }
.partners-note { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 10px 4px; color: var(--text-soft); font-size: .82rem; }

/* Kafelek kontaktowy zachowuje odpowiedni ton w obu motywach. */
.panel--contact {
  background:
    radial-gradient(circle at 85% 16%, color-mix(in srgb, var(--accent-blue-soft) 72%, transparent), transparent 27rem),
    linear-gradient(145deg, var(--surface-contact-strong), var(--surface-contact));
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.panel--contact .eyebrow { color: var(--accent-strong); }
.panel--contact h2 { max-width: 930px; margin: 17px 0 18px; font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.panel--contact > p { max-width: 760px; margin: 0; color: var(--text-soft); }
.contact-form-button { width: fit-content; margin-top: 34px; }
.contact-data-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 10px; }
.contact-data { margin: 0; }
.contact-data > div { padding: 20px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; border-bottom: 1px solid var(--line); }
.contact-data dt { color: var(--text-faint); font-size: .68rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.contact-data dd { margin: 0; text-align: right; font-size: .83rem; font-weight: 760; }
.social-links--registry {
  margin: 14px 0 18px;
  padding-top: 12px;
  justify-content: center;
  border-top: 1px solid var(--line);
}
.social-links--registry a {
  width: 34px;
  height: 34px;
  border-color: var(--line);
  background: var(--surface-muted);
}
.social-links--registry a:hover {
  border-color: var(--accent);
  background: var(--surface-raised);
}
.availability { margin-top: auto; padding: 18px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-muted);
display: none; }
.availability > div { display: grid; }
.availability strong { font-size: .82rem; }
.availability span:not(.availability-pulse) { color: var(--text-faint); font-size: .72rem; }