/* Demo design system (templates/site). Theme tokens are injected per site into :root
   by the builder (colours, fonts, radius); everything else derives from them with
   color-mix(), so one stylesheet serves every business and still looks like theirs. */

/* ---------- tokens & derived values ---------- */
:root {
  --radius-none: 0; --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; --radius-full: 999px;
  --r: var(--radius-md);
  --container: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --section: clamp(64px, 9vw, 128px);
  --header-h: 76px;
  --muted: color-mix(in srgb, var(--text) 64%, var(--bg));
  --line: color-mix(in srgb, var(--text) 12%, var(--bg));
  --line-strong: color-mix(in srgb, var(--text) 22%, var(--bg));
  --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--bg));
  --primary-softer: color-mix(in srgb, var(--primary) 5%, var(--bg));
  --secondary-soft: color-mix(in srgb, var(--secondary) 12%, var(--bg));
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 6%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 8%, transparent);
  --shadow-lg: 0 24px 60px color-mix(in srgb, var(--text) 20%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --step--1: clamp(.86rem, .82rem + .2vw, .95rem);
  --step-0: clamp(1rem, .95rem + .25vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 3.6rem);
  /* the H1: min(..., 11.2vw) (Hrvoje 2026-10-07, "Fit it on every site"): one long word ("automatizacija." on
     prvired.com) ran past a 320-360 px screen; below 414 px wide the size now follows the width (-3 % at 390 px,
     -8 % at 360, -14 % at 320, still large text for contrast) and is unchanged from 414 px up */
  --step-5: min(clamp(2.6rem, 1.6rem + 5vw, 5.2rem), 11.2vw);
}
[data-radius="none"] { --r: var(--radius-none); }
[data-radius="sm"] { --r: var(--radius-sm); }
[data-radius="lg"] { --r: var(--radius-lg); }
[data-radius="full"] { --r: var(--radius-lg); }
[data-mood="dark"] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; background-size: cover; background-position: center; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-1); font-weight: 650; }
[data-headings="uppercase"] h1, [data-headings="uppercase"] h2, [data-headings="uppercase"] .eyebrow { text-transform: uppercase; letter-spacing: .04em; }
[data-headings="uppercase"] h1 { letter-spacing: .02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--primary); color: var(--primary-ink); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.small { font-size: var(--step--1); }
.muted { color: var(--muted); }
.lead { font-size: var(--step-1); color: var(--muted); max-width: 62ch; line-height: 1.55; }
.eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--secondary); margin: 0 0 .9em;
}
.eyebrow.on-dark { color: rgba(255,255,255,.85); }
.eyebrow.on-primary { color: color-mix(in srgb, var(--primary-ink) 80%, transparent); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--primary); color: var(--primary-ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.big { width: 2.2rem; height: 2.2rem; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; padding: .8em 1.5em; border-radius: var(--r); border: 2px solid transparent;
  font-weight: 650; font-size: var(--step-0); line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s; white-space: nowrap;
}
[data-radius="full"] .btn, [data-radius="full"] .chips li, [data-radius="full"] .hours-chips li { border-radius: var(--radius-full); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--text)); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-light { background: rgba(255,255,255,.92); color: #111; backdrop-filter: blur(8px); }
.btn-light:hover { background: #fff; }
.btn-lg { padding: 1em 1.9em; font-size: var(--step-0); }
.btn-sm { padding: .55em 1em; font-size: var(--step--1); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips li {
  padding: .45em .95em; border-radius: var(--r); font-size: var(--step--1); font-weight: 600;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(10px);
}
.hero-split .chips li, .hero-mosaic .chips li, .hero-minimal .chips li { background: var(--primary-soft); color: var(--text); border-color: transparent; }
.chips.center { justify-content: center; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line); transition: background .35s, border-color .35s, box-shadow .35s, color .35s;
}
.site-header.over-hero:not(.scrolled) { background: transparent; border-color: transparent; color: #fff; }
.site-header.over-hero:not(.scrolled) .nav a, .site-header.over-hero:not(.scrolled) .wordmark { color: #fff; }
.site-header.over-hero:not(.scrolled) .burger span { background: #fff; }
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex: none; max-width: 38%; }
.brand .logo { height: 44px; width: auto; max-width: 240px; object-fit: contain; object-position: left center; }
.site-header.over-hero:not(.scrolled) .brand .logo { filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { min-width: 0; }
.nav ul { display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.nav li { flex: none; }
.nav a { display: block; padding: .55em .8em; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 550; font-size: var(--step--1); transition: background .2s; white-space: nowrap; }
.nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
/* the language switch of a site in more than one language (build.py, 2026-09-29); the listings module's pages have the same as .lst-langs */
.langs { display: flex; gap: 2px; align-items: center; }
.langs a { padding: .35em .55em; border-radius: 8px; font-size: var(--step--1); font-weight: 650; text-decoration: none; color: var(--muted); letter-spacing: .04em; }
.langs a:hover, .langs a[aria-current="true"] { color: var(--text); background: var(--primary-soft); }
.site-header.over-hero:not(.scrolled) .langs a { color: rgba(255,255,255,.78); }
.site-header.over-hero:not(.scrolled) .langs a:hover, .site-header.over-hero:not(.scrolled) .langs a[aria-current="true"] { color: #fff; background: rgba(255,255,255,.18); }
body.nav-open .site-header .langs a { color: var(--muted); }
body.nav-open .site-header .langs a[aria-current="true"] { color: var(--text); background: var(--primary-soft); }
@media (max-width: 420px) { .langs a { padding: .35em .4em; } }
/* ... and a menu that does not fit beside the switch goes behind the menu button on a wide screen too (site.js fitNav sets
   body.nav-collapsed): the dropdown of the phone layout below, hung under the container's right edge */
body.nav-collapsed .burger { display: flex; }
body.nav-collapsed .nav { position: absolute; top: calc(100% + 8px); right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); left: auto; width: min(340px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - var(--header-h) - 24px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; transform: translateY(-6px) scale(.98); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
body.nav-collapsed .nav.open { opacity: 1; transform: none; pointer-events: auto; }
body.nav-collapsed .nav ul { flex-direction: column; gap: 2px; overflow: visible; }
body.nav-collapsed .nav a { font-size: var(--step-0); font-weight: 600; padding: .85em 1em; border-radius: 10px; color: var(--text) !important; white-space: normal; }
body.nav-collapsed .nav a:hover { background: var(--primary-soft); }
body.nav-collapsed .nav li:last-child a { margin-top: 4px; background: var(--primary); color: var(--primary-ink) !important; text-align: center; }
/* burger: a visible pill (Hrvoje 2026-08-27: three hairlines on a photo were invisible on a phone) */
.burger { display: none; width: 48px; height: 44px; padding: 0; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; border-radius: 12px; box-shadow: var(--shadow-sm); transition: background .25s, border-color .25s; }
.burger span { display: block; width: 24px; height: 3px; background: var(--text); border-radius: 3px; transition: transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.site-header.over-hero:not(.scrolled) .burger { background: rgba(0,0,0,.3); border-color: rgba(255,255,255,.5); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 900px) {
  .burger { display: flex; }
  .brand { max-width: calc(100% - 130px); }
  .header-cta span { display: none; }
  .header-cta { padding: .6em .75em; }
  /* dropdown card under the header, right-aligned to the burger */
  .nav { position: absolute; top: calc(100% + 8px); right: var(--gutter); left: auto; width: min(340px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - var(--header-h) - 24px); overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px; transform: translateY(-6px) scale(.98); transform-origin: top right; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav ul { flex-direction: column; gap: 2px; overflow: visible; }
  .nav a { font-size: var(--step-0); font-weight: 600; padding: .85em 1em; border-radius: 10px; color: var(--text) !important; border-bottom: 0; white-space: normal; }
  .nav a:hover, .nav a:active { background: var(--primary-soft); }
  .nav li:last-child a { margin-top: 4px; background: var(--primary); color: var(--primary-ink) !important; text-align: center; }
  body.nav-open .site-header { background: var(--bg); color: var(--text); border-color: var(--line); }
  body.nav-open .site-header .wordmark { color: var(--text); }
  body.nav-open .burger { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
  body.nav-open .burger span { background: var(--text); }
}

/* ---------- hero ---------- */
.hero { position: relative; }
.hero .display { margin-bottom: .35em; }
.hero-sub { font-size: var(--step-1); max-width: 58ch; line-height: 1.5; margin-bottom: 1.6em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero-actions.center { justify-content: center; }
.hero-fullbleed, .hero-band {
  min-height: 100svh; display: flex; align-items: flex-end; color: #fff; padding: calc(var(--header-h) + 48px) 0 clamp(56px, 8vw, 110px); isolation: isolate;
}
.hero-band { min-height: 70svh; align-items: center; text-align: center; }
.hero-band .hero-content { margin-inline: auto; }
.hero-band .hero-sub { margin-inline: auto; }
.hero-band .hero-actions { justify-content: center; }
.hero-band .chips { justify-content: center; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--text); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 14s var(--ease) both; transform-origin: center; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.25) 100%); }
.hero-band .hero-shade { background: rgba(0,0,0,.45); }
/* hero "shade": "strong" (hand-set, prvired.com 2026-10-02): white text needs the photo at or below ~46 % sRGB
   brightness for 4.5:1, so at least ~55 % off its whitest parts. Flattened 2026-10-07 (Hrvoje: the photo was barely
   visible; was .80/.64/.60): the menu and the eyebrow at the top bind, not the bottom - .55 at the top measured 0
   contrast issues from 360 to 1920 px wide, .52 fails the menu links at 1280 px (4.49:1) */
.hero-fullbleed.shade-strong .hero-shade { background: linear-gradient(to top, rgba(0,0,0,.60) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.55) 100%); }
.hero-band.shade-strong .hero-shade { background: rgba(0,0,0,.62); }
.hero-fullbleed .hero-content { max-width: 820px; margin-left: 0; margin-right: auto; width: 100%; }
.hero-fullbleed .display, .hero-band .display { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-fullbleed .hero-sub, .hero-band .hero-sub { color: rgba(255,255,255,.9); }
.scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: #fff; opacity: .8; animation: cue 2s infinite; }
.scroll-cue .ic { width: 28px; height: 28px; }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
.hero-split, .hero-mosaic { padding: calc(var(--header-h) + clamp(32px, 6vw, 80px)) 0 clamp(40px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-visual { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.hero-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border-radius: inherit; pointer-events: none; }
.hero-visual img { animation: fadeUp .9s var(--ease) both; }
.hero-text .display { animation: fadeUp .7s var(--ease) both; }
.hero-text .hero-sub, .hero-text .hero-actions, .hero-text .chips, .hero-text .eyebrow { animation: fadeUp .8s .1s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mosaic { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1; }
.mosaic-cell { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.mosaic-cell:first-child { grid-row: 1 / 3; }
.mosaic-1 .mosaic-cell:first-child { grid-column: 1 / 3; }
.mosaic-2 { grid-template-rows: 1fr; aspect-ratio: 4 / 3; }
.mosaic-2 .mosaic-cell:first-child { grid-row: auto; }
/* hero.layout "rows" (hand-set, 2026-10-01): every picture a full-width horizontal crop, one under the other */
.mosaic.mosaic-rows { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; }
.mosaic.mosaic-rows .mosaic-cell { grid-row: auto; grid-column: auto; aspect-ratio: 16 / 9; }
.hero-minimal { padding: calc(var(--header-h) + clamp(56px, 10vw, 120px)) 0 clamp(56px, 9vw, 110px); overflow: hidden; text-align: center; }
/* the hand-set html hero (2026-10-09, BOEL's promo animation): the block clears the fixed header; the next section's own top padding is the gap */
.hero-html { padding: calc(var(--header-h) + clamp(16px, 3vw, 40px)) 0 clamp(8px, 2vw, 24px); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hero-minimal .hero-content { max-width: 860px; margin-inline: auto; position: relative; }
.hero-minimal .hero-sub { margin-inline: auto; }
.hero-logo { max-height: 120px; width: auto; margin: 0 auto 28px; object-fit: contain; }
.hero-orbs { position: absolute; inset: 0; pointer-events: none; }
.hero-orbs span { position: absolute; width: 48vw; height: 48vw; max-width: 700px; max-height: 700px; border-radius: 50%; filter: blur(80px); opacity: .35; }
.hero-orbs span:first-child { background: var(--primary); top: -20%; left: -10%; }
.hero-orbs span:last-child { background: var(--secondary); bottom: -30%; right: -10%; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { aspect-ratio: 4 / 3; }
  .hero-fullbleed { min-height: 92svh; }
  .mosaic { aspect-ratio: 4 / 3; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.sec-cta.v-band + .section, .sec-gallery.v-strip + .section, .sec-bonus + .section, .pp-end + .section { padding-top: var(--section); }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head h2 { margin-bottom: .35em; }
.section-head .lead { margin-bottom: 0; }
.section-cta { margin: 36px 0 0; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(16px, 2.5vw, 28px); grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.nav li.nav-overflow { display: none; }
@media (max-width: 900px) { .nav li.nav-overflow { display: block; } }

/* cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.card-media.tall { aspect-ratio: 3 / 2; }
.card-media img { transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: clamp(18px, 2.4vw, 26px); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body p { margin: 0 0 8px; color: var(--muted); }
.card-body h3 { margin-bottom: 6px; }
.card.icon-card { padding: clamp(20px, 2.6vw, 28px); gap: 6px; }
.card.icon-card p { color: var(--muted); margin: 0; }
.icon-bubble { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: calc(var(--r) * .8); background: var(--primary-soft); color: var(--primary); margin-bottom: 14px; }
.icon-bubble .ic { width: 24px; height: 24px; }
.price { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: auto; }
/* a catalogue (sections/catalog.html, 2026-10-31): all of a site's products, so two to a row on a phone and small cards everywhere */
.img-contain { width: 100%; height: 100%; object-fit: contain; background-image: none !important; }   /* the blur-up would show beside the picture, for good */
.cat-grid { display: grid; gap: clamp(12px, 2vw, 22px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.cat-card { color: inherit; text-decoration: none; }
.cat-media { background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.cat-card .card-body { padding: clamp(12px, 1.6vw, 18px); }
.cat-card h3 { font-size: var(--step-0); line-height: 1.3; margin-bottom: 4px; overflow-wrap: anywhere; }
.cat-card .card-body p { font-size: var(--step--1); margin-bottom: 6px; }
.cat-count { display: inline-block; font-size: .78em; font-weight: 600; padding: 0 .55em; border-radius: 999px; background: var(--primary-soft); color: var(--text); vertical-align: .08em; }
.cat-specs { list-style: none; margin: 0 0 8px; padding: 0; font-size: var(--step--1); color: var(--muted); }
.cat-specs:empty { display: none; }
.cat-specs li { margin: 0; }
.cat-detail { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: start; }
.cat-detail.no-image { grid-template-columns: minmax(0, 46rem); }
.cat-main { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: color-mix(in srgb, var(--text) 4%, var(--surface)); }
.cat-main img { width: 100%; height: 100%; object-fit: contain; background-image: none !important; }
.cat-thumbs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 8px; }
.cat-thumb { display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r) / 2); }
.cat-price { font-size: var(--step-2); margin: 0 0 .5em; }
.cat-table { margin: 1.4em 0; border-top: 1px solid var(--line); }
.cat-table > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding: .55em 0; border-bottom: 1px solid var(--line); }
.cat-table dt { color: var(--muted); }
.cat-table dd { margin: 0; font-weight: 600; text-align: right; }
.cat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4em; }
@media (max-width: 900px) { .cat-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-card .card-body p { display: none; } }

/* split / about */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-grid.no-image { grid-template-columns: 1fr; max-width: 760px; }
.split-grid.flip .split-visual { order: 2; }
.split-visual { border-radius: var(--r); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-md); }
.split-text .lead { color: var(--text); }
.split-text h3 { font-size: var(--step-2); }
.alternating { display: grid; gap: clamp(48px, 7vw, 96px); }
.alternating .split-visual { aspect-ratio: 4 / 3; }
.columns-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 5vw, 72px); }
.columns-visual { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; margin-top: 24px; }
.centered-text { max-width: 760px; margin-inline: auto; text-align: center; }
.centered-text .lead { margin-inline: auto; color: var(--text); }
.wide-visual { margin-top: clamp(32px, 5vw, 56px); border-radius: var(--r); overflow: hidden; aspect-ratio: 21 / 9; box-shadow: var(--shadow-md); }
.highlights { display: grid; gap: 12px; margin: 24px 0 28px; }
.highlights li { display: flex; gap: 12px; align-items: flex-start; }
.highlights .ic { width: 22px; height: 22px; color: var(--primary); margin-top: 3px; }
.highlights strong { display: block; }
.highlights span { color: var(--muted); }
.highlights.row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: left; }
@media (max-width: 900px) {
  .split-grid, .columns-grid { grid-template-columns: 1fr; }
  .split-grid.flip .split-visual { order: 0; }
}

/* service list */
.service-list { display: grid; counter-reset: s; border-top: 1px solid var(--line); }
.service-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.service-list .num { font-family: var(--font-display); color: var(--secondary); font-weight: 700; font-size: var(--step-1); }
.service-list h3 { margin-bottom: 4px; }
.service-list p { margin: 0; color: var(--muted); }

/* menu */
.menu-layout { display: grid; gap: clamp(28px, 5vw, 64px); }
.menu-layout.has-image { grid-template-columns: 1.3fr .8fr; align-items: start; }
.menu-visual { border-radius: var(--r); overflow: hidden; aspect-ratio: 3 / 4; position: sticky; top: calc(var(--header-h) + 24px); box-shadow: var(--shadow-md); }
.menu-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 48px) clamp(28px, 5vw, 64px); }
.menu-groups.single { grid-template-columns: 1fr; max-width: 760px; }
.menu-group h3 { font-size: var(--step-2); padding-bottom: 10px; border-bottom: 2px solid var(--primary); display: inline-block; margin-bottom: 14px; }
.menu li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.dish { display: flex; flex-direction: column; }
.dish-name { font-weight: 600; }
.dish small { color: var(--muted); font-size: var(--step--1); }
.leader { flex: 1; border-bottom: 1px dotted var(--line-strong); min-width: 16px; transform: translateY(-5px); }
.menu li.no-price .leader { border-bottom: 0; }
.menu .price { margin: 0; }
@media (max-width: 900px) { .menu-layout.has-image { grid-template-columns: 1fr; } .menu-visual { position: static; aspect-ratio: 4 / 3; } }
@media (max-width: 640px) { .menu-groups { grid-template-columns: 1fr; } }

/* galleries */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gallery-grid figure, .gallery-featured figure, .gallery-masonry figure, .strip-item { margin: 0; position: relative; }
.lb { display: block; overflow: hidden; border-radius: calc(var(--r) * .7); aspect-ratio: 4 / 3; background: var(--line); }
.lb img { transition: transform .7s var(--ease), filter .4s; }
.lb:hover img { transform: scale(1.05); }
figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; font-size: var(--step--1); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
figure:hover figcaption { opacity: 1; transform: none; }
.gallery-featured { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.gallery-featured .big { grid-column: span 2; grid-row: span 2; }
.gallery-featured .big .lb { aspect-ratio: auto; height: 100%; }
.gallery-featured .lb { aspect-ratio: 1; }
.gallery-masonry { columns: 3; column-gap: 12px; }
.gallery-masonry figure { break-inside: avoid; margin-bottom: 12px; }
.gallery-masonry .lb { aspect-ratio: auto; }
.gallery-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 20px; scrollbar-width: thin; }
.gallery-strip .strip-item { flex: 0 0 min(78vw, 520px); scroll-snap-align: center; }
.gallery-strip .lb { aspect-ratio: 4 / 5; }
/* featured, two columns (2026-11-03): rows as tall as what is in them - with the desktop's equal (1fr) rows every row of
   two square photos took the height of the 16:10 photo above it, a 50 px gap under each at 390 px (BOEL's galleries) */
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-masonry { columns: 2; } .gallery-featured { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; } .gallery-featured .big { grid-column: span 2; grid-row: span 1; } .gallery-featured .big .lb { aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }

/* units */
.unit-list { display: grid; gap: 20px; }
.unit-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.unit-row.no-image { grid-template-columns: 1fr; }
.unit-media { aspect-ratio: 4 / 3; }
.unit-body { padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; }
.unit-body p { color: var(--muted); }
@media (max-width: 720px) { .unit-row { grid-template-columns: 1fr; } }

/* features */
.feature { padding: 8px 0; }
.feature p { color: var(--muted); margin: 0; }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.feature-row li { display: flex; gap: 14px; align-items: center; }
.feature-row .ic { width: 30px; height: 30px; color: var(--primary); }
.feature-row strong { display: block; }
.feature-row span { color: var(--muted); font-size: var(--step--1); }

/* hours */
.hours-wrap { max-width: 640px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.hours-table th, .hours-table td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.hours-table th { font-weight: 600; width: 45%; }
.hours-table td { font-variant-numeric: tabular-nums; color: var(--muted); }
.hours-table tr.today th, .hours-table tr.today td { color: var(--primary); font-weight: 700; }
.hours-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hours-chips li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; }
.hours-chips span { color: var(--muted); font-variant-numeric: tabular-nums; }
.open-now { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: var(--step--1); margin: 0 0 18px; }
.open-now .dot { width: 9px; height: 9px; border-radius: 50%; background: #2fa55a; box-shadow: 0 0 0 4px rgba(47,165,90,.18); }
.open-now.closed .dot { background: #c94b3a; box-shadow: 0 0 0 4px rgba(201,75,58,.18); }
.hours { display: grid; gap: 4px; }

/* faq */
.faq-list { max-width: 800px; margin-inline: auto; display: grid; gap: 10px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 0 clamp(16px, 2.4vw, 24px); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 650; font-size: var(--step-0); }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { transition: transform .3s var(--ease); color: var(--muted); }
.faq[open] .chev { transform: rotate(180deg); color: var(--primary); }
.faq-body { padding: 0 0 18px; color: var(--muted); }
.faq-body p { margin: 0; }

/* cta */
.sec-cta.v-band { position: relative; isolation: isolate; color: #fff; padding-block: clamp(72px, 10vw, 140px); background: var(--primary); text-align: center; }
.band-media { position: absolute; inset: 0; z-index: -1; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-shade { position: absolute; inset: 0; background: color-mix(in srgb, var(--primary) 55%, rgba(0,0,0,.55)); }
.band-content { max-width: 760px; }
.band-content h2 { color: #fff; }
.band-content .lead { color: rgba(255,255,255,.88); margin-inline: auto; }
.sec-cta.v-band:not(.has-image) .band-content h2 { color: var(--primary-ink); }
.sec-cta.v-band:not(.has-image) .band-content .lead { color: color-mix(in srgb, var(--primary-ink) 85%, transparent); }
.cta-box { background: var(--primary); color: var(--primary-ink); border-radius: var(--r); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; box-shadow: var(--shadow-md); }
.cta-box h2 { color: inherit; font-size: var(--step-3); }
.cta-box .lead { color: color-mix(in srgb, var(--primary-ink) 82%, transparent); margin: 0; }
@media (max-width: 720px) { .cta-box { grid-template-columns: 1fr; } }

/* documents */
.doc-list { display: grid; gap: 12px; max-width: 760px; }
.doc { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.doc:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.doc .ic { width: 28px; height: 28px; color: var(--primary); }
.doc div { flex: 1; display: grid; }
.doc span:not(.doc-dl) { color: var(--muted); font-size: var(--step--1); }
.doc-dl { color: var(--primary); font-weight: 600; font-size: var(--step--1); }

/* map */
.map-box { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); min-height: 340px; display: grid; }
.map-placeholder { display: grid; place-items: center; gap: 10px; text-align: center; padding: 40px 24px; align-content: center; }
.map-placeholder .ic { color: var(--primary); }
.map-address { font-weight: 600; font-size: var(--step-1); margin: 0; }
.map-placeholder .small { margin: 6px 0 0; max-width: 46ch; }
.map-box iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.video-box { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--surface); aspect-ratio: 16 / 9; display: grid; max-width: 960px; margin-inline: auto; }
.video-placeholder { display: grid; place-items: center; gap: 10px; text-align: center; padding: 40px 24px; align-content: center; }
.video-placeholder .ic { color: var(--primary); }
.video-placeholder .small { margin: 6px 0 0; max-width: 46ch; }
.video-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map { margin-top: clamp(32px, 5vw, 56px); }

/* bonus business card (demo builds only - src/demo/card.py, sections/bonus_card.html).
   A brand-coloured band; the two card sides are container-query boxes, so every measure on a
   card is a share of its own width (cqw) and the pair scales with the column - phone included.
   Proportions from the design handoff: 850 px card = 100cqw, 6 mm margin = 7cqw, 16 mm QR = 18.8cqw. */
.section.sec-bonus { position: relative; isolation: isolate; padding-block: var(--section); color: var(--primary-ink); overflow: hidden;
  background: radial-gradient(120% 100% at 78% 30%, color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 45%, color-mix(in srgb, var(--primary) 80%, #000) 100%); }
.bonus-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bonus-text h2 { color: inherit; }
.bonus-text .lead { color: color-mix(in srgb, var(--primary-ink) 85%, transparent); }
.bonus-note { color: color-mix(in srgb, var(--primary-ink) 62%, transparent); margin: 14px 0 0; max-width: 52ch; }
.bonus-stage { position: relative; width: 100%; max-width: 640px; margin-inline: auto; aspect-ratio: 100 / 94; }
.bcard { position: absolute; container-type: inline-size; aspect-ratio: 85 / 55; background: var(--card-paper); color: var(--card-ink); border-radius: 3px; overflow: hidden; font-family: var(--font-body); }
.bcard::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.7), rgba(255,255,255,0) 55%), radial-gradient(100% 90% at 100% 100%, rgba(20,33,58,.06), rgba(20,33,58,0) 60%); }
.bcard-front { width: 86%; left: 5%; top: 2%; z-index: 2; transform: rotate(-7deg);
  box-shadow: 0 1px 0 #e4e4df, 0 2px 0 #d5d5cf, 0 30px 50px -14px rgba(0,0,0,.48), 0 70px 100px -24px rgba(0,0,0,.4); }
.bcard-back { width: 79%; left: 14%; top: 38%; transform: rotate(5deg);
  box-shadow: 0 1px 0 #e4e4df, 0 2px 0 #d5d5cf, 0 24px 44px -12px rgba(0,0,0,.42), 0 60px 90px -24px rgba(0,0,0,.36); }
.bc-tag { position: absolute; left: 7cqw; right: 7cqw; top: 6.5cqw; margin: 0; text-align: center; font-weight: 600; font-size: 3cqw; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.bc-brand { position: absolute; inset: 0; display: grid; place-items: center; padding: 15cqw 7cqw 9cqw; }
.bc-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 10.5cqw; line-height: 1; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.bc-wordmark.long { font-size: 8cqw; }
.bc-wordmark.xlong { font-size: 6.2cqw; }
.bc-logo { display: block; max-width: 70cqw; max-height: 20cqw; width: auto; height: auto; object-fit: contain; }
.bc-contact { position: absolute; left: 7cqw; bottom: 7cqw; display: grid; gap: .7cqw; font-weight: 500; font-size: 3.3cqw; line-height: 1.35; }
.bc-qr { position: absolute; right: 7cqw; bottom: 7cqw; width: 18.8cqw; height: 18.8cqw; display: block; }
@media (max-width: 900px) { .bonus-grid { grid-template-columns: 1fr; } .bonus-stage { max-width: 520px; } }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); }
.contact-grid.no-form { grid-template-columns: 1fr; max-width: 640px; }
.contact-info { display: grid; gap: 22px; align-content: start; }
.contact-line { display: flex; gap: 14px; margin: 0; align-items: flex-start; }
.contact-line .ic { width: 24px; height: 24px; color: var(--primary); margin-top: 4px; }
.contact-line > span { display: grid; gap: 2px; }
.lbl { font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.contact-form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.contact-form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot: humans never see it, bots fill it */
.contact-form label { display: grid; gap: 6px; font-weight: 600; font-size: var(--step--1); }
.contact-form input, .contact-form textarea, .contact-form select { font: inherit; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: calc(var(--r) * .6); background: var(--bg); color: var(--text); width: 100%; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form label small { font-weight: 400; }   /* "(nije obvezno)" next to the inquiry-log question */
.contact-form .btn { justify-self: start; }
.form-note { margin: 0; }
.form-note.sent { color: #2fa55a; font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* footer */
.site-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, var(--bg)); padding: clamp(40px, 6vw, 64px) 0 28px; color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.footer-brand .logo { height: 40px; width: auto; max-width: 180px; margin-bottom: 12px; object-fit: contain; object-position: left; }
.footer-brand .wordmark { display: block; margin-bottom: 8px; }
.footer-nav { display: grid; gap: 6px; align-content: start; }
.footer-nav a { color: var(--text); text-decoration: none; }
.footer-nav a:hover { color: var(--primary); }
/* v3 subpages: the page header is a shorter hero; the nav marks the page you are on */
.hero-band.hero-page { min-height: 48svh; }
.hero-minimal.hero-page { padding-bottom: clamp(32px, 5vw, 56px); }
.nav a[aria-current="page"] { background: color-mix(in srgb, currentColor 12%, transparent); }
.footer-contact p { margin: 0 0 4px; }
.footer-contact a { color: var(--text); }
.footer-legal { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.footer-legal p { margin: 0; }
.demo-note { opacity: .8; }
@media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 22px; } }

/* lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; color: #fff; }
.lightbox::backdrop { background: rgba(10,10,10,.92); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; display: grid; place-items: center; height: 100%; padding: 56px 64px; gap: 12px; grid-template-rows: 1fr auto; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox figcaption { position: static; opacity: 1; transform: none; text-shadow: none; color: rgba(255,255,255,.85); text-align: center; }
.lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lightbox button:hover { background: rgba(255,255,255,.18); }
.lightbox .ic { width: 26px; height: 26px; }
/* `.lightbox .lb-*` (2026-09-10): the three rules below used to be bare `.lb-*` and lost `top` / `transform` to
   `.lightbox button` above (0,1,1 beats 0,1,0), so the X sat at mid-height under the next arrow and could not be
   clicked - Hrvoje: "only if i press esc does it close" */
.lightbox .lb-prev { left: 16px; }
.lightbox .lb-next { right: 16px; }
.lightbox .lb-close { top: 16px; right: 16px; transform: none; }
@media (max-width: 720px) { .lightbox figure { padding: 64px 12px 24px; } .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 0; transform: none; } .lightbox img { max-height: calc(100vh - 150px); } }

/* motion */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- "Mobilne aplikacije" (agency site, hand-written type "apps"; 2026-09-06) ----------
   Page-level text reuses .eyebrow / h2 / .lead / .highlights / .btn and the theme tokens. The two phones are
   pure CSS in em units: .apps-box sets the em from the column width (container query), so they scale with it.
   Colours inside the screens are the handoff's (clients' example apps), not the theme's. */
.section.sec-apps { background: var(--surface); padding-top: var(--section); overflow: hidden; }
.sec-apps + .section { padding-top: var(--section); }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 64px; align-items: center; }
.apps-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.apps-text .eyebrow, .apps-text h2, .apps-text .lead { margin: 0; }
.apps-text .lead { max-width: 56ch; text-wrap: pretty; }
.apps-list { list-style: none; padding: 0; margin: 6px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; max-width: 640px; }
.apps-list .ic { flex: none; padding: 5px; border-radius: 50%; background: var(--primary-soft); margin-top: 2px; }
.apps-list strong { line-height: 1.35; }
.apps-list span { font-size: var(--step--1); line-height: 1.5; }
.apps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 10px 0 0; }
/* the stage: glow + two staggered phones, in a figure whose caption says they are an illustration (2026-10-02) */
.apps-figure { margin: 0; min-width: 0; }
.apps-caption { position: static; opacity: 1; transform: none; text-shadow: none; pointer-events: auto; margin: 14px 0 0; text-align: center; }  /* not the gallery's hover overlay (figcaption above) */
.apps-stage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; container-type: inline-size; min-width: 0; }
.apps-glow { position: absolute; inset: -8% -12% -6%; background: radial-gradient(58% 52% at 52% 52%, color-mix(in srgb, var(--primary) 17%, transparent), transparent 72%); pointer-events: none; }
.apps-box { position: relative; font-size: 2.058cqw; height: 62em; line-height: 1.3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.phone { position: absolute; width: 27em; height: 56em; }
.phone-front { left: 0; bottom: 0; z-index: 2; }
.phone-back { left: 27.67em; top: 0; font-size: .889em; z-index: 1; }
.ph-btn { position: absolute; left: -.24em; width: .3em; border-radius: .15em 0 0 .15em; background: linear-gradient(90deg, #3a3d43, #181a1d); }
.ph-btn.l1 { top: 9.5em; height: 2.2em; }
.ph-btn.l2 { top: 13.6em; height: 4.6em; }
.ph-btn.l3 { top: 19.2em; height: 4.6em; }
.ph-btn.r { left: auto; right: -.24em; top: 15.4em; height: 7em; border-radius: 0 .15em .15em 0; background: linear-gradient(90deg, #181a1d, #3a3d43); }
.ph-frame { position: absolute; inset: 0; border-radius: 4.6em; background: linear-gradient(160deg, #6b6f76 0%, #2c2f34 22%, #15171a 50%, #2a2d32 78%, #5c6067 100%);
  box-shadow: inset 0 0 0 .1em rgba(255,255,255,.28), 0 2.8em 4.4em -1.4em rgba(8,30,52,.5), 0 .9em 1.8em -.6em rgba(0,0,0,.35); }
.phone-back .ph-frame { box-shadow: inset 0 0 0 .1em rgba(255,255,255,.26), 0 2.2em 3.6em -1.4em rgba(8,30,52,.38), 0 .8em 1.6em -.6em rgba(0,0,0,.3); }
.ph-bezel { position: absolute; inset: .36em; border-radius: 4.25em; background: #07080a; box-shadow: inset 0 0 .6em rgba(0,0,0,.9); }
.ph-screen { position: absolute; inset: 1.15em; border-radius: 3.5em; overflow: hidden; }
.ph-cam { position: absolute; top: .85em; left: 50%; transform: translateX(-50%); width: 7.4em; height: 2.15em; border-radius: 1.1em; background: #000; display: flex; align-items: center; justify-content: flex-end; padding-right: .55em; }
.ph-cam i { width: .95em; height: .95em; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3d5c, #05070c 70%); }
.ph-glass { position: absolute; inset: 0; border-radius: 3.5em; background: linear-gradient(112deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 40%); pointer-events: none; }
.ph-status { display: flex; justify-content: space-between; align-items: center; height: 3.4em; padding: 1.3em 2.3em 0 2.5em; }
.ph-status b { font-size: 1.25em; font-weight: 600; }
.ph-status div { display: flex; align-items: center; gap: .5em; }
.ph-signal { display: flex; align-items: flex-end; gap: .13em; }
.ph-signal i { width: .3em; background: currentColor; border-radius: .05em; }
.ph-signal i:nth-child(1) { height: .5em; } .ph-signal i:nth-child(2) { height: .7em; } .ph-signal i:nth-child(3) { height: .9em; } .ph-signal i:nth-child(4) { height: 1.1em; }
.ph-batt { display: block; width: 2.2em; height: 1.1em; border: .13em solid currentColor; border-radius: .35em; padding: .12em; }
.ph-batt i { display: block; width: 82%; height: 100%; background: currentColor; border-radius: .12em; }
.ph-home { width: 8em; height: .45em; border-radius: .3em; background: currentColor; opacity: .85; margin: .9em auto 0; }
/* screen 1 - "Obrt Marić", a bookkeeping app (front phone) */
.app-book { background: #f5f7f9; color: #0f1f2e; }
.ab-head { display: flex; align-items: center; justify-content: space-between; padding: 1.3em 1.8em .3em; }
.ab-head small { display: block; font-size: 1.05em; color: #5b6875; }
.ab-head strong { display: block; font-size: 1.55em; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin-top: .15em; }
.ab-avatar { width: 3.2em; height: 3.2em; border-radius: 50%; background: #dbe7e2; color: #0e7c5b; display: grid; place-items: center; font-weight: 700; }
.ab-avatar span { font-size: 1.35em; }
.ab-hero { margin: 1.1em 1.8em 0; padding: 1.4em 1.5em 1.5em; border-radius: 1.6em; background: #0f1f2e; color: #fff; }
.ab-hero small { display: block; font-size: 1.05em; color: #a9b6c3; }
.ab-hero strong { display: block; font-size: 2.5em; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: .2em; }
.ab-badge { display: inline-flex; align-items: center; gap: .5em; margin-top: .9em; padding: .4em .8em .4em .7em; border-radius: 99em; background: rgba(52,199,123,.18); color: #5fe3a1; font-size: 1.05em; font-weight: 600; }
.ab-badge i { width: .55em; height: .55em; border-left: .16em solid currentColor; border-top: .16em solid currentColor; transform: translateY(.12em) rotate(45deg); }
.ab-card { margin: .9em 1.8em 0; padding: 1.3em 1.5em 1.2em; border-radius: 1.6em; background: #fff; border: .08em solid #e3e8ed; }
.ab-ct { display: flex; justify-content: space-between; align-items: baseline; }
.ab-ct b { font-size: 1.2em; font-weight: 600; }
.ab-ct span { font-size: 1em; color: #5b6875; }
.ab-bars { display: flex; align-items: flex-end; gap: .6em; height: 8.5em; margin-top: 1.2em; }
.ab-bars i { flex: 1; border-radius: .4em .4em .15em .15em; background: #cfe0d9; }
.ab-bars i:nth-child(1) { height: 34%; } .ab-bars i:nth-child(2) { height: 42%; } .ab-bars i:nth-child(3) { height: 40%; } .ab-bars i:nth-child(4) { height: 55%; }
.ab-bars i:nth-child(5) { height: 63%; } .ab-bars i:nth-child(6) { height: 74%; background: #9fc4b5; } .ab-bars i:nth-child(7) { height: 100%; background: #0e7c5b; }
.ab-labels { display: flex; gap: .6em; margin-top: .5em; }
.ab-labels span { flex: 1; text-align: center; font-size: .9em; color: #5b6875; }
.ab-labels span:last-child { color: #0e7c5b; font-weight: 700; }
.ab-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin: .9em 1.8em 0; }
.ab-kpi { padding: 1.1em 1.2em; border-radius: 1.4em; background: #fff; border: .08em solid #e3e8ed; }
.ab-kpi small { display: block; font-size: 1em; color: #5b6875; }
.ab-kpi strong { display: block; font-size: 1.35em; font-weight: 700; margin-top: .3em; letter-spacing: -.01em; }
.ab-kpi span { display: block; font-size: .95em; color: #5b6875; margin-top: .15em; }
.ab-kpi span.up { color: #0e7c5b; font-weight: 600; }
.ab-tabs { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2em 1.8em .6em; background: #f5f7f9; border-top: .08em solid #e3e8ed; }
.ab-tabs > div { display: flex; justify-content: space-around; padding: .2em .2em 0; }
.ab-tabs span { display: flex; flex-direction: column; align-items: center; gap: .4em; color: #5b6875; }
.ab-tabs span i { width: 1.7em; height: 1.7em; border-radius: .5em; background: #c9d2db; }
.ab-tabs span b { font-size: .95em; font-weight: 500; }
.ab-tabs span.on { color: #0e7c5b; }
.ab-tabs span.on i { background: #0e7c5b; }
.ab-tabs span.on b { font-weight: 600; }
/* screen 2 - "Salon Ema", an appointment-booking app (back phone) */
.app-salon { background: #fff; color: #111827; }
.as-top { display: flex; align-items: center; justify-content: space-between; padding: 1.1em 1.8em .2em; }
.as-top i { display: block; width: 1.2em; }
.as-top .as-back { width: .8em; height: .8em; border-left: .16em solid #111827; border-bottom: .16em solid #111827; transform: rotate(45deg); margin-left: .4em; }
.as-top b { font-size: 1.3em; font-weight: 600; white-space: nowrap; }
.as-row { display: flex; align-items: center; gap: 1em; padding: 1em 1.8em 0; }
.as-avatar { width: 3.3em; height: 3.3em; border-radius: 50%; background: #ede9fe; color: #6d28d9; display: grid; place-items: center; font-weight: 700; }
.as-avatar span { font-size: 1.4em; }
.as-row strong { display: block; font-size: 1.4em; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.as-row small { display: block; font-size: 1.05em; color: #6b7280; margin-top: .2em; }
.as-label { font-size: .95em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; margin: 1.5em 1.8em .55em; }
.as-opts { display: flex; flex-direction: column; gap: .6em; margin: 0 1.8em; }
.as-opt { display: flex; align-items: center; gap: .9em; padding: .9em 1.1em; border-radius: 1.3em; border: .14em solid #e5e7eb; background: #fff; }
.as-opt.sel { border-color: #6d28d9; background: #f5f3ff; }
.as-radio { flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; border: .14em solid #d1d5db; }
.as-opt.sel .as-radio { border-color: #6d28d9; }
.as-opt.sel .as-radio::after { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #6d28d9; }
.as-opt > div { flex: 1; min-width: 0; }
.as-opt strong { display: block; font-size: 1.2em; font-weight: 600; line-height: 1.2; }
.as-opt small { display: block; font-size: 1.02em; color: #6b7280; margin-top: .15em; }
.as-opt b { font-size: 1.15em; font-weight: 700; }
.as-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin: 0 1.8em; }
.as-day { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.as-day small { font-size: .9em; color: #6b7280; }
.as-day span { width: 2.7em; height: 2.7em; border-radius: 50%; display: grid; place-items: center; font-size: 1.1em; font-weight: 600; }
.as-day.sel small { color: #6d28d9; font-weight: 600; }
.as-day.sel span { background: #6d28d9; color: #fff; font-weight: 700; }
.as-day.off small, .as-day.off span { color: #9ca3af; }
.as-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin: 0 1.8em; }
.as-times span { padding: .75em 0; text-align: center; border-radius: .9em; border: .12em solid #e5e7eb; font-size: 1.1em; font-weight: 600; }
.as-times span.sel { border-color: #6d28d9; background: #6d28d9; color: #fff; font-weight: 700; }
.as-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 2em 1.8em .6em; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 40%); }
.as-btn { padding: 1.15em; border-radius: 1.4em; background: #6d28d9; color: #fff; text-align: center; font-size: 1.2em; font-weight: 600; box-shadow: 0 .8em 1.6em -.6em rgba(109,40,217,.6); }
.as-foot .ph-home { margin-top: 1.1em; }

/* ---------- mobile-app pitch on demo home pages (src/demo/app_pitch.py, 2026-09-06) ----------
   Text = the site's classes; the phone = the .phone/.ph-* shell of the apps section above; the screen
   (.app-demo) mocks the business's own app in the theme's colours and type from the demo's facts. */
.pitch-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pitch-text .lead { max-width: 56ch; }
.pitch-list { margin: 0 0 20px; }
.pitch-note { max-width: 52ch; margin: 0; }
.pitch-stage { position: relative; width: 100%; max-width: 340px; margin-inline: auto; container-type: inline-size; }
.pitch-box { position: relative; font-size: 3.7cqw; height: 56em; line-height: 1.3; }
.pitch-box .phone { left: 0; top: 0; }
.app-demo { background: var(--bg); color: var(--text); font-family: var(--font-body); }
.ad-head { display: flex; align-items: center; min-height: 4.2em; padding: .6em 2em 0; }
.ad-logo { display: block; max-width: 12em; max-height: 3.2em; width: auto; height: auto; object-fit: contain; }
.ad-name { font-family: var(--font-display); font-weight: 800; font-size: 1.7em; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.ad-name.long { font-size: 1.35em; }
.ad-name.xlong { font-size: 1.1em; }
.ad-hero { position: relative; margin: .9em 1.6em 0; border-radius: 1.4em; overflow: hidden; background: var(--primary); color: var(--primary-ink); min-height: 11em; display: flex; align-items: flex-end; }
.ad-hero .img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.62)); }
.ad-hero.has-image { color: #fff; }
.ad-hero-text { position: relative; width: 100%; padding: 1.2em 1.3em 1.3em; display: grid; gap: .8em; justify-items: start; }
.ad-tag { margin: 0; font-size: 1.15em; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.ad-btn { display: inline-block; padding: .55em 1.1em; border-radius: .8em; background: var(--surface); color: var(--text); font-size: 1em; font-weight: 650; line-height: 1.2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ad-hero:not(.has-image) .ad-btn { background: var(--primary-ink); color: var(--primary); }
.ad-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: .9em 1.6em 0; }
.ad-tile { display: flex; align-items: center; gap: .6em; padding: .9em 1em; border-radius: 1.1em; background: var(--surface); border: .08em solid var(--line); font-size: 1em; font-weight: 600; min-width: 0; }
.ad-tile .ic { width: 1.6em; height: 1.6em; flex: none; color: var(--primary); }
.ad-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-rows { display: grid; gap: .55em; margin: .9em 1.6em 0; }
.ad-row { display: flex; align-items: center; gap: .8em; padding: .75em 1em; border-radius: 1.1em; background: var(--surface); border: .08em solid var(--line); font-size: .95em; }
.ad-row .ic { width: 1.5em; height: 1.5em; flex: none; color: var(--primary); }
.ad-row > span { display: grid; min-width: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-row small { font-size: .8em; color: var(--muted); }
.ad-tabs { position: absolute; left: 0; right: 0; bottom: 0; padding: .9em 1.4em .6em; background: var(--surface); border-top: .08em solid var(--line); }
.ad-tabs > div { display: flex; justify-content: space-around; gap: .4em; }
.ad-tabs span { display: flex; flex-direction: column; align-items: center; gap: .35em; color: var(--muted); min-width: 0; max-width: 25%; }
.ad-tabs span .ic { width: 1.6em; height: 1.6em; }
.ad-tabs span b { font-size: .78em; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-tabs span.on { color: var(--primary); }
.ad-tabs span.on b { font-weight: 650; }
@media (max-width: 900px) { .pitch-grid { grid-template-columns: 1fr; } .pitch-stage { max-width: 300px; } }

/* ---------- booking calendar (hand-written type "booking"; src/demo/booking.py, 2026-09-22) ----------
   Left the month grid (two months, one on phones), right the request form (the contact form's styles).
   Taken days are hatched, the picked range fills with the primary colour; everything from the theme tokens. */
.booking-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.booking-grid > * { min-width: 0; }   /* a long submit label must not widen the column past a phone screen */
.booking-grid.no-cal { grid-template-columns: 1fr; max-width: 640px; }
.booking-form .btn { white-space: normal; text-align: left; }
.cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(16px, 2.5vw, 28px); }
.cal-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-res { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--step--1); }
.cal-res select, .booking-form select { font: inherit; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: calc(var(--r) * .6); background: var(--bg); color: var(--text); }
.booking-form select { width: 100%; padding: 12px 14px; }
.cal-nav { display: flex; gap: 6px; margin-left: auto; }
.cal-nav .btn { padding: .4em .9em; line-height: 1; font-size: 1.1rem; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cal-month h3 { font: 700 var(--step-0) var(--font-body); text-align: center; margin: 0 0 8px; }
.cal-month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-month th { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 0 6px; }
.cal-month td { padding: 2px; text-align: center; }
.day { width: 100%; aspect-ratio: 1; border: 0; border-radius: calc(var(--r) * .5); background: var(--primary-softer); color: var(--text); font: inherit; font-size: var(--step--1); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s; }
.day:hover:not(:disabled) { background: var(--primary-soft); }
.day.today { box-shadow: inset 0 0 0 2px var(--primary); }
.day.past { background: transparent; color: var(--muted); opacity: .5; cursor: default; }
.day.taken { background: repeating-linear-gradient(-45deg, var(--line) 0 4px, transparent 4px 9px); color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.day.sel { background: var(--primary-soft); }
.day.start, .day.end { background: var(--primary); color: var(--primary-ink); font-weight: 700; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 16px 0 0; }
.cal-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .lg::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--primary-softer); border: 1px solid var(--line); }
.cal-legend .taken::before { background: repeating-linear-gradient(-45deg, var(--line) 0 3px, transparent 3px 6px); }
.cal-legend .sel::before { background: var(--primary); border-color: var(--primary); }
.cal-hint, .cal-note { margin: 8px 0 0; }
.bf-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .booking-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cal-months { grid-template-columns: 1fr; } }

/* news section (sections/news.html, src/demo/news.py, 2026-09-23): cards on the home page, a list on the news page */
.news-cards .news-card { text-decoration: none; color: inherit; }
.news-date { margin: 0 0 4px; letter-spacing: .02em; }
.news-list { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.news-row { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; border-top: 1px solid var(--line); padding-top: clamp(16px, 2.5vw, 28px); }
.news-row.no-image { grid-template-columns: 1fr; }
.news-row .news-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.news-row .news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-row h3 { margin: 0; }
.news-note { margin: 16px 0 0; }
@media (max-width: 600px) { .news-row { grid-template-columns: 1fr; } }
.news-card h3, .news-row h3 { overflow-wrap: anywhere; }
.news-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* a post page (news module step 3: novosti/<slug>.html in the prose chrome) */
.news-row h3 a, .post-body a { color: inherit; }
.post-photos { display: grid; gap: 14px; margin: 1.4rem 0; }
.post-photos figure { margin: 0; }
.post-photos img { width: 100%; height: auto; border-radius: var(--r); display: block; background-size: cover; }
.post-photos figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .35rem; }
.post-back { margin-top: 2.4rem; }
.post-body ul { list-style: disc; padding-left: 1.3rem; }
.post-body ul li { margin: .35rem 0; }

/* --- AI chat assistant (templates/site/_chat.html, src/chat_service.py, 2026-09-24) ---------------------------- */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-family: var(--font-body); }
.chat-fab { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border: 0; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-ink); font: inherit; font-size: var(--step--1); font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.18); cursor: pointer; }
.chat-fab .ic { width: 22px; height: 22px; }
.chat-bubble { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); text-align: left; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: .75rem .9rem; box-shadow: 0 8px 24px rgba(0,0,0,.14); cursor: pointer; font: inherit; font-size: var(--step--1); line-height: 1.45; }
.chat-panel { position: absolute; right: 0; bottom: calc(100% + 10px); width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px)); display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 16px 48px rgba(0,0,0,.2); overflow: hidden; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; background: var(--primary); color: var(--primary-ink); }
.chat-head strong { display: block; line-height: 1.2; }
.chat-head .chat-biz { display: block; font-size: var(--step--1); opacity: .85; }
.chat-close { background: transparent; border: 0; color: inherit; cursor: pointer; padding: .25rem; display: inline-flex; }
.chat-close .ic { width: 20px; height: 20px; }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.chat-msg { max-width: 88%; padding: .6rem .8rem; border-radius: var(--r); font-size: var(--step--1); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.bot { align-self: flex-start; background: var(--primary-soft); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 4px; }
.chat-msg.err { background: color-mix(in srgb, #c94b3a 12%, var(--bg)); }
.chat-msg.wait { color: var(--muted); font-style: italic; }
.chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.chat-chip { font: inherit; font-size: var(--step--1); padding: .4rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.chat-chip:hover { background: var(--primary-soft); }
.chat-form { display: flex; gap: .5rem; padding: .6rem .75rem; border-top: 1px solid var(--line); }
.chat-form textarea { flex: 1; resize: none; font: inherit; font-size: var(--step--1); padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); max-height: 6rem; }
.chat-send { border: 0; border-radius: var(--radius-sm); background: var(--primary); color: var(--primary-ink); padding: 0 .8rem; cursor: pointer; display: inline-flex; align-items: center; }
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-send .ic { width: 20px; height: 20px; }
.chat-note { margin: 0; padding: .35rem 1rem .7rem; font-size: 12px; line-height: 1.4; color: var(--muted); }
.chat-note a { color: inherit; }
@media (max-width: 480px) {
  /* a compact sheet at the bottom instead of the whole screen (Hrvoje 2026-10-01: "less aggresive"); site.js sets
     --chat-kb / --chat-vh from the visual viewport so the sheet stays above the on-screen keyboard. The second height
     wins where dvh is understood; older browsers keep the first. */
  .chat.open .chat-panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(12px + var(--chat-kb, 0px)); width: auto;
    height: min(420px, 58vh); height: min(420px, 58dvh, calc(var(--chat-vh, 100dvh) - 24px)); }
  .chat.open .chat-fab { display: none; }
}
@media print { .chat { display: none; } }
/* hidden must win over the display rules above (the panel is display:flex; the UA's [hidden]{display:none} loses to a class) */
.chat[hidden], .chat-panel[hidden], .chat-bubble[hidden], .chat-chips[hidden] { display: none; }
/* ---------- "Automatizacija po mjeri" (agency site, hand-written type "automation"; 2026-09-30) ----------
   The copy reuses .eyebrow / h2 / .lead / .highlights / .btn and the theme tokens. The picture is the inline SVG
   of sections/automation.html, drawn in the same tokens (or the photo `image` names). The dashed connectors
   move unless the visitor prefers reduced motion. */
.section.sec-automation { overflow: hidden; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px 64px; align-items: center; }
.auto-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.auto-text .eyebrow, .auto-text h2, .auto-text .lead { margin: 0; }
.auto-text .lead { max-width: 56ch; text-wrap: pretty; }
.auto-list { list-style: none; padding: 0; margin: 6px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; max-width: 640px; }
.auto-list .ic { flex: none; padding: 5px; border-radius: 50%; background: var(--primary-soft); margin-top: 2px; }
.auto-list strong { line-height: 1.35; }
.auto-list span { font-size: var(--step--1); line-height: 1.5; }
.auto-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 10px 0 0; }
.auto-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; min-width: 0; }
.auto-visual::before { content: ""; position: absolute; inset: -6% -10%; background: radial-gradient(58% 52% at 50% 50%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 72%); pointer-events: none; }
.auto-art { position: relative; display: block; width: 100%; height: auto; }
.auto-art text { font-family: inherit; }
.auto-photo { position: relative; border-radius: var(--r); }
.auto-flow { stroke-dasharray: 3 9; animation: auto-flow 1.4s linear infinite; }
@keyframes auto-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .auto-flow { animation: none; stroke-dasharray: none; opacity: .45; } }
/* ---------- automation pitch on demo home pages (sections/auto_pitch.html, 2026-09-30) ----------
   Right under the mobile-app pitch, same rule. The layout classes are the agency section's (.auto-*) above;
   the two paragraphs and the note are its own. */
.section.sec-auto-pitch { overflow: hidden; }
.auto-more { max-width: 56ch; margin: 0; text-wrap: pretty; }
.auto-note { max-width: 52ch; margin: 0; }
/* ---------- hand-set tones, media, item extras and the self-assessment (config SECTION_HAND_SET, 2026-10-12) ----------
   Erwinspekt v7, his mail: "malo smanjiti bijelu boju barem na naslovnom dijelu te sa strane". A tone makes a section a
   full-width band: dark = the secondary colour, brand = the primary colour, tint = the surface colour. Inside a dark or
   brand band the page's tokens are redefined to the band's ink, so cards, lines, muted text and ghost buttons follow
   it; --page-* keep the page's own colours for what must stay light inside a band (the self-assessment card). */
:root { --page-bg: var(--bg); --page-text: var(--text); --page-surface: var(--surface); }
.section.tone-dark, .section.tone-brand, .section.tone-tint, .section[class*="tone-"] + .section { padding-top: var(--section); }
.section.tone-tint { background: var(--surface); }
.section.tone-tint .card, .section.tone-tint .faq, .section.tone-tint .feature-row, .section.tone-tint .jump a { background: var(--bg); }
.section.tone-dark, .hero.hero-dark { background: var(--secondary); color: var(--secondary-ink); --bg: var(--secondary); --text: var(--secondary-ink); }
.section.tone-brand { background: var(--primary); color: var(--primary-ink); --bg: var(--primary); --text: var(--primary-ink); }
.section.tone-dark, .section.tone-brand, .hero.hero-dark {
  --surface: color-mix(in srgb, var(--text) 8%, var(--bg));
  --muted: color-mix(in srgb, var(--text) 80%, var(--bg));
  --line: color-mix(in srgb, var(--text) 20%, var(--bg));
  --line-strong: color-mix(in srgb, var(--text) 42%, var(--bg));
  --primary-soft: color-mix(in srgb, var(--text) 14%, var(--bg));
  --primary-softer: color-mix(in srgb, var(--text) 8%, var(--bg));
}
.section.tone-dark .eyebrow, .hero.hero-dark .eyebrow { color: color-mix(in srgb, var(--primary) 45%, #fff); }
.section.tone-brand .eyebrow { color: color-mix(in srgb, var(--text) 85%, transparent); }
.section.tone-brand .btn-primary { background: var(--secondary); color: var(--secondary-ink); }
.section.tone-dark a:not(.btn), .section.tone-brand a:not(.btn) { color: inherit; }
.section.tone-dark .icon-bubble { background: var(--primary); color: var(--primary-ink); }
.section.tone-dark .highlights .ic, .hero.hero-dark .ic { color: color-mix(in srgb, var(--primary) 45%, #fff); }
.section.tone-dark .split-text .lead, .section.tone-brand .split-text .lead, .section.tone-dark .centered-text .lead { color: var(--text); }
/* the hero on the secondary colour (hero.tone "dark"): the photo stays, the white around it goes */
.hero.hero-dark .hero-sub { color: color-mix(in srgb, var(--text) 88%, var(--bg)); }
.hero.hero-dark .hero-visual { box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.hero-claim { font-weight: 800; font-size: var(--step-1); line-height: 1.35; margin: -.6em 0 1.5em; color: var(--primary); max-width: 58ch; }
.hero.hero-dark .hero-claim { color: color-mix(in srgb, var(--primary) 70%, #fff); }
.hero .accent-line { color: var(--primary); }
.hero.hero-dark .accent-line { color: color-mix(in srgb, var(--primary) 82%, #fff); }
/* the picture of a split / about section at its own proportions (fit "natural"), a video of the client's (media()) */
.fit-natural { aspect-ratio: var(--ar) !important; }
.fit-natural img, .fit-natural video { width: 100%; height: 100%; object-fit: contain; }
.split-grid.media-natural .split-visual, .wide-visual.fit-natural, .columns-visual.fit-natural { box-shadow: var(--shadow-md); }
/* a tall picture or video: as wide as the column allows, but never taller than the screen - the width follows the height
   cap through the proportions, so the box keeps them and nothing is letterboxed */
.fit-natural.tall, .has-video.tall { width: min(100%, calc(min(78svh, 720px) * (var(--ar)))); height: auto; justify-self: center; margin-inline: auto; }
.media-video { display: block; background: #0b0b0c; border-radius: inherit; }
.video-file { max-width: 960px; margin-inline: auto; aspect-ratio: var(--ar); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.video-file video { width: 100%; height: 100%; object-fit: contain; }
.video-file.tall { width: min(100%, calc(min(78svh, 720px) * (var(--ar)))); }
@media (max-width: 700px) {
  .fit-natural { aspect-ratio: var(--ar-m, var(--ar)) !important; }
  .fit-natural.tall, .has-video.tall { width: min(100%, calc(min(72svh, 600px) * (var(--ar-m, var(--ar))))); }
  .video-file.tall { width: min(100%, calc(min(72svh, 600px) * (var(--ar)))); }
}
.section-note { color: var(--text); margin: 0 0 24px; max-width: 62ch; }
/* the columns layout's lead in the text colour, as the split and centered layouts print theirs (the muted grey
   measured 4.38:1 on a light grey page, 2026-10-12) */
.columns-text .lead { color: var(--text); }
/* service items with their own heading, badge, note and button (ITEM_HAND_SET) */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(-1 * clamp(12px, 2vw, 24px)) 0 clamp(36px, 5vw, 60px); }
.jump a { padding: .55em 1.05em; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text);
  text-decoration: none; font-weight: 650; font-size: var(--step--1); transition: border-color .2s, color .2s, transform .2s var(--ease); }
.jump a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
[data-radius="full"] .jump a { border-radius: var(--radius-full); }
.alternating .split-grid { scroll-margin-top: calc(var(--header-h) + 16px); }
.split-text .eyebrow { margin-bottom: .55em; }
.badge { display: inline-block; padding: .3em .75em; border-radius: 999px; background: var(--secondary); color: var(--secondary-ink); font-size: .74rem;
  font-weight: 750; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; line-height: 1.2; }
.card-badge { margin: 0 0 4px; }
.item-note { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--primary); background: var(--primary-softer);
  border-radius: 0 calc(var(--r) * .6) calc(var(--r) * .6) 0; font-size: var(--step--1); color: var(--text); display: grid; gap: 6px; justify-items: start; }
.item-note p { margin: 0; }
/* a badge in a dark or brand band: light, with the band's colour as its ink */
.section.tone-dark .badge, .section.tone-brand .badge, .hero.hero-dark .badge { background: var(--page-surface); color: var(--secondary); }
.item-cta { margin: 18px 0 0; }
.card.has-extras .item-cta { margin-top: auto; padding-top: 14px; }
.rich-list { display: grid; gap: 6px; margin: 0 0 1em; }
.rich-list li { position: relative; padding-left: 1.35em; }
.rich-list li::before { content: ""; position: absolute; left: .1em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--primary); }
.card-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--primary-ink);
  background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--primary) 80%, #fff), var(--primary) 55%, color-mix(in srgb, var(--primary) 70%, #000)); }
.ph-title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); text-align: center; letter-spacing: .02em;
  line-height: 1.1; text-wrap: balance; border: 2px solid color-mix(in srgb, var(--primary-ink) 55%, transparent); padding: 1em 1.2em; margin: 0 12%; }
/* the self-assessment (sections/selfcheck.html): a light card, also inside a dark band */
.sc-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sc-grid.has-side { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.sc-main .section-head { margin-bottom: 18px; }
.sc-intro { margin-bottom: 0; }
.sc-app { margin-top: 28px; padding: clamp(20px, 3vw, 36px); border-radius: var(--r); box-shadow: var(--shadow-lg);
  --bg: var(--page-surface); --text: var(--page-text); --surface: var(--page-bg);
  --muted: color-mix(in srgb, var(--text) 64%, var(--bg)); --line: color-mix(in srgb, var(--text) 12%, var(--bg));
  --line-strong: color-mix(in srgb, var(--text) 24%, var(--bg)); --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--bg));
  --primary-softer: color-mix(in srgb, var(--primary) 5%, var(--bg)); background: var(--bg); color: var(--text); }
.sc-app .btn-ghost { color: var(--text); border-color: var(--line-strong); }
.sc-app .btn-primary { background: var(--primary); color: var(--primary-ink); }
.sc-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.sc-q { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; line-height: 1.25; margin: 0 0 22px; padding: 0; text-wrap: pretty; }
.sc-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-weight: 650; font-size: var(--step--1); color: var(--muted); }
.sc-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .3s var(--ease); }
.sc-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.sc-answer { font: inherit; font-weight: 750; letter-spacing: .04em; padding: 1em 1.2em; border-radius: var(--r); border: 2px solid var(--line-strong);
  background: var(--bg); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s var(--ease); }
.sc-answer:hover { border-color: var(--primary); transform: translateY(-1px); }
.sc-answer[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.sc-nav { margin: 18px 0 0; }
.sc-back[disabled] { visibility: hidden; }
.sc-result:focus { outline: none; }
.sc-score { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; line-height: 1.15; margin: 0 0 12px; }
.sc-verdict { font-weight: 700; font-size: var(--step-1); line-height: 1.35; padding: 14px 18px; border-radius: calc(var(--r) * .6); margin: 0 0 22px; border-left: 4px solid currentColor; }
.sc-verdict.lvl-bad { background: #fdecea; color: #9f2216; }
.sc-verdict.lvl-warn { background: #fff3df; color: #7d4a00; }
.sc-verdict.lvl-good { background: #e7f5ec; color: #1b6e3e; }
.sc-advice-title { font-size: var(--step-1); margin: 0 0 12px; }
.sc-advice { display: grid; gap: 10px; margin: 0 0 24px; }
.sc-advice li { position: relative; padding-left: 1.7em; }
.sc-advice li::before { content: ""; position: absolute; left: 0; top: .2em; width: 1.05em; height: 1.05em; border-radius: 4px; background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary); }
.sc-allyes { font-weight: 600; margin: 0 0 22px; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.sc-actions .btn { white-space: normal; text-align: center; }
.sc-disclaimer { color: var(--muted); margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.sc-side { min-width: 0; }
.sc-visual { border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .sc-grid.has-side { grid-template-columns: 1fr; } }
/* the contact form's own fields (contact.fields) and the self-assessment's result riding along */
.req { color: var(--primary); margin-left: 2px; }
.contact-form input[type="file"] { padding: 10px; }
.sc-carry { display: grid; gap: 4px; padding: 12px 14px; border: 1px dashed var(--primary); border-radius: calc(var(--r) * .6); background: var(--primary-softer); }
.sc-carry p { margin: 0; }
.sc-carry-text { white-space: pre-line; }
.sc-carry .btn { justify-self: start; margin-top: 6px; }
/* hidden must win over the display rules above (the UA's [hidden]{display:none} loses to a class - the chat's trap too) */
.sc-carry[hidden], .sc-quiz[hidden], .sc-result[hidden], .sc-start[hidden], .sc-advice-box[hidden], .sc-allyes[hidden] { display: none; }
/* phones (2026-10-12, found on Erwinspekt v7 at 320-414 px): a long button label ("Pošaljite upit za dokumentaciju i
   nosivosti") kept on one line widened its grid column past the screen, and so did one long word in an uppercase H2
   ("PRETPOSTAVLJATE"). Buttons may wrap there, grid columns may shrink below their content, and an uppercase H2 follows
   the screen's width as the H1 does since 2026-10-07 (unchanged from ~460 px up). */
.split-grid > *, .hero-grid > *, .columns-grid > *, .sc-grid > *, .contact-grid > * { min-width: 0; }
h2, h3 { overflow-wrap: break-word; }
[data-headings="uppercase"] h2 { font-size: min(var(--step-4), 8.2vw); }
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }
/* the footer's social links (base.html, 2026-10-12) */
.footer-social { display: flex; gap: 12px; margin: 10px 0 0; }
.footer-social a { color: var(--text); display: inline-flex; }
.footer-social a:hover { color: var(--primary); }
.footer-social .ic { width: 22px; height: 22px; }

/* ---------- the opening-screen directions (2026-10-22, config.HERO_DIRECTIONS; hand-set while Hrvoje picks) ---------- */
.hero-katalog, .hero-brojke { padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(36px, 5vw, 64px); }
.hero-katalog .display, .hero-brojke .display { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); margin: 0; }
.kat-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.kat-side .hero-sub { margin-top: 0; }
.kat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); list-style: none; padding: 0; margin: 0; }
.kat-grid.kat-3, .kat-grid.kat-5, .kat-grid.kat-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kat-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kat-img { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface); }
.kat-name { font-weight: 650; font-size: var(--step-0); line-height: 1.3; }
.brojke-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.brojke-visual { aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.brojke-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: clamp(28px, 4vw, 48px) 0 0; border-top: 2px solid var(--text); }
.brojka { padding: 18px 20px 0 0; min-width: 0; }
.brojka + .brojka { border-left: 1px solid var(--line); padding-left: 20px; }
.brojka dt { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; color: var(--primary); letter-spacing: -.02em; overflow-wrap: anywhere; }
.brojka dd { margin: 8px 0 0; color: var(--muted); font-size: var(--step-0); line-height: 1.4; }
.hero-prica { position: relative; min-height: 82svh; display: flex; align-items: flex-end; color: #fff; isolation: isolate; padding: calc(var(--header-h) + 48px) 0 clamp(48px, 7vw, 96px); }
.hero-prica > .container { width: 100%; }
.hero-prica .hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-prica .hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-prica .hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.18) 62%, rgba(0,0,0,.32)); }
.prica-title { font-family: var(--font-body); font-size: var(--step-0); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 14px; color: rgba(255,255,255,.9); }
.prica-quote { margin: 0 0 28px; }
.prica-quote p { font-family: var(--font-display); font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.12; font-weight: 650; margin: 0; letter-spacing: -.01em; color: #fff; max-width: 24ch; }
.prica-quote footer { margin-top: 14px; font-size: var(--step-0); color: rgba(255,255,255,.86); }
.hero-plakat { background: var(--primary); color: var(--primary-ink); padding: calc(var(--header-h) + clamp(32px, 5vw, 72px)) 0 0; }
.plakat-eyebrow { color: var(--primary-ink); opacity: .85; }
.plakat-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.3rem + 5.6vw, 6.6rem); line-height: .98; letter-spacing: -.03em; margin: 0; max-width: 17ch; color: var(--primary-ink); overflow-wrap: break-word; }
/* padding, not a bottom margin: with no photo strip under it (2026-10-30, the look's find on bracko-2, dekor-mdm) a margin collapsed out of the coloured block and the text sat on its edge */
.plakat-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(28px, 4vw, 48px); }
.plakat-sub { max-width: 52ch; margin: 0; font-size: var(--step-1); line-height: 1.45; opacity: .92; }
.plakat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: clamp(160px, 22vw, 300px); }
.plakat-strip.plakat-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plakat-strip.plakat-1 { grid-template-columns: minmax(0, 1fr); }
.plakat-cell { overflow: hidden; min-width: 0; }
@media (max-width: 900px) {
  .kat-head, .brojke-grid { grid-template-columns: minmax(0, 1fr); }
  .kat-grid, .kat-grid.kat-3, .kat-grid.kat-5, .kat-grid.kat-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .brojke-row { grid-template-columns: minmax(0, 1fr); }
  .brojka + .brojka { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 14px; }
  .plakat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plakat-strip .plakat-cell:nth-child(3) { display: none; }
}

/* the logo's plate (demos; src/demo/logo_plate.py, Hrvoje 2026-10-22): only in the header state - and the footer - whose
   background would swallow the logo: a white plate for a dark logo, a near-black one for a light logo */
.site-header:not(.over-hero)[data-plate] .brand .logo, .site-header.over-hero.scrolled[data-plate] .brand .logo,
.site-header.over-hero:not(.scrolled)[data-plate-top] .brand .logo, .site-footer[data-plate] .footer-brand .logo {
  padding: 5px 10px; border-radius: 9px; box-sizing: content-box; }
.site-header:not(.over-hero)[data-plate="light"] .brand .logo, .site-header.over-hero.scrolled[data-plate="light"] .brand .logo,
.site-header.over-hero:not(.scrolled)[data-plate-top="light"] .brand .logo, .site-footer[data-plate="light"] .footer-brand .logo {
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.site-header:not(.over-hero)[data-plate="dark"] .brand .logo, .site-header.over-hero.scrolled[data-plate="dark"] .brand .logo,
.site-header.over-hero:not(.scrolled)[data-plate-top="dark"] .brand .logo, .site-footer[data-plate="dark"] .footer-brand .logo {
  background: #1d1d1b; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* ---------- the proposal layer (demos only; src/demo/proposal.py, Hrvoje 2026-10-22) ----------
   Ours, not the owner's site: Prvi Red's blue and the system's own type, whatever the demo's theme. The bar stands
   above the site's header and scrolls away; site.js keeps the fixed header under it while it shows. */
.pp-bar, .pp-end, .pp-dialog, .pp-old { --pp-blue: #0f4c81; --pp-ink: #1d1d1b; --pp-paper: #ffffff; --pp-soft: #e8eff7;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.pp-embedded .pp-bar, .pp-embedded .pp-end { display: none !important; }
.pp-bar { position: relative; z-index: 60; background: var(--pp-blue); color: #fff; font-size: 14px; line-height: 1.35; }
.pp-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 10px; }
.pp-bar-text { flex: 1 1 340px; min-width: 0; margin: 0; }
.pp-bar-text strong { display: block; font-size: 15px; font-weight: 700; }
.pp-bar-sub { display: block; font-size: 12.5px; color: #d6e4f2; }
.pp-bar-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pp-bar-more { display: contents; }
.pp-bar-foot { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: 12.5px; color: #d6e4f2; }
.pp-short { display: none; }
.pp-bar-foot a { color: #fff; font-weight: 600; }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 8px 11px; border-radius: 8px; border: 1.5px solid var(--pp-blue); background: transparent; color: var(--pp-blue);
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, color .15s; }
.pp-btn:hover { background: var(--pp-soft); }
.pp-btn.pp-primary { background: var(--pp-blue); color: #fff; }
.pp-btn.pp-primary:hover { background: #0b3a63; }
.pp-btn:focus-visible { outline: 2px solid #f2b84b; outline-offset: 2px; }
.pp-btn.pp-lg { font-size: 15px; padding: 12px 18px; }
.pp-bar .pp-btn, .pp-end .pp-btn { border-color: rgba(255,255,255,.75); color: #fff; }
.pp-bar .pp-btn:hover, .pp-end .pp-btn:hover { background: rgba(255,255,255,.14); }
.pp-bar .pp-btn.pp-primary, .pp-end .pp-btn.pp-primary { background: #fff; border-color: #fff; color: var(--pp-blue); }
.pp-bar .pp-btn.pp-primary:hover, .pp-end .pp-btn.pp-primary:hover { background: var(--pp-soft); }
.pp-more { display: none; }
@media (max-width: 760px) {
  .pp-bar-inner { padding-block: 8px; gap: 6px 10px; }
  .pp-bar-text { flex: 1 1 0; }
  .pp-bar-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-long { display: none; }
  .pp-short { display: inline; }
  .pp-bar-sub, .pp-bar-foot { display: none; }
  .pp-more { display: inline-flex; }
  .pp-bar-more { display: none; }
  .pp-bar.open .pp-bar-sub { display: block; }
  .pp-bar.open .pp-bar-foot { display: flex; }
  .pp-bar.open .pp-bar-text strong { white-space: normal; }
  .pp-bar.open .pp-bar-more { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
  .pp-bar.open .pp-bar-actions { flex-basis: 100%; }
  .pp-wide-only { display: none !important; }
}
/* the closing block above the home page's contact section */
.pp-end { background: var(--pp-blue); color: #fff; }
.pp-end-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pp-end h2 { color: #fff; font-family: inherit; font-weight: 750; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; margin: 6px 0 12px; text-transform: none; letter-spacing: -.01em; }
.pp-end p { margin: 0; color: #dce8f4; font-size: 16.5px; line-height: 1.55; }
.pp-end .pp-end-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: .85; }
.pp-end-actions { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.pp-end .pp-end-contact, .pp-end .pp-end-until { flex-basis: 100%; font-size: 14px; }
.pp-end-contact a { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .pp-end-grid { grid-template-columns: minmax(0, 1fr); } }
/* the dialogs: the owner's answer, the terms, the demo on a phone */
.pp-dialog { border: 0; border-radius: 14px; padding: 26px 24px 22px; width: min(520px, calc(100vw - 24px)); max-height: calc(100svh - 24px);
  overflow: auto; background: var(--pp-paper); color: var(--pp-ink); box-shadow: 0 30px 80px rgba(0,0,0,.35); font-size: 15.5px; line-height: 1.5; }
.pp-dialog::backdrop, .pp-old::backdrop { background: rgba(8,18,30,.6); }
.pp-dialog h2 { font-family: inherit; font-size: 1.45rem; font-weight: 750; margin: 0 28px 8px 0; color: var(--pp-ink); text-transform: none; letter-spacing: 0; }
.pp-dialog h3 { font-family: inherit; font-size: 1rem; font-weight: 700; margin: 16px 0 6px; color: var(--pp-ink); text-transform: none; }
.pp-dialog p { margin: 0 0 12px; }
.pp-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eef1f4; color: var(--pp-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.pp-close:hover { background: #dfe5eb; }
.pp-form { display: grid; gap: 6px; }
.pp-form label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.pp-form label span { font-weight: 400; color: #5b6270; }
.pp-form input, .pp-form textarea { width: 100%; box-sizing: border-box; font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 10px 12px; border: 1.5px solid #c9d1da; border-radius: 8px; background: #fff; color: var(--pp-ink); }
.pp-form input:focus, .pp-form textarea:focus { outline: none; border-color: var(--pp-blue); box-shadow: 0 0 0 3px var(--pp-soft); }
.pp-form .pp-btn { margin-top: 10px; justify-self: start; }
.pp-form .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pp-lead { color: #3d4450; }
.pp-dialog .pp-note { min-height: 1.4em; margin: 4px 0 0; font-weight: 600; color: #a23b2a; }
.pp-dialog .pp-note.sent { color: #1f6b3a; }
.pp-small { font-size: 13px; color: #5b6270; }
.pp-small a { color: var(--pp-blue); }
.pp-list { margin: 0 0 12px; padding-left: 1.2rem; }
.pp-list li { margin: 3px 0; }
.pp-phone-dialog { width: fit-content; padding: 46px 18px 14px; background: #10161d; color: #dfe6ee; text-align: center; }
.pp-phone-dialog .pp-close { background: #2a3542; color: #fff; }
.pp-phone-dialog .pp-small { color: #b9c4cf; margin: 10px 0 0; }
.pp-phone-frame { width: 410px; box-sizing: border-box; height: min(800px, calc(100svh - 140px)); border: 10px solid #000; border-radius: 38px; overflow: hidden; background: #fff; margin: 0 auto; }
.pp-phone-frame iframe { display: block; width: 390px; height: 100%; border: 0; }
/* the owner's current homepage, laid over the demo */
.pp-old { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #eceff2; color: var(--pp-ink); }
.pp-old-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--pp-blue); color: #fff; }
.pp-old-bar p { margin: 0; font-size: 15px; }
.pp-old-bar span { color: #d6e4f2; font-size: 13px; }
.pp-old .pp-btn.pp-primary { background: #fff; border-color: #fff; color: var(--pp-blue); }
.pp-old[open] { display: flex; flex-direction: column; }
.pp-old-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px; box-sizing: border-box; }
.pp-old-facts { max-width: 760px; margin: 0 auto 16px; padding: 12px 16px 12px 34px; list-style: disc; background: #fff7e6; border: 1px solid #edd8a6; border-radius: 10px; color: #4a3a12; font-size: 15px; line-height: 1.5; }
.pp-old-facts li { margin: 2px 0; }
.pp-old picture, .pp-old img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.pp-old img { box-shadow: 0 10px 40px rgba(0,0,0,.18); border-radius: 6px; background: #fff; }