:root {
  --teal: #39C4C4;
  --teal-2: #5ad3d3;
  --teal-soft: rgba(57, 196, 196, .12);
  --gray: #666565;
  --amber: #F2C94C;
  --bg: #1A1C1C;
  --panel: #202424;
  --bar: #242929;
  --line: #2F3535;
  --text: #F2F4F4;
  --muted: #A9AEAE;
  --header: 64px;
  --max: 1320px;
  --r: 4px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Spring: stiffness 300, damping 25, mass 1 (~3.8% overshoot). Generated by tools/spring.mjs; do not edit by hand. */
  --spring: linear(0, 0.0281 2.5%, 0.0991 5%, 0.1961 7.5%, 0.3062 10%, 0.4194 12.5%, 0.5289 15%, 0.6299 17.5%, 0.7197 20%, 0.797 22.5%, 0.8614 25%, 0.9136 27.5%, 0.9544 30%, 0.9852 32.5%, 1.0074 35%, 1.0224 37.5%, 1.0317 40%, 1.0364 42.5%, 1.0378 45%, 1.0368 47.5%, 1.0341 50%, 1.0304 52.5%, 1.0263 55%, 1.022 57.5%, 1.0178 60%, 1.014 62.5%, 1.0106 65%, 1.0077 67.5%, 1.0053 70%, 1.0033 72.5%, 1.0017 75%, 1.0006 77.5%, 0.9997 80%, 0.9992 82.5%, 0.9988 85%, 0.9986 87.5%, 0.9986 90%, 0.9986 92.5%, 0.9987 95%, 0.9988 97.5%, 1);
  --font: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
:root[lang="en"] { --font: "Manrope", system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
/* English text is being swapped in (see index.html): hide only the words that will change, so logo,
   camera feeds and background still paint at once. */
html.lang-pending [data-i18n] { visibility: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .04em; }
.muted { color: var(--muted); }
.accent { color: var(--teal); }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--teal); color: var(--bg); padding: 8px 16px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }
:where(a, button):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.container { max-width: var(--max); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .container { padding-inline: 24px; } }

/* Buttons */
.btn { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: .6em; padding: .75em 1.25em; border-radius: var(--r); border: 1px solid var(--line); background: var(--bar); color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .2s, border-color .2s, transform .25s var(--ease); }
@media (pointer: coarse) { .btn { min-height: 44px; } } /* finger-sized on phones and tablets */
.btn:hover { border-color: var(--teal); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--bg); }
.btn-primary:hover { background: var(--teal-2); }
.btn-sm { padding: .5em .9em; font-size: .85rem; }
.btn .i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 6px 14px; background: var(--bar); border-bottom: 1px solid var(--line); font-size: .78rem; color: var(--muted); }
.panel-bar .title { color: var(--text); font-weight: 500; }
.panel-body { padding: 20px; }
@media (min-width: 720px) { .panel-body { padding: 28px; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-inline-end: 6px; vertical-align: middle; flex: none; }
.dot.amber { background: var(--amber); }
.chip { display: inline-flex; align-items: center; padding: .1em .6em; border: 1px solid var(--teal); border-radius: 3px; background: var(--teal-soft); color: var(--teal); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.chip.new { border-color: var(--amber); background: rgba(242, 201, 76, .1); color: var(--amber); }
.kicker { font-size: .9rem; font-weight: 600; color: var(--teal); }
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { display: grid; gap: 12px; margin-bottom: 24px; max-width: 760px; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); }

/* Header */
.header { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--header); background: rgba(26, 28, 28, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 20px; height: 100%; }
/* Header logo: wordmark letters + the flat brand eye, whose rays spiral into place like an iris.
   Plays once on load and again on hover; transform-only; static with reduced motion. */
.brand { display: inline-flex; text-decoration: none; flex: none; }
.brand-mark { position: relative; display: block; height: 28px; aspect-ratio: 760 / 221; }
.brand-letters { width: 100%; height: 100%; }
.brand-eye { position: absolute; overflow: visible; fill: var(--teal); }
.eye-ray { transform-box: view-box; transform-origin: var(--ox) var(--oy); } /* spin around the ring centre */
.eye-dot { transform-box: fill-box; transform-origin: center; }
.brand-eye.is-playing .eye-ray { animation: eye-iris 620ms var(--spring) both; animation-delay: calc(var(--i) * 18ms); }
.brand-eye.is-playing .eye-dot { animation: eye-dot 420ms var(--spring) both; animation-delay: 540ms; }
@keyframes eye-iris { from { transform: rotate(-120deg) scale(0); } to { transform: none; } }
@keyframes eye-dot { from { transform: scale(0); } to { transform: none; } }
.nav { display: none; gap: 22px; margin-inline-start: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; }
.nav a:hover { color: var(--text); }
@media (min-width: 1180px) { .nav { display: flex; } }
.header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.nav + .header-actions { margin-inline-start: 0; }
.lang-toggle { min-height: 44px; background: none; border: 1px solid var(--line); border-radius: var(--r); color: var(--text); padding: .4em .85em; font: inherit; font-size: .85rem; cursor: pointer; }
.lang-toggle:hover { border-color: var(--teal); }
html:not(.js) .lang-toggle { display: none; }
@media (max-width: 520px) { .wa-label { display: none; } .header-actions .btn-sm { min-width: 44px; min-height: 44px; justify-content: center; padding: .55em; } }

/* Hero: the cam monitor fills the first screen; the headline sits in a corner and the agent opens
   as a card from the floating "Ask Eyeon" button. */
/* --hero-safe keeps hero controls above the 64px "Powered by Netlify" badge Netlify pins bottom-right. */
.hero { --hero-safe: 84px; position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #141616; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: 1; background: linear-gradient(to top, rgba(20, 22, 22, .94), rgba(20, 22, 22, .55) 45%, transparent); pointer-events: none; }
.feed { position: relative; overflow: hidden; background: #0f1111; }
.feed img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.72); }
.feed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 26%, transparent 74%, rgba(0, 0, 0, .55)); pointer-events: none; }
.feed-label { position: absolute; inset-inline: 10px; top: 8px; z-index: 1; display: flex; justify-content: space-between; gap: 8px; font-size: .7rem; color: #e2e6e6; }
.rec { color: #ff6b6f; }
/* Phones: labels stay at 11.5px or more so they remain readable. */
@media (max-width: 719px) { .box span, .cam-hud, .cam-chip { font-size: .72rem; } }
.feed-time { position: absolute; inset-inline-start: 10px; bottom: 8px; z-index: 1; font-size: .68rem; color: #c9cfcf; }
.box { position: absolute; z-index: 1; border: 2px solid var(--teal); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); opacity: 0; transform: scale(1.15); transition: transform 400ms var(--ease), opacity 200ms ease; }
.box span { position: absolute; top: 2px; right: 2px; padding: 1px 6px; border-radius: 2px; background: var(--teal); color: var(--bg); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.feed.is-match .box { opacity: 1; transform: none; }

/* Hero cam monitor (site/js/monitor-ui.js). The photo covers the frame around its focus point
   (--fx, --fy) using container units, and the overlay layer has exactly the photo's box, so
   detection boxes are placed in % of the photo whatever the screen shape. */
.monitor { position: absolute; inset: var(--header) 0 0 0; overflow: hidden; container-type: size; background: #0f1111; touch-action: pan-y; }
.cam-stage { --cw: max(100cqw, 100cqh * var(--ar)); position: absolute; width: var(--cw); height: calc(var(--cw) / var(--ar)); left: calc((100cqw - var(--cw)) * var(--fx)); top: calc((100cqh - var(--cw) / var(--ar)) * var(--fy)); }
/* Slow drift, like a camera settling on its mount; GPU-only. Small enough that the first box stays in view on phones. */
.cam-stage { animation: cam-drift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes cam-drift { to { transform: scale(1.04) translate(-.8%, -.5%); } }
.cam-stage img { display: block; width: 100%; height: 100%; filter: contrast(1.08) brightness(.82) saturate(.85); }
.cam-stage::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); pointer-events: none; }
.cam-overlay { position: absolute; inset: 0; }
.monitor .box { transition-delay: calc(var(--i, 0) * 180ms); }
.monitor.is-live .box { opacity: 1; transform: none; }
.cam-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .06; mix-blend-mode: screen; pointer-events: none; }
.monitor.is-switching .cam-noise { opacity: .92; mix-blend-mode: normal; }
.cam-hud { position: absolute; z-index: 1; inset-inline: 16px; top: 14px; display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: .78rem; color: #e2e6e6; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); pointer-events: none; }
.cam-hud p { margin: 0; }
.cam-chip { position: absolute; z-index: 1; inset-inline-start: 16px; top: 44px; margin: 0; padding: 3px 10px; border-radius: 2px; background: var(--teal); color: var(--bg); font-size: .78rem; font-weight: 600; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 300ms var(--ease); }
.monitor.is-live .cam-chip { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 180ms + 200ms); }
.cam-chip[hidden] { display: none; }
.cam-bar { position: absolute; z-index: 3; inset-inline-end: clamp(16px, 3vw, 40px); top: 40%; translate: 0 -50%; display: grid; gap: 8px; }
.cam-btn { position: relative; overflow: hidden; min-width: 88px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(20, 22, 22, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.cam-btn { white-space: nowrap; }
.cam-btn:hover { border-color: var(--teal); color: var(--text); }
.cam-btn[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--bg); } /* solid, so it reads over bright frames */
.cam-btn[aria-pressed="true"] .cam-progress { background: var(--bg); }
.cam-progress { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--teal); transform: scaleX(var(--p, 0)); transform-origin: left; }
:root[dir="rtl"] .cam-progress { transform-origin: right; }
.cam-btn[aria-pressed="false"] .cam-progress { display: none; }
html:not(.js) .cam-bar { display: none; }
@media (max-width: 719px) {
  .cam-bar { inset-inline: 12px; top: 44px; translate: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .cam-btn { min-width: 0; padding: 0 12px; }
  .hero::after { height: 72%; } /* detection boxes fade out behind the headline */
  .cam-chip { top: 100px; }
}

/* Headline overlay, bottom corner of the scene */
.hero-copy { position: absolute; z-index: 2; inset-inline-start: clamp(16px, 4vw, 56px); bottom: var(--hero-safe); display: grid; gap: 14px; width: min(560px, calc(100% - 32px)); animation: rise 600ms var(--ease) both; animation-delay: 200ms; }
/* Soft dark backdrop so busy camera photos never hurt the headline's readability. */
.hero-copy::before { content: ""; position: absolute; inset: -90px -120px -60px -90px; z-index: -1; background: radial-gradient(closest-side, rgba(20, 22, 22, .97), rgba(20, 22, 22, .86) 66%, transparent); pointer-events: none; }
.hero-kicker { display: flex; align-items: center; gap: 2px; width: fit-content; padding: 2px 12px 2px 6px; border-radius: 999px; background: rgba(20, 22, 22, .82); font-size: .85rem; font-weight: 600; color: var(--teal); }
.hero-copy h1 { font-size: clamp(1.8rem, 3.6vw, 3rem); text-shadow: 0 2px 24px rgba(20, 22, 22, .9); }
:root[lang="en"] .hero-copy h1 { letter-spacing: -.02em; }
.hero-copy h1 .line { display: block; }
.hero-copy .lead { max-width: 46ch; color: #d9dede; }

/* Floating "Ask Eyeon" button and the agent card it opens over the scene */
.ask-fab { position: absolute; z-index: 3; inset-inline-end: clamp(16px, 3vw, 40px); bottom: var(--hero-safe); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 16px; border: 1px solid rgba(57, 196, 196, .6); border-radius: 999px; background: rgba(20, 22, 22, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); transition: border-color .2s, background .2s, transform .25s var(--ease); }
.ask-fab:hover { border-color: var(--teal); background: rgba(32, 36, 36, .92); }
.fab-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); }
.hero.agent-open .ask-fab { display: none; }
.agent-card { position: absolute; z-index: 4; inset-inline-end: clamp(16px, 3vw, 40px); bottom: var(--hero-safe); display: none; width: min(420px, calc(100% - 32px)); max-height: calc(100% - var(--header) - var(--hero-safe) - 16px); overflow: auto; background: rgba(32, 36, 36, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
.hero.agent-open .agent-card { display: block; animation: card-in 320ms var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
html:not(.js) .agent-card { display: block; }
html:not(.js) .ask-fab { display: none; }
.agent-card .panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
.agent-card .panel-bar .title { display: flex; align-items: center; }
.card-close { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.card-close:hover { color: var(--text); }
@media (max-width: 719px) {
  .hero-copy { width: auto; inset-inline-end: 16px; gap: 10px; }
  .hero-copy .lead { font-size: .94rem; line-height: 1.55; }
  .ask-fab { top: calc(var(--header) + 136px); bottom: auto; min-height: 46px; padding: 0 16px 0 12px; }
  .agent-card { inset-inline: 8px; bottom: var(--hero-safe); width: auto; max-height: calc(100% - var(--header) - var(--hero-safe) - 8px); }
}
.prompt { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r); background: #161818; }
.prompt-sign { color: var(--teal); font-family: var(--mono); font-weight: 600; }
/* Live agent: question box, thinking dots, answer, suggestion chips */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prompt:focus-within { border-color: var(--teal); }
.prompt-input { flex: 1; min-width: 0; height: 1.6em; max-height: 4.8em; padding: 0; border: 0; background: none; color: var(--text); font: inherit; line-height: 1.6; resize: none; overflow: hidden; field-sizing: content; }
.prompt-input::placeholder { color: var(--muted); }
.prompt-input:focus { outline: none; }
@media (max-width: 719px) { .prompt-input { min-height: 3.2em; } }
.send { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: var(--teal); color: var(--bg); cursor: pointer; transition: background .2s; }
.send:hover { background: var(--teal-2); }
.send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"] .send svg { transform: scaleX(-1); }
.answer { color: var(--text); }
.result > .dot { margin-top: .6em; }
.thinking { display: none; gap: 4px; padding-block: .55em; }
.result.is-thinking .thinking { display: inline-flex; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: think 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.answer-cta { justify-self: start; color: var(--teal); font-weight: 600; font-size: .9rem; text-decoration: none; }
.answer-cta:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-label { font-size: .85rem; color: var(--muted); }
.ask { min-height: 40px; padding: .35em .95em; border: 1px solid var(--line); border-radius: 999px; background: var(--bar); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.ask:hover { border-color: var(--teal); }
.ask[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.result { display: flex; align-items: flex-start; gap: 2px; line-height: 1.6; font-size: .92rem; font-weight: 500; color: var(--teal); opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms var(--ease); }
.result.is-in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }


/* Status strip */
.status { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 24px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.stat { display: grid; gap: 2px; padding: 16px 18px; background: var(--panel); }
@media (max-width: 899px) { .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 900px) { .status { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.stat-value { font-family: var(--mono); font-weight: 500; font-size: clamp(1.35rem, 2vw, 1.8rem); white-space: nowrap; line-height: 1.15; color: var(--teal); justify-self: start; }
.stat-caption { font-size: .85rem; color: var(--muted); }

/* System overview */
.split { display: grid; }
@media (min-width: 960px) { .split { grid-template-columns: 1.35fr 1fr; } }
.about-text { font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.75; font-weight: 500; }
.about-text .word.key { transition: color 300ms ease; transition-delay: calc(var(--w, 0) * 45ms); }
[data-reveal].is-in .about-text .word.key { color: var(--teal); }
.feed-static { min-height: 260px; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .feed-static { border-top: 0; border-inline-start: 1px solid var(--line); } }

/* Agent console */
.agent-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .agent-grid { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.modules { display: flex; flex-wrap: wrap; gap: 8px; }
.modules li { padding: .3em .75em; border: 1px solid var(--line); border-radius: 3px; background: var(--bar); font-size: .82rem; }
.modules li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); margin-inline-end: 8px; vertical-align: middle; }
.console .panel-body { display: grid; gap: 14px; }
.line { display: grid; gap: 10px; transition: opacity 300ms ease, transform 400ms var(--ease); transition-delay: calc(var(--i, 0) * 180ms); }
.line-user { display: block; font-weight: 500; }
.line-agent { padding-inline-start: 14px; border-inline-start: 2px solid var(--teal); color: var(--muted); }
.js .console:not(.is-in) .line { opacity: 0; transform: translateY(8px); }
.clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.clip img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--line); border-radius: 3px; }
.clip figcaption { margin-top: 4px; font-size: .72rem; }
.stat-inline { display: flex; align-items: baseline; gap: 8px; }
.stat-inline strong { font-size: 1.8rem; color: var(--teal); line-height: 1; }

/* Detection: incident log */
.incidents { display: grid; gap: 16px; }
@media (min-width: 960px) { .incidents { grid-template-columns: repeat(3, 1fr); } }
.incident { display: flex; flex-direction: column; }
.snapshot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #111313; border-bottom: 1px solid var(--line); }
.snapshot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05) brightness(.85); }
.snapshot.phone img { object-fit: contain; object-position: bottom; filter: none; }
.incident .box { transition-delay: 250ms; }
.incident.is-in .box, html:not(.js) .incident .box { opacity: 1; transform: none; }
.incident .panel-body { display: grid; gap: 10px; flex: 1; align-content: start; }
.incident h3 { font-size: 1.15rem; }
.incident p { color: var(--muted); font-size: .95rem; }
/* Detection camera (site/js/cam3d.js): a canvas covering the section, so the camera stays beside the
   heading and scrolls away with the section; it never catches the pointer. */
#detection { position: relative; }
.cam3d { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: none; }
.cam3d[hidden] { display: none; }
/* The watched card stands out: amber ring; the other two fade back (only while the camera runs). */
#detection .incident { transition: opacity .3s ease, filter .3s ease, transform 400ms var(--ease), border-color .25s, box-shadow .25s; }
.incident.is-watched { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
#detection.has-watch .incident:not(.is-watched) { opacity: .45; filter: grayscale(.7); }
.incident.is-watched .box { animation: relock 500ms var(--ease) both; }
@keyframes relock { from { opacity: .15; transform: scale(1.06); } to { opacity: 1; transform: none; } }
/* While the camera runs, the heading keeps its corner free (--cam-space is set by cam3d.js). */
#detection.has-cam .section-head { padding-inline-end: var(--cam-space, 0px); }
.toast { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid rgba(242, 201, 76, .4); border-radius: 3px; background: rgba(242, 201, 76, .08); color: var(--text); font-size: .82rem; }

/* Smart alerts: rules table */
.alerts-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .alerts-grid { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.quote { margin: 8px 0 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--teal); }
.quote-text { font-size: 1.12rem; font-weight: 600; margin-bottom: .4em; }
.quote p + p { color: var(--muted); }
.rule { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.rule:last-child { border-bottom: 0; }
.rule-new { background: rgba(242, 201, 76, .04); }
.rule-text { font-weight: 600; }
.rule-meta { font-size: .8rem; color: var(--muted); }
.rule-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; }
.pause { font-size: .8rem; color: var(--teal); }
/* Write-your-own alert rule */
.rule-form { display: flex; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.rule-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #161818; color: var(--text); font: inherit; }
.rule-form input::placeholder { color: var(--muted); }
.rule-form input:focus { outline: none; border-color: var(--teal); }
.rule-form .btn-sm { min-height: 44px; }
.rule-hint { padding: 10px 20px 0; font-size: .85rem; color: var(--amber); }
.rule.is-added { animation: rule-in 450ms var(--ease) both; }
@keyframes rule-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.rule-toast { display: flex; align-items: center; gap: 4px; margin: 0 20px 16px; padding: 10px 12px; border: 1px solid rgba(242, 201, 76, .4); border-radius: 3px; background: rgba(242, 201, 76, .08); font-size: .85rem; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease, transform 300ms var(--ease); }
.rule-toast.is-in { opacity: 1; transform: none; }
@media (max-width: 560px) { .rule { grid-template-columns: 1fr; } .rule-actions { grid-column: auto; grid-row: auto; flex-wrap: wrap; } }

/* Analytics: widgets */
.widgets { display: grid; gap: 16px; }
@media (min-width: 960px) { .widgets { grid-template-columns: repeat(2, 1fr); } }
.widget .panel-body { display: grid; gap: 14px; }
.widget p { color: var(--muted); font-size: .95rem; }
.heat-map { position: relative; }
.heat-tag { position: absolute; transform: translate(-50%, -50%); padding: 0 7px; border-radius: 3px; background: rgba(20, 22, 22, .72); color: #e2e6e6; font-size: .72rem; white-space: nowrap; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
.heat-legend i { flex: 0 0 110px; height: 6px; border-radius: 3px; background: linear-gradient(to right, #15393b, #1f7f80, #39C4C4, #c9f4f0); }
:root[dir="rtl"] .heat-legend i { transform: scaleX(-1); }
.heat { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); border-radius: 3px; }
.big-row { display: flex; align-items: baseline; gap: 10px; }
.big-num { font-family: var(--mono); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.1rem); line-height: 1; color: var(--teal); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.bars span { flex: 1; height: var(--h); background: #2f4a4a; border-radius: 1px 1px 0 0; transform-origin: bottom; transition: transform 500ms var(--ease); transition-delay: calc(var(--i) * 15ms); }
.bars span.peak { background: var(--teal); }
.js .widget:not(.is-in) .bars span { transform: scaleY(0); }
.axis { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
.peak-line { font-size: .85rem; }
.timeline { position: relative; height: 40px; border: 1px solid var(--line); border-radius: 3px; background: var(--bar); }
.timeline i { position: absolute; top: 8px; bottom: 8px; inset-inline-start: var(--x); width: 3px; border-radius: 2px; background: var(--teal); }
.timeline i.now { top: 0; bottom: 0; width: 2px; background: var(--amber); }
.warn { display: flex; align-items: center; color: var(--amber) !important; font-size: .88rem !important; }
/* Statistics: one small chart per figure, all on the same 24-hour axis. Marks are teal; figures keep the text colour. */
.minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mini { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--bar); border: 1px solid var(--line); border-radius: 3px; }
.mini.wide { grid-column: span 3; }
.mini-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mini-label { font-size: .8rem; line-height: 1.3; color: var(--muted); }
.mini-value { font-family: var(--mono); font-weight: 500; font-size: 1.25rem; line-height: 1; color: var(--text); }
.mini .axis { margin-top: -4px; font-size: .65rem; }
.mini-plot, .mini-bars, .mini-events { position: relative; margin-top: auto; }
.mini-plot, .mini-bars { height: 56px; }
.mini-plot svg { display: block; width: 100%; height: 100%; transition: clip-path 900ms var(--ease); }
:root[dir="rtl"] .mini-plot svg { transform: scaleX(-1); }
.mini-fill { fill: var(--teal); opacity: .16; }
.mini-line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mini-peak { position: absolute; width: 8px; height: 8px; margin-block-start: -4px; margin-inline-start: -4px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--bar); transition: opacity 400ms 600ms; }
.mini-hits { position: absolute; inset: 0; display: flex; }
.mini-bars { display: flex; gap: 2px; }
.mini-hits span, .mini-bars span { position: relative; flex: 1; }
.mini-hits span:hover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--muted); }
.mini-bars span::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--h); border-radius: 3px 3px 0 0; background: var(--teal); transform-origin: bottom; transition: transform 500ms var(--ease); }
.mini-bars span:hover::before { background: var(--text); }
.mini-events { height: 24px; }
.mini-events::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--line); }
.mini-events i { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--x); width: 20px; margin-inline-start: -10px; }
.mini-events i::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--bar); transition: transform 400ms var(--ease); }
.minis [data-tip]:hover::after { content: attr(data-tip); position: absolute; z-index: 2; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 2px 6px; border: 1px solid var(--line); border-radius: 2px; background: #0b1414; color: var(--text); font-family: var(--mono); font-size: .7rem; font-style: normal; white-space: nowrap; pointer-events: none; }
.js .widget:not(.is-in) .mini-plot svg { clip-path: inset(0 100% 0 0); }
.js .widget:not(.is-in) .mini-peak { opacity: 0; }
.js .widget:not(.is-in) .mini-bars span::before { transform: scaleY(0); }
.js .widget:not(.is-in) .mini-events i::before { transform: scale(0); }
@media (max-width: 519px) {
  .mini { grid-column: span 3; }
  .mini.wide, .mini.full-sm { grid-column: span 6; }
}

/* Who it's for: sites (spring tiles) */
.industries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 720px) { .industries { grid-template-columns: repeat(3, 1fr); } }
.industry { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 20px; background: var(--panel);
  /* Transform-only spring motion: 400ms entrance, then 200ms for hover and press. */
  transition: transform 400ms var(--ease), background-color 200ms; will-change: transform; }
.js .industry:not(.is-in) { transform: translateY(12px); }
.industry.is-in { transition-delay: calc(var(--i, 0) * 50ms); }
.industry.is-settled { transition-duration: 200ms; transition-delay: 0ms; }
.industry.is-settled:hover { background: var(--bar); }
.industry.is-settled:active { transform: scale(.99); }
.industry svg { width: 36px; height: 36px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.industry .name { font-weight: 600; font-size: 1.02rem; }

/* Sectors: the site tiles pick a sector; one line-drawn scene and its details swap to match. */
/* The launch priority: one first tile for cafes, restaurants and retail. */
.sectors .industries > li:first-child .name { font-size: 1.1rem; line-height: 1.35; }
.sectors .industry svg { flex: none; }
.sector-hint { margin: -8px 0 20px; color: var(--muted); }
.sectors { display: grid; gap: 20px; }
.industries > li { display: grid; }
.industry { width: 100%; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.industry[aria-pressed="true"] { background: var(--teal-soft); box-shadow: inset 0 0 0 2px var(--teal); }
@media (min-width: 960px) {
  .sectors { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; }
  .sectors .industries { grid-template-columns: 1fr; }
  .sectors .industry { flex-direction: row; align-items: center; padding: 14px 18px; }
  .sectors .industry svg { width: 28px; height: 28px; }
}
@media (max-width: 959px) {
  .sectors .industries { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .sectors .industries > li { flex: 0 0 auto; scroll-snap-align: start; }
  .sectors .industry { min-width: 132px; gap: 6px; padding: 14px; }
  .sectors .industry svg { width: 28px; height: 28px; }
}
.sector-feed { border: 0; border-radius: 0; }
.sector-svg { display: block; width: 100%; height: auto; direction: ltr; }
/* Night street: solid buildings with warm light inside (cool for gyms and screens); the line art on top is the detail. */
.sector-scene { fill: none; stroke: rgba(214, 224, 222, .5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sc-fill > * { stroke: none; }
.sc-sky { fill: url(#sc-sky); }
.sc-skyline { fill: #111819; }
.sc-pave { fill: #1f2627; }
.sc-road { fill: #131819; }
.sc-wall { fill: url(#sc-wall); }
.sc-roof { fill: #161c1d; }
.sc-lit { fill: url(#sc-lit); }
.sc-dim { opacity: .55; }
.sc-panes > rect { stroke: none; }
.sc-panes > rect:nth-child(3n) { opacity: .5; }
.sc-cool { fill: url(#sc-cool); opacity: .85; }
.sc-sign { fill: #e8eeec; }
.sc-awning { fill: #1d5656; }
.sc-shutter { fill: #2b3436; }
.sc-screen { fill: #39C4C4; opacity: .85; }
.sc-board { fill: #173030; }
.sc-flag { fill: #39C4C4; }
.sc-flag-b { fill: #F2C94C; }
.sc-pool { fill: url(#sc-pool); }
.sc-pool-cool { opacity: .6; }
.sector-scene .sc-string { fill: none; stroke: rgba(242, 201, 122, .45); stroke-width: 1; }
.sc-bulbs { fill: #ffd98a; }
.sector-scene:not(.is-on) { display: none; }
.sector-scene.is-on { animation: sc-in .5s var(--ease) both; }
@keyframes sc-in { from { opacity: 0; transform: translateY(10px); } }
.sc-cone { fill: rgba(57, 196, 196, .05); }
.sc-faint { fill: none; stroke: #3a4343; stroke-width: 1.5; }
.sc-dash { fill: none; stroke: rgba(242, 244, 244, .22); stroke-width: 2; stroke-dasharray: 14 12; }
.sc-cam { fill: #1f2424; stroke: #c9d3d1; stroke-width: 1.5; }
.sc-lens, .sector-scene .sc-window { fill: #39C4C4; stroke: none; }
.sc-heat { fill: url(#sc-heat); }
.sector-scene .sc-zone { fill: rgba(242, 201, 76, .08); stroke: rgba(242, 201, 76, .7); stroke-dasharray: 6 5; }
.sc-box { fill: rgba(57, 196, 196, .06); stroke: #39C4C4; stroke-dasharray: 5 4; }
.sc-tag { fill: #142222; stroke: #39C4C4; stroke-width: 1; }
.sc-tag-text { fill: #39C4C4; stroke: none; font: 600 11px var(--mono); }
.sc-amber .sc-box { fill: rgba(242, 201, 76, .06); stroke: #F2C94C; }
.sc-amber .sc-tag { fill: #24210f; stroke: #F2C94C; }
.sc-amber .sc-tag-text { fill: #F2C94C; }
/* Actors: solid figures; clothes and car colours vary, staff wear teal, anyone flagged turns amber. */
.sc-actor { fill: var(--c, #8b9798); stroke: #0c1011; stroke-width: 1; stroke-linejoin: round; }
.sc-actor:not(.is-pest) > .sc-body { transform: scale(1.25); }
.sc-actor .sc-legs { fill: none; stroke: #b9c4c2; stroke-width: 2.2; stroke-linecap: round; }
.sc-actor .sc-head { fill: #e2d3bf; }
.sc-actor .sc-glass { fill: #0c1315; stroke: rgba(255, 255, 255, .2); }
.sc-actor .sc-wheel { fill: #0b0f10; stroke: #4a5353; }
.sc-actor.is-staff > .sc-body { --c: #39C4C4; }
.sc-actor.is-alert > .sc-body { --c: #F2C94C; }
.sc-actor.is-forklift > .sc-body { --c: #d9a520; }
.sc-actor.is-pest > .sc-body { --c: #c9d3d1; }
.sc-actor .sc-arm { fill: none; stroke: color-mix(in srgb, var(--c, #8b9798) 70%, #000); stroke-width: 2; stroke-linecap: round; }
.sc-actor .sc-arm-b, .sc-actor .sc-leg-b { opacity: .7; } /* far-side limbs sit a little in shadow */
.sc-actor .sc-shadow { fill: rgba(0, 0, 0, .45); stroke: none; }
.sc-actor .sc-spoke { fill: none; stroke: #4a5353; stroke-width: 1.2; }
.sc-actor .sc-beam { fill: url(#sc-beam); stroke: none; }
.sc-actor .sc-headlight { fill: #fff4d6; stroke: none; }
.sc-actor .sc-taillight { fill: #ff4a4a; stroke: none; }
.sc-actor.is-fallen > .sc-body { transform: translateY(-4px) rotate(-90deg) scale(1.25); }
html:not(.js) .sector-live { display: none; }
.sector-live { display: grid; gap: 12px; margin-bottom: 28px; }
.js .sector-info:not(.is-on) { display: none; }
.sector-info { display: grid; gap: 12px; justify-items: start; }
.sector-info + .sector-info { margin-top: 28px; }
.sector-info h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.sector-points { display: grid; gap: 6px; color: var(--muted); }
.sector-points li::before { content: "— "; color: var(--teal); }
.sector-q { display: grid; gap: 2px; font-weight: 600; font-size: 1.08rem; }
.sector-q .kicker { font-size: .8rem; }

/* Demo video: the native player, under a big play button (js/demo.js) that needs JavaScript. */
.demo { position: relative; }
.demo video { display: block; width: 100%; height: auto; background: #0f1111; }
.demo-play { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15, 17, 17, .12); cursor: pointer; transition: background .2s; }
.demo-play:hover { background: none; }
.demo-play[hidden], html:not(.js) .demo-play { display: none; }
.demo-btn { position: absolute; inset: 78% auto auto 50%; display: grid; place-items: center; width: clamp(52px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--teal); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.demo-play:hover .demo-btn { transform: translate(-50%, -50%) scale(1.06); }
.demo-btn svg { width: 46%; fill: var(--bg); }

/* Contact terminal */
.terminal .panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: clamp(36px, 6vw, 64px); }
.terminal h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); max-width: 22ch; }
/* The brand's glass eye; its black background melts into the panel. */
.terminal .panel-body { position: relative; overflow: hidden; }
.terminal-eye { position: absolute; inset-block: 0; inset-inline-end: 0; width: 46%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent); mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent); }
.terminal h2, .terminal .lead, .terminal .ctas { position: relative; z-index: 1; }
@media (max-width: 899px) { .terminal-eye { display: none; } }
@media (min-width: 900px) { .terminal h2, .terminal .lead { max-width: min(22ch, 52%); } .terminal .lead { max-width: 52%; } }

/* Footer */
/* Footer: brand, section links, contact; small print on its own quiet bar. */
.footer { border-top: 1px solid var(--line); background: #151717; font-size: .9rem; color: var(--muted); }
@media (max-width: 719px) {
  nav.footer-col { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
  nav.footer-col .footer-head { grid-column: 1 / -1; }
}
.footer-main { display: grid; gap: 40px; padding-block: 56px 40px; }
@media (min-width: 720px) { .footer-main { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer-brand { display: grid; gap: 12px; align-content: start; justify-items: start; }
.footer-brand img { height: 28px; width: auto; }
.footer-tag { max-width: 28ch; color: var(--text); font-size: 1rem; }
.footer-col { display: grid; gap: 4px; align-content: start; justify-items: start; }
.footer-head { margin-bottom: 8px; color: var(--text); font-weight: 500; }
.footer-col a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-col a:hover { color: var(--teal); }
.footer-contact a { display: grid; gap: 0; min-height: 44px; padding-block: 4px; color: var(--text); }
.footer-contact a[href^="https://wa.me"] span[dir] { color: var(--teal); font-size: 1.1rem; font-weight: 500; }
.footer-label { font-size: .78rem; color: var(--muted); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 20px 28px; border-top: 1px solid var(--line); font-size: .8rem; }

/* Drive-thru demo (site/js/drive-ui.js): an overhead camera view; teal is Eyeon, amber is waiting too long. */
.drive-panel { display: grid; gap: 16px; padding: 18px; }
.drive-bubble { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; min-height: 1.6em; font-size: .95rem; }
.drive-bubble .q { color: var(--text); font-weight: 600; }
.drive-bubble .a { color: var(--teal); }
.drive-bubble.is-thinking .a { color: var(--muted); }
/* Overhead camera feed: night scene, teal lit pickup window and menu board, scanlines and vignette on top. */
.dt-feed { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #121515; }
.dt-feed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)); pointer-events: none; }
/* Sensor grain over the drawn scenes so they read as camera footage; a static tile, so it costs nothing per frame. */
.dt-feed::before { content: ""; position: absolute; inset: 0; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .07; mix-blend-mode: screen; pointer-events: none; }
/* Overlay text sits on a dark backing so it stays readable over bright frames and lit windows. */
.feed-label > span, .cam-hud p { padding: 1px 6px; border-radius: 2px; background: rgba(10, 14, 14, .62); }
.dt-feed .feed-label { z-index: 2; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }
.dt-scene { display: block; width: 100%; height: auto; }
/* Night: solid tree canopies with cast shadows, a shaded roof with its units, warm lamp pools. */
.dt-ground { fill: #0f1212; }
.dt-green { fill: #0f1916; }
.dt-trees circle { fill: url(#dt-canopy); stroke: none; filter: drop-shadow(6px 7px 0 rgba(0, 0, 0, .45)); }
.dt-walk { fill: #232929; }
.dt-joints { fill: none; stroke: #2f3636; stroke-width: 1; stroke-dasharray: 2 38; }
.dt-building > rect, .dt-building > circle { fill: #2c3435; filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .4)); }
.dt-building > rect:first-child { fill: url(#dt-roof); stroke: #3a4343; stroke-width: 1.5; filter: drop-shadow(10px 12px 0 rgba(0, 0, 0, .45)); }
.dt-building > circle { fill: #171c1c; stroke: #3a4343; stroke-width: 1.5; }
.dt-wear { fill: none; stroke: rgba(0, 0, 0, .28); stroke-width: 9; }
.dt-lamp-head { fill: #ffe3a3; }
.dt-building .dt-parapet { fill: none; stroke: #2b3232; }
.dt-spill { fill: url(#dt-spill); }
.dt-window { fill: var(--teal); }
.dt-board-glow { fill: url(#dt-glow); }
.dt-board { fill: #173030; stroke: var(--teal); stroke-width: 1.5; }
.dt-board-lines { fill: none; stroke: rgba(57, 196, 196, .7); stroke-width: 2; stroke-linecap: round; }
.dt-post { fill: #2b3232; stroke: var(--teal); stroke-width: 1.5; }
.dt-lamp { fill: url(#dt-lamp); }
.dt-lane { fill: #191d1d; }
.dt-curb { fill: none; stroke: #4a5353; stroke-width: 2; }
.dt-paint { fill: none; stroke: rgba(242, 244, 244, .35); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dt-stalls { fill: none; stroke: rgba(242, 244, 244, .22); stroke-width: 2; }
.dt-parked { fill: var(--car); fill-opacity: .9; stroke: rgba(0, 0, 0, .6); stroke-width: 1.5; }
.dt-beam { fill: url(#dt-beam); pointer-events: none; }
.dt-car .dt-shadow { fill: rgba(0, 0, 0, .45); }
.dt-car .dt-shell { fill: var(--car); stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; }
.dt-car .dt-roof { fill: rgba(0, 0, 0, .14); stroke: rgba(255, 255, 255, .12); }
.dt-car .dt-glass { fill: #0c1315; stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.dt-car .dt-head { fill: #fff4d6; }
.dt-car .dt-tail { fill: #6e1b1e; transition: fill 200ms; }
.dt-car .dt-brake { fill: rgba(255, 52, 52, .35); opacity: 0; transition: opacity 250ms; }
.dt-car.is-braking .dt-tail { fill: #ff4a4a; }
.dt-car.is-braking .dt-brake { opacity: 1; }
.dt-car .dt-lock { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: square; }
.dt-c-white { --car: #e9eded; }
.dt-c-black { --car: #2a2e31; }
.dt-c-silver { --car: #9aa1a3; }
.dt-c-red { --car: #c8373c; }
.dt-c-blue { --car: #3d63c9; }
.dt-c-teal { --car: #2fa9a9; }
.dt-you .dt-shell { stroke: var(--teal); stroke-width: 3; }
.dt-you .dt-lock { stroke-width: 3; animation: dt-you 1.4s ease-in-out infinite; }
@keyframes dt-you { 50% { opacity: .35; } }
.dt-car.is-alert .dt-lock { stroke: var(--amber); }
/* Scrolling in, the camera tilts down from a wide, angled shot onto the lane. */
@supports (animation-timeline: view()) {
  .dt-scene { transform-origin: 50% 75%; animation: dt-tilt linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes dt-tilt { from { transform: perspective(900px) rotateX(48deg) scale(.72); opacity: .35; } to { transform: none; opacity: 1; } }
}
.dt-tag-bg { fill: #142222; stroke: var(--teal); stroke-width: 1; } /* solid, so tags stay readable over the drawing */
.dt-tag-text { fill: var(--teal); font-family: var(--mono); font-weight: 600; text-anchor: middle; } /* size set by drive-ui.js */
.dt-car.is-alert .dt-tag-bg { fill: #24210f; stroke: var(--amber); }
.dt-car.is-alert .dt-tag-text { fill: var(--amber); }
.drive-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.drive-stats div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.drive-stats dt { font-size: .92rem; font-weight: 500; color: var(--muted); }
.drive-stats dd { margin: 0; font: 600 1.7rem/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--teal); justify-self: start; }
.drive-alert { margin: 0; color: var(--amber); font-size: .9rem; }
.drive-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.drive-controls .btn { min-height: 44px; }
.drive-speed { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.drive-speed button { min-width: 48px; min-height: 44px; border: 0; background: none; color: var(--muted); font: 600 .85rem var(--mono); cursor: pointer; }
.drive-speed button[aria-pressed="true"] { background: rgba(57, 196, 196, .16); color: var(--teal); }
.drive-order { margin: 0; font-size: .92rem; }
.drive-order strong { color: var(--teal); }
@media (max-width: 520px) { .drive-stats dd { font-size: 1.3rem; } .drive-stats dt { font-size: .8rem; line-height: 1.4; } .drive-stats div { padding: 8px; } }

/* Light & dark rhythm: sections alternate dark, light and one teal band. A tone redefines the colour
   tokens for everything inside it, so panels, chips and text follow; ::before paints the band edge to
   edge behind the centred container. */
.tone-light, .tone-teal { position: relative; isolation: isolate; color: var(--text); }
.tone-light::before, .tone-teal::before { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(50% - 50vw); background: var(--bg); }
.tone-light {
  --bg: #F3F6F5; --panel: #FFFFFF; --bar: #F7F9F9; --line: #E1E8E6; --text: #121616; --muted: #56625F;
  --teal: #157A7A; --teal-2: #1C8C8C; --teal-soft: rgba(21, 122, 122, .1); --amber: #9A6F00;
  color-scheme: light;
}
.tone-light .panel { border-color: transparent; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px -16px rgba(20, 50, 50, .22); }
.tone-light .panel-bar { border-radius: 14px 14px 0 0; }
.tone-light .prompt, .tone-light .rule-form input { background: #F3F6F5; }
.tone-light .btn-primary { color: #fff; }
.tone-light .industries { border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px -16px rgba(20, 50, 50, .22); }
/* Teal band: the live stats as big numbers straight on teal, no boxes */
.tone-teal { --bg: #39C4C4; --text: #0B1414; --muted: rgba(11, 20, 20, .72); --teal: #0B1414; margin-top: 0 !important; padding-block: clamp(40px, 6vw, 72px); background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; gap: 24px !important; }
.tone-teal .stat { background: none; padding: 0; }
.tone-teal .stat-value { font-family: var(--font); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.6rem); letter-spacing: -.02em; }
.tone-teal .stat-caption { font-weight: 600; }
.stat-unit { font-size: .5em; font-weight: 600; letter-spacing: 0; }
/* Dark sections: a soft teal light so they read as deep, not flat grey */
.section:not(.tone-light) { position: relative; isolation: isolate; }
.section:not(.tone-light)::after { content: ""; position: absolute; z-index: -1; inset-block: 0; inset-inline: calc(50% - 50vw); background: radial-gradient(ellipse 55% 60% at 85% 20%, rgba(57, 196, 196, .07), transparent 70%); pointer-events: none; }
/* Big, confident type and more room between sections */
.section { padding-block: clamp(72px, 10vw, 140px); }
.section-head { max-width: 860px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; font-weight: 600; }
:root[lang="en"] .section-head h2 { letter-spacing: -.02em; }
.section-head .lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }

@supports (animation-timeline: scroll()) {
  /* Reading progress line under the header */
  .header::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--teal); transform-origin: left; animation: read-progress linear both; animation-timeline: scroll(root); }
  :root[dir="rtl"] .header::after { transform-origin: right; }
  @keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Reveal once on entering view: rise, then siblings follow one after another. */
[data-reveal] { transition: transform 400ms var(--ease); } /* tilt eases back flat with this */
/* An animation, not a transition, so the stagger delay never lags the tilt easing back afterwards. */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal].is-in { animation: reveal-in 600ms var(--ease) backwards; }
.js [data-reveal].is-in:nth-child(2) { animation-delay: 100ms; }
.js [data-reveal].is-in:nth-child(3) { animation-delay: 200ms; }
.js [data-reveal].is-in:nth-child(4) { animation-delay: 300ms; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } }
/* Section titles wipe in from the reading start; the kicker slides ahead of them. */
.section-head h2 { transition: clip-path 900ms var(--ease) 150ms; }
.js .section-head:not(.is-in) h2 { clip-path: inset(0 100% 0 0); }
:root.js[dir="rtl"] .section-head:not(.is-in) h2 { clip-path: inset(0 0 0 100%); }
.section-head.is-in h2 { clip-path: inset(0 0 -.2em 0); }
.section-head .kicker { transition: opacity 500ms ease, transform 600ms var(--ease); }
.js .section-head:not(.is-in) .kicker { opacity: 0; transform: translateX(-24px); }
:root.js[dir="rtl"] .section-head:not(.is-in) .kicker { transform: translateX(24px); }
/* Tilt follows the cursor quickly; leaving falls back to the slower spring above to ease flat. */
.is-tilting { transition: transform 120ms linear; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .industry { transition: none; }
  .js .industry:not(.is-in) { transform: none; }
  .brand-eye > * { animation: none !important; }
  .cam-noise { display: none; }
  .dt-scene { animation: none !important; }
}