/* Qualecta homepage v4: factory footage, the product as the main picture, fluid scroll motion. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* theme colours are registered so they can morph when the page changes between dark and light sections */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #111317; }
@property --fg { syntax: '<color>'; inherits: true; initial-value: #F4F2ED; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #A4AAB3; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.12); }
@property --soft { syntax: '<color>'; inherits: true; initial-value: #1B1E23; }

:root {
  --ink: #111317;
  --ink-2: #1A1D22;
  --ink-3: #262A31;
  --paper: #F3F0E9;
  --paper-2: #E9E5DB;
  --white: #FFFFFF;
  --lime: #8FB500;
  --lime-hi: #A2C80F;
  --lime-ink: #4C6200;
  --lime-soft: #EEF4D2;
  --amber: #E3A23B;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --sh-1: 0 1px 2px rgba(17, 19, 23, 0.05), 0 8px 20px -8px rgba(17, 19, 23, 0.12);
  --sh-2: 0 1px 2px rgba(17, 19, 23, 0.06), 0 22px 44px -18px rgba(17, 19, 23, 0.22), 0 60px 120px -50px rgba(17, 19, 23, 0.32);
  --nav-h: 72px;
  --gut: 32px;   /* side padding of .wrap; v4.7: 20 px on phones, 16 px below 360 px */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.t-dark, body.theme-dark, [data-theme="dark"] { --bg: #111317; --fg: #F4F2ED; --muted: #A4AAB3; --line: rgba(255, 255, 255, 0.12); --soft: #1B1E23; }
.t-light, body.theme-light, [data-theme="light"] { --bg: #F3F0E9; --fg: #111317; --muted: #5C6169; --line: rgba(17, 19, 23, 0.1); --soft: #FFFFFF; }
/* with motion the sections are see-through and take the theme from <body>, so colours morph between sections */
html.mo main > section[data-theme] { --bg: inherit; --fg: inherit; --muted: inherit; --line: inherit; --soft: inherit; background: transparent; }
html:not(.mo) main > section[data-theme] { background: var(--bg); color: var(--fg); }
body { transition: --bg 0.5s cubic-bezier(0.65, 0, 0.35, 1), --fg 0.5s cubic-bezier(0.65, 0, 0.35, 1), --muted 0.5s cubic-bezier(0.65, 0, 0.35, 1), --line 0.5s cubic-bezier(0.65, 0, 0.35, 1), --soft 0.5s cubic-bezier(0.65, 0, 0.35, 1); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
html:not(.mo) { scroll-behavior: smooth; }
body { font-family: var(--font); font-size: 17.5px; line-height: 1.6; color: var(--fg); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
.backdrop { position: fixed; inset: 0; z-index: -2; background: var(--bg); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; font-stretch: 92%; }
h2 { font-size: clamp(2.3rem, 4.6vw, 4.1rem); line-height: 1.02; text-wrap: balance; }
h3 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--lime); color: var(--ink); padding: 8px 14px; z-index: 100; font-weight: 600; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; color: var(--muted); margin-bottom: 20px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(143, 181, 0, 0.18); }
.sec-head h2 { margin-bottom: 22px; }
.sec-lead { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 34em; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.35s var(--ease), background-color 0.25s, box-shadow 0.35s var(--ease), color 0.25s, border-color 0.25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 9px 17px; font-size: 0.94rem; }
.btn-lg { padding: 16px 28px; font-size: 1.06rem; }
.btn-block { width: 100%; }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(143, 181, 0, 0.9); }
.btn-lime:hover { background: var(--lime-hi); box-shadow: 0 16px 30px -14px rgba(143, 181, 0, 0.95); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2A2E36; }
.btn-glass { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); }
.btn-line { border-color: currentColor; }
.btn .dim { opacity: 0.7; font-weight: 500; }
.play { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); margin-left: -8px; }
.play svg { margin-left: 2px; }

/* ---------- top bar + nav ---------- */
.fair-over .topbar { display: none; }
.topbar { position: relative; z-index: 60; background: #0B0C0E; color: #D5D9DF; font-size: 0.88rem; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 4px 14px; min-height: 40px; flex-wrap: wrap; padding-top: 7px; padding-bottom: 7px; text-align: center; }
.topbar a { color: var(--lime); font-weight: 600; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); color: #fff; transition: background-color 0.45s var(--ease), color 0.45s var(--ease), box-shadow 0.45s var(--ease), backdrop-filter 0.45s; }
.nav.is-solid { color: var(--fg); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
html:not(.mo) .nav { background: rgba(17, 19, 23, 0.92); color: #fff; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* v4.7: the official logo (traced from the official files). Lime on dark surfaces, solid ink on light ones; on desktop the
   factory mark stands on the wordmark's baseline (the app header pairs them the same way), phones show the wordmark only */
.logo { display: inline-flex; flex: none; align-items: flex-end; gap: 10px; color: #C4D600; fill: currentColor; transition: color 0.45s var(--ease); }
.logo svg { display: block; width: auto; }
.logo-mark { height: 28px; margin-bottom: 2.2px; }
.logo-word { height: 20px; }
html.mo body.theme-light .nav.is-solid .logo { color: var(--ink); }
.q-mark { display: block; width: auto; fill: var(--ink); }
.nav-links { display: flex; gap: 6px; font-size: 0.97rem; font-weight: 500; }
.nav-links a { padding: 8px 14px; border-radius: 999px; transition: background-color 0.25s; }
.nav-links a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.nav-actions { display: flex; flex: none; align-items: center; gap: 16px; font-size: 0.95rem; font-weight: 500; }
.nav-login:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang { font-size: 0.82rem; font-weight: 600; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; padding: 3px 10px; }
.lang:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 1; min-height: max(680px, calc(100svh - 40px)); margin-top: calc(-1 * var(--nav-h)); padding: calc(var(--nav-h) + 56px) 0 calc(22vh + 40px); display: flex; align-items: center; color: #fff; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0B0C0E; will-change: clip-path; }
.hero-poster img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-video { opacity: 0; transition: opacity 1s var(--ease); }
.hero-video.is-on { opacity: 1; }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11, 12, 14, 0.9) 0%, rgba(11, 12, 14, 0.72) 34%, rgba(11, 12, 14, 0.28) 64%, rgba(11, 12, 14, 0.12) 100%),
  linear-gradient(180deg, rgba(11, 12, 14, 0.6) 0%, rgba(11, 12, 14, 0) 24%, rgba(11, 12, 14, 0) 62%, rgba(11, 12, 14, 0.55) 100%); }
.hero-inner { position: relative; width: 100%; }
.hero-h1 { font-size: clamp(3.4rem, 8.6vw, 8.4rem); line-height: 0.94; letter-spacing: -0.045em; font-weight: 600; font-stretch: 86%; max-width: 9.5em; margin-bottom: 30px; }
.hero-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-h1 .w > span { display: inline-block; will-change: transform; }
.hero-lead { font-size: clamp(1.1rem, 1.45vw, 1.32rem); line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 38px; }
.eyebrow-dark { color: rgba(255, 255, 255, 0.72); }
.hero-deploy { margin-top: 20px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); max-width: 34em; }
/* pre-animation states (only when motion runs; removed by JS or by the safety timeout) */
.mo .hero-h1 .w > span { transform: translateY(108%); }
.mo .hero-rise { opacity: 0; transform: translateY(22px); }
.mo .rv { opacity: 0; transform: translateY(26px); }

/* ---------- questions: four role panels that stack while scrolling (v4.5) ---------- */
.demo { position: relative; z-index: 2; padding: 104px 0 64px; }
.demo-head { margin-bottom: 44px; }
@media (min-width: 1100px) {
  .demo-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .demo-head .eyebrow { grid-column: 1 / -1; }
  .demo-head h2 { margin-bottom: 0; }
  .demo-head .sec-lead { padding-bottom: 6px; }
  html.mo .hero { padding-bottom: calc(10vh + 40px); }
}
.demo-note { font-size: 0.86rem; color: var(--muted); margin-top: 24px; }
.trace[hidden], .answer[hidden] { display: none; }
.mini-trace, .trace { list-style: none; display: grid; gap: 6px; font-size: 0.86rem; color: #4A4F57; margin-bottom: 12px; }
.mini-trace li::before, .trace li::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 9px; vertical-align: -2px; border-radius: 50%; background: var(--lime-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.6 7.2l2.2 2.2 4.6-4.8' fill='none' stroke='%234C6200' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.answer-lead { font-size: 1rem; line-height: 1.5; color: #22262C; margin-bottom: 12px; }
.answer-lead b { font-weight: 600; background: linear-gradient(transparent 56%, rgba(163, 200, 15, 0.42) 56%); padding: 0 1px; }
.chart { margin: 4px 0 12px; }
.chart-svg { width: 100%; height: auto; }
.answer-src { font-size: 0.8rem; color: #6B7079; }
.answer-src span { color: var(--ink); font-weight: 600; }
.stack { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.panel { min-width: 0; }
.panel-in { position: relative; border-radius: 32px; overflow: hidden; background: #15171B url(/assets/media/v4/stage_bg.jpg) center / cover; color: #F4F2ED;
  box-shadow: var(--sh-2); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 56px; align-items: center; padding: 36px 40px;
  transform-origin: 50% 0; }
.panel-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(14, 16, 19, 0.72) 0%, rgba(14, 16, 19, 0.35) 55%, rgba(14, 16, 19, 0.2) 100%); pointer-events: none; }
/* v4.8: the dim is a real overlay (its opacity alone changes, nothing else in the panel restyles) */
.panel-dim { position: absolute; inset: 0; background: #0B0C0E; opacity: 0; pointer-events: none; z-index: 3; }
html.mo .panel:not(:last-child) .panel-dim { will-change: opacity; }   /* its own layer: the dim never repaints the panel (CSS or script) */
.panel-copy, .panel-app { position: relative; z-index: 1; }
.panel-pos { display: flex; align-items: center; gap: 12px; font-size: 0.86rem; font-weight: 600; color: rgba(244, 242, 237, 0.62); margin-bottom: 28px; font-variant-numeric: tabular-nums; }
.panel-dots { display: inline-flex; gap: 6px; }
.panel-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.panel-dots i.on { background: var(--lime); box-shadow: 0 0 0 3px rgba(143, 181, 0, 0.22); }
.panel .step-role { color: #B9D36A; font-size: 1rem; margin-bottom: 12px; }
.panel-q { color: #fff; font-size: clamp(2.2rem, 3.2vw, 3.3rem); line-height: 1.06; letter-spacing: -0.03em; font-stretch: 92%; max-width: 11.5em; margin-bottom: 26px; }
.panel-dec { color: rgba(244, 242, 237, 0.8); font-size: 1.12rem; line-height: 1.5; max-width: 25em; }
.panel-dec b { display: inline-block; font-size: 0.8rem; font-weight: 600; color: #D3EA7E; background: rgba(143, 181, 0, 0.2); border-radius: 999px; padding: 2px 10px; margin-right: 8px; vertical-align: 2px; }
.panel-app { display: flex; min-height: 0; }
.panel-app .app { flex: 1; min-width: 0; display: flex; flex-direction: column; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6); }
/* with motion the panels stack: each sticks a little lower than the one before, the covered one shrinks and dims (script) */
html.mo .panel { position: sticky; top: calc(var(--nav-h) + 12px + var(--i) * 12px); }
html.mo .panel-in { height: min(calc(100vh - var(--nav-h) - 48px), 780px); will-change: transform; }
html.mo .panel-app { align-self: stretch; max-height: 740px; }
html.mo .panel-app .app-main { flex: 1; min-height: 0; height: auto; }
html.mo .panel-app .msg-ai { flex: 1; min-height: 0; overflow: hidden; }
html.mo .panel-app .chart-svg { max-height: 23vh; }
/* v4.9: a window more than a screen away is not styled, laid out or painted (half of the page's elements sit in these four
   windows); its box comes from the panel's fixed height, so skipping its content moves nothing */
html.mo .panel-app .app { content-visibility: auto; contain-intrinsic-size: auto 600px auto 480px; }
@media (min-width: 1100px) and (max-height: 820px) {
  html.mo .panel-app .answer-rows li:nth-child(n+3) { display: none; }
  .panel-pos { margin-bottom: 20px; }
}
@media (max-width: 1099px) {
  .panel-in { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; row-gap: 14px; border-radius: 26px; align-content: start; }
  .panel-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; }
  .panel-copy .step-role { order: 1; margin-bottom: 6px; font-size: 0.88rem; }
  .panel-pos { order: 2; margin-bottom: 6px; font-size: 0.78rem; gap: 8px; }
  .panel-q, .panel-dec { order: 3; flex-basis: 100%; }
  .panel-q { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 8px; max-width: 17em; }
  .panel-dec { font-size: 0.9rem; line-height: 1.45; }
  .panel-dec b { font-size: 0.72rem; padding: 1px 8px; margin-right: 6px; }
  html.mo .panel { top: calc(var(--nav-h) + 6px + var(--i) * 8px); }
  html.mo .panel-in { display: flex; flex-direction: column; height: calc(100vh - var(--nav-h) - 30px); height: calc(100svh - var(--nav-h) - 30px); }
  html.mo .panel-app { flex: 1; min-height: 0; max-height: 520px; }
  .panel-app .app { border-radius: 20px; }
  .panel-app .app-top { height: 34px; padding: 0 12px; gap: 10px; flex: none; }
  .panel-app .app-dots i { width: 9px; height: 9px; }
  .panel-app .app-url { font-size: 0.72rem; padding: 2px 10px; white-space: nowrap; }
  .panel-app .app-tag { font-size: 0.68rem; padding: 2px 8px; white-space: nowrap; }
  .panel-app .app-main { display: flex; }
  .panel-app .app-nav, .panel-app .answer-rows { display: none; }
  .panel-app .app-input { flex: none; padding: 7px 7px 7px 14px; font-size: 0.82rem; border-radius: 12px; }
  .panel-app .app-input .send { width: 24px; height: 24px; border-radius: 8px; }
  .panel-app .app-chat { flex: 1; padding: 12px 14px; gap: 10px; }
  .panel-app .msg-user { font-size: 0.9rem; padding: 8px 13px; min-height: 0; flex: none; }
  .panel-app .thinking { font-size: 0.8rem; }
  .panel-app .trace { font-size: 0.8rem; gap: 5px; }
  .panel-app .answer-lead { font-size: 0.88rem; line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .panel-app .chart { margin: 0 0 8px; }
  html.mo .panel-app .chart-svg { max-height: none; }
  .panel-app .answer-src { font-size: 0.74rem; line-height: 1.4; }
}
@media (max-width: 400px) {
  .panel-app .app-dots { display: none; }
}
@media (max-width: 1099px) and (max-height: 700px) {
  .panel-in { padding: 14px 14px; row-gap: 10px; }
  .panel-q { font-size: clamp(1.2rem, 5.4vw, 1.5rem); }
  .panel-app .app-input { display: none; }
  .panel-app .answer-lead { -webkit-line-clamp: 3; }
}
/* v4.6: card content comes in as the panel arrives (script plays it once); without motion everything is in place */
.panel-q .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.panel-q .w > span { display: inline-block; }
html.mo .panel-q .w > span { transform: translateY(108%); }
html.mo .panel-pos, html.mo .panel .step-role { opacity: 0; transform: translateY(12px); }
html.mo .panel-dec { opacity: 0; }
html.mo .panel-dec b { opacity: 0; transform: scale(0.55); }
/* v4.8: while the next panel slides up, the covered one shrinks to 0.94 and dims to 0.42, from the next panel's entry at the
   bottom of the screen to its stick point. Where the browser has scroll-driven animations this runs on the compositor, in step
   with native touch scrolling (phones scroll natively); the script sets html[data-cover="css"] when the browser has them and
   motion is on, otherwise it scrubs the same values itself (data-cover="js", also forced with ?cover=js).
   The timeline is the list's (a sticky box stretches its own view timeline): the next panel (k = i + 1) enters at
   entry + k * (panel + gap) and sticks at contain + k * (panel + gap) - its sticky top, with --ph = the panel height above. */
@supports (animation-timeline: view()) and (animation-range: entry 0% contain 0%) {
  html[data-cover="css"] .stack { view-timeline: --stack block; view-timeline-inset: 0px; --ph: min(calc(100vh - var(--nav-h) - 48px), 780px); }
  html[data-cover="css"] .panel:not(:last-child) .panel-in { animation-name: panel-cover; }
  html[data-cover="css"] .panel:not(:last-child) .panel-dim { animation-name: panel-dim; }
  html[data-cover="css"] .panel:not(:last-child) :is(.panel-in, .panel-dim) { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --stack;
    animation-range: entry calc((var(--i) + 1) * (var(--ph) + 28px)) contain calc((var(--i) + 1) * (var(--ph) + 28px) - var(--nav-h) - 24px - var(--i) * 12px); }
  @media (max-width: 1099px) {
    html[data-cover="css"] .stack { --ph: calc(100svh - var(--nav-h) - 30px); }
    html[data-cover="css"] .panel:not(:last-child) :is(.panel-in, .panel-dim) {
      animation-range: entry calc((var(--i) + 1) * (var(--ph) + 28px)) contain calc((var(--i) + 1) * (var(--ph) + 28px) - var(--nav-h) - 14px - var(--i) * 8px); }
  }
}
@keyframes panel-cover { from { transform: scale(1); } to { transform: scale(0.94); } }
@keyframes panel-dim { from { opacity: 0; } to { opacity: 0.42; } }

/* ---------- dashboards and automations (v4.6): AI photos with a live HTML screen behind the keyed-out display ---------- */
.feat { padding: 96px 0 100px; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 56px; align-items: center; }
.feat-copy h2 { margin-bottom: 22px; font-size: clamp(2.1rem, 3.3vw, 3.2rem); }
.feat-copy .sec-lead + .sec-lead { margin-top: 14px; }
.shot { position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 2; background: #0B0C0E; box-shadow: var(--sh-2); isolation: isolate; }
.shot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; z-index: 2; pointer-events: none; }
.shot-screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 1; overflow: hidden; visibility: hidden; contain: layout paint style; }
.shot-screen.is-placed { visibility: visible; }
@media (max-width: 980px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 700px) {
  .feat { padding: 64px 0; }
  .shot { border-radius: 20px; aspect-ratio: 1 / 1; }
  .shot-tv .shot-photo { object-position: 7% 50%; }
}

/* the wall-screen dashboard, 1600 x 900 logical px (Qualecta style, demo numbers) */
.dw { width: 1600px; height: 900px; background: #F4F3EF; color: var(--ink); font-family: var(--font); display: flex; flex-direction: column; }
.dw-top { display: flex; align-items: center; gap: 18px; height: 84px; padding: 0 34px; background: #fff; border-bottom: 2px solid #E7E4DC; font-size: 24px; }
.dw-mark svg { height: 40px; width: auto; }
.dw-crumb { color: var(--muted); font-weight: 500; }
.dw-crumb::after { content: "/"; margin-left: 18px; color: #C9C5BA; }
.dw-title { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.dw-sp { flex: 1; }
.dw-chip { border: 2px solid #E2DED5; border-radius: 999px; padding: 8px 20px; font-size: 21px; font-weight: 600; color: #3A4150; display: inline-flex; align-items: center; gap: 10px; }
.dw-full { width: 46px; height: 46px; border-radius: 12px; background: var(--ink); display: grid; place-items: center; }
.dw-full i { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 3px; }
.dw-grid { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 186px minmax(0, 1fr) 176px; gap: 20px; padding: 22px 34px 30px; min-height: 0; }
.dw-tile, .dw-card { background: #fff; border-radius: 22px; border: 2px solid #ECEAE4; padding: 20px 26px; min-width: 0; }
.dw-k { font-size: 22px; font-weight: 600; color: #4A4F57; }
.dw-v { font-size: 62px; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 6px; white-space: nowrap; }
.dw-s { font-size: 19px; color: var(--muted); }
.dw-tile:nth-child(2) .dw-v { color: #A86A0F; }
.dw-tile:nth-child(4) .dw-v { color: var(--lime-ink); }
.dw-card { display: flex; flex-direction: column; }
.dw-ct { font-size: 22px; font-weight: 600; color: #3A4150; margin-bottom: 8px; }
.dw-line { grid-column: 1 / 3; }
.dw-bars { grid-column: 3 / 5; }
.dw-table { grid-column: 1 / 5; }
.dw-svg { width: 100%; flex: 1; min-height: 0; }
.dw-table ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dw-table li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; background: #F6F5F1; border-radius: 14px; padding: 14px 18px; font-size: 21px; }
.dw-table li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dw-table li em { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: 18px; }

html.mo .dw-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.mo .dw-area, html.mo .dw-exp { opacity: 0; }
html.mo .dw-table li { opacity: 0; transform: translateY(14px); }
html.mo .dw-bv { opacity: 0; }
/* v4.7: a reset puts the start state on at once (it only runs while the panel is covered or off screen) */
.no-tr, .no-tr * { transition: none !important; }

.app { background: var(--white); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: var(--sh-2); border: 1px solid rgba(17, 19, 23, 0.07); }
.app-top { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; background: #F7F6F2; border-bottom: 1px solid #ECEAE4; }
.app-dots { display: flex; flex: none; gap: 6px; }
.app-dots i { width: 11px; height: 11px; border-radius: 50%; background: #DEDCD6; }
.app-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: #6B7079; background: #ECEAE4; border-radius: 8px; padding: 3px 12px; }
.app-tag { flex: none; white-space: nowrap; margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--lime-ink); background: var(--lime-soft); border-radius: 999px; padding: 3px 10px; }
.app-main { display: grid; grid-template-columns: 148px minmax(0, 1fr); height: min(570px, calc(100vh - var(--nav-h) - 110px)); min-height: 500px; }
.app-nav { background: #F7F6F2; border-right: 1px solid #ECEAE4; padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: #3A4150; }
.app-mark { padding: 2px 10px 16px; }
.app-mark svg { height: 22px; }
.app-nav-item { padding: 8px 12px; border-radius: 10px; }
.app-nav-item.on { background: #E9EDF9; color: #1E2A4A; font-weight: 600; }
.app-chat { position: relative; display: flex; flex-direction: column; padding: 18px 22px 16px; gap: 14px; min-width: 0; }
.app-progress { display: flex; gap: 6px; }
.app-progress i { height: 4px; flex: 1; border-radius: 4px; background: #ECEAE4; overflow: hidden; position: relative; }
.app-progress i::after { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.app-progress i.on::after, .app-progress i.done::after { transform: scaleX(1); }
.msg-user { display: grid; align-self: flex-end; background: var(--ink); color: #fff; border-radius: 18px 18px 5px 18px; padding: 10px 16px; font-weight: 500; font-size: 1rem; max-width: 92%; min-height: 44px; }
.msg-user > span { grid-area: 1 / 1; min-width: 0; }
.msg-ghost { visibility: hidden; }
.caret { display: inline-block; width: 2px; height: 1.05em; background: currentColor; margin-left: 2px; vertical-align: -3px; opacity: 0; }
.app.is-typing .caret { opacity: 1; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg-ai { flex: 1; position: relative; min-height: 0; }
.thinking { position: absolute; top: 2px; left: 0; right: 0; font-size: 0.88rem; color: #6B7079; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.thinking > p { margin-bottom: 10px; }
.app.is-thinking .thinking { opacity: 1; }
.trace li { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.trace li.on { opacity: 1; transform: none; }
.answer { transition: opacity 0.35s var(--ease); }
.app.is-typing .answer, .app.is-thinking .answer { opacity: 0; }
.answer-rows { list-style: none; display: grid; gap: 6px; margin-bottom: 10px; }
.answer-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; background: #F6F5F1; border-radius: 10px; padding: 7px 12px; font-size: 0.86rem; }
.answer-rows b { font-weight: 600; font-variant-numeric: tabular-nums; }
.answer-rows em { font-style: normal; color: #6B7079; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.app-input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #E4E1D9; border-radius: 14px; padding: 10px 10px 10px 16px; font-size: 0.9rem; color: #9097A1; }
.app-input .send { width: 28px; height: 28px; border-radius: 9px; background: var(--ink); }
/* chart animation when an answer appears */
.grow-y, .grow-x { transform-box: fill-box; transition: transform 0.6s var(--ease); transition-delay: var(--d, 0ms); }
.grow-y { transform-origin: bottom; }
.grow-x { transform-origin: left; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease); }
.pre .grow-y { transform: scaleY(0); }
.pre .grow-x { transform: scaleX(0); }
.pre .draw { stroke-dashoffset: 1; }

/* ---------- how it works ---------- */
.how { padding: 96px 0 76px; }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; }
.how-head h2 { margin-bottom: 0; }
.how-p { color: var(--muted); font-size: 1.08rem; max-width: 34em; }
.how-p + .how-p { margin-top: 14px; }
.flow-card { grid-column: 1 / -1; margin-top: 44px; background: color-mix(in srgb, var(--soft) 70%, transparent); border-radius: var(--r-lg); padding: 36px 32px; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.flow-svg { width: 100%; height: auto; overflow: visible; }
.flow-mobile { display: none; }
.fl-pulses circle { fill: var(--lime); }
/* v4.7: where Qualecta runs, a choice shown under the diagram (same card language as the source nodes) */
.deploy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.deploy-label { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.deploy-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.deploy-opt { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 13px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid #E4E1D9; box-shadow: var(--sh-1); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.deploy-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--lime-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deploy-ic .dot { fill: var(--lime-ink); stroke: none; }
.deploy-or { font-size: 0.95rem; color: var(--muted); }
.fl-pulses circle.halo { fill: rgba(143, 181, 0, 0.25); }

/* ---------- film ---------- */
.film { padding: 100px 0 96px; }
.film-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: end; margin-bottom: 52px; }
.film-head h2 { margin-bottom: 0; }
.film-p { color: var(--muted); font-size: 1.15rem; max-width: 30em; padding-bottom: 8px; }
.film-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: #000 center / cover; box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.8); will-change: transform; }
.film-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-open { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 26px; color: #fff; font-weight: 600; font-size: 1.02rem; background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45)); }
.film-open > span:last-child { background: rgba(17, 19, 23, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 10px 18px 10px 14px; display: inline-flex; align-items: center; gap: 10px; transition: background-color 0.25s; }
.film-open:hover > span:last-child { background: rgba(17, 19, 23, 0.82); }
.film-open .play-lg { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.5); transition: transform 0.4s var(--ease); }
.film-open:hover .play-lg { transform: scale(1.08); }

/* v4.7: EU icon for AI-generated content (Karol 11:26 "mały znak ai jest spoko"): a small corner mark, the text lives in aria-label/title only;
   v4.9 (Karol 10-08 "wywal 'AI' z filmikow"): only on the office photo, no longer on the hero video, the film card or in the films */
.ai-mark { position: absolute; z-index: 3; display: block; width: 30px; height: 30px; line-height: 0; }
.ai-ic { display: block; width: 100%; height: 100%; }
.ai-ic .ai-disc { fill: #000; fill-opacity: 0.5; }
.ai-ic .ai-l { fill: #fff; }
.ai-shot { right: 16px; bottom: 16px; width: 28px; height: 28px; }
@media (max-width: 700px) {
  .ai-shot { right: 12px; bottom: 12px; width: 24px; height: 24px; }
}

/* ---------- team ---------- */
.team { padding: 96px 0 112px; }
.team-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
.team-text { font-size: 1.2rem; line-height: 1.6; max-width: 32em; }
.team-call { color: var(--muted); margin-top: 18px; font-size: 1.05rem; max-width: 32em; }
.people { list-style: none; display: grid; gap: 14px; }
.person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; border-radius: 24px; background: var(--soft); border: 1px solid var(--line); }
.person img { width: 112px; height: 112px; border-radius: 18px; object-fit: cover; background: #2A2E36; }
.person-name { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.015em; }
.person-role { font-size: 0.86rem; font-weight: 600; color: var(--lime); margin: 2px 0 6px; }
.person-bio { color: var(--muted); font-size: 0.98rem; line-height: 1.5; }

/* ---------- pilot ---------- */
.pilot { padding: 112px 0 96px; }
.pilot-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 80px; align-items: start; }
.timeline { list-style: none; position: relative; margin-top: 56px; padding-left: 60px; }
.tl-rail { position: absolute; left: 15px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tl-fill { position: absolute; inset: 0; background: var(--lime); transform-origin: top; transform: scaleY(1); }
.mo .tl-fill { transform: scaleY(0); }
.tl-step { position: relative; padding-bottom: 54px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -60px; top: 0; width: 33px; height: 33px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.tl-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform 0.45s var(--ease); }
.tl-step.is-on .tl-dot, html:not(.mo) .tl-dot { border-color: var(--lime); }
.tl-step.is-on .tl-dot::after, html:not(.mo) .tl-dot::after { transform: scale(1); }
.tl-when { font-size: 0.86rem; font-weight: 600; color: var(--lime-ink); margin-bottom: 4px; }
.tl-step h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 8px; }
.tl-step p:last-child { color: var(--muted); max-width: 32em; }
.pilot-side { position: sticky; top: calc(var(--nav-h) + 28px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.price-card, .proof-card { position: relative; background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-2); }
.price-label { font-size: 0.9rem; font-weight: 600; color: #6B7079; margin-bottom: 6px; }
.price { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-stretch: 92%; }
.price-per { font-size: 0.5em; font-weight: 600; letter-spacing: -0.01em; color: #5C6169; white-space: nowrap; }
.price-note { color: #5C6169; margin: 10px 0 22px; }
.price-days { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--lime-soft); margin-bottom: 22px; }
.price-days b { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--lime-ink); font-variant-numeric: tabular-nums; min-width: 1.3em; }
.price-days span { font-size: 0.95rem; line-height: 1.35; color: #3D4A12; font-weight: 500; }
.proof-card { box-shadow: var(--sh-1); padding: 26px 28px; }
.proof-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.proof-facts li { background: #F6F5F1; border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 0.95rem; }
.proof-text { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; margin-bottom: 12px; }
.proof-note { font-size: 0.86rem; color: #6B7079; }
.draft-tag { display: inline-block; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; background: #FFD43B; color: #3D2E00; padding: 3px 9px; border-radius: 6px; vertical-align: middle; white-space: nowrap; }
.draft-tag-top { position: absolute; top: -12px; left: 24px; }

/* ---------- faq ---------- */
.faq { padding: 96px 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-grid .sec-head { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-list { display: grid; gap: 12px; }
.qa { background: var(--soft); border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; cursor: pointer; font-size: 1.16rem; font-weight: 600; letter-spacing: -0.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--lime-soft); transition: transform 0.45s var(--ease), background-color 0.3s; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--lime-ink); border-radius: 2px; }
.qa summary i::after { transform: rotate(90deg); transition: transform 0.45s var(--ease); }
.qa[open]:not(.is-closing) summary i { transform: rotate(180deg); background: var(--lime); }
.qa[open]:not(.is-closing) summary i::after { transform: rotate(0deg); }
.qa-body { padding: 0 26px 24px; color: var(--muted); max-width: 44em; }

/* ---------- contact ---------- */
.contact { padding: 96px 0 120px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 80px; align-items: start; }
.contact-who { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding: 14px 18px 14px 14px; border-radius: 22px; background: var(--soft); border: 1px solid var(--line); max-width: 30em; }
.contact-who img { width: 72px; height: 72px; object-fit: cover; flex: none; border-radius: 16px; }
.contact-who p { font-weight: 500; }
.contact-ways { list-style: none; display: grid; gap: 14px; margin-top: 30px; justify-items: start; }
.contact-ways li { max-width: 100%; }
.contact-link { font-size: 1.05rem; font-weight: 600; border-bottom: 2px solid var(--lime); padding-bottom: 1px; }
.contact-link:hover { color: var(--lime-ink); }
.lead-form { position: relative; background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--sh-2); }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 0.93rem; font-weight: 600; margin-bottom: 7px; }
.field small { font-weight: 400; color: #6B7079; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); border: 1px solid #DDD9CF; border-radius: 14px; padding: 13px 15px; background: #FAF9F6; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(143, 181, 0, 0.3); background: #fff; }
.field .err { display: none; font-style: normal; font-size: 0.84rem; color: #B42318; margin-top: 5px; }
.field.invalid input { border-color: #D92D20; }
.field.invalid .err { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.topic-note { background: var(--lime-soft); color: #3A4710; padding: 10px 14px; border-radius: 12px; font-size: 0.93rem; font-weight: 600; margin-bottom: 16px; }
.form-err { margin-top: 12px; color: #B42318; font-size: 0.93rem; }
.rodo { margin-top: 14px; font-size: 0.8rem; color: #6B7079; line-height: 1.5; }
.rodo a { text-decoration: underline; }
.form-ok { position: absolute; inset: 0; background: #fff; border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; gap: 8px; }
.form-ok[hidden] { display: none; }
.ok-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--lime); color: var(--ink); margin-bottom: 8px; }
.ok-h { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; }
.form-ok p:last-child { color: #5C6169; }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 1; background: var(--ink); color: #A4AAB3; padding: 64px 0 28px; font-size: 0.95rem; border-radius: 36px 36px 0 0; }
.footer .logo { color: #C4D600; margin-bottom: 18px; }
.logo-full { height: 84px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-brand p { margin-top: 6px; }
.footer-addr { font-size: 0.88rem; }
.footer a:hover { color: #fff; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; align-content: start; }
.footer-copy { margin-top: 40px; font-size: 0.82rem; color: #6E7480; }

/* ---------- film dialog ---------- */
#film-dialog { border: 0; padding: 0; background: transparent; width: min(1180px, 94vw); max-height: 94vh; margin: auto; overflow: visible; color: #fff; }
#film-dialog::backdrop { background: rgba(8, 9, 11, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#film-dialog[open] { animation: dlg-in 0.45s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.dlg-inner { position: relative; }
#film-dialog video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 22px; }
.dlg-close { position: absolute; top: -52px; right: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); }
.dlg-close:hover { background: rgba(255, 255, 255, 0.24); }
.dlg-note { margin-top: 12px; font-size: 0.85rem; color: #A4AAB3; }

/* ---------- cookies ---------- */
#cookie-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; width: min(600px, calc(100% - 24px)); background: var(--white); color: var(--ink); border-radius: 20px; padding: 14px 14px 14px 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--sh-2); font-size: 0.92rem; border: 1px solid rgba(17, 19, 23, 0.08); }
#cookie-banner[hidden] { display: none; }
#cookie-banner a { text-decoration: underline; }
.cookie-buttons { display: flex; gap: 8px; flex: none; margin-left: auto; }

/* ---------- preview-only switcher ---------- */
.preview-switch { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: flex; align-items: center; gap: 2px; background: #FFD43B; color: #3D2E00; padding: 5px 6px 5px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.preview-switch span { margin-right: 6px; }
.preview-switch a { padding: 4px 10px; border-radius: 8px; }
.preview-switch a:hover { background: rgba(0, 0, 0, 0.08); }
.preview-switch a.on { background: #3D2E00; color: #FFD43B; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
}
@media (max-width: 1099px) {
  .demo-copy { padding-top: calc(10vh + 72px); }
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: calc(10vh + 48px); }
  .step { max-width: 720px; }
}
@media (max-width: 980px) {
  .how-grid, .team-grid, .pilot-grid, .faq-grid, .contact-grid, .film-head { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .faq-grid .sec-head, .pilot-side { position: static; }
  .how, .film, .pilot { padding-top: 110px; }
}
@media (max-width: 700px) {
  body { font-size: 16.5px; }
  :root { --nav-h: 62px; --gut: 20px; }
  .nav-login { display: none; }
  .nav-actions { gap: 10px; }
  .logo .logo-mark { display: none; }
  .logo-word { height: 18px; }
  .hero { align-items: flex-end; min-height: calc(100svh - 40px); padding-bottom: calc(10vh + 64px); }
  .hero-shade { background: linear-gradient(180deg, rgba(11, 12, 14, 0.55) 0%, rgba(11, 12, 14, 0.25) 30%, rgba(11, 12, 14, 0.7) 62%, rgba(11, 12, 14, 0.94) 100%); }
  .hero-h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .step { padding: 26px 0; }
  .card-mini { padding: 16px 14px 14px; border-radius: 18px; }
  .chart-svg .legend { display: none; }
  .flow-desktop { display: none; }
  .flow-mobile { display: block; }
  .flow-card { padding: 16px 8px; }
  .deploy { flex-direction: column; gap: 10px; margin: 18px 8px 4px; padding-top: 18px; }
  .deploy-opts { flex-direction: column; gap: 8px; }
  .deploy-opt { font-size: 0.95rem; padding: 9px 16px 9px 12px; }
  .how, .film, .pilot, .team, .faq, .contact { padding-top: 84px; padding-bottom: 84px; }
  .film-card { border-radius: 18px; }
  .film-open { padding: 10px; font-size: 0.86rem; }
  .film-open > span:last-child { padding: 7px 12px 7px 10px; }
  .film-open .play-lg { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .person { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; padding: 12px; }
  .person img { width: 84px; height: 84px; border-radius: 14px; }
  /* with motion the three people become a swipe row (the next card peeks in from the right) */
  html.mo .people { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 18px; scroll-padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
  html.mo .people::-webkit-scrollbar { display: none; }
  html.mo .person { flex: 0 0 80%; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 16px; }
  html.mo .person img { width: 76px; height: 76px; }
  .timeline { padding-left: 50px; }
  .tl-dot { left: -50px; width: 29px; height: 29px; }
  .tl-rail { left: 13px; }
  .price-card, .lead-form { padding: 24px 20px; }
  .proof-card { padding: 24px 20px; }
  .proof-facts li { padding: 6px 12px; font-size: 0.9rem; }
  .proof-text { font-size: 1.12rem; }
  .qa summary { padding: 18px 18px; font-size: 1.06rem; }
  .qa-body { padding: 0 18px 20px; }
  .footer-links { grid-template-columns: 1fr; }
  #cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-buttons { margin-left: 0; }
  .cookie-buttons .btn { flex: 1; }
  .preview-switch { left: 6px; right: 6px; bottom: 6px; justify-content: center; flex-wrap: wrap; }
  .preview-switch span { display: none; }
}
/* v4.7: nav on small phones: the wordmark, EN and the call button shrink in steps so all three fit down to 280 px */
@media (max-width: 399px) {
  .hero-ctas .btn-lg { padding-left: 18px; padding-right: 18px; white-space: normal; text-wrap: balance; }   /* v4.7: 'Obejrzyj film z dźwiękiem · 37 s' fits at 360 px */
  .logo-word { height: 16px; }
  .nav-inner { gap: 10px; }
  .nav-actions { gap: 8px; }
  .lang { font-size: 0.78rem; padding: 2px 8px; }
  .nav .btn-sm { padding: 8px 13px; font-size: 0.88rem; }
}
/* v4.7: fluid down to 280 px (folded phones, small Androids): smaller gutters and paddings, long button labels wrap,
   the app window drops its address pill and keeps the demo-data tag */
@media (max-width: 359px) {
  :root { --gut: 16px; }
  body { font-size: 16px; }
  .btn { white-space: normal; text-wrap: balance; text-align: center; }
  .btn-lg { padding: 15px 18px; font-size: 1rem; }
  .nav .btn-sm { padding: 8px 11px; font-size: 0.84rem; white-space: nowrap; }
  .logo-word { height: 14px; }
  .panel-in { padding: 16px 14px; }
  .panel-app .app-url { display: none; }
  .panel-app .app-top { padding: 0 10px; }
  .panel-app .app-chat { padding: 10px 12px; }
  .price-card, .lead-form, .proof-card { padding: 22px 16px; }
  .qa summary { padding: 16px 14px; gap: 12px; }
  .qa-body { padding: 0 14px 18px; }
  .contact-who { padding: 12px; gap: 12px; }
  .contact-who img { width: 56px; height: 56px; }
}
@media (max-width: 330px) {
  .logo-word { height: 13px; }
  .nav-inner { gap: 8px; }
  .nav-actions { gap: 6px; }
  .lang { font-size: 0.72rem; padding: 1px 6px; }
  .nav .btn-sm { padding: 7px 9px; font-size: 0.8rem; font-stretch: 85%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* without motion on wide screens the four answer cards sit in two columns instead of one narrow column */
@media (min-width: 1100px) {
  html:not(.mo) .demo-grid { grid-template-columns: minmax(0, 1fr); }
  html:not(.mo) .demo-copy { padding-top: calc(22vh + 96px); }
  html:not(.mo) .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 48px; }
  html:not(.mo) .step-q { min-height: 2.2em; }
}
/* Lenis (smooth wheel scrolling) base rules */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.film-open { overflow: clip; }   /* v4.9: touch screens have no Lenis; the film dialog holds the page the same way */

/* v4.9 (phone performance): the sections far below the first screen are laid out and painted only when they come near;
   until then they keep their measured height (phone / desktop), and once shown their real height is kept (auto) */
html.mo .cv { content-visibility: auto; contain-intrinsic-size: auto var(--cv-h, 900px); }
html.cv-all .cv { content-visibility: visible; }   /* set before an in-page jump, so the target is measured on the real layout */
#pulpity { --cv-h: 495px; } #jak-to-dziala { --cv-h: 1026px; } #film { --cv-h: 918px; } #zespol { --cv-h: 506px; }   /* content heights at 1440 px */
#pilot { --cv-h: 857px; } #faq { --cv-h: 540px; } #kontakt { --cv-h: 646px; }
@media (max-width: 699px) {   /* at 412 px */
  #pulpity { --cv-h: 764px; } #jak-to-dziala { --cv-h: 1672px; } #film { --cv-h: 523px; } #zespol { --cv-h: 767px; }
  #pilot { --cv-h: 1563px; } #faq { --cv-h: 700px; } #kontakt { --cv-h: 1224px; }
}