/* ==========================================================================
   PROFILIFT — site stylesheet (all pages)
   Run 3: final logo palette (sampled with Pillow, k-means k=4 — see REPORT-run3.md),
   Montserrat (display) + Inter (UI), self-hosted since Run 4. Run 5: one motif — the emblems' blue→orange arc,
   as a straight gradient (the slant belonged to the retired logo).
   Order: tokens · base · controls · layout · navbar · dock · hero · home sections ·
   inner pages · machine page · forms · footer · floating UI · responsive · LAST-WINS
   ========================================================================== */

/* ---------- fonts: self-hosted (Run 4 D1) — variable woff2, latin + latin-ext (Serbian diacritics live in latin-ext).
   Inter and Montserrat are SIL Open Font License 1.1 (assets/fonts/OFL-*.txt). The "… Fallback" faces are Arial
   with size/ascent/descent overrides measured from the real fonts (fontTools), so the swap barely moves text. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/montserrat-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../assets/fonts/montserrat-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; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../assets/fonts/inter-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; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 105.1%; ascent-override: 92.17%; descent-override: 22.95%; line-gap-override: 0%; }
/* Run 5: one fallback face per weight band — width ratios measured in the browser (Montserrat vs Arial / Arial Bold);
   a single 600-weight face made Light (300) hero titles 3.5 % too wide and wrap until the swap (CLS). */
@font-face { font-family: "Montserrat Fallback"; font-weight: 100 349; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 110.41%; ascent-override: 87.67%; descent-override: 22.73%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; font-weight: 350 549; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 113.90%; ascent-override: 84.99%; descent-override: 22.04%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; font-weight: 550 649; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); size-adjust: 107.19%; ascent-override: 90.31%; descent-override: 23.42%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; font-weight: 650 749; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); size-adjust: 109.36%; ascent-override: 88.51%; descent-override: 22.95%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; font-weight: 750 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"); size-adjust: 111.68%; ascent-override: 86.68%; descent-override: 22.47%; line-gap-override: 0%; }

:root {
  /* — brand (Run 5: sampled from the four context logos with Pillow, k-means k=6 — see REPORT-run5.md) — */
  --navy: #031731;          /* universal logo: the navy plate/outline cluster (46 % of opaque pixels) */
  --navy-900: #020E1E;      /* navy at 62 % lightness — dark surfaces */
  --navy-950: #010A16;      /* deepest navy — dark-theme footer */
  --navy-800: #082346;
  --navy-700: #0F2F58;
  --blue: #13B3F6;          /* the emblems' arc blue (mean of three clusters, hue 198°) */
  --blue-600: #0175EA;      /* deep end of the universal LIFT gradient — the light-theme wordmark only */
  --blue-ink: #0676A5;      /* arc hue darkened to 4.76:1 on --surface (fixed in both themes) */
  --blue-700: var(--blue-ink);   /* text/links on light */
  --blue-300: #8AD7FA;
  --orange: #F38404;        /* the arc orange: midpoint of the sampled gradient (deep #EB5C02 → amber #FBAC06) */
  --orange-deep: #EB5C02;
  --orange-700: #A75A03;    /* arc hue darkened to 4.80:1 on --surface — orange text on light */
  --orange-text: #C74B00;   /* upgrade: the arc orange deepened to 4.74:1 on white — SMALL price text on light (< 18.7 px bold) */
  --orange-300: #F9B868;
  --amber: #FBAC06;         /* warm highlight of the arc — tiny accents only (dots, the progress line's end), never text */
  --silver: #BDD0D7;        /* the wordmark's cool silver — dark-theme secondary text */
  --grad: linear-gradient(90deg, var(--blue), var(--orange));   /* the emblem's arc, as an accent */
  --white: #FFFFFF;
  --black: #000000;
  --on-dark: #EAF1FA;       /* text on navy surfaces */
  --photo-bg: #F5F8FC;      /* behind product photos (they are shot on white) — light in both themes */

  /* — neutrals (light) — */
  --ink: #0A1628;
  --muted: #56677C;
  --surface: #F5F8FC;
  --page-bg: #EEF2F7;
  --card: #FFFFFF;
  --panel: #FFFFFF;
  --field: #FFFFFF;
  --seg: #EDF1F7;
  --line: rgba(3, 23, 49, .10);
  --line-strong: rgba(3, 23, 49, .18);
  --tint: rgba(19, 179, 246, .10);
  --link: var(--blue-700);
  --price: var(--orange-deep);       /* upgrade (client: prices orange as in the dark theme): large price figures, 3.46:1 on white / 3.08:1 on --page-bg (WCAG large text) */
  --price-sm: var(--orange-text);    /* small price text: 4.74:1 on white */
  --pi-ink: var(--navy);             /* navy parts of pictograms */
  --pi-b: var(--blue);
  --pi-o: var(--orange);
  --frame-a: #2B2F36;                /* neutral device frame (homepage hero) */
  --frame-b: #15181D;
  --light-hover: #E3F5FE;            /* --blue at 12 % on white */

  --glass: rgba(255, 255, 255, .62);
  --glass-strong: rgba(255, 255, 255, .88);
  --glass-border: rgba(255, 255, 255, .7);
  --muted-on-glass: #2B3A4E;

  --btn-bg: var(--navy);
  --btn-fg: #FFFFFF;
  --btn-hover: var(--navy-700);
  --err: #C2362F;
  --ok: #1E8A55;

  --shadow-card: 0 20px 50px rgba(2, 14, 30, .16);
  --shadow-soft: 0 10px 30px rgba(2, 14, 30, .10);
  --shadow-rest: 0 1px 2px rgba(2, 14, 30, .04), 0 8px 24px rgba(2, 14, 30, .05);

  --r-device: 42px;
  --r-screen: 34px;
  --r-section: 32px;
  --r-media: 22px;
  --r-card: 20px;
  --r-sm: 16px;
  --r-xs: 12px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --font-sys: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", "Montserrat Fallback", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-ui: "Inter", "Inter Fallback", var(--font-sys);

  --pad: 18px;
  --nav-h: 72px;            /* Run 6: holds the 56 px emblem */
  --nav-offset: 104px;
  --sec-y: 96px;
  --wrap: 1180px;
}

[data-theme="dark"] {
  --ink: var(--on-dark);
  --muted: var(--silver);
  --surface: #031428;               /* between --navy-900 and --navy */
  --page-bg: var(--navy-900);        /* E4: body on --navy-900 */
  --card: #091F3D;                   /* --navy lifted 3.5 % */
  --panel: #0B2446;
  --field: #061830;
  --seg: rgba(255, 255, 255, .06);
  --line: rgba(189, 208, 215, .12);  /* --silver / 12 */
  --line-strong: rgba(189, 208, 215, .22);
  --tint: rgba(19, 179, 246, .14);
  --link: var(--blue);
  --price: var(--orange);
  --price-sm: var(--orange);         /* 6.36:1 on --card */
  --pi-ink: var(--on-dark);
  --blue-700: var(--blue);
  --orange-700: var(--orange);
  --glass: rgba(3, 23, 49, .58);
  --glass-strong: rgba(9, 31, 61, .9);
  --glass-border: rgba(189, 208, 215, .14);
  --muted-on-glass: var(--silver);
  --btn-bg: var(--blue);
  --btn-fg: var(--navy-900);
  --btn-hover: var(--blue-300);
  --err: #FF8E86;
  --ok: #5FD39A;
  --light-hover: #DDF2FD;
  --shadow-card: 0 20px 50px rgba(0, 0, 0, .45);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px rgba(0, 0, 0, .22);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-offset); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--page-bg); color: var(--ink);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: var(--navy-900); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.i { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 18px; height: 18px; }
.i--xs { width: 14px; height: 14px; stroke-width: 1.8; }
.pi { width: 56px; height: 56px; flex: none; color: var(--pi-ink); }
.pi .pi-o { transition: fill .25s var(--ease); }

.micro { font: 500 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.tm { position: relative; top: -.9em; margin-left: 2px; font: 600 9px/1 var(--font-ui); letter-spacing: .04em; color: var(--navy); opacity: .7; }
[data-theme="dark"] .tm, .on-dark .tm { color: var(--white); }
.link { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- controls ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px; border: 0;
  font: 600 14px/1 var(--font-ui); white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), translate .3s var(--ease);
}
.btn--navy { background: var(--btn-bg); color: var(--btn-fg); }
.btn--navy:hover { background: var(--btn-hover); }
.btn--navy::after { /* hover sheen: the emblem's arc gradient sweeping across (straight, no slant) */
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(19, 179, 246, .38), rgba(243, 132, 4, .38), transparent);
  transform: translateX(0); opacity: 0;
}
.btn--navy:hover::after { opacity: 1; transform: translateX(400%); transition: transform .8s var(--ease), opacity .2s; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { background: var(--tint); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--light-hover); }
.btn--glass { background: rgba(255, 255, 255, .1); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.btn--glass:hover { background: rgba(255, 255, 255, .18); }
.btn--lg { height: 56px; padding: 0 32px; font-size: 15px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 13px; gap: 6px; }
.btn--block { display: flex; width: 100%; }
.btn .i { width: 18px; height: 18px; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: -12px 0 0 currentColor, 12px 0 0 currentColor; animation: dots .9s ease-in-out infinite;
}
@keyframes dots { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.round-btn {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; padding: 0;
  display: inline-grid; place-items: center;
  transition: background-color .25s var(--ease), color .25s var(--ease), translate .3s var(--ease);
}
.round-btn .i { width: 18px; height: 18px; stroke-width: 1.8; }
.round-btn--navy { background: var(--btn-bg); color: var(--btn-fg); }
.round-btn--navy:hover { background: var(--blue); color: var(--white); }
[data-theme="dark"] .round-btn--navy:hover { background: var(--blue-300); color: var(--navy-900); }
.round-btn--white { width: 44px; height: 44px; background: var(--white); color: var(--navy); box-shadow: 0 4px 14px rgba(2, 14, 30, .1); }
.round-btn--white:hover { color: var(--blue-700); translate: 0 -1px; }
[data-theme="dark"] .round-btn--white { color: var(--navy); }
[data-theme="dark"] .round-btn--white:hover { color: var(--blue-ink); }
.round-btn--glass { width: 44px; height: 44px; background: rgba(255, 255, 255, .12); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.round-btn--glass:hover { background: rgba(255, 255, 255, .24); }
.round-btn--line { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.round-btn--line:hover { color: var(--link); box-shadow: inset 0 0 0 1px var(--blue); }
.round-btn[disabled] { opacity: .35; pointer-events: none; }

.icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--ink);
  display: inline-grid; place-items: center; transition: background-color .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { background: var(--tint); }
.i--sun { display: none; }
[data-theme="dark"] .i--sun { display: block; }
[data-theme="dark"] .i--moon { display: none; }

.lang-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--seg); }
.lang-switch__btn {
  width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; padding: 0;
  font: 600 12px/1 var(--font-ui); letter-spacing: .04em; color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.lang-switch__btn[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }

/* chip filters (program chips, filter chips) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 0; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong);
  font: 600 13px/1.2 var(--font-ui); white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--btn-bg); color: var(--btn-fg); box-shadow: none; }
.chip__count { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count, .chip.is-on .chip__count { opacity: 1; }

.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--seg); color: var(--ink); font: 600 12px/1 var(--font-ui); white-space: nowrap; }
.tag--ask { background: var(--seg); color: var(--muted); }

/* ---------- layout ---------- */
.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }
.section { position: relative; padding: var(--sec-y) 0; }
.section--white { background: var(--card); }
.section--tight { padding: 64px 0; }

/* navy band — straight edges (Run 5); the background lives on the pseudo-element (sections are observed) */
.band { position: relative; isolation: isolate; padding: var(--sec-y) 0; color: var(--on-dark); }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(700px circle at 88% 18%, rgba(19, 179, 246, .16), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 70%);
}
.band::after { /* a thin arc-gradient line on the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: -1; pointer-events: none;
  background: var(--grad);
}
[data-theme="dark"] .band::before { background: radial-gradient(700px circle at 88% 18%, rgba(19, 179, 246, .14), transparent 60%), linear-gradient(160deg, var(--navy-800) 0%, var(--page-bg) 70%); }
.band .sec-head :is(h2, h3) { color: var(--white); }
.band .sec-lead, .band .muted { color: rgba(234, 241, 250, .78); }
.band .eyebrow { color: var(--blue); }

.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.eyebrow { display: block; font: 600 12px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .14em; color: var(--blue-700); }
.sec-head h2, .h2 {
  margin-top: 12px; font: 600 clamp(28px, 3.2vw, 44px)/1.12 var(--font-display); letter-spacing: -.015em; color: var(--ink);
}
.sec-head h2::after, .h2--ribbon::after { /* 48×4 bar in the emblem's arc gradient (Run 5: no skew) */
  content: ""; display: block; width: 48px; height: 4px; margin-top: 16px; border-radius: 2px;
  background: var(--grad);
}
.sec-lead { margin-top: 16px; max-width: 60ch; font: 400 17px/1.6 var(--font-ui); color: var(--muted); }
.sec-foot { display: flex; justify-content: center; margin-top: 40px; }

/* reveal (no clip-path on observed elements) */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease) calc(var(--i, 0) * 60ms), transform .7s var(--ease) calc(var(--i, 0) * 60ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal].is-done { transition-delay: 0s; }

/* ==========================================================================
   NAVBAR + MEGA MENU
   ========================================================================== */
/* one component, three modes (tools/templates/partials/navbar.html):
   --hero (inside the homepage device) · --sticky (homepage, after the hero) · --page (inner pages).
   Grid 1fr auto 1fr: the link group is the auto column, so it stays centred in the bar whatever
   the widths of the logo (left) and the tools (right). The side columns never shrink below their content
   (stage 7): with longer labels the links move off-centre instead of sliding under the tools. */
.navbar {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; pointer-events: none;
  --nav-ink: var(--navy);
}
[data-theme="dark"] .navbar { --nav-ink: var(--on-dark); }
.navbar--sticky { transform: translateY(calc(-100% - 24px)); visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
.navbar--sticky.is-visible { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.navbar__pill {
  position: relative; pointer-events: auto;
  width: calc(100% - var(--pad) * 2); height: var(--nav-h);
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 16px;
  padding: 0 10px; border-radius: 999px;   /* symmetric, so the centre column is the bar's centre */
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
}
[data-theme="dark"] .navbar__pill { border-color: rgba(255, 255, 255, .1); }
.navbar--hero { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 6; display: block; }
.navbar--hero .navbar__pill { width: 100%; height: var(--nav-h); }
.navbar__left { display: flex; align-items: center; min-width: 0; padding-left: 14px; }
.navbar__links { position: relative; display: flex; align-items: center; gap: 2px; height: 100%; }
.navbar__link {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border: 0; background: none; border-radius: 999px;
  font: 500 15px/1 var(--font-display); color: var(--nav-ink); white-space: nowrap; transition: color .2s;
}
.navbar__link:hover, .navbar__link[aria-expanded="true"] { color: var(--link); }
.navbar__link .i { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.navbar__link[aria-expanded="true"] .i { transform: rotate(180deg); }
.navbar__ind { /* the sliding 2px underline: sits under the current page, follows hover/focus */
  position: absolute; left: 0; top: calc(50% + 13px); height: 2px; width: var(--w, 0); border-radius: 2px;
  background: var(--blue); transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none;
  transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s var(--ease);
}
.navbar__ind.is-on { opacity: 1; }
.navbar__ind.no-anim { transition: none; }
html:not(.js) .navbar__link[aria-current="page"] { text-decoration: underline 2px var(--blue); text-underline-offset: 10px; }
.navbar__tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.navbar__ig { display: flex; gap: 6px; }
.navbar__igbtn { width: 36px; height: 36px; color: var(--nav-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.navbar__igbtn .i { width: 18px; height: 18px; }
.navbar__igbtn:hover { color: var(--link); box-shadow: inset 0 0 0 1px var(--blue); background: transparent; }
.navbar .lang-switch__btn { width: 34px; height: 34px; }
.navbar__theme { width: 40px; height: 40px; color: var(--nav-ink); }
.ig-pop { position: relative; display: none; }
.ig-pop__btn { width: 36px; height: 36px; color: var(--nav-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ig-pop__btn .i { width: 18px; height: 18px; }
.ig-pop__btn[aria-expanded="true"] > .tip { opacity: 0; }
.ig-pop__panel {
  position: absolute; right: -8px; top: calc(100% + 12px); z-index: 61; display: grid; gap: 2px; min-width: 248px; padding: 8px;
  border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(2, 14, 30, .22);
}
.ig-pop__panel a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--r-xs); font: 600 14px/1.2 var(--font-ui); color: var(--ink); }
.ig-pop__panel a .i { color: var(--blue-700); }
.ig-pop__panel a:hover, .ig-pop__panel a:focus-visible { background: var(--tint); color: var(--link); }
.btn--phone {
  height: 44px; padding: 0 18px 0 16px; gap: 8px; background: var(--navy); color: var(--white);
  font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn--phone .i { width: 18px; height: 18px; }
.btn--phone:hover { background: var(--blue); color: var(--navy-900); }
[data-theme="dark"] .btn--phone { background: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.navbar__burger { display: none; color: var(--nav-ink); }
.navbar__progress { position: absolute; left: 32px; right: 32px; bottom: 0; height: 2px; overflow: hidden; border-radius: 2px; pointer-events: none; }
.navbar__progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue) 85%, var(--orange)); transform-origin: left; transform: scaleX(var(--p, 0)); }

.tip {
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 5;
  transform: translate(-50%, -4px);
  padding: 6px 10px; border-radius: 8px;
  background: var(--navy); color: var(--white);
  font: 500 12px/1.2 var(--font-ui); white-space: nowrap; letter-spacing: 0; text-transform: none;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: 0 6px 18px rgba(2, 14, 30, .2);
}
[data-theme="dark"] .tip { background: var(--on-dark); color: var(--navy-900); }
:is(a, button):hover > .tip, :is(a, button):focus-visible > .tip { opacity: 1; transform: translate(-50%, 0); }

.mega { position: static; }
.mega__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60;
  width: min(1000px, calc(100vw - 48px)); transform: translate(-50%, -6px);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0;
  border-radius: var(--r-media); overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(2, 14, 30, .22);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.mega.is-open .mega__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s; }
.mega__cats { padding: 24px; }
.mega__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mega__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.mega__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: var(--r-xs); color: var(--ink); }
.mega__item .pi { width: 40px; height: 40px; }
.mega__item b { display: block; font: 600 14px/1.25 var(--font-ui); }
.mega__item small { display: block; font: 400 12px/1.3 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.mega__item:hover, .mega__item:focus-visible { background: var(--tint); }
.mega__item:hover b { color: var(--link); }
.mega__item:hover .pi { --pi-o: var(--amber); }
.mega__side { padding: 24px; background: var(--surface); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.mega__side .micro { padding: 0 8px 8px; }
.mega__signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mega__signs .mega__sign { flex-direction: column; justify-content: center; gap: 4px; min-height: 80px; padding: 8px 4px; text-align: center; }
.mega__signs .mega__sign .pi { width: 36px; height: 36px; }
.mega__signs .mega__sign b { font-size: 12px; }
.mega__pv { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 200px; margin: 4px 0; padding: 20px; border-radius: var(--r-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.mega__pv-icon .pi { width: 72px; height: 72px; }
.mega__pv-name { margin-top: 8px; font: 600 18px/1.25 var(--font-display); color: var(--ink); }
.mega__pv-meta { font: 600 13px/1.35 var(--font-ui); color: var(--price-sm); font-variant-numeric: tabular-nums; }
.mega__pv-line { font: 400 14px/1.5 var(--font-ui); color: var(--muted); }
.mega__pv.is-swap > * { animation: pvIn .28s var(--ease) both; }
@keyframes pvIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mega__sign { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.mega__sign .pi { width: 48px; height: 48px; }
.mega__sign b { font: 600 14px/1.25 var(--font-ui); }
.mega__sign:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.mega__sign:hover b { color: var(--link); }
.mega__service { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 16px 12px; border-radius: var(--r-sm); background: var(--navy); color: var(--white); font: 600 14px/1.3 var(--font-ui); }
.mega__service .i { color: var(--orange); }
.mega__service:hover { background: var(--navy-700); }

/* mobile sheet */
.mobile-menu {
  position: fixed; inset: 0; z-index: 120; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background: var(--panel); opacity: 0; transition: opacity .3s var(--ease);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.mobile-menu__links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mobile-menu__links > a, .acc__btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0 8px;
  border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left;
  font: 600 22px/1.2 var(--font-display); color: var(--ink);
}
.acc__btn .i { transition: transform .3s var(--ease); }
.acc__btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.acc__panel { padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
.acc__panel .mega__list { grid-template-columns: 1fr; }
.acc__signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.acc__signs .mega__sign { flex-direction: column; justify-content: center; gap: 4px; text-align: center; padding: 8px 4px; }
.acc__signs .mega__sign b { font-size: 13px; }
.mobile-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }

/* ==========================================================================
   DOCK — fixed left rail (desktop) / bottom bar (mobile)
   ========================================================================== */
.dock {
  /* centred in the window, but never above the bottom of the header (stage 7): the rail shares its x range with the
     logo, so on short laptop windows a plain 50 % centre slid it over the logo. Header bottom = the homepage bar
     (pad + 9 px frame + 18 px + bar height), the lowest of the three navbar modes. --dock-h = 7 buttons + gaps + rule. */
  --dock-h: 355px;
  position: fixed; left: calc(var(--pad) + 9px); z-index: 45;
  top: max(calc(50% - var(--dock-h) / 2), calc(var(--pad) + 27px + var(--nav-h) + 12px));
  width: 58px; padding: 8px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.dock.dock--on-light { border-color: rgba(3, 23, 49, .10); box-shadow: 0 18px 44px rgba(2, 14, 30, .16), 0 2px 6px rgba(2, 14, 30, .05); }
[data-theme="dark"] .dock.dock--on-light { border-color: rgba(255, 255, 255, .14); }
html.has-overlay .dock { opacity: .35; }
.dock__ind {
  position: absolute; left: 0; top: 0; z-index: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--btn-bg); pointer-events: none; opacity: 0;
  transform: translate(var(--ix, 9px), var(--iy, 10px));
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.dock__ind.is-on { opacity: 1; }
.dock__ind.no-anim { transition: none; }
.dock > .dock-btn, .dock > .dock-phone { z-index: 1; }
.dock-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; background: transparent; color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.dock-btn:hover { background: var(--tint); }
.dock-btn.is-active { color: var(--btn-fg); }
.dock-btn.is-active:hover { background: transparent; }
.dock-sep { width: 24px; height: 1px; margin: 0; background: var(--line-strong); }
.dock-phone { position: relative; }
.dock .tip { left: calc(100% + 16px); top: 50%; transform: translate(-4px, -50%); }
.dock :is(a, button):hover > .tip, .dock :is(a, button):focus-visible > .tip { transform: translate(0, -50%); }
.phone-pop {
  position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%);
  width: 264px; padding: 16px; border-radius: var(--r-card); z-index: 12;
  background: var(--panel); color: var(--ink);
  box-shadow: 0 24px 60px rgba(2, 14, 30, .24); border: 1px solid var(--line);
}
.phone-pop__list { display: grid; gap: 4px; margin: 8px 0 12px; }
.phone-list { display: grid; gap: 4px; }
.phone-list a, .phone-pop__list a { display: flex; align-items: center; min-height: 32px; font: 600 15px/1.35 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
.phone-list a:hover, .phone-pop__list a:hover { color: var(--link); }
.phone-pop__hours { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ==========================================================================
   HERO — device frame (composition approved in Runs 1–2)
   ========================================================================== */
.hero { padding: var(--pad); min-height: 100vh; min-height: 100svh; }
/* Stage 7: headline and bottom row are in normal flow (column: bar space · headline · bottom row), so longer
   edited text wraps and pushes the bottom row down / the frame taller instead of sliding under the cards.
   The frame is a window high (min. 640 px) and grows only when its content needs more. */
.device {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100vh - var(--pad) * 2);
  min-height: max(640px, calc(100vh - var(--pad) * 2)); min-height: max(640px, calc(100svh - var(--pad) * 2));
  padding: 9px; border-radius: var(--r-device);
  background: linear-gradient(145deg, var(--frame-a), var(--frame-b));
  box-shadow: 0 30px 80px rgba(2, 14, 30, .35);
}
.device__screen {
  position: relative; flex: 1 0 auto; display: flex; flex-direction: column; padding-top: calc(18px + var(--nav-h));
  border-radius: var(--r-screen); overflow: hidden; isolation: isolate; background: var(--navy); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.hero-slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; z-index: 0; transition: opacity 1.4s ease; }
.slide.is-active { opacity: 1; z-index: 2; }
.slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.hero-slider.is-instant .slide { transition: none !important; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 50% 55%; }
.slide.is-zoom img { animation: kenburns 7.9s linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
.slide::after { /* per-slide layered shade (Run 2 A1) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(2, 14, 30, var(--focus, .34)) 0%, transparent 62%),
    linear-gradient(180deg, rgba(2, 14, 30, var(--shade, .3)) 0%, rgba(2, 14, 30, calc(var(--shade, .3) * .35)) 50%, rgba(2, 14, 30, calc(var(--shade, .3) * 1.2)) 100%),
    linear-gradient(rgba(3, 23, 49, .08), rgba(3, 23, 49, .08));
}

/* headline */
.hero-copy { /* top edge at --copy-top of the window (≈ the former 19 % of the frame), at least 24 px under the bar */
  --copy-top: 19vh;
  position: relative; z-index: 4; align-self: center;
  margin-top: max(24px, calc(var(--copy-top) - 28px - var(--nav-h)));
  display: flex; flex-direction: column; align-items: center; width: max-content; max-width: calc(100% - 180px);
}
.hero-title { /* upgrade: bold; sized by width AND height so short laptop screens get the 90 %-zoom proportions */
  font: 700 clamp(44px, min(5.6vw, 10.5vh), 92px)/1.04 var(--font-display);
  letter-spacing: -.025em; color: var(--white); text-align: center;
  filter: drop-shadow(0 2px 18px rgba(2, 14, 30, .28));
}
.hero-title__line { display: block; text-wrap: balance; }   /* wraps between words when an edited line is wider than the frame allows */
.hero-title .w { display: inline-block; }
.hero-lead {
  align-self: flex-start; max-width: 420px; margin-top: 20px;
  font: 400 15px/1.6 var(--font-ui); color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 12px rgba(2, 14, 30, .4);
}

/* bottom row: finder card left (88 px in, clear of the dock rail), program signs right; wraps when both don't fit */
.hero-bottom {
  position: relative; z-index: 4; margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  padding: 32px 32px 28px 88px;
}

/* bottom-left card: entry to the finder */
.find-card {
  width: 296px; max-width: 100%; padding: 22px; border-radius: var(--r-card);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow-card); color: var(--ink); --muted: var(--muted-on-glass);
}
[data-theme="dark"] .find-card { border: 1px solid var(--glass-border); }
.find-card__title { font: 600 18px/1.25 var(--font-display); letter-spacing: -.01em; }
.find-card__text { margin-top: 8px; font: 400 14px/1.5 var(--font-ui); color: var(--muted); }
.find-card__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; }
.find-card__num { display: block; font: 700 36px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.find-card__stat .micro { display: block; margin-top: 4px; }

/* bottom-right: the three product signs (B3) */
.signs { display: flex; gap: 8px; margin-left: auto; }
.sign-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 112px; height: 104px; padding: 8px; border-radius: var(--r-card);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); color: var(--ink);
  font: 600 13px/1.2 var(--font-ui); transition: translate .3s var(--ease), box-shadow .3s var(--ease);
}
.sign-chip:hover { translate: 0 -4px; box-shadow: var(--shadow-card); }

.slide-ind { position: absolute; left: 50%; bottom: 24px; z-index: 5; display: flex; gap: 8px; transform: translateX(-50%); }
.slide-ind__btn { width: 32px; height: 24px; padding: 11px 0; border: 0; background: none; }
.slide-ind__btn span { position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .38); }
.slide-ind__btn span::after { content: ""; position: absolute; inset: 0; background: var(--white); transform: scaleX(0); transform-origin: left; }
.slide-ind__btn.is-active span::after { animation: slideFill var(--slide-dur, 6.5s) linear forwards; }
.slide-ind.is-held .slide-ind__btn.is-active span::after { animation-play-state: paused; }
@keyframes slideFill { to { transform: scaleX(1); } }

/* hero entrance (no preloader in Run 3: content fades up on first paint) */
html.js .hero-title .w, html.js .hero-lead { opacity: 0; transform: translateY(20px); }
html.js .navbar--hero, html.js .find-card, html.js .signs { opacity: 0; }
html.js .hero.is-entered .hero-title .w { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(var(--i, 0) * 60ms), transform .8s var(--ease) calc(var(--i, 0) * 60ms); }
html.js .hero.is-entered .hero-lead { opacity: 1; transform: none; transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; }
html.js .hero.is-entered :is(.navbar--hero, .find-card, .signs) { opacity: 1; transition: opacity .8s var(--ease) .1s; }

/* ==========================================================================
   HOME SECTIONS
   ========================================================================== */
/* proof row (replaces the trust marquee) */
.proof { padding: 24px 0 0; }
.proof__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-rest); border: 1px solid var(--line); }
.proof__list li { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 72px; padding: 16px; font: 600 15px/1.3 var(--font-ui); color: var(--ink); text-align: left; }
.proof__list li + li { border-left: 1px solid var(--line); }
.proof__list .i { color: var(--blue-700); }

/* two programs */
.programs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.program { display: flex; flex-direction: column; border-radius: var(--r-section); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.program__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--seg); }
.program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.program:hover .program__media img { transform: scale(1.03); }
.program__body { display: flex; flex-direction: column; flex: 1; padding: 32px; }
.program__body h3 { font: 600 24px/1.2 var(--font-display); letter-spacing: -.01em; }
.program__body > p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.program__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 24px 0 32px; }
.program__list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--line); font: 500 15px/1.3 var(--font-ui); color: var(--ink); }
.program__list a:hover { color: var(--link); }
.program__list small { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.program__body .btn { align-self: flex-start; margin-top: auto; }

/* MAŠINE tiles (B6) — 7+6 on wide screens, centred last row */
.tiles-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.tiles { --cols: 7; --gap: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.tile {
  position: relative; flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 16px; border-radius: var(--r-card);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); color: var(--ink);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.tile .pi { width: 56px; height: 56px; }
.tile__name { margin-top: 16px; font: 600 15px/1.25 var(--font-display); letter-spacing: -.005em; }
.tile__count { margin-top: 4px; font: 500 12px/1.3 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.tile:hover { translate: 0 -4px; box-shadow: var(--shadow-card); }
.tile:hover .tile__name { color: var(--link); }
.tile:hover .pi { --pi-o: var(--amber); }
.tile.is-hidden { display: none; }
.tile.is-entering { animation: tileIn .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 30ms); }
@keyframes tileIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* machine card (shared: rails, grids, related) */
.mcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); color: var(--ink);
  transition: translate .35s var(--ease), box-shadow .35s var(--ease);
}
.mcard:hover { translate: 0 -4px; box-shadow: var(--shadow-card); }
.mcard__media { display: block; margin: 8px 8px 0; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--photo-bg); box-shadow: inset 0 0 0 1px rgba(3, 23, 49, .05); }
.mcard__media { position: relative; }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mcard__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease), transform .8s var(--ease) !important; }
.mcard:hover .mcard__alt.is-ready { opacity: 1; }
.mcard:hover .mcard__media img { transform: scale(1.03); }
.mcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 16px; }
.mcard__cat { font: 500 12px/1.3 var(--font-ui); color: var(--muted); }
.mcard__name { margin-top: 4px; font: 600 17px/1.3 var(--font-display); letter-spacing: -.005em; }
.mcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mcard__name a:focus-visible { outline: none; }
.mcard:has(.mcard__name a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.mcard__specs { margin-top: 8px; font: 400 13px/1.5 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.mcard__btn { position: relative; z-index: 2; }
.mcard .price { /* price chip: orange in both themes (upgrade) — small text, so --price-sm */
  display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 12px; border-radius: 999px;
  background: var(--white); color: var(--price-sm); box-shadow: inset 0 0 0 1px rgba(199, 75, 0, .3); font-size: 15px;
}
[data-theme="dark"] .mcard .price { background: rgba(255, 255, 255, .06); color: var(--price-sm); box-shadow: inset 0 0 0 1px rgba(243, 132, 4, .35); }
.mcard .tag--ask { height: 34px; padding: 0 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); }
.price { font: 700 20px/1.1 var(--font-display); color: var(--price); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price small { font: 500 12px/1 var(--font-ui); color: var(--muted); letter-spacing: 0; }
.price__from { font: 500 12px/1 var(--font-ui); color: var(--muted); margin-right: 2px; }

/* featured rail (inside a navy band) */
.rail-nav { display: flex; gap: 8px; }
.rail {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 0 24px;
}
.rail::-webkit-scrollbar { display: none; }
.rail > .mcard { flex: 0 0 296px; scroll-snap-align: start; }
.band .mcard { border-color: transparent; }
[data-theme="dark"] .band .mcard { border-color: rgba(255, 255, 255, .08); }

/* finder */
.finder { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.finder__intro .ticks { display: grid; gap: 12px; margin-top: 24px; }
.ticks li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ink); }
.ticks .i { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--tint); color: var(--blue-700); }
.finder__scope { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.finder__card { padding: 32px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); color: var(--ink); }
.f-ctrl { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.f-ctrl legend, .f-ctrl label.micro { display: flex; align-items: center; gap: 8px; padding: 0; margin-bottom: 8px; }
.f-ctrl__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.f-ctrl__head label.micro { margin-bottom: 0; }
.f-num { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-ui); color: var(--muted); }
.f-num input {
  width: 96px; height: 40px; padding: 0 12px; text-align: right; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--field);
  font: 600 14px var(--font-ui); color: var(--ink); -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums;
}
.f-num input::-webkit-outer-spin-button, .f-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.f-num input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(19, 179, 246, .2); }
input[type="range"] { --fill: 30%; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) var(--fill), var(--line-strong) var(--fill)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line-strong); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--blue); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(19, 179, 246, .18), 0 4px 10px rgba(2, 14, 30, .18); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 2px solid var(--blue); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(19, 179, 246, .35); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--seg); }
.seg label { flex: 1; position: relative; min-width: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 12px; border-radius: 999px; font: 500 13px/1.2 var(--font-ui); color: var(--ink); text-align: center; transition: background-color .25s var(--ease), color .25s var(--ease); }
.seg label:hover span { background: var(--tint); }
.seg input:checked + span { background: var(--btn-bg); color: var(--btn-fg); }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.finder__results { padding-top: 24px; border-top: 1px solid var(--line); }
.finder__results-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.res-list { display: grid; gap: 8px; }
.res-card {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 8px 16px 8px 8px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  animation: resIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms);
}
.res-card img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; background: var(--photo-bg); }
.res-card__name { font: 600 15px/1.3 var(--font-display); overflow-wrap: anywhere; }
.res-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.res-card__meta { margin-top: 2px; font: 400 13px/1.4 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.res-card__score { font: 600 12px/1 var(--font-ui); color: var(--link); white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-empty p { max-width: 46ch; color: var(--muted); }
.res-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@keyframes resIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* why: four stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { padding: 32px 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.stat__num { display: flex; align-items: baseline; gap: 4px; font: 700 clamp(40px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__num--text { font-size: clamp(28px, 2.8vw, 40px); }
.stat__num small { font-size: .45em; font-weight: 600; color: var(--price); letter-spacing: 0; }
.stat h3 { margin-top: 16px; font: 600 16px/1.3 var(--font-ui); }
.stat p { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* video */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.video-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.video-card { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--black); }
.video-card__btn { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; color: var(--white); text-align: left; }
.video-card__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.video-card:hover .video-card__btn img { transform: scale(1.04); }
.video-card__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(2, 14, 30, .8)); }
.video-card__play {
  position: absolute; left: 50%; top: 44%; z-index: 2; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .3s var(--ease);
}
.video-card__play .i { width: 26px; height: 26px; margin-left: 3px; stroke: none; }
.video-card:hover .video-card__play { background: var(--blue); }
.video-card__title { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; font: 600 15px/1.35 var(--font-ui); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* about + contact teasers */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split__media { border-radius: var(--r-section); overflow: hidden; aspect-ratio: 4 / 3; background: var(--seg); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--ink); }
.prose p + p { margin-top: 16px; }
.prose p.muted, .muted { color: var(--muted); }
.prose h2 { margin: 48px 0 16px; font: 600 clamp(24px, 2.4vw, 32px)/1.2 var(--font-display); letter-spacing: -.01em; }
.prose h3 { margin: 32px 0 8px; font: 600 19px/1.3 var(--font-display); }
.prose ul { margin-top: 16px; display: grid; gap: 8px; }
.prose .h2 + p, .prose .h2 + h3 { margin-top: 24px; }
.form-title { font: 600 20px/1.3 var(--font-display); }
.form-title + .form-hint { margin-top: 8px; }
.contact-band__hours { margin-top: 8px; }
.prose ul li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 4px; border-radius: 2px; background: var(--grad); }
.prose a:not(.btn) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.social-links .chip .i { width: 18px; height: 18px; color: var(--blue-700); }

.contact-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; padding: 48px; border-radius: var(--r-section); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.contact-band__big { display: inline-block; margin-top: 16px; font: 700 clamp(28px, 3vw, 40px)/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.contact-band__big:hover { color: var(--link); }
.info-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list li:first-child { padding-top: 0; }
.info-list li:last-child { border-bottom: 0; }
.info-list__icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--blue-700); }
.info-list .micro { margin-bottom: 4px; }
.info-list a, .info-list p:not(.micro) { font: 500 15px/1.5 var(--font-ui); color: var(--ink); }
.info-list a:hover { color: var(--link); }

/* ==========================================================================
   INNER PAGES
   ========================================================================== */
.page-inner main { padding-top: calc(12px + var(--nav-h) + 12px); }
/* page hero — every inner page (Run 4 B): the homepage hero's language in a 32px frame inside the page
   padding. Slider photo + the same layered treatment as .slide::after (per-photo --shade / --focus),
   white text, glass chips. --lift is the per-page-type overlay raise from the legibility gate. */
.phero { padding: 0 var(--pad); --lift: 0; }
.phero__frame {
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  min-height: var(--phero-h, 420px); border-radius: var(--r-section); background: var(--navy-900); color: var(--white);
}
.phero__bg { position: absolute; left: 0; right: 0; top: -64px; bottom: 0; z-index: -1; will-change: transform; }
.phero__bg picture, .phero__img { display: block; width: 100%; height: 100%; }
.phero__bg picture { overflow: hidden; }   /* the zoom stays inside its own frame */
.phero__img { object-fit: cover; object-position: center; transform-origin: 50% 60%; animation: pheroZoom 2.6s cubic-bezier(.2, .6, .2, 1) both; }
@keyframes pheroZoom { from { transform: scale(1); } to { transform: scale(1.04); } }
.phero__bg::after { /* same stack as the homepage slides; the focus ellipse sits behind the text block (bottom-left) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 28% 70%, rgba(2, 14, 30, calc(var(--focus, .34) + var(--lift))) 0%, transparent 70%),
    linear-gradient(180deg, rgba(2, 14, 30, calc(var(--shade, .3) + var(--lift))) 0%, rgba(2, 14, 30, calc((var(--shade, .3) + var(--lift)) * .55)) 45%, rgba(2, 14, 30, calc((var(--shade, .3) + var(--lift)) * 1.5)) 100%),
    linear-gradient(rgba(3, 23, 49, .08), rgba(3, 23, 49, .08));
}
.phero__content { position: relative; display: flex; flex-direction: column; padding: 28px 0 40px; }
.phero__main { margin-top: auto; padding-top: 32px; }
.phero .crumbs ol { color: rgba(255, 255, 255, .8); }
.phero .crumbs a { color: rgba(255, 255, 255, .8); }
.phero .crumbs a:hover { color: var(--white); text-decoration-color: currentColor; }
.phero .crumbs [aria-current] { color: var(--white); }
.phero .crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 6px 0 4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: .8; }
.phero h1 {
  font: 300 clamp(40px, 5vw, 72px)/1.04 var(--font-display); letter-spacing: -.025em; color: var(--white); max-width: 11.85em; /* = 18ch of Montserrat 300; em does not change while the font loads (ch did: CLS) */
  text-shadow: 0 2px 24px rgba(2, 14, 30, .3); overflow-wrap: anywhere;
}
.phero h1::after { /* 48×4 arc-gradient bar */
  content: ""; display: block; width: 48px; height: 4px; margin-top: 20px; border-radius: 2px;
  background: var(--grad);
}
.phero__lead { margin-top: 20px; max-width: 760px; font: 400 17px/1.6 var(--font-ui); color: rgba(255, 255, 255, .85); text-shadow: 0 1px 12px rgba(2, 14, 30, .35); }
.phero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.gchip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: rgba(2, 14, 30, .38); color: var(--white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);   /* dark glass: ≥ 4.5:1 on any photo */
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  font: 600 13px/1.2 var(--font-ui); white-space: nowrap; font-variant-numeric: tabular-nums;
}
a.gchip:hover { background: rgba(2, 14, 30, .55); }
.phero__row { display: flex; align-items: center; gap: 20px; }
.phero__pi { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 8px 24px rgba(2, 14, 30, .25), inset 0 0 0 1px rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.phero__pi .pi { width: 44px; height: 44px; --pi-ink: var(--navy); color: var(--navy); }
.phero__row h1::after { display: none; }
.phero__signs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.phero__sign {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); color: var(--navy); box-shadow: 0 6px 18px rgba(2, 14, 30, .2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 600 13px/1 var(--font-ui);
  transition: translate .3s var(--ease), background-color .2s;
}
.phero__sign:hover { translate: 0 -2px; background: var(--white); }
.phero--listing { --lift: .03; } /* legibility gate: Kontakt lead worst 24px tile 4.26:1 at 1440 with lift 0 */
.phero--category { --phero-h: 380px; }
.phero--machine { --phero-h: 300px; }
.phero--small { --phero-h: 260px; }
.phero--machine h1 { font: 600 clamp(28px, 3.6vw, 48px)/1.08 var(--font-display); letter-spacing: -.02em; max-width: none; }
.phero--machine .phero__lead { margin-top: 12px; font: 500 15px/1.4 var(--font-ui); }
.phero--machine .phero__chips { margin-top: 16px; }
.phero--machine h1::after { margin-top: 14px; }
.phero--machine .phero__content { padding-bottom: 32px; }
.phero--small h1 { font-size: clamp(36px, 4.4vw, 60px); }
.cat-intro { max-width: 760px; margin-bottom: 32px; font: 400 17px/1.7 var(--font-ui); color: var(--muted); }
.cat-intro--lead { display: none; color: var(--ink); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 500 12px/1.4 var(--font-ui); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 4px; }
.crumbs li + li::before { content: "›"; margin: 0 4px; color: var(--muted); opacity: .8; }
.crumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--link); text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--ink); }

/* catalogue: filters + results */
.catalog { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.filters { position: sticky; top: var(--nav-offset); max-height: calc(100vh - var(--nav-offset) - 16px); overflow-y: auto; overscroll-behavior: contain; padding: 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); scrollbar-width: thin; }
.filters__head { display: none; }
.fgroup { border: 0; margin: 0; padding: 0 0 24px; min-width: 0; }
.fgroup + .fgroup { padding-top: 24px; border-top: 1px solid var(--line); }
.fgroup legend { padding: 0; margin-bottom: 12px; font: 600 13px/1.3 var(--font-ui); color: var(--ink); }
.fgroup:last-child { padding-bottom: 0; }
.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; font: 500 14px/1.3 var(--font-ui); color: var(--ink); cursor: pointer; }
.check input { position: absolute; z-index: 1; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.check__box { width: 20px; height: 20px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong); background: var(--field); display: grid; place-items: center; transition: background-color .2s, box-shadow .2s; }
.check input[type="radio"] + .check__box { border-radius: 50%; }
.check__box::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.check input[type="radio"] + .check__box::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--white); transform: none; }
.check input:checked + .check__box { background: var(--btn-bg); box-shadow: none; }
[data-theme="dark"] .check__box::after { border-color: var(--navy-900); }
[data-theme="dark"] .check input[type="radio"] + .check__box::after { background: var(--navy-900); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--blue); outline-offset: 2px; }
.check small { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.check.is-empty { opacity: .45; }
.frange output { font: 600 13px/1 var(--font-ui); color: var(--link); font-variant-numeric: tabular-nums; }
.frange__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.frange__head span { font: 500 13px/1.3 var(--font-ui); color: var(--muted); }
.select { position: relative; }
.select select { width: 100%; height: 44px; padding: 0 40px 0 16px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--field); font: 500 14px/1 var(--font-ui); color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.select .i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.select select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(19, 179, 246, .2); }
.results__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 24px; }
.results__count { font: 600 16px/1.3 var(--font-ui); }
.results__count b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.results__tools { display: flex; align-items: center; gap: 8px; }
.results__tools .select { width: 220px; }
.filters-open { display: none; }
.grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.results__empty { padding: 48px 24px; border-radius: var(--r-card); background: var(--card); border: 1px dashed var(--line-strong); text-align: center; color: var(--muted); }
.results__empty .btn { margin-top: 16px; }
.sheet-backdrop { display: none; }

/* category page */
.compare { margin-top: 48px; }
.compare .sec-head { margin-bottom: 24px; }
.compare .table-scroll { max-height: min(72vh, 640px); overflow: auto; overscroll-behavior: contain; } /* own scrollport → the header row stays visible (sticky) */
.table-scroll { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-rest); }
.table { width: 100%; min-width: 720px; font: 400 14px/1.45 var(--font-ui); font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { position: sticky; top: 0; z-index: 1; background: var(--seg); font: 600 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr:hover { background: var(--tint); }
.table a { color: var(--link); font-weight: 600; }
.table .price { font-size: 15px; color: var(--price-sm); }
.teaser { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 32px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.teaser h2 { font: 600 24px/1.2 var(--font-display); }
.teaser p { margin-top: 8px; max-width: 60ch; color: var(--muted); }
.cta-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 48px; border-radius: var(--r-section); background: var(--navy); color: var(--white); }
.cta-band::before { /* a soft ring echoing the emblem's blue→orange arc */
  content: ""; position: absolute; right: -150px; top: 50%; width: 420px; height: 420px; margin-top: -210px; z-index: -1; opacity: .26; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 200deg, transparent 0 8%, var(--blue) 14%, var(--blue) 42%, var(--orange) 58%, var(--amber) 72%, transparent 80%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px)); mask: radial-gradient(farthest-side, transparent calc(100% - 30px), #000 calc(100% - 29px));
}
.cta-band h2 { font: 600 clamp(24px, 2.6vw, 34px)/1.2 var(--font-display); color: var(--white); }
.cta-band p { margin-top: 8px; max-width: 60ch; color: rgba(234, 241, 250, .78); }
.cta-band .actions { margin-top: 0; }
[data-theme="dark"] .cta-band { background: var(--navy-800); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.tiles--compact .tile { padding: 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.tiles--compact .tile .pi { grid-row: span 2; }
.tiles--compact .tile .pi { width: 44px; height: 44px; }
.tiles--compact .tile__name { margin-top: 0; font-size: 14px; align-self: end; }
.tiles--compact .tile__count { align-self: start; }

/* compare (Run 4 D2): toggle on cards, sticky bottom bar, modal table */
.mcard__cmp {
  position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px 0 8px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .82); color: var(--navy); box-shadow: 0 2px 10px rgba(2, 14, 30, .12), inset 0 0 0 1px rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12px/1 var(--font-ui);
  opacity: .92; transition: opacity .2s, background-color .2s;
}
.mcard__cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mcard__cmpbox { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(3, 23, 49, .45); background: var(--white); display: grid; place-items: center; }
.mcard__cmpbox::after { content: ""; width: 8px; height: 5px; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.mcard__cmp:has(input:checked) { background: var(--navy); color: var(--white); opacity: 1; }
.mcard__cmp input:checked + .mcard__cmpbox { background: var(--blue); box-shadow: none; }
.mcard__cmp input:checked + .mcard__cmpbox::after { opacity: 1; }
.mcard__cmp:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.mcard:hover .mcard__cmp { opacity: 1; }
.mcard.is-compared { box-shadow: 0 0 0 2px var(--blue), var(--shadow-rest); }
.cmpbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 200px); padding: 8px 8px 8px 12px; border-radius: 999px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border); box-shadow: 0 18px 50px rgba(2, 14, 30, .24); color: var(--ink);
  animation: cmpIn .35s var(--ease) both;
}
@keyframes cmpIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cmpbar__items { display: flex; gap: 8px; min-width: 0; }
.cmpbar__items li { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 28px 4px 4px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.cmpbar__items img { width: 40px; height: 30px; border-radius: 999px; object-fit: cover; background: var(--photo-bg); flex: none; }
.cmpbar__name { font: 600 12px/1.2 var(--font-ui); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.cmpbar__x { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 600 16px/1 var(--font-ui); }
.cmpbar__x:hover { color: var(--ink); background: var(--tint); }
.cmpbar__hint { font: 500 13px/1.3 var(--font-ui); color: var(--muted); white-space: nowrap; }
.cmpbar__hint:empty { display: none; }
.cmpbar__actions { display: flex; gap: 6px; flex: none; }
.cmpbar .btn[disabled] { opacity: .45; pointer-events: none; }
.modal--wide .modal__panel { width: min(1040px, 100%); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 500 14px/1.3 var(--font-ui); color: var(--ink); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.switch__track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--line-strong); transition: background-color .2s; flex: none; }
.switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(2, 14, 30, .3); transition: transform .2s var(--ease); }
.switch input:checked + .switch__track { background: var(--blue-700); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--blue); outline-offset: 2px; }
.cmp-table .table { min-width: 560px; }
.cmp-table thead th { position: static; text-transform: none; letter-spacing: 0; background: var(--card); vertical-align: bottom; }
.cmp-table thead a { display: grid; gap: 8px; font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.cmp-table thead a:hover { color: var(--link); }
.cmp-table thead img { width: 100%; max-width: 180px; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--r-xs); background: var(--photo-bg); }
.cmp-table tbody th { width: 22%; font-weight: 500; color: var(--muted); }
.cmp-table tbody td { font-weight: 600; }
.cmp-table .is-same td { color: var(--muted); font-weight: 500; }
.table td.is-best { color: var(--blue-700); font-weight: 700; background: rgba(19, 179, 246, .08); }
.table td.is-best .price { color: var(--blue-700); }
.cmp-table__none { text-align: center; color: var(--muted); }
.compare__legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.compare__swatch { width: 14px; height: 14px; border-radius: 4px; background: rgba(19, 179, 246, .16); box-shadow: inset 0 0 0 1px rgba(6, 118, 165, .4); flex: none; }
.compare .table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--card); }   /* sticky first column (mobile scroll) */
.compare .table thead th:first-child { left: 0; z-index: 2; }
.compare .table tbody tr:hover th[scope="row"] { background: var(--seg); }

/* ==========================================================================
   MACHINE PAGE
   ========================================================================== */
.mpage { padding-bottom: 0; }
.mlayout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; margin-top: 40px; }
.mlayout > * { min-width: 0; }
.mlayout__aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.gallery__main { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; border-radius: var(--r-media); overflow: hidden; background: var(--photo-bg); box-shadow: inset 0 0 0 1px rgba(3, 23, 49, .06), inset 0 -24px 48px -32px rgba(3, 23, 49, .12); cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom { position: absolute; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: var(--navy); box-shadow: var(--shadow-soft); }
.gallery__stage { position: relative; }
.gallery__count { pointer-events: none; position: absolute; left: 16px; bottom: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(2, 14, 30, .8); color: var(--white); font: 600 12px/1.3 var(--font-ui); font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; padding: 2px 2px 8px; }   /* upgrade: visible strip scrollbar */
.gallery__thumbs::-webkit-scrollbar { height: 6px; }
.gallery__thumbs::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-strong); }
.gallery__thumb { flex: 0 0 96px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--r-xs); overflow: hidden; background: var(--photo-bg); box-shadow: inset 0 0 0 1px var(--line); opacity: .7; transition: opacity .2s, box-shadow .2s; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: 1; }
.gallery__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--blue); }
.mblock { margin-top: 48px; }
.mblock > h2 { font: 600 24px/1.2 var(--font-display); letter-spacing: -.01em; margin-bottom: 16px; }
.mblock > h2::after { /* the site's one accent bar (same as section headings) */
  content: ""; display: block; width: 48px; height: 4px; margin-top: 14px; border-radius: 2px;
  background: var(--grad);
}
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.key { padding: 16px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.key dt { font: 500 12px/1.3 var(--font-ui); color: var(--muted); }
.key dd { margin-top: 4px; font: 600 18px/1.25 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.specs .table { min-width: 0; }
.specs .table th { width: 52%; font-weight: 500; color: var(--muted); }
.specs .table td { font-weight: 600; color: var(--ink); }
.specs .table tbody.grp th[colspan] { background: var(--seg); font: 600 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.specs .table-scroll { max-height: min(76vh, 760px); overflow: auto; overscroll-behavior: contain; }
.specs .table thead th { position: sticky; top: 0; z-index: 2; height: 40px; }
.specs .table tbody.grp th[colspan] { position: sticky; top: 40px; z-index: 1; }
.specs .table tbody.grp tr:nth-child(2n + 3) { background: var(--surface); }
.specs .table tbody.grp tr:nth-child(2n + 3):hover { background: var(--tint); }
.specs__note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.variants { margin-top: 16px; }
.pricecard {
  position: relative; padding: 32px; border-radius: var(--r-section); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden;
}
.pricecard::before { /* Run 5: the slanted corner is gone — a straight arc-gradient line along the top edge */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1; pointer-events: none;
  background: var(--grad);
}
.pricecard__label { font: 500 13px/1.3 var(--font-ui); color: var(--muted); }
.pricecard__price { margin-top: 8px; font: 700 32px/1.1 var(--font-display); color: var(--price); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pricecard__price small { font: 500 14px/1 var(--font-ui); color: var(--muted); letter-spacing: 0; }
.pricecard__ask { margin-top: 8px; font: 700 28px/1.15 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.pricecard__opts { margin-top: 12px; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.pricecard__opts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pricecard__actions { display: grid; gap: 8px; margin-top: 24px; }
.pricecard__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pricecard__why { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pricecard__why li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pricecard__why .i { width: 18px; height: 18px; color: var(--blue-700); margin-top: 1px; }
.pricecard__hours { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.attach .table { min-width: 560px; }
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.prevnext a { display: flex; flex-direction: column; gap: 4px; padding: 20px 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: box-shadow .25s, translate .3s var(--ease); }
.prevnext a:hover { box-shadow: var(--shadow-soft); translate: 0 -2px; }
.prevnext a:last-child { text-align: right; align-items: flex-end; }
.prevnext b { font: 600 16px/1.3 var(--font-display); }

.mbar { /* phones / tablets: slim price bar while the price card is out of view */
  position: fixed; left: 96px; right: 16px; bottom: 16px; z-index: 64; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 20px; border-radius: 999px; color: var(--ink);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--glass-border); box-shadow: 0 18px 44px rgba(2, 14, 30, .2);
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mbar.is-on { opacity: 1; transform: none; }
.mbar__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mbar__txt b { font: 600 14px/1.25 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__txt span { font: 700 13px/1.3 var(--font-ui); color: var(--price-sm); font-variant-numeric: tabular-nums; }
.mbar .btn { flex: none; }
@media (min-width: 1024px) { .mbar { display: none !important; } }

/* lightbox + modal */
.lightbox { position: fixed; inset: 0; z-index: 140; display: grid; grid-template-rows: auto 1fr auto; background: rgba(2, 14, 30, .94); color: var(--white); opacity: 0; transition: opacity .25s var(--ease); }
.lightbox.is-open { opacity: 1; }
.lightbox__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.lightbox__stage { position: relative; display: grid; place-items: center; padding: 0 80px; min-height: 0; touch-action: pan-y; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); background: var(--photo-bg); }
.lightbox__prev, .lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__count { font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.lightbox__foot { padding: 16px; text-align: center; font-size: 14px; color: rgba(234, 241, 250, .75); }

.modal { position: fixed; inset: 0; z-index: 135; display: grid; place-items: center; padding: 16px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(2, 14, 30, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s var(--ease); }
.modal__panel { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 32px; border-radius: var(--r-section); background: var(--panel); color: var(--ink); box-shadow: 0 40px 100px rgba(2, 14, 30, .35); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.modal__head h2 { font: 600 24px/1.2 var(--font-display); }
.modal__head p { margin-top: 4px; color: var(--muted); font-size: 14px; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card { position: relative; padding: 32px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { position: relative; margin-bottom: 16px; min-width: 0; }
.field > label:not(.check) { display: block; margin-bottom: 8px; font: 500 13px/1.3 var(--font-ui); color: var(--ink); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; height: 56px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--field);
  font: 400 15px/1.4 var(--font-ui); color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { height: auto; min-height: 136px; padding: 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(19, 179, 246, .2); }
.field ::placeholder { color: var(--muted); opacity: .85; }
.field--float input:not([type="checkbox"]), .field--float textarea { padding-top: 24px; padding-bottom: 8px; }
.field--float textarea { padding-top: 28px; }
.field--float > label:not(.check) {
  position: absolute; left: 17px; top: 18px; z-index: 1; margin: 0; pointer-events: none;
  font: 400 15px/1.2 var(--font-ui); color: var(--muted); transform-origin: left top; transition: transform .2s var(--ease), color .2s var(--ease);
}
.field--float :is(input, textarea):focus + label, .field--float :is(input, textarea):not(:placeholder-shown) + label, .field--select > label:not(.check) { transform: translateY(-10px) scale(.75); color: var(--muted); }
.field--float :is(input, textarea):focus + label { color: var(--link); }
.field--float textarea::placeholder { opacity: 0; transition: opacity .2s; }
.field--float textarea:focus::placeholder { opacity: .7; }
.field--select select { padding-top: 18px; padding-right: 44px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.field--select .i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.field abbr { color: var(--link); text-decoration: none; border: 0; }
.field__err { display: none; margin-top: 8px; font: 500 13px/1.3 var(--font-ui); color: var(--err); }
.field.is-invalid :is(input, textarea, select) { border-color: var(--err); box-shadow: 0 0 0 4px rgba(194, 54, 47, .1); }
.field.is-invalid .field__err { display: block; }
.field.is-invalid > label:not(.check) { color: var(--err); }
.field--consent { margin-top: 8px; }
.field--consent .check { align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; }
.field--consent .check__box { margin-top: 1px; }
.field--consent a { color: var(--link); text-decoration: underline; }
.field.is-invalid .check__box { box-shadow: inset 0 0 0 1.5px var(--err); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 8px; }
.form-note { font-size: 13px; color: var(--muted); max-width: 320px; }
.form-hint { margin-top: -4px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.map { position: relative; margin-top: 24px; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--seg); }
.map iframe { width: 100%; height: 100%; border: 0; }
[data-theme="dark"] .map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95); }
.map__open { position: absolute; right: 16px; bottom: 16px; }

/* content pages */
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { padding: 32px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); }
.card .pi { width: 64px; height: 64px; }
.card h3 { margin-top: 16px; font: 600 19px/1.3 var(--font-display); }
.card p { margin-top: 8px; color: var(--muted); font-size: 15px; }
.card ul { margin-top: 16px; display: grid; gap: 8px; }
.card ul a { color: var(--link); font-weight: 600; font-size: 14px; }
.steps { display: grid; gap: 16px; counter-reset: step; }
.steps li { position: relative; padding: 24px 24px 24px 80px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 24px; top: 24px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-bg); color: var(--btn-fg); font: 700 15px/1 var(--font-display); }
.steps h3 { font: 600 17px/1.3 var(--font-display); }
.steps p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.stats--stack { grid-template-columns: 1fr; }
.prose--narrow { max-width: 820px; margin: 0 auto; }
.prose--narrow h2:first-child { margin-top: 0; }
.ig-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-card { display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-rest); color: var(--ink); transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.ig-card:hover { translate: 0 -4px; box-shadow: var(--shadow-card); }
.ig-card__icon { width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); color: var(--white); }
.ig-card b { display: block; font: 600 17px/1.3 var(--font-display); }
.ig-card small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.notfound { text-align: center; }
.notfound .h2::after { margin-left: auto; margin-right: auto; }
.notfound .actions { justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; overflow: hidden; isolation: isolate; margin: var(--sec-y) var(--pad) 0; padding: 72px 0 96px; border-radius: var(--r-section) var(--r-section) 0 0; background: var(--navy-900); color: rgba(234, 241, 250, .76); font-size: 14px; }
.footer::before { content: ""; position: absolute; top: 0; left: 48px; right: 48px; height: 2px; border-radius: 2px; background: var(--grad); }
[data-theme="dark"] .footer { background: var(--page-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.footer__grid { display: grid; grid-template-columns: 1.25fr 1.5fr .95fr 1.1fr; gap: 40px; }
.footer__cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.footer__col .footer__all { margin-top: 8px; color: var(--white); font-weight: 600; }
.footer__about { margin-top: 16px; max-width: 320px; line-height: 1.6; }
.footer__social { display: flex; gap: 8px; margin-top: 24px; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__col h2 { margin-bottom: 8px; font: 600 12px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .1em; color: rgba(234, 241, 250, .55); }
.footer__col a, .footer__col .phone-list a { display: inline-flex; align-items: center; min-height: 32px; color: rgba(234, 241, 250, .86); font-weight: 400; font-size: 14px; }
.footer__col a:hover { color: var(--white); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; }
.footer__bottom a { color: rgba(234, 241, 250, .7); }
.footer__bottom a:hover { color: var(--white); }

/* ==========================================================================
   FLOATING UI
   ========================================================================== */
.assist-launch {
  position: fixed; left: 24px; bottom: 24px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: var(--navy); color: var(--white);
  box-shadow: 0 14px 34px rgba(2, 14, 30, .35), inset 0 0 0 1px rgba(255, 255, 255, .12);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s, background-color .25s;
}
.assist-launch.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s, background-color .25s; }
.assist-launch:hover { background: var(--navy-700); }
[data-theme="dark"] .assist-launch { background: var(--blue); color: var(--navy-900); }
.assist-launch__dot { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--navy); }
.assist-launch .tip { left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); }
.assist-launch:hover .tip, .assist-launch:focus-visible .tip { transform: translate(0, -50%); }

.assistant {
  position: fixed; left: 24px; bottom: 96px; z-index: 110; width: 384px; height: 560px; max-height: calc(100vh - 120px); max-height: calc(100svh - 120px);
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); color: var(--ink);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom left; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.assistant.is-open { opacity: 1; transform: none; }
.assistant__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.assistant__head > div { flex: 1; min-width: 0; }
.assistant__logo { width: 40px; height: 40px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(2, 14, 30, .12); }
.assistant__logo img { width: 30px; height: auto; }
.assistant__head h2 { font: 600 15px/1.2 var(--font-ui); }
.assistant__status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.assistant__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.assistant__ctx { margin: 8px 16px 0; padding: 8px 12px; border-radius: var(--r-xs); background: var(--tint); font: 500 12px/1.4 var(--font-ui); color: var(--ink); }
.assistant__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: var(--r-sm); font: 400 14px/1.5 var(--font-ui); animation: resIn .3s var(--ease) both; overflow-wrap: anywhere; }
.msg--bot { background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg--user { margin-left: auto; background: var(--btn-bg); color: var(--btn-fg); border-bottom-right-radius: 4px; }
.msg a { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.msg__p { margin-top: 6px; }
.msg__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.msg__actions .btn { height: 36px; padding: 0 14px; font-size: 13px; }
.msg__list { margin-top: 4px; display: grid; gap: 4px; }
.msg__list li { position: relative; padding-left: 16px; }
.msg__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 3px; border-radius: 2px; background: var(--grad); }
.msg--typing { display: inline-flex; gap: 4px; padding: 14px; }
.msg--typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1s infinite ease-in-out; }
.msg--typing span:nth-child(2) { animation-delay: .15s; }
.msg--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.assistant__chips { display: flex; gap: 8px; padding: 8px 16px 0; overflow-x: auto; scrollbar-width: none; }
.assistant__chips::-webkit-scrollbar { display: none; }
.assistant__chips .chip { flex: none; min-height: 36px; }
.assistant__form { display: flex; gap: 8px; padding: 12px 16px 16px; }
.assistant__form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field); color: var(--ink); font-size: 14px; }
.assistant__form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(19, 179, 246, .2); }
.assistant__form .round-btn { width: 44px; height: 44px; }

.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; color: var(--ink); background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow-soft);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
.to-top > .i { grid-area: 1 / 1; width: 20px; height: 20px; }
.to-top__ring { grid-area: 1 / 1; width: 48px; height: 48px; transform: rotate(-90deg); fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.to-top__ring circle { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }

.search-ov { position: fixed; inset: 0; z-index: 130; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.search-ov__backdrop { position: absolute; inset: 0; background: rgba(2, 14, 30, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease); }
.search-ov__panel { position: relative; width: min(760px, 100%); max-height: 76vh; display: flex; flex-direction: column; padding: 16px; border-radius: var(--r-section); color: var(--ink); background: var(--panel); box-shadow: 0 40px 100px rgba(2, 14, 30, .3); opacity: 0; transform: translateY(-12px) scale(.98); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.search-ov.is-open .search-ov__backdrop { opacity: 1; }
.search-ov.is-open .search-ov__panel { opacity: 1; transform: none; }
.search-ov__bar { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 16px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--line-strong); }
.search-ov__bar > .i { color: var(--muted); }
.search-ov__bar input { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font-size: 17px; color: var(--ink); }
.search-ov__bar input:focus { outline: none; }
.search-ov__bar input::-webkit-search-cancel-button { display: none; }
.search-ov__meta { padding: 16px 8px 8px; }
.search-ov__results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.s-card { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s; }
.s-card:hover, .s-card:focus-visible { border-color: var(--blue); }
.s-card img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; background: var(--photo-bg); }
.s-card__name { display: block; font: 600 14px/1.3 var(--font-display); }
.s-card__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.s-cat { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--seg); color: var(--ink); font: 600 14px/1.3 var(--font-ui); }
.s-cat .pi { width: 40px; height: 40px; }
.s-cat:hover { color: var(--link); }

.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 300; max-width: calc(100% - 32px); padding: 12px 20px; border-radius: 999px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  font: 500 14px/1.35 var(--font-ui); text-align: center;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
html.is-locked { overflow: hidden; }

/* faint grain (the only page atmosphere kept) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1279px) {
  .tiles { --cols: 5; }
  .navbar__ig { display: none; }            /* 1024–1279: the two Instagram buttons fold into one popover */
  .ig-pop { display: block; }
  .navbar__link { padding: 0 12px; }
  .find-card { width: 288px; }
  .sign-chip { width: 96px; height: 96px; }
  .hero-copy { --copy-top: 20vh; }
  .hero-lead { max-width: 380px; font-size: 14px; }
  .grid-cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1.15fr 1.5fr .95fr 1.1fr; gap: 28px; }
  .footer__cats { column-gap: 16px; }
  .catalog .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  /* <1200 (stage 7, was <1024): logo left, phone + menu right; links, SR|EN, theme and Instagram live in the menu sheet.
     The full bar needs ≈ 1000 px (logo + 4 links + SR|EN, theme, Instagram, phone number) and the homepage bar is
     90 px narrower than the window, so between 1024 and ~1240 px the tools slid over the links. */
  .navbar__links, .navbar__ig, .ig-pop, .navbar .lang-switch, .navbar__theme { display: none; }
  .navbar__pill { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 0 8px 0 20px; }
  .navbar__left { padding-left: 0; }
  .navbar__burger { display: inline-grid; }
  .btn--phone { width: 44px; padding: 0; }
  .btn--phone span { display: none; }
}
@media (max-width: 1023px) {
  :root { --sec-y: 80px; }
  .tiles { --cols: 4; }
  .hero-bottom { padding-right: 24px; }
  .sign-chip { width: 88px; height: 88px; font-size: 12px; }
  .hero-copy { --copy-top: 21vh; max-width: calc(100% - 140px); }   /* 70 px each side: clear of the dock rail (x 27–85) */
  .slide-ind { display: none; }
  .programs { grid-template-columns: 1fr; }
  .finder { grid-template-columns: 1fr; gap: 32px; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .contact-band { grid-template-columns: 1fr; padding: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 125; max-height: 86vh; max-height: 86svh;
    border-radius: var(--r-section) var(--r-section) 0 0; padding: 0 24px 24px; transform: translateY(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility 0s linear .35s; box-shadow: 0 -20px 60px rgba(2, 14, 30, .25);
  }
  .filters.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease), visibility 0s; }
  .filters__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 16px; padding: 16px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
  .filters__head h2 { font: 600 18px/1.2 var(--font-display); }
  .filters__apply { position: sticky; bottom: -24px; margin: 24px -24px -24px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
  .filters-open { display: inline-flex; }
  .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 124; background: rgba(2, 14, 30, .45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
  .sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
  .grid-cards, .grid-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mlayout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mlayout__aside { position: static; }
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .cards-3 { grid-template-columns: 1fr; }
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .filters__apply { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-copy { --copy-top: 16vh; }
  .hero-lead { margin-top: 14px; }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .find-card { padding: 20px; }
  .find-card__text { display: none; }
}
/* dock rail on short windows (stage 7): it starts under the header, so it must also fit below it */
@media (min-width: 768px) and (max-height: 520px) {
  .dock { --dock-h: 295px; gap: 4px; padding: 6px 0; }
  .dock-btn { width: 36px; height: 36px; }
}
@media (min-width: 768px) and (max-height: 440px) {   /* contact and theme stay in the header menu */
  .dock { --dock-h: 210px; }
  .d-sep, .d-contact, .d-theme { display: none; }
}

@media (max-width: 767px) {
  :root { --pad: 10px; --nav-offset: 84px; --sec-y: 64px; }
  body { padding-bottom: 96px; }
  .wrap { width: calc(100% - 32px); }
  .device { padding: 6px; border-radius: 28px; min-height: calc(100vh - 20px); }
  @supports (height: 100svh) { .device { min-height: calc(100svh - 20px); } }
  .device__screen { border-radius: 22px; min-height: inherit; padding: 10px 10px 16px; }
  .navbar--hero { position: relative; top: auto; left: auto; right: auto; }
  .navbar--hero .navbar__pill { height: 60px; }
  .hero-copy { align-self: stretch; width: auto; max-width: none; margin-top: max(32px, calc(18svh - 64px)); padding: 0 6px; align-items: flex-start; }
  .hero-title { font-size: clamp(34px, 10.6vw, 60px); text-align: left; }   /* bold: "For Your Work" = 7.4 em */
  .hero-lead { max-width: none; margin-top: 16px; font-size: 14px; }
  .hero-bottom { padding: 32px 0 0; display: grid; gap: 8px; }
  .find-card { width: auto; padding: 20px; }
  .signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-left: 0; }
  .sign-chip { width: auto; height: 88px; }

  .dock {
    left: 50%; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(360px, calc(100% - 32px)); height: 60px; padding: 0 8px; flex-direction: row; justify-content: space-around; gap: 4px;
  }
  .dock-btn { width: 44px; height: 44px; }
  .d-sep, .d-contact, .d-theme { display: none; }
  .dock .tip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; }
  .phone-pop { left: 50%; top: auto; bottom: calc(100% + 16px); transform: translateX(-50%); }

  .navbar { top: 8px; }
  .navbar__pill { width: calc(100% - 20px); height: 60px; padding: 0 8px 0 16px; }
  .catalog .grid-cards { grid-template-columns: minmax(0, 1fr); }
  .page-inner main { padding-top: calc(8px + 60px + 10px); }
  .phero { --phero-h: 300px; }
  .phero--category { --phero-h: 280px; }
  .phero--machine { --phero-h: 240px; }
  .phero--small { --phero-h: 220px; }
  .phero__frame { border-radius: var(--r-media); }
  .phero__content { padding: 20px 0 28px; }
  .phero__main { padding-top: 24px; }
  .phero__lead { font-size: 15px; margin-top: 16px; }
  .phero__chips { margin-top: 16px; }
  .gchip { min-height: 30px; padding: 0 12px; font-size: 12px; }
  .phero__row { gap: 14px; }
  .phero__pi { width: 52px; height: 52px; }
  .phero__pi .pi { width: 36px; height: 36px; }
  .phero__sign { height: 40px; padding-right: 12px; font-size: 12px; }
  .phero h1 { font-size: clamp(34px, 10vw, 48px); }
  .phero--machine h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .phero--small h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .phero--category .phero__lead { display: none; }   /* ≤ 2 lines rule: on phones the category lead opens the section below */
  .cat-intro--lead { display: block; margin-bottom: 12px; }
  .proof__list { grid-template-columns: 1fr 1fr; }
  .proof__list li { justify-content: flex-start; min-height: 64px; font-size: 14px; }
  .proof__list li:nth-child(3) { border-left: 0; }
  .proof__list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .sec-head { margin-bottom: 32px; }
  .sec-lead { font-size: 16px; }
  .program__body { padding: 24px; }
  .program__list { grid-template-columns: 1fr; }
  .tiles { --cols: 2; --gap: 8px; }
  .tile { padding: 16px; }
  .rail > .mcard { flex-basis: 80%; }
  .finder__card, .form-card { padding: 24px; }
  .seg { flex-wrap: wrap; border-radius: var(--r-card); }
  .seg label { flex: 1 1 calc(50% - 4px); }
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 24px 16px; }
  .video-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer { margin: var(--sec-y) 0 0; padding-top: 56px; border-radius: var(--r-section) var(--r-section) 0 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer::before { left: 24px; right: 24px; }
  .search-ov { padding-top: 10px; }
  .search-ov__results { grid-template-columns: 1fr; }
  .assistant { left: 10px; right: 10px; bottom: 10px; width: auto; height: min(560px, calc(100svh - 20px)); max-height: none; }
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .cmpbar { left: 10px; right: 10px; bottom: calc(14px + 60px + 10px + env(safe-area-inset-bottom)); transform: none; max-width: none; flex-wrap: wrap; border-radius: var(--r-card); padding: 8px; gap: 8px; animation-name: cmpInM; }
  @keyframes cmpInM { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .cmpbar__items { flex: 1 1 100%; }
  .cmpbar__items li { flex: 1 1 0; }
  .cmpbar__name { max-width: none; }
  .cmpbar__hint { flex: 1; }
  .cmpbar__actions { margin-left: auto; }
  html.has-cmpbar .to-top { transform: translateY(-96px); }
  html.has-cmpbar .to-top.is-visible { transform: translateY(-96px); }
  .mbar { left: 10px; right: 10px; bottom: calc(14px + 60px + 10px + env(safe-area-inset-bottom)); border-radius: var(--r-card); }
  html.has-mbar .to-top, html.has-mbar .to-top.is-visible { transform: translateY(-72px); }
  .assist-launch { display: none; }
  .to-top { width: 40px; height: 40px; right: calc((100vw - min(360px, 100vw - 32px)) / 2); bottom: calc(14px + 60px + 10px + env(safe-area-inset-bottom)); }
  .to-top__ring { width: 40px; height: 40px; }
  .to-top > .i { width: 18px; height: 18px; }
  .grid-cards, .grid-cards--4 { grid-template-columns: 1fr; }
  .results__tools { width: 100%; }
  .results__tools .select { flex: 1; width: auto; }
  .teaser { grid-template-columns: 1fr; padding: 24px; }
  .cta-band { padding: 32px 24px; border-radius: var(--r-card); }
  .keys { grid-template-columns: 1fr 1fr; }
  .pricecard { padding: 24px; border-radius: var(--r-card); }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext a:last-child { text-align: left; align-items: flex-start; }
  .lightbox__stage { padding: 0 8px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: -64px; transform: none; }
  .modal { align-items: end; padding: 0; }
  .modal__panel { border-radius: var(--r-section) var(--r-section) 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); max-height: 92svh; }
  .ig-cards { grid-template-columns: 1fr; }
  .steps li { padding: 20px 20px 20px 72px; }
  .contact-band { padding: 24px; border-radius: var(--r-card); }
  .split__media { border-radius: var(--r-card); }
}
@media (max-width: 400px) {
  .res-card { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .res-card img { width: 56px; height: 42px; }
  .res-card__score { grid-column: 2; }
}
@media (pointer: coarse) {
  .lang-switch__btn { width: 44px; height: 44px; }
  .slide-ind__btn { height: 44px; padding: 21px 0; }
  .chip { min-height: 44px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .slide.is-zoom img { animation: none; }
  html.js [data-reveal] { transform: none; }
}

/* rendering: below-the-fold sections skip style/layout until they approach the viewport */
main > .section ~ .section, main > .band, .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* never the first content section */

/* ==========================================================================
   LAST-WINS OVERRIDES — keep at the end of the file.
   ========================================================================== */
/* rail gutters: first/last card align with .wrap edges at every width */
.rail { padding-left: max(24px, calc((100% - var(--wrap)) / 2)); padding-right: max(24px, calc((100% - var(--wrap)) / 2)); scroll-padding-inline: max(24px, calc((100% - var(--wrap)) / 2)); }
@media (min-width: 768px) {
  /* dock lane: the fixed dock occupies x 27–85 px wherever it is a left rail (≥ 768 px; stage 7: was ≥ 1024, so on
     768–1023 px windows page text started at x 24, under the rail); content stays symmetric and clear of it */
  .wrap { width: min(var(--wrap), calc(100% - 170px)); }
  .rail {
    padding-left: max(85px, calc((100% - var(--wrap)) / 2)); padding-right: max(85px, calc((100% - var(--wrap)) / 2));
    scroll-padding-inline: max(85px, calc((100% - var(--wrap)) / 2));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 60px, #000 85px); mask-image: linear-gradient(90deg, transparent 0, transparent 60px, #000 85px);
  }
}
@media (max-width: 767px) {
  .rail { padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
}

/* ==========================================================================
   RUN 6 — navbar logo: the page's FULL logo image (never cropped, no HTML wordmark), TM just outside its
   top-right corner. Emblems 56 px tall in a 72 px bar (46 px ≤ 1024, 42 px on phones); the universal logo is a
   4.7:1 wordmark, so it follows the "−30 %" instruction instead (31 / 28 / 26 px tall). Mapping: data/site.json →
   logos + data/categories.json → logo_key. The emblems have a dark navy outline → a 1 px white halo on navy.
   ========================================================================== */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo { position: relative; display: block; line-height: 0; }
:is(.navbar, .mobile-menu) .brand .brand__img { width: auto; height: 56px; transition: transform .35s var(--ease); }
:is(.navbar, .mobile-menu) .brand--word .brand__img { height: 36px; }
.brand--word .brand__img { display: block; }
.brand--word .brand__img--dark, [data-theme="dark"] .brand--word .brand__img--light { display: none; }   /* upgrade: wordmark per theme */
[data-theme="dark"] .brand--word .brand__img--dark { display: block; }
.brand:hover .brand__img, .brand:focus-visible .brand__img { transform: scale(1.04); }
.brand__logo .tm {
  position: absolute; left: calc(100% + 2px); top: -2px; margin: 0;
  font: 500 8px/1 var(--font-ui); letter-spacing: .02em; color: var(--navy); opacity: .65;
}
[data-theme="dark"] .brand__logo .tm { color: var(--white); }
[data-theme="dark"] .brand--emblem .brand__img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .85)); }   /* emblems only; the dark wordmark needs no halo */
.assistant__logo { overflow: hidden; }
.assistant__logo img { width: 36px; height: auto; }
@media (max-width: 1024px) {
  :root { --nav-h: 64px; --nav-offset: 96px; }
  :is(.navbar, .mobile-menu) .brand .brand__img { height: 46px; }
  :is(.navbar, .mobile-menu) .brand--word .brand__img { height: 32px; }
}
@media (max-width: 767px) {
  :root { --nav-h: 60px; }
  :is(.navbar, .mobile-menu) .brand .brand__img { height: 42px; }
  :is(.navbar, .mobile-menu) .brand--word .brand__img { height: 28px; }
  .brand__logo .tm { font-size: 7px; }
}

/* ---------- RUN 5 — footer brand column: the three programme emblems (Part C) ---------- */
.footer__grid { grid-template-columns: minmax(320px, 1.5fr) 1.45fr .85fr 1fr; }
.footer__emblems { display: flex; gap: 16px; }
.footer__emblem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; color: rgba(234, 241, 250, .86); font: 600 13px/1.2 var(--font-ui); text-align: center; }
.footer__disc {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.footer__disc img { width: 80px; height: auto; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .85)); }
.footer__emblem:hover .footer__disc, .footer__emblem:focus-visible .footer__disc { transform: translateY(-3px); background-color: rgba(255, 255, 255, .06); }
.footer__emblem:hover { color: var(--white); }
@media (max-width: 1439px) { /* the brand column becomes a row above the link columns */
  .footer__grid { grid-template-columns: 1.5fr .95fr 1.1fr; }
  .footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 40px; }
  .footer__brand .footer__emblems { grid-row: span 2; }
  .footer__about { margin-top: 0; }
}
@media (max-width: 1279px) {
  .footer__emblem { width: 84px; }
  .footer__disc { width: 84px; height: 84px; }
  .footer__disc img { width: 70px; }
}
@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--cats { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand { display: block; }
  .footer__about { margin-top: 20px; }
  .footer__emblems { gap: 8px; justify-content: flex-start; }
  .footer__emblem { width: 76px; font-size: 12px; }
  .footer__disc { width: 76px; height: 76px; }
  .footer__disc img { width: 63px; }
}

/* ---------- RUN 5 — polish with the new brand (Part E) ---------- */
/* E1/E6 + Run 6: the FULL programme emblems (with the wordmark band) wherever a programme sign appears */
.pemblem { display: block; flex: none; width: auto; height: auto; }
[data-theme="dark"] .pemblem, .on-dark .pemblem { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .85)); }
.signs { gap: 12px; }
.sign-chip { width: 116px; height: 116px; gap: 6px; padding: 8px; border-radius: 22px; font: 600 12px/1.2 var(--font-ui); }   /* upgrade: 128 -> 116 (90 % view) */
.sign-chip .pemblem { height: 76px; transition: transform .35s var(--ease); }
.sign-chip:hover { translate: 0 -4px; }
.phero__sign { height: 52px; padding: 0 16px 0 4px; }
.phero__sign .pemblem { height: 44px; }
.chip__badges { display: inline-flex; align-items: center; }
.chip__badges .pemblem { height: 22px; }
.chip__badges .pemblem + .pemblem { margin-left: -4px; }
.pemblem--card { height: 64px; }
.mega__side { padding: 24px 18px; }
.mega__signs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mega__signs .mega__sign { min-height: 120px; gap: 2px; padding: 12px 8px; }
.mega__signs .mega__sign .pemblem { width: 76px; height: auto; margin-bottom: 4px; }
.mega__signs .mega__sign small { font: 500 11px/1.2 var(--font-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.mega__pv-icon { display: flex; gap: 4px; }
.mega__pv-icon .pemblem--stack { height: 40px; }
.acc__signs .mega__sign .pemblem { height: 40px; }
/* E2: the category pictogram keeps its white glass circle, ringed in the new navy */
.phero__pi { box-shadow: 0 8px 24px rgba(2, 14, 30, .25), inset 0 0 0 1px rgba(3, 23, 49, .12); }
/* E3: focus rings in --blue everywhere; quiet "Cena na upit" pill stays */
:focus-visible { outline-color: var(--blue); }
/* E4: dark theme — body on --navy-900, cards in navy with a 1 px silver/12 border */
[data-theme="dark"] .footer { background: var(--navy-950); }
[data-theme="dark"] :is(.card, .mcard, .tile, .pricecard, .teaser, .mega__pv, .mega__sign) { border-color: var(--line); }
@media (max-width: 1279px) {
  .sign-chip { width: 104px; height: 104px; }
  .sign-chip .pemblem { height: 66px; }
}
@media (max-width: 1023px) { /* tablets: 112 px chips would overlap the find card (measured at 768) */
  .signs { gap: 8px; }
  .sign-chip { width: 96px; height: 96px; }
  .sign-chip .pemblem { height: 60px; }
}
@media (max-width: 767px) {
  .sign-chip { width: auto; height: 104px; }
  .sign-chip .pemblem { height: 60px; }
  .phero__sign { height: 44px; padding-right: 12px; }
  .phero__sign .pemblem { height: 36px; }
}

/* ---------- UPGRADE (Oct 2026) — machine page: description markup, prices, versions, video link ---------- */
.prose ol { margin-top: 16px; padding-left: 24px; display: grid; gap: 8px; list-style: decimal; }
.prose ol li { font-size: 16px; line-height: 1.6; padding-left: 4px; }
.prose ol li::marker { color: var(--blue-700); font-weight: 600; }
.prose h3:first-child { margin-top: 0; }
.prose ul + p, .prose ol + p, .prose ul + h3, .prose ol + h3 { margin-top: 16px; }
.prose__sep { margin: 28px 0; border: 0; height: 1px; background: var(--line-strong); }
.pricetable th { font-weight: 500; }
.pricetable td { text-align: right; white-space: nowrap; }
.pricetable td small { font: 500 12px/1 var(--font-ui); color: var(--muted); }
.pricetable .price { font-size: 17px; color: var(--price-sm); }   /* < 18.7 px bold: small-text contrast */
.pricetable__note th { color: var(--muted); font-size: 14px; }
.versions { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.versions ul { display: grid; gap: 6px; margin-top: 6px; }
.versions a, .versions__cur { display: block; padding: 8px 12px; border-radius: var(--r-sm); font: 600 14px/1.3 var(--font-ui); box-shadow: inset 0 0 0 1px var(--line-strong); }
.versions a { color: var(--link); }
.versions a:hover { box-shadow: inset 0 0 0 1px var(--blue); background: var(--tint); }
.versions__cur { color: var(--ink); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); }
.video-alt { margin-top: 10px; font-size: 14px; }

/* ---------- UPGRADE stage 5 — gallery previous / next, About-us hall photo ---------- */
.gallery__nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--navy); box-shadow: 0 4px 14px rgba(2, 14, 30, .18); cursor: pointer; transition: background-color .2s, transform .2s; }
.gallery__nav:hover { background: var(--white); transform: scale(1.06); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav .i { width: 20px; height: 20px; }
@media (max-width: 767px) { .gallery__nav { width: 38px; height: 38px; margin-top: -19px; } }
.about-hall { margin-top: 40px; border-radius: var(--r-section); overflow: hidden; background: var(--seg); }
.about-hall img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.about-hall figcaption { padding: 12px 16px; font-size: 14px; color: var(--muted); background: var(--card); }
@media (max-width: 767px) { .about-hall { margin-top: 24px; border-radius: var(--r-card); } }