/* ==========================================================================
   important.is — figma-v3
   Pełna implementacja strony zgodnie z Figmą i ui-kit.md
   ========================================================================== */


/* ---------- Reset + base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;
  font:400 var(--font-body)/1.6 var(--font-sans);
  background:var(--surface-base);color:var(--color-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}
ul,ol{padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5,h6,p{margin:0}

/* ---------- Layout helpers ---------- */
.section{
  width:100%;display:flex;flex-direction:column;align-items:center;
  padding:var(--space-8) var(--page-padding) var(--space-7);
  position:relative;
}
.section__inner{width:100%;max-width:var(--container-page)}
.section--bleed{padding-inline:0}
.section--bleed .section__inner{max-width:none;padding-inline:0}

@media (max-width:768px){
  .section{padding-block:var(--space-5) var(--space-5)}
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font:600 var(--font-eyebrow)/1 var(--font-sans);
  letter-spacing:.136em;color:var(--color-accent);
  text-transform:uppercase;
}
.eyebrow__dot{width:5px;height:5px;border-radius:50%;background:var(--color-accent)}

/* ---------- Tag ---------- */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  padding:5px 12px;border-radius:var(--radius-full);
  background:var(--surface-04);
  font:600 10.7px/1 var(--font-sans);letter-spacing:.056em;
  text-transform:uppercase;color:var(--ink-50);
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;background:var(--color-accent);color:var(--color-dark-text);
  border-radius:var(--radius-full);text-decoration:none;
  font:600 var(--font-body)/1 var(--font-sans);
  transition:transform .14s var(--ease-out),background .22s var(--ease-out),box-shadow .22s var(--ease-out);
  box-shadow:0 4px 20px rgba(255,52,52,.15);
}
.btn-primary:hover{transform:translateY(-1px);background:var(--color-accent-hover-light);box-shadow:0 8px 30px rgba(255,52,52,.30)}
.btn-primary:active{transform:translateY(0)}
.btn-primary--full{width:100%}

/* Secondary — tekst ze strzałką, podkreślony akcentem (nie wypełniony przycisk).
   Podkreślenie typograficzne (text-decoration), NIE border — zgodnie z zasadą
   zero borderów. Strzałka „→" jest częścią tekstu; hover → kolor akcentu. */
.btn-secondary{
  color:var(--color-ink);
  font:600 var(--font-body)/1.4 var(--font-sans);
  text-decoration:underline;
  text-decoration-color:var(--color-accent);
  text-decoration-thickness:2px;
  text-underline-offset:.3em;
  transition:color .2s var(--ease-out),text-decoration-color .2s var(--ease-out);
}
.btn-secondary:hover{color:var(--color-accent)}

/* ---- Sketch underline utility ---- */
.u-sketch-ul{
  position:relative;
  display:inline-block;
}
.u-sketch-ul::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-4px;
  height:10px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 3 50 12 78 7 C 88 4 94 8 98 6' fill='none' stroke='%23FF3434' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
  background-size:100% 100%;
  pointer-events:none;
}
.u-sketch-ul--cream::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 3 50 12 78 7 C 88 4 94 8 98 6' fill='none' stroke='%23edebe7' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   1. NAV — sticky/auto-hide + mobile overlay
   ============================================================ */

/* Three-column grid: logo | links (centered) | cta */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:20px;
  padding-inline:max(var(--page-padding), calc((100vw - 76.8rem) / 2));
  /* Nie animujemy backdrop-filter — animowany blur mocno dławił scroll. */
  transition:transform .35s var(--ease-out),background .35s var(--ease-out),
             padding .3s var(--ease-out);
}
.nav--scrolled{
  background:rgba(11,11,11,.84);
  /* blur 12px zamiast 20px — pełnoszerokościowy blur pod fixed paskiem jest
     przemalowywany co klatkę scrolla; mniejszy promień = wyraźnie taniej,
     efekt szkła zachowany. */
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding-block:14px;
}
.nav--hidden{transform:translateY(-110%)}

.nav__logo{
  display:inline-flex;align-items:center;text-decoration:none;
  justify-self:start;
}
.nav__logo svg{display:block}
.nav__logo-text{
  font:400 calc(clamp(18px,1.6vw,22px) * 1.25)/1 var(--font-decorative);
  color:var(--color-ink);
  letter-spacing:.01em;
}
.nav__logo-is{color:var(--color-accent)}

/* Desktop links — centered column */
.nav__links{
  display:flex;gap:clamp(20px,3vw,40px);
  list-style:none;margin:0;padding:0;
  justify-self:center;
}
.nav__link{
  position:relative;
  font:500 var(--font-label)/1 var(--font-sans);
  color:var(--ink-62);text-decoration:none;
  letter-spacing:.01em;padding-bottom:5px;
  transition:color .2s;
}
.nav__link::after{
  content:'';
  position:absolute;bottom:-1px;left:0;right:0;height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 3 50 12 78 7 C 88 4 94 8 98 6' fill='none' stroke='%23FF3434' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center;
  background-size:0% 100%;
  transition:background-size .3s var(--ease-out);
}
.nav__link:hover,.nav__link--active{color:var(--color-ink)}
.nav__link:hover::after,.nav__link--active::after{background-size:100% 100%}

/* Dropdown "Usługi" — desktop rich panel (hover/focus-triggered) */
/* Static so the absolute panel resolves against .nav (fixed) and can span
   the inner content column, not the narrow "Usługi" <li>. */
.nav__item--has-dropdown{position:static}
.nav__dropdown{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  width:min(var(--container-page), calc(100% - 2 * var(--page-padding)));
  margin-top:var(--space-2);padding:var(--space-5);
  background:var(--surface-raised);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),
             visibility 0s linear var(--duration-slow);
}
/* Transparent bridge across the nav's bottom padding so hover isn't lost
   when the cursor travels from the trigger down to the panel. */
.nav__dropdown::before{
  content:'';position:absolute;left:0;right:0;
  top:calc(-1 * var(--space-4));height:var(--space-4);
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s;
}

.nav__dropdown-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4);
}
.nav__dropdown-title{
  font:var(--fw-semibold) var(--font-h5)/var(--lh-tight) var(--font-sans);
  color:var(--color-ink);letter-spacing:-.01em;
}
.nav__dropdown-tagline{
  font:var(--fw-regular) var(--font-label)/var(--lh-snug) var(--font-sans);
  color:var(--ink-50);
}

.nav__dropdown-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);
}
.nav__dropdown-service{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3);border-radius:var(--radius-md);
  background:var(--surface-04);text-decoration:none;
  transition:background .15s var(--ease-out),transform .15s var(--ease-out);
}
.nav__dropdown-service:hover{background:var(--surface-hover);transform:translateY(-2px)}
.nav__dropdown-service-icon{
  width:var(--space-6);height:var(--space-6);object-fit:contain;display:block;
}
.nav__dropdown-service-name{
  font:var(--fw-medium) var(--font-body)/var(--lh-snug) var(--font-sans);
  color:var(--color-ink);
}
.nav__dropdown-service-keywords{
  font:var(--fw-regular) var(--font-caption)/var(--lh-snug) var(--font-sans);
  color:var(--ink-62);
}

/* 6th grid cell — contact + CTA, no card frame, just sits in the free space */
.nav__dropdown-card{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3);
}
.nav__dropdown-card-title{
  font:var(--fw-semibold) var(--font-body)/var(--lh-snug) var(--font-sans);
  color:var(--color-ink);
}
.nav__dropdown-card-contact{
  display:flex;flex-direction:column;gap:var(--space-1);margin-top:auto;
}
.nav__dropdown-card-link{
  font:var(--fw-regular) var(--font-caption)/var(--lh-snug) var(--font-sans);
  color:var(--ink-62);text-decoration:none;
  transition:color .15s var(--ease-out);
}
.nav__dropdown-card-link:hover{color:var(--color-ink)}
.nav__dropdown-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  margin-top:var(--space-2);padding:var(--space-2) var(--space-3);
  background:var(--color-accent);color:var(--color-dark-text);
  border-radius:var(--radius-full);text-decoration:none;
  font:var(--fw-semibold) var(--font-label)/1 var(--font-sans);
  transition:transform .14s var(--ease-out),background .22s var(--ease-out);
}
.nav__dropdown-cta:hover{background:var(--color-accent-hover-light);transform:translateY(-1px)}
.nav__dropdown-cta-icon{
  width:20px;height:20px;object-fit:contain;display:block;flex-shrink:0;
  filter:brightness(0) invert(1);
  position:relative;top:-5px;
}

/* Right: CTA (desktop only — mobile uses .nav-mobile-bar instead) */
.nav__right{
  display:flex;align-items:center;gap:16px;
  justify-self:end;
}
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:10px 20px;background:var(--color-accent);color:var(--color-dark-text);
  border-radius:var(--radius-full);text-decoration:none;
  font:600 var(--font-label)/1 var(--font-sans);white-space:nowrap;
  transition:transform .14s var(--ease-out),background .22s var(--ease-out);
}
.nav__cta:hover{background:var(--color-accent-hover-light);transform:translateY(-1px)}
.nav__cta-icon{
  width:18px;height:18px;object-fit:contain;display:block;flex-shrink:0;
  filter:brightness(0) invert(1);
  position:relative;top:-1px;
}

@media(max-width:768px){
  .nav{grid-template-columns:1fr}
  .nav__links{display:none}
  .nav__right{display:none}
  .nav__logo{justify-self:center}
}

/* ============================================================
   MOBILE BOTTOM BAR — persistent "Menu" + CTA pills, mobile only
   ============================================================ */
.nav-mobile-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:101;
  justify-content:space-between;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--page-padding);
  padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
/* On /kontakt/ the CTA is redundant (you're already there) — hide it and
   let the Menu pill sit centered instead of stretched full width. */
.nav-mobile-bar--menu-only{justify-content:center}
.nav-mobile-bar--menu-only .nav-mobile-bar__menu{flex:none;width:auto}
@media(max-width:768px){
  .nav-mobile-bar{display:flex}
}
/* min-height on both pills = 48px accessible touch target (WCAG minimum),
   fixed so button height stays equal regardless of each icon's own size. */
.nav-mobile-bar__menu{
  flex:1;height:4.8rem;
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  background:var(--color-surface);color:var(--color-text);
  border-radius:var(--radius-full);
  font:600 var(--font-body)/1 var(--font-sans);
}
.nav-mobile-bar__menu-icon-wrap{position:relative;width:22px;height:20px;display:block;flex-shrink:0}
.nav-mobile-bar__menu-icon{
  position:absolute;inset:0;margin:auto;
  width:22px;height:15px;
  transition:opacity .25s var(--ease-out),transform .3s var(--ease-spring);
}
.nav-mobile-bar__menu-icon--close{
  width:18px;height:18px;
  opacity:0;transform:rotate(-25deg) scale(.7);
}
.nav-mobile-bar__menu--open .nav-mobile-bar__menu-icon--open{opacity:0;transform:rotate(20deg) scale(.7)}
.nav-mobile-bar__menu--open .nav-mobile-bar__menu-icon--close{opacity:1;transform:rotate(0) scale(1)}
.nav-mobile-bar__cta{
  flex:1;height:4.8rem;
  display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  background:var(--color-accent);color:var(--color-dark-text);
  border-radius:var(--radius-full);text-decoration:none;white-space:nowrap;
  font:600 var(--font-body)/1 var(--font-sans);
  transition:transform .14s var(--ease-out),background .22s var(--ease-out);
}
.nav-mobile-bar__cta:hover{background:var(--color-accent-hover-light);transform:translateY(-1px)}
.nav-mobile-bar__cta-icon{
  width:36px;height:22px;object-fit:contain;display:block;flex-shrink:0;
  filter:brightness(0) invert(1);
}

/* ============================================================
   MOBILE OVERLAY — bottom sheet: dim backdrop + sheet sliding up
   ============================================================ */
.nav-overlay{
  position:fixed;inset:0;z-index:99;
  pointer-events:none;
}
.nav-overlay--open{pointer-events:auto}

.nav-overlay__backdrop{
  position:absolute;inset:0;
  background:transparent;
}

.nav-overlay__sheet{
  position:absolute;left:0;right:0;bottom:0;
  max-height:85vh;
  display:flex;flex-direction:column;
  background:var(--surface-raised);
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow:var(--shadow-xl);
  padding:var(--space-6) var(--page-padding) calc(var(--nav-mobile-bar-h, 7.2rem) + var(--space-4));
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .4s var(--ease-out);
}
.nav-overlay--open .nav-overlay__sheet{transform:translateY(0)}

.nav-overlay__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.nav-overlay__links li{
  opacity:0;transform:translateY(20px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + 60ms);
}
.nav-overlay--open .nav-overlay__links li{opacity:1;transform:translateY(0)}

.nav-overlay__links a{
  display:block;
  font:700 var(--font-h2)/1 var(--font-sans);
  color:var(--color-ink);text-decoration:none;
  letter-spacing:-.02em;
  padding:var(--space-3) 0;
  transition:color .2s;
}
.nav-overlay__links a:hover{color:var(--color-accent)}

.nav-overlay__sublink{padding-left:var(--space-4)}
.nav-overlay__sublink a{
  font:600 var(--font-h5)/1.15 var(--font-sans);
  color:var(--ink-62);
  display:flex;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-2) 0;
}
.nav-overlay__sublink a:hover{color:var(--color-accent)}
.nav-overlay__sublink-icon{
  width:var(--space-6);height:var(--space-6);object-fit:contain;display:block;flex-shrink:0;
  margin-top:.2rem;
}
.nav-overlay__sublink-text{display:flex;flex-direction:column;gap:var(--space-1)}
.nav-overlay__sublink-name{color:var(--color-ink)}
.nav-overlay__sublink-keywords{
  font:var(--fw-regular) var(--font-caption)/var(--lh-snug) var(--font-sans);
  color:var(--ink-50);
}

.nav-overlay__contact{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-top:var(--space-5);padding-top:var(--space-4);
  opacity:0;transform:translateY(20px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + 60ms);
}
.nav-overlay--open .nav-overlay__contact{opacity:1;transform:translateY(0)}
.nav-overlay__contact-link{
  font:500 var(--font-body)/1.3 var(--font-sans);
  color:var(--ink-62);text-decoration:none;transition:color .2s;
}
.nav-overlay__contact-link:hover{color:var(--color-ink)}
.nav-overlay__cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:var(--space-2);padding:var(--space-3) var(--space-5);
  background:var(--color-accent);color:var(--color-dark-text);
  border-radius:var(--radius-full);text-decoration:none;
  font:600 var(--font-label)/1 var(--font-sans);
  transition:transform .14s var(--ease-out),background .22s var(--ease-out);
}
.nav-overlay__cta-btn:hover{background:var(--color-accent-hover-light);transform:translateY(-1px)}

.nav-overlay__tagline{
  margin-top:auto;padding-top:var(--space-6);
  font:400 var(--font-label)/1 var(--font-sans);color:var(--ink-28);
  opacity:0;
  transition:opacity .4s var(--ease-out) .35s;
}
.nav-overlay--open .nav-overlay__tagline{opacity:1}

/* ============================================================
   2. HERO
   ============================================================ */
.hero{
  min-height:100vh;justify-content:center;text-align:center;
  padding-block:var(--space-8) var(--space-7);
}
.hero__bg{
  position:absolute;inset:0;
  background:url('/img/hero-bg.png') center/cover no-repeat;
  /* webp (24KB) dla przeglądarek które wspierają image-set; starsze zostają na PNG */
  background-image:image-set(url('/img/hero-bg.webp') type('image/webp'), url('/img/hero-bg.png'));
  z-index:0;
}
.hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.85) 70%,#0b0b0b 100%);
}
.hero__content{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-3);width:100%;max-width:var(--container-page);
  padding-inline:var(--page-padding);
}
.hero__title{
  font:var(--fw-black) clamp(2.6rem,4vw + 0.7rem,4.4rem)/1.28 var(--font-sans);
  letter-spacing:-.02em;color:var(--color-ink);
}
.hero__mark{
  position:relative;white-space:nowrap;
}
.hero__mark::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.12em;
  height:.28em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2,7 C18,3.5 38,9 58,5.5 C74,3 90,8.5 98,5.5' stroke='%23FF3434' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
/* Podkreślenia „rysują się" L→P PO pojawieniu się tytułu, kolejno.
   clip-path jest bezpieczny na Safari i Chrome. Gated pod reveal-on:
   bez JS podkreślenia są od razu w pełni widoczne (żadne nie znika). */
html.reveal-on .hero__title .hero__mark::after{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--ease-out);
}
html.reveal-on .hero__title.is-visible .hero__mark::after{
  clip-path:inset(0 0 0 0);
}
html.reveal-on .hero__title.is-visible .hero__mark:nth-of-type(1)::after{transition-delay:.5s}
html.reveal-on .hero__title.is-visible .hero__mark:nth-of-type(2)::after{transition-delay:.9s}
html.reveal-on .hero__title.is-visible .hero__mark:nth-of-type(3)::after{transition-delay:1.3s}
@media (prefers-reduced-motion:reduce){
  html.reveal-on .hero__title .hero__mark::after{transition:none}
}

.hero__lead{
  font:400 var(--font-h5)/1.8 var(--font-sans);
  color:var(--ink-62);
  max-width:600px;margin:0 0 var(--space-3);
}

.hero__cta{margin-block:var(--space-2) 0}

.hero-test__frame{
  width:100%;aspect-ratio:1440/860;max-height:100vh;
  position:relative;overflow:hidden;
}
@media(max-width:900px){
  .hero-test__frame{aspect-ratio:unset;height:100dvh;max-height:100dvh;}
}

/* Handwritten POD tytułem + arrow wskazujący na stats */
.hero__handwritten-block{
  position:relative;
  margin:var(--space-4) 0 var(--space-5);
  width:100%;max-width:520px;
}
.hero__handwritten{
  font:400 clamp(22px,2.4vw,30px)/1.25 var(--font-decorative);
  color:var(--color-accent);
  transform:rotate(-2deg);
  text-align:center;
  margin:0;
}
.hero__arrow{
  position:absolute;
  width:200px;height:140px;
  right:-80px;top:60%;
  color:var(--color-accent);
  pointer-events:none;
}

@media (max-width:768px){
  .hero__arrow{display:none}
  .hero__handwritten{transform:rotate(-1deg)}
}

/* Stats */
.stats{
  display:flex;gap:var(--space-2);
  margin-top:var(--space-4);width:100%;
}
.stats__item{
  flex:1;min-width:0;min-height:272px;height:auto;padding:var(--space-3);
  background:var(--surface-raised);border-radius:var(--radius-xl);
  display:flex;flex-direction:column;gap:var(--space-2);text-align:left;
}
.stats__num{
  font:800 var(--font-display)/1 var(--font-sans);
  letter-spacing:-.02em;color:var(--color-ink);
  margin-bottom:auto;
}
.stats__count{
  display:inline-block;
  transition:color .24s var(--ease-out),transform .24s var(--ease-out),text-shadow .24s var(--ease-out);
}
.stats__count--active{
  color:var(--color-ink);
  transform:translateY(-2px);
  text-shadow:0 0 22px rgba(255,255,255,.16);
}
.stats__label{
  font:500 var(--font-body)/1.2 var(--font-sans);color:var(--color-ink);
}
.stats__desc{
  font:400 var(--font-label)/1.4 var(--font-sans);color:var(--ink-50);
  max-width:34ch;
}
@media (max-width:768px){
  .stats{flex-direction:column;gap:var(--space-2)}
  .stats__item{min-height:0;padding:var(--space-3)}
}

/* ============================================================
   3. ZAUFALI NAM
   ============================================================ */
.trusted__title{
  font:800 var(--font-h1)/1 var(--font-sans);text-align:center;
  margin-bottom:var(--space-5);color:var(--color-ink);
}
/* ============================================================
   3b. ZAUFALI NAM — case study karty
   ============================================================ */
.case-stack { display: flex; flex-direction: column; gap: var(--space-4); }

.case {
  position: relative; border-radius: var(--radius-2xl);
  overflow: hidden; color: #fff;
}

/* --- Karta z mediami (full-bleed foto/video) --- */
.case--media {
  min-height: 42rem;
  display: flex; flex-direction: column;
  background: var(--surface-raised, #121212);
  padding: 0;
}
.case__media { position: absolute; inset: 0; z-index: 0; }
.case__media-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(11,11,11,.05) 0%,
    rgba(11,11,11,0)   30%,
    rgba(11,11,11,.45) 65%,
    rgba(11,11,11,.82) 100%
  );
}

/* Treść — flow kolumna, lewy dolny róg */
.case__body {
  position: relative; z-index: 2; width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1);
  margin-top: auto;
}

/* Logo — sam obrazek, biały przez mix-blend-mode */
.case__logo {
  display: block; height: 32px; width: auto; max-width: 160px;
  filter: brightness(0) invert(1);
  margin-bottom: var(--space-1);
  opacity: .85;
}
/* Pionowe lockupy (ikona nad wordmarkiem) potrzebują większej wysokości, żeby były czytelne */
.case__logo--tall { height: 56px; }

.case__headline--light { color: rgba(255,255,255,.92); }

/* Krótki opis pod logo */
.case__desc {
  margin: 0;
  font: 400 1.5rem/1.45 var(--font-sans, sans-serif);
  color: rgba(255,255,255,.6);
  max-width: 36rem;
}
.case__desc--muted { color: rgba(255,255,255,.35); }

/* Okrągły CTA „Czytaj case study" — prawy górny róg, kremowa naklejka + odręczna strzałka */
.case__arrow {
  position: absolute; bottom: var(--space-3); right: var(--space-3); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 5.6rem; height: 5.6rem;
  border-radius: var(--radius-full);
  background: var(--color-cream);
  color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out);
}
.case__arrow-icon { width: 2.6rem; height: auto; }
.case__arrow:hover { transform: rotate(-6deg) scale(1.06); box-shadow: var(--shadow-xl); }
.case__arrow:hover .case__arrow-icon { transform: translateX(2px); transition: transform var(--duration-base) var(--ease-spring); }

/* Wariant linku tekstowego (karta zaproszenie) */
.case__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: .4rem;
  font: 500 1.4rem/1 var(--font-sans, sans-serif);
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
}
.case__link:hover { color: #fff; }
.case__link-icon { width: 24px; height: 16px; flex-shrink: 0; }
.case__link--accent { color: rgba(255,255,255,.4); }
.case__link--accent:hover { color: rgba(255,255,255,.85); }

/* Odręczny — w flow, pod linkiem, lekko obrócony */
.case__handwritten {
  display: block; margin-top: var(--space-2);
  font: 400 2.8rem/1.2 var(--font-decorative, cursive);
  color: var(--color-accent);
  transform: rotate(-2deg); transform-origin: left center;
}

/* --- Karta zaproszenie (ciemna) --- */
.case--invite {
  min-height: 22rem; padding: var(--space-4);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface-base, #0b0b0b);
}
.case__cta { margin-top: var(--space-2); }

@media (max-width: 640px) {
  .case--media { min-height: 34rem; }
  .case__body { padding: var(--space-3); }
  .case__handwritten { font-size: 2.2rem; }
  .case--invite { min-height: auto; padding: var(--space-3); }
}

/* ============================================================
   4. HISTORIE Z PIERWSZEJ ROZMOWY
   ============================================================ */
.histories__head{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;margin-bottom:var(--space-5);
}
.histories__title{
  font:800 var(--font-h2)/1.15 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-dark-text);
}
.histories__lead{
  max-width:520px;color:var(--ink-62);
  font:400 var(--font-body)/1.6 var(--font-sans);
}
.histories__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);
  margin-bottom:var(--space-5);
}
.histories__grid>*:last-child:nth-child(odd){grid-column:span 2}

/* ----- Quote: karta problem → rozwiązanie ----- */
.qa{
  margin:0;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--surface-raised);
  border-radius:var(--radius-2xl);padding:var(--space-4);
  transition:transform .3s var(--ease-out),border-color .3s var(--ease-out);
}
.qa:hover{transform:translateY(-3px);background:var(--surface-hover)}

/* Problem — odręczny cytat (Mansalva) z dużym, przygaszonym cudzysłowem */
.qa__problem{
  margin:0;position:relative;padding-right:34px;
  font:400 clamp(20px,2.2vw,26px)/1.32 var(--font-decorative);
  color:var(--color-accent);
}
.qa__mark{
  position:absolute;right:-2px;top:-16px;
  font:400 64px/1 var(--font-decorative);
  color:var(--color-accent);opacity:.3;pointer-events:none;
}
/* Rozwiązanie — Rubik (kremowy) */
.qa__solution{
  padding-top:var(--space-3);
}
.qa__sol-label{
  display:block;margin-bottom:16px;
  font:600 var(--font-caption)/1 var(--font-sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);
}
.qa__sol-text{
  margin:0;font:400 var(--font-body)/1.5 var(--font-sans);color:var(--color-ink);
}

.histories__cta{
  background:var(--surface-raised);border-radius:var(--radius-2xl);
  padding:var(--space-4);text-align:center;
}
.histories__cta h3{
  font:700 clamp(26px,3vw,36px)/1.1 var(--font-sans);color:var(--color-dark-text);
  margin-bottom:var(--space-1);
}
.histories__cta p{
  color:var(--ink-62);margin-bottom:var(--space-3);
}

@media (max-width:768px){
  .histories .histories__grid{grid-template-columns:1fr}
  .histories .histories__grid>*:last-child:nth-child(odd){grid-column:auto}
}

/* ============================================================
   4B. DLA KOGO / NIE DLA KOGO
   ============================================================ */
.fit{
  padding-block:var(--space-6) var(--space-7);
}
.fit__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-bottom:var(--space-5);
}
.fit__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.fit__note{
  margin-top:var(--space-1);
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);
  transform:rotate(-2deg);
}
.fit__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
}
.fit-card:last-child:nth-child(odd){grid-column:1}
.fit-card{
  min-width:0;
  background:var(--surface-raised);
  border-radius:var(--radius-2xl);
  padding:var(--space-4);
}
.fit-card--yes{
  background:var(--surface-raised);
}
.fit-card--no{
  background:var(--surface-base);
}
.fit-card--no h3{ color:var(--ink-62); }
.fit-card--no li{ color:var(--ink-50); }
.fit-card h3{
  margin:0 0 var(--space-5);
  font:700 var(--font-h4)/1.18 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.fit-card ul{
  display:flex;flex-direction:column;gap:var(--space-4);
}
.fit-card li{
  position:relative;padding-left:2.4rem;
  font:400 var(--font-body)/1.55 var(--font-sans);
  color:var(--ink-62);
}
.fit-card__icon{
  position:absolute;left:0;top:.25em;
  display:flex;align-items:center;
}
.fit-card--yes .fit-card__icon{color:var(--color-accent);}
.fit-card--no .fit-card__icon{color:var(--ink-28);}

@media (max-width:768px){
  .fit__grid{grid-template-columns:1fr}
}
.fit__honest{
  margin:var(--space-5) auto 0;max-width:54ch;text-align:center;
  font:400 var(--font-h5)/1.6 var(--font-sans);color:var(--ink-62);
}
.fit__cta{margin-top:var(--space-4);text-align:center}

/* ============================================================
   5. LUDZIE ZA PROJEKTAMI
   layout: lewa kolumna duży portret (1.2fr), prawa info card (1fr)
   ============================================================ */
.people__title{
  font:800 var(--font-h2)/1.1 var(--font-sans);color:var(--color-dark-text);
  margin-bottom:var(--space-5);
}
.people__layout{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:var(--space-5);
  align-items:center;
}

/* ----- Portret (lewa kolumna) ----- */
.portrait{
  position:relative;margin:0;
}
.portrait__img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
}

/* Czerwone handwritten labels — pozycje per Figma */
.portrait__label{
  position:absolute;color:var(--color-accent);pointer-events:none;
  font:400 22px/1 var(--font-decorative);
  white-space:nowrap;
}
.portrait__label--strategy{top:36%;left:-2%;transform:rotate(-6deg)}
.portrait__label--auto{top:50%;left:42%;transform:rotate(-72deg)}
.portrait__label--wp{top:80%;left:8%;transform:rotate(-3deg)}

/* Białe sketch tick markers wzdłuż konturu */
.portrait__tick{
  position:absolute;width:14px;height:6px;color:var(--color-dark-text);
  pointer-events:none;opacity:.85;
}
.portrait__tick--1{top:14%;left:48%;transform:rotate(-15deg)}
.portrait__tick--2{top:32%;left:62%;transform:rotate(60deg)}
.portrait__tick--3{top:54%;left:18%;transform:rotate(-30deg)}
.portrait__tick--4{top:70%;left:55%;transform:rotate(45deg)}
.portrait__tick--5{top:86%;left:32%;transform:rotate(-10deg)}

/* Biała gwiazda sketch przy kolanie */
.portrait__star{
  position:absolute;width:54px;height:54px;color:var(--color-dark-text);
  top:72%;left:42%;transform:rotate(8deg);
  pointer-events:none;opacity:.95;
}

/* ----- Info card (prawa kolumna) ----- */
.member-info{
  text-align:left;margin:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);
}
.member-info__avatar{
  width:88px;height:88px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff5050 0%,#ff3434 40%,#7a1010 100%);
  padding:3px;margin-bottom:var(--space-1);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.member-info__avatar img{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  border-radius:50%;
  filter:saturate(.9);
}
.member-info__name{font:700 22px/1.2 var(--font-sans);color:var(--color-dark-text);margin:0}
.member-info__role{font:400 14px/1.4 var(--font-sans);color:var(--ink-62);margin:0}
.member-info__tags{
  display:flex;gap:var(--space-1);margin-top:var(--space-2);flex-wrap:wrap;
  padding:0;list-style:none;
}

@media (max-width:768px){
  .people__layout{grid-template-columns:1fr;gap:var(--space-4);justify-items:center;text-align:center}
  .member-info{align-items:center;text-align:center}
  .member-info__tags{justify-content:center}
}

/* ============================================================
   5B. LUDZIE ZA PROJEKTAMI — V2, prawdziwe zdjecie + kompetencje
   ============================================================ */
/* ============================================================
   5B. LUDZIE ZA PROJEKTAMI — V2 grid 3×2
   ============================================================ */
.people-v2__head{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin-bottom:var(--space-5);
}
.people-v2__headline{
  margin:0;
  font:800 var(--font-h2)/1.05 var(--font-sans);
  letter-spacing:-.02em;color:var(--color-ink);
}
.people-v2__head-note{
  margin:0;align-self:flex-start;
  font:400 clamp(2rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);
}
.people-v2__lead{
  margin:var(--space-1) 0 0;max-width:600px;
  font:400 var(--font-h5)/1.7 var(--font-sans);
  color:var(--ink-62);
}
.people-v2__cta{
  align-self:flex-start;margin-top:var(--space-4);
  padding:18px 40px;
  font-size:var(--font-h5);
  box-shadow:0 6px 28px rgba(255,52,52,.30);
}
/* Wariant secondary (tylko strona główna): sam napis + podkreślenie + strzałka, bez boxa */
.btn-secondary.people-v2__cta{
  padding:0;
  box-shadow:none;
  font-size:var(--font-body);
}
.people-v2__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);
}
.people-v2__card{
  display:flex;flex-direction:column;
  background:var(--surface-raised);border-radius:var(--radius-2xl);
  overflow:hidden;transition:background .25s var(--ease-out);
}
.people-v2__card:hover{background:var(--surface-hover)}
.people-v2__photo{
  position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;
  background:var(--surface-raised);
}
.people-v2__photo::after{
  content:"";position:absolute;inset:-2px 0 -2px 0;
  background:linear-gradient(180deg,rgba(11,11,11,0) 46%,rgba(11,11,11,.78) 100%);
  pointer-events:none;
}
.people-v2__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
  filter:saturate(.94) contrast(1.03);
  transition:transform .45s var(--ease-out);
}
.people-v2__card:hover .people-v2__photo img{transform:scale(1.03)}
.people-v2__photo figcaption{
  position:absolute;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);
  z-index:1;color:var(--ink-90);font:500 var(--font-label)/1.3 var(--font-sans);
}
.people-v2__photo-name{
  display:block;color:var(--color-ink);font:700 var(--font-h5)/1.1 var(--font-sans);
  margin:0;
}
.people-v2__placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font:800 clamp(3rem,5vw,5rem)/1 var(--font-sans);color:var(--ink-28);letter-spacing:-.04em;
}
.people-v2__card-body{
  display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);
  flex:1;
}
.people-v2__role{
  margin:0;font:600 var(--font-label)/1.2 var(--font-sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-62);
}
.people-v2__note{
  margin:0;align-self:flex-start;margin-top:auto;padding-top:var(--space-2);
  font:400 clamp(2.0rem,2.1vw,2.4rem)/1.2 var(--font-decorative);
  color:var(--color-accent);
}
.people-v2__name-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
}
.people-v2__linkedin{
  display:inline-flex;align-items:center;color:var(--ink-62);flex-shrink:0;
  transition:color .2s;
}
.people-v2__linkedin:hover{color:var(--color-ink)}
.people-v2__li-icon{width:20px;height:20px;flex-shrink:0}

@media (max-width:960px){
  .people-v2__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people-v2__note{font-size:clamp(1.6rem,2.4vw,1.9rem)}
  .people-v2__card-body{gap:var(--space-1)}
}
@media (max-width:560px){
  .people-v2__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .people-v2__photo{aspect-ratio:4/4}
  .people-v2__role{font-size:1.1rem}
  .people-v2__note{font-size:clamp(1.3rem,4vw,1.6rem)}
}

/* ============================================================
   6. PIĘĆ OBSZARÓW
   ============================================================ */
.areas__head{margin-top:0;margin-bottom:var(--space-5)}
.areas__head h2{
  font:800 var(--font-h1)/1.05 var(--font-sans);color:var(--color-dark-text);
  margin-bottom:var(--space-2);
}
/* Odręczna obietnica pod tytułem — Mansalva czerwona (głos człowieka) */
.areas__hand{
  font:400 clamp(24px,3.2vw,34px)/1.1 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);
  transform-origin:left center;display:inline-block;
}
.areas__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3); /* 20px wg Figma */
}
.area-card{
  position:relative;min-height:409px;height:auto;
  padding:calc(104px + var(--space-3) + var(--space-3)) var(--space-3) var(--space-3);
  background:var(--surface-raised);border-radius:var(--radius-xl);
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-3);
  transition:transform .3s var(--ease-out),background .3s var(--ease-out);
}
.area-card:hover{transform:translateY(-4px);background:var(--surface-hover)}

.area-card--wide{
  grid-column:1 / -1;
  min-height:0;
  padding:calc(var(--space-3) + 3.2rem) var(--space-3) var(--space-3);
  padding-right:calc(130px + var(--space-3) * 2);
}

.area-card__num{
  position:absolute;top:var(--space-3);left:var(--space-3);
  font:500 var(--font-label)/1.6 var(--font-sans);color:var(--ink-50);
  letter-spacing:0;
}
.area-card__icon{
  position:absolute;top:var(--space-3);right:var(--space-3);
  width:130px;height:104px;
  object-fit:contain;object-position:right top;
  pointer-events:none;
}
.area-card__icon--wide{width:130px;height:62px;top:50%;transform:translateY(-50%)}

.area-card__title{
  font:700 var(--font-h3)/1.165 var(--font-sans);color:var(--color-ink);
}
.area-card__desc{
  font:500 var(--font-body)/1.615 var(--font-sans);color:var(--ink-50);
}

@media (max-width:768px){
  .areas__grid{grid-template-columns:1fr}
  .area-card{min-height:280px;padding:calc(96px + var(--space-3)) var(--space-3) var(--space-3)}
  .area-card--wide{flex-direction:column;align-items:flex-start;padding:calc(var(--space-3) + 28px) var(--space-3) var(--space-3)}
  .area-card--wide .area-card__icon{position:static;width:80px;height:auto}
}

/* ============================================================
   6 · WARIANTY SEKCJI „CO UMIEMY" (do wyboru — biblioteka)
   ============================================================ */

/* --- V2: narracyjny — 3 filary + lista usług --- */
.areas2__pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);
  margin-bottom:var(--space-7);
}
.areas2__pillar-title{
  font:700 var(--font-h3)/1.15 var(--font-sans);color:var(--color-ink);
  margin-bottom:var(--space-2);
}
.areas2__pillar-desc{
  font:400 var(--font-body)/1.6 var(--font-sans);color:var(--ink-62);
}
.areas2__services-label{
  font:600 var(--font-caption)/1 var(--font-sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);
  margin-bottom:var(--space-3);
}
.areas2__list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2) var(--space-5);
}
.areas2__item{display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-2) 0}
.areas2__num{
  font:500 14px/1 var(--font-sans);color:var(--color-accent);
  letter-spacing:.02em;min-width:24px;
}
.areas2__name{font:500 var(--font-h5)/1.2 var(--font-sans);color:var(--color-ink)}

/* --- V3: lista edytorska — wielkie numery, ikona na hover --- */
.areas3__list{display:flex;flex-direction:column}
.areas3__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);
  padding:var(--space-4) 0;
}
.areas3__num{
  font:800 clamp(32px,5vw,56px)/1 var(--font-sans);color:var(--ink-28);
  letter-spacing:-.02em;transition:color .3s var(--ease-out);
}
.areas3__row:hover .areas3__num{color:var(--color-accent)}
.areas3__title{font:700 var(--font-h3)/1.15 var(--font-sans);color:var(--color-ink);margin-bottom:4px}
.areas3__desc{font:400 var(--font-body)/1.55 var(--font-sans);color:var(--ink-62);max-width:48ch}
.areas3__icon{
  width:72px;height:64px;object-fit:contain;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
.areas3__row:hover .areas3__icon{opacity:1;transform:translateX(0)}

/* --- V4: bento — karty o różnej wielkości --- */
.areas4__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.areas4__card{
  position:relative;background:var(--surface-raised);border-radius:var(--radius-xl);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);
  min-height:230px;
  transition:transform .3s var(--ease-out),background .3s var(--ease-out);
}
.areas4__card:hover{transform:translateY(-4px);background:var(--surface-hover)}
.areas4__card--wide{grid-column:span 2}
.areas4__num{font:500 14px/1 var(--font-sans);color:var(--color-accent);letter-spacing:.02em}
.areas4__icon{width:88px;height:72px;object-fit:contain;object-position:left top;margin-bottom:var(--space-1)}
.areas4__title{font:700 var(--font-h3)/1.15 var(--font-sans);color:var(--color-ink)}
.areas4__desc{font:400 var(--font-body)/1.55 var(--font-sans);color:var(--ink-50);margin-top:auto}

/* --- V6: hybryda dopracowana — filary z odręczną ikoną + sucha lista zakresu --- */
.areas6__pillar-icon{
  width:56px;height:56px;object-fit:contain;object-position:left center;
  display:block;margin-bottom:var(--space-2);pointer-events:none;
}

@media (max-width:768px){
  .areas2__pillars{grid-template-columns:1fr;gap:var(--space-4)}
  .areas2__list{grid-template-columns:1fr}
  .areas3__row{grid-template-columns:auto 1fr;gap:var(--space-3)}
  .areas3__icon{display:none}
  .areas4__grid{grid-template-columns:1fr}
  .areas4__card--wide{grid-column:span 1}
}

/* ============================================================
   6. WYNIKI MÓWIĄ GŁOŚNIEJ (Testimonials, dark style)
   ============================================================ */
.results__head{margin-bottom:var(--space-5);position:relative}
.results__title{
  margin-top:var(--space-2);
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-dark-text);
}
.results__accent{position:relative;display:inline-block}
.results__underline{
  position:absolute;left:-2%;bottom:-.15em;width:104%;height:14px;
  color:var(--color-accent);pointer-events:none;
}
.results__lead{
  margin-top:var(--space-2);max-width:520px;
  color:var(--ink-62);font:400 var(--font-label)/1.6 var(--font-sans);
}
/* Wspólne karty testimonials (rcard) — minimalna wersja */
.rcard{
  background:var(--surface-raised);
  border-radius:var(--radius-xl);padding:var(--space-2) var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);color:var(--color-dark-text);
}
.rcard__quote{
  margin:0;flex:1;
  font:400 var(--font-label)/1.55 var(--font-sans);color:var(--ink-90);
}
.rcard__quote--bold{font-weight:500;font-size:var(--font-body);color:var(--color-dark-text);line-height:1.45}

/* Author row — tylko avatar + name + logo (bez roli, bez daty) */
.author{
  display:flex;gap:10px;align-items:center;
  padding-top:var(--space-2);flex-wrap:wrap;
}
.author__avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--surface-04);
  display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--font-sans);color:var(--ink-62);
}
.author__name{
  margin:0;flex:1;min-width:0;
  font:700 13px/1.2 var(--font-sans);color:var(--color-dark-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.author__logo{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:24px;border-radius:var(--radius-xs);
  background:var(--surface-04);
  font:700 9px/1 var(--font-sans);letter-spacing:.054em;color:var(--ink-50);
  flex-shrink:0;
}

/* Audio player */
.audio{
  display:flex;align-items:center;gap:var(--space-1);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);
  background:var(--surface-04);
}
.audio__play{flex-shrink:0;padding:0}
.audio__wave{display:flex;flex:1;gap:2px;align-items:flex-end;height:24px;min-width:0;overflow:hidden}
.audio__wave span{
  display:block;width:4px;height:var(--h);
  background:var(--ink-28);border-radius:2px;
}
.audio__time{
  font:400 11px/1 var(--font-sans);color:var(--ink-62);flex-shrink:0;
}

/* Layout: masonry — natywny CSS columns jako fallback bez JS */
.results__masonry{
  columns:2;column-gap:var(--space-2);
}
.results__masonry > .rcard{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 var(--space-2);
}
/* Tryb JS: karty rozdzielone do najkrótszej kolumny (równy dół) */
.results__masonry.is-js{
  columns:auto;column-gap:normal;
  display:flex;gap:var(--space-2);align-items:flex-start;
}
.results__masonry.is-js > .rmasonry-col{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);
}
.results__masonry.is-js .rcard{margin:0}
.rcard--feature{padding:0;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-xl)}
.rcard__thumb{
  position:relative;width:100%;aspect-ratio:16/10;
  background:
    radial-gradient(circle at 20% 80%,rgba(255,52,52,.12),transparent 60%),
    linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 100%);
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:768px){.rcard__thumb{aspect-ratio:16/9}}
.rcard__play{width:56px;height:56px}
.rcard--feature .rcard__body{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}

/* CTA bar — łączy "Chcesz podobne wyniki?" + handwritten staty */
.results__cta{
  display:grid;grid-template-columns:1fr auto;gap:var(--space-4);
  padding:var(--space-5);border-radius:var(--radius-xl);
  background:var(--surface-raised);
  margin-top:var(--space-5);
  align-items:center;
}
.results__cta-left{display:flex;flex-direction:column;gap:var(--space-2)}
.results__cta-title{margin:0;font:700 var(--font-h4)/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--color-dark-text)}
.results__cta-sub{margin:0;font:400 var(--font-label)/1.4 var(--font-sans);color:var(--ink-62)}
.results__cta-actions{
  display:flex;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap;
}

/* Handwritten stats po prawej stronie CTA — Mansalva czerwona */
.results__cta-stats{
  display:flex;flex-direction:column;gap:6px;
  text-align:right;color:var(--color-ink);
  padding-left:40px;
  font:400 var(--font-h5)/1.35 var(--font-sans);
}
.hwstat{margin:0;display:flex;align-items:center;gap:12px;justify-content:flex-end;line-height:1}
.hwstat__num{
  font:400 52px/1 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);display:inline-block;
}
.hwstat:nth-child(2) .hwstat__num{transform:rotate(2deg)}

@media (max-width:768px){
  .results__masonry{columns:1}
  .results__cta{grid-template-columns:1fr;padding:var(--space-4)}
  .results__cta-stats{
    text-align:left;
    padding-left:0;padding-top:var(--space-4);
  }
  .hwstat{justify-content:flex-start}
}

/* ============================================================
   7. JAK TO WYGLĄDA W PRAKTYCE (Proces)
   ============================================================ */
.process{padding-block:var(--space-8) var(--space-7)}
.process__head{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;margin-bottom:var(--space-5);
}
.process__title{
  font:700 var(--font-h2)/1.15 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-dark-text);
}
.process__handwritten{
  margin:0;font:400 24px/1 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);
}
.process__lead{
  max-width:520px;font:400 var(--font-body)/1.65 var(--font-sans);
  color:var(--ink-62);
}

/* Steps list */
.process__steps{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;
}
.step{
  display:grid;grid-template-columns:96px 1fr;gap:28px;
  padding-block:var(--space-5);
  align-items:start;
}
.step:first-child{padding-top:0}
.step:last-child{padding-bottom:0}

/* Step content */
.step__content{display:flex;flex-direction:column;gap:14px;min-width:0}

.step__title{
  font:700 var(--font-h4)/1.25 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-dark-text);
}
.step__body{
  font:400 var(--font-body)/1.65 var(--font-sans);color:var(--ink-62);
}

/* Outcome callout — bez kontenera, handwritten label + ink body */
.step__callout{
  display:block;background:none;border:0;padding:8px 0 4px;margin:4px 0;
}
.step__callout-label{
  display:inline-block;
  font:400 24px/1 var(--font-decorative);
  letter-spacing:0;text-transform:none;
  color:var(--color-accent);
  transform:rotate(-1deg);
  margin-bottom:6px;
}
.step__callout-label::after{content:" →"}
.step__callout p{
  margin:0;font:400 var(--font-label)/1.55 var(--font-sans);color:var(--ink-90);
}

/* Proof stat (krok 04) — Mansalva czerwony, bez tła */
.step__proof{
  display:flex;align-items:center;gap:16px;
  margin-top:var(--space-3);
}
.step__proof-num{
  font:400 52px/1 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-3deg);flex-shrink:0;
}
.step__proof p{margin:0;font:400 var(--font-label)/1.45 var(--font-sans);color:var(--ink-62)}
.step__proof b{color:var(--color-dark-text);font-weight:700}

.step__callout{margin-top:4px}

/* Icon: PNG jako maska CSS, więc kolor jest dokładnie brand accent. */
.step__icon{
  width:96px;height:96px;
  flex-shrink:0;align-self:start;
  background:var(--color-accent);
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
  /* domyślny tryb alpha — ikony 01–04 to czerwone kreski na przezroczystym tle */
  filter:drop-shadow(0 4px 16px rgba(255,52,52,.24));
}
/* ikona CTA jest biała na czarnym tle → maska luminancji (biel = pełny akcent) */
.step__icon--lum{
  -webkit-mask-mode:luminance;
  mask-mode:luminance;
}

/* CTA Footer */
.step__icon-svg{
  width:96px;height:96px;flex-shrink:0;align-self:start;
}
.step__cta-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}
.step__cta-link{
  font:700 clamp(1.6rem,1.8vw,2rem)/1.2 var(--font-sans);
  color:var(--color-ink);text-decoration:none;
  transition:color .2s;
}
.step__cta-link:hover{color:var(--color-accent)}

@media (max-width:768px){
  .step{grid-template-columns:64px 1fr;gap:16px}
  .step__icon{width:64px;height:64px}
  .process__cta{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   8x. DLACZEGO JEDEN ZESPÓŁ (vs 5 agencji)
   ============================================================ */
.why-one__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.why-one__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.why-one__note{
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);transform-origin:left center;
}
.why-one__meet{
  margin:0 0 var(--space-5);padding:var(--space-3) var(--space-3) var(--space-2);
  background:var(--surface-raised);border-radius:var(--radius-2xl);
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 var(--surface-04);
}
.why-one__meet-bar{
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 .4rem var(--space-3);
}
.why-one__meet-live{
  display:inline-flex;align-items:center;gap:.8rem;
  font:600 var(--font-caption)/1 var(--font-sans);letter-spacing:.02em;
  color:var(--ink-62);
}
.why-one__meet-dot{
  width:.8rem;height:.8rem;border-radius:50%;background:var(--color-accent);
  box-shadow:0 0 0 0 rgba(255,52,52,.55);animation:meetPulse 2s var(--ease-out) infinite;
}
@keyframes meetPulse{
  0%{box-shadow:0 0 0 0 rgba(255,52,52,.5)}
  70%{box-shadow:0 0 0 .7rem rgba(255,52,52,0)}
  100%{box-shadow:0 0 0 0 rgba(255,52,52,0)}
}
.why-one__meet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);
}
.why-one__tile{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);
  overflow:hidden;background:var(--surface-04);
}
.why-one__tile:first-child{
  box-shadow:0 0 0 3px #1a73e8,0 18px 40px rgba(26,115,232,.28);
}
.why-one__tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
}
.why-one__tile-name{
  position:absolute;left:.7rem;bottom:.7rem;z-index:1;
  padding:.3rem .75rem;border-radius:var(--radius-full);
  background:rgba(0,0,0,.6);
  font:600 12px/1 var(--font-sans);color:#fff;
}
@media(max-width:680px){
  .why-one__meet-grid{grid-template-columns:repeat(2,1fr)}
}

.why-one__meet-controls{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:var(--space-2);padding:.6rem 1rem;
  background:var(--surface-04);border-radius:var(--radius-full);
  width:fit-content;margin-inline:auto;
}
.why-one__meet-time{
  padding-right:.6rem;margin-right:.2rem;border-right:1px solid rgba(255,255,255,.14);
  font:600 12px/1 var(--font-sans);color:var(--ink-62);
}
.why-one__meet-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:rgba(255,255,255,.08);color:var(--color-ink);
}
.why-one__meet-btn--end{
  width:3.4rem;background:var(--color-accent);color:#fff;
}
@media(max-width:560px){
  .why-one__meet-time{display:none}
  .why-one__meet-controls{gap:.4rem;padding:.5rem .7rem}
  .why-one__meet-btn{width:2.1rem;height:2.1rem}
  .why-one__meet-btn--end{width:2.9rem}
}

.why-one__lead{
  max-width:60ch;margin:0 0 var(--space-5);
  font:400 var(--font-h5)/1.55 var(--font-sans);color:var(--ink-62);
}
.why-one__rows{
  display:flex;flex-direction:column;gap:var(--space-3);
}
.why-one__row{
  display:grid;grid-template-columns:1fr auto 1.15fr;align-items:center;
  gap:var(--space-5);
  background:var(--surface-raised);
  border-radius:var(--radius-2xl);
  padding:var(--space-4) var(--space-5);
  box-shadow:0 6px 24px rgba(0,0,0,.22),inset 0 1px 0 var(--surface-04);
  transition:transform .3s var(--ease-out);
}
.why-one__row:hover{transform:translateY(-2px)}
.why-one__side{display:flex;flex-direction:column;gap:6px;min-width:0}
.why-one__label{
  font:600 var(--font-eyebrow)/1 var(--font-sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-28);
}
.why-one__label--accent{color:var(--color-accent)}
.why-one__text{margin:0}
.why-one__side--problem .why-one__text{
  color:var(--ink-50);
  font:400 var(--font-body)/1.45 var(--font-sans);
}
.why-one__side--answer .why-one__text{
  color:var(--color-ink);
  font:600 var(--font-h5)/1.35 var(--font-sans);letter-spacing:-.01em;
}
.why-one__arrow{
  color:var(--color-accent);display:flex;align-items:center;justify-content:center;
  align-self:center;
}
@media(max-width:680px){
  .why-one__row{grid-template-columns:1fr;gap:var(--space-1);padding:var(--space-4)}
  .why-one__side{gap:2px}
  .why-one__arrow{transform:rotate(90deg);justify-self:start;margin:var(--space-2) 0}
  .why-one__arrow svg{width:24px;height:12px}
}

/* ============================================================
   8y. PORÓWNANIE — important.is vs inne agencje
   ============================================================ */
.compare__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-bottom:var(--space-5);
}
.compare__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.compare__note{
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);transform-origin:left center;
}
.compare__perks{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);
}
.compare__perk{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  padding:var(--space-4);
  background:var(--surface-raised);border-radius:var(--radius-2xl);
  box-shadow:0 6px 24px rgba(0,0,0,.22),inset 0 1px 0 var(--surface-04);
  transition:transform .3s var(--ease-out);
}
.compare__perk:hover{transform:translateY(-3px)}
.compare__perk-ico{
  display:flex;align-items:center;justify-content:center;
  width:5.6rem;height:5.6rem;border-radius:var(--radius-lg);
  background:var(--surface-04);color:var(--color-accent);
  margin-bottom:var(--space-1);
}
.compare__perk-title{
  font:700 var(--font-h5)/1.2 var(--font-sans);color:var(--color-ink);
}
.compare__perk-desc{
  font:400 var(--font-body)/1.5 var(--font-sans);color:var(--ink-62);margin:0;
}
@media(max-width:860px){
  .compare__perks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .compare__perks{grid-template-columns:1fr}
}

/* ── Reasons — wspólny blok „powody/zasady" (home „Czym się wyróżniamy"
   + /o-nas „Jak myślimy o pracy"). Design przeniesiony z /o-nas, globalny. ── */
.reasons__list{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);
  margin-top:var(--space-5);
}
.reasons__item{
  background:var(--surface-raised);border-radius:var(--radius-xl);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease-out);
}
.reasons__item:hover{transform:translateY(-3px)}
.reasons__ico{
  flex-shrink:0;padding:var(--space-4) var(--space-4) 0;color:var(--color-accent);
}
.reasons__ico .onas-ico{height:76px;width:auto;max-width:none;object-fit:contain;display:block}
.reasons__text{
  padding:var(--space-3) var(--space-4) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);flex:1;
}
.reasons__num{font:var(--fw-medium) var(--font-label)/1 var(--font-sans);color:var(--ink-28)}
.reasons__title{font:var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);color:var(--color-ink);letter-spacing:-.01em}
.reasons__body{font:var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);color:var(--ink-62)}
.reasons__cta{
  margin-top:var(--space-5);display:flex;flex-direction:column;align-items:center;
  gap:var(--space-3);text-align:center;
}
.reasons__cta-note{
  font:var(--fw-bold) var(--font-h5)/var(--lh-snug) var(--font-sans);
  color:var(--color-ink);max-width:40ch;
}
@media (max-width:640px){
  .reasons__list{grid-template-columns:1fr}
}

/* ============================================================
   7b. AI EXPERTS
   ============================================================ */
.ai-experts__grid{
  display:flex;flex-direction:column;gap:var(--space-5);
}
.ai-experts__head{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  margin-bottom:var(--space-3);
}
.ai-experts__head h2{
  font:800 var(--font-h2)/1.12 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);max-width:none;
}
.ai-experts__note{
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);transform-origin:left center;
}
.ai-experts__lead{
  max-width:62ch;margin:0 0 var(--space-4);
  font:400 var(--font-h5)/1.7 var(--font-sans);color:var(--ink-62);
}
.ai-experts__tools{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);
}
.ai-experts__tools-label{
  font:600 var(--font-caption)/1 var(--font-sans);
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-50);
}
.ai-experts__logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-5);
}
.ai-logo{display:inline-flex;align-items:center;gap:.9rem}
.ai-logo__mark{
  width:2.6rem;height:2.6rem;flex-shrink:0;
  background:var(--ink-50);
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
  transition:background .3s var(--ease-out);
}
.ai-logo__name{
  font:700 clamp(1.7rem,1.6vw,2rem)/1 var(--font-sans);
  letter-spacing:-.01em;color:var(--ink-50);
  transition:color .3s var(--ease-out);
}
.ai-logo:hover .ai-logo__mark{background:var(--brand)}
.ai-logo:hover .ai-logo__name{color:var(--color-ink)}

/* wykres tempa */
.ai-chart{
  margin:0;padding:var(--space-5);
  background:var(--surface-raised);border-radius:var(--radius-2xl);
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 1px 0 var(--surface-04);
}
.ai-chart__title{
  font:600 var(--font-caption)/1 var(--font-sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);
  margin-bottom:var(--space-3);
}
.ai-chart__hero{
  display:flex;align-items:flex-end;gap:var(--space-3);margin-bottom:var(--space-4);
}
.ai-chart__big{
  font:800 clamp(6rem,9vw,8.4rem)/.82 var(--font-sans);
  letter-spacing:-.04em;color:var(--color-accent);
}
.ai-chart__big-label{
  font:600 var(--font-body)/1.25 var(--font-sans);color:var(--color-ink);
  padding-bottom:.6rem;
}
.ai-chart__caption{
  margin:0 0 var(--space-3);
  font:600 var(--font-body)/1 var(--font-sans);color:var(--ink-62);
}
.ai-chart__viz{min-height:180px;margin-bottom:var(--space-2)}
.ai-chart__viz-ph{height:180px;border-radius:var(--radius-md);background:var(--surface-04)}
/* słupki — postęp w tym samym czasie (więcej = lepiej), etykieta nad słupkiem */
.ai-chart__bars{display:flex;flex-direction:column;gap:var(--space-4)}
.ai-chart__bar-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.8rem;gap:var(--space-2);
}
.ai-chart__bar-name{font:600 var(--font-body)/1 var(--font-sans);color:var(--ink-50)}
.ai-chart__bar-name--accent{color:var(--color-ink)}
.ai-chart__bar-val{font:700 var(--font-body)/1 var(--font-sans);color:var(--ink-50)}
.ai-chart__bar-val--accent{color:var(--color-accent)}
.ai-chart__track{
  position:relative;width:100%;height:5rem;
  border-radius:var(--radius-md);background:rgba(255,255,255,.06);overflow:hidden;
}
.ai-chart__fill{
  display:block;height:100%;width:0;border-radius:var(--radius-md);
  transition:width 1.1s var(--ease-out);
}
.ai-chart.is-visible .ai-chart__fill{width:var(--w)}
.ai-chart__fill--base{background:rgba(255,255,255,.20)}
.ai-chart__fill--ai{
  background:linear-gradient(90deg,var(--color-accent-dark),var(--color-accent));
  box-shadow:0 6px 20px rgba(255,52,52,.35);
}
.ai-chart__stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);
  margin-top:var(--space-5);
}
.ai-chart__stat{
  display:flex;flex-direction:column;gap:.4rem;
  padding:var(--space-3);border-radius:var(--radius-lg);background:var(--surface-04);
}
.ai-chart__stat-num{font:800 var(--font-h3)/1 var(--font-sans);color:var(--color-accent);letter-spacing:-.02em}
.ai-chart__stat-lbl{font:500 var(--font-caption)/1.3 var(--font-sans);color:var(--ink-62)}
.ai-chart__source{
  margin:var(--space-4) 0 0;
  font:400 var(--font-caption)/1.4 var(--font-sans);color:var(--ink-50);
}
@media(max-width:480px){
  .ai-chart__stats{grid-template-columns:1fr}
}

/* ============================================================
   8. Z ŻYCIA AGENCJI
   ============================================================ */
.agency-life{padding-block:var(--space-7);overflow:hidden}
.agency-life__head{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin-bottom:var(--space-5);
}
.agency-life__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.agency-life__note{
  margin:0;
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);
}
.agency-life__scroll-wrap{
  margin:0 calc(var(--page-padding) * -1);
  padding:0 var(--page-padding);
}
.agency-life__track{
  list-style:none;padding:0;margin:0;
  display:flex;gap:var(--space-3);
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--space-2);
}
.agency-life__track::-webkit-scrollbar{display:none}
.agency-life__card{
  flex:0 0 44vw;max-width:420px;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.agency-life__photo-wrap{
  position:relative;
  border-radius:var(--radius-2xl);overflow:hidden;
  aspect-ratio:3/4;
}
.agency-life__tag{
  position:absolute;top:var(--space-2);left:var(--space-2);z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--radius-full);
  background:rgba(11,11,11,.72);backdrop-filter:blur(8px);
  font:600 var(--font-caption)/1.4 var(--font-sans);
  color:var(--color-dark-text);letter-spacing:.04em;
}
.agency-life__tag::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--color-accent);flex-shrink:0;
}
.agency-life__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.03);
  transition:transform .4s var(--ease-out);
}
.agency-life__card:hover .agency-life__img{transform:scale(1.03)}
.agency-life__card-foot{
  display:flex;align-items:flex-start;gap:var(--space-2);
}
.agency-life__caption{
  flex:1;margin:0;
  font:400 var(--font-body)/1.55 var(--font-sans);color:var(--ink-62);
}
.agency-life__link{
  flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--surface-raised);color:var(--color-ink);
  text-decoration:none;transition:background .2s;
}
.agency-life__link:hover{background:var(--surface-hover)}
@media(max-width:560px){
  .agency-life__card{flex:0 0 80vw}
}

/* ============================================================
   8b. Z ŻYCIA AGENCJI V2 — social card shelf (jak referencja)
   ============================================================ */
.agency-life-v2{padding-block:var(--space-7);overflow:hidden}
.agency-life-v2__head-wrap{
  display:flex;flex-direction:column;gap:var(--space-1);
  margin-bottom:var(--space-5);
}
.agency-life-v2__h2{
  font:800 var(--font-h3)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.agency-life-v2__note{
  margin:0;
  font:400 clamp(1.6rem,1.8vw,2.2rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);transform-origin:left center;
}

/* .section jest flex — pin to element flex; bez tego trzyma max-width inner (768px)
   i wycentrowany wyjeżdża poza wąski ekran. width:100%+min-width:0 = pełna szerokość sekcji. */
.agency-life-v2__pin{width:100%;min-width:0}
.agency-life-v2__inner{
  display:flex;flex-direction:column;min-width:0;
  /* wrapper .pin przerywa centrowanie z .section, więc wracamy do niego tu:
     lewa krawędź trafia na linię kontenera (768px) jak każda inna sekcja */
  margin-inline:auto;
}
.agency-life-v2__scroll-outer{
  /* lewa krawędź = kolumna treści (jak nagłówek), prawa = brzeg viewportu */
  margin-right:calc(50% - 50vw);
}
.agency-life-v2__track{
  list-style:none;padding:0;margin:0;
  display:flex;gap:var(--space-3);align-items:flex-start;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:var(--space-2);
}
/* Rozpórka na końcu — realny item flexa (liczy się do scrollWidth, w przeciwieństwie
   do padding-right), żeby ostatnia karta kończyła z oddechem, a scroll jechał dalej. */
.agency-life-v2__track::after{
  content:'';flex:0 0 var(--page-padding);align-self:stretch;
}
.agency-life-v2__track::-webkit-scrollbar{display:none}

.agency-life-v2__card{
  flex:0 0 29vw;max-width:267px;
  scroll-snap-align:start;
  display:flex;flex-direction:column;gap:var(--space-2);
}

/* Photo block z tagiem */
.agency-life-v2__photo{
  position:relative;
  aspect-ratio:15/16;
  border-radius:var(--radius-2xl);
  overflow:hidden;
}
.agency-life-v2__tag{
  position:absolute;top:var(--space-2);left:var(--space-2);z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--radius-full);
  background:rgba(11,11,11,.68);backdrop-filter:blur(8px);
  font:600 var(--font-caption)/1.4 var(--font-sans);
  color:var(--color-dark-text);letter-spacing:.04em;
}
.agency-life-v2__tag::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--color-accent);flex-shrink:0;
}
.agency-life-v2__img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.03);
  transition:transform .4s var(--ease-out);
}
.agency-life-v2__card:hover .agency-life-v2__img{transform:scale(1.03)}

/* Caption + link pod zdjęciem */
.agency-life-v2__foot{
  display:flex;align-items:flex-start;gap:var(--space-2);
}
.agency-life-v2__caption{
  flex:1;margin:0;
  font:400 var(--font-body)/1.55 var(--font-sans);color:var(--color-ink);
}
.agency-life-v2__link{
  flex-shrink:0;margin-top:3px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-62);text-decoration:none;
  transition:color .2s;
}
.agency-life-v2__link:hover{color:var(--color-ink)}

@media(max-width:860px){
  .agency-life-v2__card{flex:0 0 38vw}
}
@media(max-width:560px){
  .agency-life-v2__card{flex:0 0 55vw}
}

/* ── Pin + poziomy scroll sterowany pionowym (JS: .is-hscroll, wysokość sekcji
   ustawiana inline). Mobile / Reduce Motion: nieaktywne → natywny swipe. ── */
.agency-life-v2.is-hscroll{
  overflow:visible;          /* override overflow:hidden — inaczej sticky nie działa */
  padding-block:0;           /* spacing przenosimy na .pin */
  padding-inline:0;          /* pin ma być pełnej szerokości viewportu (clip 0→100vw),
                                inaczej ucina karty przy krawędziach; tytuł/karty i tak
                                trzyma linia kontenera przez wyśrodkowany __inner */
  position:relative;
}
.agency-life-v2.is-hscroll .agency-life-v2__pin{
  position:sticky;top:0;
  overflow:hidden;           /* przycina jadący track */
  padding-block:var(--space-7);
}
.agency-life-v2.is-hscroll .agency-life-v2__scroll-outer{
  overflow:visible;          /* JS steruje translateX, bez natywnego scrolla */
}
.agency-life-v2.is-hscroll .agency-life-v2__track{
  overflow:visible;
  scroll-snap-type:none;
  will-change:transform;
}

/* ============================================================
   9. WPISY BLOGOWE
   ============================================================ */
.blog-highlights{
  padding-block:var(--space-7);
}
.blog-highlights__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.blog-highlights__note{
  margin:var(--space-1) 0 0;
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.2 var(--font-decorative);
  color:var(--color-accent);
  transform:rotate(-1.5deg);
  transform-origin:left center;
  display:block;
}
.blog-highlights__head{
  margin-bottom:var(--space-5);
}

.blog-highlights__grid{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.blog-card{
  display:flex;
  flex-direction:row;
  gap:var(--space-4);
  align-items:flex-start;
  background:var(--surface-raised);
  border-radius:var(--radius-xl);
  padding:var(--space-3);
  text-decoration:none;
  color:inherit;
}

.blog-card__img-wrap{
  flex-shrink:0;
  width:clamp(120px,18vw,200px);
  aspect-ratio:1/1;
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
}

.blog-card__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.blog-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
}

.blog-card__title{
  font:700 var(--font-body)/1.35 var(--font-sans);
  color:var(--color-ink);
  margin:0;
}

.blog-card__desc{
  font:400 var(--font-label)/1.55 var(--font-sans);
  color:var(--ink-62);
  margin:0;
}

.blog-card__tag{
  align-self:flex-start;
}

.blog-card__foot{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.blog-card__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-dark-text);
  text-decoration:none;
  flex-shrink:0;
  transition:transform .2s;
}
.blog-card__arrow:hover{transform:translateX(3px)}

@media(max-width:480px){
  .blog-card{flex-direction:column}
  .blog-card__img-wrap{width:100%;aspect-ratio:16/9}
}

@media (max-width:768px){
  .agency-life__item{grid-template-columns:1fr;gap:var(--space-3)}
}

/* ============================================================
   9b. WPISY BLOGOWE V2 — numerowana lista edytorska
   ============================================================ */
.blog-v2{
  padding-block:var(--space-6);
}
.blog-v2__head{
  display:flex;flex-direction:column;gap:var(--space-2);
  margin-bottom:var(--space-4);
}
.blog-v2__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.blog-v2__note{
  font:400 clamp(1.6rem,1.8vw,2.2rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);transform-origin:left center;
}
.blog-v2__list{
  display:flex;flex-direction:column;gap:var(--space-3);
}
/* jeden wiersz: [thumb] [tag] [body] [→] */
.blog-v2__row{
  display:grid;
  grid-template-columns:8rem 1fr auto;
  align-items:center;
  gap:var(--space-3);
  padding-block:var(--space-2);
  transition:background .2s var(--ease-out);
  border-radius:var(--radius-lg);
  margin-inline:calc(-1 * var(--space-3));
  padding-inline:var(--space-3);
  text-decoration:none;color:inherit;
}
.blog-v2__row:hover{background:var(--surface-raised)}
.blog-v2__row:hover .blog-v2__arrow{transform:translateX(5px)}
.blog-v2__row:hover .blog-v2__thumb{transform:scale(1.06)}

.blog-v2__thumb{
  width:100%;aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .5s var(--ease-out);
  flex-shrink:0;
}
.blog-v2__cat{
  /* inherits .tag styles */
  flex-shrink:0;
}
.blog-v2__meta{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin-top:.7rem;
}
.blog-v2__author{
  font:500 var(--font-caption)/1.4 var(--font-sans);
  color:var(--ink-62);
}
.blog-v2__body{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  min-width:0;
}
.blog-v2__title{
  font:700 var(--font-h4)/1.2 var(--font-sans);
  letter-spacing:-.01em;
  color:var(--color-ink);
}
.blog-v2__arrow{
  font-size:1.6rem;
  color:var(--color-accent);
  transition:transform .2s var(--ease-spring);
  flex-shrink:0;
}

@media(max-width:680px){
  .blog-v2__row{grid-template-columns:7rem 1fr auto;gap:var(--space-3)}
  .blog-v2__meta{display:none}
}

/* ============================================================
   9B. FAQ — accordion
   ============================================================ */
.faq{padding-block:var(--space-6) var(--space-7)}
.faq__head{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  text-align:center;margin-bottom:var(--space-5);
}
.faq__head h2{
  font:800 var(--font-h2)/1.1 var(--font-sans);
  letter-spacing:-.01em;color:var(--color-ink);
}
.faq__note{
  margin-top:var(--space-1);
  font:400 clamp(2.0rem,2.2vw,2.8rem)/1.15 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-2deg);
}
.faq__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:76rem;display:flex;flex-direction:column;gap:var(--space-2);
}
.faq__item{
  background:var(--surface-raised);border-radius:var(--radius-xl);
  overflow:hidden;transition:background .25s ease;
}
.faq__item:hover,.faq__item--open{background:var(--surface-hover)}
.faq__question{margin:0}
.faq__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  width:100%;padding:var(--space-3) var(--space-4);
  background:none;border:0;cursor:pointer;text-align:left;
  font:700 var(--font-h4)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--color-ink);
  -webkit-tap-highlight-color:transparent;
}
.faq__trigger:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px;border-radius:var(--radius-xl)}
.faq__question-text{flex:1}
.faq__indicator{
  flex:none;display:grid;place-items:center;
  width:3.2rem;height:3.2rem;
  color:var(--ink-28);transition:transform .3s var(--ease-out),color .3s ease;
}
.faq__item--open .faq__indicator{transform:rotate(45deg);color:var(--color-accent)}
.faq__panel{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s var(--ease-out),opacity .3s ease;
}
.faq__item--open .faq__panel{max-height:100rem;opacity:1}
.faq__answer{
  margin:0;padding:0 var(--space-4) var(--space-4);
  max-width:60rem;
  font:400 var(--font-body)/1.65 var(--font-sans);color:var(--ink-62);
}
@media (max-width:768px){
  .faq{padding-block:var(--space-5) var(--space-6)}
  .faq__head{margin-bottom:var(--space-4)}
  .faq__note{transform:rotate(-1deg)}
  .faq__trigger{padding:var(--space-3);gap:var(--space-2)}
  .faq__indicator{width:2.8rem;height:2.8rem}
  .faq__answer{padding:0 var(--space-3) var(--space-3)}
}

/* ============================================================
   10. FINAL CTA
   ============================================================ */
.final-cta-section{padding-block:var(--space-8,8rem) var(--space-7)}
.final-cta__headline{
  font:800 clamp(2.8rem,5vw + 1rem,6.4rem)/1.1 var(--font-sans);
  letter-spacing:-.02em;color:var(--color-ink);
  max-width:900px;margin:0 0 var(--space-6);
}
.final-cta__channel{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--color-ink);text-decoration:none;
  transition:color .2s;vertical-align:middle;
}
.final-cta__channel:hover{color:var(--color-accent)}
.final-cta__channel .u-sketch-ul{font-style:normal}
.final-cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(200px,30%,280px);
  gap:var(--space-5);
  align-items:center;
}
.final-cta__form{
  display:flex;flex-direction:column;gap:var(--space-3);
}
.final-cta__photo{
  margin:0;
  display:flex;flex-direction:column;gap:var(--space-2);
}
.final-cta__photo-img{
  border-radius:var(--radius-2xl);
  overflow:hidden;
  aspect-ratio:4/5;
}
.final-cta__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  display:block;
}
.final-cta__photo-cap{
  display:flex;flex-direction:column;gap:1px;
}
.final-cta__photo-name{
  font:700 var(--font-h5)/1.3 var(--font-sans);color:var(--color-ink);
}
.final-cta__photo-role{
  font:400 var(--font-body)/1.4 var(--font-sans);color:var(--ink-62);
}
.final-cta__photo-note{
  margin-top:8px;
  font:400 clamp(2rem,2.4vw,2.6rem)/1.25 var(--font-decorative);
  color:var(--color-accent);transform:rotate(-1.5deg);transform-origin:left center;
}
.final-cta__li-icon{display:inline-block;vertical-align:middle}
.final-cta__fields{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);
}
.final-cta__input,.final-cta__textarea{
  width:100%;padding:16px 20px;
  background:var(--surface-raised);
  border:none;border-radius:var(--radius-xl);
  font:400 var(--font-body)/1.5 var(--font-sans);
  color:var(--color-ink);
  transition:background .2s;
}
.final-cta__input::placeholder,.final-cta__textarea::placeholder{color:var(--ink-48)}
.final-cta__input:focus,.final-cta__textarea:focus{background:var(--surface-hover)}
.final-cta__input:focus-visible,.final-cta__textarea:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;
}
.final-cta__textarea{
  grid-column:2;grid-row:1 / span 3;
  resize:none;
}
.final-cta__submit{
  align-self:flex-start;
  padding:16px 40px;border:none;border-radius:var(--radius-full);
  background:var(--color-accent);
  font:700 var(--font-body)/1 var(--font-sans);color:var(--color-dark-text);
  cursor:pointer;transition:opacity .2s;
}
.final-cta__submit:hover{opacity:.88}
@media(max-width:680px){
  .final-cta__grid{grid-template-columns:1fr}
  /* Karta osoby: na mobile poziomo — zdjęcie (mniejsze) po lewej, dane po prawej */
  .final-cta__photo{
    max-width:none;justify-self:stretch;
    flex-direction:row;align-items:center;gap:var(--space-4);
  }
  .final-cta__photo-img{
    flex:0 0 auto;width:clamp(96px,30vw,140px);aspect-ratio:1/1;
  }
  .final-cta__photo-cap{flex:1 1 auto;min-width:0}
  .final-cta__fields{grid-template-columns:1fr}
  .final-cta__textarea{grid-column:1;grid-row:auto}
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer{
  padding:var(--space-6) var(--page-padding) var(--space-4);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  background:var(--surface-raised);
}
.footer__logo{font:800 var(--font-h5)/1 var(--font-sans);color:var(--color-ink)}
.footer__logo b{color:var(--color-accent)}
.footer__nav{display:flex;gap:var(--space-3) var(--space-4);flex-wrap:wrap;justify-content:center}
.footer__nav a{font:500 var(--font-label)/1 var(--font-sans);color:var(--ink-62);text-decoration:none}
.footer__nav a:hover{color:var(--color-ink)}
.footer__copy{font:400 var(--font-caption)/1.5 var(--font-sans);color:var(--ink-28);text-align:center}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0!important;transition-duration:0!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Scroll-fade utility
   ============================================================ */
/* Base .fade-in gated pod html.reveal-on — źródło prawdy w assets/css/reveal.css.
   Bez klasy reveal-on (JS padł/zablokowany) nic się nie chowa. */
html.reveal-on .fade-in{opacity:0;transform:translateY(var(--reveal-rise,16px));transition:opacity var(--reveal-dur,.6s) var(--ease-out),transform var(--reveal-dur,.6s) var(--ease-out)}
html.reveal-on .fade-in.is-visible{opacity:1;transform:translateY(0)}
html.reveal-on .quote.fade-in.is-visible{transform:rotate(var(--rot)) translateY(0)}
html.reveal-on .quote.fade-in{transform:rotate(var(--rot)) translateY(var(--reveal-rise,16px))}

/* Animowalna zmienna do efektu "pisania ręcznego" / "rysowania" ikon.
   Bez @property przejście wartości w gradiencie maski skacze zamiast płynąć. */
@property --hw{
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}

/* Micro-motion polish — handwriting: tekst Mansalva „wypisuje się" L→P
   miękką maską (ink-in) + delikatne osiadanie (rotate/scale). */
.hero__handwritten,
.fit__note,
.faq__note,
.people-v2__note,
.areas__hand,
.process__handwritten,
.step__callout-label,
.agency-life__note,
.agency-life-v2__note{
  opacity:0;
  transform:rotate(-4deg) translateY(6px) scale(.96);
  --hw:0%;
  -webkit-mask-image:linear-gradient(92deg,#000 var(--hw),rgba(0,0,0,0) calc(var(--hw) + 10%));
  mask-image:linear-gradient(92deg,#000 var(--hw),rgba(0,0,0,0) calc(var(--hw) + 10%));
  transition:
    opacity .3s var(--ease-out) .1s,
    transform .52s var(--ease-spring) .12s,
    --hw .85s var(--ease-out) .14s;
}
.fade-in.is-visible .hero__handwritten,
.fade-in.is-visible .fit__note,
.fade-in.is-visible .faq__note,
.fade-in.is-visible .people-v2__note,
.fade-in.is-visible .areas__hand,
.fade-in.is-visible .process__handwritten,
.fade-in.is-visible .step__callout-label,
.fade-in.is-visible .agency-life__note,
.fade-in.is-visible .agency-life-v2__note,
.fade-in.is-visible.step .step__callout-label{
  opacity:1;
  transform:rotate(-2deg) translateY(0) scale(1);
  --hw:100%;
}

.hero__arrow,
.results__underline{
  clip-path:inset(0 100% 0 0);
  opacity:0;
  transition:clip-path .9s var(--ease-out) .28s,opacity .2s var(--ease-out) .28s;
}
.fade-in.is-visible .hero__arrow,
.fade-in.is-visible .results__underline{
  clip-path:inset(0 0 0 0);
  opacity:1;
}

.step__icon{
  opacity:0;
  transform:scale(.86) rotate(-5deg);
  transition:opacity .32s var(--ease-out),transform .58s var(--ease-spring);
}
.step.is-visible .step__icon{
  opacity:1;
  transform:scale(1) rotate(0);
}

.agency-life__image{
  transform:scale(.98);
  transition:transform .6s var(--ease-out),filter .6s var(--ease-out);
}
.agency-life__item.is-visible .agency-life__image{
  transform:scale(1);
}
.agency-life__item:hover .agency-life__image{
  transform:scale(1.035);
  filter:saturate(1) contrast(1.05);
}

/* V2: story-card scale-in on scroll */
.agency-life-v2__card{
  transform:scale(.96);
  opacity:0;
  transition:transform .55s var(--ease-spring),opacity .4s var(--ease-out);
}
.agency-life-v2__card.is-visible{
  transform:scale(1);
  opacity:1;
}

/* Odręczne ikony „rysują się" przy scrollu — miękka maska ink-in (skos)
   + osiadanie. Ikony są wypełnione (brak strokeów), więc trace jest niemożliwy. */
.fade-in .area-card__icon,
.fade-in .areas6__pillar-icon{
  opacity:0;
  transform:scale(.9);
  --hw:0%;
  -webkit-mask-image:linear-gradient(118deg,#000 var(--hw),rgba(0,0,0,0) calc(var(--hw) + 14%));
  mask-image:linear-gradient(118deg,#000 var(--hw),rgba(0,0,0,0) calc(var(--hw) + 14%));
  transition:
    opacity .35s var(--ease-out) .15s,
    transform .6s var(--ease-spring) .15s,
    --hw .8s var(--ease-out) .2s;
}
.fade-in.is-visible .area-card__icon,
.fade-in.is-visible .areas6__pillar-icon{
  opacity:1;
  transform:scale(1);
  --hw:100%;
}
/* Drobne „życie" na hover — ikona lekko ożywa (po osiadaniu). */
.area-card:hover .area-card__icon{
  transform:scale(1.05) rotate(-3deg);
  transition:transform .45s var(--ease-spring);
}

/* Gravity Forms — styl przeniesiony do globalnego assets/css/gravity-skin.css */

/* case--media styles — moved to section 3b above */

/* ---- Opinia wideo (sekcja „Wyniki") ---- */
.rcard--video .rcard__thumb--video {
  position: relative; overflow: hidden; border-radius: var(--radius-lg, 1.4rem);
  aspect-ratio: 4 / 5; background: #000;
}
.rcard--video .rcard__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard--video .rcard__vidcap { color: var(--ink-62, rgba(237,235,231,.62)); font-size: var(--font-caption, 1.4rem); margin-top: var(--space-2, 1.2rem); }

/* Gravity Forms — pełny styl globalny w assets/css/gravity-skin.css */

/* ---- Footer (port ze starej strony, ciemny styl) ---- */
.footer-x {
  background: var(--surface-raised, #121212);
  padding-block: var(--space-8, 6.4rem) var(--space-5, 3.2rem);
  padding-inline: max(var(--page-padding), calc((100vw - 76.8rem) / 2));
}
.footer-x__inner {
  max-width: var(--container-page, 76.8rem); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6, 4rem);
}
.footer-x__logo {
  font: 400 clamp(2.2rem, 1.8vw, 2.8rem)/1 var(--font-decorative, 'Mansalva', cursive);
  color: var(--color-ink, #edebe7);
}
.footer-x__logo-is { color: var(--color-accent, #FF3434); }
.footer-x__desc { color: var(--ink-62, rgba(237,235,231,.62)); margin-top: var(--space-3, 1.6rem); max-width: 28rem; line-height: 1.6; font-size: var(--font-body); }
.footer-x__nav {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
}
.footer-x__nav a {
  color: var(--ink-62); text-decoration: none; font-size: var(--font-body);
  transition: color .2s ease;
}
.footer-x__nav a:hover { color: var(--color-accent); }
.footer-x__social { display: flex; gap: .8rem; margin-top: var(--space-4, 2.4rem); }
.footer-x__social a {
  width: 4rem; height: 4rem; border-radius: var(--radius-full, 999rem);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-04, rgba(255,255,255,.05)); color: var(--ink-90, rgba(237,235,231,.9));
  text-decoration: none; font-size: var(--font-caption, 1.4rem); font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.footer-x__social a:hover { background: var(--color-accent, #FF3434); color: #fff; }
.footer-x__social svg { width: 1.8rem; height: 1.8rem; display: block; }
.footer-x__title {
  color: var(--color-dark-text, #fff); font-weight: 700; font-size: var(--font-caption, 1.4rem);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-3, 1.6rem);
}
.footer-x__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 1.2rem); }
.footer-x__list a { color: var(--ink-62, rgba(237,235,231,.62)); text-decoration: none; transition: color .2s ease; }
.footer-x__list a:hover { color: var(--color-accent, #FF3434); }
.footer-x__bar {
  max-width: var(--container-page, 76.8rem); margin: var(--space-6, 4rem) auto 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3, 1.6rem); justify-content: space-between; align-items: center;
}
.footer-x__copy { color: var(--ink-48, rgba(237,235,231,.48)); font-size: var(--font-caption, 1.4rem); }
.footer-x__legal { display: flex; flex-wrap: wrap; gap: var(--space-4, 2.4rem); }
.footer-x__legal a { color: var(--ink-48, rgba(237,235,231,.48)); text-decoration: none; font-size: var(--font-caption, 1.4rem); transition: color .2s ease; }
.footer-x__legal a:hover { color: var(--ink-90, rgba(237,235,231,.9)); }
@media (max-width: 680px) {
  .footer-x__inner { grid-template-columns: 1fr 1fr; gap: var(--space-5, 3.2rem); }
  .footer-x__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-x__inner { grid-template-columns: 1fr; }
  .footer-x__bar { flex-direction: column; align-items: flex-start; }
}

/* ---- Opinie: odręczny cudzysłów + rola autora ---- */
.rcard__qmark {
  display: block; font-family: 'Mansalva', cursive; color: var(--color-accent, #FF3434);
  font-size: 5.6rem; line-height: .6; height: 2.4rem; margin-bottom: var(--space-2, 1.2rem);
  user-select: none;
}
.author__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.author__logo-img { height: 2.2rem; width: auto; max-width: 9rem; object-fit: contain; margin-left: auto; flex: 0 0 auto; opacity: .9; }
.author__role { color: var(--ink-48, rgba(237,235,231,.48)); font-size: var(--font-caption, 1.4rem); line-height: 1.3; margin: 0; }
.rcard--video .rcard__vidcap { color: var(--ink-62, rgba(237,235,231,.62)); }
.rcard--video .rcard__vidcap strong { color: var(--color-ink, #edebe7); }

/* ==========================================================================
   TRANSPARENCY — Pełna transparentność / raporty
   ========================================================================== */
/* Sekcja bez tła — szare tło żyje na karcie (.transparency__inner), nie na całej szerokości */
.transparency__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-8);
  row-gap: var(--space-6);
  align-items: center;
  background: var(--surface-raised);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-6);
}
.transparency__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.transparency__handwritten {
  font: 400 3.2rem/1.1 var(--font-decorative, 'Mansalva', cursive);
  color: var(--color-accent);
  transform: rotate(-2deg);
  transform-origin: left center;
  display: inline-block;
  user-select: none;
  margin-bottom: var(--space-1);
}
.transparency__headline {
  font: var(--fw-bold) clamp(1.9rem, 1.69vw + 1.267rem, 3.0rem)/1.3 var(--font-sans);
  color: var(--color-ink);
}
.transparency__sub {
  font: var(--fw-regular) var(--font-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--ink-62);
}
.transparency__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
}
.transparency__link {
  font: var(--fw-medium) var(--font-body)/1 var(--font-sans);
  color: var(--ink-62);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-base) var(--ease-out);
}
.transparency__link:hover { color: var(--color-ink); }
.transparency__visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.transparency__img {
  width: 100%;
  max-width: 38rem;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.55)) drop-shadow(0 6px 16px rgba(0,0,0,.3));
  transform: rotate(2deg);
  transform-origin: center bottom;
}
@media (max-width: 768px) {
  .transparency__inner {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }
  .transparency__visual {
    order: -1;
  }
  .transparency__img {
    max-width: 26rem;
    transform: rotate(1.5deg);
  }
  .transparency__ctas {
    flex-direction: column;
    align-items: flex-start;
  }
}