/*
Theme Name: VST Media v2
Theme URI: https://vstmedia.pl
Author: VST Media Sp. z o.o.
Description: Motyw agencji filmowej VST Media: strona główna, podstrony usług, SEO, formularz kontaktowy.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vst-media
*/

:root {
  --bg: #ffffff;
  --surface: #f3f4f5;
  --line: #dcdee0;
  --fg: #1d2023;
  --muted: #5d636a;
  --accent: #2f80ed;
  --accent-text: #1a5fd0;
  --accent-fg: #ffffff;
  --dark: #25282c;
  --dark-fg: #f2f3f4;
  --font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1440px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191b; --surface: #202327; --line: #33373c; --fg: #eceeef; --muted: #a2a8ae;
    --accent: #4d94ff; --accent-text: #7db0ff; --accent-fg: #ffffff; --dark: #0f1011; --dark-fg: #eceeef; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17191b; --surface: #202327; --line: #33373c; --fg: #eceeef; --muted: #a2a8ae;
  --accent: #4d94ff; --accent-text: #7db0ff; --accent-fg: #ffffff; --dark: #0f1011; --dark-fg: #eceeef; color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.65; padding-inline: 0; }
img, canvas, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--font-display); font-stretch: 90%; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 780; line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 650; }
p { margin: 0; }
.eyebrow { font-family: var(--font-display); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.ai-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .ai-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ai-list { grid-template-columns: minmax(0, 1fr); } }
.ai-list li { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.ai-list li span { display: block; margin-top: 6px; font-family: var(--font-body, inherit); font-weight: 400; letter-spacing: 0; font-size: 0.95rem; color: var(--muted); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 78ch; }

header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(15, 16, 17, 0.55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--dark-fg); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; font-family: var(--font-display); font-stretch: 90%; font-weight: 780; font-size: 1.15rem; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand small { font-family: var(--font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.16em; color: #c7cbcf; margin-left: 2px; }
nav.main { display: flex; align-items: center; gap: 4px; }
nav.main a { text-decoration: none; font-size: 0.93rem; font-weight: 500; padding: 8px 12px; border-bottom: 2px solid transparent; color: var(--dark-fg); }
nav.main a:hover { color: #a9c9ff; }
nav.main a.active { border-bottom-color: var(--accent); }
nav.main a.cta { background: rgba(47, 128, 237, 0.55); color: #fff; margin-left: 8px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 10px; font-weight: 600; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(0, 0, 0, 0.25); }
nav.main a.cta:hover { background: rgba(77, 148, 255, 0.75); color: #fff; }
.burger { display: none; background: rgba(255, 255, 255, 0.1); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); width: 44px; height: 44px; color: var(--dark-fg); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ""; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
@media (max-width: 980px) {
  .burger { display: inline-flex; }
  nav.main { position: absolute; left: 0; right: 0; top: 100%; background: rgba(15, 16, 17, 0.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 16px; display: none; gap: 0; }
  nav.main.open { display: flex; }
  nav.main a { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  nav.main a.cta { margin: 12px 0 0; text-align: center; }
}

.hero { min-height: min(88vh, 780px); display: flex; align-items: flex-end; margin-top: -69px; padding-top: calc(69px + clamp(40px, 7vw, 96px)); padding-bottom: clamp(36px, 6vw, 80px); color: #fff; background-color: #121314; background-position: center; background-size: cover; background-repeat: no-repeat; background-image: linear-gradient(180deg, rgba(10, 11, 12, 0.68) 0%, rgba(10, 11, 12, 0.5) 45%, rgba(10, 11, 12, 0.84) 100%); }
.hero .lead { color: #dcdfe2; }
.hero .eyebrow { color: #a9c9ff; }
.hero h1 em { color: #8bb8ff; font-style: normal; }
.hero .stats { border-top-color: rgba(255, 255, 255, 0.28); }
.hero .stats span { color: #c7cbcf; }
.hero .hero-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 920px) { .hero-top { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { margin-block: 18px 0; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 14px 26px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 12px; color: #fff; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.3); cursor: pointer; font-family: var(--font-body); transition: background 0.2s, transform 0.2s; }
.btn:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.btn.red { background: rgba(47, 128, 237, 0.58); }
.btn.red:hover { background: rgba(77, 148, 255, 0.78); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: clamp(24px, 4vw, 48px); }
.stats div { padding: 22px 16px 4px 0; }
.stats b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

section { padding-block: clamp(48px, 7vw, 96px); }
section.alt { background: var(--surface); }
.head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (max-width: 820px) { .two { grid-template-columns: minmax(0, 1fr); } }
.prose { display: grid; gap: 16px; color: var(--muted); }
.prose strong { color: var(--fg); font-weight: 600; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.pillars article { padding: 24px 24px 8px 0; display: grid; gap: 8px; align-content: start; }
.pillars p { color: var(--muted); font-size: 0.96rem; }
@media (max-width: 820px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillars article { padding-right: 0; } }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 920px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.card .pic { aspect-ratio: 4 / 3; background: var(--surface); position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.card:hover .pic img { transform: scale(1.04); }
.card .pic .badge { position: absolute; top: 12px; left: 12px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 5px 9px; }
.card .body { padding: 22px; display: grid; gap: 10px; align-content: start; }
.card .body p { color: var(--muted); font-size: 0.95rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.88rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.photo-band { width: 100%; margin-inline: 0; position: relative; margin-top: clamp(28px, 4vw, 48px); aspect-ratio: 21 / 9; border-radius: 16px; overflow: hidden; background: var(--surface); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(15, 16, 17, 0.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; color: #fff; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; font-weight: 600; }
@media (max-width: 560px) { .photo-band { aspect-ratio: 4 / 3; } }
.demo-note { margin-top: 18px; font-size: 0.82rem; color: var(--muted); }

.reel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 820px) { .reel { grid-template-columns: minmax(0, 1fr); } }
.tile { position: relative; border-radius: 16px; overflow: hidden; background: var(--dark); color: #fff; min-height: 260px; display: flex; align-items: flex-end; background-size: cover; background-position: center; }
.tile.big { min-height: 420px; }
.tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,0.15) 30%, rgba(10,11,12,0.85) 100%); }
.tile .in { position: relative; padding: 22px; display: grid; gap: 6px; }
.tile .in small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #a9c9ff; font-weight: 600; }
.tile .in p { color: #d3d6d9; font-size: 0.92rem; max-width: 46ch; }
.tile .play { position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: grid; place-items: center; }
.tile .play svg { width: 20px; height: 20px; margin-left: 3px; }
.reel-col { display: grid; gap: 20px; grid-template-rows: 1fr 1fr; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.steps li { padding: 26px 24px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; counter-increment: s; background: var(--bg); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-display); font-weight: 750; font-size: 1.5rem; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.steps p { color: var(--muted); font-size: 0.95rem; }
.steps small { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 920px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.std { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
@media (max-width: 760px) { .std { grid-template-columns: minmax(0, 1fr); } }
.std div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.std svg { width: 22px; height: 22px; margin-top: 3px; }
.std b { display: block; font-weight: 600; }
.std span { color: var(--muted); font-size: 0.92rem; }

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-family: var(--font-display); font-weight: 650; font-size: 1.12rem; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--accent-text); font-weight: 500; }
details[open] summary::after { content: "–"; }
details p { color: var(--muted); padding: 0 40px 22px 0; max-width: 70ch; }

.contact-box { background-color: var(--dark); color: var(--dark-fg); background-image: linear-gradient(rgba(15, 16, 17, 0.88), rgba(15, 16, 17, 0.94)), url(../vst-media/assets/img/img-272b9f96d4.jpg); background-size: cover; background-position: center; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-box .lead { color: #b7bcc1; }
.contact-list { display: grid; gap: 16px; margin-top: 28px; font-size: 0.98rem; }
.contact-list b { display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa0a6; font-weight: 600; }
.contact-list span { user-select: all; }
form { display: grid; gap: 14px; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .row { grid-template-columns: minmax(0, 1fr); } }
label { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: #c9cdd1; }
input, select, textarea { font: inherit; font-size: 1rem; color: #f2f3f4; background: #17191b; border: 1px solid #44484e; padding: 12px 14px; width: 100%; border-radius: 0; color-scheme: dark; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 110px; resize: vertical; }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-weight: 400; font-size: 0.8rem; letter-spacing: 0; color: #a9aeb4; align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: #4d94ff; }
.form-msg { min-height: 1.4em; font-size: 0.92rem; color: #d5e4ff; }

footer { background: var(--dark); border-top: 1px solid #2c2f33; padding-block: 36px; font-size: 0.86rem; color: #9aa0a6; }
.foot > span { line-height: 1.7; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: #a9c9ff; }
.hero { position: relative; overflow: hidden; min-height: min(80vh, 660px); }
.hero .wrap { position: relative; z-index: 1; }
.hero .hero-top { grid-template-columns: minmax(0, 540px); margin-bottom: 0; }
.hero .lead { margin-top: 14px; font-size: 1.05rem; }
.hero-v { position: absolute; right: clamp(-60px, 5vw, 9vw); top: 54%; transform: translateY(-50%); height: min(74%, 540px); width: auto; aspect-ratio: 1; opacity: 0.94; pointer-events: none; z-index: 0; filter: drop-shadow(0 20px 50px rgba(0,0,0,.45)); }
@media (max-width: 820px) { .hero-v { opacity: 0.3; right: -14%; height: 62%; } }
section.statband { padding-block: 28px; border-bottom: 1px solid var(--line); }
section.statband .stats div { padding-top: 6px; }
.brand span { font-family: "Outfit", "Arial", sans-serif; font-weight: 500; letter-spacing: 0.4em; font-size: 1rem; font-stretch: normal; }
.hero-v { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); height: min(88%, 640px); opacity: 0.11; filter: none; }
@media (max-width: 820px) { .hero-v { left: 50%; right: auto; height: 70%; opacity: 0.1; } }
h1, h2, h3 { font-stretch: 100%; letter-spacing: -0.03em; font-weight: 650; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 650; line-height: 1.04; }
.hero { align-items: center; }
.hero .hero-top { grid-template-columns: minmax(0, 760px); margin-inline: auto; text-align: center; }
.hero .lead { margin-inline: auto; }
.hero .btns { justify-content: center; }
section.logos { background: #0b0c0d; padding-block: 26px 30px; }
.logos-label { text-align: center; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a9096; margin-bottom: 18px; }
.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; align-items: center; width: max-content; animation: scrollx 55s linear infinite; }
.track img { height: 28px; width: auto; margin-right: 64px; opacity: 0.7; flex: none; }
@keyframes scrollx { to { transform: translateX(-50%); } }
.hero .hero-top { justify-content: center; }
.hero h1 { margin-block: 0; }
.hero .btns { margin-top: 28px; }
.btn.red, nav.main a.cta { background: rgba(47, 128, 237, 0.6); border-color: rgba(170, 205, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(47, 128, 237, 0.6); }
.btn.red:hover, nav.main a.cta:hover { background: rgba(77, 148, 255, 0.82); }
nav.main a:hover, .foot a:hover { color: #9fe0ea; }
.brand span { font-weight: 100; letter-spacing: 0.48em; }
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 920px) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .works { grid-template-columns: minmax(0, 1fr); } }
.work { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; text-decoration: none; color: #fff; min-width: 0; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.work:hover img { transform: scale(1.05); }
.work::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,12,0) 45%, rgba(10,11,12,0.85) 100%); }
.work .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: grid; gap: 2px; }
.work .cap small { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9fe0ea; font-weight: 600; }
.work .cap b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.work .play { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(15,16,17,0.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; }
.work .play svg { width: 16px; height: 16px; margin-left: 2px; }
.works-more { margin-top: 24px; text-align: center; }
.works-more a { color: var(--accent-text); font-weight: 600; }
.allworks { position: fixed; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 69px); z-index: 45; background: var(--bg); overflow-y: auto; padding-block: 36px 60px; overscroll-behavior: contain; }
.allworks[hidden] { display: none; }
.aw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.aw-head h2 { margin-top: 8px; }
.aw-head .muted { color: var(--muted); margin-top: 6px; }
.aw-head .btn { color: #fff; }
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.film { display: grid; gap: 8px; text-decoration: none; color: var(--fg); position: relative; min-width: 0; }
.film img { width: 100%; height: auto; aspect-ratio: 347 / 190; object-fit: cover; border-radius: 12px; display: block; background: #111; transition: transform 0.4s ease; }
.film:hover img { transform: translateY(-2px); }
.film b { font-weight: 600; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.01em; }
.film .dur { display: none; position: absolute; top: calc(100% - 100% + 8px); left: 8px; background: rgba(15, 16, 17, 0.7); color: #fff; font-size: 0.72rem; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
body.aw-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
.cards { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; }
.card .pic { aspect-ratio: auto; min-height: 320px; border-bottom: 0; }
.card:nth-child(even) .pic { order: 2; }
.card .body { padding: clamp(24px, 4vw, 56px); align-content: center; gap: 14px; }
.card h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.card .body p { font-size: 1.02rem; }
@media (max-width: 820px) { .card { grid-template-columns: minmax(0, 1fr); } .card:nth-child(even) .pic { order: 0; } .card .pic { aspect-ratio: 4 / 3; min-height: 0; } }
section:not(#o-nas) > .wrap > .head { text-align: center; justify-items: center; }
section:not(#o-nas) > .wrap > .head .lead { margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.ai-list.ai-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ai-list.ai-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ai-list.ai-6 { grid-template-columns: minmax(0, 1fr); } }

.hero-slides { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-slides .hs { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: translateX(100%); will-change: transform; }
.hero-slides .hs.anim { transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), opacity 1.1s ease; }
.hero-slides .hs.cur { transform: translateX(0); z-index: 2; }
.hero-slides .hs.prev { transform: translateX(-28%); opacity: .55; z-index: 1; }
.hero .hs-dots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.hero .hs-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.25); cursor: pointer; transition: background .3s, transform .3s; }
.hero .hs-dots button.on { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .hero-slides .hs.anim { transition: none; } }
/* szklane kafelki */
.ai-list,
.stats,
.steps,
.std,
.faq,
.cards { position: relative; isolation: isolate; padding: 18px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(60% 90% at 10% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), radial-gradient(55% 80% at 95% 100%, color-mix(in srgb, #14b8c4 30%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 70%, transparent); }
.ai-list::before ,
.stats::before ,
.steps::before ,
.std::before ,
.faq::before ,
.cards::before { content: ""; position: absolute; width: 38%; aspect-ratio: 1; left: 30%; top: -20%; border-radius: 50%; background: color-mix(in srgb, var(--accent) 35%, transparent); filter: blur(60px); z-index: -1; animation: glassfloat 14s ease-in-out infinite alternate; }
.ai-list li ,
.stats > div ,
.steps li ,
.std > div ,
.faq details ,
.cards .card { position: relative; overflow: hidden; background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent), 0 8px 24px -14px rgba(0,0,0,.45);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; }
.ai-list li::after ,
.stats > div::after ,
.steps li::after ,
.std > div::after ,
.faq details::after ,
.cards .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); }
.ai-list li:hover ,
.stats > div:hover ,
.steps li:hover ,
.std > div:hover ,
.faq details:hover ,
.cards .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent), 0 14px 32px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.ai-list li:hover::after ,
.stats > div:hover::after ,
.steps li:hover::after ,
.std > div:hover::after ,
.faq details:hover::after ,
.cards .card:hover::after { opacity: 1; }
.ai-list li > * ,
.stats > div > * ,
.steps li > * ,
.std > div > * ,
.faq details > * ,
.cards .card > * { position: relative; }
.js .ai-list li ,
.js .stats > div ,
.js .steps li ,
.js .std > div ,
.js .faq details ,
.js .cards .card { opacity: 0; transform: translateY(18px); }
.js .ai-list li.in ,
.js .stats > div.in ,
.js .steps li.in ,
.js .std > div.in ,
.js .faq details.in ,
.js .cards .card.in { opacity: 1; transform: none; transition: opacity .6s ease var(--d, 0s), transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s), border-color .3s, box-shadow .3s; }
.js .ai-list li.in:hover ,
.js .stats > div.in:hover ,
.js .steps li.in:hover ,
.js .std > div.in:hover ,
.js .faq details.in:hover ,
.js .cards .card.in:hover { transform: translateY(-4px); transition-delay: 0s; }
@keyframes glassfloat { from { transform: translate(-30%, 0) scale(1); } to { transform: translate(40%, 30%) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .ai-list::before { animation: none; } .js .ai-list li { opacity: 1; transform: none; } .ai-list li, .ai-list li:hover { transition: none; transform: none; } }

.js .stats > div, .js .steps li, .js .std > div, .js .faq details, .js .cards .card { opacity: 0; transform: translateY(18px); }
.js .stats > div.in, .js .steps li.in, .js .std > div.in, .js .faq details.in, .js .cards .card.in { opacity: 1; transform: none; transition: opacity .6s ease var(--d, 0s), transform .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s), border-color .3s, box-shadow .3s; }
.stats { border-top: 0 !important; gap: 12px; margin-top: 0; }
.stats > div { padding: 22px 20px 20px !important; border-radius: 14px; }
.steps { border-top: 0 !important; gap: 12px; }
.steps li { border-radius: 14px; border-right: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.std { gap: 12px; }
.std > div { padding: 16px 18px; border-radius: 14px; }
.faq { border-top: 0 !important; gap: 10px; }
.faq details { padding: 14px 18px; border-radius: 14px; }
.cards { gap: 16px; }
.cards .card { border-radius: 16px; }
.stats, .steps, .std, .faq, .cards { padding: 18px; }
@media (max-width: 600px) { .stats, .steps, .std, .faq, .cards { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .js .stats > div, .js .steps li, .js .std > div, .js .faq details, .js .cards .card { opacity: 1; transform: none; } }


/* ---- podstrony i WordPress ---- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:-9999px;top:8px;background:var(--accent);color:#fff;padding:10px 14px;z-index:999}
.skip:focus{left:8px}
.subhero{padding:clamp(56px,9vw,120px) 0 clamp(36px,5vw,64px);background:var(--dark);color:var(--dark-fg);position:relative;overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 85% 10%,rgba(47,128,237,.28),transparent 60%);pointer-events:none}
.subhero .wrap{position:relative}
.subhero h1{max-width:20ch;margin:14px 0 18px;color:#fff}
.subhero .lead{max-width:62ch;color:#cfd3d8}
.subhero .eyebrow{color:#a9c9ff}
.crumbs{font-size:14px;color:#aab0b7;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.crumbs a{color:#cfd3d8;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.subhero .btns{margin-top:28px}
.sub-two{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:860px){.sub-two{grid-template-columns:1fr}}
.sub-two figure{margin:0;border-radius:18px;overflow:hidden}
.sub-two figure img{display:block;width:100%;height:auto}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related a{display:block;padding:22px;border:1px solid var(--line);border-radius:16px;text-decoration:none;background:var(--surface);transition:transform .2s,border-color .2s}
.related a:hover{transform:translateY(-3px);border-color:var(--accent)}
.related b{display:block;font-size:18px;margin-bottom:6px}
.related span{color:var(--muted);font-size:15px}
.cta-band{background:var(--dark);color:var(--dark-fg);padding:clamp(40px,6vw,72px) 0}
.cta-band .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{margin:0;color:#fff;max-width:24ch}
.price-box{margin-top:22px;padding:18px 22px;border-radius:16px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.price-box b{display:block;font-size:20px}
.legal{max-width:780px;margin-inline:auto;padding:clamp(40px,6vw,80px) var(--gutter)}
.legal h2{margin-top:2em;font-size:1.25rem}
.page-pad{padding:clamp(48px,7vw,96px) 0}
.films{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
@media(min-width:921px){.steps.steps-4{grid-template-columns:repeat(4,1fr)}}
body{margin:0}

/* ---- Automat video ---- */
.demo-banner{margin:0 0 22px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-size:15px}
.am-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:860px){.am-grid{grid-template-columns:1fr}}
.am-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,transparent),var(--surface));display:flex;flex-direction:column;gap:14px;min-width:0}
.am-card header{display:flex;gap:14px;align-items:center}
.am-card h2{font-size:20px;margin:0}
.am-card header p{margin:2px 0 0;color:var(--muted);font-size:14px}
.am-n{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--accent);color:#fff}
.am-drop{position:relative;border:2px dashed var(--line);border-radius:14px;padding:26px 16px;text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .2s,background .2s}
.am-drop.over,.am-drop:hover,.am-drop:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.am-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.am-drop span{color:var(--muted);font-size:14px}
.am-files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.am-files li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px}
.am-files li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-files li em{color:var(--muted);font-style:normal}
.am-files li i,.am-proc li i{grid-column:1/-1;height:6px;border-radius:99px;background:color-mix(in srgb,var(--fg) 10%,transparent);overflow:hidden;display:block}
.am-files li b,.am-proc li b{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear}
.am-hint{margin:0;color:var(--muted);font-size:14px;min-height:1.4em}
.am-tracks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.am-tracks li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--bg)}
.am-tracks li:hover,.am-tracks li:focus-visible{border-color:var(--accent)}
.am-tracks li.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.am-tracks .pl{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.am-tracks .pl svg{width:14px;height:14px}
.am-tracks b{display:block;font-size:15px}.am-tracks small{color:var(--muted)}.am-tracks em{font-style:normal;color:var(--muted);font-size:14px}
.am-proc{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.am-proc li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px}
.am-proc li em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.am-proc li.ok span{color:var(--accent-text)}
.am-total{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.am-total strong{font-size:26px;font-variant-numeric:tabular-nums}
.am-video{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9}
.am-video img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.4) brightness(.55);transition:filter .4s}
.am-video.ready img{filter:none}
.am-wait{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;padding:20px;font-size:15px}
.am-wm{position:absolute;inset:-20%;display:flex;flex-direction:column;justify-content:space-around;transform:rotate(-18deg);pointer-events:none}
.am-wm span{display:block;text-align:center;font-weight:800;font-size:clamp(18px,3.4vw,34px);letter-spacing:.12em;color:rgba(255,255,255,.38);text-shadow:0 1px 6px rgba(0,0,0,.35);white-space:nowrap}
.am-pay{margin-top:22px;display:flex;gap:22px;align-items:stretch;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--surface)}
.am-pay-l{display:flex;flex-direction:column;gap:14px;flex:1 1 420px;min-width:0}
.am-pay-r{display:flex;flex-direction:column;gap:8px;justify-content:center;flex:0 1 280px}
.am-pay-r small{color:var(--muted)}
.am-price small,.am-price span{display:block;color:var(--muted);font-size:14px}.am-price b{font-size:34px;line-height:1.1}
.am-blik{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.blik-logo svg{width:104px;height:auto;display:block}
.am-blik label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.am-blik input{width:130px;letter-spacing:.3em;text-align:center;font-size:18px}
@media(max-width:560px){.am-pay-r{flex-basis:100%}}
.am-drop b{color:var(--fg);font-size:17px}
.am-blik input{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:10px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---- Automat video: szkło na wygenerowanym tle ---- */
.am-page{position:relative;isolation:isolate;color:#fff;background:#06090d url(../vst-media/assets/img/img-272b9f96d4.jpg) center/cover fixed no-repeat}
.am-page::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,11,12,.68) 0%,rgba(10,11,12,.5) 45%,rgba(10,11,12,.84) 100%)}
@media(max-width:860px){.am-page{background-attachment:scroll}}
.am-page .subhero{background:transparent}
.am-page .subhero::before{display:none}
.am-page .am-sec{background:transparent;padding-top:0}
.am-home{padding:clamp(56px,8vw,110px) 0}
.am-head{margin-bottom:28px;max-width:70ch}
.am-head h2{color:#fff;margin:12px 0}
.am-head .lead{color:#d4d9df}
.am-head .eyebrow{color:#a9c9ff}
.am-page .am-card,.am-page .am-pay{position:relative;overflow:hidden;color:#fff;background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px -18px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.am-page .am-card::after,.am-page .am-pay::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(120,170,255,.16),transparent 65%)}
.am-page .am-card:hover,.am-page .am-pay:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 20px 40px -18px rgba(0,0,0,.7)}
.am-page .am-card:hover::after,.am-page .am-pay:hover::after{opacity:1}
.am-page .am-card>*,.am-page .am-pay>*{position:relative;z-index:1}
.am-page .am-card header p,.am-page .am-hint,.am-page .am-files li em,.am-page .am-drop span,.am-page .am-tracks small,.am-page .am-tracks em,.am-page .am-proc li em,.am-page .am-price small,.am-page .am-price span,.am-page .am-pay-r small,.am-page .am-blik label{color:rgba(255,255,255,.72)}
.am-page .am-drop{border-color:rgba(255,255,255,.35)}
.am-page .am-drop b{color:#fff}
.am-page .am-drop.over,.am-page .am-drop:hover,.am-page .am-drop:focus-visible{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.am-page .am-tracks li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.am-page .am-tracks li:hover,.am-page .am-tracks li.on{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.16)}
.am-page .am-tracks .pl{background:rgba(255,255,255,.16);color:#fff}
.am-page .am-files li i,.am-page .am-proc li i{background:rgba(255,255,255,.18)}
.am-page .am-files li b,.am-page .am-proc li b{background:linear-gradient(90deg,#2f80ed,#4cc9f0)}
.am-page .am-proc li.ok span{color:#9fd0ff}
.am-page .am-total{border-top-color:rgba(255,255,255,.22)}
.am-page .am-blik input{background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:10px;font-family:var(--font-body)}
.am-page .am-blik input::placeholder{color:rgba(255,255,255,.4)}
.am-page .am-pay .btn,.am-page .am-card .btn{cursor:pointer}
.am-page .btn:disabled{opacity:1}
.am-page .am-card .btn.red{width:100%;text-align:center}
.am-page .am-pay-r .btn{width:100%;text-align:center;background:rgba(255,255,255,.16)}
.am-page .am-pay-r .btn:hover{background:rgba(255,255,255,.3)}
.am-page .am-grid{margin-top:0}
.am-head{max-width:var(--maxw)}
.am-head h2,.am-head .lead{max-width:70ch}

/* ---- wybór automatu ---- */
.am-choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
@media(max-width:700px){.am-choose{grid-template-columns:1fr}}
.am-tile{position:relative;overflow:hidden;text-align:left;font:inherit;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:26px;border-radius:20px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 40px -18px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,background .3s}
.am-tile:hover,.am-tile:focus-visible,.am-tile.on{transform:translateY(-3px);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 20px 40px -18px rgba(0,0,0,.7)}
.am-tile b{font-size:21px;line-height:1.25}
.am-tile>span:not(.am-tile-ic){color:rgba(255,255,255,.78);font-size:15px}
.am-tile em{font-style:normal;margin-top:6px;font-weight:600;color:#a9c9ff}
.am-tile.on em::after{content:" ✓"}
.am-tile-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(47,128,237,.5);border:1px solid rgba(170,205,255,.5)}
.am-tile-ic svg{width:26px;height:26px}
.am-panel[hidden]{display:none}
.am-panel{animation:amin .45s ease}
@keyframes amin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.am-video img{transition:opacity .25s}
a.am-tile{text-decoration:none}
.am-panel{margin-top:6px}

/* poprawki: O nas wyśrodkowane jak reszta, mniejszy napis MEDIA */
#o-nas > .wrap > .head { text-align: center; justify-items: center; }
#o-nas > .wrap > .head .lead { margin-inline: auto; }
.brand { gap: 3px; }
.brand span { font-size: .64rem; opacity: .64; }

/* Hero: działa też bez JavaScript (np. podgląd w aplikacji) */
.hero-slides:not(.jsrun) .hs { transform: none; opacity: 0; animation: hsfade 25s infinite; }
.hero-slides:not(.jsrun) .hs:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero-slides:not(.jsrun) .hs:nth-child(2) { animation-delay: 5s; }
.hero-slides:not(.jsrun) .hs:nth-child(3) { animation-delay: 10s; }
.hero-slides:not(.jsrun) .hs:nth-child(4) { animation-delay: 15s; }
.hero-slides:not(.jsrun) .hs:nth-child(5) { animation-delay: 20s; }
@keyframes hsfade { 0% { opacity: 0 } 4% { opacity: 1 } 20% { opacity: 1 } 24% { opacity: 0 } 100% { opacity: 0 } }

/* Hero: jeden szklany przycisk na środku */
.hero .btns{justify-content:center}
.hero .btn.red{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.42);padding:15px 34px;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 30px -12px rgba(0,0,0,.5)}
.hero .btn.red:hover{background:rgba(255,255,255,.22)}
/* Logotypy klientów: równa wysokość optyczna */
.track{align-items:center}
.track img{height:auto;width:auto;max-height:38px;max-width:135px;object-fit:contain;margin-right:72px;opacity:.75}
/* Pytania: zdjęcie */
.faq-photo{margin:18px 0 0;border-radius:16px;overflow:hidden;position:relative;aspect-ratio:4/3;border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.faq-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,12,.05),rgba(10,11,12,.45))}
.faq-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Sekcje ze zdjęciem w tle */
section.photo-bg{position:relative;isolation:isolate;color:#fff;--fg:#fff;--muted:rgba(255,255,255,.76);--line:rgba(255,255,255,.2);--accent-text:#9fd0ff;--bg:rgba(255,255,255,.08);background-color:#06090d;background-size:cover;background-position:center;background-repeat:no-repeat}
section.photo-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,11,.88) 0%,rgba(8,9,11,.8) 45%,rgba(8,9,11,.92) 100%)}
section.bg-proces{background-image:url(../vst-media/assets/img/gen-proc-p.jpg)}
section.bg-standard{background-image:url(../vst-media/assets/img/gen-std-p.jpg)}
section.photo-bg .lead{color:#e6eaee}
section.photo-bg h2,section.photo-bg .lead,section.photo-bg .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.65)}
section.photo-bg .steps li,section.photo-bg .std>div{background:rgba(10,12,16,.55)!important}
section.photo-bg .eyebrow{color:#a9c9ff}
section.photo-bg .steps li,section.photo-bg .std>div{background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
section.photo-bg .steps,section.photo-bg .std{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
section.photo-bg .steps::before,section.photo-bg .steps::after,section.photo-bg .std::before,section.photo-bg .std::after{display:none!important}
section.photo-bg .steps li p,section.photo-bg .std span,section.photo-bg .steps small{color:rgba(255,255,255,.76)}

/* Wariant różowy: światło i akcenty jak na okładce Speed Games 6 (prawy górny róg) */
.hero .btn.red{border-color:rgba(255,120,205,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 34px -10px rgba(255,45,170,.55)}
section.photo-bg .eyebrow,.hero .eyebrow{color:#ff9bd8}
section.photo-bg .steps li::before{color:#ff9bd8}
section.photo-bg .std svg{stroke:#ff9bd8}
.hero .hs-dots button.on{background:#ff9bd8}
section.photo-bg .steps li,section.photo-bg .std>div{border-color:rgba(255,150,215,.28)}
.faq-photo{box-shadow:0 18px 44px -18px rgba(255,45,170,.45)}

.hero-slides:not(.jsrun) .hs{animation-duration:35s}
.hero-slides:not(.jsrun) .hs:nth-child(2){animation-delay:5s}.hero-slides:not(.jsrun) .hs:nth-child(3){animation-delay:10s}.hero-slides:not(.jsrun) .hs:nth-child(4){animation-delay:15s}.hero-slides:not(.jsrun) .hs:nth-child(5){animation-delay:20s}.hero-slides:not(.jsrun) .hs:nth-child(6){animation-delay:25s}.hero-slides:not(.jsrun) .hs:nth-child(7){animation-delay:30s}
@keyframes hsfade{0%{opacity:0}3%{opacity:1}14.3%{opacity:1}17.3%{opacity:0}100%{opacity:0}}

#realizacje{position:relative;isolation:isolate;color:#fff;--fg:#fff;--muted:rgba(255,255,255,.76);--accent-text:#9fd0ff;background-color:#06090d;background-size:cover;background-position:center}
#realizacje h2,#realizacje .lead,#realizacje .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.65)}
#realizacje .lead{color:#e6eaee}#realizacje .eyebrow{color:#a9c9ff}#realizacje .works-more a{color:#9fd0ff}
#realizacje{background-image:radial-gradient(900px 420px at 15% 0%,rgba(47,128,237,.22),transparent 70%),radial-gradient(800px 420px at 90% 100%,rgba(76,201,240,.14),transparent 70%),linear-gradient(180deg,#0b0d10,#0f1318)}

/* Awatar w hero: na dole, na środku, nad kropkami; przycisk z boku */
.hero { min-height: min(86vh, 700px); align-items: center; }
.hero .wrap { position: static; }
.hero .hero-top { position: static; }
.hero h1 { position: relative; z-index: 1; }
.hero-ai { position: absolute; left: clamp(16px, 4vw, 64px); top: 96px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 351px; }
.hero-ai-card { position: relative; width: 351px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.35); background: rgba(15,16,17,.55); box-shadow: 0 14px 36px rgba(0,0,0,.5); flex: none; }
.hero-ai-pic { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.hero-ai-card anam-agent { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero-ai-btn { font-size: 1rem; white-space: nowrap; position: static; transform: none; }
@media (max-width: 640px) { .hero { min-height: 800px; align-items: flex-end; padding-top: 190px; padding-bottom: 150px; } .hero-ai { flex-direction: column; align-items: flex-start; gap: 12px; top: 84px; width: 300px; } .hero-ai-card { width: 300px; } .hero-ai-btn { position: static; transform: none; } }
/* Duże V na pierwszym planie (nad awatarem, pod napisem) */
.hero .hero-v { z-index: 5; opacity: 0.2; }
.hero h1 { z-index: 6; }
@media (max-width: 820px) { .hero .hero-v { opacity: 0.16; } }
/* Przycisk równo z ramką awatara; napis po prawej, mniejszy */
.hero-ai-btn { width: 100%; text-align: center; box-sizing: border-box; }
.hero .hero-top { margin-inline: auto 0; text-align: right; grid-template-columns: minmax(0, 560px); justify-content: end; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 3.15rem); }
@media (max-width: 900px) { .hero .hero-top { margin-inline: auto; text-align: center; justify-content: center; } }
/* Napis w jednej linii; dyskretny, mniejszy przycisk */
.hero h1 { white-space: nowrap; }
.hero .hero-top { grid-template-columns: minmax(0, 1fr); }
.hero .btn.hero-ai-btn { width: 176px; padding: 8px 14px; font-size: 0.8rem; font-weight: 500; border-radius: 10px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.28); box-shadow: none; opacity: .9; }
.hero .btn.hero-ai-btn:hover { background: rgba(255,255,255,.16); opacity: 1; }
@media (max-width: 900px) { .hero h1 { white-space: normal; } }
/* Przycisk wycentrowany pod ramką; wypełnienie o 20% bardziej przezroczyste */
.hero .btn.hero-ai-btn { align-self: center; background: rgba(255,255,255,.056); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Różowe podświetlenie przycisku przywrócone */
.hero .btn.hero-ai-btn { border-color: rgba(255,120,205,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px -8px rgba(255,45,170,.6); opacity: 1; }
.hero .btn.hero-ai-btn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 28px -6px rgba(255,45,170,.8); }
/* Napis odrobinę bardziej w prawo */
@media (min-width: 901px) { .hero .wrap { max-width: none; padding-right: 57px; } .hero h1 { transform: none; } }
/* TEST: awatar z przyciskiem na środku wysokości, po lewej stronie */
@media (min-width: 641px) { .hero-ai { top: calc(50% + 45px); transform: translateY(-50%); } }
/* Większe logo V MEDIA */
.brand svg { width: 50px; height: 50px; }
.brand span { font-size: 1rem; }
/* Telefon: awatar i przycisk wycentrowane */
@media (max-width: 640px) { .hero-ai { left: 50%; transform: translateX(-50%); align-items: center; width: min(300px, 86vw); } .hero-ai-card { width: 100%; } }

/* Zapętlony awatar do czasu rozmowy; po kliknięciu wchodzi awatar na żywo */
.hero-ai-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; }
.hero-ai-card { cursor: pointer; }
.hero-ai-card anam-agent { z-index: 2; }
.hero-ai-card:not(.live) anam-agent { opacity: 0; pointer-events: none; }
.hero-ai-card.live .hero-ai-vid { display: none; }

/* Film ukazuje się dopiero, gdy faktycznie gra; do tego czasu delikatny „oddech” zdjęcia */
.hero-ai-vid { opacity: 0; transition: opacity .5s; }
.hero-ai-vid.on { opacity: 1; }
.hero-ai-pic { transform-origin: 50% 40%; animation: ai-breathe 6s ease-in-out infinite; }
@keyframes ai-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .hero-ai-pic { animation: none; } }
/* Wyraźniejszy ruch zastępczy (do czasu filmu) */
.hero-ai-pic { animation: ai-breathe 5s ease-in-out infinite; }
@keyframes ai-breathe { 0%,100% { transform: scale(1.02) translate(0,0) rotate(0deg); } 25% { transform: scale(1.06) translate(-4px,-3px) rotate(-.4deg); } 50% { transform: scale(1.08) translate(0,-5px) rotate(0deg); } 75% { transform: scale(1.06) translate(4px,-3px) rotate(.4deg); } }

/* Okno ze slajdami: wymiary jak w wersji dzialajacej na stronie przed zmiana */
.hero { min-height: min(80vh, 660px); }
@media (max-width: 640px) { .hero { min-height: 800px; } }
.hero-ai-card { cursor: pointer; }

/* kafelki-linki pod sekcją Szkolenia */
.tiles-links { padding-top: 0; padding-bottom: 64px; }
.ai-links li { padding: 0; }
.ai-links li > a { display: block; padding: 18px 20px; color: inherit; text-decoration: none; }
.ai-links li > a b { display: block; font-weight: inherit; }
.ai-links li > a b::after { content: "\2192"; display: inline-block; margin-left: .4em; opacity: .45; transition: transform .25s ease, opacity .25s ease; }
.ai-links li:hover > a b::after { transform: translateX(5px); opacity: 1; }

/* ikony social media pod paskiem menu */
.social{position:absolute;top:100%;right:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter) - 8px));margin-top:10px;display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:rgba(15,16,17,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);width:auto;max-width:none}
.social a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;color:rgba(255,255,255,.82);transition:color .2s,background .2s,transform .2s}
.social a:hover{color:#fff;background:rgba(255,255,255,.16);transform:translateY(-1px)}
.social svg{width:20px;height:20px}
@media (max-width:900px){.social{position:static;margin:0;padding:0 var(--gutter) 6px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-end}.social a{width:34px;height:34px}.social svg{width:19px;height:19px}}
header.top:has(nav.open) .social{display:none}