/* ============================================================
   BROADCASTELLO — landing page 2.0
   Samodzielny arkusz stylów (bez frameworków). Motyw: nocna reżyserka — głęboka czerń, sygnałowy pomarańcz,
   a kolory trzech monitorów sceny 3D (czerwień, błękit, pomarańcz) wracają w wizualizacjach jako „kanały”.
   ============================================================ */

/* ---------- Fonty (pliki w assets/fonts, licencja SIL OFL 1.1) ----------
   Fonty zmienne w podzbiorach latin i latin-ext; przeglądarka pobiera latin-ext tylko dla znaków z jego zakresu (np. polskie litery) */
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-latin.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-latin-ext.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Inter'; src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'JetBrains Mono'; src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }

/* ---------- Fonty zastępcze o metrykach Outfit/Inter ----------
   Do czasu pobrania fontów (display=swap) tekst łamie się fontem systemowym; dopasowana szerokość i wysokość
   wiersza sprawiają, że po podmianie nagłówek hero nie zmienia liczby wierszy i treść pod nim nie skacze (CLS).
   Współczynniki zmierzone w Chromium względem Arial / Arial Bold */
@font-face { font-family: 'Outfit Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); font-weight: 100 599; size-adjust: 98.4%; ascent-override: 101.6%; descent-override: 26.4%; line-gap-override: 0% }
@font-face { font-family: 'Outfit Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 600 900; size-adjust: 95%; ascent-override: 105.3%; descent-override: 27.4%; line-gap-override: 0% }
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'); font-weight: 100 599; size-adjust: 106.4%; ascent-override: 91.2%; descent-override: 22.6%; line-gap-override: 0% }
@font-face { font-family: 'Inter Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 600 900; size-adjust: 102%; ascent-override: 95.1%; descent-override: 23.5%; line-gap-override: 0% }

/* ---------- Zmienne projektowe ---------- */
:root {
  color-scheme: dark;

  /* Tło i powierzchnie */
  --bg: #05070e;
  --bg-raise: #0a0e1b;
  --surface: rgba(148, 163, 184, .06);
  --surface-2: rgba(148, 163, 184, .1);
  --line: rgba(148, 163, 184, .14);
  --line-strong: rgba(148, 163, 184, .28);

  /* Tekst — --tx-mute ma kontrast ≥ 4,5:1 na każdej powierzchni strony */
  --tx: #f4f6fb;
  --tx-body: #b6c1d6;
  --tx-mute: #8a96ad;

  /* Sygnał (marka) i kanały monitorów sceny 3D */
  --c-primary: #f97316;
  --c-primary-strong: #ea580c;
  --c-primary-soft: #fdba74;
  --c-amber: #fbbf24;
  --ch-red: #ff2d55;
  --ch-blue: #3b82ff;
  --ch-orange: #ff7a1a;
  --c-ok: #34e39a;

  /* Typografia */
  --font-head: 'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rytm */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --container: 1200px;
  --nav-h: 60px;
  --nav-top: 14px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);

  /* Ziarno — rozbija pasmowanie gradientów poświaty */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg }

/* ---------- Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx-body);
  background: var(--grain), var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Przycina ewentualne poziome wystawanie dekoracji; `clip` nie tworzy kontenera przewijania */
  overflow-x: clip;
}
img, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--tx); line-height: 1.1; margin: 0 0 .6em; text-wrap: balance }
p { margin: 0 0 1em; text-wrap: pretty }
strong { color: var(--tx); font-weight: 600 }
::selection { background: rgba(249, 115, 22, .4); color: #fff }
:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 3px; border-radius: 6px }
:target { scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + 24px) }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter) }

/* ---------- Sekcje i nagłówki sekcji ---------- */
.section { position: relative; padding-block: var(--section-y) }
main { counter-reset: sec }
/* Nagłówek redakcyjny: tytuł po lewej, wprowadzenie po prawej, nad nimi numerowana etykieta */
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem); align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head .kicker { grid-column: 1 / -1; justify-self: start }
.section-head h2 {
  /* Dopełnienie u dołu: tło przycięte do tekstu kończy się na krawędzi pola, a ogonki (ą, ę, j) sięgają niżej */
  margin: 0 0 -.12em; padding-bottom: .12em;
  font-size: clamp(2rem, 4.7vw, 3.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.03;
  background: linear-gradient(180deg, #fff 30%, #aebbd4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head p { margin: 0 0 .35rem; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--tx-body); text-wrap: balance }

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-primary-soft);
  margin-bottom: 1.4rem;
}
.kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px rgba(249, 115, 22, .18), 0 0 14px rgba(249, 115, 22, .9) }
.section-head .kicker { counter-increment: sec }
.section-head .kicker::before {
  content: counter(sec, decimal-leading-zero);
  width: auto; height: auto; padding: .28rem .6rem; border-radius: 999px;
  background: rgba(249, 115, 22, .12); border: 1px solid rgba(249, 115, 22, .32); box-shadow: none;
  letter-spacing: .08em; color: var(--c-amber);
}

/* ---------- Przyciski ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; white-space: nowrap;
  /* --bx/--by: przyciąganie do kursora (js/main.js) */
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: transform .35s var(--ease-out), box-shadow .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:active { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(.97) }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #fb923c 0%, var(--c-primary) 45%, var(--c-primary-strong) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -8px rgba(249, 115, 22, .7), 0 0 0 1px rgba(249, 115, 22, .5);
}
/* Odblask przesuwający się po przycisku przy najechaniu */
.btn-primary::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  translate: -110% 0;
}
.btn-primary:hover::before { translate: 110% 0; transition: translate .7s var(--ease-out) }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 40px -6px rgba(249, 115, 22, .85), 0 0 0 1px rgba(251, 191, 36, .7) }
.btn-ghost, .btn-ghost-dark { color: var(--tx); border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06) }
.btn-ghost:hover, .btn-ghost-dark:hover { border-color: rgba(226, 232, 240, .6); background: rgba(148, 163, 184, .14) }
.btn-lg { padding: 1.02rem 1.9rem; font-size: 1.02rem }
.btn .arrow { transition: translate .35s var(--ease-out) }
.btn:hover .arrow { translate: 4px 0 }

/* ---------- Wejście elementów w widok (klasa .in z js/main.js; bez JS wszystko widoczne) ---------- */
.js .reveal { opacity: 0 }
.js .reveal.in { opacity: 1; animation: reveal-in .95s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms) }
@keyframes reveal-in {
  from { opacity: 0; translate: 0 28px; filter: blur(8px) }
  to { opacity: 1; translate: 0 0; filter: blur(0) }
}

/* Sekcja poza widokiem (klasa z js/main.js): animacje w pętli stoją — przeglądarka nie maluje tego, czego nie widać */
.is-away, .is-away::before, .is-away::after, .is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important }

/* ============================================================
   Nawigacja — szklana pastylka unosząca się nad stroną
   ============================================================ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: var(--nav-top) var(--gutter) 0; pointer-events: none }
.nav-inner {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 1.2rem;
  max-width: calc(var(--container) + 2rem); height: var(--nav-h);
  padding-inline: .95rem .55rem;
  border: 1px solid transparent; border-radius: 999px;
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.nav.scrolled .nav-inner, .nav.open .nav-inner {
  background: rgba(8, 11, 22, .72);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -20px rgba(0, 0, 0, .9);
}
/* Postęp przewijania strony (--scroll z js/main.js) */
.nav-inner::after {
  content: ''; position: absolute; left: 26px; right: 26px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-primary) 20%, var(--c-amber));
  transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));
  opacity: 0; transition: opacity .4s ease;
}
.nav.scrolled .nav-inner::after { opacity: 1 }
.brand { display: flex; align-items: center; gap: .65rem; font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; letter-spacing: .04em; color: #fff; white-space: nowrap }
.brand img { width: 34px; height: 34px; border-radius: 9px; transition: rotate .6s var(--ease-back), scale .6s var(--ease-back) }
.brand:hover img { rotate: -8deg; scale: 1.08 }
.nav-links { position: relative; display: flex; gap: .15rem; margin-inline: auto }
.nav-links a { position: relative; z-index: 1; padding: .45rem .85rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--tx-body); white-space: nowrap; transition: color .25s ease }
.nav-links a:hover, .nav-links a.is-current { color: #fff }
/* Podświetlenie przesuwane pod odnośnik pod kursorem / bieżącą sekcję (pozycja z js/main.js) */
.nav-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: rgba(148, 163, 184, .14); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .16); opacity: 0; pointer-events: none; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s ease }
.nav-cta { display: flex; align-items: center; gap: .7rem }
.nav-login { padding: .45rem .5rem; font-size: .9rem; font-weight: 500; color: var(--tx-body); white-space: nowrap; transition: color .25s ease }
.nav-login:hover { color: #fff }
.lang-switch { display: inline-flex; align-items: center; gap: .1rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em }
.lang-switch a, .lang-switch .active { padding: .22rem .58rem; border-radius: 999px; color: var(--tx-mute); transition: color .2s ease }
.lang-switch a:hover { color: #fff }
.lang-switch .active { background: rgba(249, 115, 22, .2); color: var(--c-primary-soft) }
.nav .btn-primary { padding: .62rem 1.2rem; font-size: .88rem }

.nav-burger { display: none; position: relative; width: 42px; height: 42px; margin-left: .1rem; border-radius: 50%; border: 1px solid var(--line) }
.nav-burger span { position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -.75px; background: #e2e8f0; border-radius: 2px; transition: transform .4s var(--ease-out), opacity .2s ease }
.nav-burger span:nth-child(1) { transform: translateY(-6px) }
.nav-burger span:nth-child(3) { transform: translateY(6px) }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) }

.nav-mobile {
  display: none; pointer-events: auto;
  max-width: calc(var(--container) + 2rem); margin-top: .6rem; padding: .7rem;
  border: 1px solid var(--line); border-radius: 26px;
  background: rgba(8, 11, 22, .92);
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
}
.nav-mobile a:not(.btn) { display: block; padding: .85rem 1rem; border-radius: 16px; font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; color: var(--tx) }
.nav-mobile a:not(.btn):hover { background: var(--surface) }
.nav-mobile .btn { display: flex; margin-top: .6rem; padding-block: 1rem }
.nav.open .nav-mobile a { animation: reveal-in .6s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 45ms) }
.nav-mobile a:nth-child(2) { --n: 1 } .nav-mobile a:nth-child(3) { --n: 2 } .nav-mobile a:nth-child(4) { --n: 3 }
.nav-mobile a:nth-child(5) { --n: 4 } .nav-mobile a:nth-child(6) { --n: 5 } .nav-mobile a:nth-child(7) { --n: 6 }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  --hero-text-start: max(var(--gutter), min(calc((100% - var(--container)) / 2 + var(--gutter)), 8%));
  --hero-text-w: min(33.5rem, 43vw);
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: clamp(700px, 100svh, 1040px);
  padding-block: calc(var(--nav-h) + var(--nav-top) + clamp(2.5rem, 7vh, 5rem)) clamp(8rem, 17vh, 11rem);
  overflow: clip;
}
/* Zorza za sceną: trzy plamy w kolorach kanałów, wolno dryfujące */
.hero::before {
  content: ''; position: absolute; inset: -12% -8% -5% 18%; z-index: -2;
  background:
    radial-gradient(42% 44% at 58% 44%, rgba(249, 115, 22, .2), transparent 70%),
    radial-gradient(34% 40% at 86% 66%, rgba(47, 123, 255, .17), transparent 70%),
    radial-gradient(30% 34% at 42% 20%, rgba(255, 45, 85, .11), transparent 70%);
  filter: blur(8px);
  animation: aurora 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1) }
  to { transform: translate3d(2%, -2%, 0) scale(1.08) }
}
/* Raster punktów i światło podążające za kursorem (--hx/--hy z js/main.js) */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(520px circle at var(--hx, 70%) var(--hy, 40%), rgba(255, 255, 255, .055), transparent 65%),
    radial-gradient(rgba(148, 163, 184, .16) 1px, transparent 1.2px) 0 0 / 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 78%);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, var(--hero-text-w));
  padding-left: var(--hero-text-start);
  /* Pas siatki leży nad sceną na całej szerokości — przeciąganie sceny musi przejść przez puste miejsce obok tekstu */
  pointer-events: none;
}
/* --exit: postęp wyjścia z hero przy przewijaniu (js/main.js) — tekst odpływa wolniej niż strona i gaśnie */
.hero-copy { pointer-events: auto; opacity: calc(1 - var(--exit, 0) * 1.5); transform: translate3d(0, calc(var(--exit, 0) * 70px), 0) }
.hero-copy > * { animation: rise .95s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms) }
.hero-copy > h1 { --d: 1; animation: none }
.hero-copy > .hero-sub { --d: 5 }
.hero-copy > .hero-actions { --d: 6 }
.hero-copy > .hero-note { --d: 7 }
@keyframes rise { from { opacity: 0; translate: 0 22px; filter: blur(6px) } }

.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .42rem .95rem .42rem .7rem;
  border: 1px solid rgba(251, 191, 36, .3); border-radius: 999px;
  background: linear-gradient(90deg, rgba(251, 191, 36, .13), rgba(251, 191, 36, .04));
  color: #fcd34d;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 1.7rem;
}
.hero-badge .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--c-amber); box-shadow: 0 0 10px var(--c-amber) }
.hero-badge .dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--c-amber); animation: ping 2.2s var(--ease-out) infinite }
@keyframes ping { from { scale: .5; opacity: .9 } to { scale: 1.9; opacity: 0 } }

.hero h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02;
  margin-bottom: 1.5rem;
}
.hero h1 .accent {
  background: linear-gradient(110deg, #ffb46b 0%, var(--c-primary) 40%, var(--c-amber) 100%) 0 50% / 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: accent-flow 7s ease-in-out infinite alternate;
}
@keyframes accent-flow { to { background-position: 100% 50% } }
/* Nagłówek rozbity na słowa (js/main.js): każde wysuwa się zza własnej maski. Gradient akcentu przechodzi wtedy na słowa —
   tło przycięte do tekstu na rodzicu nie obejmuje potomków z własną warstwą */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .04em .16em; margin: -.14em -.04em -.16em }
.hero h1 .w > span { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; animation: word-in 1s var(--ease-out) forwards; animation-delay: calc(var(--w) * 60ms + 180ms) }
@keyframes word-in { to { transform: none } }
.hero h1.is-split .accent { background: none; animation: none }
.hero h1.is-split .accent .w > span {
  background: linear-gradient(110deg, #ffb46b 0%, var(--c-primary) 45%, var(--c-amber) 100%) 0 50% / 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: word-in 1s var(--ease-out) forwards, accent-flow 7s ease-in-out infinite alternate;
  animation-delay: calc(var(--w) * 60ms + 180ms), 0s;
}
.hero-sub { font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--tx-body); max-width: 33rem; margin-bottom: 2.3rem }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.7rem }
/* Ptaszki zawsze w jednej linii: czcionka maleje z szerokością bloku (cqi), a odstępy i ikony są w em, więc skalują się razem z nią.
   Mnożnik z pomiaru (Inter): linia PL ma 33,7 em, EN 29,9 em — 100cqi / em-y, pomniejszone o zapas na inny krój zastępczy */
.hero-note { display: flex; container-type: inline-size; color: var(--tx-mute) }
.hero-note span { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; font-size: min(.86rem, 2.75cqi) }
:lang(en) .hero-note span { font-size: min(.86rem, 3.1cqi) }
.hero-note span + span { margin-left: 1.6em }
.hero-note svg { width: 1.15em; height: 1.15em; color: var(--c-ok); flex: none }

/* --- Scena 3D (js/hero3d.js) nad statycznym renderem tej samej sceny --- */
.hero-visual { opacity: calc(1 - var(--exit, 0) * .95); transform: translate3d(0, calc(var(--exit, 0) * -50px), 0) scale(calc(1 - var(--exit, 0) * .1)); transform-origin: 60% 60% }
@media (min-width: 900px) {
  .hero-visual {
    position: absolute; z-index: 1;
    top: 0; right: 0; bottom: 0;
    left: calc(var(--hero-text-start) + var(--hero-text-w) - 2rem);
  }
}
.hero-poster, .hero-stage { position: absolute; inset: 0; width: 100%; height: 100% }
/* Położenie kadru spójne z FRAME_ALIGN w js/hero3d-stage.js — render i canvas muszą się pokrywać przy przenikaniu */
.hero-poster { object-fit: contain; object-position: 60% 47%; transition: opacity .9s ease }
.hero-stage { opacity: 0; transition: opacity .9s ease }
.hero-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; outline: none; touch-action: pan-y }
.hero-stage canvas:active { cursor: grabbing }
.hero-visual.is-3d .hero-stage { opacity: 1 }
.hero-visual.is-3d .hero-poster { opacity: 0 }

/* Szklane etykiety statusu nad monitorami sceny — pozycję i przezroczystość ustawia js/hero3d-stage.js w każdej klatce */
.hero-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden }
.hero-tag {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .75rem .32rem .6rem;
  border: 1px solid color-mix(in srgb, var(--tag-accent, #fb923c) 38%, rgba(255, 255, 255, .1)); border-radius: 999px;
  background: rgba(8, 11, 22, .55);
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -10px rgba(0, 0, 0, .8);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; line-height: 1.2; color: #d5dcea; white-space: nowrap;
  opacity: 0; will-change: transform, opacity; transform-origin: 50% 100%;
  transition: border-color .3s ease, background-color .3s ease;
}
.hero-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); flex: none; animation: tag-ping 2.4s ease-out infinite }
.hero-tag b { font-weight: 400; color: #86f0c0 }
.hero-tag span::before { content: '/'; margin-right: .45rem; color: var(--tx-mute) }
.hero-tags.is-compact .hero-tag:not(.is-updated) b, .hero-tags.is-compact .hero-tag:not(.is-updated) span::before { display: none }
.hero-tags.is-compact .hero-tag.is-updated span { display: none }
.hero-tag.is-updated { border-color: color-mix(in srgb, var(--tag-accent, #fb923c) 75%, transparent); background: color-mix(in srgb, var(--tag-accent, #f97316) 24%, rgba(8, 11, 22, .7)) }
.hero-tag.is-updated i { background: var(--tag-accent, var(--c-primary)); animation: none; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--tag-accent, #f97316) 70%, transparent) }
.hero-tag.is-updated b { color: color-mix(in srgb, var(--tag-accent, #f97316) 40%, #ffffff) }
@keyframes tag-ping {
  0% { box-shadow: 0 0 0 0 rgba(52, 227, 154, .55) }
  70%, 100% { box-shadow: 0 0 0 6px rgba(52, 227, 154, 0) }
}

/* Podpowiedź obsługi sceny — pojawia się po chwili, znika po pierwszym przeciągnięciu */
.hero-hint {
  position: absolute; left: 60%; bottom: clamp(7.5rem, 16vh, 10rem); z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(8, 11, 22, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--tx-body); white-space: nowrap;
  opacity: 0; translate: -50% 10px; pointer-events: none;
  transition: opacity .6s ease, translate .6s var(--ease-out);
}
.hero-hint.is-on { opacity: 1; translate: -50% 0 }
.hero-hint svg { width: 16px; height: 16px; color: var(--c-primary-soft); animation: hint-turn 2.6s ease-in-out infinite }
@keyframes hint-turn { 50% { transform: rotate(-18deg) } }

/* ---------- Pasek liczb — szklana listwa nachodząca na dolną krawędź hero ---------- */
.stats { position: relative; z-index: 3; margin-top: clamp(-5.4rem, -9vh, -4.2rem) }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: calc(var(--container) - 2 * var(--gutter)); padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(14, 19, 36, .72), rgba(8, 11, 22, .72));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.stats .container { width: calc(100% - 2 * var(--gutter)) }
.stat { position: relative; padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.1rem, 2.4vw, 2rem) }
.stat + .stat { border-left: 1px solid var(--line) }
.stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-primary), transparent); opacity: 0; transition: opacity .4s ease }
.stat:hover::before { opacity: 1 }
.stat b { display: block; font-family: var(--font-head); font-size: clamp(1.6rem, 3.1vw, 2.5rem); font-weight: 600; line-height: 1.1; color: var(--tx); letter-spacing: -.035em; font-variant-numeric: tabular-nums }
/* Odliczana liczba ma stałą szerokość wartości końcowej — napis wokół niej nie drga w trakcie odliczania */
/* Dopełnienie boczne: gradient przycięty do tekstu kończy się na krawędzi pola, a cyfry przy ujemnym odstępie liter wystają poza nie */
.stat .count { display: inline-block; padding-inline: .09em; margin-inline: -.09em; text-align: right; font-size: inherit; color: inherit; background: linear-gradient(180deg, #ffb46b, var(--c-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.stat span { display: block; margin-top: .3rem; font-size: .86rem; line-height: 1.4; color: var(--tx-mute) }

/* ============================================================
   Funkcje — siatka bento
   ============================================================ */
.features { padding-top: calc(var(--section-y) + 1rem) }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem }
.feature, .sec-card, .plan {
  position: relative; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(148, 163, 184, .075), rgba(148, 163, 184, .025));
  /* --rx/--ry: lekkie pochylenie karty za kursorem (js/main.js) */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), border-color .3s ease, background-color .3s ease;
}
.feature.is-tilting, .sec-card.is-tilting, .plan.is-tilting { transition: transform .12s linear, border-color .3s ease }
/* Poświata i świecąca krawędź pod kursorem (--mx/--my z js/main.js) */
.feature::before, .sec-card::before, .plan::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--glow, var(--c-primary)) 16%, transparent), transparent 62%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.feature::after, .sec-card::after, .plan::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--glow, var(--c-amber)) 95%, #fff), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.feature:hover::before, .feature:hover::after, .sec-card:hover::before, .sec-card:hover::after, .plan:hover::before, .plan:hover::after { opacity: 1 }

.feature { padding: 1.7rem 1.6rem 1.8rem }
.ico {
  position: relative;
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(249, 115, 22, .2), rgba(249, 115, 22, .06));
  border: 1px solid rgba(249, 115, 22, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  color: var(--c-primary-soft);
  margin-bottom: 1.25rem;
  transition: scale .45s var(--ease-back), box-shadow .3s ease;
}
.ico svg { width: 21px; height: 21px; overflow: visible }
/* Ikona rysuje się kreska po kresce: przy wejściu karty w widok i ponownie po najechaniu (pathLength="1" i klasę .ln nadaje js/main.js —
   klasa, nie selektor atrybutu: po zmianie klasy u przodka Chromium nie odświeża stylu kształtów SVG wybranych przez [pathLength]) */
.js .ico svg .ln { stroke-dasharray: 1; stroke-dashoffset: 1 }
.js .in .ico svg .ln { animation: draw 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 80ms + 250ms) }
.js .feature:hover .ico svg .ln, .js .sec-card:hover .ico svg .ln { animation: redraw .9s var(--ease-out) forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
@keyframes redraw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
.feature:hover .ico, .sec-card:hover .ico { scale: 1.08; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 24px -4px color-mix(in srgb, var(--glow, var(--c-primary)) 70%, transparent) }
.feature h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .5rem }
.feature p { font-size: .93rem; color: var(--tx-mute); margin: 0; transition: color .3s ease }
.feature:hover p, .sec-card:hover p { color: var(--tx-body) }

/* 12 kart w 3 kolumnach: 3 karty szerokie (w wierszach 2–4, naprzemiennie z prawej i lewej) domykają 5 wierszy bez dziur —
   zmiana kolejności kart albo liczby kart szerokich wymaga ponownego ułożenia */
.feature-viz { margin-top: 1.5rem }
@media (min-width: 1025px) {
  .feature--wide {
    grid-column: span 2;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-rows: auto auto 1fr;
    column-gap: 2rem;
  }
  .feature--wide > :not(.feature-viz) { grid-column: 1 }
  .feature-viz { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0 }
}

/* Harmonogram 7 × 24: bloki w kolorach kanałów, po godzinach tygodnia przesuwa się wskaźnik „teraz” */
.viz-schedule {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px;
  padding: .85rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(5, 7, 14, .6);
}
.viz-schedule i { aspect-ratio: 1; border-radius: 2px; background: rgba(148, 163, 184, .13) }
.viz-schedule i.a { background: var(--ch-orange); box-shadow: 0 0 8px rgba(255, 122, 26, .5) }
.viz-schedule i.b { background: var(--ch-blue); box-shadow: 0 0 8px rgba(59, 130, 255, .5) }
.viz-schedule i.c { background: var(--ch-red); box-shadow: 0 0 8px rgba(255, 45, 85, .45) }
.viz-schedule::after {
  content: ''; position: absolute; top: .45rem; bottom: .45rem; left: .85rem;
  width: 2px; border-radius: 2px;
  background: #fff; box-shadow: 0 0 12px 2px rgba(255, 255, 255, .7);
  animation: schedule-now 14s linear infinite;
}
@keyframes schedule-now { to { left: calc(100% - .85rem) } }

/* Pole dynamiczne: żądanie API biegnie przewodem do ekranu, wartość się zmienia */
.viz-api { position: relative; display: grid; gap: 1.5rem }
.viz-api code {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(5, 7, 14, .7); color: var(--tx-body);
  font-family: var(--font-mono); font-size: .72rem;
}
.viz-api code em { font-style: normal; color: var(--c-primary-soft) }
.viz-api::before { content: ''; position: absolute; left: 1.6rem; top: 2.45rem; width: 1px; height: 1.5rem; background: repeating-linear-gradient(180deg, var(--line-strong) 0 3px, transparent 3px 6px) }
.viz-api::after { content: ''; position: absolute; left: calc(1.6rem - 2.5px); top: 2.45rem; width: 6px; height: 6px; border-radius: 50%; background: var(--ch-blue); box-shadow: 0 0 10px 2px var(--ch-blue); animation: wire 3.2s var(--ease-out) infinite }
@keyframes wire { 0%, 55% { translate: 0 0; opacity: 0 } 65% { opacity: 1 } 95%, 100% { translate: 0 1.3rem; opacity: 0 } }
.viz-api-screen {
  display: grid; gap: .1rem;
  padding: 1rem 1.15rem; border: 1px solid rgba(59, 130, 255, .55); border-radius: 13px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(30, 58, 138, .75));
  box-shadow: 0 0 0 3px rgba(59, 130, 255, .08), 0 0 34px -6px rgba(59, 130, 255, .6);
}
.viz-api-screen span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #a8c8ff }
.viz-api-screen b { font-family: var(--font-head); font-size: 2.1rem; font-weight: 600; line-height: 1.1; color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.viz-api-screen b.tick { animation: tick .6s var(--ease-out) }
.viz-api-screen small { font-size: .74rem; color: #a8c8ff }
@keyframes tick { from { opacity: 0; translate: 0 .5em; filter: blur(4px); color: #86f0c0 } }

/* Pulpit: pierścień i słupki rosnące przy wejściu w widok */
.viz-dash { display: flex; align-items: center; gap: 1.5rem; padding: .3rem 0 }
.viz-donut {
  flex: none; width: 104px; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--ch-orange) 0 46%, var(--ch-blue) 46% 74%, var(--ch-red) 74% 89%, rgba(148, 163, 184, .22) 89%);
  -webkit-mask: radial-gradient(closest-side, transparent 63%, #000 65%); mask: radial-gradient(closest-side, transparent 63%, #000 65%);
  filter: drop-shadow(0 0 14px rgba(249, 115, 22, .4));
}
.viz-dash.is-armed .viz-donut { rotate: -110deg; scale: .7; opacity: 0; transition: rotate 1.3s var(--ease-out) .25s, scale 1.3s var(--ease-out) .25s, opacity .6s ease .25s }
.in .viz-dash.is-armed .viz-donut { rotate: 0deg; scale: 1; opacity: 1 }
.viz-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 104px; padding-bottom: 1px; border-bottom: 1px solid var(--line) }
.viz-bars i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(148, 163, 184, .5), rgba(148, 163, 184, .14)); height: calc(var(--h) * 1%); transform-origin: 50% 100% }
.viz-bars i:nth-child(1) { --h: 38 } .viz-bars i:nth-child(2) { --h: 56 } .viz-bars i:nth-child(3) { --h: 47 } .viz-bars i:nth-child(4) { --h: 70 }
.viz-bars i:nth-child(5) { --h: 62 } .viz-bars i:nth-child(6) { --h: 84 }
.viz-bars i:nth-child(7) { --h: 100; background: linear-gradient(180deg, var(--c-amber), var(--c-primary)); box-shadow: 0 0 20px -2px rgba(249, 115, 22, .8) }
.viz-dash.is-armed .viz-bars i { scale: 1 0; transition: scale 1s var(--ease-out); transition-delay: calc(.3s + var(--h) * 6ms) }
.in .viz-dash.is-armed .viz-bars i { scale: 1 1 }

/* ============================================================
   Jak to działa — kroki po lewej, okno aplikacji z ilustracją aktywnego kroku po prawej
   ============================================================ */
.steps { counter-reset: step }
.steps::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 50% at 78% 55%, rgba(59, 130, 255, .1), transparent 70%); pointer-events: none }
.steps-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center }
.steps-grid { display: grid; gap: .5rem; position: relative }
.steps-track { display: none }
.step {
  position: relative; overflow: hidden;
  padding: 1.25rem 1.4rem 1.35rem 4.6rem;
  border: 1px solid transparent; border-radius: 18px;
  cursor: pointer;
  transition: background-color .4s ease, border-color .4s ease;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 1.25rem; top: 1.15rem;
  width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--font-mono); font-size: .74rem; color: var(--tx-mute);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, scale .5s var(--ease-back);
}
.step h3 { font-size: 1.18rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .35rem; color: var(--tx-body); transition: color .4s ease }
.step p { font-size: .93rem; color: var(--tx-mute); margin: 0; transition: color .4s ease }
.step:hover { background: rgba(148, 163, 184, .04) }
.step:hover h3 { color: var(--tx) }
.step.is-active { background: var(--surface); border-color: var(--line) }
.step.is-active::before { background: linear-gradient(135deg, #fb923c, var(--c-primary-strong)); border-color: transparent; color: #fff; box-shadow: 0 0 22px -2px rgba(249, 115, 22, .8); scale: 1.06 }
.step.is-active h3 { color: var(--tx) }
.step.is-active p { color: var(--tx-body) }
/* Pasek czasu aktywnego kroku; po zakończeniu js/main.js przechodzi do następnego */
.step::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--c-primary), var(--c-amber)); transform-origin: 0 50%; scale: 0 1 }
.step.is-active.is-timed::after { animation: step-time var(--step-time, 6.5s) linear forwards }
.steps-layout.is-paused .step.is-active::after { animation-play-state: paused }
@keyframes step-time { to { scale: 1 1 } }
.steps-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem) }

.steps-stage { position: relative }
.steps-stage::before { content: ''; position: absolute; inset: 8% 4% -4%; z-index: -1; background: radial-gradient(closest-side, rgba(249, 115, 22, .2), transparent); filter: blur(30px) }
.stage-frame, .demo-panel, .code-panel {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 21, 39, .96), rgba(7, 10, 20, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .95);
  overflow: hidden;
}
.stage-bar, .demo-panel .bar, .code-panel .bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .78rem 1.05rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--tx-mute);
}
.stage-bar i, .demo-panel .bar i, .code-panel .bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(148, 163, 184, .28) }
.stage-bar i:first-child, .demo-panel .bar i:first-child, .code-panel .bar i:first-child { background: #ff5f57 }
.stage-bar i:nth-child(2), .demo-panel .bar i:nth-child(2), .code-panel .bar i:nth-child(2) { background: #febc2e }
.stage-bar i:nth-child(3), .demo-panel .bar i:nth-child(3), .code-panel .bar i:nth-child(3) { background: #28c840 }
.stage-bar span, .demo-panel .bar span { margin-left: .5rem }
.stage-scenes { position: relative; aspect-ratio: 16 / 10.4; background: radial-gradient(rgba(148, 163, 184, .1) 1px, transparent 1.2px) 0 0 / 22px 22px }
.stage-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 7%; opacity: 0; scale: .96; filter: blur(8px); transition: opacity .5s ease, scale .7s var(--ease-out), filter .5s ease; pointer-events: none }
.stage-scene.is-on, .steps-stage:not([data-step]) .stage-scene:first-child { opacity: 1; scale: 1; filter: none }

/* Krok 1: formularz rejestracji i wiadomość z linkiem aktywacyjnym */
.reg { position: relative; width: min(62%, 300px); display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(148, 163, 184, .06) }
.reg-field { display: grid; gap: .35rem }
.reg-field i { width: 34%; height: 5px; border-radius: 3px; background: rgba(148, 163, 184, .3) }
.reg-field b { position: relative; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: rgba(5, 7, 14, .6); overflow: hidden }
.reg-field b::after { content: ''; position: absolute; left: 10px; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(226, 232, 240, .7); width: 0 }
.reg-btn { height: 34px; margin-top: .2rem; border-radius: 999px; background: linear-gradient(135deg, #fb923c, var(--c-primary-strong)); box-shadow: 0 8px 22px -8px rgba(249, 115, 22, .8) }
.reg-mail { position: absolute; right: -24%; top: -16%; display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid rgba(52, 227, 154, .5); border-radius: 22px; background: rgba(9, 28, 24, .9); color: var(--c-ok); box-shadow: 0 0 40px -6px rgba(52, 227, 154, .55); opacity: 0; scale: .4; rotate: -14deg }
.reg-mail svg { width: 34px; height: 34px }
.reg-mail b { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ok); color: #04130e }
.reg-mail b svg { width: 14px; height: 14px }
.is-on .reg-field:nth-child(1) b::after { animation: type-a .7s steps(9) .3s forwards }
.is-on .reg-field:nth-child(2) b::after { animation: type-b .8s steps(11) 1.1s forwards }
.is-on .reg-field:nth-child(3) b::after { animation: type-c .6s steps(7) 2s forwards }
.is-on .reg-btn { animation: press .5s ease 2.8s }
.is-on .reg-mail { animation: pop-in .8s var(--ease-back) 3.2s forwards }
@keyframes type-a { to { width: 46% } }
@keyframes type-b { to { width: 64% } }
@keyframes type-c { to { width: 38% } }
@keyframes press { 50% { scale: .94; filter: brightness(1.25) } }
@keyframes pop-in { to { opacity: 1; scale: 1; rotate: 6deg } }

/* Krok 2: biblioteka slajdów i oś czasu prezentacji */
.lib { width: 100%; display: grid; gap: 1rem }
.lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem }
.lib-grid i { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); opacity: 0; scale: .7; translate: 0 14px }
.lib-grid i:nth-child(1) { background: linear-gradient(135deg, #7c2d12, #ea580c 55%, #fbbf24) }
.lib-grid i:nth-child(2) { background: linear-gradient(135deg, #0f172a, #1e3a8a) }
.lib-grid i:nth-child(3) { background: linear-gradient(135deg, #312e81, #7e22ce 50%, #db2777) }
.lib-grid i:nth-child(4) { background: linear-gradient(135deg, #0f172a, #134e4a) }
.lib-grid i:nth-child(5) { background: linear-gradient(135deg, #052e16, #15803d) }
.lib-grid i:nth-child(6) { background: linear-gradient(135deg, #1e1b4b, #be185d 55%, #f97316) }
.lib-grid i::before { content: ''; position: absolute; left: 12%; top: 22%; width: 46%; height: 12%; border-radius: 3px; background: rgba(255, 255, 255, .85); box-shadow: 0 12px 0 -1px rgba(255, 255, 255, .4), 0 22px 0 -1px rgba(255, 255, 255, .25) }
.lib-grid i:nth-child(2)::after { content: ''; position: absolute; right: 10%; bottom: 14%; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)) }
.lib-grid i:nth-child(3)::after { content: 'AI'; position: absolute; right: 7%; top: 10%; padding: .1rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .25); font: 400 .58rem/1.5 var(--font-mono); color: #fff }
.lib-time { display: flex; gap: 4px; height: 34px; padding: 5px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 7, 14, .6) }
.lib-time b { flex: var(--f, 1); border-radius: 6px; background: rgba(148, 163, 184, .2); scale: 0 1; transform-origin: 0 50% }
.lib-time b:nth-child(1) { --f: 2; background: var(--ch-orange) } .lib-time b:nth-child(2) { --f: 3; background: var(--ch-blue) } .lib-time b:nth-child(3) { --f: 1.4; background: #a855f7 }
.lib-time b:nth-child(4) { --f: 2.4; background: #14b8a6 } .lib-time b:nth-child(5) { --f: 1.8; background: var(--ch-red) }
.is-on .lib-grid i { animation: tile-in .7s var(--ease-back) forwards; animation-delay: calc(var(--n) * 130ms + 200ms) }
.is-on .lib-time b { animation: seg-in .6s var(--ease-out) forwards; animation-delay: calc(var(--n) * 160ms + 1.3s) }
.lib-grid i:nth-child(1), .lib-time b:nth-child(1) { --n: 0 } .lib-grid i:nth-child(2), .lib-time b:nth-child(2) { --n: 1 } .lib-grid i:nth-child(3), .lib-time b:nth-child(3) { --n: 2 }
.lib-grid i:nth-child(4), .lib-time b:nth-child(4) { --n: 3 } .lib-grid i:nth-child(5), .lib-time b:nth-child(5) { --n: 4 } .lib-grid i:nth-child(6) { --n: 5 }
@keyframes tile-in { to { opacity: 1; scale: 1; translate: 0 0 } }
@keyframes seg-in { to { scale: 1 1 } }

/* Krok 3: tygodniowa matryca z blokami prezentacji */
.sch { position: relative; width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% calc(100% / 8), linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 7) 100%, rgba(5, 7, 14, .55) }
.sch b { position: absolute; left: calc(var(--c) * 100% / 7 + 4px); top: calc(var(--r) * 100% / 8 + 4px); width: calc(100% / 7 - 8px); height: calc(var(--s) * 100% / 8 - 8px); border-radius: 7px; background: var(--k); box-shadow: 0 0 18px -4px var(--k); scale: 1 0; transform-origin: 50% 0; opacity: .92 }
.sch b.a { --k: var(--ch-orange) } .sch b.b { --k: var(--ch-blue) } .sch b.c { --k: var(--ch-red) }
.is-on .sch b { animation: block-in .7s var(--ease-out) forwards; animation-delay: calc(var(--c) * 150ms + var(--r) * 60ms + 250ms) }
@keyframes block-in { to { scale: 1 1 } }

/* Krok 4: monitor pokazuje kod, panel go zatwierdza, treść rusza */
.pair { position: relative; width: 100%; display: grid; justify-items: center; gap: 1.1rem }
.pair-tv { position: relative; width: min(74%, 380px); aspect-ratio: 16 / 9; border: 2px solid var(--ch-blue); border-radius: 12px; background: #060914; box-shadow: 0 0 0 4px rgba(59, 130, 255, .1), 0 0 46px -8px rgba(59, 130, 255, .75); overflow: hidden }
.pair-code { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(1.2rem, 2.6vw, 2rem)/1 var(--font-mono); letter-spacing: .14em; color: #fff }
.pair-slide { position: absolute; inset: 0; background: linear-gradient(135deg, #7c2d12, #ea580c 55%, #fbbf24); opacity: 0; scale: 1.15 }
.pair-slide::before { content: ''; position: absolute; left: 10%; top: 28%; width: 52%; height: 13%; border-radius: 5px; background: #fff; box-shadow: 0 30px 0 -4px rgba(255, 255, 255, .55), 0 54px 0 -6px rgba(255, 255, 255, .35) }
.pair-status { position: absolute; left: 50%; top: -1px; translate: -50% -130%; display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; border-radius: 0 0 9px 9px; background: rgba(4, 19, 14, .92); font: 400 .62rem/1.5 var(--font-mono); letter-spacing: .06em; color: #86f0c0 }
.pair-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 8px var(--c-ok) }
.pair-panel { display: inline-flex; align-items: center; gap: .7rem; padding: .5rem .55rem .5rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(148, 163, 184, .08); opacity: 0; translate: 0 14px }
.pair-panel span { font: 400 .8rem/1 var(--font-mono); letter-spacing: .12em; color: var(--tx) }
.pair-panel b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(148, 163, 184, .2); color: #fff }
.pair-panel b svg { width: 15px; height: 15px }
.is-on .pair-panel { animation: tile-in .7s var(--ease-out) .9s forwards }
.is-on .pair-panel b { animation: approve .6s var(--ease-back) 2.1s forwards }
.is-on .pair-code { animation: fade-out .4s ease 2.6s forwards }
.is-on .pair-slide { animation: slide-on .9s var(--ease-out) 2.7s forwards }
.is-on .pair-status { animation: drop-in .6s var(--ease-out) 3.1s forwards }
@keyframes approve { 40% { scale: 1.3 } to { background: var(--c-ok); color: #04130e; box-shadow: 0 0 22px -2px var(--c-ok) } }
@keyframes fade-out { to { opacity: 0; filter: blur(6px) } }
@keyframes slide-on { to { opacity: 1; scale: 1 } }
@keyframes drop-in { to { translate: -50% 0 } }

/* ============================================================
   Wyróżniki (AI / pola dynamiczne) — sekcje naprzemienne
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6rem); align-items: center }
.split > * { min-width: 0 } /* pozwala panelowi z kodem (pre { overflow-x: auto }) zwężać się poniżej szerokości treści zamiast rozpychać stronę */
.split + .split { margin-top: var(--section-y) }
.split-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; margin-bottom: 1rem }
.split-copy p { color: var(--tx-body); font-size: 1.04rem }
.check-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .9rem }
.check-list li { display: flex; gap: .8rem; align-items: flex-start; font-size: .96rem; color: var(--tx-body) }
.check-list svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(249, 115, 22, .16); color: var(--c-primary-soft); flex: none; margin-top: .1rem }

/* Panele pochylają się lekko za kursorem (--rx/--ry z js/main.js) */
.split-visual { position: relative; perspective: 1200px }
.split-visual::before { content: ''; position: absolute; inset: 6% 2% -6%; z-index: -1; filter: blur(46px); background: radial-gradient(closest-side at 30% 40%, rgba(255, 45, 85, .26), transparent), radial-gradient(closest-side at 72% 62%, rgba(249, 115, 22, .3), transparent) }
.split:nth-of-type(2) .split-visual::before { background: radial-gradient(closest-side at 32% 44%, rgba(59, 130, 255, .32), transparent), radial-gradient(closest-side at 74% 66%, rgba(52, 227, 154, .16), transparent) }
.demo-panel, .code-panel { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out) }
.is-tilting > .demo-panel, .is-tilting > .code-panel { transition: transform .12s linear }

/* Panel AI: opis wpisuje się sam, slajd „wywołuje się” spod skanera (stany .is-typing / .is-generating / .is-done z js/main.js) */
.demo-body { padding: 1.4rem }
.prompt-box { min-height: 6.3em; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 7, 14, .6); font-size: .94rem; color: var(--tx) }
.prompt-box .lbl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-mute); margin-bottom: .45rem }
.prompt-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: var(--c-primary); vertical-align: text-bottom; animation: blink 1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
.gen-result {
  position: relative; overflow: hidden;
  margin-top: 1.1rem; aspect-ratio: 16 / 7.4; border-radius: 13px;
  display: flex; flex-direction: column; justify-content: center; padding: 1.5rem;
  background: linear-gradient(135deg, #7c2d12, #ea580c 55%, #fbbf24 130%);
  color: #fff;
  transition: clip-path .9s var(--ease-out), filter .9s ease;
}
.gen-result b { font-family: var(--font-head); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -.01em }
.gen-result > span:not(.gen-badge) { font-size: .82rem; opacity: .88 }
.gen-badge { position: absolute; top: .9rem; right: .9rem; padding: .22rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .24); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em }
.gen-result::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .4) 50%, transparent 60%); translate: -100% 0 }
.demo-panel.is-done .gen-result::after { animation: shine 1.3s var(--ease-out) .25s }
@keyframes shine { to { translate: 100% 0 } }
.demo-panel.is-typing .gen-result, .demo-panel.is-generating .gen-result { clip-path: inset(0 100% 0 0); filter: saturate(0) brightness(.6) }
.demo-panel.is-done .gen-result { clip-path: inset(0 0 0 0) }
/* Skaner generowania: pole z przesuwającą się smugą pod opisem */
.demo-body { position: relative }
.demo-body::after {
  content: ''; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.4rem; aspect-ratio: 16 / 7.4; border-radius: 13px;
  border: 1px dashed var(--line-strong);
  background: linear-gradient(100deg, transparent 30%, rgba(249, 115, 22, .28) 50%, transparent 70%) 0 0 / 220% 100%, rgba(148, 163, 184, .05);
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.demo-panel.is-typing .demo-body::after { opacity: .45 }
.demo-panel.is-generating .demo-body::after { opacity: 1; animation: scan 1.1s linear infinite }
@keyframes scan { from { background-position: 120% 0, 0 0 } to { background-position: -120% 0, 0 0 } }

/* Panel API */
.code-panel pre { margin: 0; padding: 1.3rem 1.4rem; overflow-x: auto; font-family: var(--font-mono); font-size: .8rem; line-height: 1.75; color: #cbd5e1 }
.tok-m { color: var(--c-primary-soft) } /* metoda */
.tok-s { color: #86f0c0 } /* string */
.tok-k { color: #93c5fd } /* klucz */
.tok-c { color: var(--tx-mute) } /* komentarz */
.code-foot { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.05rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--tx-mute) }
.code-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 10px var(--c-ok); animation: req 4s ease-in-out infinite }
.code-foot b { font-weight: 400; color: #86f0c0 }
.code-foot span { margin-left: auto }
.code-foot::after { content: ''; flex: none; width: 54px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c-ok), transparent) 0 0 / 200% 100%; animation: req-bar 4s ease-in-out infinite }
@keyframes req { 0%, 40%, 100% { opacity: 1 } 46% { opacity: .2; scale: 1.6 } 52% { opacity: 1; scale: 1 } }
@keyframes req-bar { 0%, 40% { background-position: 200% 0 } 60%, 100% { background-position: -100% 0 } }

/* ============================================================
   Bezpieczeństwo — przyklejony nagłówek po lewej, karty po prawej
   ============================================================ */
.security { overflow: clip; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(59, 130, 255, .06), transparent 40%, rgba(59, 130, 255, .05)) }
.security > .container { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start }
.security .section-head, .faq .section-head { display: block; margin: 0; position: sticky; top: calc(var(--nav-h) + var(--nav-top) + 2.5rem) }
.security .section-head h2, .faq .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 1.05rem }
.security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem }
.sec-card { --glow: var(--ch-blue); padding: 1.6rem 1.5rem 1.7rem }
.sec-card .ico { background: linear-gradient(180deg, rgba(59, 130, 255, .24), rgba(59, 130, 255, .07)); border-color: rgba(59, 130, 255, .4); color: #a8c8ff }
.sec-card h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; margin-bottom: .45rem }
.sec-card p { font-size: .9rem; margin: 0; color: var(--tx-mute); transition: color .3s ease }
/* Radar w tle sekcji: pierścienie i obiegająca je wiązka */
.sec-radar { position: absolute; left: max(-190px, calc((100% - var(--container)) / 2 - 260px)); bottom: -210px; width: 560px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .75;
  background: repeating-radial-gradient(circle, transparent 0 46px, rgba(59, 130, 255, .2) 46px 47px);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent) }
.sec-radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(59, 130, 255, .42)); animation: spin 7s linear infinite }
@keyframes spin { to { rotate: 1turn } }

/* ============================================================
   Cennik
   ============================================================ */
.pricing::before { content: ''; position: absolute; inset: 10% 0 auto; height: 60%; z-index: -1; background: radial-gradient(40% 60% at 50% 40%, rgba(249, 115, 22, .13), transparent 70%); pointer-events: none }
.pricing .section-head, .cta-box { display: block; max-width: 780px; margin-inline: auto; text-align: center }
.pricing .section-head .kicker { justify-self: auto }
.pricing .section-head h2 { margin-bottom: 1.05rem }
.period-switch-wrap { text-align: center }

/* Przełącznik waluty: PLN (oficjalny cennik) ↔ EUR (poglądowo) */
.currency-switch {
  display: flex; align-items: center; gap: .65rem;
  width: fit-content; margin: 0 auto 1.3rem; padding: .42rem .95rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; color: var(--tx-mute);
}
.currency-switch .cur { transition: color .25s ease }
.currency-switch[aria-checked="false"] .cur-pln, .currency-switch[aria-checked="true"] .cur-eur { color: var(--tx) }
.currency-track { position: relative; width: 2.3rem; height: 1.25rem; border-radius: 999px; background: rgba(148, 163, 184, .25); transition: background-color .3s ease }
.currency-switch[aria-checked="true"] .currency-track { background: var(--c-primary) }
.currency-thumb { position: absolute; top: .16rem; left: .16rem; width: .93rem; height: .93rem; border-radius: 50%; background: #fff; transition: transform .4s var(--ease-back) }
.currency-switch[aria-checked="true"] .currency-thumb { transform: translateX(1.05rem) }
.eur-note { max-width: 580px; margin: -.5rem auto 1.4rem; font-size: .78rem; line-height: 1.55; color: var(--tx-mute) }

.period-switch { position: relative; display: inline-flex; gap: .2rem; padding: .3rem; margin-bottom: clamp(2.6rem, 5vw, 3.6rem); border: 1px solid var(--line); border-radius: 999px; background: var(--surface) }
.period-btn { position: relative; padding: .6rem 1.2rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--tx-mute); transition: color .25s ease, background-color .25s ease }
.period-btn:hover { color: var(--tx) }
.period-btn.active { background: #fff; color: #0b1020 }
/* Wskaźnik aktywnego okresu przesuwa się między przyciskami (pozycję ustawia js/main.js); bez JS zostaje tło przycisku */
.period-indicator { position: absolute; left: 0; top: 0; border-radius: 999px; background: #fff; box-shadow: 0 6px 20px -6px rgba(255, 255, 255, .5); opacity: 0; pointer-events: none }
.period-switch.is-ready .period-indicator { transition: transform .5s var(--ease-back), width .5s var(--ease-back), height .35s ease }
.period-switch.has-indicator .period-indicator { opacity: 1 }
.period-switch.has-indicator .period-btn.active { background: transparent }
.period-switch.has-indicator .period-btn { z-index: 1 }
/* Skrót nazwy okresu zastępuje pełne słowo na wąskich ekranach; pełne zostaje dla czytników ekranu */
.period-btn .short { display: none }
.period-btn .off { position: absolute; top: -11px; right: -4px; padding: .1rem .42rem; border-radius: 999px; background: var(--c-primary); color: #fff; font-family: var(--font-mono); font-size: .6rem; font-weight: 400; box-shadow: 0 0 14px -2px rgba(249, 115, 22, .9) }

/* Aktywne promocje (Proces 56) — lista wypełniana dynamicznie z GET /api/plans/public */
.promos { position: relative; max-width: 720px; margin: 0 auto 2.4rem; padding: 1.2rem 1.5rem; border: 1px solid rgba(251, 191, 36, .4); border-radius: var(--radius); background: linear-gradient(120deg, rgba(251, 191, 36, .13), rgba(249, 115, 22, .05)); box-shadow: 0 0 50px -18px rgba(251, 191, 36, .6) }
.promos-title { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: var(--c-amber); margin: 0 0 .9rem }
.promos-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem }
.promo-item { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .65rem; font-size: .93rem; color: var(--tx-body) }
.promo-item .promo-plan { font-family: var(--font-head); font-weight: 700; letter-spacing: .03em; color: var(--tx) }
.promo-item .promo-sep { color: var(--tx-mute) }
.promo-badge { padding: .16rem .55rem; border-radius: 999px; background: var(--c-primary); color: #fff; font-family: var(--font-mono); font-size: .72rem }
.promo-status { font-size: .82rem; color: var(--tx-mute); font-variant-numeric: tabular-nums }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch }
.plan { display: flex; flex-direction: column; padding: 2rem 1.8rem 2.1rem; border-radius: var(--radius-lg) }
.plan-featured { --glow: var(--c-amber); background: linear-gradient(180deg, rgba(249, 115, 22, .16), rgba(249, 115, 22, .03) 55%), linear-gradient(180deg, rgba(148, 163, 184, .075), rgba(148, 163, 184, .025)); border-color: rgba(249, 115, 22, .45); box-shadow: 0 40px 90px -40px rgba(249, 115, 22, .65) }
/* Obiegający blask obramowania karty wyróżnionej */
.plan-beam { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 62%, var(--c-amber) 80%, #fff 86%, var(--c-primary) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 5s linear infinite }
@keyframes beam { to { --beam: 360deg } }
.plan-flag { position: absolute; top: -13px; left: 50%; translate: -50% 0; padding: .3rem .9rem; border-radius: 999px; background: linear-gradient(135deg, #fb923c, var(--c-primary-strong)); color: #fff; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 22px -6px rgba(249, 115, 22, .9) }
.plan-name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; color: var(--tx) }
.plan-featured .plan-name { color: var(--c-primary-soft) }
.plan-desc { font-size: .9rem; color: var(--tx-mute); margin: .4rem 0 1.5rem; min-height: 2.9em }
.plan-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap }
.plan-price b { font-family: var(--font-head); font-size: clamp(2.3rem, 3.6vw, 3.1rem); font-weight: 600; line-height: 1; color: var(--tx); letter-spacing: -.04em; font-variant-numeric: tabular-nums }
.plan-price b.is-changing { animation: price-pop .5s var(--ease-out) }
@keyframes price-pop { from { opacity: .3; translate: 0 .28em; filter: blur(5px) } }
.plan-price span { font-size: .86rem; color: var(--tx-mute) }
.plan-total { font-size: .82rem; color: var(--tx-mute); margin-top: .55rem; min-height: 1.4em; font-variant-numeric: tabular-nums }
.plan-total .save { color: var(--c-ok); font-weight: 600 }
.plan .btn { margin-block: 1.6rem 1.7rem; width: 100% }
.plan-limits { list-style: none; padding: 1.5rem 0 0; margin: 0; display: grid; gap: .7rem; font-size: .9rem; border-top: 1px solid var(--line) }
.plan-limits li { display: flex; gap: .65rem; align-items: flex-start; color: var(--tx-body) }
.plan-limits li b { color: var(--tx); font-weight: 600 }
.plan-limits svg { width: 17px; height: 17px; color: var(--c-primary-soft); flex: none; margin-top: .22rem }
.plan-limits .na { color: var(--tx-mute) }
.plan-limits .na svg { color: rgba(148, 163, 184, .45) }
.pricing-note { max-width: 760px; margin: 2.4rem auto 0; text-align: center; font-size: .84rem; color: var(--tx-mute) }
.pricing-note a { color: var(--c-primary-soft); text-decoration: underline; text-underline-offset: .2em }

/* Tabela porównawcza */
.compare { margin-top: clamp(2.5rem, 5vw, 4rem) }
.compare summary {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  width: fit-content; margin-inline: auto; padding: .75rem 1.3rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  cursor: pointer; list-style: none; font-weight: 600; font-size: .92rem; color: var(--tx);
  transition: background-color .3s ease, border-color .3s ease;
}
.compare summary:hover { background: var(--surface-2); border-color: rgba(226, 232, 240, .5) }
.compare summary::-webkit-details-marker { display: none }
.compare summary::after { content: ''; width: 9px; height: 9px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: rotate .4s var(--ease-out), margin .4s var(--ease-out) }
.compare[open] summary::after { rotate: 225deg; margin-top: 4px }
.compare-scroll { overflow-x: auto; margin-top: 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(148, 163, 184, .04) }
.compare table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 640px; font-variant-numeric: tabular-nums }
.compare th, .compare td { padding: .85rem 1.15rem; text-align: center; border-bottom: 1px solid var(--line); color: var(--tx-body) }
.compare th { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; font-size: .82rem; color: var(--tx); background: rgba(148, 163, 184, .06) }
.compare td:first-child, .compare th:first-child { text-align: left; color: var(--tx-body) }
.compare tbody tr { transition: background-color .2s ease }
.compare tbody tr:hover { background: rgba(148, 163, 184, .05) }
.compare tr:last-child td { border-bottom: 0 }
.compare .hl { background: rgba(249, 115, 22, .09); color: var(--tx) }
.compare th.hl { color: var(--c-primary-soft) }

/* ============================================================
   FAQ — nagłówek po lewej, akordeon po prawej
   ============================================================ */
.faq > .container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start }
.faq-list { display: grid; border-top: 1px solid var(--line) }
.faq-item { border-bottom: 1px solid var(--line); transition: background-color .4s ease }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.45rem .3rem;
  font-family: var(--font-head); font-size: clamp(1.05rem, 1.7vw, 1.28rem); font-weight: 600; letter-spacing: -.01em; color: var(--tx);
  transition: color .3s ease, padding .5s var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary:hover { color: var(--c-primary-soft) }
.faq-item summary .chev { flex: none; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--tx-body); transition: rotate .5s var(--ease-out), background-color .3s ease, color .3s ease, border-color .3s ease }
.faq-item[open] summary .chev { rotate: 180deg; background: var(--c-primary); border-color: transparent; color: #fff; box-shadow: 0 0 20px -4px rgba(249, 115, 22, .9) }
.faq-item[open] summary { padding-bottom: .9rem }
.faq-item .faq-a { max-width: 62ch; padding: 0 .3rem 1.6rem; font-size: .96rem; color: var(--tx-body) }
.faq-item .faq-a p:last-child { margin: 0 }
.faq-item .faq-a a { color: var(--c-primary-soft); text-decoration: underline; text-underline-offset: .2em }
/* Płynne rozwijanie odpowiedzi tam, gdzie przeglądarka potrafi animować wysokość do `auto`; w pozostałych odpowiedź pojawia się od razu */
@supports (interpolate-size: allow-keywords) {
  .faq-item, .compare { interpolate-size: allow-keywords }
  .faq-item::details-content, .compare::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .55s var(--ease-out), opacity .45s ease, content-visibility .55s allow-discrete }
  .faq-item[open]::details-content, .compare[open]::details-content { block-size: auto; opacity: 1 }
}

/* ============================================================
   CTA końcowe — fale nadawcze
   ============================================================ */
.cta-final { padding-block: clamp(2rem, 5vw, 4rem) var(--section-y) }
.cta-box {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: calc(var(--container) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter));
  padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  border: 1px solid rgba(249, 115, 22, .3); border-radius: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(70% 90% at 50% 115%, rgba(249, 115, 22, .5), transparent 70%),
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(251, 191, 36, .12), transparent 70%),
    linear-gradient(180deg, #0c1122, #070a15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 60px 120px -60px rgba(249, 115, 22, .6);
}
.cta-waves { position: absolute; left: 50%; bottom: 0; z-index: -1; width: 1px; height: 1px; pointer-events: none }
.cta-waves i { position: absolute; left: 50%; top: 50%; width: 220px; aspect-ratio: 1; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid rgba(251, 191, 36, .5); opacity: 0; animation: wave 6s linear infinite; animation-delay: calc(var(--n) * -1.5s) }
.cta-waves i:nth-child(1) { --n: 0 } .cta-waves i:nth-child(2) { --n: 1 } .cta-waves i:nth-child(3) { --n: 2 } .cta-waves i:nth-child(4) { --n: 3 }
@keyframes wave { from { scale: .2; opacity: .9 } to { scale: 6.5; opacity: 0 } }
.cta-box h2 { font-size: clamp(2.2rem, 5.6vw, 4.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; margin-bottom: 1.15rem; padding-bottom: .12em; background: linear-gradient(180deg, #fff 35%, #ffd6ae); -webkit-background-clip: text; background-clip: text; color: transparent }
.cta-box > p { max-width: 560px; margin-inline: auto; color: var(--tx-body); font-size: 1.1rem }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem }
.cta-box > .cta-note { margin: 1.6rem auto 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: #c9b9a8 }

/* ============================================================
   Stopka
   ============================================================ */
.footer { position: relative; overflow: clip; border-top: 1px solid var(--line); padding: clamp(3.5rem, 7vw, 5rem) 0 0; font-size: .9rem; color: var(--tx-mute) }
/* Kolumna kontaktu ma szerokość treści — przy równym podziale adres support@… wylewał się poza kolumnę */
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto; gap: 2.5rem; margin-bottom: 3rem }
.footer .brand { margin-bottom: 1.1rem }
.footer-about { max-width: 300px }
.footer h2 { font-family: var(--font-mono); font-size: .7rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-body); margin-bottom: 1.2rem }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem }
.footer li a, .footer address a { color: var(--tx-body); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s ease, background-size .45s var(--ease-out) }
.footer li a:hover, .footer address a:hover { color: #fff; background-size: 100% 1px }
.footer-bottom a { color: var(--tx-body); text-decoration: underline; text-underline-offset: .2em }
.footer-bottom a:hover { color: #fff }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 1.6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: .82rem }
.footer address { font-style: normal }
.footer-label { display: block; font-size: .76rem; margin-bottom: .1rem }
.footer address a { overflow-wrap: anywhere }
/* Znak słowny wielkości strony — sama dekoracja, zanika ku dołowi */
.footer-mark {
  margin-top: .5rem; overflow: hidden;
  font-family: var(--font-head); font-size: min(10.4vw, 11.5rem); font-weight: 700; letter-spacing: -.01em; line-height: .8; text-align: center; white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(249, 115, 22, .5), rgba(249, 115, 22, .04) 85%); -webkit-background-clip: text; background-clip: text;
  user-select: none; pointer-events: none;
  translate: 0 12%;
}

/* ============================================================
   Responsywność
   ============================================================ */
@media (max-width: 1140px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr) auto }
  .footer-about { grid-column: 1 / -1; max-width: 520px }
}
@media (max-width: 1080px) {
  .nav-links, .nav-login { display: none }
  .nav-cta { margin-left: auto }
  .nav-burger { display: block }
  .nav.open .nav-mobile { display: block }
}
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .feature--wide { grid-column: 1 / -1 }
  .security > .container, .faq > .container { grid-template-columns: 1fr }
  .security .section-head, .faq .section-head { position: static; max-width: 640px }
  .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto }
  .plan-desc { min-height: 0 }
}
@media (max-width: 899.98px) {
  .section-head { grid-template-columns: 1fr; row-gap: 1.2rem }
  .section-head h2, .section-head p { grid-column: 1 }
  .hero { --hero-text-w: 100%; display: block; min-height: 0; padding-bottom: 7rem }
  .hero::before { inset: 20% -20% 0 -20% }
  .hero-grid { padding-inline: var(--gutter); grid-template-columns: minmax(0, 40rem) }
  /* Scena w toku treści: gaśnięcie z --exit zasłaniałoby ją, zanim dojedzie do środka ekranu */
  .hero-visual { position: relative; width: min(100%, 620px); aspect-ratio: 4 / 3; margin: 2.2rem auto 0; opacity: 1; transform: none }
  .hero-poster { object-position: 50% 50% }
  .hero-hint { bottom: 2%; left: 50% }
  .steps-layout, .split { grid-template-columns: 1fr }
  .steps-stage { order: -1 }
  .split:nth-of-type(2) .split-visual { order: 2 }
  .footer-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr }
  .stat:nth-child(3) { border-left: 0 }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line) }
  .features-grid, .security-grid { grid-template-columns: 1fr }
  .nav-cta .btn-primary { display: none }
  .brand { font-size: 1rem }
  .hero-actions .btn { flex: 1 1 100% }
  .period-switch { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; width: 100% }
  .period-btn .off { position: static; margin-left: .4rem; box-shadow: none }
  .step { padding-left: 4.1rem }
  .stage-scenes { aspect-ratio: 5 / 4.3 }
  .reg { gap: .5rem; padding: .9rem }
  .reg-field b { height: 24px }
  .reg-btn { height: 28px }
  .reg-mail { width: 60px; height: 60px; right: -20%; border-radius: 18px }
  .reg-mail svg { width: 28px; height: 28px }
  .viz-dash { gap: 1rem }
  .viz-donut { width: 84px }
  .viz-bars { height: 84px }
  .footer-grid { grid-template-columns: 1fr }
  .cta-actions .btn { flex: 1 1 100% }
}

@media (max-width: 420px) {
  .period-btn .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
  .period-btn .short { display: inline }
  .period-btn { padding-inline: .6rem }
  .nav-inner { gap: .6rem; padding-inline: .7rem .45rem }
  .brand { gap: .5rem; font-size: .9rem; letter-spacing: .02em }
  .brand img { width: 30px; height: 30px }
  .nav-cta { gap: .45rem }
}

/* ---------- Ograniczenie ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important }
  .js .reveal { opacity: 1 }
  .hero-copy, .hero-visual { opacity: 1; transform: none }
  .hero h1 .w > span { transform: none }
  .js .ico svg .ln { stroke-dashoffset: 0 }
  .cta-waves i { opacity: .25; scale: calc(1 + var(--n) * 1.4) }
  .viz-schedule::after, .viz-api::after, .hero-hint { display: none }
  .stage-scene * { animation: none !important }
  .reg-field b::after { width: 50% }
  .reg-mail, .lib-grid i, .pair-panel, .pair-slide { opacity: 1; scale: 1; translate: 0 0 }
  .lib-time b, .sch b { scale: 1 1 }
  .pair-code { opacity: 0 }
  .pair-status { translate: -50% 0 }
}