/* =========================================================
   Oblicze Biznesu – odwzorowanie strony głównej
   Font: Lato (Google Fonts) · siatka projektu: 1440 px
   ========================================================= */

:root {
  --bg: #192423;          /* tło główne */
  --bg-dark: #101211;     /* sekcje ciemne */
  --bg-card: #202e2d;     /* karty usług */
  --bg-chip: #181f1f;     /* przyciski menu */
  --bg-deep: #171e1e;     /* przycisk „Czytaj więcej”, ramka akcentu */
  --bg-pill: #324448;     /* przycisk „Zamknij / Zwiń” */
  --text: #f2fffd;
  --muted: #9cacaa;
  --dim: #5c6c6a;
  --line: #324448;
  --gold: #d69d51;
  --gold-icon: #e89931;
  --gold-light: #f2b965;
  --cta: linear-gradient(-35.774deg, #b37134 27%, #c28d3e 79%);
  --ease: cubic-bezier(.44, .13, .33, 1.01);
  --wrap: 1140px;
  --wrap-wide: 1320px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--bg);
  color: var(--muted);
  font-family: "Lato", "Lato Placeholder", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; color: var(--text); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { color: var(--text); font-weight: 900; }

/* ---------- typografia ---------- */
.t-h1 { font-size: 49px; line-height: 1.3; letter-spacing: -.02em; font-weight: 900; color: var(--text); }
.t-h2 { font-size: 39px; line-height: 1.3; letter-spacing: -.02em; font-weight: 900; color: var(--text); }
.t-h3 { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; font-weight: 900; color: var(--text); }
.t-lead { font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
.t-body { font-size: 20px; line-height: 1.5; }
.t-small { font-size: 16px; line-height: 1.5; }
.center { text-align: center; }

/* ---------- układ ---------- */
.section { position: relative; overflow: hidden; }
.section--dark { background: var(--bg-dark); }
.stage { position: relative; max-width: 1440px; margin: 0 auto; }
.wrap { position: relative; width: 100%; max-width: calc(var(--wrap) + 40px); margin: 0 auto; padding: 0 20px; }
.wrap--wide { max-width: calc(var(--wrap-wide) + 40px); }
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deco img, img.deco { width: 100%; height: 100%; }
img.topo, img.deco, .deco img, .svc__deco, .reviews__topo { max-width: none; }

/* ---------- przycisk CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  width: 604px;
  max-width: 100%;
  height: 88px;
  padding: 0 36px 0 42px;
  border-radius: 80px;
  background: var(--cta);
  box-shadow: 2px 2px 37px -8px rgba(245, 148, 51, .3);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.cta:hover { transform: scale(1.03); box-shadow: 2px 2px 44px -6px rgba(245, 148, 51, .45); filter: brightness(1.05); }
.cta svg { width: 42px; height: 38px; flex: none; }

/* pływający przycisk (pokazuje się po przewinięciu) */
.fab {
  position: fixed;
  left: 50%;
  bottom: 80px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 320px);
  transition: opacity .3s ease, transform .3s ease;
}
.fab.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

/* ---------- „pigułki” / przyciski pomocnicze ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-chip);
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  transition: background .25s, color .25s;
}
.chip:hover { background: #253131; color: var(--text); }

.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-deep);
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  transition: background .3s, color .3s;
}
.more-btn .ico { width: 16px; height: 17px; transition: transform .35s var(--ease); }
.more-btn .ico path { fill: currentColor; }
.more-btn.is-open,
.more-btn--pill { background: var(--bg-pill); color: var(--text); }
.more-btn.is-open .ico,
.more-btn--pill .ico { transform: rotate(45deg); }
.more-btn--pill .ico path,
.more-btn.is-open .ico path { fill: var(--muted); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; z-index: 2; padding: 60px 20px 0; }
.hero__glow {
  position: absolute; left: 50%; top: -409px; width: 1888px; height: 622px; margin-left: -944px;
  background: radial-gradient(50% 50% at 50% 50%, #2e452c 0%, rgba(49, 67, 71, 0) 100%);
  pointer-events: none;
}
.hero__deco-play { left: -52px; top: -25px; width: 607px; height: 662px; }
.hero__deco-yt { left: 1062px; top: 375px; width: 335px; height: 280px; }
.hero__deco-play-s { left: 90px; top: 918px; width: 142px; height: 150px; }

.nav { position: relative; z-index: 2; display: flex; justify-content: center; gap: 12px; }
.hero__inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 60px auto 0; text-align: center; }
.hero__title { max-width: 1140px; margin: 0 auto; }
.hero__lead { margin-top: 32px; color: var(--muted); }
.hero__cta { margin-top: 60px; }

.screen {
  position: relative;
  margin: 60px auto 0;
  max-width: 1140px;
  height: 680px;
  border-radius: 20px;
  border: 1px solid var(--dim);
  background: linear-gradient(180deg, rgba(34, 49, 52, 0) 0%, var(--bg) 100%);
  padding: 11px 11px 9px;
}
.screen__bar { display: flex; align-items: center; gap: 0; height: 16px; padding: 0 0 0 15px; }
.screen__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); margin-right: 6px; }
.screen__url { flex: 1; height: 16px; border-radius: 60px; background: var(--line); margin: 0 16px 0 10px; }
.screen__dot--end { width: 16px; height: 16px; margin: 0 8px 0 0; }
.screen__video { position: relative; margin-top: 11px; height: 631px; border-radius: 4px; overflow: hidden; }
.screen__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* animacje wejścia hero */
.appear-down { opacity: 0; transform: translateY(-24px); animation: appearDown .7s var(--ease) forwards; animation-delay: var(--d, 0s); }
.appear-up { opacity: 1; transform: translateY(150px) rotate(3deg); animation: appearUp 1.2s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes appearDown { to { opacity: 1; transform: none; } }
@keyframes appearUp { to { transform: none; } }

/* =========================================================
   CO ZYSKASZ
   ========================================================= */
.gains { margin-top: -160px; padding: 240px 20px 200px; }
.gains__title { position: relative; display: flex; flex-direction: column; align-items: center; }
.gains__outline { position: relative; width: 250px; height: 45px; }
.gains__outline img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gains__outline .fill { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) .3s; }
.gains__outline.is-in .fill { clip-path: inset(0 0 0 0); }
.gains__title h2 { margin-top: 12px; }
.gains__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 554px)); justify-content: center;
  column-gap: 32px; row-gap: 56px; margin-top: 79px;
}
.gain h3 { font-size: 39px; line-height: 1.3; letter-spacing: -.02em; }
.gain p { margin-top: 24px; color: var(--dim); }

/* =========================================================
   OFERTA
   ========================================================= */
.offer { padding: 119px 20px 119px; }
.offer__head { max-width: var(--wrap); margin: 0 auto; text-align: center; }
.offer__head p { margin-top: 16px; }
.offer__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1030px; margin: 32px auto 0; }

.svc { position: relative; max-width: 1220px; margin: 120px auto 0; scroll-margin-top: 40px; }


.svc__box {
  position: relative; z-index: 1;
  padding: 0 40px;
  border-radius: 40px;
  transition: background-color .4s ease, padding .4s ease;
}
.svc.is-open .svc__box { background: var(--bg-card); padding: 40px; }
.svc__row { position: relative; display: flex; align-items: center; gap: 80px; }
.svc__row--top { align-items: flex-start; }
.svc__row--gap40 { gap: 40px; }
.svc__text { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.svc.is-open .svc__text--pad { padding-bottom: var(--pad, 90px); }
.svc__desc { display: flex; flex-direction: column; gap: 16px; }

/* pasek „Zamknij szczegółowy opis / tytuł” */
.svc__bar { display: inline-flex; align-items: center; gap: 208px; padding: 0; border-radius: 16px; align-self: flex-start; }
.svc__bar-title { display: none; font-size: 27.9px; line-height: 1; letter-spacing: -.02em; font-weight: 700; color: var(--text); white-space: nowrap; }
.svc.is-open .svc__text--pad { position: static; }
.svc.is-open .svc__desc, .svc.is-open .svc__text h2 { position: relative; z-index: 2; }
.svc.is-open .svc__bar { position: absolute; z-index: 2; left: 0; bottom: 0; padding: 8px 32px 8px 8px; box-shadow: inset 0 0 0 1px var(--dim); }
.svc.is-open .svc__bar-title { display: block; }
.svc.is-open .svc__bar .more-btn { background: var(--bg-pill); color: var(--text); }
.svc.is-open .svc__bar .more-btn .ico { transform: rotate(45deg); }
.svc.is-open .svc__bar .more-btn .ico path { fill: var(--muted); }

.svc--inline-bar.is-open .svc__text--pad { position: relative; padding-bottom: 0; }
.svc--inline-bar.is-open .svc__bar { position: static; gap: 24px; }
.svc__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease), margin .5s var(--ease); }
.svc__more > div { overflow: hidden; min-height: 0; }
.svc.is-open .svc__more { grid-template-rows: 1fr; margin-top: 32px; }
.svc__more-inner { display: flex; flex-direction: column; gap: 48px; }
.svc__detail { display: flex; align-items: flex-start; gap: 48px; }
.svc__detail--center { align-items: center; }
.svc__detail .svc__desc { flex: 0 0 760px; max-width: 760px; }
.svc__note { padding: 32px; border-radius: 20px; background: var(--bg-deep); }

.svc__deco { position: absolute; z-index: 0; pointer-events: none; }

/* kompozycje zdjęć */
.media { position: relative; flex: none; width: var(--mw); height: var(--mh); z-index: 2; }
.media > * { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.media .ph { border-radius: 16px; overflow: hidden; }
.media .ph img { width: 100%; height: 100%; object-fit: cover; }
.media .ph--main { z-index: 2; }
.media .ph--extra { z-index: 3; }
.media .ph--plain { border-radius: 0; }
.media .ph--fill img { object-fit: fill; }
.media .frame { z-index: 1; border: 1px solid var(--line); border-radius: 28px; }
.media .ph--video { background: #111716; }
.media .ph--video iframe { position: absolute; left: 0; top: 50%; width: 100%; height: 505px; transform: translateY(-50%); border: 0; }

/* =========================================================
   DLA KOGO
   ========================================================= */
.who { padding: 160px 20px 160px; }
.who__line { position: absolute; left: -29px; top: 11px; width: 544px; height: 1px; background: var(--line); }
.who__grid { display: grid; grid-template-columns: minmax(0, 438px) 184px minmax(0, 438px); justify-content: center; column-gap: 40px; align-items: center; margin-top: 80px; }
.who__col { display: flex; flex-direction: column; gap: 60px; }
.who__col--l { text-align: right; }
.who__col--r { gap: 59px; }
.who__col p { font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
.who__kto { position: relative; width: 184px; height: 660px; }
.who__kto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.who__kto .fill { clip-path: inset(0 0 100% 0); }

/* =========================================================
   JAK DZIAŁAMY (sekcja przewijana)
   ========================================================= */
.how { padding: 120px 20px 0; }
.how__title { position: relative; z-index: 3; max-width: var(--wrap); margin: 0 auto; }
.how__track { position: relative; height: 4960px; max-width: var(--wrap-wide); margin: 61px auto 0; }
.how__sticky { position: sticky; top: 0; height: 100vh; min-height: 760px; display: flex; align-items: center; justify-content: center; gap: 68px; }
.how__topo { position: absolute; left: 98px; top: -25px; width: 975px; height: 950px; max-width: none; transform: rotate(-38deg); pointer-events: none; }
.how__stack { position: relative; z-index: 2; width: 580px; height: 732px; transform: perspective(1200px) translateY(-100px); flex: none; }
.plat { position: absolute; left: 0; width: 580px; height: 261px; transform: translateY(var(--ty)); transition: transform .6s var(--ease); }
.plat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plat .dark { position: absolute; inset: 0; }
.plat .col { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.plat.is-active .col { opacity: 1; }
.how__texts { position: relative; z-index: 3; width: 402px; height: 286px; flex: none; }
.how__mouse { position: absolute; left: 0; top: -60px; width: 43px; height: 80px; }
.how__mouse svg { width: 100%; height: 100%; }
.how__mouse-arrow { animation: mouse-arrow 2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes mouse-arrow { 0% { transform: translateY(-104px); } 100% { transform: translateY(104px); } }
@media (prefers-reduced-motion: reduce) { .how__mouse-arrow { animation: none; } }
.step { position: absolute; left: 0; right: 0; top: 143px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(-50%) translateY(30px); transition: opacity .45s ease, transform .45s var(--ease); pointer-events: none; }
.step.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.step__num { font-size: 36px; line-height: 45px; letter-spacing: -.3px; color: var(--dim); }
.step__num b { color: #fff; font-weight: 900; }
.step__line { height: 1px; background: var(--line); }
.step__desc { font-size: 28px; line-height: 1.3; letter-spacing: -.01em; font-weight: 900; color: var(--text); }
.how__nav { position: absolute; left: 0; top: 268px; display: flex; align-items: center; gap: 16px; }
.how__nav-btns { display: flex; gap: 10px; }
.round-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 40px; background: rgba(92, 108, 106, .5); color: var(--text); transition: background .25s; }
.round-btn:hover { background: rgba(92, 108, 106, .8); }
.round-btn svg { width: 24px; height: 24px; fill: currentColor; }
.how__skip { font-size: 16px; line-height: 24px; color: var(--muted); }
.how__skip:hover { color: var(--text); }

/* =========================================================
   O NAS
   ========================================================= */
.about { padding: 160px 20px 0; background: var(--bg-dark); }
.about__bg { position: absolute; left: 0; top: 0; width: 100%; height: 2552px; object-fit: cover; object-position: 50% 0; }
.about__bg-ov { position: absolute; left: 0; top: 0; width: 100%; height: 2552px; background: linear-gradient(180deg, rgba(16, 18, 18, .93) 0%, #0f1111 100%); }
.about__head { position: relative; z-index: 1; text-align: center; }
.about__head p { max-width: 900px; margin: 16px auto 0; }
.person { position: relative; z-index: 1; display: flex; align-items: center; gap: 80px; max-width: var(--wrap-wide); margin: 120px auto 0; }
.person:first-of-type { margin-top: 120px; }
.person__media { position: relative; flex: none; width: 528px; }
.person__media .photo { position: relative; z-index: 1; width: 100%; height: auto; }
.person__media .topo { position: absolute; z-index: 0; pointer-events: none; }
.person__text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.person__text .t-h2 { margin-bottom: 0; }
.person__desc { display: flex; flex-direction: column; gap: 16px; }
.quote { position: relative; z-index: 1; max-width: var(--wrap-wide); margin: 48px auto 0; padding: 32px 48px; border-radius: 28px; background: rgba(13, 13, 13, .75); }
.quote__body { display: flex; gap: 48px; margin-top: 16px; }
.quote__body > p { flex: 0 0 588px; max-width: 588px; }
.quote__sum { flex: 1; display: flex; gap: 16px; align-self: center; }
.quote__sep { position: relative; flex: none; width: 16px; }
.quote__sep::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(126.73deg, #1b3030 0%, #314f4d 100%); }
.quote__sep::after { content: ""; position: absolute; left: 8px; top: 24px; bottom: 0; width: 1px; border-radius: 6px; background: var(--line); }
.quote__sum div:last-child { flex: 1; padding: 32px 0 12px; font-style: italic; }

.brand { position: relative; margin-top: 0; padding: 120px 20px 160px; }
.brand__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand__ov { position: absolute; inset: 0; background: linear-gradient(180deg, #0f1111 11.26%, rgba(16, 18, 18, .93) 100%); }
.brand__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 80px; max-width: var(--wrap-wide); margin: 0 auto; }
.brand__text { flex: 0 0 646px; max-width: 646px; display: flex; flex-direction: column; gap: 24px; }
.brand__media { position: relative; flex: none; width: 594px; }

/* =========================================================
   REALIZACJE
   ========================================================= */
.works { padding: 160px 20px 160px; }
.works__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; max-width: var(--wrap-wide); margin: 80px auto 0; }
.work { padding: 24px 24px 48px; border-radius: 40px; background: rgba(16, 18, 17, .24); box-shadow: inset 0 0 0 1px var(--line); }
.work__video { position: relative; padding: 12px; border-radius: 20px; background: rgba(49, 67, 71, .2); border: 1px solid var(--line); }
.work__video .ratio { position: relative; aspect-ratio: 572 / 325; overflow: hidden; border-radius: 8px; }
.work__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work p { margin-top: 24px; font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
.channels { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 60px; max-width: var(--wrap-wide); margin: 80px auto 0; }
.channel { display: flex; align-items: flex-start; gap: 48px; }
.channel__img { flex: none; width: 384px; padding: 12px; border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.channel__img img { width: 360px; height: 250px; border-radius: 16px; object-fit: cover; }
.channel__info { flex: 1; display: flex; flex-direction: column; gap: 32px; }
.channel__stats { display: flex; flex-wrap: wrap; gap: 24px; }
.stat { display: inline-flex; align-items: center; gap: 16px; height: 50px; padding: 12px 24px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 20px; line-height: 26px; font-weight: 900; }
.stat img { height: 25px; flex: none; }
.channel__info p { font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }

/* =========================================================
   CO REALNIE ZYSKUJE BIZNES
   ========================================================= */
.benefits { padding: 160px 20px 160px; background: var(--bg-dark); }
.benefits__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.benefits__ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 18, 17, .97) 0%, rgba(16, 18, 17, .99) 34.23%, rgba(16, 18, 17, .99) 68.47%, rgba(16, 18, 17, .97) 100%); }
.benefits__cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: var(--wrap-wide); margin: 79px auto 0; align-items: start; }
.benefits__col { display: flex; flex-direction: column; gap: 32px; }
.benefit { padding: 32px 48px; border-radius: 28px; background: rgba(31, 38, 38, .3); box-shadow: inset 0 0 0 1px var(--line); }
.benefit__ico { display: block; width: 48px; height: 48px; fill: var(--gold-light); }
.benefit h3 { margin-top: 20px; font-size: 28px; line-height: 1.3; letter-spacing: -.02em; }
.benefit p { margin-top: 12px; }
.benefit .more-btn { margin-top: 28px; }
.benefit:not(.is-open) p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   OPINIE
   ========================================================= */
.reviews { padding: 160px 20px 160px; }
.reviews__topo { left: 50%; top: 129px; width: 1822px; height: 2135px; margin-left: -1101px; }
.reviews__head { position: relative; z-index: 1; text-align: center; }
.reviews__head p { max-width: 900px; margin: 16px auto 0; }
.reviews__cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 636px)); justify-content: center; gap: 48px; max-width: var(--wrap-wide); margin: 80px auto 0; }
.reviews__col { display: flex; flex-direction: column; gap: 80px; }
.reviews__col--r { padding-top: 120px; }
.review__video { position: relative; padding: 12px; border-radius: 28px; border: 1px solid var(--line); }
.review__video .ratio { position: relative; aspect-ratio: 612 / 345; border-radius: 16px; overflow: hidden; }
.review__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.review__heart { position: absolute; width: 67px; height: 56px; z-index: 2; }
.reviews__col--l .review__heart { right: -36px; top: 64px; }
.reviews__col--r .review__heart { left: -31px; top: 248px; }
.review h3 { margin-top: 16px; font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
.review p { letter-spacing: -.01em; }

/* =========================================================
   FAQ + WNĘTRZA + CENA
   ========================================================= */
.inner { background: var(--bg-dark); }
.faq { padding: 180px 20px 0; }
.faq__list { display: flex; flex-direction: column; gap: 16px; max-width: var(--wrap); margin: 80px auto 0; }
.faq__item { border-radius: 28px; box-shadow: inset 0 0 0 1px var(--line); }
.faq__q { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 71.4px; padding: 32px 48px 0 48px; text-align: left; color: var(--gold); font-size: 28px; line-height: 1.3; letter-spacing: -.02em; }
.faq__q svg { flex: none; width: 42px; height: 35px; fill: var(--gold-icon); transition: transform .4s var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p { padding: 16px 48px 32px; font-size: 25px; line-height: 1.5; letter-spacing: -.01em; }
.faq__item:not(.is-open) .faq__q { padding-bottom: 32px; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.gallery { position: relative; z-index: 2; padding: 180px 20px 0; }
.gallery__sub { margin-top: 16px; color: var(--dim); }
.gallery__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 554px)); justify-content: center; gap: 32px; margin-top: 80px; }
.gallery__col { display: flex; flex-direction: column; gap: 32px; }
.gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.gphoto { position: relative; display: block; overflow: hidden; border-radius: 16px; cursor: zoom-in; }
.gphoto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gphoto:hover img { transform: scale(1.04); }
.gphoto--big { height: 434px; }
.gphoto--small { height: 307px; }
.gphoto .zoom { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 80px; background: rgba(50, 68, 72, .6); }
.gphoto--big .zoom { width: 36px; height: 36px; }
.gphoto .zoom svg { width: 16px; height: 16px; fill: var(--text); }
.gphoto--big .zoom svg { width: 20px; height: 20px; }
.gallery__frame { position: absolute; border: 1px solid var(--line); border-radius: 16px; pointer-events: none; }
.gallery__frame--1 { left: calc(50% + 196px); top: -45px; width: 574px; height: 386px; }
.gallery__frame--2 { left: calc(50% - 1000px); bottom: -60px; width: 574px; height: 241px; z-index: 3; }

.price { position: relative; z-index: 1; margin-top: -140px; padding: 240px 20px 160px; background: #182423; text-align: center; }
.price p { max-width: 912px; margin: 31px auto 0; }
.price .cta { margin-top: 48px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 40px; background: rgba(10, 12, 12, .92); opacity: 0; pointer-events: none; transition: opacity .3s; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox__close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(92, 108, 106, .5); color: var(--text); font-size: 28px; line-height: 48px; }
.lightbox__nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(92, 108, 106, .5); color: var(--text); font-size: 26px; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

/* ---------- pojawianie się przy przewijaniu ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   TABLET  (768–1079 px)
   ========================================================= */
@media (max-width: 1079.98px) {
  .t-h1 { font-size: 40px; }
  .t-h2, .gain h3 { font-size: 32px; }
  .t-h3, .benefit h3 { font-size: 24px; }
  .t-lead, .who__col p, .work p, .channel__info p, .faq__a p { font-size: 21px; }
  body, .t-body { font-size: 18px; }

  .hero__deco-yt { left: auto; right: -60px; }
  .screen { height: auto; }
  .screen__video { height: auto; aspect-ratio: 16 / 9; }
  .gains__grid { grid-template-columns: 1fr 1fr; }

  .svc__row, .svc__row--gap40 { flex-direction: column; align-items: flex-start; gap: 40px; }
  .svc__row--media-right { flex-direction: column-reverse; }
  .svc__row .media { align-self: center; }
  .svc.is-open .svc__text--pad { padding-bottom: 0; }
  .svc.is-open .svc__bar { position: static; gap: 24px; flex-wrap: wrap; }
  .svc__detail, .svc__detail--center { flex-direction: column-reverse; align-items: stretch; }
  .svc__detail .svc__desc { flex: none; max-width: none; }
  .svc__detail--center { flex-direction: column; }
  .svc__detail .media { align-self: center; }
  .svc__deco { display: none; }

  .who__grid { grid-template-columns: 1fr 120px 1fr; column-gap: 24px; }
  .who__kto { width: 120px; height: 430px; }

  .how__sticky { flex-direction: column; gap: 24px; }
  .how__stack { transform: scale(.69); margin: -113px -90px; }
  .plat { }
  .how__texts { height: 230px; }

  .person, .brand__row { flex-direction: column; gap: 48px; }
  .person__media, .brand__media { width: min(528px, 100%); }
  .brand__text { flex: none; max-width: none; }
  .quote__body { flex-direction: column; gap: 24px; }
  .quote__body > p { flex: none; max-width: none; }

  .works__grid, .benefits__cols { grid-template-columns: 1fr; }
  .channel { flex-direction: column; gap: 24px; }
  .reviews__cols { grid-template-columns: 1fr; }
  .reviews__col--r { padding-top: 0; }
  .review__heart { display: none; }
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__frame { display: none; }
}

/* =========================================================
   MOBILE  (< 768 px)
   ========================================================= */
@media (max-width: 767.98px) {
  .t-h1 { font-size: 30px; }
  .t-h2, .gain h3 { font-size: 26px; }
  .t-h3, .benefit h3, .faq__q { font-size: 21px; }
  .t-lead, .who__col p, .work p, .channel__info p, .faq__a p { font-size: 18px; }
  body, .t-body { font-size: 16px; }

  .cta { width: 100%; height: 64px; font-size: 17px; gap: 10px; padding: 0 20px; white-space: normal; text-align: left; }
  .cta svg { width: 30px; height: 27px; }
  .fab { width: 90%; max-width: 500px; bottom: 24px; }
  .hero__deco-play { width: 300px; height: 330px; }
  .hero__deco-yt, .hero__deco-play-s { display: none; }
  .hero__inner { margin-top: 48px; }
  .hero__cta { margin-top: 40px; }
  .screen { margin-top: 40px; padding: 8px; border-radius: 14px; }
  .screen__url { margin: 0 8px; }

  .gains { margin-top: -48px; padding: 120px 20px 100px; }
  .gains__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .gains .deco { display: none; }
  .offer { padding: 80px 16px; }
  .offer__menu { gap: 8px; }
  .svc { margin-top: 80px; }

  .svc__box, .svc.is-open .svc__box { padding: 24px 16px; border-radius: 28px; }
  .svc:not(.is-open) .svc__box { padding: 0; }
  .svc.is-open .svc__bar { padding: 8px; gap: 12px; }
  .svc__bar-title { font-size: 20px; white-space: normal; }
  .media { zoom: .62; }
  .svc__note { padding: 20px; }

  .who { padding: 100px 16px; }
  .who__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .who__col--l { text-align: left; }
  .who__col { gap: 24px; }
  .who__kto { display: none; }

  .how { padding-top: 80px; }
  .how__track { height: 4200px; }
  .how__stack { transform: scale(.5); margin: -190px -145px -170px; }
  .how__sticky { gap: 8px; }
  .how__texts { width: 100%; max-width: 360px; }
  .step__num { font-size: 28px; }
  .step__desc { font-size: 22px; }

  .about { padding-top: 100px; }
  .person { margin-top: 64px; }
  .quote { padding: 24px; }
  .brand { padding: 80px 16px 100px; }
  .works, .benefits, .reviews { padding: 100px 16px; }
  .work { padding: 12px 12px 24px; border-radius: 28px; }
  .channel__img { width: 100%; }
  .channel__img img { width: 100%; height: auto; aspect-ratio: 36 / 25; }
  .benefit { padding: 24px; }
  .faq { padding: 100px 16px 0; }
  .faq__q { min-height: 0; gap: 12px; padding: 20px 20px 0 20px; }
  .faq__q svg { width: 30px; height: 30px; }
  .faq__a p { padding: 8px 20px 24px; }
  .faq__item:not(.is-open) .faq__q { padding-bottom: 20px; }
  .gallery { padding: 100px 16px 0; }
  .gallery__col, .gallery__pair { gap: 16px; }
  .gallery__grid { gap: 16px; }
  .gphoto--big { height: 260px; }
  .gphoto--small { height: 200px; }
  .price { margin-top: -48px; padding: 120px 16px 120px; }
}

/* warstwa ozdobników: współrzędne liczone na siatce 1440 px, wyśrodkowanej */
.deco-layer { position: absolute; top: 0; bottom: 0; left: 50%; width: 1440px; margin-left: -720px; pointer-events: none; z-index: 0; }
.deco-layer > * { position: absolute; }
.rot-29 { transform: rotate(-29deg); }
.rot-26 { transform: rotate(-26deg); }
.rot-19 { transform: rotate(-19deg); }
.rot-33 { transform: rotate(-33deg); }
.svc.mt-160 { margin-top: 160px; }
.svc.mt-80 { margin-top: 80px; }
@media (max-width: 767.98px) { .svc.mt-160, .svc.mt-80 { margin-top: 64px; } }