/* ==========================================================================
   STTELLA - design tokens
   ========================================================================== */
:root {
  /* STTELLA 2.0: grafit jako baza (wczesniej prawie czern #08080a) */
  --bg: #121418;
  --bg-raised: #181b20;
  --bg-terminal: #0e1013;
  --border: #2a2e36;
  --border-soft: #20242b;

  --text: #eceef0;
  --text-dim: #aeb2ba;
  --text-faint: #7a7e88;
  --text-ghost: #2b2f37;

  --accent: #4dfad1;      /* delikatna zielen/cyan - akcent, uzywany oszczednie */
  --accent-dim: #2f8f7a;
  --accent-glow: rgba(77, 250, 209, 0.18);
  --accent-glow-strong: rgba(77, 250, 209, 0.35);

  --danger: #ff6b6b;

  --font-display: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --wrap-max: 1200px;
  --radius: 10px;
  --transition-fast: 150ms ease;
  --transition-medium: 400ms cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,.8,.3,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.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;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--accent);
  color: #04120e;
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  transition: top var(--transition-fast);
  z-index: 3000;
}
.skip-link:focus { top: 1rem; }

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

.wrap {
  position: relative;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.muted { color: var(--text-dim); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--accent-dim);
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.eyebrow--prompt { display: flex; align-items: center; gap: .5rem; color: var(--text-faint); }

/* blinking terminal caret, reused in a few places */
.caret {
  display: inline-block;
  width: 8px; height: 1.1em;
  background: var(--accent);
  vertical-align: text-bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .caret { animation: caret-blink 1s steps(1) infinite; }
}

@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* status dot - reused wherever something reads as "live"/monitored
   (agent panel, cybersecurity panel) instead of a terminal cursor */
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: .55em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow-strong);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .status-dot { animation: status-pulse 2.4s ease-in-out infinite; }
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.75); }
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  transition: opacity 650ms var(--ease-out), filter 650ms var(--ease-out), visibility 650ms;
}
.intro.is-exiting {
  opacity: 0;
  filter: blur(10px);
}
.intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro__noise {
  position: absolute;
  inset: -20%;
  opacity: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.3) 0, transparent 60%);
  background-size: 3px 3px;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .intro__noise { animation: intro-noise 1400ms ease-out forwards; }
}
@keyframes intro-noise {
  0%   { opacity: 0; }
  12%  { opacity: .5; }
  30%  { opacity: .15; }
  45%  { opacity: .35; }
  100% { opacity: 0; }
}

.intro__scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

.intro__stack {
  text-align: center;
  transition: transform 650ms var(--ease-out), opacity 650ms var(--ease-out);
}
.intro.is-exiting .intro__stack {
  transform: scale(.72) translateY(-18px);
  opacity: 0;
}

.intro__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.5rem, 10vw, 5.5rem);
  letter-spacing: .12em;
  color: var(--text);
  min-height: 1.2em;
}
.intro__title-visual {
  display: inline-block;
  min-width: 7.2ch; /* reserve space so scramble chars don't shift layout */
  text-shadow: 0 0 24px var(--accent-glow-strong);
  opacity: 1;
}
/* wersja "spokojna" (prefers-reduced-motion): bez scramble, prosty fade */
.intro--calm .intro__title-visual {
  opacity: 0;
  transition: opacity 500ms ease;
}
.intro--calm.intro--calm-in .intro__title-visual {
  opacity: 1;
}

.intro__subtitle {
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: clamp(.85rem, 2vw, 1rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
}
.intro__subtitle.is-visible {
  opacity: 1;
  transition: opacity 500ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .intro__subtitle { opacity: 1; transition: none; }
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,8,10,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 1.1rem;
}
.logo .status-dot { margin-right: .6em; }

.site-header__right {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.25rem);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.sound-toggle:hover,
.sound-toggle:focus-visible { color: var(--text); border-color: var(--accent-dim); }
.sound-toggle__icon { width: 17px; height: 17px; }
.sound-toggle__mute { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__wave { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__mute { display: block; }
.sound-toggle[aria-pressed="false"] { color: var(--text-faint); }

.site-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .5rem;
}
.site-nav__toggle span {
  width: 22px; height: 2px;
  background: var(--text);
  display: block;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  font-size: .92rem;
}
.site-nav__list a {
  position: relative;
  color: var(--text-dim);
  padding-block: .3rem;
  transition: color var(--transition-fast);
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right var(--transition-medium);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible { color: var(--text); }
.site-nav__list a.is-active { color: var(--accent); }
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after,
.site-nav__list a.is-active::after { right: 0; }

/* mikroetykieta STTELLA: numer sekcji "odsloniety" przy hover/aktywnym linku,
   ten sam jezyk co duze cyfry w tle sekcji */
.site-nav__list a[data-index]::before {
  content: attr(data-index);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--accent-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), margin-right var(--transition-fast);
}
.site-nav__list a[data-index]:hover::before,
.site-nav__list a[data-index]:focus-visible::before,
.site-nav__list a[data-index].is-active::before {
  opacity: 1;
  transform: translateX(0);
  margin-right: .4em;
}

.site-nav__cta {
  border: 1px solid var(--border);
  padding: .45rem .9rem;
  border-radius: 6px;
  color: var(--text) !important;
}
.site-nav__cta::after { display: none; }
.site-nav__cta:hover { border-color: var(--accent-dim); }

@media (max-width: 1000px) {
  .site-nav__toggle { display: flex; }
  .site-nav__list {
    position: absolute;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-soft);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium);
  }
  .site-nav__list.is-open { max-height: 480px; }
  .site-nav__list li { width: 100%; }
  .site-nav__list a {
    display: block;
    padding: .9rem clamp(1.25rem, 4vw, 3rem);
    width: 100%;
    border-bottom: 1px solid var(--border-soft);
  }
  .site-nav__list a::after { display: none; }
  .site-nav__cta { border: 0; border-radius: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(5rem, 16vw, 10rem) clamp(4rem, 10vw, 6rem);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  --mx: 50%;
  --my: 30%;
}

.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(600px circle at var(--mx) var(--my), var(--accent-glow), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero__inner {
  position: relative;
  max-width: 50rem;
}
.hero__title {
  font-size: clamp(2.6rem, 7.5vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.06;
  text-transform: uppercase;
  max-width: 18ch;
  opacity: 0;
  transform: translateY(14px);
}
.hero__lede {
  margin-top: 1.5rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text-dim);
  max-width: 34rem;
  opacity: 0;
  transform: translateY(14px);
}
[data-reveal-hero].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.hero__lede[data-reveal-hero].is-visible { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal-hero] { opacity: 1; transform: none; }
}

.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(-50%);
  width: 22px; height: 34px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.hero__scroll-cue span {
  display: block;
  width: 3px; height: 6px;
  margin: 6px auto 0;
  background: var(--accent-dim);
  border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll-cue span { animation: scroll-cue 1800ms ease-in-out infinite; }
}
@keyframes scroll-cue {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(10px); opacity: .2; }
  61%  { transform: translateY(0); opacity: 0; }
  80%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (max-width: 760px) {
  .hero__scroll-cue { display: none; }
}

/* ==========================================================================
   Sections (generic)
   ========================================================================== */
.section {
  position: relative;
  padding-block: clamp(4rem, 10vw, 7.5rem);
  border-bottom: 1px solid var(--border-soft);
}
.section--featured { background: var(--bg-raised); }

.section__index {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1rem, 4vw, 3.5rem);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-ghost);
  user-select: none;
  z-index: 0;
}

/* cienka "linia systemowa" - jeden z powtarzajacych sie motywow STTELLA,
   rosnie od gory kiedy sekcja zostaje "aktywowana" wejsciem w viewport */
.section__spine {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border);
  transform: scaleY(0);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .section__spine { transition: transform 1000ms var(--ease-out); }
}
.section__spine.is-visible {
  transform: scaleY(1);
  background: linear-gradient(to bottom, var(--accent-dim), var(--border) 55%);
}
@media (max-width: 860px) {
  .section__spine { display: none; }
}

.section__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.section__grid--reverse { grid-template-columns: .9fr 1.1fr; }
.section__grid--reverse .section__content { order: 2; }
.section__grid--reverse .section__visual { order: 1; }

.section h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.section__lede {
  margin-top: 1rem;
  color: var(--text-dim);
  max-width: 34rem;
}

.feature-list {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem 1.5rem;
  max-width: 30rem;
}
.feature-list--compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
.feature-list li {
  font-size: .92rem;
  color: var(--text-dim);
  padding-left: 1.1rem;
  position: relative;
}
.feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.section__grid--reverse [data-reveal].section__content { transition-delay: 80ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .section__grid,
  .section__grid--reverse {
    grid-template-columns: 1fr;
  }
  .section__grid--reverse .section__content,
  .section__grid--reverse .section__visual { order: initial; }
  .feature-list { grid-template-columns: 1fr; }
  .section__index { font-size: clamp(3.5rem, 22vw, 6rem); top: 1rem; right: 1rem; }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2rem;
  padding: .8rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: .95rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  will-change: transform;
}
.btn--primary {
  background: var(--accent);
  color: #04120e;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 24px var(--accent-glow);
}
.btn--ghost {
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.btn--disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
button.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: border-color var(--transition-fast), background var(--transition-fast); }
}

/* generic bordered-panel shell (browser-frame + agent-panel) */
.browser-frame, .agent-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border-soft);
}
.browser-frame__bar span:not(.browser-frame__url) {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.browser-frame__body { padding: 1.4rem; display: grid; gap: .7rem; }

/* ==========================================================================
   Agent panel (STTELLA PRACA) - status header + pipeline + wynik dopasowania
   ========================================================================== */
.agent-panel__header {
  display: flex;
  align-items: center;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
}
.agent-panel__label {
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.agent-panel__demo-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .15rem .45rem;
}
.agent-panel__body { padding: 1.3rem; display: grid; gap: 1.3rem; }

.agent-panel__results { display: grid; gap: .6rem; }
.agent-panel__results li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--bg-raised);
}
.agent-panel__result-title {
  font-size: .84rem;
  color: var(--text-dim);
}
.agent-panel__match {
  font-family: var(--font-mono);
  font-size: .84rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.agent-panel__match em {
  font-style: normal;
  font-weight: 400;
  font-size: .72rem;
  color: var(--text-faint);
  margin-left: .3em;
}
.agent-panel__result--pending { opacity: .6; }
.agent-panel__match--pending { color: var(--text-faint); font-weight: 400; }

/* ==========================================================================
   Pipeline (STTELLA PRACA): SCAN -> ANALYZE -> MATCH -> APPLY
   ========================================================================== */
.pipeline { padding: 0; }
.pipeline__steps {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  margin-bottom: .9rem;
}
.pipeline__label { color: var(--text-faint); transition: color 300ms ease; }
.pipeline__track {
  position: relative;
  height: 2px;
  background: var(--border-soft);
  border-radius: 2px;
}
.pipeline__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent-dim);
  border-radius: 2px;
}
.pipeline__dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--accent-glow-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .pipeline.is-visible .pipeline__fill { animation: pipeline-fill 6s var(--ease-out) infinite; }
  .pipeline.is-visible .pipeline__dot { animation: pipeline-dot 6s var(--ease-out) infinite; }
  .pipeline.is-visible .pipeline__label:nth-child(1) { animation: pipeline-label 6s ease infinite; }
  .pipeline.is-visible .pipeline__label:nth-child(2) { animation: pipeline-label 6s ease infinite; animation-delay: -4.5s; }
  .pipeline.is-visible .pipeline__label:nth-child(3) { animation: pipeline-label 6s ease infinite; animation-delay: -3s; }
  .pipeline.is-visible .pipeline__label:nth-child(4) { animation: pipeline-label 6s ease infinite; animation-delay: -1.5s; }
}
@media (prefers-reduced-motion: reduce) {
  .pipeline__fill { width: 100%; }
  .pipeline__dot { left: 100%; }
  .pipeline__label { color: var(--accent); }
}
@keyframes pipeline-fill {
  0%   { width: 0%; }
  20%  { width: 0%; }
  90%  { width: 100%; }
  100% { width: 100%; }
}
@keyframes pipeline-dot {
  0%   { left: 0%; }
  20%  { left: 0%; }
  40%  { left: 33%; }
  60%  { left: 66%; }
  90%  { left: 100%; }
  100% { left: 100%; }
}
@keyframes pipeline-label {
  0%, 100% { color: var(--text-faint); }
  8%, 22%  { color: var(--accent); }
}

/* ==========================================================================
   Flow diagram (Rekrutacja)
   ========================================================================== */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: clamp(2rem, 6vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.flow__node {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  padding: .6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
}
.flow__node--brand {
  color: #04120e;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.flow__arrow { color: var(--text-faint); font-size: 1.1rem; }
@media (max-width: 480px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); }
}

/* ==========================================================================
   Signal / radar (Reklama)
   ========================================================================== */
.signal {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 20rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signal__core {
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--accent-glow-strong);
  z-index: 2;
}
.signal__ring {
  position: absolute;
  border: 1px solid var(--accent-dim);
  border-radius: 50%;
  opacity: 0;
}
.signal__ring--1 { width: 35%; height: 35%; }
.signal__ring--2 { width: 65%; height: 65%; }
.signal__ring--3 { width: 95%; height: 95%; }
@media (prefers-reduced-motion: no-preference) {
  .signal.is-visible .signal__ring--1 { animation: signal-ping 4.5s ease-out infinite; }
  .signal.is-visible .signal__ring--2 { animation: signal-ping 4.5s ease-out infinite; animation-delay: 1.1s; }
  .signal.is-visible .signal__ring--3 { animation: signal-ping 4.5s ease-out infinite; animation-delay: 2.2s; }
}
@media (prefers-reduced-motion: reduce) {
  .signal__ring { opacity: .35; }
}
@keyframes signal-ping {
  0%   { transform: scale(.6); opacity: 0; }
  15%  { opacity: .45; }
  100% { transform: scale(1); opacity: 0; }
}
.signal__node {
  position: absolute;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-faint);
  white-space: nowrap;
}
.signal__node--1 { top: 6%; left: 50%; transform: translateX(-50%); }
.signal__node--2 { bottom: 14%; left: 6%; }
.signal__node--3 { bottom: 14%; right: 6%; }

/* ==========================================================================
   Browser frame + chart (Software)
   ========================================================================== */
.browser-frame__url {
  margin-left: .6rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-faint);
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: .15rem .6rem;
}
.chart { width: 100%; height: auto; margin-bottom: .6rem; }

/* neutralne, czysto dekoracyjne "chrome" nawigacji strony - celowo bez
   liczb/etykiet, zeby niczego nie sugerowac jako realny wynik/statystyke */
.mock-nav {
  display: flex;
  gap: .5rem;
  padding-top: .3rem;
  border-top: 1px solid var(--border-soft);
}
.mock-nav__pill {
  height: 8px;
  width: 15%;
  border-radius: 4px;
  background: var(--border-soft);
}
.mock-nav__pill--active { background: var(--accent-dim); width: 20%; }
.chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
}
.section__visual.is-visible .chart__line {
  transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .chart__line { stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   Apps devices - trzy minimalistyczne ramki urzadzen + pasek "budowania"
   ========================================================================== */
.apps-devices {
  display: flex;
  gap: clamp(1.2rem, 3vw, 1.8rem);
  flex-wrap: wrap;
}
.apps-device {
  display: grid;
  justify-items: center;
  gap: .7rem;
}
.apps-device__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 4.4rem;
  height: 7.4rem;
  padding: .55rem;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.apps-device__notch {
  position: absolute;
  top: .6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
}
.apps-device__progress {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--border-soft);
  overflow: hidden;
}
.apps-device__progress-fill {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--accent-dim);
}
.section__visual.is-visible .apps-device__progress-fill {
  animation: apps-build 3.4s ease-in-out infinite;
}
.apps-device:nth-child(2) .apps-device__progress-fill { animation-delay: -1.1s; }
.apps-device:nth-child(3) .apps-device__progress-fill { animation-delay: -2.2s; }
@keyframes apps-build {
  0%, 100% { width: 15%; }
  50%      { width: 68%; }
}
@media (prefers-reduced-motion: reduce) {
  .apps-device__progress-fill { animation: none; width: 35%; }
}
.apps-device__label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--text-dim);
}
.apps-status {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   Terminal section (cyber)
   ========================================================================== */
.section--terminal { background: var(--bg-terminal); }
.terminal {
  position: relative;
  margin-top: 1rem;
  max-width: 42rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #050605;
  box-shadow: 0 0 22px rgba(77, 250, 209, 0.08);
  overflow: hidden;
}
.terminal__sweep {
  position: absolute;
  left: 0; right: 0; top: -20%;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--accent-glow), transparent);
  opacity: 0;
  pointer-events: none;
}
.terminal.is-visible .terminal__sweep {
  animation: terminal-sweep 1300ms ease-out 150ms 1;
}
@media (prefers-reduced-motion: reduce) {
  .terminal.is-visible .terminal__sweep { animation: none; opacity: 0; }
}
@keyframes terminal-sweep {
  0%   { top: -20%; opacity: 0; }
  15%  { opacity: .8; }
  100% { top: 100%; opacity: 0; }
}
.terminal__bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border-soft);
}
.terminal__bar span:not(.terminal__title) {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border);
}
.terminal__title {
  margin-left: .6rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--text-faint);
}
.terminal__body {
  position: relative;
  z-index: 1;
  padding: 1.6rem;
  font-family: var(--font-mono);
}
.terminal__prompt {
  color: var(--accent);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.terminal__list { display: grid; gap: .5rem; }
.terminal__list li {
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--text);
  opacity: 0;
  transform: translateX(-8px);
}
.terminal__list li::before { content: "✓ "; color: var(--accent-dim); }
.terminal.is-visible .terminal__list li {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 420ms ease, transform 420ms ease;
}
.terminal__list li:nth-child(1) { transition-delay: 250ms; }
.terminal__list li:nth-child(2) { transition-delay: 340ms; }
.terminal__list li:nth-child(3) { transition-delay: 430ms; }
.terminal__list li:nth-child(4) { transition-delay: 520ms; }
.terminal__list li:nth-child(5) { transition-delay: 610ms; }
.terminal__list li:nth-child(6) { transition-delay: 700ms; }
@media (prefers-reduced-motion: reduce) {
  .terminal__list li { opacity: 1; transform: none; }
}
.terminal__footer {
  margin-top: 1.2rem;
  color: var(--text-faint);
  font-size: .82rem;
}

/* ==========================================================================
   Topology (Cybersecurity) - demonstracyjna wizualizacja warstw
   infrastruktury objetych ochrona, wypelnia prawa kolumne sekcji zamiast
   pustej przestrzeni. Celowo BEZ ramki/tla - odrozniona od pozostalych
   "boksowanych" wizualizacji (agent-panel, browser-frame, terminal).
   ========================================================================== */
.topology {
  max-width: 22rem;
}
.topology__diagram { position: relative; }
.topology__layers {
  position: relative;
  display: grid;
  gap: 1.6rem;
  padding-left: 2rem;
  margin: 0;
}
.topology__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--border-soft);
}
.topology__scan {
  position: absolute;
  left: -3px;
  top: -10%;
  width: 7px;
  height: 20%;
  border-radius: 4px;
  background: linear-gradient(to bottom, transparent, var(--accent-glow-strong), transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .topology.is-visible .topology__scan { animation: topology-scan 5s ease-in-out infinite; }
}
@keyframes topology-scan {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.topology__layers li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.topology__layers li::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border);
  transform: translate(-50%, -50%);
}
.topology__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .07em;
  color: var(--text-dim);
}
.topology__status {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  color: #888a93; /* czytelniejsze niz --text-faint, wciaz wyraznie drugoplanowe wobec --text-dim nazw warstw */
}
@media (prefers-reduced-motion: no-preference) {
  .topology.is-visible .topology__status { animation: topology-status 5s ease infinite; }
  .topology.is-visible li:nth-child(1) .topology__status { animation-delay: -5s; }
  .topology.is-visible li:nth-child(2) .topology__status { animation-delay: -4s; }
  .topology.is-visible li:nth-child(3) .topology__status { animation-delay: -3s; }
  .topology.is-visible li:nth-child(4) .topology__status { animation-delay: -2s; }
  .topology.is-visible li:nth-child(5) .topology__status { animation-delay: -1s; }
}
@keyframes topology-status {
  0%, 80%, 100% { color: #888a93; }
  12%, 25%      { color: var(--accent); }
}

.topology__caption {
  margin-top: 1.5rem;
  padding-left: 2rem;
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--text-ghost);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .topology { max-width: none; }
  .topology__scan { display: none; }
  .topology__layers { gap: 1rem; padding-left: 1.6rem; }
  .topology__layers li::before { left: -1.6rem; }
  .topology__caption { padding-left: 1.6rem; }
}

/* ==========================================================================
   Resilience tree (Lacznosc awaryjna) - warstwy odpornosci komunikacji:
   PRIMARY LINK -> LOCAL INFRASTRUCTURE -> RADIO/MESH -> BACKUP COMMUNICATION.
   Ten sam jezyk co topology (cienkie linie, mono etykiety, subtelne statusy),
   ale WLASNY uklad (drzewo, nie liniowa lista) - wlasna tozsamosc wizualna.
   ========================================================================== */
.resilience-tree {
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}
.resilience-tree__link {
  stroke: var(--border-soft);
  stroke-width: .5;
}
.resilience-tree__node circle {
  fill: var(--bg);
  stroke: var(--text-faint);
  stroke-width: .6;
}
.resilience-tree__node--primary circle {
  fill: var(--accent);
  stroke: none;
}
.resilience-tree__label {
  font-family: var(--font-mono);
  font-size: 3.6px;
  fill: var(--text-dim);
  text-transform: uppercase;
}
.resilience-tree__node--primary .resilience-tree__label,
.resilience-tree__node--backup .resilience-tree__label {
  fill: var(--text);
  font-weight: 700;
}
.resilience-tree__status {
  font-family: var(--font-mono);
  font-size: 3px;
  letter-spacing: .04px;
  fill: var(--accent);
  text-transform: uppercase;
}
.resilience-tree__status--muted { fill: var(--text-faint); }

@media (prefers-reduced-motion: no-preference) {
  .section__visual.is-visible .resilience-tree__node circle {
    animation: resilience-pulse 3.6s ease-in-out infinite;
  }
  .section__visual.is-visible .resilience-tree__node--primary circle { animation-delay: 0s; }
  .section__visual.is-visible .resilience-tree__node--local circle { animation-delay: .3s; }
  .section__visual.is-visible .resilience-tree__node--radio circle,
  .section__visual.is-visible .resilience-tree__node--mesh circle { animation-delay: .6s; }
  .section__visual.is-visible .resilience-tree__node--backup circle { animation-delay: .9s; }
}
@keyframes resilience-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

.resilience-tree__caption {
  margin-top: 1rem;
  text-align: center;
  font-size: .66rem;
  letter-spacing: .06em;
  color: var(--text-ghost);
  text-transform: uppercase;
}

/* Portfolio - miejsca zarezerwowane pod PRAWDZIWE zdjecia z realizacji
   (nigdy stocki) - uczciwy placeholder, ten sam jezyk co DEMO tag / status
   "wkrotce" uzywany juz gdzie indziej na stronie */
.lacznosc-portfolio {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.portfolio-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem;
}
.portfolio-slot {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: .5rem;
  text-align: center;
}
.portfolio-slot span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ==========================================================================
   Marki / projekty - celowo NIE uzywa wzorca "tekst + wizualizacja" jak
   pozostale sekcje (bez duzego numeru w tle, bez boksowanego panelu) -
   prosty, edytorski "rejestr marek": pozioma linia nad kazda pozycja
   zamiast ramki, zeby nie wygladac jak kolejna standardowa karta uslug.
   ========================================================================== */
.section--brands { background: var(--bg-raised); }
.brands-row {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4rem);
}
.brand-tile {
  flex: 1 1 16rem;
  min-width: 16rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.brand-tile__eyebrow {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: .7rem;
}
.brand-tile__name {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.brand-tile__desc {
  margin-top: .8rem;
  color: var(--text-dim);
  max-width: 26rem;
}
.brand-tile__link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: .2rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.brand-tile__link:hover,
.brand-tile__link:focus-visible {
  color: var(--text);
  border-color: var(--text);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.section--contact { padding-bottom: clamp(4rem, 10vw, 7rem); }
.contact-form {
  margin-top: 2rem;
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
}
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .85rem;
  color: var(--text-dim);
}
.field input,
.field select,
.field textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .75rem .9rem;
  color: var(--text);
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-dim);
}
.field__note {
  font-size: .82rem;
  color: var(--text-faint);
  min-height: 1.2em;
}
.field__note--error { color: var(--danger); }
.field__note--ok { color: var(--accent); }

/* honeypot antyspamowy - poza ekranem, nie display:none (czesc botow
   sprawdza tylko to), zero wplywu na uzytkownikow z czytnikiem ekranu
   (cale pole aria-hidden) ani na uklad formularza */
.field--hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.contact-info {
  align-self: start;
  max-width: 22rem;
  padding-top: 2rem;
}
.contact-info__lead {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.contact-info__mail {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.contact-info__mail-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact-info__mail-link {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  align-self: start;
  transition: border-color .2s ease;
  word-break: break-word;
}
.contact-info__mail-link:hover,
.contact-info__mail-link:focus-visible {
  border-bottom-color: var(--accent);
}

.contact-info__tags {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.contact-info__tags li {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .35rem .7rem;
}
@media (max-width: 860px) {
  .contact-info { padding-top: 0; margin-top: 2.5rem; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--border-soft);
  padding-block: 2.5rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}
.logo--footer { font-size: 1rem; margin: 0; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  font-size: .85rem;
}
.site-footer__links a { color: var(--text-dim); }
.site-footer__links a:hover { color: var(--text); }
.site-footer__copy { font-size: .8rem; }

/* ==========================================================================
   Large desktop: lean into asymmetry / negative space
   ========================================================================== */
@media (min-width: 1440px) {
  .section__grid { gap: clamp(4rem, 8vw, 7rem); }
  .hero__inner { max-width: 56rem; }
}

/* ==========================================================================
   Proces (Software / Reklama) - mono "kroki" w stylu flow__node, lzejsze
   ========================================================================== */
.process {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.5rem;
  list-style: none;
  padding: 0;
}
.process li {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.process li { position: relative; }
.process li + li::before {
  content: "→";
  position: absolute;
  left: -1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-dim);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }

/* ==========================================================================
   Realizacje - karty wdrozen (zastepuja dawny rejestr marek)
   ========================================================================== */
.work-head { position: relative; z-index: 1; max-width: 40rem; }
.work-grid {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
}
.work-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--border-soft);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.work-card:hover,
.work-card:focus-within {
  border-color: var(--accent-dim);
  box-shadow: inset 0 1px 0 var(--accent-dim);
}
.work-card__status {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.work-card__name {
  margin-top: .9rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.work-card__desc {
  margin-top: .6rem;
  color: var(--text-dim);
  font-size: .93rem;
}
.work-card__tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  padding: 0;
}
.work-card__tags li {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .25rem .5rem;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg-raised);
}
.work-card__links {
  margin-top: auto;
  padding-top: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}
.work-card__link {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
}
.work-card__link::after { content: " ↗"; }
.work-card__link[href^="#"]::after { content: " →"; }
.work-card--cta {
  border-style: dashed;
  background: transparent;
  justify-content: center;
}
.work-card--cta .work-card__status { color: var(--text-faint); }
.work-card--cta .btn { align-self: flex-start; margin-top: 1.4rem; }

.contact-info__sub {
  margin-top: .8rem;
  color: var(--text-dim);
}

/* 9 pozycji menu (doszly Realizacje): hamburger do 1000px (wczesniej 760px),
   a na waskim desktopie ciasniej, zeby naglowek nie zawijal linkow */
@media (min-width: 1001px) and (max-width: 1180px) {
  .site-nav__list { gap: .9rem; font-size: .86rem; }
}
.site-nav__list a { white-space: nowrap; }

/* ==========================================================================
   ETAP 2 - jasna czesc biznesowa (Praca, Rekrutacja, Reklama, Software,
   Aplikacje, Realizacje). Intro/hero/Cyber/Lacznosc/Kontakt zostaja ciemne.
   Mechanizm: sekcja nadpisuje TE SAME tokeny co :root, wiec istniejace
   komponenty dziedzicza jasny wariant bez przepisywania. Kontrast (WCAG):
   --text 17:1, --text-dim 9.4:1, --text-faint 5.3:1, --accent 5.1:1,
   bialy tekst na --accent 5.6:1.
   ========================================================================== */
.section--light {
  --bg-page: #f5f4f0;          /* zlamana biel, nie #fff */
  --bg: #fbfaf7;
  --bg-raised: #fdfcf9;
  --surface: #fdfcf9;
  --border: #d9d7cf;
  --border-soft: #e6e4dd;
  --text: #111216;
  --text-dim: #3d4048;
  --text-faint: #62656d;
  --text-ghost: #dcdad2;
  --accent: #0a7560;
  --accent-dim: #2f8f7a;
  --accent-glow: rgba(10, 117, 96, 0.10);
  --accent-glow-strong: rgba(10, 117, 96, 0.22);
  --shadow-card: 0 1px 2px rgba(17, 18, 22, .04), 0 10px 30px -12px rgba(17, 18, 22, .12);
  color: var(--text);
  color-scheme: light;
}
.section.section--light { background: var(--bg-page); border-bottom-color: var(--border-soft); }
.section--light.section--tint { --bg-page: #ecebe5; --text-ghost: #d4d2c9; }

/* rytm: wiecej powietrza, czytelniejsza hierarchia */
.section.section--light { padding-block: clamp(5rem, 11vw, 8.5rem); }
.section--light h2 { font-size: clamp(2rem, 3.8vw, 2.85rem); letter-spacing: -.02em; line-height: 1.12; }
.section--light .eyebrow { color: var(--accent); margin-bottom: 1rem; }
.section--light .section__lede {
  margin-top: 1.25rem;
  font-size: clamp(1.05rem, 1.35vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 36rem;
}
.section--light .feature-list { margin-top: 1.9rem; gap: .8rem 2rem; max-width: 34rem; }
.section--light .feature-list li { font-size: 1rem; line-height: 1.5; color: var(--text); }
.section--light .feature-list li::before { top: .6em; }
.section--light .section__index { -webkit-text-stroke-color: var(--text-ghost); }

/* CTA: widoczne, ale spokojne */
.section--light .btn--primary { color: #fff; }
.section--light .btn--primary:hover,
.section--light .btn--primary:focus-visible { box-shadow: 0 8px 22px -8px var(--accent-glow-strong); }
.section--light .btn--ghost { color: var(--text); border-color: var(--border); background: var(--surface); }
.section--light .btn--ghost:hover,
.section--light .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }
.section--light .flow__node--brand { color: #fff; }
.section--light .process li { background: var(--surface); color: var(--text-dim); }

/* "ekrany" produktu zostaja ciemne - na jasnym tle czytaja sie jak realny
   podglad interfejsu, nie jak kolejna ciemna sekcja */
.section--light .agent-panel,
.section--light .browser-frame {
  --bg: #0b0b0e; --bg-raised: #111116; --border: #23232a; --border-soft: #1b1b21;
  --text: #eceef0; --text-dim: #a6a8b0; --text-faint: #6b6d76;
  --accent: #4dfad1; --accent-dim: #2f8f7a;
  --accent-glow: rgba(77, 250, 209, .18); --accent-glow-strong: rgba(77, 250, 209, .35);
  color: var(--text);
  background: var(--bg);
  border-color: var(--border);
  box-shadow: 0 30px 60px -30px rgba(17, 18, 22, .45), 0 2px 6px rgba(17, 18, 22, .08);
}
.section--light .flow,
.section--light .apps-device__frame { background: var(--surface); box-shadow: var(--shadow-card); }
.section--light .signal__ring { border-color: rgba(10, 117, 96, .28); }

/* Realizacje - karty jak realne wdrozenia */
.section--light .work-head .section__lede { max-width: 40rem; }
.section--light .work-grid { gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.section--light .work-card {
  position: relative;
  padding: 1.75rem 1.75rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.section--light .work-card::before {
  content: "";
  position: absolute;
  left: 1.75rem; right: 1.75rem; top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  opacity: .0;
  transition: opacity var(--transition-fast);
}
.section--light .work-card:hover,
.section--light .work-card:focus-within {
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(17,18,22,.05), 0 18px 40px -16px rgba(17,18,22,.2);
}
.section--light .work-card:hover::before,
.section--light .work-card:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .section--light .work-card:hover { transform: translateY(-2px); }
}
.section--light .work-card__status {
  align-self: flex-start;
  padding: .3rem .65rem .3rem .55rem;
  font-size: .66rem;
  color: var(--accent);
  background: var(--accent-glow);
  border-radius: 999px;
}
.section--light .work-card__status .status-dot { width: 6px; height: 6px; margin-right: .5em; box-shadow: none; }
.section--light .work-card__name { margin-top: 1.1rem; font-size: 1.45rem; letter-spacing: -.01em; }
.section--light .work-card__desc { margin-top: .7rem; font-size: 1rem; line-height: 1.6; color: var(--text-dim); }
.section--light .work-card__tags { margin-top: 1.2rem; margin-bottom: 1.5rem; }
.section--light .work-card__tags li { background: var(--bg-page); border-color: var(--border-soft); color: var(--text-dim); }
.section--light .work-card__links { padding-top: 1.5rem; border-top: 1px solid var(--border-soft); margin-top: auto; }
.section--light .work-card__link {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.section--light .work-card__link:hover,
.section--light .work-card__link:focus-visible { border-bottom-color: var(--accent); }
.section--light .work-card--cta {
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}
.section--light .work-card--cta::before { display: none; }
.section--light .work-card--cta .work-card__status { background: transparent; color: var(--text-faint); padding-left: 0; }

/* przejscia jasne <-> ciemne: wyrazna, ale spokojna krawedz */
.section--terminal,
.section--contact { border-top: 1px solid var(--border-soft); }
/* naglowek nad jasnymi sekcjami: pelniejsze tlo, zeby nie szarzal */
.site-header { background: rgba(18, 20, 24, 0.92); }
@media (max-width: 860px) {
  .section--light .feature-list { gap: .7rem; }
  .section--light .work-card { padding: 1.5rem 1.35rem 1.4rem; }
  .section--light .work-card::before { left: 1.35rem; right: 1.35rem; }
}
/* rzad przyciskow: jeden odstep od tresci, bez podwojnego margin-top po zawinieciu */
.btn-row { margin-top: 2rem; gap: .75rem 1rem; }
.btn-row .btn { margin-top: 0; }
@media (max-width: 480px) {
  /* waski ekran: kroki zawijaja sie, strzalka na poczatku linii wypadalaby poza tekst */
  .process { gap: .5rem; }
  .process li + li::before { display: none; }
}

/* ==========================================================================
   Poprawki glitchy po przegladzie zrzutow (2026-09-15)
   ========================================================================== */
/* 1. Radar Reklamy na jasnym tle: stale, delikatne okregi-prowadnice +
      mocniejszy impuls pierscieni (ta sama animacja, wyzszy szczyt). */
.section--light .signal::before,
.section--light .signal::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.section--light .signal::before { width: 95%; height: 95%; border: 1px solid rgba(10, 117, 96, .22); }
.section--light .signal::after  { width: 65%; height: 65%; border: 1px dashed rgba(10, 117, 96, .20); }
.section--light .signal__ring { border-color: rgba(10, 117, 96, .55); }
.section--light .signal__core { box-shadow: 0 0 0 6px rgba(10, 117, 96, .12), 0 0 18px var(--accent-glow-strong); }
.section--light .signal__node { color: var(--text-dim); }
@keyframes signal-ping-light {
  0%   { transform: scale(.6); opacity: 0; }
  15%  { opacity: .85; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .section--light .signal.is-visible .signal__ring { animation-name: signal-ping-light; }
}
@media (prefers-reduced-motion: reduce) {
  .section--light .signal__ring { opacity: .6; }
}

/* 2. Lacznosc: akapit po liscie nie przylega do ostatniego punktu */
.section--terminal .feature-list + .muted { margin-top: 1.5rem; }

/* 3. Lacznosc: podpis pod siatka kafelkow */
.portfolio-grid + .muted { margin-top: 1.25rem; }

/* 4. Pionowa linia sekcji nie dotyka krawedzi ekranu, gdy .wrap siega brzegu
      (np. 1024px). Na szerokim ekranie (wrap z marginesem) wynik = 0 -> bez zmian. */
.section__spine { left: max(0px, calc(1rem - max(0px, (100vw - var(--wrap-max)) / 2))); }

/* ==========================================================================
   Podstrony - naglowek strony (.page-head) i h1 w sekcjach.
   Strona glowna tych klas nie uzywa (h1 tylko w .hero), wiec jej wyglad
   zostaje bez zmian. Ten sam rytm co hero: ciemny, techniczny naglowek ->
   jasna tresc biznesowa.
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(3rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--border-soft);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg);
}
.page-head__inner { position: relative; }
.page-head__inner > * { max-width: 48rem; }
.page-head__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  list-style: none;
  padding: 0;
}
.page-head__crumbs li + li::before { content: "//"; margin-right: .4rem; color: var(--text-ghost); }
.page-head__crumbs a { color: var(--accent-dim); }
.page-head__crumbs a:hover,
.page-head__crumbs a:focus-visible { color: var(--accent); }
.page-head__crumbs [aria-current="page"] { color: var(--text-dim); }
.page-head h1 {
  font-size: clamp(2.3rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.08;
}
.page-head__lede {
  margin-top: 1.25rem;
  max-width: 38rem;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-dim);
}
.section h1 {
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}
.site-nav__list a[aria-current="page"] { color: var(--accent); }
/* linki wewnetrzne z podstron (/?temat=...#kontakt, /#sekcja): strzalka jak dla kotwic, nie ikona linku zewnetrznego */
.work-card__link[href^="/"]::after { content: " →"; }
/* podstrony: dlugie polskie slowa w h1 (np. "Cyberbezpieczenstwo") nie moga
   wychodzic poza ekran na telefonie - mniejszy stopien + awaryjne lamanie */
.page-head h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) {
  .page-head h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
}
/* podstrony (sekcje po .page-head): zwarte, zbalansowane h2 takze w ciemnych
   sekcjach i brak podwojnego odstepu nad galeria zdjec. Strona glowna nie ma
   .page-head, wiec te reguly jej nie dotycza. */
.page-head ~ .section h2 { line-height: 1.15; text-wrap: balance; }
.page-head ~ .section .lacznosc-portfolio { margin-top: 0; }
.page-head ~ .section .lacznosc-portfolio h2 { margin-bottom: .5rem; }

/* ==========================================================================
   ETAP SPRZEDAZOWY (2026-09-15): hero CTA, Dlaczego STTELLA, Oferta,
   portfolio realizacji, orientacyjne ceny, pasy CTA. Wylacznie nowe klasy
   na istniejacych tokenach - istniejace komponenty bez zmian.
   ========================================================================== */
.hero__actions { margin-top: 2rem; }
.hero__actions .btn { margin-top: 0; }
.hero__facts {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero__facts li { display: flex; align-items: center; gap: .55rem; }
.hero__facts li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow-strong);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__actions[data-reveal-hero]:not(.is-visible),
  .hero__facts[data-reveal-hero]:not(.is-visible) { opacity: 0; transform: translateY(14px); }
  .hero__actions[data-reveal-hero].is-visible { transition-delay: 220ms; }
  .hero__facts[data-reveal-hero].is-visible { transition-delay: 320ms; }
}

.section__note { margin-top: 1rem; font-size: .92rem; color: var(--text-faint); max-width: 34rem; }

/* Dlaczego STTELLA - numerowana siatka, bez ikon */
.why-grid {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1px;
  list-style: none;
  padding: 0;
  counter-reset: why;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
}
.why-item {
  counter-increment: why;
  padding: 1.6rem 1.5rem 1.7rem;
  background: var(--surface, var(--bg));
}
.why-item::before {
  content: counter(why, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .9rem;
}
.why-item h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.why-item p { margin-top: .55rem; color: var(--text-dim); font-size: .97rem; line-height: 1.6; }

/* Oferta: problem -> rozwiazanie -> kontakt */
.offer-list { margin-top: clamp(2.25rem, 5vw, 3.25rem); display: grid; gap: .75rem; }
.offer-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.2fr) 14.5rem;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.offer-row:hover,
.offer-row:focus-within { border-color: var(--border); box-shadow: var(--shadow-card, none); }
.offer-row__tag {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.offer-row__problem,
.offer-row__solution { font-size: .98rem; line-height: 1.55; color: var(--text); }
.offer-row__problem { color: var(--text-dim); }
.offer-row__problem span,
.offer-row__solution span {
  display: block;
  margin-bottom: .25rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.offer-row .btn { margin-top: 0; white-space: nowrap; justify-self: end; }
@media (max-width: 1000px) {
  .offer-row { grid-template-columns: 1fr 1fr; }
  .offer-row__tag { grid-column: 1 / -1; }
  .offer-row .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) {
  .offer-row { grid-template-columns: 1fr; gap: .9rem; padding: 1.25rem; }
  .offer-row .btn { white-space: normal; }
}

/* Pas CTA */
.cta-band {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg-page, var(--bg));
}
.cta-band__text { max-width: 40rem; line-height: 1.55; }
.cta-band__text strong { color: inherit; }
.cta-band .btn { margin-top: 0; }
.section--light .cta-band .btn--primary { background: var(--accent); color: #fff; }

/* Portfolio realizacji */
.case-list { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.case {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 4rem);
}
.case--reverse .case__visual { order: 2; }
.case__visual .browser-frame { max-width: 36rem; }
.case__name { margin-top: .9rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.case__desc { margin-top: .7rem; font-size: 1.05rem; line-height: 1.65; color: var(--text-dim); max-width: 32rem; }
.case .work-card__tags { margin-top: 1.1rem; }
.case .work-card__link,
.case .work-card__links { margin-top: 1.25rem; display: inline-flex; }
.case .work-card__links { display: flex; }
.section--light .case .work-card__links { border-top: 0; padding-top: 0; }
.section--light .case .work-card__status,
.section--light .case-mini .work-card__status { align-self: auto; display: inline-flex; }
@media (max-width: 860px) {
  .case { grid-template-columns: 1fr; }
  .case--reverse .case__visual { order: 0; }
}
.case-mini-list {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.case-mini {
  padding: 1.5rem;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.case-mini__name { margin-top: .85rem; font-size: 1.2rem; font-weight: 700; }
.case-mini__desc { margin-top: .5rem; color: var(--text-dim); line-height: 1.6; flex: 1; }
.case-mini .work-card__link,
.case-mini .btn { margin-top: 1.1rem; }
.case-mini--cta { background: transparent; border-style: dashed; border-color: var(--border); }

/* podglady w ramkach przegladarki (dekoracyjne) */
.mock-rows { display: grid; gap: .5rem; }
.mock-rows__row {
  display: flex; justify-content: space-between;
  padding: .55rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--bg-raised);
  font-family: var(--font-mono); font-size: .72rem;
}
.mock-rows__row em { font-style: normal; color: var(--text-dim); }
.mock-rows__row b { color: var(--accent); }
.mock-rows__row--dim { opacity: .55; }
.mock-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.mock-bars span { flex: 1; border-radius: 2px; background: var(--accent-dim); }
.mock-bars span:nth-child(1) { height: 35%; } .mock-bars span:nth-child(2) { height: 70%; }
.mock-bars span:nth-child(3) { height: 50%; } .mock-bars span:nth-child(4) { height: 90%; background: var(--accent); }
.mock-bars span:nth-child(5) { height: 60%; } .mock-bars span:nth-child(6) { height: 80%; }
.mock-bars span:nth-child(7) { height: 40%; } .mock-bars span:nth-child(8) { height: 65%; }
@media (prefers-reduced-motion: no-preference) {
  .case.is-visible .mock-bars span { animation: bars-pulse 2.8s ease-in-out infinite; transform-origin: bottom; }
  .case.is-visible .mock-bars span:nth-child(2n) { animation-delay: -1.1s; }
  .case.is-visible .mock-bars span:nth-child(3n) { animation-delay: -1.9s; }
}
@keyframes bars-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.7); } }

/* Orientacyjne ceny */
.price-grid {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.price-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-card, none);
}
.price-card__name { font-size: 1.12rem; font-weight: 700; }
.price-card__model {
  margin-top: .5rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.price-card__price { margin-top: 1rem; font-size: 1.3rem; font-weight: 700; color: var(--accent); letter-spacing: -.01em; }
.price-card__factors { margin-top: .6rem; color: var(--text-dim); font-size: .95rem; line-height: 1.55; flex: 1; }
.price-card .work-card__link { margin-top: 1.1rem; }


/* ==========================================================================
   STTELLA 2.0 - strona glowna dla klientow biznesowych
   grafit (baza) / jasne sekcje tam, gdzie poprawiaja czytelnosc / jeden akcent
   ========================================================================== */
.section--graphite {
  --bg-page: #171a1f;
  --surface: #1c2026;
  --shadow-card: 0 1px 2px rgba(0,0,0,.25), 0 14px 34px -18px rgba(0,0,0,.6);
  background: var(--bg-page);
  color: var(--text);
}
.section--graphite.section--deep { --bg-page: #0f1114; --surface: #161a1f; }

/* hero: komunikat biznesowy zamiast wielkiego cyber-hasla */
.hero--business .hero__title {
  text-transform: none;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  max-width: 16ch;
}
.hero--business .hero__lede { max-width: 38rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.65; }

/* oferta: przycisk + "Wiecej" */
@media (min-width: 1001px) {
  .offer-row { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.2fr) 15.5rem; }
}
.offer-row__actions { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; }
.offer-row__actions .btn { margin-top: 0; white-space: nowrap; }
.offer-row__more {
  font-size: .9rem; font-weight: 600;
  color: var(--accent);
  border-bottom: 1px solid transparent;
}
.offer-row__more::after { content: " →"; }
.offer-row__more:hover, .offer-row__more:focus-visible { border-bottom-color: var(--accent); }
@media (max-width: 1000px) {
  .offer-row__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.25rem; }
}
@media (max-width: 600px) {
  .offer-row__actions { flex-wrap: wrap; }
  .offer-row__actions .btn { white-space: normal; }
}

/* orientacyjny zakres cenowy - miejsce na prawdziwy cennik */
.price-block {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--surface, var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
.price-block__head h3 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.price-block__head p { margin-top: .4rem; color: var(--text-dim); max-width: 40rem; }
.price-table-wrap { margin-top: 1.25rem; overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.price-table th, .price-table td { text-align: left; padding: .8rem .75rem; border-top: 1px solid var(--border-soft); vertical-align: top; }
.price-table thead th {
  border-top: 0;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400;
}
.price-table tbody th { font-weight: 600; color: var(--text); }
.price-table td { color: var(--text-dim); }
.price-table__price { color: var(--accent) !important; font-weight: 600; white-space: nowrap; }
.price-block .btn { margin-top: 1.4rem; }
@media (max-width: 600px) {
  .price-table thead { display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table tr { padding: .75rem 0; border-top: 1px solid var(--border-soft); }
  .price-table th, .price-table td { border: 0; padding: .1rem 0; }
  .price-table__price { white-space: normal; }
}

/* technologia / infrastruktura */
.tech-grid {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 1rem;
}
.tech-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  border-top: 2px solid var(--accent-dim);
}
.tech-card__label {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.tech-card h3 { margin-top: .75rem; font-size: 1.15rem; font-weight: 700; }
.tech-card p:not(.tech-card__label) { margin-top: .5rem; color: var(--text-dim); line-height: 1.6; flex: 1; }
.tech-card .offer-row__more { margin-top: 1rem; }

/* pas CTA na grafitowym tle */
.cta-band--dark {
  background: var(--surface, #1c2026);
  color: var(--text);
  border: 1px solid var(--border);
}

/* realizacje na grafitowym tle: podglady ciemniejsze niz sekcja */
.section--graphite .browser-frame { background: #0c0e11; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.section--graphite .work-card__tags li { background: var(--bg-raised); border: 1px solid var(--border-soft); color: var(--text-dim); }
.section--graphite .work-card__link { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: 0; border-bottom: 1px solid transparent; }
.section--graphite .case-mini { box-shadow: var(--shadow-card); }
/* why-grid: osobne karty zamiast wspolnego tla siatki - przy niepelnym
   ostatnim rzedzie nie widac pustego szarego pola */
.why-grid { background: transparent; border: 0; border-radius: 0; overflow: visible; gap: 1rem; }
.why-item { border: 1px solid var(--border-soft); border-radius: 12px; }
/* 5 punktow "Dlaczego": pelny rzad na desktopie, 2+2+1 (ostatni na cala
   szerokosc) na srednich ekranach, jedna kolumna na telefonie */
.why-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid .why-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .why-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .why-grid .why-item:last-child:nth-child(odd) { grid-column: auto; }
}

/* ==========================================================================
   BRANDING: zatwierdzony zloty symbol STTELLA z planszy
   ~/Pobrane/STTELLA_zloty_symbol.png (wyciety bez zmiany geometrii, tlo
   usuniete; assety PNG 16-512 + favicon.ico + apple-touch-icon).
   Zloto wylacznie w znaku - akcent strony (turkus) bez zmian.
   ========================================================================== */
:root { --gold: #D4AF37; --gold-glow: rgba(212, 175, 55, .28); }
.logo__mark {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-right: .65em;
  filter: drop-shadow(0 0 6px var(--gold-glow));
}
.logo--footer .logo__mark { width: 18px; height: 18px; filter: none; }
.logo--footer { display: inline-flex; align-items: center; }

/* Wariant "Inwersja" (bialy) z planszy STTELLA_zloty_symbol.png: intro i naglowek.
   Znak nad animowanym napisem STTELLA - scramble, audio i timing bez zmian. */
.intro__mark {
  display: block;
  width: clamp(64px, 12vw, 96px);
  height: auto;
  margin: 0 auto 1.4rem;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .18));
}
@media (prefers-reduced-motion: no-preference) {
  .intro__mark { animation: intro-mark-in 900ms var(--ease-out) both; }
}
@keyframes intro-mark-in {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
.site-header .logo__mark { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .15)); }
/* oferta: pelna nazwa uslugi pod krotka etykieta (bez zmiany ukladu wiersza) */
.offer-row__title {
  display: block;
  margin-top: .4rem;
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--text);
}
@media (min-width: 1001px) {
  .offer-row { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1.2fr) 15.5rem; }
}

/* Przeglad przed deployem (2026-09-16): czytelnosc drobnych etykiet (min. ~12px)
   i interlinia naglowka sekcji Technologia. Tylko rozmiary tekstu/interlinia. */
.offer-row__problem span,
.offer-row__solution span,
.offer-row__tag,
.work-card__tags li,
.work-card__status,
.tech-card__label,
.price-table thead th,
.price-card__model,
.hero__facts { font-size: .75rem; }
#technologia h2 { line-height: 1.15; text-wrap: balance; }
.contact-info__mail-label,
.contact-info__tags li { font-size: .75rem; }

/* ==========================================================================
   Finalna korekta UX (2026-09-16): kotwice pod sticky headerem, cele dotykowe
   na telefonie, czytelnosc etykiet, interlinia naglowkow, siatki 3x3 i 2x2.
   Bez nowych kolorow i bez zmian w intro/logo/animacjach hero.
   ========================================================================== */
/* 3. kotwice: naglowek sekcji nie chowa sie pod sticky headerem (65px + zapas) */
main [id], main section[id] { scroll-margin-top: 96px; }

/* 5. etykiety min. 12px takze na podstronach (wyzsza specyficznosc niz .section--light) */
.section--light .work-card__status,
.page-head__crumbs,
.page-head__crumbs li { font-size: .75rem; }

/* 6. interlinia naglowkow - jak w sekcji Technologia */
main h2 { line-height: 1.15; }
.why-item h3,
.tech-card h3,
.case-mini__name,
.work-card__name,
.price-block__head h3,
.case__name { line-height: 1.22; }

/* 2. "Nie tylko strony": 9 kart = 3 x 3 na desktopie, responsywnie nizej */
@media (min-width: 1001px) {
  #rozwiazania .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 7. /realizacje/: pierwszy zestaw 4 kart jako 2 x 2 */
@media (min-width: 1001px) {
  .work-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 4. telefon/tablet: realny obszar dotykowy ok. 44px (bez zmiany stopnia pisma) */
@media (max-width: 1000px) {
  .site-nav__list a { padding-block: 1rem; }
  .site-footer__links a,
  .offer-row__more,
  .work-card__link,
  .price-card .work-card__link,
  .contact-info__mail-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer__links { gap: 0 1.25rem; }
  .work-card__links { gap: .25rem 1.4rem; }
}
/* kroki procesu tez min. 12px */
.process li { font-size: .75rem; }
/* "Przykladowy start" w bloku cen - kompaktowa lista punktow startowych */
.price-start { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border-soft); }
.price-start h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.price-start__list { margin-top: .9rem; display: grid; gap: .5rem; list-style: none; padding: 0; max-width: 42rem; }
.price-start__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--border-soft); font-size: .97rem; color: var(--text-dim); }
.price-start__list b { color: var(--accent); white-space: nowrap; }
.price-start__note { margin-top: .9rem; font-size: .92rem; color: var(--text-faint); max-width: 42rem; }

/* ===================== MIKROPOPRAWKI PO AUDYCIE LIVE (2026-09-16) =====================
   Cztery punkty z audytu produkcji, bez zmian ukladu i tresci:
   1) etykiety mono ponizej 12px (/cyber/ "PLAN PRAC", podpisy kafelkow /lacznosc/),
   2) kontrast eyebrow w grafitowej sekcji Realizacje (4,43:1 -> prog 4,5:1),
   3) lamanie krotkich nagowkow (case__name, h1 podstrony) - text-wrap: balance. */
.terminal .terminal__title { font-size: .75rem; }          /* 11,84px -> 12px */
.portfolio-slot span { font-size: .75rem; }                /* 10,88px -> 12px */
.section--graphite .eyebrow { color: var(--accent); }      /* 4,43:1 -> 13,2:1 */
.case__name { text-wrap: balance; }
.page-head h1 { text-wrap: balance; }