/* Fabriqon site — one stylesheet for every page.
   Layout concept: a plan view of the company. The home page opens on the isometric map of the
   factory; every area page opens on its film, then the owner's problems, then the benefits, each
   proven by a short clip. Colours are the product's own tokens (fabriqon Design System v3): steel
   neutrals on hue 250, brand yellow only for actions, brand blue for links and the map pins. */

:root {
  --bg: oklch(97.5% 0.004 250);
  --surface: #ffffff;
  --surface-2: oklch(96% 0.006 250);
  --ink: oklch(24% 0.02 250);
  --ink-2: oklch(42% 0.02 250);
  --muted: oklch(50% 0.02 250);
  --line: oklch(90% 0.01 250);
  --line-strong: oklch(80% 0.012 250);
  --blue: oklch(50% 0.10 250);
  --blue-ink: oklch(43% 0.11 250);
  --blue-soft: oklch(94.5% 0.022 250);
  --yellow: #FAC747;
  --yellow-hover: oklch(80% 0.148 84);
  --yellow-ink: oklch(24% 0.02 250);
  --yellow-soft: oklch(95.5% 0.045 92);
  --red: oklch(54% 0.15 25);
  --red-soft: oklch(94.5% 0.03 25);
  --green: oklch(54% 0.11 150);
  --map-bg: #EEF2F7;
  --video-bg: oklch(24% 0.02 250);
  --video-ink: oklch(97.5% 0.004 250);
  --shadow: 0 1px 2px oklch(24% 0.02 250 / 0.06), 0 8px 24px oklch(24% 0.02 250 / 0.06);

  --font-display: 'Archivo', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Headings: hero = every page title, 1 = section, 2 = block inside a section, 3 = card. */
  --step-hero: clamp(2.25rem, 1.2rem + 2.4vw, 3.25rem);
  --step-1: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-3: 1.125rem;
  --step-body: 1.0625rem;
  --step-small: 0.875rem;
  --step-caps: 0.75rem;

  --wrap: 1200px;
  --radius: 8px;
  --radius-lg: 14px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* Light only, by decision (user, 02.11): the site never switches to a dark palette. */
:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
img, svg, video { max-width: 100%; }
a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -0.015em; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.eyebrow { font: 600 var(--step-caps)/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.brand-name { text-transform: none; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.section { padding-block: clamp(40px, 5vw, 72px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(20px, 2.5vw, 32px); }
.section-head h2 { font-size: var(--step-1); line-height: 1.12; font-weight: 700; }
/* On wide screens a head with a lede puts the lede beside the title instead of under it. */
@media (min-width: 1000px) {
  .section-head:has(> .lede) { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: end; }
  .section-head:has(> .lede) > :not(.lede) { grid-column: 1; }
  .section-head:has(> .lede) > .lede { grid-column: 2; grid-row: 1 / span 2; }
  /* Side layout: the head on the left, its content on the right. */
  .side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .side > .section-head { margin-bottom: 0; max-width: none; grid-template-columns: 1fr; }
  .side > .section-head > .lede { grid-column: 1; grid-row: auto; }
}
.info-groups { display: grid; gap: clamp(40px, 5vw, 64px); }
.info-groups > .side + .side { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; border-radius: var(--radius); }
.skip:focus { left: 16px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--radius); font: 600 0.9375rem/1 var(--font-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s ease-out, border-color .15s ease-out, transform .15s ease-out; white-space: nowrap; }
.btn-primary { background: var(--yellow); color: var(--yellow-ink); }
.btn-primary:hover { background: var(--yellow-hover); color: var(--yellow-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ── Header and navigation ───────────────────────────────────────────── */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in oklch, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
/* The wordmark is heavy and its box includes the q's tail, so 24px sits level with the 15px menu instead of towering over it. */
.brand-logo { display: block; height: 24px; width: auto; }
.footer-grid .brand-logo { height: 26px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav-links > li > a, .nav-links > li > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--radius); font: 500 0.9375rem/1 var(--font-body); color: var(--ink-2); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links > li > button[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.has-menu { position: relative; }
.chev { width: 14px; height: 14px; transition: transform .15s ease-out; }
button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: -12px; width: min(760px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; }
.mega-group { display: grid; gap: 2px; align-content: start; }
.mega-group .eyebrow { padding: 6px 10px; }
.mega a { display: grid; gap: 2px; padding: 10px; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.mega a:hover, .mega a[aria-current="page"] { background: var(--surface-2); }
.mega a strong { font: 600 0.9375rem/1.3 var(--font-body); }
.mega a span { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.menu-toggle svg { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .nav { height: 60px; }
  .menu-toggle { display: inline-flex; }
  .nav-links, .nav-cta { display: none; }
  .site-header.open .nav-links, .site-header.open .nav-cta { display: flex; }
  .site-header.open .nav { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 8px; }
  .site-header.open .nav-links { order: 3; flex-direction: column; align-items: stretch; width: 100%; margin: 0; }
  .site-header.open .nav-cta { order: 4; width: 100%; margin: 0 0 8px; }
  .site-header.open .nav-cta .btn { flex: 1; }
  .mega { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 8px; grid-template-columns: 1fr; }
}

/* ── Home: the map ───────────────────────────────────────────────────── */
/* The copy never covers the drawing or a pin. map.js decides the layout from the real sizes:
   - overlay: when the copy fits in the empty sky right of the hall, it stands there and the map starts
     right under the header (.compact first tries a smaller headline);
   - otherwise the copy sits above the map: headline beside the lede and the film button, the proof
     row under both; one column on a phone. */
.hero-copy { position: relative; z-index: 3; display: grid; gap: 14px 16px; padding: clamp(28px, 4vw, 48px) var(--gutter-r) 8px var(--gutter-l); grid-template-areas: "eyebrow" "title" "lede" "actions" "proof"; }
.hero-copy > .eyebrow { grid-area: eyebrow; }
.hero-copy > h1 { grid-area: title; }
.hero-copy > .lede { grid-area: lede; }
.hero-copy > .hero-actions { grid-area: actions; }
.hero-copy > .proof-row { grid-area: proof; }
.hero h1 { font-size: var(--step-hero); line-height: 1.02; font-weight: 800; font-stretch: 92%; }
.hero h1 .line { display: block; }
.hero .lede { font-size: 1.0625rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 760px) {
  .map-stage:not(.overlay) .hero-copy { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); align-items: start; grid-template-areas: "eyebrow eyebrow" "title lede" "title actions" "proof proof"; }
  .map-stage:not(.overlay) .hero-copy > .lede { padding-top: 6px; }
}
.map-stage.overlay .hero-copy { position: absolute; top: clamp(20px, 3.5%, 56px); right: max(24px, 3%); width: min(500px, 36%); padding: 0; }
.map-stage.overlay.compact .hero-copy { width: min(440px, 33%); gap: 12px; }
.map-stage.overlay.compact .lede { font-size: 1rem; }
.proof-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; color: var(--muted); font-size: var(--step-small); }
.proof-row li { display: inline-flex; align-items: center; gap: 8px; }
.proof-row li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.map-stage { position: relative; background: var(--map-bg); border-bottom: 1px solid var(--line); }
.map-frame { position: relative; max-width: 1440px; margin: 0 auto; }
.map-canvas { position: relative; }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg .zone-hl { opacity: 0; transition: opacity .2s ease-out; pointer-events: none; }
.map-svg .zone-hl.on { opacity: 1; }
.map-hint { position: absolute; left: max(24px, 3%); bottom: 6%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 0.8125rem; box-shadow: var(--shadow); pointer-events: none; }
.map-hint svg { width: 16px; height: 16px; color: var(--blue); }

.pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; color: var(--ink); z-index: 2; }
.pin-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font: 600 0.875rem/1 var(--font-body); white-space: nowrap; transition: background .15s ease-out, transform .15s ease-out, border-color .15s ease-out; }
.pin-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.pin-dot svg { width: 12px; height: 12px; }
.pin-stem { width: 2px; height: 18px; background: var(--blue); opacity: .55; }
.pin-foot { width: 10px; height: 5px; border-radius: 50%; background: var(--blue); opacity: .4; }
.pin:hover .pin-label, .pin:focus-visible .pin-label, .pin.on .pin-label { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); transform: translateY(-2px); }
.pin:hover .pin-dot, .pin.on .pin-dot { background: var(--ink); }
.pin-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font: 400 0.8125rem/1.45 var(--font-body); color: var(--ink-2); white-space: normal; opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
.pin-tip strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.pin-tip em { display: block; margin-top: 8px; font-style: normal; color: var(--blue-ink); font-weight: 600; }
.pin:hover .pin-tip, .pin:focus-visible .pin-tip, .pin.on .pin-tip { opacity: 1; }

.map-list { display: none; }
@media (max-width: 860px) {
  .pin-label { font-size: 0; gap: 0; padding: 4px; }
  .pin-tip { display: none; }
  .pin-stem { height: 10px; }
  .map-hint { display: none; }
  .map-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 16px; }
  .map-list a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font: 600 0.9375rem/1.2 var(--font-body); }
  .map-list .num { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 0.75rem; flex: none; }
}
@media (max-width: 860px) { .pin-dot { width: 24px; height: 24px; font: 700 0.75rem/1 var(--font-body); } }
/* On a phone the pins crowd each other; the legend under the map carries the links there. */
@media (max-width: 560px) { .map-canvas .pin { display: none; } }

/* ── Video placeholder (home film, area films, clips) ─────────────────── */
.film { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--video-bg); color: var(--video-ink); isolation: isolate; }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; z-index: -1; }
.film-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(oklch(100% 0 0 / .05) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / .05) 1px, transparent 1px); background-size: 48px 48px; }
.film-btn { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 24px; text-align: center; font: inherit; }
.film-play { width: 76px; height: 76px; border-radius: 50%; background: var(--yellow); color: var(--yellow-ink); display: grid; place-items: center; box-shadow: 0 10px 30px oklch(0% 0 0 / .35); transition: transform .15s ease-out; }
.film-play svg { width: 28px; height: 28px; margin-left: 4px; }
.film-btn:hover .film-play { transform: scale(1.06); }
.film-title { font: 700 1.125rem/1.3 var(--font-display); max-width: 36ch; }
.film-meta { font-size: 0.8125rem; opacity: .75; }
.film-state { position: absolute; left: 16px; bottom: 14px; right: 16px; display: none; align-items: center; gap: 10px; font-size: 0.8125rem; }
.film-state .bar { flex: 1; height: 3px; border-radius: 3px; background: oklch(100% 0 0 / .2); overflow: hidden; }
.film-state .bar i { display: block; width: 0; height: 100%; background: var(--yellow); }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--video-bg); }
.film.ready .film-poster { opacity: 1; }
.film.ready .film-btn { background: linear-gradient(180deg, transparent 55%, oklch(0% 0 0 / .28)); }
.film.ready.playing .film-badge { display: none; }
.film-modal { padding: 0; border: 0; background: transparent; width: min(1200px, calc(100vw - 32px)); max-width: none; overflow: visible; }
.film-modal::backdrop { background: oklch(15% 0.02 250 / .82); }
.film-modal-box { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--video-bg); box-shadow: 0 30px 80px oklch(0% 0 0 / .45); }
.film-modal video { display: block; width: 100%; height: 100%; border-radius: var(--radius-lg); }
.film-modal-close { position: absolute; top: -56px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.film-modal-close svg { width: 20px; height: 20px; }
.booking-modal { padding: 0; border: 0; background: transparent; width: min(1000px, calc(100vw - 32px)); max-width: none; overflow: visible; margin-top: 72px; }
.booking-modal::backdrop { background: oklch(15% 0.02 250 / .82); }
.booking-modal-box { position: relative; height: min(760px, calc(100dvh - 112px)); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 30px 80px oklch(0% 0 0 / .45); }
.booking-modal iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
.film-badge { position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: oklch(15% 0.02 250 / .72); color: #fff; font: 600 0.75rem/1 var(--font-body); pointer-events: none; }
.film.playing .film-btn { display: none; }
.film.playing:has(.film-video) .film-state { display: none; }
.film.playing .film-state { display: flex; }
.film.playing .film-state .bar i { animation: fill 12s linear forwards; }
.film-slot { position: absolute; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; background: oklch(100% 0 0 / .12); font: 600 0.6875rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.film.small { border-radius: var(--radius); }
.film.small .film-play { width: 56px; height: 56px; }
.film.small .film-play svg { width: 22px; height: 22px; }
.film.small .film-title { font-size: 0.9375rem; }
@keyframes fill { to { width: 100%; } }

/* ── Home sections ───────────────────────────────────────────────────── */
.os-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.os-copy { display: grid; gap: 18px; }
.os-copy h2 { font-size: var(--step-1); line-height: 1.1; font-weight: 700; }
.os-points { display: grid; gap: 12px; margin-top: 6px; }
.os-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink-2); }
.os-points svg { width: 20px; height: 20px; color: var(--green); margin-top: 3px; }
@media (max-width: 900px) { .os-grid { grid-template-columns: 1fr; } }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.value { display: grid; gap: 10px; align-content: start; padding: 28px 24px; }
.value + .value { border-left: 1px solid var(--line); }
.value .word { font: 800 var(--step-2)/1.1 var(--font-display); }
.value p { color: var(--ink-2); font-size: 0.9375rem; }
.value .gain { color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 960px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value:nth-child(3) { border-left: 0; } .value:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } .value + .value { border-left: 0; border-top: 1px solid var(--line); } }

/* Under the home collage: the same question answered with fabriqon. The answer and how it works on the left,
   the screen that answers it on the right, which plays its clip. The label is never uppercased: the brand is lowercase. */
.silos-answers { margin-top: 8px; }
.silos-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 40px; align-items: center; padding: 28px; border-radius: var(--radius-lg); background: var(--blue-soft); }
.answer-body { display: grid; gap: 10px; justify-items: start; }
.answer-label { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--step-small)/1.2 var(--font-body); color: var(--blue-ink); }
.answer-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.answer-title { font-size: var(--step-2); line-height: 1.2; font-weight: 700; }
.answer-text { color: var(--ink-2); line-height: 1.55; max-width: 56ch; }
.answer-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 600; color: var(--blue-ink); }
.answer-more svg { width: 16px; height: 16px; transition: transform .15s ease-out; }
.answer-more:hover svg { transform: translateX(3px); }
.answer-film { position: relative; display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; aspect-ratio: 16 / 9; }
.answer-film img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.answer-film:hover img { transform: scale(1.02); }
.answer-film:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; }
.answer-watch { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 var(--step-small)/1 var(--font-body); box-shadow: var(--shadow); }
.answer-watch svg { width: 16px; height: 16px; }
.answer-watch em { font-style: normal; font-weight: 400; opacity: .7; }
@media (max-width: 860px) { .silos-answer { grid-template-columns: 1fr; padding: 20px; } }

/* „Sisteme care nu vorbesc între ele” (home): a collage on a fixed 120 × 78 em canvas whose em is a 120th of its
   width, so every piece, its text and the SVG links scale together. Under 760px the canvas keeps 760px and the
   phone sees its middle, where the question sits. The pieces drift a little, each on its own beat. */
.silos-stage { container-type: inline-size; overflow: clip; padding-block: 8px; }
.silos { --cw: max(100cqw, 760px); position: relative; width: var(--cw); margin-left: calc((100cqw - var(--cw)) / 2); height: calc(var(--cw) * 78 / 120); font-size: calc(var(--cw) / 120); font-family: var(--font-body); color: var(--ink); line-height: 1.35; }
.silo-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(calc(var(--from, 1) * 2em)); transition: opacity .45s ease, transform .45s ease, visibility 0s .45s; }
.silo-scene.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.silos-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.silos-tabs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.silos-tab { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 0.9375rem/1.2 var(--font-body); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.silos-tab:hover { border-color: var(--ink-2); color: var(--ink); }
.silos-tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.silos-arrow { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.silos-arrow:hover { border-color: var(--ink-2); }
.silos-arrow svg { width: 18px; height: 18px; }
.silos-arrow.prev svg { transform: scaleX(-1); }
@media (max-width: 640px) { .silos-nav { flex-wrap: nowrap; } .silos-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .silos-tab { padding: 8px 12px; font-size: 0.875rem; white-space: nowrap; } }
.f-board { padding: 1.2em 1.3em 1.4em; background: #fff; border: 0.5em solid oklch(82% 0.01 250); border-radius: 0.6em; box-shadow: var(--shadow); }
.board-head { display: block; margin-bottom: 0.6em; font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; font-size: 1.5em; color: oklch(42% 0.12 260); }
.board-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5em; }
.board-cols > div { display: grid; gap: 0.4em; align-content: start; padding-left: 0.5em; border-left: 1px solid oklch(88% 0.008 250); min-height: 8em; }
.board-cols b { font-size: 0.9em; color: var(--muted); }
.mag { padding: 0.35em 0.5em; border-radius: 0.3em; background: oklch(93% 0.06 92); font-weight: 600; box-shadow: 0 0.15em 0.3em oklch(24% 0.02 250 / .12); }
.mag:nth-child(3n) { background: oklch(92% 0.04 220); } .mag:nth-child(3n+1) { background: oklch(92% 0.05 150); }
.mag.gone { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; opacity: .7; }
.mag.q { background: var(--red-soft); color: var(--red); }
.f-board .scribble { display: block; margin-top: 0.7em; font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; font-size: 1.4em; color: var(--red); transform: rotate(-3deg); }
.f-ask p { max-width: 24em; }
/* sales: the offer PDF, the calculator with its tape, a voice note nobody played, the mail thread, the delivery calendar */
.f-pdf { background: oklch(93% 0.004 250); border: 1px solid var(--line); border-radius: 0.6em; box-shadow: var(--shadow); overflow: hidden; }
.pdf-bar { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.9em; background: oklch(32% 0.01 250); color: #fff; font-size: 1.05em; }
.pdf-bar span { padding: 0.1em 0.45em; border-radius: 0.25em; background: oklch(55% 0.19 27); font-weight: 700; font-size: 0.85em; }
.pdf-page { position: relative; display: block; margin: 0.9em 1.1em 1.1em; padding: 1.2em 1.3em 1.4em; background: #fff; box-shadow: 0 0.2em 0.6em oklch(24% 0.02 250 / .12); }
.pdf-logo { display: block; width: 3.4em; height: 1.4em; border-radius: 0.2em; background: oklch(88% 0.02 250); font-size: 1em; }
.pdf-line { display: block; height: 0.45em; margin-top: 0.45em; width: 60%; border-radius: 1em; background: oklch(92% 0.006 250); font-size: 1em; } .pdf-line.short { width: 38%; }
.pdf-page > b { display: block; margin: 0.8em 0 0.5em; letter-spacing: .04em; }
.pdf-page dl { display: grid; grid-template-columns: 1fr auto; gap: 0.3em 1em; margin: 0; padding-top: 0.5em; border-top: 1px solid var(--line); }
.pdf-page dt { color: var(--ink-2); } .pdf-page dd { margin: 0; font-weight: 600; text-align: right; }
.f-pdf .scribble, .f-clipboard .sign, .f-order .scribble { display: block; margin-top: 0.5em; font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; color: oklch(48% 0.15 260); transform: rotate(-4deg); font-size: 1.3em; }
.f-calc { display: grid; }
.tape { list-style: none; margin: 0 1.2em; padding: 0.7em 0.8em 1em; background: #fffdf6; border: 1px solid var(--line); border-bottom: 0; font-family: 'Courier New', var(--font-mono); font-size: 1.05em; box-shadow: 0 0.2em 0.6em oklch(24% 0.02 250 / .08); clip-path: polygon(0 0.4em, 8% 0, 16% 0.4em, 24% 0, 32% 0.4em, 40% 0, 48% 0.4em, 56% 0, 64% 0.4em, 72% 0, 80% 0.4em, 88% 0, 96% 0.4em, 100% 0, 100% 100%, 0 100%); }
.f-calc .tape { font-size: 0.95em; }
.tape li.err { color: var(--red); }
.calc-body { padding: 0.9em; border-radius: 1em; background: oklch(30% 0.012 250); box-shadow: 0 0.6em 1.4em oklch(24% 0.02 250 / .25); }
.calc-body output { display: block; padding: 0.4em 0.6em; border-radius: 0.4em; background: oklch(82% 0.05 140); color: oklch(25% 0.03 150); font: 600 1.6em/1.2 'Courier New', var(--font-mono); text-align: right; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35em; margin-top: 0.6em; }
.keys i { display: grid; place-items: center; height: 1.9em; border-radius: 0.35em; background: oklch(42% 0.01 250); color: #fff; font-style: normal; font-size: 0.95em; }
.f-voice { padding: 0.8em 1em; border-radius: 1.2em 1.2em 1.2em 0.3em; background: oklch(93% 0.05 140); box-shadow: var(--shadow); }
.voice-row { display: flex; align-items: center; gap: 0.7em; }
.voice-row .play { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: oklch(50% 0.11 150); color: #fff; font-size: 0.9em; }
.wave { display: flex; align-items: center; gap: 0.22em; flex: 1; height: 2.2em; }
.wave i { width: 0.25em; height: calc(var(--h) * 0.2em); border-radius: 1em; background: oklch(50% 0.08 150); }
.voice-row .dur { color: var(--muted); font-size: 0.9em; }
.f-voice p { margin-top: 0.4em; color: var(--ink-2); font-size: 0.9em; } .f-voice p b { color: var(--ink); }
.f-thread { background: #fff; border: 1px solid var(--line); border-radius: 0.8em; box-shadow: var(--shadow); overflow: hidden; }
.f-thread .mail-bar { gap: 0.8em; font-size: 1em; }
.f-thread ol { list-style: none; margin: 0; padding: 0; }
.f-thread li { display: grid; grid-template-columns: 1fr auto; gap: 0.1em 0.8em; padding: 0.6em 1em; border-top: 1px solid var(--line); }
.f-thread li:first-child { border-top: 0; }
.f-thread li time { color: var(--muted); font-size: 0.85em; } .f-thread li span { grid-column: 1 / -1; color: var(--ink-2); }
.f-thread li:last-child { background: var(--red-soft); } .f-thread li:last-child span { color: var(--ink); font-weight: 600; }
.f-calendar { padding: 0.9em 1em 1em; background: #fff; border: 1px solid var(--line); border-radius: 0.8em; box-shadow: var(--shadow); }
.cal-head { display: block; margin-bottom: 0.6em; }
.cal-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 0.4em; overflow: hidden; }
.cal-grid > div { display: grid; align-content: start; gap: 0.3em; min-height: 7.5em; padding: 0.4em; border-left: 1px solid var(--line); }
.cal-grid > div:first-child { border-left: 0; }
.cal-grid b { font-size: 0.85em; color: var(--muted); font-weight: 500; }
.ev { padding: 0.25em 0.4em; border-left: 0.25em solid var(--blue); border-radius: 0.2em; background: var(--blue-soft); font-size: 0.9em; font-weight: 600; }
.ev.clash { border-left-color: var(--red); background: var(--red-soft); color: var(--red); }
/* production: the machine's alarm panel and the clipboard; stock: the rack, the count sheet, the unscanned label */
.f-hmi { padding: 0.9em; border-radius: 0.8em; background: oklch(78% 0.01 250); border: 0.25em solid oklch(68% 0.01 250); box-shadow: var(--shadow); }
.hmi-screen { padding: 0.8em 0.9em; border-radius: 0.4em; background: oklch(22% 0.02 250); color: oklch(85% 0.05 180); font-family: 'Courier New', var(--font-mono); }
.hmi-screen > b { display: block; font-size: 0.95em; color: oklch(75% 0.02 250); }
.alarm { display: block; margin: 0.3em 0 0.5em; padding: 0.3em 0.5em; background: oklch(55% 0.19 27); color: #fff; font-weight: 700; animation: silo-blink 1.2s steps(2, jump-none) infinite; }
@keyframes silo-blink { 50% { background: oklch(35% 0.12 27); } }
.hmi-screen dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.8em; margin: 0; font-size: 0.95em; } .hmi-screen dd { margin: 0; }
.hmi-btns { display: flex; align-items: center; gap: 0.6em; margin-top: 0.7em; }
.hmi-btns i { width: 1.4em; height: 1.4em; border-radius: 50%; box-shadow: inset 0 -0.2em 0 oklch(0% 0 0 / .2); }
.hmi-btns .go { background: oklch(60% 0.15 150); } .hmi-btns .stop { background: oklch(40% 0.02 250); } .hmi-btns .warn { background: oklch(80% 0.15 85); }
.hmi-btns .estop { margin-left: auto; width: 2.6em; height: 2.6em; border-radius: 50%; background: oklch(55% 0.2 27); border: 0.35em solid oklch(82% 0.15 90); }
.f-clipboard { padding: 2em 1.3em 1.4em; background: oklch(60% 0.07 60); border-radius: 0.8em; box-shadow: var(--shadow); }
.f-clipboard::after { content: ""; position: absolute; inset: 1.4em 0.9em 0.9em; background: #fff; border-radius: 0.2em; z-index: 0; }
.f-clipboard > * { position: relative; z-index: 1; }
.f-clipboard .clip { position: absolute; top: -0.5em; left: 50%; width: 7em; height: 2.2em; margin-left: -3.5em; border-radius: 0.5em; background: oklch(75% 0.01 250); box-shadow: inset 0 -0.3em 0 oklch(60% 0.01 250); font-size: 1em; z-index: 2; }
.f-clipboard b { display: block; padding: 0.4em 0 0.4em; border-bottom: 1px solid var(--line); }
.f-clipboard ul { list-style: none; margin: 0.5em 0 0; padding: 0; display: grid; gap: 0.35em; font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; font-size: 1.2em; color: oklch(35% 0.08 260); }
.f-clipboard li { border-bottom: 1px solid oklch(90% 0.02 240); } .f-clipboard li.err { color: var(--red); }
.f-clipboard .sign { font-size: 1.1em; color: var(--muted); }
.rack { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 0.6em 0.6em; border: 0.6em solid oklch(55% 0.13 250); border-top-width: 0; border-radius: 0.2em; background: oklch(95% 0.005 250); box-shadow: var(--shadow); }
.bin { display: grid; grid-template-rows: 1fr auto; min-height: 11em; padding: 0.6em 0.5em 0; border-bottom: 0.7em solid oklch(70% 0.14 55); }
.boxes { display: flex; align-items: flex-end; flex-wrap: wrap-reverse; gap: 0.25em; }
.boxes i { width: 3.6em; height: 2.8em; border-radius: 0.2em; background: oklch(76% 0.08 70); box-shadow: inset 0 0.5em 0 oklch(70% 0.08 70); }
.tag { display: block; margin: 0.4em 0 0.3em; padding: 0.25em 0.45em; background: #fff; border: 1px solid var(--line); font-size: 0.9em; color: var(--ink-2); }
.tag b { display: block; font-family: 'Courier New', var(--font-mono); color: var(--ink); }
.bin.q .tag { border-color: var(--red); color: var(--red); }
.f-label { display: grid; gap: 0.15em; padding: 0.8em 1em; background: #fff; border: 1px solid var(--line); border-radius: 0.3em; box-shadow: var(--shadow); font-family: 'Courier New', var(--font-mono); }
.barcode { display: flex; align-items: stretch; gap: 0.18em; height: 2.6em; margin-bottom: 0.4em; }
.barcode i { width: calc(var(--b) * 0.2em); background: var(--ink); }
.f-label span { color: var(--ink-2); font-size: 0.95em; }
.f-label em { justify-self: start; margin-top: 0.3em; padding: 0.1em 0.5em; border: 0.15em solid var(--red); border-radius: 0.3em; color: var(--red); font-style: normal; font-weight: 700; text-transform: uppercase; transform: rotate(-6deg); }
.silo-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.silo-links > path { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-dasharray: 5 6; animation: silo-dash 2.4s linear infinite; }
@keyframes silo-dash { to { stroke-dashoffset: -22; } }
.silo-break circle { fill: #fff; stroke: var(--red); stroke-width: 1.6; }
.silo-break path { stroke: var(--red); stroke-width: 2; stroke-linecap: round; }
.frag { position: absolute; left: calc(var(--x) * 1em); top: calc(var(--y) * 1em); width: calc(var(--w) * 1em); transform: rotate(var(--r)); animation: silo-drift 7s ease-in-out var(--d) infinite; }
.frag[style*="--w:0;"] { width: max-content; }
@keyframes silo-drift { 50% { transform: rotate(var(--r)) translateY(-0.5em); } }
.frag > * { font-size: 1.2em; }
.frag table { width: 100%; border-collapse: collapse; font-size: 1.15em; }
.f-sheet, .f-erp, .f-chat, .f-mail, .f-report, .f-call { background: #fff; border: 1px solid var(--line); border-radius: 0.8em; box-shadow: var(--shadow); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 0.8em; padding: 0.7em 1em; font-size: 1.1em; font-weight: 600; color: #fff; }
.win-bar.xl { background: oklch(50% 0.11 150); }
.dots { display: inline-flex; gap: 0.35em; } .dots i { width: 0.6em; height: 0.6em; border-radius: 50%; background: oklch(100% 0 0 / .55); }
.f-sheet th, .f-sheet td { padding: 0.45em 0.7em; border: 1px solid oklch(92% 0.006 250); text-align: left; white-space: nowrap; font-weight: 400; }
.f-sheet thead th { background: oklch(96.5% 0.01 150); font-weight: 600; color: var(--ink-2); }
.f-sheet tbody th { width: 2em; background: oklch(97% 0.004 250); color: var(--muted); text-align: center; }
.f-sheet td.err { background: var(--red-soft); color: var(--red); font-weight: 600; }
.win-foot { padding: 0.6em 1em; font-size: 1em; color: var(--muted); border-top: 1px solid var(--line); }
.f-erp { border-radius: 0.2em; border-color: oklch(70% 0.01 250); background: oklch(93% 0.004 90); font-family: Tahoma, Verdana, var(--font-body); }
.win-bar.old { justify-content: space-between; background: linear-gradient(90deg, oklch(38% 0.11 260), oklch(55% 0.09 240)); padding: 0.45em 0.7em; }
.old-btns { display: inline-flex; gap: 0.25em; } .old-btns i { width: 1.2em; height: 1.05em; background: oklch(90% 0.005 90); border: 1px solid oklch(65% 0.01 250); }
.f-erp table { margin: 0.6em; width: calc(100% - 1.2em); background: #fff; border: 1px solid oklch(65% 0.01 250); }
.f-erp th, .f-erp td { padding: 0.35em 0.6em; text-align: left; font-weight: 400; border-bottom: 1px solid oklch(92% 0.004 250); }
.f-erp th { background: oklch(88% 0.006 90); border-right: 1px solid oklch(70% 0.01 250); }
.f-erp td:last-child, .f-erp th:last-child { text-align: right; }
.f-erp .win-foot { border-top-color: oklch(80% 0.01 250); }
.f-chat { background: oklch(96% 0.012 140); }
.chat-bar { display: flex; justify-content: space-between; align-items: baseline; padding: 0.8em 1em; background: #fff; border-bottom: 1px solid var(--line); }
.chat-bar span { font-size: 0.85em; color: var(--muted); }
.f-chat ul { list-style: none; margin: 0; padding: 0.8em; display: grid; gap: 0.5em; }
.f-chat li { max-width: 82%; padding: 0.5em 0.75em; border-radius: 0.8em; background: #fff; box-shadow: 0 1px 1px oklch(24% 0.02 250 / .06); }
.f-chat li b { display: block; font-size: 0.85em; color: var(--blue-ink); }
.f-chat li.me { justify-self: end; background: oklch(93% 0.05 140); }
.f-chat li.me b { color: oklch(42% 0.1 150); }
.typing { display: flex; gap: 0.35em; margin: 0 0.8em 0.9em; padding: 0.7em 0.9em; width: max-content; border-radius: 0.8em; background: #fff; }
.typing i { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--muted); animation: silo-type 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes silo-type { 30% { transform: translateY(-0.35em); opacity: .5; } }
.badge { display: inline-block; min-width: 1.6em; padding: 0.15em 0.5em; border-radius: 99em; background: var(--red); color: #fff; font-size: 0.85em; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.badge.bump { animation: silo-bump .4s ease-out; }
@keyframes silo-bump { 40% { transform: scale(1.25); } }
.mail-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.7em 1em; font-weight: 700; border-bottom: 1px solid var(--line); }
.mail-item { display: grid; grid-template-columns: 0.7em minmax(0, 1fr); gap: 0.7em; padding: 0.8em 1em; align-items: start; }
.mail-item .unread { width: 0.6em; height: 0.6em; margin-top: 0.4em; border-radius: 50%; background: var(--blue); }
.mail-item span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .subj { font-weight: 600; } .mail-item .prev { color: var(--muted); }
.f-call { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8em; align-items: center; padding: 0.8em 1em; border-radius: 1.2em; }
.call-ic { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--red-soft); color: var(--red); }
.call-ic svg { width: 1.3em; height: 1.3em; }
.f-call b { display: flex; align-items: center; gap: 0.5em; } .f-call div > span { color: var(--muted); font-size: 0.9em; }
.f-note { padding: 1.2em 1em 1.6em; background: oklch(92% 0.11 95); box-shadow: 0 0.6em 1.2em oklch(24% 0.02 250 / .14); font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; color: oklch(30% 0.03 250); }
.f-note p { font-size: 1.6em; line-height: 1.2; }
.f-note::before { content: ""; position: absolute; top: -0.6em; left: 40%; width: 4em; height: 1.4em; background: oklch(100% 0 0 / .55); transform: rotate(3deg); }
.f-order { padding: 1.2em 1.3em 1.5em; background: #fff; border: 1px solid var(--line); box-shadow: 0 0.5em 1.4em oklch(24% 0.02 250 / .1); font-family: 'Courier New', var(--font-mono); }
.f-order > b { display: block; padding-bottom: 0.4em; border-bottom: 1px dashed var(--line-strong); }
.f-order ul { list-style: none; margin: 0.5em 0 0; padding: 0; display: grid; gap: 0.2em; color: var(--ink-2); }
.f-order .scribble { display: block; margin-top: 0.5em; font-family: 'Marker Felt', 'Segoe Print', 'Bradley Hand', cursive; color: oklch(48% 0.15 260); transform: rotate(-4deg); font-size: 1.3em; }
.f-order .ring { position: absolute; right: 1.2em; bottom: 0.8em; width: 5em; height: 5em; border-radius: 50%; border: 0.35em solid oklch(60% 0.06 60 / .22); font-size: 1em; }
.f-report { padding: 1em 1.1em; }
.frag-label { position: absolute; top: -2.2em; left: 0; font-size: 1em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.f-report > b { display: block; margin-bottom: 0.6em; }
.f-report ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45em; }
.f-report li { display: flex; justify-content: space-between; gap: 1em; color: var(--ink-2); }
.f-report li b { display: inline-flex; align-items: center; gap: 0.3em; color: var(--green); }
.f-report li svg { width: 1em; height: 1em; }
.f-report .stale { margin-top: 0.8em; padding-top: 0.6em; border-top: 1px solid var(--line); color: var(--red); font-size: 0.95em; }
.f-folder { display: grid; justify-items: center; gap: 0.4em; text-align: center; color: var(--ink-2); }
.folder { position: relative; width: 5.4em; height: 4em; border-radius: 0.4em; background: oklch(72% 0.12 245); font-size: 1em; }
.folder::before { content: ""; position: absolute; top: -0.6em; left: 0; width: 2.2em; height: 1em; border-radius: 0.3em 0.3em 0 0; background: oklch(66% 0.12 245); }
.f-ask { padding: 0.6em 1em; border-radius: 1.2em 1.2em 1.2em 0.3em; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; }
.f-ask span { display: block; font-size: 0.85em; font-weight: 500; color: var(--muted); }
.f-link { animation: none; z-index: 1; }
.f-link > span { display: inline-block; transform: translate(-50%, -50%); padding: 0.25em 0.7em; border-radius: 99em; background: var(--bg); border: 1px dashed var(--line-strong); color: var(--muted); font-style: italic; white-space: nowrap; }
.f-q { z-index: 1; padding: 1.6em 1.8em; border-radius: 1.2em; background: var(--ink); color: #fff; box-shadow: 0 1.2em 3em oklch(24% 0.02 250 / .25); animation: none; }
.f-q .q-time { display: block; font-size: 1.1em; font-weight: 700; color: var(--yellow); }
.f-q p { margin-top: 0.3em; font-family: var(--font-display); font-size: 2.3em; line-height: 1.15; font-weight: 700; }
.f-q .q-foot { display: block; margin-top: 0.7em; font-size: 1.15em; color: oklch(85% 0.01 250); }
/* A phone gets no cropped canvas: the question on top and a pile of the scene's telling pieces under it (.m), each a
   little askew and overlapping the one above, with two of the questions between them. No links, no labels. */
@media (max-width: 640px) {
  .silos-stage { overflow: visible; padding-block: 4px 0; }
  .silos { --cw: 100%; width: 100%; margin-left: 0; height: auto; font-size: 8.6px; }
  .silo-scene { position: relative; inset: auto; display: none; transform: none; transition: none; }
  .silo-scene.on { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 8px; animation: silo-in .35s ease; }
  @keyframes silo-in { from { opacity: 0; transform: translateX(calc(var(--from, 1) * 12px)); } }
  .silo-links, .silo-scene > .frag:not(.m):not(.f-q) { display: none; }
  .silo-scene > .frag { position: relative; left: auto; top: auto; order: var(--o); width: min(calc(var(--w) * 1em), 100%); margin-top: -0.7em; rotate: 1.2deg; animation: none; }
  .silo-scene > .frag:nth-child(even) { align-self: flex-end; rotate: -1.4deg; }
  .silo-scene > .frag[style*="--w:0;"] { width: auto; max-width: 88%; }
  .silo-scene > .f-ask { margin-block: 0.4em 0.2em; z-index: 1; }
  .silo-scene > .f-q { order: -1; width: 100%; margin: 0 0 1.4em; rotate: none; }
  .silo-scene > .f-report .frag-label { position: static; display: block; margin-bottom: 0.4em; }
  .silo-scene > .f-shelf .bin { min-height: 9em; }
}

.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.area-card { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out; }
.area-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.area-card .eyebrow { color: var(--blue-ink); }
.area-card h3 { font-size: var(--step-3); line-height: 1.3; font-weight: 700; }
.area-card p { color: var(--ink-2); font-size: 0.9375rem; }
.area-card .more { margin-top: 4px; font: 600 0.875rem/1 var(--font-body); color: var(--blue-ink); display: inline-flex; align-items: center; gap: 6px; }
.area-card .more svg { width: 16px; height: 16px; }
@media (max-width: 960px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .areas { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; }
.fact { padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 8px; align-content: start; }
.fact h3 { font-size: var(--step-3); line-height: 1.3; font-weight: 700; }
.fact p { color: var(--ink-2); font-size: 0.9375rem; }
/* production-type films: film tiles like the area pages' clips, the type's name and a line under each */
.type-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px); }
.type-film h3 { margin-top: 16px; font-size: var(--step-2); line-height: 1.2; font-weight: 700; }
.type-film p { margin-top: 6px; color: var(--ink-2); font-size: 0.9375rem; max-width: 60ch; }
@media (max-width: 760px) { .type-films { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; background: var(--surface-2); font: 500 0.75rem/1 var(--font-mono); color: var(--ink-2); }
/* Audience ("Pentru cine"): industries as plain pills, fit vs. not-fit side by side. */
.chips.pills { gap: 10px; margin-top: 0; }
.chips.pills .chip { height: auto; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 0.9375rem/1.2 var(--font-body); color: var(--ink); }
.audience-teaser .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font: 600 0.9375rem/1 var(--font-body); color: var(--blue-ink); text-decoration: none; }
.audience-teaser .more svg { width: 16px; height: 16px; }
.sign-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sign-groups .fact h3 { margin-bottom: 6px; }
.audience-list { display: grid; gap: 12px; }
.audience-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; color: var(--ink-2); font-size: 0.9375rem; }
.audience-list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--green); }
.audience-not .audience-list { max-width: 760px; }
.audience-not .audience-list svg { color: var(--red); }
/* The film's spoken text, folded under the film. */
.guide .lede { margin-top: 12px; }
.guide .faq { margin-top: 28px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.contact-h { font-size: var(--step-2); font-weight: 700; margin-bottom: 12px; }
.company { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; }
.company dt { color: var(--muted); }
.company dd { margin: 0; color: var(--ink); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .facts, .sign-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sign-groups { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* Brand blue (design system --color-brand-blue): the logo guide's "white on colour" ground; the yellow action stays. */
.cta-band { background: var(--blue); color: #fff; border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta-band h2 { color: inherit; font-size: var(--step-1); line-height: 1.12; font-weight: 700; }
.cta-band p { color: color-mix(in oklch, #fff 88%, transparent); margin-top: 10px; max-width: 56ch; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-trial { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; color: #fff; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; }
.cta-trial svg { width: 16px; height: 16px; }
/* Paid trial on the customer's own data: an offer card, quieter than the CTA band. */
.pilot h2 { font-size: var(--step-2); font-weight: 700; }
.pilot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
@media (max-width: 760px) { .pilot { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .cta-band { grid-template-columns: 1fr; } }

/* ── Area pages ──────────────────────────────────────────────────────── */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8125rem; color: var(--muted); padding-top: 24px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.area-hero { display: grid; gap: clamp(20px, 3vw, 32px); padding-block: 20px clamp(32px, 4vw, 56px); }
.area-hero-copy { display: grid; gap: 14px; max-width: 860px; }
.area-hero h1 { font-size: var(--step-hero); line-height: 1.04; font-weight: 800; font-stretch: 92%; }
.area-hero .film { box-shadow: var(--shadow); }
.hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-photo { position: relative; margin: 0; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.photo-chip { position: absolute; left: -16px; bottom: 24px; display: grid; gap: 2px; max-width: 70%; padding: 12px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.photo-chip em { font-style: normal; font-size: var(--step-small); color: var(--muted); }
.photo-chip strong { font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
@media (max-width: 860px) { .hero-top { grid-template-columns: 1fr; } .hero-photo img { aspect-ratio: 16 / 10; } .photo-chip { left: 12px; bottom: 12px; } }

.problems { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.problem { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.problem q { font: 600 1.0625rem/1.4 var(--font-display); color: var(--ink); quotes: "„" "”"; letter-spacing: -0.005em; }
.problem p { color: var(--ink-2); font-size: 0.9375rem; }
@media (max-width: 960px) { .problems { --cols: 2 !important; } }
@media (max-width: 600px) { .problems { --cols: 1 !important; } }

.benefits { display: grid; gap: clamp(40px, 6vw, 72px); }
.benefit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.benefit:nth-child(even) .benefit-copy { order: 2; }
.benefit-copy { display: grid; gap: 14px; }
.benefit-copy .eyebrow { color: var(--blue-ink); }
.benefit-copy h3 { font-size: var(--step-2); line-height: 1.18; font-weight: 700; }
.benefit-copy > p { color: var(--ink-2); }
.proof { display: grid; gap: 8px; margin-top: 4px; }
.proof li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: 0.9375rem; color: var(--ink-2); }
.proof svg { width: 16px; height: 16px; color: var(--green); margin-top: 4px; }
.metric { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 4px; padding: 10px 14px; border-radius: var(--radius); background: var(--yellow-soft); align-self: start; justify-self: start; }
.metric b { font: 800 1.5rem/1 var(--font-display); color: var(--ink); }
.metric span { font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 860px) { .benefit { grid-template-columns: 1fr; } .benefit:nth-child(even) .benefit-copy { order: 0; } }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* ── Offer (no packages: how the offer is made, the areas it is built from, what moves the price) ── */
.area-hero-copy .hero-actions { margin-top: 8px; }
.offer-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.offer-step { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.offer-step h3 { font-size: var(--step-3); line-height: 1.3; font-weight: 700; }
.offer-step p { color: var(--ink-2); font-size: 0.9375rem; }
.offer-n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 4px; border-radius: 50%; background: var(--yellow-soft); font: 700 0.9375rem/1 var(--font-display); color: var(--ink); }
.offer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.offer-group { display: grid; gap: 10px; align-content: start; }
.offer-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.offer-group a { position: relative; display: grid; gap: 4px; padding: 14px 40px 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.offer-group a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.offer-group strong { font-weight: 700; }
.offer-group span { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }
.offer-group svg { position: absolute; right: 14px; top: 16px; width: 16px; height: 16px; color: var(--blue-ink); transition: transform .15s ease-out; }
.offer-group a:hover svg { transform: translateX(3px); }
.offer-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 600; }
.offer-note svg { width: 18px; height: 18px; flex: none; color: var(--green); }
.fine { margin-top: 16px; color: var(--muted); font-size: 0.875rem; }
@media (max-width: 1024px) { .offer-steps, .offer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .offer-steps, .offer-groups { grid-template-columns: 1fr; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 520px; }
.price-table th, .price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.price-table thead th { font: 600 var(--step-caps)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.price-table tbody th { font-weight: 500; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] .chev { transform: rotate(180deg); }
.faq details p { padding: 0 18px 18px; color: var(--ink-2); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 48px calc(32px + env(safe-area-inset-bottom, 0px)); margin-top: clamp(24px, 3vw, 40px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 32px; }
.footer-grid h4 { font: 600 var(--step-caps)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.footer-grid li + li { margin-top: 8px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.footer-grid a:hover { color: var(--ink); }
.footer-claim { color: var(--ink-2); font-size: 0.9375rem; margin-top: 12px; max-width: 34ch; }
.footer-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; } .footer-grid > :first-child { grid-column: 1 / -1; } }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal a { color: var(--ink-2); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }

/* ── Legal pages ─────────────────────────────────────────────────────── */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.legal-tabs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; }
.legal-tabs a[aria-current="page"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.legal { max-width: 760px; margin-top: clamp(28px, 4vw, 48px); color: var(--ink-2); }
.legal h1 { font-size: var(--step-hero); line-height: 1.04; font-weight: 800; font-stretch: 92%; color: var(--ink); }
.legal-meta { margin-top: 12px; color: var(--muted); }
.legal h2 { margin-top: 36px; font-size: var(--step-2); font-weight: 700; color: var(--ink); }
.legal h3 { margin-top: 24px; font-size: var(--step-3); font-weight: 700; color: var(--ink); }
.legal p, .legal ul, .legal .table-wrap { margin-top: 12px; }
.legal ul { padding-left: 1.25em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--ink); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 560px; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table thead th { font: 600 var(--step-caps)/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.legal-table tr:last-child td { border-bottom: 0; }
mark.blank { background: var(--yellow-soft); color: var(--ink); padding: 0 3px; border-radius: 4px; }