/* VUMO landing page, on the VUMO web brand book (Desktop/hero video/5_VUMO_visual_Identification,
   "Brandbook summary").

   Palette   #FFFFFF  #F2F2F2  #D8E1EA  #CCCCCC  #7D858E  #1A1B21  #000000  #FF4417
   Type      Space Grotesk, regular at every size; no second family
   Shape     square corners; hairlines; circles only for round controls
   Orange    the interactive colour (hover, active) and the page's one signal colour: live,
             heat, the lead score, the moment a photo becomes a film

   Two grounds, and they mean something:
     light #F2F2F2  everything the BUYER sees. The white-studio renders sit on it with no
                    visible edge (their sweep measures 240, two steps off).
     dark  #1A1B21  everything the DEALER sees, in the brand's own ink, never a navy.

   Two greys are darkened from the brand's #7D858E for small text only, so body copy meets
   WCAG AA (#7D858E itself is 3.4:1 on #F2F2F2): --muted on light, --mid-dim on dark. */

:root {
  --bg: #f2f2f2;
  --paper: #ffffff;
  --steel: #d8e1ea;
  --ink: #1a1b21;
  --ink-2: #3c3f47;
  --muted: #5f6770;            /* 5.2:1 on #F2F2F2 */
  --grey: #7d858e;             /* the brand grey: large text, icons, inactive states */
  --line: #cccccc;
  --line-soft: #dddddd;
  --black: #000000;

  --mid: #1a1b21;              /* dark sections: the brand ink */
  --mid-2: #222329;            /* raised panels on dark */
  --mid-3: #2d2e35;
  --mid-line: rgba(255, 255, 255, 0.10);
  --mid-line-2: rgba(255, 255, 255, 0.22);
  --mid-text: #f2f2f2;
  --mid-muted: #cccccc;        /* the brand light grey: 10.7:1 on the ink */
  --mid-dim: #9aa1a9;          /* small print on dark: 6.0:1 on the panel */

  --signal: #ff4417;           /* 5.0:1 as text on the ink, 4.6:1 on the panel */
  --signal-soft: rgba(255, 68, 23, 0.14);

  --font: "Space Grotesk", "Space Grotesk Fallback", Arial, system-ui, sans-serif;

  /* the brand book's scale: 64/72, 48/56, 38/44, 30/34, 24/28, 18/26, 16/25, 14/22, 12/16 */
  --fs-hero: clamp(2.35rem, 1.2rem + 4.8vw, 4rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.06rem + 0.4vw, 1.5rem);
  --fs-lede: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --gutter: clamp(16px, 4.4vw, 56px);
  --wrap: 1240px;
  --section: clamp(4.25rem, 2.4rem + 5.4vw, 7.75rem);
  --nav-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5625;         /* 16/25 */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 0.7rem 1.1rem; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
h1, h2 {
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-hero); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 {
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
}
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); max-width: 60ch; margin: 0; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
.num { font-variant-numeric: tabular-nums; }

/* a section's head: label, heading, lede, stacked on one left edge */
.head { display: grid; gap: 1rem; max-width: 52rem; }
.head .label { color: var(--muted); }
.head h2 + .lede { margin-top: 0.3rem; }
.mid .head .label { color: var(--mid-dim); }
.mid .lede { color: var(--mid-muted); }
.lede--sub { font-size: var(--fs-body); }

/* ---------- buttons: the brand's, square, orange on hover ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; gap: 0.75rem;
  height: var(--h); padding: 0 1.6rem;
  border: 1px solid transparent; border-radius: 0;
  font-weight: 500; font-size: 1rem; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .arr { transition: transform .25s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--signal); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { color: var(--signal); border-color: var(--signal); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--signal); color: #fff; }
.btn--sm { --h: 42px; padding: 0 1.1rem; font-size: 0.9375rem; }
.btn svg { width: 16px; height: 16px; flex: none; }
/* the brand's round orange control, here as the play mark */
.play-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); color: #fff; margin-left: -0.6rem; transition: transform .25s var(--ease-out); }
.play-dot svg { width: 11px; height: 11px; margin-left: 2px; }
.btn:hover .play-dot { transform: scale(1.08); }

/* ---------- nav: the brand's, text links, "Book a demo" underlined ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--line-soft); }
body[data-ground="mid"] .nav { background: color-mix(in srgb, var(--mid) 86%, transparent); color: var(--mid-text); border-bottom-color: var(--mid-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.brand svg { height: 20px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); }
.nav__links a { font-size: 1rem; text-decoration: none; white-space: nowrap; transition: color .2s var(--ease); }
.nav__links a:not(.cta) { color: var(--muted); }
body[data-ground="mid"] .nav__links a:not(.cta) { color: var(--mid-dim); }
.nav__links a:hover { color: var(--signal) !important; }
/* the two actions, set apart from the section links by a hairline: "Log in" for a dealer
   (quiet text) and the page's offer as a real button, the same ink button as the hero's */
.nav__acts { position: relative; display: flex; align-items: center; gap: 1.1rem; padding-left: clamp(1.25rem, 3vw, 3rem); }
.nav__acts::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 20px; translate: 0 -50%; background: var(--line); }
body[data-ground="mid"] .nav__acts::before { background: var(--mid-line-2); }
.nav__links .cta { display: inline-flex; align-items: center; gap: 0.55rem; height: 40px; padding: 0 1rem;
  background: var(--ink); color: #fff; font-weight: 500; font-size: 0.9375rem;
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.nav__links .cta svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.nav__links a.cta:hover { background: var(--signal); color: #fff !important; }
.nav__links .cta:hover svg { transform: translateX(3px); }
body[data-ground="mid"] .nav__links .cta { background: #fff; color: var(--ink); }
body[data-ground="mid"] .nav__links a.cta:hover { background: var(--signal); color: #fff !important; }
/* the way in for a dealer who already has an account: on every screen, phones included */
.nav__links .login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.nav__links .login .ico { display: none; width: 20px; height: 20px; }

/* the language menu: a globe and the current code; the list names each language in itself */
.langmenu { position: relative; display: flex; }
.langmenu__btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.2rem; border: 0; background: transparent; color: var(--ink); font-size: 0.9375rem; cursor: pointer; transition: color .2s var(--ease); }
body[data-ground="mid"] .langmenu__btn { color: var(--mid-text); }
.langmenu__btn:hover { color: var(--signal); }
.langmenu__btn svg { width: 18px; height: 18px; flex: none; }
.langmenu__btn .chev { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.langmenu__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.langmenu__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 11.5rem; margin: 0; padding: 0.35rem 0; list-style: none;
  background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0, 0, 0, .16); color-scheme: light; }
.langmenu__list[hidden] { display: none; }
.nav__links .langmenu__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0 1rem; color: var(--ink); font-size: 0.9375rem; }
.nav__links .langmenu__list a:hover { background: var(--bg); }
.langmenu__list a[aria-current="page"] { font-weight: 500; }
.langmenu__list a[aria-current="page"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
body:not([data-ground="mid"]) .nav__links a.login { color: var(--ink); }
body[data-ground="mid"] .nav__links a.login { color: var(--mid-text); }
/* who is looking: the server marks a logged-in dealer's page html.is-dealer (src/landing.py) */
html:not(.is-dealer) .for-dealer, html.is-dealer .for-visitor { display: none !important; }
/* the section on screen: its link turns from grey to ink (js/chrome.js) */
.nav__links a.is-current { color: var(--ink); }
body[data-ground="mid"] .nav__links a.is-current { color: #fff; }
@media (max-width: 900px) {
  .nav__links > a { display: none; }                     /* the section links; the actions stay */
  .nav__links { gap: 1.25rem; }
  .nav__acts { padding-left: 0; }
  .nav__acts::before { display: none; }                  /* nothing to set them apart from */
}
/* a phone: the bar must fit the longest pair (Polish "Zaloguj się" + "Darmowe wideo") */
@media (max-width: 420px) { .nav__links .cta { padding: 0 0.8rem; } .nav__links .cta svg { display: none; } }
/* a phone: "Log in" is the person icon (its text stays for screen readers), the menu loses its chevron */
@media (max-width: 520px) {
  .nav__links .login { min-width: 40px; }
  .nav__links .login .ico { display: block; }
  .nav__links .login .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .langmenu__btn .chev { display: none; }
  .langmenu__list { right: auto; left: -0.6rem; }   /* the button sits left of centre here: open rightwards, on screen */
  .nav__acts { gap: 0.6rem; }
}

/* ---------- hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(1.25rem, 3.5vw, 3rem)); padding-bottom: clamp(2.75rem, 5vw, 4.5rem); overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(1rem, 2vw, 2rem); min-height: min(calc(100svh - var(--nav-h) - 9rem), 760px); }
@media (min-width: 961px) { .hero h1 { font-size: min(4.6vw, 4rem); } }
/* small laptops: an even split, so both buttons still fit on one row beside the car */
@media (min-width: 961px) and (max-width: 1200px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero h1 { font-size: 5vw; }
}
.hero__copy { position: relative; z-index: 2; display: grid; gap: 1.4rem; align-content: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; min-height: 0; } }
.hero__copy .label { color: var(--muted); }
.hero h1 .l2 { display: block; }
.hero h1 .own { position: relative; white-space: nowrap; }
.hero h1 .own::after {
  content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.04em; height: 0.07em;
  background: var(--signal); transform-origin: left; transition: transform 1.1s var(--ease-out) .5s;
}
.js .hero h1 .own:not(.on)::after { transform: scaleX(0); }
.hero .lede { max-width: 31rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.hero__alt { margin-top: -0.4rem; color: var(--muted); font-size: var(--fs-small); }
.hero__alt a { color: var(--ink); text-underline-offset: 3px; display: inline-block; padding-block: 0.7rem; }
.hero__alt a:hover { color: var(--signal); }
.hero__stage {
  /* From a little inside the copy column to exactly the viewport's right edge, so the
     whole frame is on screen: the longest cars reach the frame edge at some angles. */
  --to-edge: calc((100vw - min(100vw, var(--wrap) + 2 * var(--gutter))) / 2 + var(--gutter));
  position: relative; z-index: 1;
  width: calc(100% + 3vw + var(--to-edge)); justify-self: start; margin-left: -3vw;
  aspect-ratio: 1280 / 704;
}
.hero__stage .feather {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 94%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
@media (max-width: 960px) { .hero__stage { width: calc(100% + 2 * var(--gutter)); margin: -1rem calc(-1 * var(--gutter)) 0; } }
.feather {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
.hero__stage video, .hero__stage img { width: 100%; height: 100%; object-fit: cover; }
/* The video is visible from the first paint: its poster is frame 0, so the page's largest
   image paints as soon as that small JPEG arrives, not when the video starts (measured: LCP
   2.4 s -> 1.5 s at 12 Mbps). The same JPEG also sits under the video, covering the moment
   before the video's own poster decodes. Both are feathered, so if it stayed, its turntable
   (the first car's) would show through the video's soft edges as a second, ghost platform
   under every other car. It goes the moment the video plays, while both still show frame 0. */
.hero__poster { position: absolute; inset: 0; transition: opacity .3s var(--ease); }
.hero__stage.is-ready .hero__poster { opacity: 0; }
.onstage {
  position: absolute; left: 9%; bottom: 13%; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.875rem; color: var(--ink-2); max-width: calc(100% - 18%);
}
.onstage .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; box-shadow: 0 0 0 4px var(--signal-soft); }
.onstage .car { color: var(--ink); font-weight: 500; transition: opacity .35s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onstage .car.swap { opacity: 0; }
.onstage .src { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .onstage { left: 5%; bottom: 8%; flex-wrap: wrap; row-gap: 0.1rem; }
  .onstage .src { flex-basis: 100%; padding-left: calc(7px + 0.6rem); font-size: 0.8125rem; }
}
.proof {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem;
  padding: 1.35rem 0 0; margin: clamp(0.5rem, 1.5vw, 1.25rem) 0 0;
  border-top: 1px solid var(--line);
}
.proof li { list-style: none; display: flex; align-items: baseline; gap: 0.6rem; color: var(--ink-2); font-size: var(--fs-small); }
.proof b { font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -0.02em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof li { display: grid; gap: 0.3rem; } }

/* ---------- sections ---------- */
section { position: relative; }
.pad { padding-block: var(--section); }
.mid { background: var(--mid); color: var(--mid-text); color-scheme: dark; }
.mid h2, .mid h3 { color: #fff; }

/* the four listing photos, and the 360 made from them */
.from { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: clamp(0.8rem, 2vw, 1.75rem); margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; }
.from__in { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.from__in img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #e6e6e6; }
.from__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; }
.from__arrow svg { width: 18px; height: 18px; }
.from__out { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e6e6e6; }
.from__out video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.from figcaption { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 760px) {
  .from { grid-template-columns: 1fr; justify-items: stretch; }
  .from__in { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
  .from__arrow { justify-self: center; transform: rotate(90deg); }
}

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.4vw, 1.25rem); margin-top: clamp(2.25rem, 4vw, 3.5rem); }
@media (max-width: 1080px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.tile { display: grid; gap: 0.9rem; margin: 0; align-content: start; }
.tile__media { position: relative; aspect-ratio: 960 / 528; overflow: hidden; background: #e6e6e6; }
.tile__media video, .tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile figcaption { display: grid; gap: 0.3rem; }
.tile figcaption p { color: var(--muted); font-size: var(--fs-small); }
.tile .model { position: absolute; left: 10px; bottom: 10px; padding: 0.25rem 0.5rem; background: rgba(26, 27, 33, .7); color: #fff; }

/* presenter */
.pres__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; margin-top: clamp(2.25rem, 4vw, 3.5rem); }
@media (max-width: 1000px) { .pres__grid { grid-template-columns: 1fr; } }
.player { position: relative; overflow: hidden; background: #e6e6e6; aspect-ratio: 1280 / 704; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caption {
  position: absolute; left: 50%; bottom: 5.5%; translate: -50% 0; width: min(88%, 44rem);
  text-align: center; font-size: clamp(0.85rem, 0.72rem + 0.55vw, 1.12rem); line-height: 1.42; font-weight: 500;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none; text-wrap: balance;
}
.caption span { display: inline; padding: 0.12em 0.3em; background: rgba(26, 27, 33, 0.72); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.caption i { font-style: normal; color: rgba(255, 255, 255, .6); transition: color .12s linear; }
.caption i.on { color: #fff; }
@media (max-width: 640px) { .caption { font-size: 0.8125rem; bottom: 4%; width: 92%; } }
.player__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; }
/* the brand's tabs: dark when active, grey when not, orange on hover */
.player__name { margin: 0; font-size: 0.9375rem; color: var(--ink); }
/* Sound: off is the loudest control on the player, because sound is the point of a
   presenter. Orange and pulsing; on, it goes dark and calm, the bars move, and it offers "Mute". */
.soundbtn {
  display: inline-flex; align-items: center; gap: 0.6rem; height: 42px; padding: 0 1.1rem 0 0.95rem;
  border: 1px solid var(--signal); border-radius: 0; background: var(--signal); color: #fff;
  font-weight: 500; font-size: 0.9375rem; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.soundbtn .ico { width: 18px; height: 18px; flex: none; }
.soundbtn[aria-pressed="false"] { animation: soundcall 2.2s var(--ease) infinite; }
.soundbtn[aria-pressed="false"]:hover { background: var(--ink); border-color: var(--ink); }
.soundbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.soundbtn[aria-pressed="true"]:hover { background: transparent; color: var(--ink); }
.soundbtn[aria-pressed="true"] .ico { display: none; }
@keyframes soundcall { 0% { box-shadow: 0 0 0 0 rgba(255, 68, 23, .5); } 70% { box-shadow: 0 0 0 12px rgba(255, 68, 23, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 68, 23, 0); } }
.eq { display: none; align-items: flex-end; gap: 2px; width: 18px; height: 16px; flex: none; }
.soundbtn[aria-pressed="true"] .eq { display: inline-flex; }
.eq i { flex: 1; height: 30%; background: var(--signal); animation: eq .9s var(--ease) infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.pres__side { display: grid; gap: 2rem; }
.pres__point { display: grid; gap: 0.55rem; }
.pres__point p { color: var(--ink-2); }
.quote { font-weight: 500; }

/* social ads: each ad at its own platform shape, bottoms on one line */
.ads__row { list-style: none; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem clamp(0.9rem, 2vw, 1.75rem); }
/* each card spans two rows of the row grid (frame, label): every frame in a row ends on one line,
   every label starts on one line, whatever the shapes and however the labels wrap */
.ad { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0.7rem; }
.ad__frame { align-self: end; }
.ad__frame { position: relative; overflow: hidden; border-radius: 14px; background: #e6e6e6; box-shadow: 0 18px 40px rgba(10, 10, 12, 0.14); }
.ad--9x16 .ad__frame { aspect-ratio: 9 / 16; }
.ad--4x5 .ad__frame { aspect-ratio: 4 / 5; }
.ad--1x1 .ad__frame { aspect-ratio: 1 / 1; }
.ad__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad__sound { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 10, 12, 0.62); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s var(--ease); }
.ad__sound:hover { background: var(--signal); }
.ad__sound svg { width: 18px; height: 18px; }
.ad__sound .ico-on, .ad__sound[aria-pressed="true"] .ico-off { display: none; }
.ad__sound[aria-pressed="true"] .ico-on { display: block; }
.ad__sound[aria-pressed="true"] { background: var(--signal); }
.ad__fmt { margin: 0; display: grid; gap: 0.1rem; align-content: start; color: var(--muted); font-size: var(--fs-small); }   /* the format, its platforms under it */
.ad__fmt b { color: var(--ink); font-weight: 500; }
.ads__cap { margin-top: 1rem; color: var(--muted); font-size: var(--fs-small); }
.ads__points { list-style: none; margin: clamp(2rem, 3.5vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.ads__points li { display: grid; gap: 0.55rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--line); }
.ads__points p { color: var(--ink-2); }
@media (max-width: 960px) { .ads__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .ads__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad__fmt { margin-bottom: 0.8rem; }
}
@media (max-width: 520px) { .ads__points { grid-template-columns: 1fr; } .ad__frame { border-radius: 10px; } }

/* ---------- the buyer console ---------- */
.app {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  overflow: hidden;
  background: var(--mid-2); border: 1px solid var(--mid-line);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
}
.app__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--mid-line); }
.app__title { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.app__title .t { font-size: 0.9375rem; color: var(--mid-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--signal); white-space: nowrap; }
@media (max-width: 900px) { .app__ctrl .label { display: none; } }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(255, 68, 23, .6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 68, 23, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 68, 23, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 68, 23, 0); } }
/* the header says what is happening: watching while it plays, not watching otherwise */
.app .live .is-on { display: none; }
.app.is-playing .live .is-on { display: inline; }
.app.is-playing .live .is-off { display: none; }
.app:not(.is-playing) .live { color: var(--mid-dim); }
.app:not(.is-playing) .live i { background: var(--mid-dim); animation: none; }
.app__ctrl { display: flex; align-items: center; gap: 0.6rem; color: var(--mid-dim); }
@media (max-width: 640px) {
  .app__top { align-items: flex-start; }
  .app__title { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .app__title .t { white-space: normal; font-size: 0.875rem; }
  .app__ctrl .label { display: none; }
}
.chipbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; height: 32px; padding: 0 0.75rem; border: 1px solid var(--mid-line-2); background: transparent; color: var(--mid-text); cursor: pointer; font-size: 0.8125rem; transition: color .2s, border-color .2s; }
.chipbtn:hover { color: var(--signal); border-color: var(--signal); }
@media (max-width: 760px) { .chipbtn { height: 44px; } .screen__try { height: 44px; } }
.chipbtn svg { width: 12px; height: 12px; }
.app__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
@media (max-width: 980px) { .app__body { grid-template-columns: 1fr; } }
.app__left { padding: 0.9rem; border-right: 1px solid var(--mid-line); display: grid; gap: 0.85rem; align-content: start; }
@media (max-width: 980px) { .app__left { border-right: 0; border-bottom: 1px solid var(--mid-line); } }
.screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.screen video, .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen .rw { position: absolute; top: 10px; right: 10px; padding: 0.3rem 0.6rem; background: var(--signal); color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.screen .rw.on { opacity: 1; transform: none; }
/* the player the visitor drives */
.screen { user-select: none; }
.screen video { cursor: pointer; }
.screen__play {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 0.9rem;
  border: 0; padding: 0; background: rgba(26, 27, 33, .28); color: #fff; cursor: pointer;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.screen__play:hover { background: rgba(26, 27, 33, .4); }
.screen__play .dot { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--signal); box-shadow: 0 10px 30px rgba(255, 68, 23, .35); transition: transform .25s var(--ease-out); }
.screen__play:hover .dot { transform: scale(1.06); }
.screen__play .dot svg { width: 22px; height: 22px; margin-left: 3px; }
.screen__play .txt { padding: 0.35rem 0.7rem; background: rgba(26, 27, 33, .78); font-size: 0.9375rem; }
.app.is-playing .screen__play { opacity: 0; pointer-events: none; }
.screen__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0.6rem;
  padding: 1.6rem 0.6rem 0.55rem; background: linear-gradient(to top, rgba(26, 27, 33, .82), rgba(26, 27, 33, 0));
  color: #fff;
}
.screen__bar .grow { flex: 1; }
.screen__bar .time { font-size: 0.8125rem; color: rgba(255, 255, 255, .9); }
.screen__bar .icon { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; cursor: pointer; transition: color .2s; }
.screen__bar .icon:hover { color: var(--signal); }
.screen__bar .icon svg { width: 18px; height: 18px; }
.speed { display: inline-flex; border: 1px solid rgba(255, 255, 255, .28); }
.speed button { height: 28px; min-width: 36px; padding: 0 0.45rem; border: 0; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; font-size: 0.8125rem; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.speed button + button { border-left: 1px solid rgba(255, 255, 255, .28); }
.speed button:hover { color: var(--signal); }
.speed button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.screen.is-full { display: grid; place-items: center; background: #000; }
.screen.is-full video { object-fit: contain; }
.screen .rw { z-index: 3; }
/* the example session, labelled on the video itself (the header label is hidden on small screens) */
.screen__badge {
  position: absolute; top: 10px; left: 10px; z-index: 4; display: none; align-items: center; gap: 0.5rem;
  height: 28px; padding: 0 0.6rem; border: 0; background: rgba(26, 27, 33, .82); color: #fff; cursor: pointer;
}
.screen__badge svg { width: 10px; height: 10px; }
.screen__badge:hover:not(:disabled) { color: var(--signal); }
.screen__badge:disabled { cursor: default; }
.screen__badge:disabled svg { display: none; }
.app.is-example .screen__badge { display: inline-flex; }
.app.is-example .screen__bar { display: none; }
.screen__try {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; display: none; align-items: center; gap: 0.5rem;
  height: 40px; padding: 0 1rem; border: 0; background: var(--signal); color: #fff; cursor: pointer;
  font-weight: 500; font-size: 0.9375rem; transition: background-color .2s, color .2s;
}
.screen__try svg { width: 12px; height: 12px; }
.screen__try:hover { background: #fff; color: var(--ink); }
.screen__try .sm { display: none; }
.app.is-example.is-playing .screen__try { display: inline-flex; }
/* the score on the video, wherever the panel is not beside it */
.screen__score {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: none; align-items: center; gap: 0.5rem;
  max-width: calc(100% - 20px); padding: 3px 3px 3px 3px; background: rgba(26, 27, 33, .86); color: #fff;
  font-size: 0.8125rem; line-height: 1.2; pointer-events: none;
}
.screen__score b { flex: none; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 15px; display: grid; place-items: center; background: var(--signal); color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.screen__score span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 0; opacity: 0; transition: max-width .35s var(--ease), opacity .3s, margin .3s; }
.screen__score.flash span { max-width: 16rem; opacity: 1; margin-right: 0.45rem; }
.app.is-example .screen__score { top: auto; right: auto; left: 10px; bottom: 12px; max-width: calc(100% - 20px - 10.5rem); }
/* finished: the score moves out of the way of the invitation */
.app.is-example.is-done .screen__score { top: 10px; right: 10px; bottom: auto; left: auto; max-width: calc(100% - 20px); }
.app.is-done .screen__score span { display: none; }
@media (max-width: 980px) {
  .screen__score { display: flex; }
  .screen .rw { display: none; }
  /* until the visitor takes over, the phone shows the essentials: video, score, reasons */
  .app.is-example .att, .app.is-example .ctarow, .app.is-example .log { display: none; }
}
@media (max-width: 520px) {
  .screen__try .lg { display: none; }
  .screen__try .sm { display: inline; }
  .app.is-example .screen__score { max-width: calc(100% - 20px - 7rem); }
}
.tl__track { cursor: pointer; touch-action: none; }
.tl__track:focus-visible { outline-offset: 2px; }
.ctarow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding-top: 0.2rem; }
.ctarow span { color: var(--mid-dim); font-size: 0.8125rem; }
.ctarow .btn:disabled { background: var(--signal); color: #fff; cursor: default; }
/* what VUMO recorded, newest first */
.log { display: grid; gap: 0.55rem; }
.log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-height: 13.2rem; align-content: start; }
.log li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; padding: 0.42rem 0; border-top: 1px solid var(--mid-line); font-size: 0.875rem; color: var(--mid-text); opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.log li.on { opacity: 1; transform: none; }
.log li:first-child { color: #fff; }
.log li .num:first-child { color: var(--mid-dim); font-size: 0.8125rem; }
.log li b { color: var(--signal); font-weight: 500; font-size: 0.8125rem; }
@media (max-width: 520px) { .screen__play .txt { font-size: 0.8125rem; } .screen__play .dot { width: 54px; height: 54px; } }
.tl { display: grid; gap: 0.5rem; }
.tl__track { position: relative; height: 36px; overflow: hidden; background: rgba(255, 255, 255, .04); display: grid; }
.tl__heat { position: absolute; inset: 0; display: flex; }
.tl__heat i { flex: 1; background: var(--signal); opacity: 0; transition: opacity .25s linear; }
.tl__secs { position: absolute; inset: 0; display: grid; }
.tl__secs b { border-right: 1px solid rgba(26, 27, 33, .95); display: flex; align-items: flex-end; padding: 0 0.4rem 0.3rem; font-weight: 500; color: rgba(242, 242, 242, .78); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; white-space: nowrap; }
.tl__secs b:last-child { border-right: 0; }
.tl__secs .sm { display: none; }
.tl__secs b.is-short .lg { display: none; }
.tl__secs b.is-short .sm { display: inline; }
.tl__head { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; left: 0; box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.tl__legend { display: flex; justify-content: space-between; gap: 0.75rem; color: var(--mid-dim); white-space: nowrap; }
.tl__legend .sm { display: none; }
@media (max-width: 520px) { .tl__legend .lg { display: none; } .tl__legend .sm { display: inline; } }
.att { display: grid; gap: 0.5rem; }
.att__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 3.4rem; align-items: center; gap: 0.8rem; font-size: 0.875rem; color: var(--mid-dim); }
@media (max-width: 520px) { .att__row { grid-template-columns: 7rem minmax(0, 1fr) 3rem; } }
.att__bar { height: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.att__bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .3s linear; }
.att__row .num { text-align: right; color: var(--mid-text); font-size: 0.875rem; }
.att__row.is-top { color: var(--mid-text); }
.app__right { padding: 1rem 1.1rem 1.1rem; display: grid; gap: 1rem; align-content: start; }
.who { display: flex; align-items: center; gap: 0.85rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mid-3); color: var(--mid-text); font-weight: 500; flex: none; }
.who .n { font-weight: 500; color: #fff; }
.who .m { color: var(--mid-dim); font-size: 0.8125rem; }
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 0.8rem 1rem; background: rgba(255, 255, 255, .035); border: 1px solid var(--mid-line); }
.ring { width: 78px; height: 78px; position: relative; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { stroke: rgba(255, 255, 255, .08); }
.ring .fg { stroke: var(--signal); transition: stroke-dashoffset .6s var(--ease-out); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 400; font-size: 1.6rem; color: #fff; font-variant-numeric: tabular-nums; }
.score .k { color: var(--mid-dim); }
.score .v { color: #fff; font-weight: 500; font-size: 1.05rem; margin-top: 0.15rem; }
.why { display: grid; gap: 0.55rem; }
.why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; min-height: 6.4rem; align-content: start; }
.why li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; color: var(--mid-text); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.why li.on { opacity: 1; transform: none; }
.why li svg { width: 16px; height: 16px; color: var(--signal); flex: none; }
.why .label, .log .label { color: var(--mid-dim); }
.app__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-top: 1px solid var(--mid-line); color: var(--mid-dim); }
.tracked { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.75rem; border-top: 1px solid var(--mid-line); }
@media (max-width: 900px) { .tracked { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tracked div { display: grid; gap: 0.3rem; }
.tracked b { color: #fff; font-size: 1rem; }
.tracked span { color: var(--mid-dim); font-size: var(--fs-small); }
.privacy { margin-top: 1.4rem; color: var(--mid-dim); font-size: var(--fs-small); }

/* ---------- why VUMO: a dealer's week, today and with VUMO ---------- */
.shift { list-style: none; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.shift li { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem clamp(1.25rem, 3vw, 3rem); align-items: start; padding: clamp(1.25rem, 2.4vw, 1.9rem) 0; border-bottom: 1px solid var(--line); }
.shift__k { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.shift p { display: grid; gap: 0.45rem; font-size: 1.0625rem; line-height: 1.45; }
.shift p .label { font-size: 0.6875rem; }
.shift__was { color: var(--muted); }
.shift__was .label { color: var(--muted); }
.shift__now { color: var(--ink); padding-left: 1rem; border-left: 2px solid var(--signal); }
.shift__now .label { color: var(--ink); }
@media (max-width: 800px) {
  .shift li { grid-template-columns: 1fr; gap: 0.85rem; }
  .shift__now { padding-left: 0.85rem; }
}
.backing { margin-top: clamp(2rem, 4vw, 3rem); max-width: 50rem; }
.voice { margin: 0; display: grid; gap: 0.8rem; }
.voice blockquote { margin: 0; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
.voice figcaption { color: var(--muted); font-size: var(--fs-small); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.stats li { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; background: var(--paper); }
.stats b { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.stats span { color: var(--muted); font-size: var(--fs-small); }

/* ---------- questions ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }
.faq__list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0.1rem; font-weight: 400; font-size: 1.125rem; color: var(--ink); transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--signal); }
.faq details p { padding: 0 0.1rem 1.3rem; max-width: 62ch; color: var(--ink-2); }

/* ---------- final CTA + form ---------- */
.field { display: grid; gap: 0.35rem; }
.field label { color: var(--mid-dim); font-size: 0.8125rem; }
.field input, .field select {
  height: 46px; padding: 0 0.85rem; border-radius: 0;
  background: var(--mid); border: 1px solid var(--mid-line-2); color: #fff;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mid-muted) 50%), linear-gradient(135deg, var(--mid-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.field input:focus, .field select:focus { outline: none; border-color: var(--signal); }

.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 960px) { .cta__grid { grid-template-columns: 1fr; } }
.cta h2 { max-width: 14ch; }
.cta .lede { margin-top: 1.2rem; }
form.demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--mid-2); border: 1px solid var(--mid-line); }
@media (max-width: 520px) { form.demo { grid-template-columns: 1fr; } }
form.demo .full { grid-column: 1 / -1; }
form.demo .btn { justify-self: start; }
/* a long label (Polish: "Chcę darmową wideoprezentację") wraps instead of widening the page */
@media (max-width: 520px) { form.demo .btn { white-space: normal; height: auto; min-height: 52px; padding-block: 0.75rem; text-align: left; } }
form.demo .note { color: var(--mid-dim); font-size: 0.8125rem; }
form.demo .note a { color: var(--mid-muted); }
form.demo .note a:hover { color: var(--signal); }
form.demo .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field .opt { color: var(--mid-dim); }
.field input::placeholder { color: var(--mid-dim); }
form.demo .check { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; color: var(--mid-muted); font-size: 0.9375rem; cursor: pointer; }
form.demo .check input { width: 20px; height: 20px; margin: 0; accent-color: #fff; flex: none; }
.nojs-msg { display: none; margin-top: 1rem; padding: 1rem 1.2rem; background: var(--mid-2); border: 1px solid var(--mid-line); color: var(--mid-muted); }
.nojs-msg b { color: #fff; font-weight: 500; }
.nojs-msg.is-err b { color: #ff8a6b; }
.nojs-msg:target { display: block; }
form.demo { position: relative; }
form.demo.is-sending .btn { opacity: .6; cursor: progress; }
.done b:focus { outline: none; }
form.demo .err { color: #ff8a6b; font-size: 0.8125rem; min-height: 1.1em; }
form.demo .done { grid-column: 1 / -1; display: none; gap: 0.5rem; }
form.demo.is-sent > :not(.done) { display: none; }
form.demo.is-sent .done { display: grid; }
.done b { color: #fff; font-size: 1.3rem; font-weight: 400; }
.done span { color: var(--mid-muted); }

/* ---------- footer ---------- */
.foot { padding-block: 3rem; border-top: 1px solid var(--mid-line); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; }
.foot .brand svg { height: 18px; }
.foot .tag { color: var(--signal); font-size: 1rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.foot nav a { white-space: nowrap; display: inline-block; padding-block: 0.7rem; }
.foot a { text-decoration: none; color: var(--mid-dim); font-size: 0.875rem; transition: color .2s; }
.foot a:hover { color: var(--signal); }
.foot .langs { display: flex; gap: 0.25rem; }
.foot .langs a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--mid-dim); }
.foot .langs a[aria-current="page"] { color: #fff; }
.foot small { color: var(--mid-dim); font-size: 0.8125rem; display: block; max-width: 60ch; }

/* ---------- lightbox ---------- */
dialog.lb { padding: 0; border: 0; background: transparent; width: min(92vw, 1180px); max-height: 92vh; overflow: visible; }
dialog.lb::backdrop { background: rgba(10, 10, 12, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb__frame { position: relative; aspect-ratio: 1280 / 704; overflow: hidden; background: #000; }
.lb__frame video { width: 100%; height: 100%; }
.lb__close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--signal); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb__close svg { width: 18px; height: 18px; }
.lb__cap { margin-top: 0.8rem; color: rgba(255, 255, 255, .72); font-size: 0.875rem; }

/* ---------- reveal on view ----------
   Movement only, never opacity: every word on the page is readable at rest, before any
   observer has fired, in a full-page screenshot, and with scripts off. */
.rise { transition: transform 1s var(--ease-out); }
.js .rise:not(.in) { transform: translateY(22px); }
@media (prefers-reduced-motion: reduce) {
  .js .rise:not(.in) { transform: none; }
  .rise, .why li, .log li { transition: none !important; }
  .live i, .soundbtn, .eq i { animation: none !important; }
  .eq i { height: 70%; }
}