/* =========================================================
   VCreatives — style.css
   Paleta z obecnej strony; typografia: Prompt (nagłówki) + Sora (tekst),
   granat #0d1445, pomarańcz #ff4d00, biel #fafcfc, szałwia #a9b4a4)
   ========================================================= */

:root {
  --navy: #0d1445;
  --navy-2: #2a3166;
  --orange: #ff4d00;
  --orange-2: #ff6a2a;
  /* pomarańcz do małego tekstu: na jasnym tle ciemniejszy (kontrast 4.6–5.3:1, WCAG AA), na granacie zwykły */
  --orange-text: #bf3a00;
  --cream: #fafcfc;
  --sage: #a9b4a4;
  --sage-bg: #e9ede7;

  --bg: var(--cream);
  --fg: var(--navy);
  --surface: rgba(255, 255, 255, 0.7);
  --surface-2: rgba(255, 255, 255, 0.55);
  --line: rgba(13, 20, 69, 0.14);
  --line-strong: #b9c2b5;
  --sage-section: var(--sage-bg);
  --header-bg: rgba(250, 252, 252, 0.78);
  --ph-grad: linear-gradient(160deg, #b9c3b4 0%, #a9b4a4 55%, #8f9c8b 100%);
  --shadow: 0 30px 60px -36px rgba(13, 20, 69, 0.45);

  --font-display: 'Prompt', system-ui, sans-serif;
  --font-body: Sora, system-ui, sans-serif;
  --container: 1280px;
  --radius: 28px;
  --section-pad: clamp(72px, 10vw, 128px);
}

[data-theme="dark"] {
  --orange-text: var(--orange);
  --bg: #0b1034;
  --fg: var(--cream);
  --surface: rgba(250, 252, 252, 0.06);
  --surface-2: rgba(250, 252, 252, 0.06);
  --line: rgba(250, 252, 252, 0.16);
  --line-strong: rgba(250, 252, 252, 0.22);
  --sage-section: #131a46;
  --header-bg: rgba(11, 16, 52, 0.78);
  --ph-grad: linear-gradient(160deg, #2f3772 0%, #232a5e 60%, #1a2050 100%);
  --shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --orange-text: var(--orange);
    --bg: #0b1034;
    --fg: var(--cream);
    --surface: rgba(250, 252, 252, 0.06);
    --surface-2: rgba(250, 252, 252, 0.06);
    --line: rgba(250, 252, 252, 0.16);
    --line-strong: rgba(250, 252, 252, 0.22);
    --sage-section: #131a46;
    --header-bg: rgba(11, 16, 52, 0.78);
    --ph-grad: linear-gradient(160deg, #2f3772 0%, #232a5e 60%, #1a2050 100%);
    --shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  transition: background-color .4s, color .4s;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(34px, 4.2vw, 44px); font-weight: 700; text-transform: uppercase; }
h3 { font-weight: 600; }
.h2--orange { color: var(--orange); }
em { font-style: italic; color: var(--orange-text); }
h1 em, h2 em, h3 em { color: var(--orange); }
.em--navy { color: var(--fg); }
p { margin: 0; }
a { color: inherit; transition: color .25s; }
a:hover { color: var(--orange-text); }
.more { font-weight: 600; font-size: 16px; }
.container { max-width: var(--container); margin: 0 auto; padding-inline: 24px; }
.section-head { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.section-head p { max-width: 560px; font-size: 18px; }
.ph { font-size: 14px; font-weight: 400; text-align: center; padding: 16px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--orange); color: var(--navy); border-radius: 999px; font-weight: 600; }
.skip:focus { top: 8px; }

/* ---------- ziarno: tylko w warstwie tła sekcji, nieruchome, jedzie z parallaxem tła ---------- */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.30' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-0.45'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-0.45'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-opacity: .14; --grain-blend: multiply; }
[data-theme="dark"] { --grain-opacity: .10; --grain-blend: screen; }
@media (prefers-color-scheme: dark) { [data-theme="auto"] { --grain-opacity: .10; --grain-blend: screen; } }
.bg::after {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 320px 320px;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  transform: translate3d(0, var(--bgy, 0px), 0); will-change: transform;
}
.bg--navy::after { mix-blend-mode: screen; opacity: .09; }
.bg--orange::after { mix-blend-mode: multiply; opacity: .12; }
.bg--plain::before { background: none; animation: none; }

/* ---------- animated gradient backgrounds ---------- */
.bg { position: relative; isolation: isolate; overflow: hidden; }
.bg::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate; will-change: transform;
}
.bg--hero::before { background: radial-gradient(42% 55% at 12% 18%, rgba(255,77,0,.16), transparent 65%), radial-gradient(38% 45% at 88% 70%, rgba(169,180,164,.45), transparent 65%); }
.bg--navy { background: var(--navy); color: var(--cream); --orange-text: var(--orange); }
.bg--navy::before { background: radial-gradient(45% 55% at 15% 12%, rgba(255,77,0,.30), transparent 62%), radial-gradient(40% 50% at 88% 92%, rgba(250,252,252,.10), transparent 60%); }
.bg--sage { background: var(--sage-section); }
.bg--sage::before { background: radial-gradient(45% 55% at 85% 15%, rgba(255,77,0,.12), transparent 62%), radial-gradient(40% 50% at 10% 90%, rgba(255,255,255,.7), transparent 60%); }
.bg--orange { background: var(--orange); color: var(--navy); }
.bg--orange::before { background: radial-gradient(50% 60% at 15% 20%, rgba(255,140,80,.55), transparent 62%), radial-gradient(45% 55% at 90% 85%, rgba(200,50,0,.35), transparent 60%); }
.bg--cream::before { background: radial-gradient(40% 50% at 90% 10%, rgba(169,180,164,.35), transparent 62%), radial-gradient(35% 45% at 5% 95%, rgba(255,77,0,.08), transparent 60%); }
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
.round-top { border-radius: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px) 0 0; margin-top: -72px; z-index: 1; box-shadow: 0 -30px 60px -40px rgba(13,20,69,.35); }

/* ---------- parallax (JS ustawia --py w px; tło sekcji płynie wolniej) ---------- */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.bg::before { transform: translate3d(0, calc(var(--bgy, 0px) * 1), 0); }
.bg.is-inview::before { animation: none; }

/* ---------- widmowe nagłówki (outline, za treścią) ---------- */
.ghost {
  position: absolute; left: 50%; top: 6%; z-index: 0; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 22vw, 320px); line-height: 1; text-transform: lowercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(250,252,252,.14); letter-spacing: -.02em;
  translate: -50% 0; rotate: -4deg; opacity: .9;
}
.ghost--orange { -webkit-text-stroke-color: rgba(255,77,0,.16); }
.ghost--navy { -webkit-text-stroke-color: rgba(13,20,69,.18); }
.bg--sage .ghost { -webkit-text-stroke-color: rgba(13,20,69,.10); }
[data-theme="dark"] .bg--sage .ghost { -webkit-text-stroke-color: rgba(250,252,252,.10); }
.services, .quotes, .process { position: relative; }
.ghost + .container { position: relative; z-index: 1; }

/* ---------- pieczątka i naklejki w hero ---------- */
.hero__media-wrap { position: relative; flex: 1 1 420px; min-width: 0; }
.hero__media-wrap .hero__media { flex: none; width: 100%; }
.badge {
  position: absolute; right: -8px; bottom: 6%; width: 132px; height: 132px; border-radius: 50%;
  background: var(--orange); color: var(--navy); display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 24px 48px -20px rgba(13,20,69,.5); transition: transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s;
}
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge text { font-family: var(--font-body); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; fill: currentColor; }
.badge__arrow { font-size: 34px; line-height: 1; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.badge:hover { transform: scale(1.08) rotate(-6deg); background: var(--orange-2); color: var(--navy); }
.badge:hover .badge__arrow { transform: translateX(6px); }
.badge:hover svg { animation-duration: 6s; }
@keyframes spin { to { transform: rotate(360deg); } }
.sticker {
  position: absolute; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(13,20,69,.5);
}
.sticker--1 { left: -10px; top: 10%; rotate: -8deg; }
.sticker--2 { right: 6%; top: -14px; rotate: 5deg; }

/* ---------- marquee klientów ---------- */
.marquee { display: flex !important; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: 12px; flex: none; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .frame { flex: none; min-width: 200px; padding: 0 28px; }
@keyframes marquee { to { transform: translateX(calc(-100% - 12px)); } }

/* ---------- sheen (połysk przejeżdżający po ramkach) ---------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 36%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.20) 50%, rgba(255,255,255,0) 65%, transparent 100%);
  transform: translateX(-260%) rotate(8deg);
  animation: sheen 12s cubic-bezier(.4,0,.2,1) infinite;
}
.sheen--dark::after { background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,.09) 50%, rgba(255,255,255,0) 65%, transparent 100%); }
.sheen:nth-child(2n)::after { animation-delay: 2.2s; }
.sheen:nth-child(3n)::after { animation-delay: 4.1s; }
.sheen:nth-child(5n)::after { animation-delay: 6.3s; }
@keyframes sheen { 0% { transform: translateX(-260%) rotate(8deg); } 38%, 100% { transform: translateX(420%) rotate(8deg); } }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 17px;
  text-decoration: none; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background-color .35s, color .35s, border-color .35s;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 32px -12px rgba(13,20,69,.45); }
.btn:active { transform: translateY(0) scale(.99); }
.btn--primary { background: var(--orange); color: var(--navy); }
.btn--primary:hover { background: var(--orange-2); color: var(--navy); }
.btn--ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--fg); font-weight: 500; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn--navy { background: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--orange); color: var(--navy); }
[data-theme="dark"] .btn--navy { background: var(--orange); color: var(--navy); }
[data-theme="dark"] .btn--navy:hover { background: var(--orange-2); }
.btn__done { display: none; }
.btn.is-sent .btn__label { display: none; }
.btn.is-sent .btn__done { display: inline-flex; align-items: center; gap: 8px; }
.btn.is-sent .btn__done svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: check .5s ease-out forwards; }
@keyframes check { to { stroke-dashoffset: 0; } }

/* ---------- cards / frames ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px;
  box-shadow: 0 2px 0 rgba(13,20,69,.05), 0 24px 50px -36px rgba(13,20,69,.45);
  transition: transform .25s ease-out, box-shadow .5s, border-color .4s;
  transform-style: preserve-3d;
}
.card:hover { box-shadow: 0 2px 0 rgba(13,20,69,.05), 0 50px 90px -40px rgba(13,20,69,.5); border-color: rgba(255,77,0,.45); }
/* tilt + światło punktowe za kursorem (JS ustawia --rx --ry --px --py-l) */
[data-tilt] { position: relative; }
[data-tilt].is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) translateZ(0); transition: transform .08s linear, box-shadow .5s; }
[data-tilt]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(360px circle at var(--px, 50%) var(--py-l, 50%), rgba(255,77,0,.16), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
[data-tilt]:hover::before { opacity: 1; }
[data-tilt] > * { position: relative; z-index: 1; }
.card--glass { background: rgba(250,252,252,.06); border-color: rgba(250,252,252,.16); padding: 36px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.6); }
.card--glass:hover { background: rgba(250,252,252,.09); }
.frame {
  min-height: 80px; display: flex; align-items: center; justify-content: center; font-weight: 600;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .35s, color .35s, border-color .35s;
}
.frame:hover { transform: translateY(-4px) scale(1.04); background: var(--orange); color: var(--navy); border-color: var(--orange); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 20px; }
.brand { display: flex; color: var(--orange); }
.brand:hover { color: var(--orange); }
.brand__logo { width: 168px; height: 24px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; font-size: 17px; font-weight: 500; }
.nav__link { position: relative; padding: 6px 0; text-decoration: none; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__tools { display: flex; align-items: center; gap: 20px; margin-left: 8px; }
.nav__tools .btn { min-height: 48px; padding: 0 26px; font-size: 16px; }
.lang { display: flex; gap: 10px; font-size: 15px; font-weight: 500; }
.lang a { text-decoration: none; }
.lang a[aria-current] { font-weight: 700; color: var(--orange-text); }
.lang span { opacity: .4; }
.theme-toggle { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; transition: background-color .25s, transform .35s; }
.theme-toggle:hover { transform: rotate(20deg); }
.theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) { [data-theme="auto"] .theme-toggle__sun { display: none; } [data-theme="auto"] .theme-toggle__moon { display: block; } }
.nav-toggle { display: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 12px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--fg); transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero { padding: clamp(64px, 9vw, 120px) 0 clamp(64px, 8vw, 96px); }
.hero__grid { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-end; }
.hero__text { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__title { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; font-weight: 700; text-transform: uppercase; }
.hero__title .kw { display: inline-block; padding-right: .08em; margin-right: -.08em; }
.hero__title em .kw:last-child, .hero__title .kw:last-child { padding-right: .14em; margin-right: 0; }
/* H1 widoczny od pierwszego renderu (LCP) — bez animacji słowo po słowie */
@keyframes rise { to { opacity: 1; transform: none; } }
.hero__tagline { font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 30px); text-transform: uppercase; color: var(--orange); }
.kinetic { font-weight: 400; letter-spacing: calc(var(--mx, .5) * .12em); transition: letter-spacing .5s cubic-bezier(.2,.8,.2,1), font-weight .3s; animation: breathe 6s ease-in-out infinite; }
.kinetic.is-bold { font-weight: 700; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
.hero__lead { font-size: clamp(18px, 1.6vw, 20px); max-width: 680px; }
.pill { font-size: 16px; font-weight: 500; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; align-self: flex-start; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media {
  flex: 1 1 420px; min-width: 0; aspect-ratio: 4 / 5; max-height: 600px;
  background: var(--ph-grad); box-shadow: 0 60px 100px -40px rgba(13,20,69,.55), 0 20px 40px -24px rgba(13,20,69,.35);
  display: flex; align-items: center; justify-content: center;
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.blob {
  border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
  animation: morph 14s ease-in-out infinite alternate;
  transform: perspective(1100px) rotateY(calc((var(--mx, .5) - .5) * 12deg)) rotateX(calc((.5 - var(--my, .5)) * 12deg));
  transition: transform .5s ease-out;
}
@keyframes morph { 0% { border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; } 50% { border-radius: 44% 56% 40% 60% / 58% 42% 58% 42%; } 100% { border-radius: 52% 48% 60% 40% / 40% 52% 48% 60%; } }

/* ---------- clients ---------- */
.clients { padding: 24px 0 96px; }
.clients__title { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 24px; }
.clients__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }

/* ---------- brief (w skrócie) ---------- */
.brief { padding: var(--section-pad) 0; }
.brief h2 { color: var(--cream); margin-bottom: 56px; }
.brief__grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.brief__item { display: flex; flex-direction: column; gap: 12px; }
.brief__item dt { font-weight: 600; color: var(--orange); font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.brief__item dd { margin: 0; font-size: 18px; }

/* ---------- services ---------- */
.services { padding: var(--section-pad) 0; }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 20px; }
.service { display: flex; flex-direction: column; gap: 18px; }
.service__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.service__meta span { font-weight: 600; }
.service__meta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; opacity: .8; }
.service h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; }
.service h3 a { text-decoration: none; background-image: linear-gradient(var(--orange), var(--orange)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s cubic-bezier(.2,.8,.2,1); }
.service:hover h3 a { background-size: 100% 2px; }
.service__meta span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .35s, color .35s, transform .5s; }
.service:hover .service__meta span { background: var(--orange); color: var(--navy); transform: rotate(360deg); }
.more { position: relative; display: inline-block; }
.more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.more:hover::after { transform: scaleX(1); transform-origin: left; }
.service__facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line); }
.service__facts div { display: flex; gap: 6px; }
.service__facts dt { font-weight: 600; } .service__facts dd { margin: 0; }

/* ---------- work ---------- */
.work { padding: var(--section-pad) 0; }
.work__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.work__item { display: flex; flex-direction: column; gap: 14px; }
.work__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: 22px; background: var(--ph-grad); box-shadow: 0 40px 70px -40px rgba(13,20,69,.55); text-decoration: none; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s, border-radius .6s; }
.work__media img, .work__media .ph { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
.work__cta { position: absolute; left: 20px; bottom: 20px; padding: 10px 16px; border-radius: 999px; background: var(--orange); color: var(--navy); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.work__item:hover .work__media { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 70px 100px -50px rgba(13,20,69,.6); border-radius: 32px; }
.work__item:hover .work__media img, .work__item:hover .work__media .ph { transform: scale(1.06); }
.work__item:hover .work__cta { opacity: 1; transform: none; }
.work__item--up { margin-top: 48px; }
.work__tag { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; transition: color .3s; }
.work__item:hover .work__tag { color: var(--orange-text); }
.work__item h3 { font-size: 24px; line-height: 1.2; } .work__item h3 a { text-decoration: none; }
.work__item p:last-child { font-size: 15px; }

/* ---------- process ---------- */
.process { padding: var(--section-pad) 0; }
.process h2 { margin-bottom: 56px; }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.process__steps li { position: relative; border-top: 3px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.process__steps li::before { content: ""; position: absolute; left: 0; top: -3px; height: 3px; width: 32%; background: var(--orange); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.process__steps li:hover { transform: translateY(-6px); }
.process__steps li:hover::before { width: 100%; }
.process__num { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1; transition: color .3s, transform .5s cubic-bezier(.2,.8,.2,1); }
.process__steps li:hover .process__num { color: var(--orange); transform: translateX(6px) rotate(-6deg); }
.process__steps strong { font-weight: 600; font-size: 19px; }
.process__steps span:last-child { font-size: 16px; }

/* ---------- team ---------- */
.team { padding: var(--section-pad) 0; }
.team h2 { color: var(--cream); }
.team__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px 20px; }
.team__grid li { display: flex; flex-direction: column; gap: 6px; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.team__grid li:hover { transform: translateY(-8px); }
.team__grid li:nth-child(odd) .team__photo { rotate: -1.5deg; } .team__grid li:nth-child(even) .team__photo { rotate: 1.5deg; }
.team__photo { aspect-ratio: 3 / 4; border-radius: 22px; background: linear-gradient(160deg, #2f3772 0%, #232a5e 60%, #1a2050 100%); border: 1px solid rgba(250,252,252,.12); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); transition: rotate .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .5s, filter .5s; filter: saturate(.85); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.team__grid li:hover .team__photo { rotate: 0deg; border-color: var(--orange); box-shadow: 0 50px 70px -36px rgba(255,77,0,.35); filter: saturate(1.1); }
.team__grid li:hover strong { color: var(--orange); }
.team__grid strong { font-weight: 600; font-size: 18px; }
.team__grid span { font-size: 15px; }
.team__grid a { font-size: 14px; }
.team__bio { margin: 2px 0 0; font-size: 14px; line-height: 1.5; opacity: .82; }

/* ---------- quotes ---------- */
.quotes { padding: var(--section-pad) 0; }
.quotes h2 { margin-bottom: 56px; }
.quotes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.quotes figure { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.quotes blockquote { margin: 0; font-size: 17px; }
.quotes figcaption { font-size: 15px; } .quotes figcaption strong { display: block; font-weight: 600; }

/* ---------- faq ---------- */
.faq { padding: var(--section-pad) 0; }
.faq__grid { display: flex; flex-wrap: wrap; gap: 48px 80px; }
.faq__intro { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.faq__list { flex: 999 1 560px; min-width: 0; }
.faq details { border-top: 1px solid var(--line-strong); padding: 20px 0; transition: padding-left .4s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.faq details:hover { padding-left: 12px; border-color: var(--orange); }
.faq summary { transition: color .3s; } .faq details:hover summary { color: var(--orange-text); }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 19px; cursor: pointer; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 300; font-size: 30px; line-height: 1; color: var(--orange); flex: none; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- esg ---------- */
.esg { padding: clamp(72px, 8vw, 112px) 0 64px; }
.esg__grid { display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: center; }
.esg__grid > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 14px; }
.esg h2 { font-size: 36px; }
.esg__badges { flex: 1 1 320px; display: flex; gap: 12px; }
.esg__badges .frame { flex: 1; min-height: 96px; }

/* ---------- insights ---------- */
.insights { padding: 64px 0 var(--section-pad); }
.insights__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.insights article { display: flex; flex-direction: column; gap: 12px; }
.insights__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 22px; background: var(--ph-grad); text-decoration: none; box-shadow: 0 30px 50px -36px rgba(13,20,69,.5); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
.insights__media { overflow: hidden; }
.insights__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.insights article:hover .insights__media { transform: translateY(-6px) rotate(1deg); box-shadow: 0 50px 80px -40px rgba(13,20,69,.55); }
.insights article:hover h3 a { color: var(--orange); }
.insights__meta { font-size: 14px; }
.insights h3 { font-size: 22px; line-height: 1.25; } .insights h3 a { text-decoration: none; }

/* ---------- contact ---------- */
.contact { padding: var(--section-pad) 0; }
.contact, .contact a, .contact h2 { color: var(--navy); }
.contact__grid { display: flex; flex-wrap: wrap; gap: 56px 80px; }
.contact__intro { flex: 1 1 400px; display: flex; flex-direction: column; gap: 24px; }
.contact h2 { font-size: clamp(36px, 4.4vw, 48px); line-height: 1.05; }
.contact__steps { margin: 0; padding-left: 22px; font-weight: 400; display: flex; flex-direction: column; gap: 6px; }
.contact__people { display: flex; flex-wrap: wrap; gap: 16px; }
.contact__person { flex: 1 1 200px; background: var(--cream); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 30px 50px -30px rgba(13,20,69,.5); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.contact__person:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 50px 70px -36px rgba(13,20,69,.55); }
.site-footer nav a { width: fit-content; transition: transform .3s, color .3s; }
.site-footer nav a:hover { transform: translateX(6px); }
.contact__person strong { font-weight: 600; } .contact__person span { font-size: 14px; } .contact__person a { font-weight: 600; }
[data-theme="dark"] .contact__person { background: #0b1034; color: var(--cream); }
[data-theme="dark"] .contact__person a { color: var(--cream); }
.form { flex: 1 1 480px; min-width: 0; background: rgba(250,252,252,.92); border-radius: 32px; padding: 40px; box-shadow: 0 40px 80px -40px rgba(13,20,69,.5); display: flex; flex-direction: column; gap: 16px; color: var(--navy); }
[data-theme="dark"] .form { background: rgba(11,16,52,.94); color: var(--cream); }
.form__row { display: flex; flex-wrap: wrap; gap: 16px; } .form__row label { flex: 1 1 200px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.form input, .form select, .form textarea { font: inherit; font-weight: 300; font-size: 16px; color: inherit; min-height: 44px; border: 1px solid #8c968a; border-radius: 10px; padding: 0 12px; background: #fff; transition: border-color .25s, box-shadow .25s; }
.form textarea { padding: 12px; resize: vertical; }
[data-theme="dark"] .form input, [data-theme="dark"] .form select, [data-theme="dark"] .form textarea { background: #131a46; border-color: rgba(250,252,252,.3); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,77,0,.18); outline: none; }
.form__consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 13px !important; font-weight: 300 !important; }
.form__consent input { width: 20px; height: 20px; min-height: 0; margin: 0; flex: none; accent-color: var(--orange); }
.form__status { font-size: 14px; min-height: 1.4em; }
.form__status.is-error { color: #b32d00; font-weight: 500; }

/* ---------- footer ---------- */
.site-footer { padding: 96px 0 40px; color: var(--cream); font-size: 15px; }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--orange); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 40px 64px; margin-bottom: 56px; }
.site-footer__brand { flex: 1 1 300px; display: flex; flex-direction: column; gap: 12px; }
.site-footer__brand > strong { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--orange); }
.site-footer address { font-style: normal; display: flex; flex-direction: column; gap: 4px; }
.site-footer nav { flex: 1 1 180px; display: flex; flex-direction: column; gap: 8px; }
.site-footer nav strong { font-weight: 600; color: var(--orange); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--navy-2); font-size: 14px; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- performance ---------- */
.work, .process, .team, .quotes, .faq, .esg, .insights, .contact, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ghost { font-size: clamp(88px, 26vw, 160px); top: 2%; }
  .badge { width: 104px; height: 104px; right: 4px; }
  .badge__arrow { font-size: 26px; }
  .sticker { font-size: 12px; padding: 8px 12px; }
  .work__item--up { margin-top: 0; }
  [data-tilt].is-tilting { transform: none; }
  [data-tilt]::before { display: none; }
  .nav-toggle { display: flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 24px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -30px rgba(13,20,69,.35); }
  .nav.is-open { display: flex; }
  .nav__link { padding: 12px 0; font-size: 19px; }
  .nav__tools { margin: 12px 0 0; justify-content: space-between; }
  .hero__grid { align-items: stretch; }
  .hero__media { max-height: none; aspect-ratio: 4 / 5; }
  .blob { transform: none; }
}
@media (max-width: 600px) {
  :root { --section-pad: 72px; --radius: 22px; }
  body { font-size: 16px; }
  .container { padding-inline: 16px; }
  .card { padding: 24px; }
  .form { padding: 24px; border-radius: 22px; }
  .bg::before { animation: none; inset: 0; }
  .round-top { margin-top: -40px; }
  :root { --grain-opacity: .10; }
  .bg::after { inset: 0; }
  .sheen::after { animation-duration: 16s; }
  .hero { padding-top: 48px; }
  .hero__grid { gap: 40px; }
  .hero__media { max-height: 420px; aspect-ratio: 4 / 5; }
  .sticker--1 { left: 0; top: 4%; } .sticker--2 { right: 0; top: -10px; }
  .badge { width: 92px; height: 92px; bottom: 2%; }
  .section-head { margin-bottom: 32px; }
  .clients { padding-bottom: 64px; }
  .brief__grid, .services__grid, .work__grid, .quotes__grid, .insights__grid { gap: 14px; }
  .process__steps { gap: 28px; }
  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .team__grid li:nth-child(odd) .team__photo, .team__grid li:nth-child(even) .team__photo { rotate: 0deg; }
  .faq summary { font-size: 17px; }
  .site-footer { padding-top: 64px; }
  .site-footer__cols { gap: 28px; }
  [data-parallax] { transform: none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-ready .hero__title .kw { opacity: 1; transform: none; }
  .blob { transform: none; }
  [data-parallax] { transform: none !important; }
  [data-tilt].is-tilting { transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
  .marquee__track { flex-wrap: wrap; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* ---------- logotypy klientów ---------- */
.frame .logo { display: block; width: auto; max-width: 150px; color: var(--fg); transition: color .35s, filter .35s, transform .35s; }
.frame:hover .logo { color: var(--navy); }
.logo--raster { height: 44px !important; object-fit: contain; }
[data-theme="dark"] .logo--raster { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { [data-theme="auto"] .logo--raster { filter: brightness(0) invert(1); } }
.frame:hover .logo--raster { filter: brightness(0); }
.logo-text { font-weight: 600; letter-spacing: .02em; }

/* ---------- wordmark zamiast słowa „VCreatives” ---------- */
.wordmark { display: inline-block; height: .78em; vertical-align: -.05em; color: var(--orange); line-height: 0; }
.wordmark svg { display: block; height: 100%; width: auto; aspect-ratio: 532 / 76; }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-footer__wordmark { display: block; font-size: 28px; line-height: 1; }
.site-footer__wordmark .wordmark { height: .9em; vertical-align: 0; }

/* ---------- kontakt przy osobie ---------- */
.team__contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 14px; }
.team__contact a { position: relative; text-decoration: none; padding-bottom: 2px; }
.team__contact a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.team__contact a:hover::after { transform: scaleX(1); }
.team__contact a[href^="tel:"] { font-weight: 500; }

/* ======================== PODSTRONY ======================== */
.page-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero .container { display: flex; flex-direction: column; gap: 24px; }
.page-hero__answer { max-width: 780px; font-size: clamp(18px, 1.6vw, 21px); }
.hero__title--article { text-transform: none; font-size: clamp(32px, 4vw, 52px); max-width: 980px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; }
/* Pozycja i ukośnik w jednej linii bazowej. Bez tego na telefonie (gdzie link ma 44 px
   wysokości dla palca) nazwa strony siedziała niżej niż „/”. */
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; opacity: .4; margin-right: 10px; }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { opacity: .7; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.case-cover { margin-top: 16px; border-radius: 28px; overflow: hidden; background: var(--ph-grad); aspect-ratio: 16 / 9; box-shadow: 0 60px 100px -40px rgba(13,20,69,.55); }
.case-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-body, .article-body { padding: var(--section-pad) 0; }
.prose { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 1.7; }
.prose--article { font-size: 18.5px; }
.prose p { margin: 0 0 1.2em; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); text-transform: none; margin: 2em 0 .6em; line-height: 1.15; }
.prose h3 { font-size: 22px; margin: 1.6em 0 .5em; }
.prose h4 { font-size: 18px; margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: .3em 0; }
.prose blockquote { margin: 1.6em 0; padding: 20px 28px; border-left: 3px solid var(--orange); background: var(--surface); border-radius: 0 18px 18px 0; font-size: 1.05em; }
.prose img { max-width: 100%; height: auto; border-radius: 18px; margin: 1.2em 0; }
.prose a { color: var(--orange-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 1.4em 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose__block { margin-bottom: 1.2em; }
.prose__block > p:last-child { margin-bottom: 0; }
.prose__block:first-child { font-size: 1.15em; font-weight: 400; }
.case-gallery { padding: var(--section-pad) 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.gallery__item { margin: 0; border-radius: 22px; overflow: hidden; background: var(--ph-grad); box-shadow: var(--shadow); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
.gallery__item:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 60px 90px -44px rgba(13,20,69,.6); }
.gallery__item img { display: block; width: 100%; height: auto; }
.gallery__item--video { aspect-ratio: 16 / 9; background: var(--navy); }
.gallery__item--video iframe { width: 100%; height: 100%; border: 0; display: block; }
.work__grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.insights__excerpt { font-size: 15px; }
.price-table { padding: 8px 24px; overflow-x: auto; }
.price-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price-table th, .price-table td { text-align: left; padding: 18px 12px; border-bottom: 1px solid rgba(250,252,252,.14); vertical-align: top; }
.price-table thead th { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.price-table tbody th { font-weight: 600; }
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .price { white-space: nowrap; font-weight: 700; font-family: var(--font-display); font-size: 20px; }
.price-table tr { transition: background-color .3s; } .price-table tbody tr:hover { background: rgba(250,252,252,.05); }
.service-links { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.service-links strong { font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.service-link { width: fit-content; text-decoration: none; transition: transform .3s, color .3s; } .service-link:hover { transform: translateX(6px); }
.cta-band { padding: clamp(64px, 7vw, 96px) 0; }
.cta-band__grid { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: center; justify-content: space-between; }
.cta-band__grid > div:first-child { flex: 1 1 480px; display: flex; flex-direction: column; gap: 14px; }
.cta-band h2 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-band .btn--ghost { border-color: var(--navy); color: var(--navy); } .cta-band .btn--ghost:hover { background: var(--navy); color: var(--cream); }
@media (max-width: 600px) { .prose { font-size: 17px; } .price-table { padding: 0 8px; } .price-table th, .price-table td { padding: 12px 8px; font-size: 14px; } .price-table .price { font-size: 17px; } }
.contact a.btn--navy { color: var(--cream); } .contact a.btn--navy:hover { color: var(--navy); }

/* --- 2026-10-27: plakat w blobie do czasu showreelu, inicjały zamiast pustych portretów, Prompt 400/600/700 --- */
.hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.team__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5vw, 64px); letter-spacing: .02em; color: var(--orange); opacity: .55; }
.team__photo { position: relative; }
.hero__media { position: relative; overflow: hidden; }
.privacy h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.8em 0 .5em; }

@media (min-width: 900px) { .quotes__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Jak pracujemy: galeria filmów z planu (Vimeo, ładowane dopiero po kliknięciu) --- */
.plany { position: relative; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(140px, 14vw, 220px); }
.plany__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 28px; }
.plan { margin: 0; }
.plan__play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: pointer; background: var(--ph-grad, var(--navy)); box-shadow: 0 30px 60px -30px rgba(13,20,69,.45); }
.plan__play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.plan__play:hover img, .plan__play:focus-visible img { transform: scale(1.04); }
.plan__icon { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; box-shadow: 0 12px 30px -8px rgba(255,77,0,.6); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.plan__play:hover .plan__icon, .plan__play:focus-visible .plan__icon { transform: scale(1.1); }
.plan__play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan__title { margin: 14px 4px 0; font-weight: 600; }
.plan__title span { font-weight: 400; opacity: .6; margin-left: 6px; }
.plany__empty { font-size: 18px; opacity: .8; }
.plany__intro { margin-top: 18px; max-width: 720px; }

/* ---------- hero: pełnoekranowe wideo + apla z nagłówkiem (11.2026) ---------- */
.hero--stage { padding: 0 0 clamp(48px, 6vw, 88px); }
.hero__stage { position: relative; height: clamp(560px, 86vh, 940px); overflow: hidden; background: var(--navy); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg .hero__poster, .hero__bg .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 0% 100%, rgba(11,16,52,.55) 0%, rgba(11,16,52,.18) 45%, rgba(11,16,52,0) 70%), linear-gradient(180deg, rgba(11,16,52,.08) 0%, rgba(11,16,52,0) 40%); }
.hero__overlay { position: relative; height: 100%; display: flex; align-items: flex-end; padding-bottom: clamp(28px, 5vw, 64px); }
/* apla: delikatne szkło zamiast pełnego granatu; czytelność daje gradient pod spodem */
.hero__panel {
  --orange-text: var(--orange-2);
  max-width: 860px; padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3vw, 40px); border-radius: 18px;
  background: rgba(11, 16, 52, .30); color: #fafcfc; border: 1px solid rgba(250,252,252,.16);
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  text-shadow: 0 1px 18px rgba(11,16,52,.35); display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 16px);
}
.hero__panel .hero__title { color: #fafcfc; font-size: clamp(22px, 3.2vw, 43px); }
.hero__panel .hero__title em { font-size: .8em; }
.hero__panel .hero__title em { color: var(--orange-2); }
.hero__panel .hero__tagline { margin: 0; color: var(--orange); font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.2; letter-spacing: .02em; }
.hero__stage .badge { right: clamp(16px, 4vw, 56px); top: clamp(20px, 4vw, 48px); bottom: auto; }
.hero__below { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-start; justify-content: space-between; padding-top: clamp(32px, 4vw, 56px); }
.hero__below .hero__lead { flex: 1 1 520px; margin: 0; max-width: 760px; }
.hero__side { flex: 0 1 auto; display: flex; flex-direction: column; gap: 16px; }

/* słowa w H2 podmieniane jedno po drugim: Odważnie → Lifestyle, pięknie → beauty, autentycznie → healthcare */
.swap__slot { display: inline-grid; vertical-align: bottom; overflow: hidden; transition: width .38s cubic-bezier(.2,.8,.2,1); }
.swap__slot > span { grid-area: 1 / 1; width: max-content; justify-self: start; white-space: nowrap; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s; }
.swap__slot > span:last-child { transform: translateY(100%); opacity: 0; }
.swap__slot.is-b > span:first-child { transform: translateY(-100%); opacity: 0; }
.swap__slot.is-b > span:last-child { transform: none; opacity: 1; }
.swap__slot--em { font-style: italic; padding-right: .12em; }
.swap__sep { margin-right: -.05em; }

@media (max-width: 720px) {
  .hero__stage { height: auto; min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .hero__overlay { height: auto; padding: 120px 12px 16px; }
  .hero__panel { border-radius: 16px; padding: 20px 18px; background: rgba(11, 16, 52, .38); }
  .hero__panel .hero__tagline { font-size: clamp(14px, 4vw, 20px); white-space: nowrap; letter-spacing: 0; }
  .hero__stage .badge { width: 88px; height: 88px; top: 16px; right: 16px; }
  .hero__below { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .swap__slot, .swap__slot > span { transition: none; }
  .swap__slot > span:last-child { display: none; }
}

/* karta pakietu na stronie usługi (Brand Big Bang, AI Sprint) */
.service--pkg { border: 1.5px solid var(--orange); position: relative; }
.service--wide { grid-column: 1 / -1; }
.service--wide p:last-child { max-width: 860px; }
.service__pkg { display: flex; align-items: center; gap: 12px; margin: 0; }
.service__pkg span { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: var(--orange); color: #fff; padding: 5px 12px; border-radius: 999px; }
.service__pkg strong { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--orange); }

/* cele dotykowe min. 44 px na ekranach dotykowych (telefony, linki w zespole, stopka) */
@media (pointer: coarse) {
  .team__contact a, .more, .service-link, .crumbs a, .lang a, .brand, .contact__person a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* Stopka: 44 px na każdy link rozpychało ją na telefonie tak, że wyglądała jak podwójna
     interlinia. 36 px to nadal wygodny cel dotykowy (WCAG 2.2 AA wymaga 24 px),
     a stopka wraca do normalnej wysokości. */
  .site-footer nav a, .site-footer__social a, .site-footer__brand a {
    display: inline-flex; align-items: center; min-height: 36px;
  }
  /* Linki wplecione w zdanie na samym dole zostają zwykłymi linkami w tekście:
     WCAG 2.2 wyłącza je z wymogu rozmiaru, a inline-flex łamał im wiersz. */
  .lang a { min-width: 44px; justify-content: center; }
  .site-footer nav { gap: 0; }
  .team__contact { gap: 0 18px; }
}

/* Stopka na telefonie: ciaśniejsza interlinia i mniejszy odstęp między adresem a resztą. */
@media (max-width: 640px) {
  .site-footer { padding: 56px 0 28px; font-size: 14px; line-height: 1.45; }
  .site-footer__cols { gap: 22px 40px; margin-bottom: 32px; }
  .site-footer address { gap: 2px; }
  .site-footer__bottom { font-size: 13px; line-height: 1.5; gap: 10px 20px; }
}

/* „Pokaż numer” w sekcji Zespół */
.phone-reveal { font: inherit; font-size: 14px; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; text-align: left; }
.phone-reveal__num { font-weight: 500; opacity: .75; }
.phone-reveal__cta { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.phone-reveal:hover .phone-reveal__cta { color: var(--orange); }
@media (pointer: coarse) { .phone-reveal { min-height: 44px; align-items: center; } }

/* cennik na telefonie: każda pozycja jako blok (nazwa + cena w linii, opis pod spodem) zamiast ściśniętej tabeli */
@media (max-width: 640px) {
  .price-table { padding: 4px 18px; overflow: visible; }
  .price-table thead { display: none; }
  .price-table table, .price-table tbody { display: block; }
  .price-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 16px 0; border-bottom: 1px solid rgba(250,252,252,.14); }
  .price-table tbody tr:last-child { border-bottom: 0; }
  .price-table tbody th, .price-table tbody td { padding: 0; border: 0; font-size: 15px; }
  .price-table tbody td.price { text-align: right; font-size: 17px; }
  .price-table tbody td:last-child { grid-column: 1 / -1; font-size: 14px; opacity: .85; }
}

/* =========================================================
   Trzeci motyw: MINIMALISTYCZNY (data-theme="minimal")
   Delikatne beże, akcenty szałwii, bez połysków, ruchu w tle i dużych cieni.
   Kolory marki są tu przemapowane: „pomarańcz” = jasna szałwia (wypełnienia),
   tekstowe akcenty = ciemna szałwia (#56634f, kontrast 4.9–6:1 na beżach).
   ========================================================= */
[data-theme="minimal"] {
  --ink: #24263a;
  --sand: #f6f2ec;
  --sand-2: #ede8e0;
  --sage-soft: #e6eadf;
  --sage-mid: #dde3d6;
  --sage-ink: #56634f;

  --navy: var(--ink);
  --navy-2: #3a3c52;
  --orange: #c9d3c2;
  --orange-2: #b9c5b1;
  --orange-text: var(--sage-ink);
  --cream: var(--sand);
  --bg: var(--sand);
  --fg: var(--ink);
  --surface: #ffffff;
  --surface-2: #ffffff;
  --line: rgba(36, 38, 58, 0.12);
  --line-strong: rgba(36, 38, 58, 0.2);
  --sage-section: var(--sage-soft);
  --header-bg: rgba(246, 242, 236, 0.88);
  --ph-grad: linear-gradient(160deg, #eae6de 0%, #e3e8dd 100%);
  --shadow: none;
  --radius: 18px;
  color-scheme: light;
}
/* sekcje, które w innych motywach są granatowe / pomarańczowe, tu są jasne */
[data-theme="minimal"] .bg--navy { background: var(--sand-2); color: var(--ink); --cream: var(--ink); --orange-text: var(--sage-ink); }
[data-theme="minimal"] .bg--orange { background: var(--sage-mid); color: var(--ink); }
[data-theme="minimal"] .bg--hero { background: var(--sand); }
/* bez połysków, ziarna, płynących teł, napisów-duchów i ruchu przy przewijaniu */
[data-theme="minimal"] .sheen::after,
[data-theme="minimal"] .bg::before,
[data-theme="minimal"] .bg::after,
[data-theme="minimal"] .ghost { display: none !important; }
[data-theme="minimal"] [data-tilt],
[data-theme="minimal"] [data-parallax] { transform: none !important; }
[data-theme="minimal"] .badge svg,
[data-theme="minimal"] .blob,
[data-theme="minimal"] .kinetic { animation: none !important; }
[data-theme="minimal"] .marquee__track { animation-duration: 70s; }
/* płaskie karty: cienka linia zamiast cieni */
[data-theme="minimal"] .card,
[data-theme="minimal"] .card--glass,
[data-theme="minimal"] .frame,
[data-theme="minimal"] .contact__person,
[data-theme="minimal"] .form,
[data-theme="minimal"] .insights__media,
[data-theme="minimal"] .work__media,
[data-theme="minimal"] .team__photo,
[data-theme="minimal"] .case-cover,
[data-theme="minimal"] .badge,
[data-theme="minimal"] .btn { box-shadow: none !important; }
[data-theme="minimal"] .card--glass { background: var(--surface); border-color: var(--line); }
[data-theme="minimal"] .card--glass:hover { background: #fff; }
[data-theme="minimal"] .frame:hover,
[data-theme="minimal"] .work__item:hover .work__media,
[data-theme="minimal"] .insights article:hover .insights__media,
[data-theme="minimal"] .team__grid li:hover,
[data-theme="minimal"] .faq details:hover { transform: none; padding-left: 0; }
[data-theme="minimal"] .frame:hover { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
[data-theme="minimal"] .frame:hover .logo--raster { filter: none; }
[data-theme="minimal"] .team__photo { background: var(--sand-2); border-color: var(--line); filter: none; }
[data-theme="minimal"] .team__grid li:hover .team__photo { border-color: var(--sage-ink); }
[data-theme="minimal"] .contact__person { background: var(--surface); }
[data-theme="minimal"] .form { background: var(--surface); }
[data-theme="minimal"] .price-table th, [data-theme="minimal"] .price-table td,
[data-theme="minimal"] .price-table tbody tr { border-color: var(--line); }
[data-theme="minimal"] .price-table tbody tr:hover { background: rgba(36,38,58,.03); }
/* akcenty tekstowe w ciemnej szałwii, logo i nagłówki w atramencie */
[data-theme="minimal"] .h2--orange,
[data-theme="minimal"] h1 em, [data-theme="minimal"] h2 em, [data-theme="minimal"] h3 em,
[data-theme="minimal"] .hero__tagline,
[data-theme="minimal"] .brief__item dt,
[data-theme="minimal"] .price-table thead th,
[data-theme="minimal"] .site-footer nav strong,
[data-theme="minimal"] .service__pkg strong,
[data-theme="minimal"] .faq summary::after,
[data-theme="minimal"] .team__initials { color: var(--sage-ink); }
[data-theme="minimal"] .brand, [data-theme="minimal"] .wordmark, [data-theme="minimal"] .site-footer__brand > strong { color: var(--ink); }
[data-theme="minimal"] h1, [data-theme="minimal"] h2 { font-weight: 600; }
[data-theme="minimal"] .nav__link::after, [data-theme="minimal"] .process__steps li::before { background: var(--sage-ink); }
[data-theme="minimal"] .service__pkg span { background: var(--sage-ink); color: #fff; }
[data-theme="minimal"] .service--pkg { border-color: var(--sage-ink); }
/* przyciski: atrament i obrys zamiast pomarańczu */
[data-theme="minimal"] .btn--primary { background: var(--ink); color: var(--sand); }
[data-theme="minimal"] .btn--primary:hover { background: var(--sage-ink); color: #fff; }
[data-theme="minimal"] .btn--navy:hover { background: var(--sage-ink); color: #fff; }
[data-theme="minimal"] .contact a.btn--navy:hover { color: #fff; }
[data-theme="minimal"] .form input:focus, [data-theme="minimal"] .form select:focus, [data-theme="minimal"] .form textarea:focus { border-color: var(--sage-ink); box-shadow: 0 0 0 4px rgba(86,99,79,.15); }
[data-theme="minimal"] :focus-visible { outline-color: var(--sage-ink); }
/* hero: jasna, przejrzysta apla na zdjęciu, lekko wyciszone kolory zdjęcia */
[data-theme="minimal"] .hero__bg .hero__poster, [data-theme="minimal"] .hero__bg .hero__video { filter: saturate(.85); }
[data-theme="minimal"] .hero__bg::after { background: radial-gradient(120% 90% at 0% 100%, rgba(246,242,236,.55) 0%, rgba(246,242,236,.15) 45%, rgba(246,242,236,0) 70%); }
[data-theme="minimal"] .hero__panel { background: rgba(247, 242, 235, 0.74); color: var(--ink); border-color: rgba(255,255,255,.5); text-shadow: none; --orange-text: var(--sage-ink); }
[data-theme="minimal"] .hero__panel .hero__title { color: var(--ink); }
[data-theme="minimal"] .hero__panel .hero__title em, [data-theme="minimal"] .hero__panel .hero__tagline { color: var(--sage-ink); }
[data-theme="minimal"] .badge { background: var(--sand); color: var(--ink); }

/* przełącznik: trzecia ikona (listek) */
.theme-toggle__leaf { display: none; }
[data-theme="minimal"] .theme-toggle__sun, [data-theme="minimal"] .theme-toggle__moon { display: none !important; }
[data-theme="minimal"] .theme-toggle__leaf { display: block; }
[data-theme="minimal"] .team__initials { opacity: 1; }

/* minimalistyczny: bez kursywy, wszystko w ramkach na czystej bieli */
[data-theme="minimal"] *, [data-theme="minimal"] *::before, [data-theme="minimal"] *::after { font-style: normal !important; }
[data-theme="minimal"] .swap__slot--em { padding-right: 0; }
[data-theme="minimal"] .form input, [data-theme="minimal"] .form select, [data-theme="minimal"] .form textarea,
[data-theme="minimal"] .team__photo, [data-theme="minimal"] .price-table, [data-theme="minimal"] .card--glass:hover { background: #ffffff; }
[data-theme="minimal"] .hero__panel { background: rgba(255, 255, 255, 0.30); }
[data-theme="minimal"] .badge { background: #ffffff; }

/* minimalistyczny: obramowania i poświata kart po najechaniu w szałwii zamiast pomarańczu (usługi, opinie, W skrócie) */
[data-theme="minimal"] .card:hover { border-color: rgba(86, 99, 79, 0.45); }
[data-theme="minimal"] [data-tilt]::before { background: radial-gradient(360px circle at var(--px, 50%) var(--py-l, 50%), rgba(86, 99, 79, 0.10), transparent 60%); }
[data-theme="minimal"] .service h3 a { background-image: linear-gradient(var(--sage-ink), var(--sage-ink)); }
[data-theme="minimal"] .prose blockquote, [data-theme="minimal"] .faq details:hover { border-color: var(--sage-ink); }
/* minimalistyczny: stopka w szałwii marki */
[data-theme="minimal"] .site-footer { background: #a9b4a4; color: var(--ink); --cream: var(--ink); --orange-text: var(--ink); }
[data-theme="minimal"] .site-footer nav strong, [data-theme="minimal"] .site-footer a:hover { color: var(--ink); }
[data-theme="minimal"] .site-footer__bottom { border-color: rgba(36, 38, 58, 0.2); }

/* ── Ochrona układu przed obcymi stylami ──────────────────────────────
   Wtyczka czatu „your-ai-chatbot" wczytuje na całej witrynie arkusz
   (uchwyt test_css) z regułą .container { width:600px; background:#fff;
   border-radius:10px; box-shadow:…; z-index:2 }. Ta sama nazwa klasy co
   nasza, więc cała treść zwężała się do 600 px i dostawała białą kartę.
   Trzymamy nasze wartości wyższą specyficznością, bez !important.      */
body .container { width: auto; background-color: transparent; border-radius: 0; box-shadow: none; }

/* ── Kotwice z menu ───────────────────────────────────────────────────
   Nagłówek jest przyklejony (position: sticky, ok. 89 px), więc bez tego
   skok na #zespol czy #faq chował tytuł sekcji pod nagłówkiem.          */
#uslugi, #realizacje, #zespol, #inspiracje, #faq,
#klienci, #esg, #kontakt { scroll-margin-top: 104px; }
@media (max-width: 960px) {
  #uslugi, #realizacje, #zespol, #inspiracje, #faq,
  #klienci, #esg, #kontakt { scroll-margin-top: 88px; }
}