/* =====================================================================
   Strona główna: hero (wariant A — wideo, wariant B — animacja WebGL) + zastosowania + opinie
   ===================================================================== */

/* ---------- HERO ---------- */
.hero {
  --hp: 0;                                   /* postęp przewinięcia hero 0..1 (ustawia skrypt) */
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: #04060a;
}
.hero__media {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  transform: translate3d(0, calc(var(--hp) * 12vh), 0) scale(calc(1 + var(--hp) * .06));   /* w spoczynku: bez skalowania (tańsza kompozycja wideo) */
  transform-origin: 60% 40%;
  opacity: calc(1 - var(--hp) * .55);
}
.hero__poster img, .hero__video, .hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.hero__poster img { object-position: 62% 50%; }
.hero__video { object-position: 62% 50%; opacity: 0; transition: opacity 1.4s ease; }
/* Znak „DEMO · …” jest wtopiony w kadr 16:9 przy prawej krawędzi (koniec na 1824 z 1920 px, wysokość 1080). Na ekranach
   węższych niż ~16:10 (tablet w poziomie, 1024×768) przy 62% wypadał za prawą krawędź. Kadr przesuwa się wtedy w lewo
   dokładnie o tyle, żeby koniec znaku stał 20 px od brzegu: 1824/1080 × wysokość = 168.89cqh. Na szerszych ekranach
   wygrywa 62% (1440×900: różnica ok. 1 px). Przeglądarka bez jednostek cq zostaje przy 62% z reguł wyżej. */
.hero__media { container-type: size; }
.hero__poster img, .hero__video { object-position: min(62%, 100cqw - 20px - 168.89cqh) 50%; }
.hero__video.is-playing { opacity: 1; }
.hero__media.is-video .hero__poster { visibility: hidden; }   /* plakat pod grającym wideo nie jest już potrzebny */
.hero__canvas { opacity: 0; transition: opacity 1.6s ease; }
.hero__canvas.is-on { opacity: 1; }

/* Wariant B: tło zastępcze (bez WebGL / zanim ruszy animacja) — pole światła w CSS */
:root[data-variant="b"] .hero__poster { display: none; }
:root[data-variant="b"] .hero__media {
  background:
    radial-gradient(34% 22% at 72% 35%, rgba(255, 196, 120, .14), transparent 70%),
    radial-gradient(70% 34% at 68% 35%, rgba(70, 120, 200, .2), transparent 70%),
    linear-gradient(90deg, transparent 69.85%, rgba(255, 214, 160, .3) 70%, transparent 70.15%) no-repeat 0 0 / 100% 100%,
    #04060a;
}
.hero__canvas { display: none; }
:root[data-variant="b"] .hero__canvas { display: block; }
:root[data-variant="b"] .hero__video { display: none; }          /* po przełączeniu B → A wideo wraca w tym samym miejscu */
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }   /* zostaje plakat */

/* Warstwy filmowe: osłona pod tekstem, winieta, ziarno */
.hero__fx { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero__fx::before {          /* osłona — gwarantuje kontrast tekstu niezależnie od tła */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(52% 46% at 30% 50%, rgba(4, 6, 10, .5), rgba(4, 6, 10, 0) 75%),   /* dodatkowo za hasłem na środku */
    linear-gradient(90deg, rgba(4, 6, 10, .9) 0%, rgba(4, 6, 10, .84) 38%, rgba(4, 6, 10, .64) 60%, rgba(4, 6, 10, .3) 72%, rgba(4, 6, 10, .1) 80%, rgba(4, 6, 10, 0) 90%),
    linear-gradient(0deg, var(--c-bg) 0%, rgba(5, 7, 11, .55) 16%, rgba(5, 7, 11, 0) 38%),
    linear-gradient(180deg, rgba(4, 6, 10, .55) 0%, rgba(4, 6, 10, 0) 18%);
}
.hero__fx::after {           /* winieta kinowa */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 100% at 62% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.hero__grain {
  position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  background-image: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
  will-change: transform;
}
.hero.is-off .hero__grain, .hero.is-off .hero__scroll-line::after { animation-play-state: paused; }
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-4%, 3%, 0); } 33% { transform: translate3d(3%, -5%, 0); }
  50% { transform: translate3d(-6%, -2%, 0); } 67% { transform: translate3d(5%, 4%, 0); } 83% { transform: translate3d(-2%, 6%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Pasek górny */
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: clamp(1.25rem, 3.2vw, 2.25rem); }
/* Przełącznik języka zaraz za imieniem, nie przy prawej krawędzi: tam wideo ma wtopiony znak „DEMO · dane przykładowe”.
   Ujemny margines: pole dotyku 44 px nie podnosi paska (od jego wysokości liczy się środek hasła). */
.hero__bar .lang { margin: -.8rem auto -.8rem 0; }
.hero__bar .lang::before { content: ""; width: 1px; height: 1rem; margin-right: .5rem; background: var(--c-line-2); }
.brand {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
  font: 600 1rem/1 var(--f-text); letter-spacing: -.01em; color: var(--c-text);
}
.brand__mark { position: relative; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid rgba(255, 211, 148, .55); }
.brand__mark::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); }

/* Treść hero */
/* Hasło na środku ekranu w pionie, wyrównane do lewej. Dolny margines = wysokość paska z imieniem,
   więc środek liczy się względem całego pierwszego ekranu, a nie tylko miejsca pod paskiem. */
.hero__body {
  align-self: center; margin-bottom: calc(clamp(1.25rem, 3.2vw, 2.25rem) + 1.15rem);
  padding-block: clamp(2rem, 6vh, 3.5rem);
  transform: translate3d(0, calc(var(--hp) * -6vh), 0);
}
.hero__title {
  max-width: 21em;                                   /* 3 linie na komputerze, do ~5 na telefonie */
  font: 300 var(--fs-hero)/1.12 var(--f-display); letter-spacing: -.02em;
  color: #f3f5f9; text-wrap: balance; font-kerning: normal;
  text-shadow: 0 2px 30px rgba(4, 6, 10, .55);
}
.hero__title em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.005em;
  font-size: 1.13em; line-height: 0; padding-right: .04em;
  color: var(--c-accent-2);
  background: linear-gradient(100deg, #ffe2b3 0%, #f6c27a 38%, #e99a3c 62%, #ffd9a0 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: sheen 2.4s 1.25s var(--ease-out) both;
  filter: drop-shadow(0 0 .14em rgba(4, 6, 10, .8));   /* ciemna poświata: czytelność akcentu niezależnie od tła */
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Wejście nagłówka: słowa wysuwają się spod maski (sam CSS — działa też bez JS) */
.hero__title .w { display: inline-block; overflow: clip; overflow-clip-margin: .02em; padding: .12em .03em .2em; margin: -.12em -.03em -.2em; vertical-align: top; }
.hero__title .w > span { display: inline-block; transform: translate3d(0, 112%, 0) rotate(2deg); transform-origin: 0 100%; animation: rise 1.15s var(--ease-out) forwards; animation-delay: calc(.12s + var(--i, 0) * 38ms); }
@keyframes rise { to { transform: none; } }

/* Podtytuł pod hasłem: mniejszy, wyszarzony; ciemna poświata trzyma czytelność na ruchomym tle */
.hero__lead {
  margin-top: clamp(1rem, 2.4vh, 1.5rem); max-width: 34em;
  font: 400 clamp(.9375rem, .85rem + .35vw, 1.125rem)/1.55 var(--f-text); color: #a7b0bf;
  text-shadow: 0 1px 18px rgba(4, 6, 10, .85);
  opacity: 0; animation: fade-up .9s .75s var(--ease-out) forwards;
}
.hero__cta { margin-top: clamp(2rem, 4.5vh, 3rem); opacity: 0; animation: fade-up .9s .95s var(--ease-out) forwards; }
@keyframes fade-up { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* Wskaźnik przewijania */
.hero__scroll {
  position: absolute; right: var(--pad); bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: inline-flex; align-items: center; gap: .8rem; padding: .5rem 0;
  font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); text-decoration: none;
  opacity: 0; animation: fade-up 1s 1.4s var(--ease-out) forwards;
}
.hero__scroll:hover { color: var(--c-text); }
.hero__scroll-line { position: relative; width: 1px; height: 2.75rem; overflow: hidden; background: rgba(255, 255, 255, .14); }
.hero__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--c-accent-2); animation: scrollcue 2.2s 2s var(--ease-out) infinite; transform: translateY(-100%); }
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(230%); } }

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hero__fx::before {
    background:
      linear-gradient(0deg, var(--c-bg) 0%, rgba(5, 7, 11, .92) 30%, rgba(5, 7, 11, .55) 50%, rgba(5, 7, 11, 0) 68%),
      linear-gradient(180deg, rgba(4, 6, 10, .6) 0%, rgba(4, 6, 10, 0) 16%);
  }
  .hero__poster img, .hero__video { object-position: 50% 30%; }
  /* Telefon: hasło wyśrodkowane w dolnej połowie ekranu (nad wskaźnikiem przewijania), wideo u góry odsłonięte */
  .hero__body {
    align-self: end; margin-bottom: 0;
    min-height: 50vh; min-height: 50svh;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-block: 1.5rem clamp(4.5rem, 11vh, 6rem);
  }
  :root[data-variant="b"] .hero__media {
    background:
      radial-gradient(60% 26% at 50% 30%, rgba(255, 196, 120, .14), transparent 70%),
      radial-gradient(90% 40% at 50% 32%, rgba(70, 120, 200, .22), transparent 70%),
      #04060a;
  }
}

/* ---------- Nagłówek sekcji (zastosowania, opinie) ---------- */
.section-head, .opinions__head { max-width: 40rem; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.section-head__title, .opinions__title { font: 300 clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.section-head__note, .opinions__note { margin-top: .65rem; color: var(--c-muted); font-size: var(--fs-small); }

/* ---------- ZASTOSOWANIA: karty obrazek + problem + rozwiązanie ---------- */
/* Zaraz pod hero (pełny ekran): minimalny odstęp u góry, żeby po przewinięciu od razu były karty */
.cases { position: relative; padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1rem, 2vw, 1.5rem); }
.cases__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .cases__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 60%), rgba(12, 16, 24, .8);
  border: 1px solid rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -32px rgba(0, 0, 0, .9);
  transition: border-color .25s;
}
.case:hover { border-color: rgba(255, 255, 255, .16); }
.case__img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #080b11; border-bottom: 1px solid var(--c-line); }
.case__body { display: flex; flex-direction: column; padding: 1.15rem 1.3rem 1.3rem; }
.case__area { font: 400 var(--fs-micro)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.case__title { margin-top: .55rem; font: 600 1.125rem/1.35 var(--f-text); letter-spacing: -.01em; color: var(--c-text); }
.case__label { margin-top: 1rem; font: 600 .75rem/1 var(--f-text); letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-2); }
.case__text, .case__step { margin-top: .45rem; font-size: .9375rem; line-height: 1.55; color: var(--c-text-2); }
.case__step { position: relative; padding-left: 1rem; }
.case__step::before { content: ""; position: absolute; left: 0; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; }
.case__step--agent::before { background: var(--c-signal); box-shadow: 0 0 8px rgba(124, 200, 255, .6); }
.case__step--human::before { background: var(--c-accent); box-shadow: 0 0 8px rgba(242, 180, 90, .7); }
.case__who { font-weight: 600; color: var(--c-text); }
.case__step--human .case__who { color: var(--c-accent-text); }
.case picture { display: block; }
/* Komputer: karty kompaktowe — szerszy kontener, niski obrazek 8:3, mniejsza typografia i odstępy */
@media (min-width: 1080px) {
  .cases .wrap { max-width: 84rem; }
  .cases__grid { gap: 1rem; }
  .case { border-radius: 14px; }
  .case__img { aspect-ratio: 8 / 3; }
  .case__body { padding: .85rem 1.05rem 1rem; }
  .case__area { font-size: .6875rem; }
  .case__title { margin-top: .4rem; font-size: 1.0625rem; line-height: 1.3; }
  .case__label { margin-top: .65rem; font-size: .6875rem; }
  .case__text, .case__step { margin-top: .3rem; font-size: .875rem; line-height: 1.45; }
}

/* ---------- OPINIE: siatka „masonry” z „Zobacz więcej” ---------- */
.opinions { position: relative; overflow-x: clip; padding: clamp(2.5rem, 5vw, 4rem) 0 var(--space-section); }
.opinions::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 70%; pointer-events: none; z-index: -1;
  background: radial-gradient(55% 60% at 18% 0%, rgba(124, 200, 255, .06), transparent 70%),
              radial-gradient(40% 50% at 85% 10%, rgba(242, 180, 90, .045), transparent 70%);
}

/* Bez JS: kolumny CSS i pełne teksty. Z JS: kolumny układane rzędami (pierwszy rząd = karty 1–3) */
.wall { columns: 3 17rem; column-gap: 1.25rem; }
.wall > .quote { break-inside: avoid; margin-bottom: 1.25rem; }
.wall.is-masonry { columns: auto; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.wall__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.wall.is-masonry .quote { margin: 0; }
/* Okno siatki: zwinięte = pierwszy rząd w całości + fragment drugiego (wysokość liczy JS), z miękkim zanikaniem u dołu */
.wall-clip { overflow: hidden; overflow: clip; transition: max-height .7s var(--ease-out); }
.wall-clip.is-instant { transition: none; }
.wall-clip.is-collapsed {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 7.5rem), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 7.5rem), transparent);
}

.quote {
  position: relative; display: flex; flex-direction: column; gap: .85rem;
  padding: 1.35rem 1.4rem 1.2rem; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 60%), rgba(12, 16, 24, .8);
  border: 1px solid rgba(255, 255, 255, .085);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 48px -32px rgba(0, 0, 0, .9);
  transition: border-color .25s;
}
.quote:hover { border-color: rgba(255, 255, 255, .16); }
.quote__mark { display: block; height: 1rem; margin: -.1rem 0 -.15rem; font: italic 400 2.4rem/1 var(--f-serif); color: var(--c-accent); }
.quote__text { margin: 0; color: var(--c-text-2); font-size: .96875rem; line-height: 1.62; }   /* zawsze pełna treść */
.quote__text p + p { margin-top: .7em; }
.quote__by { display: flex; align-items: flex-start; gap: .8rem; margin-top: auto; padding-top: .95rem; border-top: 1px solid var(--c-line); }
.quote__avatar {
  flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  font: 600 .9375rem/1 var(--f-text); color: var(--c-text);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14);
}
.quote__who { display: grid; gap: .1rem; min-width: 0; }
.quote__name { font: 600 .9375rem/1.3 var(--f-text); color: var(--c-text); }
.quote__role { font-size: .8125rem; line-height: 1.35; color: var(--c-muted); }
.quote__link {
  justify-self: start; display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
  font-size: .8125rem; color: var(--c-text-2); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease-out), color .2s;
}
.quote__link:hover { color: var(--c-text); background-size: calc(100% - 1.1em) 1px; }
.quote__link svg { width: .7em; height: .7em; }

/* Przycisk „Zobacz więcej” — obrys ze ściętym lewym bokiem i szpicem z prawej (jak na wzorcu) */
.wall__more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.more {
  position: relative; display: inline-grid; place-items: center; width: 13.75rem; height: 3rem; padding: 0 1.4rem 0 1.9rem;
  background: none; border: 0; color: var(--c-text); font: 400 .9375rem/1 var(--f-text); cursor: pointer;
}
.more[hidden] { display: none; }
.more__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.more__shape polygon { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .3); stroke-width: 1; transition: fill .2s, stroke .2s; }
.more:hover .more__shape polygon { fill: rgba(242, 180, 90, .08); stroke: rgba(242, 180, 90, .7); }
.more:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 5px; border-radius: 4px; }
.more__label { position: relative; }

/* ---------- Przełącznik wariantu (tylko prototyp) ---------- */
.proto-switch {
  position: absolute; left: var(--pad); bottom: clamp(1.25rem, 3.5vh, 2rem); z-index: 5; display: flex; align-items: center; gap: .25rem;
  padding: .3rem .3rem .3rem .75rem; border-radius: 999px; background: rgba(8, 11, 17, .78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--c-line-2);
  font: 400 .6875rem/1 var(--f-mono); letter-spacing: .08em; color: var(--c-muted);
}
.proto-switch[hidden] { display: none; }
.proto-switch a { display: grid; place-items: center; min-width: 2rem; height: 1.75rem; padding: 0 .55rem; border-radius: 999px; color: var(--c-text-2); text-decoration: none; }
.proto-switch a[aria-current="true"] { background: var(--c-accent); color: var(--c-accent-ink); }
.proto-switch kbd { display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin: 0 .2rem 0 .15rem; border-radius: 6px; border: 1px solid var(--c-line-2); font: inherit; color: var(--c-muted); }

@media (max-width: 640px) {
  .quote { padding: 1.2rem 1.15rem 1.1rem; }
  .case__body { padding: 1.05rem 1.15rem 1.2rem; }
}