@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  min-width: 320px;
  line-height: 1.8;
}
@media (max-width: 870px) {
  html {
    font-size: 11px;
  }
}

body {
  background-color: var(--frc-violet);
  color: #000;
}

img {
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: bold;
}

a {
  color: var(--frc-violet);
  text-decoration: none;
}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition: 0s !important;
  }
}
.all {
  overflow-x: hidden;
}

.yt {
  max-width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}
.yt iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hidden, [hidden] {
  display: none !important;
}

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

.partners-list-cnt {
  padding-bottom: 40px;
}
.partners-list-cnt > h3, .partners-list-cnt > h2 {
  text-align: center;
  position: relative;
  padding-top: 26px;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1;
  font-weight: 800;
  margin-bottom: 40px;
}
.partners-list-cnt > h3::before, .partners-list-cnt > h2::before {
  left: 50% !important;
  translate: -50%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
  box-shadow: 10px 0 var(--frc-orange), 20px 0 #7b3592;
}

.partners-list {
  display: flex;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
}

.partners-list img {
  box-shadow: none !important;
}

.partners-list-element a:hover {
  background: none !important;
}

.partners-list-element {
  border: 1px solid #ddd;
  width: calc(25% - 20px);
  aspect-ratio: 220/140;
  position: relative;
}
.partners-list-element.is-full {
  width: auto;
  min-width: 90%;
  flex: 1;
  max-width: 100%;
  aspect-ratio: 660/100;
}
@media (max-width: 640px) {
  .partners-list-element {
    width: calc(33.3333% - 20px);
  }
}

.partners-list-element.full {
  width: 100%;
  aspect-ratio: auto;
}

.partners-list-element:hover .partners-list-element-menu {
  opacity: 1;
  pointer-events: all;
  list-style: none;
  padding: 0;
  margin: 0;
}
.partners-list-element:hover .partners-list-element-menu li {
  margin: 0;
  padding: 0;
}
.partners-list-element:hover .partners-list-element-menu li::before {
  content: none;
}

.partners-list-element-seemore {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: #fff;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 36 36'%3E%3Cpath fill='%238c3fa5' d='M30.4 17.6c-1.8-1.9-4.2-3.2-6.7-3.7q-1.65-.45-3.3-.6c2.8-3.3 2.3-8.3-1-11.1s-8.3-2.3-11.1 1s-2.3 8.3 1 11.1c.6.5 1.2.9 1.8 1.1v2.2l-1.6-1.5c-1.4-1.4-3.7-1.4-5.2 0c-1.4 1.4-1.5 3.6-.1 5l4.6 5.4c.2 1.4.7 2.7 1.4 3.9c.5.9 1.2 1.8 1.9 2.5v1.9c0 .6.4 1 1 1h13.6c.5 0 1-.5 1-1v-2.6c1.9-2.3 2.9-5.2 2.9-8.1v-5.8c.1-.4 0-.6-.2-.7m-22-9.4c0-3.3 2.7-5.9 6-5.8c3.3 0 5.9 2.7 5.8 6c0 1.8-.8 3.4-2.2 4.5v-5a3.4 3.4 0 0 0-3.4-3.2c-1.8-.1-3.4 1.4-3.4 3.2v5.2c-1.7-1-2.7-2.9-2.8-4.9M28.7 24c.1 2.6-.8 5.1-2.5 7.1c-.2.2-.4.4-.4.7v2.1H14.2v-1.4c0-.3-.2-.6-.4-.8c-.7-.6-1.3-1.3-1.8-2.2c-.6-1-1-2.2-1.2-3.4c0-.2-.1-.4-.2-.6l-4.8-5.7c-.3-.3-.5-.7-.5-1.2c0-.4.2-.9.5-1.2c.7-.6 1.7-.6 2.4 0l2.9 2.9v3l1.9-1V7.9c.1-.7.7-1.3 1.5-1.2c.7 0 1.4.5 1.4 1.2v11.5l2 .4v-4.6c.1-.1.2-.1.3-.2c.7 0 1.4.1 2.1.2v5.1l1.6.3v-5.2l1.2.3c.5.1 1 .3 1.5.5v5l1.6.3v-4.6c.9.4 1.7 1 2.4 1.7z' class='clr-i-outline clr-i-outline-path-1'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  z-index: 100;
  transform: translate(50%, -50%);
}

.partners-list-element-menu {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  inset: 1px;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  gap: 10px;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s opacity;
}
.partners-list-element-menu a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--frc-violet) !important;
  transition: 0.1s !important;
}
.partners-list-element-menu a:hover {
  background-color: var(--frc-bg) !important;
}
.partners-list-element-menu span {
  display: none;
}
.partners-list-element-menu svg {
  width: 27px;
  height: 27px;
  fill: white;
}
.partners-list-element-menu a:hover svg {
  fill: white;
}

.partners-list-element-logo {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.partners-list-element-logo img {
  max-width: 90%;
  max-height: 90%;
  -o-object-fit: cover;
     object-fit: cover;
}

.partners-list-element-menu {
  position: absolute;
  bottom: 0;
  left: 0;
}

.partners-list-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: none;
  overflow-y: auto;
  padding: 30px;
}
.partners-list-popup.is-show {
  display: flex;
}

body:has(.partners-list-popup.is-show) .subpage-content-cnt,
body:has(.partners-list-popup.is-show) .subpage-content {
  position: initial;
}
body:has(.partners-list-popup.is-show) .subpage-content-cnt {
  isolation: initial;
}

.partners-list-popup-inside {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  display: grid;
  width: 100%;
  min-height: 100%;
}

body.popup-show .subpage-content {
  z-index: auto;
}

.partners-list-popup-container {
  background: #fff;
  padding: 20px;
  max-width: 700px;
  width: 90%;
  max-height: 80%;
  min-height: 400px;
  position: relative;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  justify-self: center;
  align-self: center;
}

.partners-list-popup-close {
  width: 45px;
  height: 45px;
  border: 0;
  grid-area: close;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
  transition: 0.2s background-color;
  background: none;
}

.partners-list-popup-close::before,
.partners-list-popup-close::after {
  content: "";
  transition: 0.5s;
  width: 20px;
  height: 2px;
  position: absolute;
  background: #000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.partners-list-popup-close::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.partners-list-popup-logo {
  text-align: center;
  padding-left: 40px;
  padding-right: 40px;
}
.partners-list-popup-logo img {
  max-width: 200px !important;
  width: 100%;
}

.partners-list-popup-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 10px 0;
  justify-content: center;
  gap: 5px 0;
  line-height: 1.2;
  border-bottom: 1px solid #ddd;
  margin-left: -20px;
  margin-right: -20px;
}
.partners-list-popup-menu a {
  padding: 10px 15px;
  display: inline-flex;
  text-decoration: none !important;
  color: #333;
  font-size: 15px;
  text-transform: uppercase;
}
.partners-list-popup-menu .is-active a {
  color: var(--frc-violet);
  font-weight: bold;
  display: block;
}
@media (max-width: 450px) {
  .partners-list-popup-menu {
    font-size: 15px;
  }
}

.partners-list-popup-tab {
  display: none;
  text-align: center;
}
.partners-list-popup-tab.is-active {
  display: block;
  text-align: center;
}
.partners-list-popup-tab a {
  color: var(--frc-violet);
  text-decoration: none;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 36px;
  margin-top: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gallery img {
  display: block;
  margin: 0 !important;
}

.subpage-content {
  position: relative;
  max-width: 800px;
  background-color: #fff;
  border-radius: 20px;
  color: #000;
  padding: 60px;
  overflow: clip;
  margin: 0 auto;
  font-size: 18px;
}

:where(.subpage-content a:not([class])) {
  font-weight: bold;
}

:where(.subpage-content ul:not([class])) {
  list-style: none;
  padding: 0;
}

.subpage-content-header {
  margin: -60px;
  margin-bottom: 50px;
  aspect-ratio: 780/360;
  background-position: center;
  background-size: cover;
}

@media (max-width: 870px) {
  .subpage-content {
    font-size: 20px;
    max-width: 860px;
  }
}
@media (max-width: 600px) {
  .subpage-title {
    font-size: 50px;
  }
  .subpage-subtitle {
    font-size: 20px;
  }
  .subpage-content {
    padding: 40px;
    font-size: 20px;
  }
  .subpage-content-header {
    margin: -40px;
    margin-bottom: 50px;
  }
}
.frc-sub .subpage-read .subpage-content > :first-child {
  margin-top: 0;
}

.frc-sub .subpage-read .subpage-content > :last-child {
  margin-bottom: 0;
}

/* tekst */
.frc-sub .subpage-read .subpage-content p {
  margin: 0 0 1.25em;
}

.frc-sub .subpage-read .subpage-content > p:first-child {
  font-size: 1.18em;
  font-weight: 500;
  line-height: 1.6;
}

/* pierwszy akapit = wprowadzenie */
.frc-sub .subpage-read .subpage-content strong,
.frc-sub .subpage-read .subpage-content b {
  font-weight: 800;
}

.frc-sub .subpage-read .subpage-content a {
  color: #7b3592;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--frc-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.frc-sub .subpage-read .subpage-content a:focus-visible {
  outline: 2px solid var(--frc-orange);
  outline-offset: 2px;
}

/* nagłówki: nad h2 trzy pomarańczowe piksele (jak w narożnikach boksów) */
.frc-sub .subpage-read .subpage-content h2,
.frc-sub .subpage-read .subpage-content h3,
.frc-sub .subpage-read .subpage-content h4 {
  color: var(--frc-ink);
  line-height: 1.15;
}

.frc-sub .subpage-read .subpage-content h2 {
  position: relative;
  margin: 2.2em 0 0.8em;
  padding-top: 26px;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
}

.frc-sub .subpage-read .subpage-content h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
  box-shadow: 10px 0 var(--frc-orange), 20px 0 #7b3592;
}

.frc-sub .subpage-read .subpage-content h3 {
  margin: 1.8em 0 0.6em;
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 800;
}

.frc-sub .subpage-read .subpage-content h4 {
  margin: 1.8em 0 0.6em;
  color: #7b3592;
  font: 400 15px/1.4 "cofo-sans-pixel", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* listy: pikselowe kwadraty i numery pikselowym fontem */
.frc-sub .subpage-read .subpage-content ul:not([class]),
.frc-sub .subpage-read .subpage-content ol:not([class]) {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}
.frc-sub .subpage-read .subpage-content ul:not([class]) li,
.frc-sub .subpage-read .subpage-content ol:not([class]) li {
  position: relative;
  margin: 0 0 0.55em;
  padding-left: 34px;
}
.frc-sub .subpage-read .subpage-content ul:not([class]) li::before,
.frc-sub .subpage-read .subpage-content ol:not([class]) li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
}

.frc-sub .subpage-read .subpage-content ul ul,
.frc-sub .subpage-read .subpage-content ol ol,
.frc-sub .subpage-read .subpage-content ul ol,
.frc-sub .subpage-read .subpage-content ol ul {
  margin: 0.55em 0 0;
}

.frc-sub .subpage-read .subpage-content ul ul > li::before {
  background: #7b3592;
  width: 8px;
  height: 8px;
  top: 0.68em;
}

.frc-sub .subpage-read .subpage-content ol {
  counter-reset: frc-ol;
}

.frc-sub .subpage-read .subpage-content ol > li {
  counter-increment: frc-ol;
  padding-left: 44px;
}

.frc-sub .subpage-read .subpage-content ol > li::before {
  content: counter(frc-ol, decimal-leading-zero);
  position: absolute;
  top: 0.18em;
  left: 0;
  color: var(--frc-orange);
  font: 400 0.9em/1.5 "cofo-sans-pixel", monospace;
  letter-spacing: 0.06em;
}

/* obrazki i osadzenia: pełna szerokość kolumny, obrazek z pomarańczowym „pikselowym cieniem” */
.frc-sub .subpage-read .subpage-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2em 0;
  box-shadow: 12px 12px 0 var(--frc-orange);
}

.frc-sub .subpage-read .subpage-content p > img:only-child {
  width: 100%;
}

.frc-sub .subpage-read .subpage-content p:has(> img:only-child) {
  margin: 0;
}

.frc-sub .subpage-read .subpage-content figure {
  margin: 2em 0;
}

.frc-sub .subpage-read .subpage-content figure img {
  margin: 0;
}

.frc-sub .subpage-read .subpage-content figcaption {
  margin-top: 20px;
  color: rgba(42, 11, 53, 0.65);
  font-size: 14px;
}

.frc-sub .subpage-read .subpage-content iframe,
.frc-sub .subpage-read .subpage-content video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 2em 0;
  border: 0;
  background: #2a0b35;
}

/* cytat, linia, tabela */
.frc-sub .subpage-read .subpage-content blockquote {
  position: relative;
  margin: 2em 0;
  padding: 4px 0 4px 32px;
  border-left: 6px solid var(--frc-orange);
  font-size: 1.25em;
  font-weight: 600;
  line-height: 1.5;
}

.frc-sub .subpage-read .subpage-content blockquote p:last-child {
  margin-bottom: 0;
}

.frc-sub .subpage-read .subpage-content hr {
  height: 8px;
  margin: 2.6em 0;
  border: 0;
  background: repeating-linear-gradient(90deg, var(--frc-orange) 0 8px, transparent 8px 16px);
}

.frc-sub .subpage-read .subpage-content table {
  width: 100%;
  margin: 2em 0;
  border-collapse: collapse;
  font-size: 0.92em;
  line-height: 1.45;
}

.frc-sub .subpage-read .subpage-content th {
  padding: 14px 16px 12px;
  background: #2a0b35;
  color: #fff;
  font: 400 13px/1.3 "cofo-sans-pixel", monospace;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}

.frc-sub .subpage-read .subpage-content td {
  padding: 12px 16px;
  border-bottom: 1px solid #e6dcea;
  vertical-align: top;
}

.frc-sub .subpage-read .subpage-content tbody tr:nth-child(even) td {
  background: #f7f2f9;
}

/* ---- osoba kontaktowa (blok .coop-person z CMS – ten sam znacznik co na innych konferencjach PTWP) ----
   Ciemna karta na białym tle: kwadratowe zdjęcie z pikselowym motywem pod spodem (jak u prelegentów), imię, stanowisko
   pikselowym fontem, przyciski w stylu FRC. Karty stają po dwie obok siebie (od 700 px), na telefonie jedna pod drugą. */
.frc-sub .subpage-read .subpage-content .coop-person {
  display: flex;
  flex-direction: column;
  margin: 2em 0 0;
  background: #2a0b35;
  color: #fff;
}

.frc-sub .subpage-read .subpage-content .coop-person-img {
  position: relative;
  order: -1;
  margin-bottom: 16.6666666667%;
}

.frc-sub .subpage-read .subpage-content .coop-person-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: none;
}

.frc-sub .subpage-read .subpage-content .coop-person-img::after {
  /* motyw: 12 × 3 pola, rząd 0 nachodzi na zdjęcie */
  content: "";
  position: absolute;
  left: 0;
  top: 91.6666666667%;
  width: 100%;
  aspect-ratio: 12/3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 3' shape-rendering='crispEdges' fill='%23ff7300'%3E%3Cpath d='M1 1h4v1H1zM2 2h1v1H2zM4 2h1v1H4zM5 0h1v2H5zM6 1h2v1H6zM7 2h1v1H7zM10 0h2v1h-2zM11 1h1v2h-1z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}

.frc-sub .subpage-read .subpage-content .coop-person:nth-of-type(even) .coop-person-img::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 3' shape-rendering='crispEdges' fill='%23ff7300'%3E%3Cpath d='M0 1h2v1H0zM1 2h1v1H1zM2 0h2v2H2zM3 2h1v1H3zM6 0h1v2H6zM8 1h3v1H8zM8 2h2v1H8zM9 0h1v1H9zM11 0h1v1h-1z'/%3E%3C/svg%3E");
}

.frc-sub .subpage-read .subpage-content .coop-person-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
  padding: 20px clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 32px);
}

.frc-sub .subpage-read .subpage-content .coop-person-name {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}

.frc-sub .subpage-read .subpage-content .coop-person-position {
  margin-top: 10px;
  color: var(--frc-orange);
  font: 400 13px/1.5 "cofo-sans-pixel", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.frc-sub .subpage-read .subpage-content .coop-person-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

/* przyciski jak .frc-btn: belka z napisem + kwadrat ze strzałką, po najechaniu wypełnienie jak pasek postępu */
.frc-sub .subpage-read .subpage-content .coop-person-links a {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  background: none;
  color: #fff;
  font: 400 14px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a::before {
  /* belka (napis leży na niej dzięki z-index -1) */
  content: "";
  position: absolute;
  inset: 0 44px 0 0;
  z-index: -1;
  background: var(--frc-orange) linear-gradient(#7b3592, #7b3592) 0 0/0 100% no-repeat;
  transition: background-size 0.6s;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a:hover::before,
.frc-sub .subpage-read .subpage-content .coop-person-links a:focus-visible::before {
  background-size: 100% 100%;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a {
  padding: 15px 62px 14px 18px;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a::after {
  content: "<";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  background: #fff;
  color: var(--frc-orange);
}

.frc-sub .subpage-read .subpage-content .coop-person-links a.coop-person-links-ite-phone::before {
  background-color: #fff;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a.coop-person-links-ite-phone {
  color: #2a0b35;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a.coop-person-links-ite-phone::after {
  content: ">";
  background: var(--frc-orange);
  color: #2a0b35;
}

.frc-sub .subpage-read .subpage-content .coop-person-links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.frc-sub .subpage-read .subpage-content .coop-person-links .frc-ptn__copy {
  flex: none;
  min-height: 44px;
}

/* przycisk kopiowania dokłada skrypt */
.frc-sub .subpage-read .subpage-content .coop-person-links .frc-ptn__copy:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* telefon: węższy przycisk maila, żeby kwadrat „kopiuj” zmieścił się obok w tym samym rzędzie */
@media (max-width: 699px) {
  .frc-sub .subpage-read .subpage-content .coop-person-links a {
    padding: 15px 52px 14px 14px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .frc-sub .subpage-read .subpage-content .coop-person-links a::before {
    right: 40px;
  }
  .frc-sub .subpage-read .subpage-content .coop-person-links a::after {
    width: 40px;
  }
}
/* od 700 px treść z kartami układa się w siatkę 2 kolumn: karty obok siebie (równej wysokości), reszta treści na całą szerokość */
@media (min-width: 700px) {
  .frc-sub .subpage-read .subpage-content:has(> .coop-person) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 24px;
         column-gap: 24px;
    align-content: start;
  }
  .frc-sub .subpage-read .subpage-content:has(> .coop-person) > :not(.coop-person) {
    grid-column: 1/-1;
  }
}
@media (max-width: 767px) {
  .frc-sub .subpage-read .subpage-content table {
    display: block;
    overflow-x: auto;
  }
  /* szeroka tabela przewija się w bok, a nie rozpycha strony */
  .frc-sub .subpage-read .subpage-content img {
    box-shadow: 8px 8px 0 var(--frc-orange);
  }
}
:root {
  --frc-bg: #2a0b35;
  --frc-orange: #ff7300;
  --frc-violet: #8c3fa5;
  --frc-head-h: 84px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--frc-bg);
  color: #fff;
  font-family: "alfabet", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* ===========================================================
   FUTURE RETAIL CONGRESS 2027 – wspólny arkusz wszystkich stron
   (strona główna + podstrony tekstowe). Wymaga fontów z Adobe Fonts:
   <link rel="stylesheet" href="https://use.typekit.net/xwy1nls.css">
   =========================================================== */
/* ===========================================================
   ANIMACJA FUTURE RETAIL CONGRESS 2027 (zamiast wideo SZUKAJ_FRC_loop)
   Wszystkie klasy z prefiksem .frc- żeby nie gryzły się ze stylami strony.
   Ilustracja: warstwy z pliku grafika (folder img/). Pętla trwa 18 s.
   =========================================================== */
.frc {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  background: var(--frc-bg);
  color: #fff;
  font-family: "alfabet", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.frc *,
.frc *::before,
.frc *::after {
  box-sizing: border-box;
}

.frc__inner {
  position: relative;
  aspect-ratio: 16/9;
}

.frc__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- ilustracja (proporcje artboardu z pliku .ai, położenie jak w wideo 1920×1080) ---- */
.frc__art {
  position: absolute;
  left: 9.5%;
  top: 15.7%;
  width: 40.8%;
  aspect-ratio: 826.68/811.79;
}

/* ---- tekst: logo, claim, data, przyciski ---- */
.frc__text {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 4.6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.frc__title {
  margin: 0;
  line-height: 0;
}

/* tekst rośnie z ekranem do szerokości ok. 1500 px, dalej stoi w miejscu */
.frc__logo {
  display: block;
  width: min(38cqw, 570px);
  height: auto;
  margin: 0;
}

.frc__claim {
  margin: min(3.4cqw, 51px) 0 0;
  font-size: min(2.35cqw, 35px);
  font-weight: 500;
  line-height: 1.3;
}

.frc__claim strong {
  display: block;
  font-size: 1.2em;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.frc__date {
  margin: min(1.5cqw, 22px) 0 0;
  font-size: min(2cqw, 30px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--frc-orange);
}

.frc__date span {
  margin: 0 0.35em;
}

.frc__btns {
  display: grid;
  gap: min(1cqw, 12px);
  margin-top: min(3.4cqw, 51px);
}

/* oba przyciski tej samej szerokości */
/* przyciski: pasek z napisem + kwadrat ze strzałką (font CoFo Sans Pixel z Adobe Fonts).
   Hover jak pasek postępu: kolor wypełnia pasek od lewej do prawej; po zjechaniu kursorem cofa się. */
.frc-btn {
  --fill: #7b3592;
  display: inline-flex;
  align-items: stretch;
  color: #fff;
  font: 400 min(1.8cqw, 18px)/1 "cofo-sans-pixel", monospace;
  /* rośnie z ekranem, ale najwyżej do 18 px */
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

.frc-btn__label {
  position: relative;
  isolation: isolate;
  flex: 1;
  padding: min(0.8cqw, 14px) min(1.5cqw, 26px) min(0.75cqw, 13px);
  text-align: center;
}

.frc-btn__label::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-btn:hover .frc-btn__label::after,
.frc-btn:focus-visible .frc-btn__label::after {
  transform: scaleX(1);
}

.frc-btn__arrow {
  display: grid;
  place-items: center;
  width: min(2.9cqw, 46px);
  letter-spacing: 0;
}

.frc-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* pomarańczowy: kwadrat z prawej „<”, wypełnia się fioletem */
.frc-btn--orange .frc-btn__label {
  background: var(--frc-orange);
}

.frc-btn--orange .frc-btn__arrow {
  background: #fff;
  color: var(--frc-orange);
}

.frc-btn--orange .frc-btn__arrow::before {
  content: "<";
}

/* biały: kwadrat z lewej „>”, wypełnia się pomarańczem (ciemny napis zostaje czytelny) */
.frc-btn--white {
  --fill: var(--frc-orange);
  flex-direction: row-reverse;
}

.frc-btn--white .frc-btn__label {
  background: #fff;
  color: var(--frc-bg);
}

.frc-btn--white .frc-btn__arrow {
  background: var(--frc-orange);
  color: var(--frc-bg);
}

.frc-btn--white .frc-btn__arrow::before {
  content: ">";
}

/* ===========================================================
   MENU (nagłówek strony) – przyklejone u góry, przezroczyste nad banerem,
   po przewinięciu dostaje ciemne tło. Poniżej 1100 px: przycisk „menu” i panel.
   =========================================================== */
.frc-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: #fff;
  font-family: "alfabet", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.frc-head *,
.frc-head *::before,
.frc-head *::after {
  box-sizing: border-box;
}

.frc-head.is-scrolled,
.frc-head.is-open {
  background: rgba(42, 11, 53, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.frc-head__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--frc-head-h);
  padding: 0 clamp(16px, 4.6vw, 88px);
}

.frc-head__logo {
  flex: none;
  display: block;
  line-height: 0;
}

.frc-head__logo img {
  display: block;
  width: auto;
  height: 46px;
}

.frc-head__logo:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}

/* linki */
.frc-nav {
  margin-left: auto;
}

.frc-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.frc-nav__item {
  position: relative;
}

.frc-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: #fff;
  font: 600 15px/1.2 "alfabet", sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* pikselowe podkreślenie rosnące skokowo – jak pasek postępu */
.frc-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  background: var(--frc-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s steps(6, jump-end);
}

.frc-nav__link:hover::after,
.frc-nav__link:focus-visible::after,
.frc-nav__item:focus-within > .frc-nav__link::after,
.frc-nav__link[aria-current=page]::after {
  transform: scaleX(1);
}

.frc-nav__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.frc-nav__caret {
  width: 10px;
  height: 6px;
  fill: currentColor;
  shape-rendering: crispEdges;
  transition: transform 0.2s;
}

/* podmenu */
.frc-nav__sub {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--frc-bg);
  border-top: 3px solid var(--frc-orange);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}

.frc-nav__item--sub:hover .frc-nav__sub,
.frc-nav__item--sub:focus-within .frc-nav__sub,
.frc-nav__item--sub.is-open .frc-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s, transform 0.2s;
}

.frc-nav__item--sub:hover .frc-nav__caret,
.frc-nav__item--sub.is-open .frc-nav__caret {
  transform: rotate(180deg);
}

.frc-nav__sub a {
  display: block;
  padding: 10px 16px;
  color: #fff;
  font: 500 15px/1.3 "alfabet", sans-serif;
  text-decoration: none;
}

.frc-nav__sub a:hover,
.frc-nav__sub a:focus-visible {
  background: #7b3592;
  outline: none;
}

/* akcje: rejestracja + logowanie */
.frc-head__actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: none;
}

.frc-head .frc-btn {
  font-size: 14px;
}

.frc-head .frc-btn__label {
  padding: 13px 18px 12px;
}

.frc-head .frc-btn__arrow {
  width: 40px;
}

.frc-login {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  overflow: hidden;
  background: #7b3592;
  color: #fff;
}

.frc-login::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frc-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-login:hover::after,
.frc-login:focus-visible::after {
  transform: scaleY(1);
}

.frc-login:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.frc-login svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

/* przycisk „menu” (tylko na węższych ekranach) */
.frc-burger {
  display: none;
  place-items: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--frc-bg);
  cursor: pointer;
}

.frc-burger svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.frc-burger .frc-burger__x {
  display: none;
}

.frc-burger[aria-expanded=true] .frc-burger__bars {
  display: none;
}

.frc-burger[aria-expanded=true] .frc-burger__x {
  display: block;
}

.frc-burger:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 1099px) {
  .frc-head {
    --frc-head-h: 68px;
  }
  .frc-head__bar {
    gap: 10px;
  }
  .frc-head__logo {
    margin-right: auto;
  }
  .frc-head__logo img {
    height: 38px;
  }
  .frc-burger {
    display: grid;
  }
  .frc-nav {
    position: absolute;
    /* względem nagłówka (fixed + backdrop-filter tworzy własny układ odniesienia) */
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--frc-head-h));
    height: calc(100dvh - var(--frc-head-h));
    overflow-y: auto;
    padding: 16px clamp(16px, 4.6vw, 88px) 32px;
    background: var(--frc-bg);
    display: none;
  }
  .frc-head.is-open .frc-nav {
    display: block;
  }
  .frc-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .frc-nav__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .frc-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 20px;
  }
  .frc-nav__link::after {
    bottom: 10px;
    right: auto;
    width: 48px;
  }
  .frc-nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 12px;
    border: 0;
    box-shadow: none;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .frc-nav__item--sub.is-open .frc-nav__sub {
    display: block;
  }
  .frc-nav__item--sub:hover .frc-nav__caret {
    transform: none;
  }
  .frc-nav__item--sub.is-open .frc-nav__caret {
    transform: rotate(180deg);
  }
  .frc-nav__sub a {
    padding: 10px 0 10px 16px;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.85);
  }
  /* pomniejszona rejestracja zostaje w pasku */
  .frc-head .frc-btn {
    font-size: 12px;
  }
  .frc-head .frc-btn__label {
    display: flex;
    align-items: center;
    padding: 0 12px;
  }
  .frc-head .frc-btn__arrow {
    width: 30px;
  }
  .frc-nav__login {
    display: none;
  }
}
/* najwęższe ekrany: logowanie przechodzi z paska do panelu menu */
@media (max-width: 479px) {
  .frc-head__actions .frc-login {
    display: none;
  }
  .frc-nav__login {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    color: #fff;
    font: 600 18px/1.2 "alfabet", sans-serif;
    text-decoration: none;
  }
  .frc-nav__login .frc-login {
    flex: none;
  }
}
/* bardzo wąskie telefony (np. 320 px): mniejsze logo i odstępy, żeby rejestracja się zmieściła */
@media (max-width: 359px) {
  .frc-head__bar {
    gap: 8px;
  }
  .frc-head__logo img {
    height: 32px;
  }
  .frc-head .frc-btn__label {
    padding: 0 9px;
  }
}
@media (min-width: 1100px) {
  .frc-nav__login {
    display: none;
  }
  /* przy „O wydarzeniu” wystarczy pomarańczowa belka rozwiniętego podmenu – bez drugiej kreski */
  .frc-nav__item--sub > .frc-nav__link::after {
    display: none;
  }
}
html.frc-menu-lock,
html.frc-menu-lock body {
  overflow: hidden;
}

/* ---- wersja „start”: rejestracja wkrótce, bez logowania ---- */
.frc-v-start .frc-login,
.frc-v-start .frc-nav__login {
  display: none !important;
}

.frc-btn--soon {
  cursor: default;
}

.frc-btn--soon .frc-btn__label::after {
  display: none;
}

/* bez wypełniania po najechaniu */
.frc-btn--soon .frc-btn__arrow::before {
  /* zamiast strzałki pikselowa klepsydra: piasek się przesypuje, potem obrót */
  content: "";
  width: 14px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 1h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 1h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 1h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 1h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 1h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 1h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: frcSand 3.2s infinite;
}

/* 4 klatki piasku (pełna góra → strużka → pełny dół), potem skokowy obrót o 180° – obrócona ostatnia klatka wygląda jak pierwsza */
@keyframes frcSand {
  0%, 17% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 1h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 1h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 1h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 1h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 1h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 1h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    transform: rotate(0);
  }
  18%, 35% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 4h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 2h1v1H3zM3 3h1v1H3zM3 4h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 2h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
  }
  36%, 53% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 3h1v1H3zM3 4h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 3h1v1H3zM3 4h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
  }
  54%, 78% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    transform: rotate(0);
    animation-timing-function: steps(1, end);
  }
  86% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    transform: rotate(90deg);
    animation-timing-function: steps(1, end);
  }
  94%, 100% {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9'%3E%3Cpath d='M0 0h1v1H0zM0 8h1v1H0zM1 0h1v1H1zM1 1h1v1H1zM1 2h1v1H1zM1 6h1v1H1zM1 7h1v1H1zM1 8h1v1H1zM2 0h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM2 6h1v1H2zM2 7h1v1H2zM2 8h1v1H2zM3 0h1v1H3zM3 5h1v1H3zM3 6h1v1H3zM3 7h1v1H3zM3 8h1v1H3zM4 0h1v1H4zM4 3h1v1H4zM4 4h1v1H4zM4 5h1v1H4zM4 6h1v1H4zM4 7h1v1H4zM4 8h1v1H4zM5 0h1v1H5zM5 1h1v1H5zM5 2h1v1H5zM5 6h1v1H5zM5 7h1v1H5zM5 8h1v1H5zM6 0h1v1H6zM6 8h1v1H6z'/%3E%3C/svg%3E");
    transform: rotate(180deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-btn--soon .frc-btn__arrow::before {
    animation: none;
  }
}
/* telefon: „Rejestracja wkrótce” w pasku w dwóch linijkach, żeby zmieściło się obok logo i menu */
@media (max-width: 479px) {
  .frc-head .frc-btn--soon .frc-btn__label {
    max-width: none;
    padding: 8px 14px 7px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    width: -moz-min-content;
    width: min-content;
  }
  .frc-head .frc-btn--soon .frc-btn__arrow::before {
    width: 10px;
    height: 13px;
  }
}
@media (max-width: 359px) {
  .frc-head .frc-btn--soon .frc-btn__label {
    padding: 8px 10px 7px;
  }
  .frc-head .frc-btn--soon .frc-btn__arrow {
    display: none;
  }
}
/* ===========================================================
   SEKCJE POD HERO + DEKORACJE TŁA
   Kolejne sekcje dostają dekoracje naprzemiennie (np. piksele po prawej → pasek z lewej → piksele po lewej → pasek z prawej…).
   Do sekcji dodaj <canvas class="frc-deco" data-frc-deco="…" aria-hidden="true"></canvas>:
     pixels-right / pixels-left – animowane piksele w rogu po prawej / lewej
     edge-left / edge-right     – pomarańczowy pikselart doklejony do krawędzi
   =========================================================== */
.frc-sec {
  position: relative;
  overflow: hidden;
  overflow: clip;
  /* clip (nie hidden), żeby działało przyklejanie wideo (position: sticky) */
  padding: clamp(64px, 8vw, 128px) var(--frc-pad-x);
  background: var(--frc-bg);
  color: #fff;
  font-family: "alfabet", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.frc-sec *,
.frc-sec *::before,
.frc-sec *::after {
  box-sizing: border-box;
}

.frc-sec {
  --frc-bg: #2a0b35;
  --frc-orange: #ff7300;
  --frc-pad-x: clamp(16px, 4.6vw, 88px);
  --frc-head-h: 84px;
}

@media (max-width: 1099px) {
  .frc-sec {
    --frc-head-h: 68px;
  }
}
/* nadtytuł: biały pikselowy font na pomarańczowym tle */
.frc-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 9px 13px 8px;
  background: var(--frc-orange);
  color: #fff;
  font: 400 14px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* dopisek dłuższy niż nagłówek pod nim łamie się do szerokości nagłówka (szerokość ustawia skrypt na końcu strony) */
.frc-eyebrow.is-wrapped {
  line-height: 1.4;
  padding-top: 7px;
  padding-bottom: 6px;
}

.frc-deco {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.frc-sec__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.frc-sec__title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
}

.frc-sec__text {
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.frc-sec--right-text .frc-sec__inner {
  text-align: right;
}

.frc-sec--right-text .frc-sec__text {
  margin-left: auto;
}

/* ===========================================================
   SEKCJA „O WYDARZENIU” – wyśrodkowany tekst, pod nim wideo,
   które przy przewijaniu w dół rośnie od połowy do pełnej szerokości strony.
   Postęp liczy skrypt (zmienna --grow 0…1).
   =========================================================== */
.frc-about {
  padding-bottom: 0;
}

.frc-about .frc-sec__inner {
  text-align: center;
}

.frc-about__lead {
  max-width: 760px;
  margin: 20px auto 0;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.frc-about__stage {
  --grow: 0;
  --from: .5;
  /* szerokość startowa: połowa strony */
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: clamp(32px, 4vw, 56px) calc(-1 * var(--frc-pad-x)) 0;
  overflow-anchor: none;
  /* rosnące wideo nie „szarpie” przewijaniem */
}

.frc-about__video {
  position: relative;
  width: calc((var(--from) + (1 - var(--from)) * var(--grow)) * 100%);
  aspect-ratio: 16/9;
  max-height: calc(100vh - var(--frc-head-h));
  background: #000;
}

.frc-about__video video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* kontrolki wideo: pauza/odtwarzanie + dźwięk */
.frc-vctl {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}

.frc-vctl button {
  display: inline-flex;
  align-items: stretch;
  height: 40px;
  padding: 0;
  border: 0;
  cursor: pointer;
  font: 400 12px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.frc-vctl button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.frc-vctl__icon {
  display: grid;
  place-items: center;
  width: 40px;
  background: var(--frc-orange);
  color: #fff;
}

.frc-vctl__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.frc-vctl__label {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #fff;
  color: var(--frc-bg);
}

.frc-vctl__label::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frc-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-vctl button:hover .frc-vctl__label::after,
.frc-vctl button:focus-visible .frc-vctl__label::after {
  transform: scaleX(1);
}

.frc-vctl [data-frc-play] .frc-vctl__icon {
  background: #fff;
  color: var(--frc-bg);
}

.frc-vctl [data-frc-play]:hover .frc-vctl__icon {
  background: var(--frc-orange);
  color: #fff;
}

.frc-vctl .is-on {
  display: none;
}

.frc-vctl [aria-pressed=true] .is-on {
  display: block;
}

.frc-vctl [aria-pressed=true] .is-off {
  display: none;
}

@media (max-width: 767px) {
  .frc-about__stage {
    --from: .86;
  }
  .frc-vctl {
    left: 10px;
    bottom: 10px;
  }
}
/* „ogranicz ruch”: wideo od razu w pełnej szerokości */
@media (prefers-reduced-motion: reduce) {
  .frc-about__stage {
    --grow: 1;
  }
}
/* ===========================================================
   SEKCJA „PRELEGENCI” – karuzela kwadratowych zdjęć
   Pod każdym zdjęciem „wystający” pomarańczowy motyw pikselowy (SVG, siatka 12×3:
   górny rząd nachodzi na zdjęcie, dwa niższe wystają pod nie).
   =========================================================== */
.frc-spk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.frc-spk__nav {
  display: flex;
  gap: 8px;
}

.frc-spk__btn {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #fff;
  color: var(--frc-orange);
  font: 400 20px/1 "cofo-sans-pixel", monospace;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}

.frc-spk__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frc-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.frc-spk__btn:hover:not(:disabled) {
  color: #fff;
}

.frc-spk__btn:hover:not(:disabled)::after {
  transform: scaleY(1);
}

.frc-spk__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.frc-spk__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* tor karuzeli: przewijany w poziomie, z przyciąganiem do kart, wychodzi do prawej krawędzi ekranu */
.frc-spk__track {
  --card: clamp(200px, 21vw, 280px);
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(36px, 4vw, 56px) calc(50% - 50vw) 0 0;
  padding: 0 calc(50vw - 50%) 8px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
  cursor: grab;
}

.frc-spk__track::-webkit-scrollbar {
  display: none;
}

.frc-spk__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.frc-spk__track:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}

.frc-spk__card {
  flex: none;
  width: var(--card);
  scroll-snap-align: start;
}

.frc-spk__link {
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-user-drag: none;
}

.frc-spk__photo {
  position: relative;
  aspect-ratio: 1;
  margin-bottom: calc(16.6666666667% + 16px);
  /* miejsce na wystający motyw (2 rzędy po 1/12 szerokości) */
  background: #36123f;
}

.frc-spk__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-drag: none;
}

.frc-spk__pix {
  position: absolute;
  left: 0;
  top: 91.6666666667%;
  /* zdjęcie jest kwadratem, więc 1/12 wysokości = 1 piksel motywu */
  width: 100%;
  height: auto;
  fill: var(--frc-orange);
  shape-rendering: crispEdges;
  pointer-events: none;
}

.frc-spk__photo {
  overflow: visible;
}

.frc-spk__photo img {
  transition: filter 0.3s;
}

.frc-spk__link:hover .frc-spk__photo img {
  filter: brightness(1.08) saturate(1.1);
}

.frc-spk__name {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  transition: color 0.2s;
}

.frc-spk__link:hover .frc-spk__name {
  color: var(--frc-orange);
}

.frc-spk__role {
  margin: 10px 0 0;
  color: var(--frc-orange);
  font: 400 13px/1.5 "cofo-sans-pixel", monospace;
  /* stanowisko pikselowym fontem */
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* pasek postępu przewijania – segmentowy, jak ładowanie */
.frc-spk__progress {
  --p: 0;
  position: relative;
  height: 6px;
  margin-top: clamp(28px, 3vw, 40px);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
}

.frc-spk__progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--frc-orange) 0 calc(5% - 3px), transparent calc(5% - 3px) 5%);
  -webkit-clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
          clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0);
}

@media (max-width: 599px) {
  .frc-spk__track {
    --card: 50vw;
  }
  /* telefon: zdjęcia o ~30% mniejsze niż wcześniejsze 72vw */
  .frc-spk__btn {
    width: 44px;
    height: 44px;
  }
}
/* ===========================================================
   SEKCJA „NAGRODY” – zdjęcie statuetek Future Retail Awards na całą szerokość z paralaksą,
   tekst po lewej na przyciemnieniu, pod przyciskiem pikselowy „kod” jak pasek na statuetkach (pojedyncze pola co chwilę się przełączają).
   =========================================================== */
.frc-awd {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  /* min-height razem z odstępami */
  min-height: min(92vh, 860px);
  padding-top: clamp(96px, 10vw, 160px);
  padding-bottom: clamp(96px, 10vw, 160px);
  isolation: isolate;
}

.frc-awd__bg {
  position: absolute;
  inset: -18% 0 -18% 30%;
  z-index: -2;
  will-change: transform;
}

/* zdjęcie zajmuje prawe ~70%, tekst stoi na czystym tle */
.frc-awd__bg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

.frc-awd::before {
  /* przyciemnienie: mocne po lewej pod tekstem, góra i dół wtapiają się w tło strony */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #2a0b35 0%, rgba(42, 11, 53, 0) 18%, rgba(42, 11, 53, 0) 82%, #2a0b35 100%), linear-gradient(90deg, #2a0b35 0%, #2a0b35 30%, rgba(42, 11, 53, 0.7) 42%, rgba(42, 11, 53, 0.2) 62%, rgba(42, 11, 53, 0.05) 100%);
}

.frc-awd .frc-sec__inner {
  width: 100%;
}

.frc-awd__content {
  max-width: 560px;
}

.frc-awd__lead {
  margin: 20px 0 32px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.frc-awd__code {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin-top: clamp(40px, 5vw, 64px);
  shape-rendering: crispEdges;
}

.frc-awd__code rect {
  fill: var(--frc-orange);
}

.frc-awd__code rect.d {
  fill: rgba(255, 115, 0, 0.38);
}

@media (max-width: 767px) {
  /* telefon: statuetki widać w pasie nad tekstem, tekst niżej na ciemnym tle */
  .frc-awd {
    align-items: flex-end;
    min-height: 0;
    padding-top: min(82vw, 380px);
  }
  .frc-awd__bg {
    left: 0;
    inset-block: -10% 30%;
  }
  .frc-awd__bg img {
    -o-object-position: 55% 40%;
       object-position: 55% 40%;
  }
  .frc-awd::before {
    background: linear-gradient(180deg, #2a0b35 0%, rgba(42, 11, 53, 0.1) 12%, rgba(42, 11, 53, 0.15) 30%, rgba(42, 11, 53, 0.85) 50%, #2a0b35 62%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-awd__bg {
    top: 0;
    bottom: 0;
  }
}
/* ===========================================================
   SEKCJA „GALERIA” – zdjęcia z poprzedniej edycji (z CMS, dowolna liczba)
   Siatka: pierwsze zdjęcie duże (2×2 pola na desktopie, cała szerokość na telefonie), reszta 3:2.
   Ostatni kafelek „Zobacz całą galerię” skrypt rozciąga tak, żeby domknął ostatni rząd – bez dziur przy każdej liczbie zdjęć.
   Zdjęcia wjeżdżają pikselowym „przecieraniem”, po kliknięciu otwiera się podgląd (strzałki, klawiatura, przesuwanie palcem).
   =========================================================== */
.frc-gal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.frc-gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.frc-gal > li {
  position: relative;
  min-width: 0;
}

.frc-gal > li:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.frc-gal__item {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #36123f;
}

.frc-gal > li:first-child .frc-gal__item {
  aspect-ratio: auto;
}

.frc-gal__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s;
}

.frc-gal__item:hover img,
.frc-gal__item:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1.1);
}

/* po najechaniu: pikselowy narożnik i kwadrat z lupą */
.frc-gal__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
  box-shadow: 10px 0 var(--frc-orange), 0 10px var(--frc-orange);
  opacity: 0;
  transition: opacity 0.15s steps(2);
}

.frc-gal__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  background: var(--frc-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23fff'%3E%3Cpath d='M2 1h3v1H2zM1 2h1v3H1zM5 2h1v3H5zM2 5h3v1H2zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8z'/%3E%3C/svg%3E") center/20px no-repeat;
  transform: translate(100%, 100%);
  transition: transform 0.25s steps(3);
}

.frc-gal__item:hover::before,
.frc-gal__item:focus-visible::before {
  opacity: 1;
}

.frc-gal__item:hover::after,
.frc-gal__item:focus-visible::after {
  transform: none;
}

.frc-gal__item:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* kafelek „Zobacz całą galerię” */
.frc-gal__more {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  min-height: 120px;
  padding: clamp(18px, 2vw, 28px);
  background: var(--frc-orange);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.25s;
}

.frc-gal__more:hover,
.frc-gal__more:focus-visible {
  background: #7b3592;
}

.frc-gal__more-txt {
  font: 400 clamp(15px, 1.3vw, 18px)/1.3 "cofo-sans-pixel", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.frc-gal__more svg {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  fill: currentColor;
  shape-rendering: crispEdges;
  transition: transform 0.2s steps(2);
}

.frc-gal__more:hover svg {
  transform: translateX(6px);
}

/* wjazd: zdjęcie odsłania się skokowo od lewej, kafelki po kolei */
.frc-gal.is-armed .frc-gal__item,
.frc-gal.is-armed .frc-gal__more {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.frc-gal.is-in .frc-gal__item,
.frc-gal.is-in .frc-gal__more {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  transition: -webkit-clip-path 0.5s steps(8);
  transition: clip-path 0.5s steps(8);
  transition: clip-path 0.5s steps(8), -webkit-clip-path 0.5s steps(8);
  transition-delay: calc(var(--n, 0) * 70ms);
}

@media (max-width: 767px) {
  .frc-gal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frc-gal > li:first-child {
    grid-row: auto;
  }
  .frc-gal > li:first-child .frc-gal__item {
    aspect-ratio: 3/2;
  }
  .frc-gal__item::after {
    width: 34px;
    height: 34px;
    background-size: 16px;
  }
}
/* podgląd zdjęcia */
.frc-lb {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #14051a;
  color: #fff;
  font-family: "alfabet", sans-serif;
}

.frc-lb::backdrop {
  background: rgba(20, 5, 26, 0.7);
}

.frc-lb[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.frc-lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 3vw, 32px);
}

.frc-lb__count {
  font: 400 15px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.12em;
}

.frc-lb__count b {
  color: var(--frc-orange, #ff7300);
  font-weight: 400;
}

.frc-lb__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(16px, 7vw, 96px);
  touch-action: pan-y;
}

.frc-lb__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.frc-lb__img.is-in {
  animation: frcLbIn 0.42s steps(7) both;
}

@keyframes frcLbIn {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
.frc-lb__cap {
  min-height: 1.5em;
  margin: 0;
  padding: 14px clamp(16px, 3vw, 32px) 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  text-align: center;
}

.frc-lb__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: #fff;
  color: #2a0b35;
  font: 400 20px/1 "cofo-sans-pixel", monospace;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.frc-lb__btn:hover,
.frc-lb__btn:focus-visible {
  background: var(--frc-orange, #ff7300);
  color: #fff;
}

.frc-lb__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.frc-lb__btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.frc-lb__prev,
.frc-lb__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.frc-lb__prev {
  left: clamp(8px, 2vw, 24px);
}

.frc-lb__next {
  right: clamp(8px, 2vw, 24px);
}

@media (max-width: 767px) {
  .frc-lb__stage {
    padding: 0;
  }
  .frc-lb__prev,
  .frc-lb__next {
    top: auto;
    bottom: 8px;
    transform: none;
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-gal.is-armed .frc-gal__item,
  .frc-gal.is-armed .frc-gal__more {
    -webkit-clip-path: none;
            clip-path: none;
  }
  .frc-lb__img.is-in {
    animation: none;
  }
  .frc-gal__item img {
    transition: none;
  }
}
/* ===========================================================
   SEKCJA „ZOSTAŃ PARTNEREM” – tekst + dwie osoby kontaktowe.
   Zdjęcie wyostrza się z pikseli, gdy karta wjedzie na ekran (i na chwilę rozpikselowuje po najechaniu),
   a potem pod zdjęciem piksel po pikselu „dorysowuje się” pomarańczowy motyw jak u prelegentów.
   =========================================================== */
.frc-ptn {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.frc-ptn__lead {
  margin: 20px 0 0;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* „Zapraszamy do kontaktu”: po wjechaniu na ekran wpisuje się litera po literze (jak w terminalu),
   potem pojawia się pikselowa strzałka, która skokowo „puka” w stronę kart z kontaktami (w prawo, a pod spodem – w dół) */
.frc-ptn__invite {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 1.4em;
  margin: 36px 0 0;
  color: var(--frc-orange);
  font: 400 clamp(17px, 1.5vw, 20px)/1.4 "cofo-sans-pixel", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.frc-ptn__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}

.frc-ptn__typed::after {
  content: "_";
  animation: frcCaret 1s steps(1) infinite;
}

.frc-ptn__typed span {
  display: none;
}

/* kursor „_” idzie za ostatnią wpisaną literą */
.frc-ptn__typed span.on {
  display: inline;
}

.frc-ptn__arrow {
  flex: none;
  width: 27px;
  height: 27px;
  fill: currentColor;
  shape-rendering: crispEdges;
  opacity: 0;
}

.frc-ptn__invite.is-typed .frc-ptn__arrow {
  opacity: 1;
  animation: frcKnock 1.2s steps(1) infinite;
}

@keyframes frcKnock {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(6px);
  }
  40% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(6px);
  }
}
@keyframes frcKnockDown {
  0%, 100% {
    transform: rotate(90deg) translateX(0);
  }
  20% {
    transform: rotate(90deg) translateX(6px);
  }
  40% {
    transform: rotate(90deg) translateX(0);
  }
  60% {
    transform: rotate(90deg) translateX(6px);
  }
}
@keyframes frcCaret {
  50% {
    opacity: 0;
  }
}
.frc-ptn__people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.frc-ptn__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 2.6vw, 40px) clamp(20px, 2vw, 32px) clamp(24px, 2.4vw, 32px);
  background: #36123f;
  text-align: center;
  transition: background-color 0.3s;
}

.frc-ptn__card::before {
  /* pikselowy narożnik jak w boksach Tematyki */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
  box-shadow: 10px 0 var(--frc-orange), 0 10px var(--frc-orange);
}

.frc-ptn__card:hover {
  background: #401649;
}

.frc-ptn__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: calc(16.6666666667% + 16px);
  /* miejsce na wystający motyw – jak u prelegentów (2 rzędy po 1/12 szerokości) */
  background: #2a0b35;
}

.frc-ptn__photo img,
.frc-ptn__photo canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.frc-ptn__photo.is-live img {
  visibility: hidden;
}

/* z JS widać canvas; bez JS zwykłe zdjęcie */
.frc-ptn__pix {
  position: absolute;
  left: 0;
  top: 91.6666666667%;
  /* rząd 0 nachodzi na zdjęcie, rzędy 1–2 wystają */
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
  pointer-events: none;
}

.frc-ptn__pix rect {
  fill: var(--frc-orange);
  opacity: 0;
}

.frc-ptn__card.is-revealed .frc-ptn__pix rect {
  animation: frcPixOn 0.01s steps(1) forwards;
  animation-delay: calc(560ms + var(--i) * 28ms);
}

@keyframes frcPixOn {
  to {
    opacity: 1;
  }
}
.frc-ptn__name {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

.frc-ptn__role {
  margin: 10px 0 0;
  color: var(--frc-orange);
  font: 400 13px/1.5 "cofo-sans-pixel", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.frc-ptn__mail {
  margin: 14px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
  overflow-wrap: anywhere;
}

.frc-ptn__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.frc-sec .frc-ptn__actions .frc-btn {
  font-size: 14px;
  white-space: nowrap;
}

.frc-sec .frc-ptn__actions .frc-btn__label {
  padding: 14px 18px 13px;
}

.frc-sec .frc-ptn__actions .frc-btn__arrow {
  width: 44px;
}

/* kopiuj e-mail: biały kwadrat z pikselowymi kartkami, pomarańczowe wypełnienie od dołu */
.frc-ptn__copy {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  flex: none;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--frc-bg);
  cursor: pointer;
  isolation: isolate;
}

.frc-ptn__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frc-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s;
}

.frc-ptn__copy:hover::before,
.frc-ptn__copy:focus-visible::before,
.frc-ptn__copy.is-done::before {
  transform: scaleY(1);
}

.frc-ptn__copy svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.frc-ptn__copy .ok {
  display: none;
}

.frc-ptn__copy.is-done .ok {
  display: block;
}

.frc-ptn__copy.is-done .doc {
  display: none;
}

.frc-ptn__tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  padding: 6px 8px 5px;
  background: #fff;
  color: var(--frc-bg);
  font: 400 12px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.frc-ptn__copy.is-done .frc-ptn__tip {
  opacity: 1;
}

/* ---- partnerzy poprzedniej edycji: przesuwający się pas logotypów ----
   Kafelki są białe i mają dokładnie proporcje plików z CMS (250×140), więc pola ochronne zostają takie, jak w pliku.
   Pas jedzie powoli w lewo (pauza po najechaniu / fokusie i przyciskiem), przy „ogranicz ruch” – zwykłe przewijanie w bok. */
.frc-logos {
  grid-column: 1/-1;
  margin-top: clamp(24px, 4vw, 56px);
  min-width: 0;
}

.frc-logos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.frc-logos__title {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  margin: 0;
  color: #fff;
  font: 400 15px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.frc-logos__title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
}

.frc-logos__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 7px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: 400 12px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}

.frc-logos__toggle:hover,
.frc-logos__toggle:focus-visible {
  color: var(--frc-orange);
}

.frc-logos__toggle svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.frc-logos__toggle .play,
.frc-logos.is-paused .frc-logos__toggle .pause {
  display: none;
}

.frc-logos.is-paused .frc-logos__toggle .play {
  display: block;
}

.frc-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.frc-logos__track {
  display: flex;
  gap: 16px;
  width: -moz-max-content;
  width: max-content;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  animation: frcLogos var(--dur, 90s) linear infinite;
}

.frc-logos:hover .frc-logos__track,
.frc-logos:focus-within .frc-logos__track,
.frc-logos.is-paused .frc-logos__track {
  animation-play-state: paused;
}

@keyframes frcLogos {
  to {
    transform: translateX(calc(-50% - 8px));
  }
}
/* lista jest zdublowana – po połowie pętla się domyka */
.frc-logos__item {
  flex: none;
  width: clamp(150px, 15vw, 200px);
}

.frc-logos__link {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-user-drag: none;
}

.frc-logos__tile {
  position: relative;
  display: block;
  aspect-ratio: 250/140;
  background: #fff;
}

.frc-logos__tile img {
  display: block;
  width: 100%;
  height: 100%;
}

.frc-logos__tile::after {
  /* po najechaniu: pomarańczowa ramka w pikselowym rytmie */
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid var(--frc-orange);
  opacity: 0;
  transition: opacity 0.15s steps(2);
}

.frc-logos__link:hover .frc-logos__tile::after,
.frc-logos__link:focus-visible .frc-logos__tile::after {
  opacity: 1;
}

.frc-logos__link:focus-visible {
  outline: none;
}

.frc-logos__cat {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font: 400 11px/1.3 "cofo-sans-pixel", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.frc-logos__link:hover .frc-logos__cat {
  color: var(--frc-orange);
}

@media (max-width: 599px) {
  .frc-logos__item {
    width: 140px;
  }
  .frc-logos__track {
    gap: 12px;
  }
  @keyframes frcLogos {
    to {
      transform: translateX(calc(-50% - 6px));
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-logos__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .frc-logos__track {
    animation: none;
  }
  .frc-logos__toggle {
    display: none;
  }
}
@media (max-width: 1199px) {
  .frc-ptn {
    grid-template-columns: minmax(0, 1fr);
  }
  .frc-ptn__arrow {
    transform: rotate(90deg);
  }
  .frc-ptn__invite.is-typed .frc-ptn__arrow {
    animation-name: frcKnockDown;
  }
  .frc-ptn__intro {
    max-width: 680px;
  }
}
@media (max-width: 559px) {
  .frc-ptn__people {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-ptn__pix rect {
    opacity: 1;
  }
  .frc-ptn__card.is-revealed .frc-ptn__pix rect {
    animation: none;
  }
  .frc-ptn__typed::after {
    animation: none;
  }
  .frc-ptn__arrow {
    opacity: 1;
  }
  .frc-ptn__invite.is-typed .frc-ptn__arrow {
    animation: none;
  }
}
/* ===========================================================
   STOPKA
   1) odliczanie do konferencji + przyciski, 2) logo, skróty menu, organizator,
   3) wielki pikselowy napis „FRC 2027” na canvasie – piksele pod kursorem / palcem rozżarzają się na pomarańczowo i powoli gasną,
      a w spoczynku pojedyncze piksele napisu co chwilę iskrzą, 4) pasek prawny + „do góry”.
   =========================================================== */
.frc-foot {
  --frc-orange: #ff7300;
  --frc-bg: #2a0b35;
  /* kolor tekstu na białym przycisku */
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) var(--frc-pad-x, clamp(16px, 4.6vw, 88px)) 0;
  background: #1f0828;
  color: #fff;
  font-family: "alfabet", sans-serif;
  -webkit-font-smoothing: antialiased;
  --frc-pad-x: clamp(16px, 4.6vw, 88px);
}

.frc-foot *,
.frc-foot *::before,
.frc-foot *::after {
  box-sizing: border-box;
}

.frc-foot__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.frc-foot .frc-btn {
  font-size: 15px;
}

.frc-foot .frc-btn__label {
  padding: 15px 22px 14px;
}

.frc-foot .frc-btn__arrow {
  width: 46px;
}

/* 1) odliczanie */
.frc-foot__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px 64px;
  align-items: end;
}

.frc-foot__kicker {
  margin: 0 0 14px;
  color: var(--frc-orange);
  font: 400 15px/1.3 "cofo-sans-pixel", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.frc-foot__title {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
}

.frc-foot__date {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
}

.frc-foot__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.frc-cd {
  display: flex;
  gap: 10px;
  margin: 0;
}

.frc-cd__unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(76px, 7.4vw, 108px);
  padding: 18px 10px 14px;
  background: #36123f;
}

.frc-cd__unit::before {
  /* pikselowy narożnik */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--frc-orange);
  box-shadow: 8px 0 var(--frc-orange), 0 8px var(--frc-orange);
}

.frc-cd__num {
  font: 400 clamp(34px, 3.8vw, 56px)/1 "cofo-sans-pixel", monospace;
  font-variant-numeric: tabular-nums;
}

.frc-cd__lbl {
  margin-top: 10px;
  color: var(--frc-orange);
  font: 400 12px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.frc-cd__unit.is-tick .frc-cd__num {
  color: var(--frc-orange);
}

/* zmiana cyfry błyska na pomarańczowo przez jedną klatkę */
.frc-foot__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}

/* 2) logo, skróty, organizator */
.frc-foot__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px 56px;
  align-items: center;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 32px;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.frc-foot__logo {
  display: block;
  line-height: 0;
}

.frc-foot__logo img {
  height: 52px;
  width: auto;
}

.frc-foot__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frc-foot__nav a,
.frc-foot__legal a,
.frc-foot__legal button {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}

.frc-foot__nav a {
  font-size: 16px;
  font-weight: 600;
}

.frc-foot__nav a:hover,
.frc-foot__nav a:focus-visible,
.frc-foot__legal a:hover,
.frc-foot__legal button:hover {
  color: var(--frc-orange);
}

.frc-foot__org {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.6);
  font: 400 12px/1.3 "cofo-sans-pixel", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.frc-foot__org a {
  display: block;
  line-height: 0;
}

.frc-foot__org img {
  height: 38px;
  width: auto;
}

/* 3) pikselowy napis */
.frc-foot__mark {
  display: block;
  width: 100%;
  margin-top: clamp(40px, 5vw, 72px);
  touch-action: pan-y;
  cursor: crosshair;
}

/* 4) pasek prawny */
.frc-foot__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 22px 0 28px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.frc-foot__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.frc-foot__legal button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.frc-foot__copy {
  margin: 0;
}

.frc-foot__top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 400 13px/1 "cofo-sans-pixel", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.frc-foot__top span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--frc-orange);
  transition: transform 0.2s steps(2);
}

.frc-foot__top svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  shape-rendering: crispEdges;
}

.frc-foot__top:hover span,
.frc-foot__top:focus-visible span {
  transform: translateY(-4px);
}

.frc-foot a:focus-visible,
.frc-foot button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 999px) {
  .frc-foot__cta {
    grid-template-columns: minmax(0, 1fr);
  }
  .frc-foot__info {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
/* telefon: bez skrótów menu (są w menu u góry), logo FRC po lewej, organizator po prawej */
@media (max-width: 767px) {
  .frc-foot__info {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  .frc-foot__nav {
    display: none;
  }
  .frc-foot__org {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .frc-foot__org img {
    height: 32px;
  }
}
@media (max-width: 599px) {
  .frc-cd {
    gap: 6px;
  }
  .frc-cd__unit {
    flex: 1;
    min-width: 0;
    padding: 14px 4px 12px;
  }
  .frc-cd__num {
    font-size: 30px;
  }
  .frc-cd__lbl {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .frc-foot__btns .frc-btn {
    width: 100%;
  }
  .frc-foot__btns .frc-btn__label {
    flex: 1;
  }
  .frc-foot__logo img {
    height: 44px;
  }
  .frc-foot__top {
    margin-left: auto;
  }
  /* telefon: „Do góry” w osobnym wierszu, przy prawej krawędzi */
}
/* desktop/tablet: treść odsunięta od pomarańczowego paska (4 piksele po max(26 px, 1/30 szerokości)) */
@media (min-width: 600px) {
  .frc-sec:has(> [data-frc-deco=edge-left]) {
    padding-left: calc(max(104px, 13.34vw) + 24px);
  }
  .frc-sec:has(> [data-frc-deco=edge-right]) {
    padding-right: calc(max(104px, 13.34vw) + 24px);
  }
}
/* telefon: tekst odsunięty od krawędzi z pomarańczowym paskiem (2 piksele × 26 px) */
@media (max-width: 599px) {
  .frc-sec:has(> [data-frc-deco=edge-left]) {
    padding-left: 72px;
  }
  .frc-sec:has(> [data-frc-deco=edge-right]) {
    padding-right: 72px;
  }
}
/* ---- telefon / wąski kontener: ilustracja nad tekstem ---- */
@container (max-width: 720px) {
  .frc__inner {
    aspect-ratio: auto;
    padding: calc(var(--frc-head-h) + 12px) 16px 40px;
  }
  .frc__art {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 440px);
    margin: 0 auto;
  }
  .frc__text {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    align-items: flex-start;
    text-align: left;
    margin-top: 20px;
  }
  .frc__logo {
    width: min(80%, 340px);
  }
  .frc__claim {
    margin-top: 20px;
    font-size: 18px;
  }
  .frc__date {
    margin-top: 10px;
    font-size: 16px;
  }
  /* claim i data zaczynają się tam, gdzie „Congress” i kreska w logo (ok. 29% szerokości logo) */
  .frc__claim,
  .frc__date {
    padding-left: calc(min(80%, 340px) * 0.29);
  }
  .frc__btns {
    align-self: stretch;
    gap: 10px;
    margin-top: 24px;
  }
  .frc-btn {
    font-size: 16px;
  }
  .frc-btn__label {
    padding: 13px 16px 12px;
  }
  .frc-btn__arrow {
    width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc-btn__label::after {
    transition: none;
  }
}
/* ===========================================================
   ILUSTRACJA – warstwy z pliku grafika (ilu.ai), pozycje w % artboardu
   =========================================================== */
.frc-l,
.frc-g,
.frc-flip,
.frc-screen {
  position: absolute;
}

.frc-l {
  display: block;
  max-width: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.frc-g {
  inset: 0;
}

.frc-flip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.frc-screen svg {
  display: block;
  width: 100%;
  height: 100%;
}

.frc-ic {
  fill: none;
  stroke: #f6f4f7;
  stroke-width: 10.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===========================================================
   RUCH – pętla 18 s: ikona w telefonie co 3 s, kostki obracają się co 9 s
   =========================================================== */
/* ikony na ekranie telefonu – karuzela */
.frc-slide {
  transform: translateX(260px);
  animation: frcSlide 18s cubic-bezier(0.65, 0, 0.3, 1) infinite;
  animation-delay: calc(var(--n) * 3s - 18.6s);
}

@keyframes frcSlide {
  0% {
    transform: translateX(260px);
  }
  2.8% {
    transform: translateX(0);
  }
  16.1% {
    transform: translateX(0);
  }
  18.9% {
    transform: translateX(-260px);
  }
  100% {
    transform: translateX(-260px);
  }
}
/* kursor: na początku pętli najeżdża na torbę i klika, potem czeka niżej
   i odsuwa się przy każdej zmianie ikony */
.frc-cursor {
  transform-box: fill-box;
  transform-origin: 8% 4%;
  animation: frcCursor 18s ease-in-out infinite;
}

@keyframes frcCursor {
  0% {
    transform: translate(0, 0) scale(1);
  }
  3% {
    transform: translate(0, 0) scale(0.86);
  }
  5%, 8% {
    transform: translate(0, 0) scale(1);
  }
  11% {
    transform: translate(22px, 72px);
  }
  12.7% {
    transform: translate(22px, 72px);
  }
  14.4% {
    transform: translate(-36px, 84px);
  }
  16.1% {
    transform: translate(22px, 72px);
  }
  29.4% {
    transform: translate(22px, 72px);
  }
  31.1% {
    transform: translate(-36px, 84px);
  }
  32.8% {
    transform: translate(22px, 72px);
  }
  46.1% {
    transform: translate(22px, 72px);
  }
  47.8% {
    transform: translate(-36px, 84px);
  }
  49.5% {
    transform: translate(22px, 72px);
  }
  62.7% {
    transform: translate(22px, 72px);
  }
  64.4% {
    transform: translate(-36px, 84px);
  }
  66.1% {
    transform: translate(22px, 72px);
  }
  79.4% {
    transform: translate(22px, 72px);
  }
  81.1% {
    transform: translate(-36px, 84px);
  }
  82.8% {
    transform: translate(22px, 72px);
  }
  96.1% {
    transform: translate(22px, 72px);
  }
  97.8% {
    transform: translate(-36px, 84px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* kostki: obrót wokół osi pionowej i zamiana ikon (AI ↔ koszyk) co 9 s */
.frc-flip {
  animation: frcFlip 18s ease-in-out infinite;
}

.frc-flip--late {
  animation-delay: -17.6s;
}

.frc-flip .frc-face-a {
  animation: frcFaceA 18s infinite step-end;
  animation-delay: inherit;
}

.frc-flip .frc-face-b {
  opacity: 0;
  animation: frcFaceB 18s infinite step-end;
  animation-delay: inherit;
}

@keyframes frcFlip {
  0%, 33.3% {
    transform: perspective(900px) rotateY(0);
  }
  35% {
    transform: perspective(900px) rotateY(88deg);
  }
  35.01% {
    transform: perspective(900px) rotateY(-88deg);
  }
  36.7%, 83.3% {
    transform: perspective(900px) rotateY(0);
  }
  85% {
    transform: perspective(900px) rotateY(88deg);
  }
  85.01% {
    transform: perspective(900px) rotateY(-88deg);
  }
  86.7%, 100% {
    transform: perspective(900px) rotateY(0);
  }
}
@keyframes frcFaceA {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
}
@keyframes frcFaceB {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
}
/* lekkie unoszenie brył */
.frc-float,
.frc-phone {
  animation: frcFloat 6s ease-in-out infinite alternate;
  animation-delay: var(--fd, 0s);
}

@keyframes frcFloat {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.9%);
  }
}
/* płytki nad telefonem – przesuwająca się fala jasności */
.frc-plates {
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 38%, #000 50%, rgba(0, 0, 0, 0.55) 62%) 100% 0/300% 100%;
  mask: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 38%, #000 50%, rgba(0, 0, 0, 0.55) 62%) 100% 0/300% 100%;
  animation: frcSweep 3s linear infinite;
}

@keyframes frcSweep {
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
/* odblask przebiegający po pomarańczowych szynach */
.frc-glint {
  filter: brightness(1.45) saturate(1.05);
  -webkit-mask: linear-gradient(120deg, transparent 44%, #000 50%, transparent 56%) 100% 100%/300% 300%;
  mask: linear-gradient(120deg, transparent 44%, #000 50%, transparent 56%) 100% 100%/300% 300%;
  animation: frcGlint 6s ease-in-out infinite;
}

.frc-glint--late {
  animation-delay: -3s;
}

@keyframes frcGlint {
  0% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  55%, 100% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
/* pomarańczowe kreski z prawej strony telefonu – „ładowanie” od góry do dołu */
.frc-ticks {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  animation: frcTicks 9s infinite;
  animation-delay: -6.4s;
}

@keyframes frcTicks {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
    animation-timing-function: steps(12, end);
  }
  7%, 25% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
    animation-timing-function: steps(12, end);
  }
  32%, 100% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .frc *,
  .frc *::before {
    animation: none !important;
  }
  .frc-slide {
    transform: none;
  }
  .frc-slide:not(:first-of-type) {
    display: none;
  }
  .frc-ticks {
    -webkit-clip-path: none;
            clip-path: none;
  }
  .frc-glint {
    display: none;
  }
}
/* wersja „start”: link rejestracji jest niewidoczny, zanim skrypt podmieni go na „Rejestracja wkrótce” (bez mignięcia) */
.frc-v-start a[data-frc-reg] {
  visibility: hidden;
}

/* ===========================================================
   PODSTRONA TEKSTOWA (.frc-sub > .subpage z CMS)
   Nagłówek na ciemnym pikselowym tle (jak hero, bez animacji), treść na białym tle w kolumnie do czytania.
   Style dotyczą zwykłych znaczników z edytora – CMS nie musi dodawać żadnych klas.
   =========================================================== */
.frc-sub {
  --frc-orange: #ff7300;
  --frc-ink: #2a0b35;
  --frc-bg: #2a0b35;
  --frc-pad-x: clamp(16px, 4.6vw, 88px);
  --frc-panel: 980px;
  --frc-panel-pad: clamp(22px, 5.5vw, 80px);
  display: block;
  padding: 0 var(--frc-pad-x) clamp(72px, 9vw, 140px);
  background: #2a0b35 no-repeat 0 0;
  image-rendering: pixelated;
  font-family: "alfabet", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.frc-sub .subpage-content-cnt,
.frc-sub .subpage-header {
  image-rendering: auto;
}

.frc-sub *,
.frc-sub *::before,
.frc-sub *::after {
  box-sizing: border-box;
}

/* nagłówek: tekst na ciemnym pikselowym tle, wyrównany do lewej krawędzi treści w panelu */
.frc-sub .subpage-header {
  max-width: var(--frc-panel);
  margin: 0 auto;
  padding: calc(84px + clamp(48px, 7vw, 112px)) var(--frc-panel-pad) clamp(36px, 4.5vw, 64px);
  color: #fff;
}

.frc-sub .subpage-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.frc-sub .subpage-subtitle {
  margin-top: 20px;
  color: var(--frc-orange);
  font: 400 clamp(15px, 1.4vw, 19px)/1.45 "cofo-sans-pixel", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.frc-sub .subpage-subtitle:empty {
  display: none;
}

/* biały panel tylko pod treścią, z pikselowym narożnikiem jak boksy na stronie głównej */
.frc-sub .subpage-content-cnt {
  position: relative;
  max-width: var(--frc-panel);
  margin: 0 auto;
  padding: clamp(32px, 5.5vw, 80px) var(--frc-panel-pad) clamp(40px, 6vw, 88px);
  background: #fff;
}

.frc-sub .subpage-content-cnt::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 12px;
  height: 12px;
  background: var(--frc-orange);
  box-shadow: 12px 0 var(--frc-orange), 0 12px var(--frc-orange);
}

.frc-sub .subpage-content {
  max-width: 820px;
  margin: 0 auto;
  color: var(--frc-ink);
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.7;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .frc-sub .subpage-header {
    padding-top: 112px;
  }
  .frc-sub .subpage-content-cnt::before {
    top: -8px;
    left: -8px;
    width: 8px;
    height: 8px;
    box-shadow: 8px 0 var(--frc-orange), 0 8px var(--frc-orange);
  }
}
.frc-sec .frc-btn {
  font-size: 15px;
}

.frc-sec .frc-btn__label {
  padding: 15px 22px 14px;
}

.frc-sec .frc-btn__arrow {
  width: 46px;
}

/* ===========================================================
   SEKCJA „TEMATYKA” – wstęp redakcji ze zdjęciem + 7 krótkich boksów i kafel z przyciskiem
   =========================================================== */
.frc-topics__intro {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(310px, 26vw, 370px));
  gap: clamp(32px, 4vw, 72px);
  position: relative;
  margin-top: clamp(32px, 4vw, 52px);
}

/* zdjęcie nie wpływa na wysokość wiersza: podpis stoi na równi z dolną krawędzią tekstu,
   a sylwetka w razie potrzeby wychodzi do góry, obok nagłówka */
.frc-topics__author {
  position: absolute;
  grid-column: 2;
  grid-row: 1;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.frc-topics__author figcaption {
  position: relative;
}

/* wycięta sylwetka (PNG z przezroczystym tłem) bez podkładu, dół rozmywa się w tło sekcji */
.frc-topics__photo {
  position: relative;
}

.frc-topics__photo img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 52%, transparent 88%);
}

.frc-topics__name {
  position: relative;
  display: block;
  margin-top: -18%;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.frc-topics__role {
  display: block;
  margin-top: 8px;
  color: var(--frc-orange);
  font: 400 14px/1.45 "cofo-sans-pixel", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frc-topics__text {
  position: relative;
  max-width: 820px;
  width: 100%;
}

/* pikselowy cudzysłów nad tekstem */
.frc-topics__quote {
  display: block;
  width: 44px;
  height: 32px;
  margin-bottom: 22px;
  fill: var(--frc-orange);
  shape-rendering: crispEdges;
}

.frc-topics__lead {
  margin: 0;
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 600;
  line-height: 1.45;
}

.frc-topics__text p:not(.frc-topics__lead) {
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
}

/* boksy: 4 kolumny, ostatni kafel to przycisk */
.frc-topics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}

.frc-topic {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: clamp(22px, 2vw, 30px) clamp(20px, 1.8vw, 28px) clamp(24px, 2.2vw, 32px);
  background: #36123f;
  transition: background-color 0.3s;
}

/* pikselowy narożnik: trzy pomarańczowe kwadraty w kształcie litery L */
.frc-topic::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--frc-orange);
  box-shadow: 10px 0 var(--frc-orange), 0 10px var(--frc-orange);
}

/* po najechaniu u góry boksu rośnie skokowo pomarańczowa belka – jak pasek postępu */
.frc-topic::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--frc-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s steps(10, jump-end);
}

.frc-topic:hover {
  background: #401649;
}

.frc-topic:hover::after {
  transform: scaleX(1);
}

.frc-topic__icon {
  flex: none;
  width: 36px;
  height: 36px;
  margin-bottom: auto;
  fill: var(--frc-orange);
  shape-rendering: crispEdges;
}

.frc-topic__title {
  margin: 28px 0 0;
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.frc-topic__sub {
  margin: 12px 0 0;
  color: var(--frc-orange);
  font: 400 13px/1.5 "cofo-sans-pixel", monospace; /* dopisek pikselowym fontem */
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ósmy kafel: przycisk do tematyki */
.frc-topic--cta {
  justify-content: flex-end;
  gap: 24px;
  background: var(--frc-orange);
}

.frc-topic--cta::before {
  background: #fff;
  box-shadow: 10px 0 #fff, 0 10px #fff;
}

.frc-topic--cta::after {
  background: #fff;
}

.frc-topic--cta:hover {
  background: #ff8a26;
}

.frc-topic__more {
  margin: 0;
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--frc-bg);
}

.frc-topic--cta .frc-btn {
  align-self: flex-start;
}

.frc-topic--cta .frc-btn__label {
  background: var(--frc-bg);
  white-space: nowrap;
}

.frc-topic--cta:hover .frc-btn__label::after {
  transform: scaleX(1);
}

/* cały kafel klikalny */
.frc-topic--cta .frc-btn::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 1199px) {
  .frc-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .frc-topic {
    min-height: 0;
  }
}
@media (max-width: 899px) {
  .frc-topics__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  .frc-topics__author {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }
  /* na telefonie zdjęcie z podpisem nad tekstem */
  /* zdjęcie mniejsze, z prawej strony; podpis obok, wyrównany do zdjęcia */
  .frc-topics__author {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 0 20px;
    align-items: center;
  }
  .frc-topics__photo {
    grid-column: 2;
    grid-row: 1;
  }
  .frc-topics__author figcaption {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
  }
  .frc-topics__name {
    margin-top: 0;
    font-size: 18px;
  }
  .frc-topics__photo img {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 80%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 80%);
  }
  .frc-topics__author figcaption {
    padding-bottom: 10%;
  }
  /* środek widocznej sylwetki (dół zdjęcia się rozmywa) */
}
@media (max-width: 599px) {
  .frc-topics {
    grid-template-columns: minmax(0, 1fr);
  }
  .frc-topic {
    min-height: 0;
  }
  .frc-topic__icon {
    margin-bottom: 0;
  }
  .frc-topic__title {
    margin-top: 20px;
  }
  .frc-topic--cta {
    gap: 18px;
  }
  .frc-topics__author {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 0 16px;
  }
  .frc-topics__name {
    font-size: 17px;
  }
  .frc-topics__role {
    font-size: 12px;
  }
}
/*# sourceMappingURL=style.2027.css.map */