/* The public website of Dyzio. Tokens follow the Inspinia panel: teal primary, thin card borders, light shadows. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/open-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/open-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/open-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/open-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/open-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Design tokens ---------- */
:root {
    --c-primary: #1ab394;
    --c-blue: #1c84c6;
    --c-cyan: #23c6c8;
    --c-red: #ed5565;
    --c-amber: #f8ac59;
    --c-purple: #7b70ef;

    --bg: #f1f2f7;
    --surface: #ffffff;
    --surface-2: #f7f8fb;
    --surface-3: #eceef4;
    --text: #3d4352;
    --heading: #1b212e;
    --muted: #5d6676;
    --border: #e3e6ec;
    --border-strong: #c9ced8;
    --accent: #0f7a64;
    --accent-strong: #0b6653;
    --accent-bg: #107f69;
    --accent-bg-hover: #0c6e5a;
    --accent-soft: rgba(26, 179, 148, .12);
    --on-accent: #ffffff;
    --danger: #c7334a;
    --danger-soft: rgba(237, 85, 101, .1);
    --warning-text: #8a5300;
    --info-text: #15639a;
    --focus: #1c84c6;
    --shadow-sm: 0 1px 2px rgba(25, 31, 45, .05);
    --shadow-md: 0 8px 24px -12px rgba(25, 31, 45, .18);
    --shadow-lg: 0 24px 60px -28px rgba(25, 31, 45, .28);
    --dot: rgba(27, 33, 46, .07);
    --radius: 10px;
    --radius-lg: 16px;
    --header-h: 68px;
    color-scheme: light;
}

[data-theme="dark"] {
    --bg: #17181e;
    --surface: #1e1f27;
    --surface-2: #23242e;
    --surface-3: #2b2c37;
    --text: #aab8c5;
    --heading: #e8edf2;
    --muted: #8e9aa8;
    --border: #293036;
    --border-strong: #3c444c;
    --accent: #36d3b1;
    --accent-strong: #5ee3c6;
    --accent-bg: #1ab394;
    --accent-bg-hover: #2ec6a6;
    --accent-soft: rgba(26, 179, 148, .16);
    --on-accent: #06201b;
    --danger: #f36f7e;
    --danger-soft: rgba(237, 85, 101, .14);
    --warning-text: #f8c384;
    --info-text: #7cc4f0;
    --focus: #7cc4f0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 10px 28px -14px rgba(0, 0, 0, .55);
    --shadow-lg: 0 28px 70px -30px rgba(0, 0, 0, .7);
    --dot: rgba(255, 255, 255, .06);
    color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}
main { display: block; }
h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.05rem, 1.35rem + 2.4vw, 3rem); letter-spacing: -.024em; line-height: 1.14; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.55rem); letter-spacing: -.02em; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1.02rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
section[id], h2[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
::selection { background: rgba(26, 179, 148, .28); }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-flip { transform: rotate(180deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--surface); color: var(--heading); padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow-md); }
.skip-link:focus-visible { top: 12px; }
.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 40px); }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); line-height: 1.6; }
.eyebrow { color: var(--accent-strong); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.accent-text { background: linear-gradient(95deg, var(--accent), var(--c-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Motion primitives ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1) calc(var(--d, 0) * 75ms), transform .7s cubic-bezier(.2, .7, .3, 1) calc(var(--d, 0) * 75ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .hero .reveal { transition: none; opacity: 1; transform: none; animation: rise .65s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--d, 0) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .72em 1.25em; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: .96rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .22s ease, background-color .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; transform: none; }
.btn-lg { padding: .85em 1.5em; font-size: 1.02rem; }
.btn-xl { padding: 1em 1.9em; font-size: 1.12rem; border-radius: 12px; }
.btn-primary { background: var(--accent-bg); color: var(--on-accent); box-shadow: 0 10px 22px -12px rgba(16, 127, 105, .75); }
.btn-primary:hover { background: var(--accent-bg-hover); box-shadow: 0 14px 28px -12px rgba(16, 127, 105, .8); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); color: var(--heading); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: var(--danger); color: #ffffff; }
[data-theme="dark"] .btn-danger { color: #2a0a10; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-light { background: #ffffff; color: #0d3b32; }
.btn-light:hover { background: #effaf7; }
.btn-outline-light { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, .55); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #ffffff; }
/* A soft wave leaves the main button while it is on screen: a copy of its shape grows and fades behind it. */
.btn-pulse { position: relative; isolation: isolate; }
.btn-pulse::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent-bg); opacity: 0; pointer-events: none; }
.btn-pulse.is-playing::after { animation: pulse-ring 2.6s ease-out infinite; }
@keyframes pulse-ring { 0% { opacity: .45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.1, 1.45); } }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn[disabled] { color: var(--muted); cursor: default; text-decoration: none; }
.text-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--heading); cursor: pointer; text-decoration: none; font-size: .8rem; font-weight: 700; transition: border-color .2s ease, color .2s ease; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.round-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--heading); }
.round-btn:hover { border-color: var(--accent); color: var(--accent); }
.chip { padding: .35em .8em; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--text); transition: border-color .18s ease, color .18s ease, background .18s ease; }
.chip:hover, .chip.is-active { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { background: var(--bg); background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-scrolled { background: var(--bg); }
}
/* The pause button takes its place before the first paint wherever animations can play. */
html:not(.can-pause) [data-motion-toggle] { display: none; }
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
@supports (animation-timeline: scroll()) {
    .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--c-primary), var(--c-cyan)); transform: scaleX(0); transform-origin: left center; opacity: .85; animation: scroll-progress linear both; animation-timeline: scroll(root); }
    @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); font-weight: 700; font-size: 1.24rem; letter-spacing: -.02em; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text); font-weight: 500; font-size: .93rem; text-decoration: none; transition: color .15s ease, background .15s ease; }
.nav-list a:hover { color: var(--accent-strong); background: var(--accent-soft); }
.nav-cta { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { width: 40px; }
.nav-toggle { display: none; }
.icon-pause, .icon-play, .icon-sun, .icon-moon, .icon-menu, .icon-close { width: 18px; height: 18px; }
.icon-play { display: none; }
[data-motion-toggle][aria-pressed="true"] .icon-pause { display: none; }
[data-motion-toggle][aria-pressed="true"] .icon-play { display: block; }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1099px) {
    .nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 14px 20px 20px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); display: none; }
    .nav.is-open { display: block; animation: rise .22s ease both; }
    .is-menu-open .site-header { background: var(--surface); border-bottom-color: var(--border); }
    .is-menu-open body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(12, 16, 24, .42); animation: backdrop-in .2s ease both; }
    .nav-list { flex-direction: column; align-items: stretch; }
    .nav-list a { padding: 11px 12px; }
    .nav-cta { display: flex; margin-top: 12px; }
    .header-actions { margin-left: auto; }
    .nav-toggle { display: inline-flex; }
    .header-cta { display: none; }
}
@media (min-width: 1100px) { .header-actions { margin-left: 8px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow-x: clip; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + clamp(32px, 5.5vw, 76px)) 0 clamp(52px, 7vw, 104px); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 72% 18%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 72% 18%, #000 30%, transparent 75%); }
.hero-bg { position: absolute; inset: 0 0 -240px; overflow: hidden; pointer-events: none; }
.hero-bg span { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.hero-bg.is-playing span { will-change: transform; animation: drift 16s ease-in-out infinite alternate; }
.hero-bg span:nth-child(1) { width: 620px; height: 620px; left: 40px; top: -240px; background: rgba(26, 179, 148, .17); }
.hero-bg span:nth-child(2) { width: 560px; height: 560px; right: 60px; top: 60px; background: rgba(28, 132, 198, .14); }
.hero-bg span:nth-child(3) { width: 480px; height: 480px; left: 44%; bottom: 40px; background: rgba(123, 112, 239, .11); }
.hero-bg.is-playing span:nth-child(2) { animation-duration: 20s; animation-delay: -6s; }
.hero-bg.is-playing span:nth-child(3) { animation-duration: 24s; animation-delay: -12s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(50px, 36px, 0) scale(1.12); } }
.hero-grid { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 1040px) { .hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); } }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .lead { max-width: 56ch; color: var(--text); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .92rem; }
.hero-facts li { display: inline-flex; align-items: flex-start; gap: .45em; }
.hero-facts .icon { flex: none; margin-top: .22em; color: var(--accent); width: 1em; height: 1em; }

/* ---------- Scene kit: chat bubbles, the voice of a call, Dyzio's orb and the maps ---------- */
:root {
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --glide: cubic-bezier(.2, .8, .2, 1);
    --stage-bg: radial-gradient(120% 90% at 100% 0%, rgba(28, 132, 198, .09), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(26, 179, 148, .11), transparent 60%), var(--surface);
    --stage-edge: linear-gradient(140deg, rgba(26, 179, 148, .6), rgba(28, 132, 198, .22) 45%, rgba(123, 112, 239, .2) 75%, rgba(26, 179, 148, .4));
    --dyzio-bub: #e3f6f1;
    --dyzio-bub-edge: rgba(26, 179, 148, .3);
    --driver-bub: #fdf0de;
    --driver-bub-edge: rgba(248, 172, 89, .45);
    --map-land: #eef2f7;
    --map-block: #dde4ee;
    --map-roof: #cfd8e4;
    --map-street: #ffffff;
    --map-lane: #c9d1dc;
    --map-park: #cdeedc;
    --map-tree: #93d4b2;
    --map-water: #cde5f6;
    --ill-wood: #c9a27a;
    --ill-metal: #9aa5b5;
    --ill-dark: #2a3142;
    --ill-chair: #56677e;
}
[data-theme="dark"] {
    --stage-bg: radial-gradient(120% 90% at 100% 0%, rgba(28, 132, 198, .17), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(26, 179, 148, .16), transparent 60%), var(--surface);
    --dyzio-bub: #173a33;
    --dyzio-bub-edge: rgba(54, 211, 177, .3);
    --driver-bub: #3a2b17;
    --driver-bub-edge: rgba(248, 172, 89, .35);
    --map-land: #20222c;
    --map-block: #2a2d39;
    --map-roof: #333746;
    --map-street: #3b3f4d;
    --map-lane: #565b6b;
    --map-park: #1f3b32;
    --map-tree: #2f6550;
    --map-water: #1c3448;
    --ill-wood: #8d6c4c;
    --ill-metal: #5b6474;
    --ill-dark: #3d4558;
    --ill-chair: #3b4658;
}
.hero-stage, .ms, .how-brain, .cc-panel.is-dyzio, .city-side, .fx-tile, .rc-stage { position: relative; isolation: isolate; }
.hero-stage::before, .ms::before, .how-brain::before, .cc-panel.is-dyzio::before, .city-side::before, .fx-tile::before, .rc-stage::before {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--stage-edge); pointer-events: none; z-index: -1;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.bub { position: relative; max-width: 88%; margin: 0; padding: 9px 13px; border-radius: 16px; font-size: .92rem; line-height: 1.45; color: var(--heading); background: var(--dyzio-bub); border: 1px solid var(--dyzio-bub-edge); box-shadow: var(--shadow-sm); transform-origin: 0 100%; transition: opacity .35s var(--glide), transform .55s var(--spring); }
.bub.is-dyzio { align-self: flex-start; border-bottom-left-radius: 5px; }
.bub.is-caller { align-self: flex-end; border-bottom-right-radius: 5px; transform-origin: 100% 100%; color: #ffffff; background: linear-gradient(135deg, #1a73b0, #155f92); border-color: transparent; }
.bub.is-driver { background: var(--driver-bub); border-color: var(--driver-bub-edge); }
.js .bub:not(.is-on) { opacity: 0; transform: translateY(10px) scale(.9); }
.bub-who { display: block; margin-bottom: 1px; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.bub .w { transition: opacity .22s ease; }
.bub .w.is-hidden { opacity: 0; }
.bub-label { font-size: .72rem; font-weight: 700; color: var(--muted); }
.bub.typing { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px; color: var(--accent); }
.bub.typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
.is-live .bub.typing i { animation: dot-wait 1.1s ease-in-out infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; }
.bub.typing i:nth-child(3) { animation-delay: .3s; }
.voice { display: flex; align-items: center; justify-content: center; gap: 3px; height: 40px; }
.voice i { flex: 1 1 0; max-width: 5px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--c-cyan), var(--c-primary)); transform: scaleY(calc(var(--h, .5) * .9)); transform-origin: center; transition: transform .45s var(--glide); }
.voice[data-speaker="idle"] i { transform: scaleY(.07); }
.voice[data-speaker="caller"] i { background: linear-gradient(180deg, #62b6ea, #1c84c6); }
.voice.is-noisy i { background: linear-gradient(180deg, #f8c384, #e0892f); }
.is-live .voice[data-speaker="dyzio"] i { animation: talk 1.05s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -71ms); }
.is-live .voice[data-speaker="caller"] i { animation: talk-soft 1.25s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -97ms); }
.is-live .voice.is-noisy[data-speaker="caller"] i { animation: talk-noisy .7s steps(3) infinite; animation-delay: calc(var(--i, 0) * -53ms); }
@keyframes talk { 0%, 100% { transform: scaleY(.14); } 30% { transform: scaleY(var(--h, .5)); } 55% { transform: scaleY(.34); } 80% { transform: scaleY(calc(var(--h, .5) * .75)); } }
@keyframes talk-soft { 0%, 100% { transform: scaleY(.12); } 40% { transform: scaleY(calc(var(--h, .5) * .55)); } 70% { transform: scaleY(.25); } }
@keyframes talk-noisy { 0% { transform: scaleY(.1); } 33% { transform: scaleY(var(--h, .5)); } 66% { transform: scaleY(.45); } 100% { transform: scaleY(.15); } }
.voice-sm { height: 28px; }
.voice-xs { height: 16px; gap: 2px; }
.voice-xs i { max-width: 3px; }
.orb { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 2px; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #2fd0ad, #0f8f75); box-shadow: 0 8px 20px -8px rgba(15, 143, 117, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.orb::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(26, 179, 148, .55); opacity: 0; pointer-events: none; }
.orb i { width: 3.5px; height: 38%; border-radius: 2px; background: #ffffff; transform-origin: center; }
.orb i:nth-child(1), .orb i:nth-child(5) { height: 13%; }
.orb i:nth-child(2) { height: 44%; }
.orb i:nth-child(3) { height: 62%; }
.orb i:nth-child(4) { height: 30%; }
:is(.is-live, .is-playing) .orb.is-talking i { animation: orb-talk .85s ease-in-out infinite; }
:is(.is-live, .is-playing) .orb.is-talking i:nth-child(2) { animation-delay: -.2s; }
:is(.is-live, .is-playing) .orb.is-talking i:nth-child(3) { animation-delay: -.45s; }
:is(.is-live, .is-playing) .orb.is-talking i:nth-child(4) { animation-delay: -.65s; }
:is(.is-live, .is-playing) .orb.is-talking::after { animation: orb-ring 1.6s ease-out infinite; }
@keyframes orb-talk { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.18); } }
@keyframes orb-ring { 0% { opacity: .75; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.4); } }
.orb-xs { width: 22px; height: 22px; gap: 1px; border-radius: 7px; box-shadow: none; }
.orb-xs i { width: 2px; }
.orb-sm { width: 34px; height: 34px; border-radius: 11px; }
.orb-sm i { width: 3px; }
.orb-md { width: 56px; height: 56px; border-radius: 18px; gap: 3px; }
.orb-md i { width: 4.5px; }
.orb-lg { width: 66px; height: 66px; border-radius: 21px; gap: 3px; }
.orb-lg i { width: 5px; }
.map-land { fill: var(--map-land); }
.map-blocks rect { fill: var(--map-block); }
.map-roofs rect { fill: var(--map-roof); }
.map-park { fill: var(--map-park); }
.map-trees circle { fill: var(--map-tree); }
.map-water { fill: var(--map-water); }
.map-street { fill: none; stroke: var(--map-street); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.map-street.is-main { stroke-width: 15; }
.map-street.is-minor { stroke-width: 7; }
.map-lane { fill: none; stroke: var(--map-lane); stroke-width: 1.4; stroke-dasharray: 6 7; }
.map-bridges rect { fill: var(--map-street); stroke: var(--map-lane); stroke-width: 1.2; }
.map-roundabout { fill: none; stroke: var(--map-street); stroke-width: 14; }
.map-island { fill: var(--map-park); }
.map-loops path { fill: none; stroke: none; }
.map-route { fill: none; stroke: var(--c-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s var(--glide); }
.map-route.is-hidden { opacity: 0; transition: none; }
.map-pin-body { fill: var(--c-red); stroke: #ffffff; stroke-width: 2; }
.map-pin-dot { fill: #ffffff; }
.map-pin-pulse { fill: rgba(237, 85, 101, .3); transform-box: fill-box; transform-origin: center; }
.is-live .map-pin-pulse { animation: pin-pulse 1.8s ease-out infinite; }
@keyframes pin-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes dash-flow { to { stroke-dashoffset: -24; } }
@keyframes dot-wait { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-8px); opacity: 1; } }

/* ---------- Hero scene: a call on a phone, what Dyzio checks and the booking in the system ---------- */
.hero-stage { margin: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 14px; align-items: stretch; padding: clamp(12px, 1.6vw, 18px); border-radius: 26px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.hs-phone { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 22px; background: var(--bg); border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 4px var(--surface), 0 22px 44px -26px rgba(25, 31, 45, .55); }
.hs-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; font-size: .74rem; font-weight: 700; color: var(--muted); }
.hs-live { display: inline-flex; align-items: center; gap: .45em; }
.hs-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); }
.hs-clock { font-variant-numeric: tabular-nums; }
.hs-caller { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.hs-caller-name { display: grid; line-height: 1.2; }
.hs-caller-name strong { color: var(--heading); font-size: .95rem; }
.hs-caller-name small { color: var(--muted); font-size: .74rem; font-weight: 600; }
.hs-chat { display: flex; flex-direction: column; gap: 7px; padding: 2px; }
.hs-chat .bub { font-size: .86rem; padding: 8px 11px; }
.hs-phone .voice { height: 32px; margin-top: auto; padding: 0 6px; }
.hs-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hs-facts { display: grid; gap: 8px; }
.hs-fact { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 15px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: opacity .35s var(--glide), transform .6s var(--spring); }
/* A check not done yet waits as a quiet card without its result, so the list is never empty; its words keep full contrast. */
.js .hs-fact:not(.is-on) { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.js .hs-fact:not(.is-on) .hs-fact-icon { opacity: .45; }
.hs-fact-text strong { transition: opacity .35s ease .12s; }
.js .hs-fact:not(.is-on) .hs-fact-text strong { opacity: 0; }
.hs-fact-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--accent); background: linear-gradient(135deg, rgba(26, 179, 148, .2), rgba(28, 132, 198, .16)); }
.hs-fact-icon .icon { width: 18px; height: 18px; }
.hs-fact-text { min-width: 0; }
.hs-fact-text small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hs-fact-text strong { display: block; font-size: .9rem; line-height: 1.25; color: var(--heading); }
.hs-fact-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--on-accent); background: var(--accent-bg); transition: transform .5s var(--spring) .18s, opacity .2s ease .18s; }
.hs-fact-check .icon { width: 12px; height: 12px; }
.js .hs-fact:not(.is-on) .hs-fact-check { opacity: 0; transform: scale(0); }
.hs-system { display: flex; flex: 1; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.hs-system-title { display: flex; align-items: center; gap: .5em; font-size: .78rem; font-weight: 700; color: var(--muted); }
.hs-system-title .icon { color: var(--accent); }
.hs-orders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.hs-orders-new { display: grid; }
.hs-orders-new > * { grid-area: 1 / 1; }
.hs-order { display: grid; gap: 1px; padding: 8px 10px; border-radius: 11px; background: var(--accent-soft); border: 1px solid rgba(26, 179, 148, .35); transition: opacity .35s var(--glide), transform .6s var(--spring); }
.js .hs-order:not(.is-on) { opacity: 0; transform: translateY(-8px) scale(.94); }
.hs-order-head { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.hs-order-head strong { color: var(--heading); }
.hs-order-head em { font-style: normal; font-weight: 700; color: var(--accent-strong); }
.hs-order-route { font-size: .8rem; color: var(--text); }
/* Until the new booking lands, its place in the list waits with three soft dots. */
.hs-slot { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; border: 1.5px dashed var(--border-strong); opacity: 0; transition: opacity .3s ease; }
.js .hs-order:not(.is-on) + .hs-slot { opacity: 1; }
.hs-slot i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.is-live .hs-slot i { animation: dot-wait 1.1s ease-in-out infinite; }
.hs-slot i:nth-child(2) { animation-delay: .15s; }
.hs-slot i:nth-child(3) { animation-delay: .3s; }
.hs-past { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 9px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); font-size: .74rem; line-height: 1.35; color: var(--muted); }
.hs-past span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A ride still on its way has a live teal dot; a finished one a grey dot. */
.hs-past i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.hs-past.is-active i { background: var(--c-primary); }
.hs-past.is-active i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-primary); opacity: 0; }
.is-live .hs-past.is-active i::after { animation: live-ping 1.6s ease-out infinite; }
/* The map fills the rest of the panel; free taxis drive round it while the call goes on. */
.hs-map { position: relative; flex: 1 1 auto; min-height: 112px; overflow: hidden; border-radius: 12px; }
.hs-map .mini-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-free { opacity: .9; }
.map-free.is-a { transform: translate(40px, 118px); }
.map-free.is-b { transform: translate(124px, 102px) rotate(-90deg); }
.is-live .map-free.is-a { animation: free-a 12s linear infinite; }
.is-live .map-free.is-b { animation: free-b 12s linear infinite; animation-delay: -5.4s; }
@keyframes free-a { 0% { opacity: 0; transform: translate(-14px, 118px); } 5%, 95% { opacity: .9; } 100% { opacity: 0; transform: translate(254px, 118px); } }
@keyframes free-b { 0% { opacity: 0; transform: translate(124px, 164px) rotate(-90deg); } 5%, 95% { opacity: .9; } 100% { opacity: 0; transform: translate(124px, -14px) rotate(-90deg); } }
.map-cab use { --cab: #1ab394; }
.hs-taxi { display: flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 700; color: var(--heading); transition: opacity .35s var(--glide), transform .5s var(--spring); }
.hs-taxi i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 3px rgba(26, 179, 148, .25); }
.js .hs-taxi:not(.is-on) { opacity: 0; transform: translateY(6px); }
.hs-flyer { position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: center; gap: .4em; padding: 6px 12px; border-radius: 999px; background: var(--accent-bg); color: var(--on-accent); font-size: .78rem; font-weight: 700; white-space: nowrap; box-shadow: 0 12px 26px -10px rgba(16, 127, 105, .85); opacity: 0; pointer-events: none; }
.hs-flyer .icon { width: 12px; height: 12px; }
.hs-note { grid-column: 1 / -1; margin-top: -4px; text-align: right; font-size: .72rem; color: var(--muted); }
@media (max-width: 559px) {
    .hero-stage { grid-template-columns: minmax(0, 1fr); }
    .hs-map { flex: none; min-height: 0; aspect-ratio: 2 / 1; }
    .hs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .hs-fact { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; padding: 9px; }
    .hs-fact-check { position: absolute; right: 7px; top: 7px; width: 18px; height: 18px; }
    .hs-fact-text strong { font-size: .8rem; }
}

.hs-live i { position: relative; }
.hs-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-red); opacity: 0; }
.is-live .hs-live i::after { animation: live-ping 1.6s ease-out infinite; }
@keyframes live-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes phone-shake { 0%, 60%, 100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 16% { transform: rotate(-14deg); } 24% { transform: rotate(11deg); } 32% { transform: rotate(-11deg); } 40% { transform: rotate(6deg); } 48% { transform: rotate(-4deg); } }

/* ---------- Trust bar ---------- */
.trust { border-block: 1px solid var(--border); background: var(--surface); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; padding-block: 20px; }
.trust-lead { display: flex; align-items: center; gap: 12px; max-width: 64ch; color: var(--text); font-size: .95rem; }
.trust-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.trust-chips li { display: inline-flex; align-items: center; gap: .4em; padding: 5px 13px 5px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); font-size: .85rem; font-weight: 700; color: var(--heading); }
.trust-chips li .icon { width: .9em; height: .9em; color: var(--accent); }
.trust-chips .trust-label { border: 0; background: none; padding: 0 2px 0 0; font-weight: 600; color: var(--muted); }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(60px, 8vw, 110px) 0; }
.section-first { padding-top: clamp(20px, 3vw, 36px); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head-center { text-align: center; margin-inline: auto; }
.sub-head { margin: clamp(44px, 5vw, 64px) 0 20px; font-size: 1.3rem; }
.note-center { margin-top: 28px; text-align: center; color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .25s ease, border-color .25s ease; }
.section-alt .card { background: var(--surface-2); }
.card h4, .card h3 { margin: 12px 0 6px; }
.check-list { display: grid; gap: 10px; }
.check-list li { display: flex; gap: .6em; align-items: flex-start; }
.check-list .icon { color: var(--accent); margin-top: .22em; width: 1em; height: 1em; }

/* ---------- Problem: the caller who gives up, the figures and the sum ---------- */
.problem-grid { display: grid; gap: 20px; }
@media (min-width: 1040px) { .problem-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.call-card { position: relative; margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--radius-lg); background: radial-gradient(120% 80% at 100% 0%, rgba(237, 85, 101, .22), transparent 55%), linear-gradient(160deg, #1d2231, #13171e); color: #dbe3ec; border: 1px solid rgba(255, 255, 255, .06); box-shadow: var(--shadow-lg); overflow: hidden; }
.quote-label { position: relative; display: inline-flex; align-items: center; gap: .55em; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f4a3ad; }
.call-dial { position: relative; width: min(210px, 70%); aspect-ratio: 1; margin: 2px auto 0; }
.call-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.call-ring-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 9; }
.call-ring-fill { fill: none; stroke: #36d3b1; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 80px 80px; transition: stroke-dashoffset .19s linear, stroke .4s ease; }
.call-card[data-tone="warn"] .call-ring-fill { stroke: #f8ac59; }
.call-card[data-tone="bad"] .call-ring-fill { stroke: #ff6b7d; }
.call-ring-ticks circle { fill: rgba(255, 255, 255, .4); }
.call-pulse { position: absolute; inset: 16%; border-radius: 50%; border: 2px solid rgba(54, 211, 177, .5); opacity: 0; }
.call-card.is-live[data-state="ringing"] .call-pulse { animation: call-pulse 1.4s ease-out infinite; }
.call-card.is-live[data-state="ringing"] .call-pulse + .call-pulse { animation-delay: .7s; }
@keyframes call-pulse { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
.call-center { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1px; text-align: center; }
.call-phone { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #2fd0ad, #0f8f75); box-shadow: 0 10px 24px -10px rgba(26, 179, 148, .9); transition: background .4s ease; }
.call-card[data-tone="bad"] .call-phone { background: linear-gradient(135deg, #ff7a8a, #d8394f); box-shadow: 0 10px 24px -10px rgba(237, 85, 101, .9); }
.call-card.is-live[data-state="ringing"] .call-phone { animation: phone-shake 1.2s ease-in-out infinite; }
.call-seconds { font-size: 2.1rem; line-height: 1.05; color: #ffffff; font-variant-numeric: tabular-nums; }
.call-name { font-weight: 700; color: #dbe3ec; }
.call-state { display: inline-flex; align-items: baseline; gap: 2px; font-size: .78rem; color: #a3afbd; }
.call-state i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.call-card.is-live .call-state i { animation: dot-wait 1.1s ease-in-out infinite; }
.call-state i:nth-child(2) { animation-delay: .15s; }
.call-state i:nth-child(3) { animation-delay: .3s; }
.call-card[data-state="ended"] .call-state { visibility: hidden; }
.quote-steps { position: relative; display: grid; gap: 8px; }
.quote-step { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: opacity .4s var(--glide), transform .55s var(--spring); }
/* A moment of the wait not reached yet: its time already stands on a dashed line, its words come when the time comes. */
.js .quote-step:not(.is-on) { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .16); }
.quote-text { transition: opacity .4s var(--glide), transform .55s var(--spring); }
.js .quote-step:not(.is-on) .quote-text { opacity: 0; transform: translateX(-10px); }
.quote-time { flex: none; min-width: 44px; font-weight: 700; color: #f4a3ad; font-variant-numeric: tabular-nums; }
.quote-text { font-size: 1rem; font-weight: 600; color: #ffffff; }
.call-end { display: flex; align-items: center; gap: .55em; padding: 10px 14px; border-radius: 12px; background: rgba(237, 85, 101, .16); border: 1px solid rgba(237, 85, 101, .38); color: #ffc7ce; font-weight: 700; transition: opacity .35s var(--glide), transform .55s var(--spring); }
.js .call-end:not(.is-on) { opacity: 0; transform: scale(.94); }
.quote-source { position: relative; margin-top: auto; font-size: .8rem; color: #a3afbd; }
.stat-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; --tone: var(--c-primary); }
.stat.is-blue, .gains-card.is-blue { --tone: var(--c-blue); }
.stat.is-purple, .gains-card.is-purple { --tone: var(--c-purple); }
.stat.is-amber, .gains-card.is-amber { --tone: var(--c-amber); }
.stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--tone), transparent); }
.stat-visual { position: relative; width: 128px; aspect-ratio: 1; }
.ring { display: block; width: 100%; height: 100%; }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 11; }
.ring-fill { fill: none; stroke: var(--tone); stroke-width: 11; stroke-linecap: round; stroke-dasharray: var(--len) 100; stroke-dashoffset: calc(var(--start) * -1); transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray 1.4s var(--glide) .25s; }
.js .stat:not(.is-visible) .ring-fill { stroke-dasharray: 0 100; }
.stat-value { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.7rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.stat-ring .stat-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.55rem; }
.stat-suffix { margin-left: .05em; font-size: .62em; color: var(--muted); }
.stat-prefix { font-size: .48em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.stat-text { font-size: .95rem; color: var(--text); }
.stat-source { margin-top: auto; font-size: .76rem; color: var(--muted); }
.patience { display: grid; gap: 6px; margin: 6px 0 2px; }
.patience-track { position: relative; height: 12px; border-radius: 6px; background: var(--surface-3); }
.patience-fill { position: absolute; inset: 0 auto 0 0; width: var(--at); border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), var(--c-amber) 62%, var(--c-red)); transform-origin: left center; transition: transform 1.4s var(--glide) .25s; }
.js .stat:not(.is-visible) .patience-fill { transform: scaleX(0); }
.patience-mark { position: absolute; left: var(--at); top: 50%; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; color: #ffffff; background: #d8394f; box-shadow: 0 0 0 4px var(--surface); transition: transform .55s var(--spring) 1.5s; }
.patience-mark .icon { width: 14px; height: 14px; }
.js .stat:not(.is-visible) .patience-mark { transform: scale(0); }
[data-motion="paused"] .stat *, [data-motion="paused"] .stat *::before, [data-motion="paused"] .stat *::after { transition: none !important; }
.patience-scale { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 600; color: var(--muted); }
.gains-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .gains-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .gains-grid { grid-template-columns: repeat(4, 1fr); } }
.gains-card { --tone: var(--c-primary); }
.gains-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #ffffff; background: var(--tone); box-shadow: 0 12px 22px -14px var(--tone); }
.gains-card p { font-size: .95rem; color: var(--text); }
.sum-card { margin-top: 20px; display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.sum-card h3 { font-size: 1.05rem; }
.sum-row { display: grid; grid-template-columns: repeat(4, auto) minmax(0, 1fr); justify-content: start; align-items: start; gap: 4px clamp(12px, 1.8vw, 24px); }
.sum-term { display: grid; gap: 2px; margin: 0; }
.sum-term span { max-width: 26ch; }
.sum-term strong { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.sum-term span { font-size: .85rem; color: var(--muted); }
.sum-term.is-total strong { color: var(--accent-strong); }
.sum-op { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.1; font-weight: 600; color: var(--muted); }
.sum-why { max-width: 76ch; padding-left: 12px; border-left: 3px solid rgba(26, 179, 148, .45); font-size: .93rem; line-height: 1.55; color: var(--text); }
.sum-driver { font-weight: 600; color: var(--heading); }
@media (max-width: 559px) {
    .sum-row { grid-template-columns: 1.1em minmax(0, 1fr); grid-template-areas: ". first" "times fare" "equals total"; gap: 10px 8px; }
    .sum-row > :nth-child(1) { grid-area: first; }
    .sum-row > :nth-child(2) { grid-area: times; }
    .sum-row > :nth-child(3) { grid-area: fare; }
    .sum-row > :nth-child(4) { grid-area: equals; }
    .sum-row > :nth-child(5) { grid-area: total; }
    .sum-term span { max-width: none; }
}

/* ---------- Problem: calls about a ride already booked, which Dyzio settles ---------- */
.rc { display: grid; gap: 18px; }
.rc-head { max-width: 74ch; }
.rc-head .sub-head { margin-bottom: 10px; }
.rc-lead { color: var(--text); }
.rc-stage { margin: 0; display: grid; gap: 14px; padding: clamp(14px, 2vw, 22px); border-radius: 22px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.rc-cards { display: grid; gap: 12px; }
@media (min-width: 860px) { .rc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rc-card { position: relative; display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: background-color .3s ease; }
.rc-card .bub { max-width: 92%; font-size: .88rem; }
.rc-kind { display: flex; align-items: center; gap: .55em; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rc-icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--accent); background: linear-gradient(135deg, rgba(26, 179, 148, .2), rgba(28, 132, 198, .15)); transition: opacity .3s ease; }
.rc-icon .icon { width: 16px; height: 16px; }
.rc-done { display: inline-flex; align-items: center; align-self: flex-start; gap: .35em; margin-top: auto; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .8rem; font-weight: 700; transition: opacity .3s ease, transform .5s var(--spring); }
.rc-done .icon { width: .9em; height: .9em; }
/* A call not reached yet waits as a quiet dashed card; the call at work glows like the active step of a conversation. */
.js .rc-card:not(.is-active):not(.is-done) { background: var(--surface-2); border-style: dashed; }
.js .rc-card:not(.is-active):not(.is-done) .rc-icon { opacity: .45; filter: grayscale(.7); }
.js .rc-card:not(.is-done) .rc-done { opacity: 0; transform: scale(.85); }
.rc-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(26, 179, 148, .6); box-shadow: 0 0 0 3px rgba(26, 179, 148, .18), 0 14px 30px -18px rgba(26, 179, 148, .85); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.rc-card.is-active::after { opacity: 1; }
.rc-line { display: flex; align-items: center; gap: .65em; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; color: var(--heading); }
.rc-line-icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(28, 132, 198, .14); color: var(--info-text); }
.rc-line-icon .icon { width: 16px; height: 16px; }
.rc-line-dot { position: relative; flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--c-primary); }
.rc-line-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-primary); opacity: 0; }
.is-live .rc-line-dot::after { animation: live-ping 1.6s ease-out infinite; }
.rc-note { text-align: right; font-size: .72rem; color: var(--muted); }

/* ---------- How it works: the conversation and what Dyzio does meanwhile ---------- */
.how-stage { position: relative; display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (min-width: 1040px) { .how-stage { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.how-beam { position: absolute; inset: 0; z-index: 3; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (min-width: 1040px) { .how-beam { display: block; } }
.how-beam-glow { fill: none; stroke: rgba(26, 179, 148, .22); stroke-width: 9; stroke-linecap: round; opacity: 0; }
.how-beam-line { fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.how-beam.is-on .how-beam-line { opacity: 1; transition: opacity .45s ease; }
.how-beam.is-on .how-beam-glow { opacity: 1; transition: opacity .4s ease .2s; }
.how-beam-spark { fill: #ffffff; stroke: var(--c-primary); stroke-width: 3; opacity: 0; }
.how-call { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: var(--bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
.hc-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; border-bottom: 1px solid var(--border); }
.hc-title { display: grid; line-height: 1.25; }
.hc-title strong { color: var(--heading); font-size: .95rem; }
.hc-title small { min-height: 1.25em; color: var(--accent-strong); font-size: .8rem; font-weight: 700; }
.hc-chat { display: flex; flex-direction: column; gap: 8px; }
.how-call .voice { margin-top: 2px; }
.hc-note { font-size: .76rem; color: var(--muted); }
.how-brain { display: grid; gap: 12px; padding: clamp(16px, 2vw, 22px); border-radius: 24px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.hb-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hb-tiles { display: grid; gap: 10px; }
@media (min-width: 640px) { .hb-tiles { grid-template-columns: 1fr 1fr; } }
.hb-tile { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: background-color .3s ease; }
/* A step the call has not reached yet: a quiet card with a faded icon; its words stay readable in the muted colour. */
.js .hb-tile:not(.is-active):not(.is-done) { background: var(--surface-2); border-style: dashed; }
.js .hb-tile:not(.is-active):not(.is-done) .hb-icon { opacity: .45; filter: grayscale(.7); }
.js .hb-tile:not(.is-active):not(.is-done) :is(.hb-body strong, .hb-text) { color: var(--muted); }
.hb-body strong, .hb-text { transition: color .3s ease; }
.hb-icon { transition: opacity .3s ease; }
/* The step at work gets a glowing frame that is drawn once and only faded in. */
.hb-tile::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid rgba(26, 179, 148, .6); box-shadow: 0 0 0 3px rgba(26, 179, 148, .18), 0 14px 30px -18px rgba(26, 179, 148, .85); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.hb-tile.is-active::before { opacity: 1; }
.hb-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: linear-gradient(135deg, rgba(26, 179, 148, .2), rgba(28, 132, 198, .15)); transition: background .3s ease, color .3s ease; }
.hb-tile.is-active .hb-icon { color: var(--on-accent); background: var(--accent-bg); }
/* The step at work: a soft glow breathes round its icon and a bar fills under its words. */
.hb-icon::after { content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 16px; background: rgba(26, 179, 148, .28); opacity: 0; pointer-events: none; }
.hb-tile.is-active .hb-icon::after { animation: hb-glow 1.3s ease-out infinite; }
.hb-tile::after { content: ""; position: absolute; left: 64px; right: 14px; bottom: 7px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--c-primary), var(--c-cyan)); transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none; }
.hb-tile.is-active::after { opacity: 1; animation: hb-progress 1.1s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes hb-glow { 0% { opacity: .9; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes hb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hb-body { display: grid; gap: 3px; min-width: 0; }
.hb-body strong { font-size: .95rem; line-height: 1.3; color: var(--heading); }
.hb-text { font-size: .84rem; line-height: 1.45; color: var(--text); }
.hb-result { display: inline-flex; align-items: center; justify-self: start; gap: .35em; margin-top: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .78rem; font-weight: 700; transition: opacity .3s ease, transform .5s var(--spring); }
.hb-result .icon { width: .9em; height: .9em; }
.js .hb-tile:not(.is-done) .hb-result { opacity: 0; transform: scale(.85); }

/* ---------- Owner line ---------- */
.owner-why { display: flex; align-items: flex-start; gap: .6em; margin-top: clamp(20px, 2.6vw, 30px); padding: 13px 18px; border-radius: 12px; background: var(--accent-soft); color: var(--heading); font-weight: 600; }
.owner-why .icon { margin-top: .18em; color: var(--accent); }

/* ---------- Features: one small scene per feature, drawn like the bigger scenes ---------- */
.feature-grid { display: grid; gap: 14px; }
@media (min-width: 620px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(26, 179, 148, .4); }
.feature-card h3 { font-size: 1.08rem; }
.feature-card p { font-size: .95rem; color: var(--text); }
.fx-tile { height: 128px; margin-bottom: 14px; padding: 8px 12px; border-radius: 14px; background: var(--stage-bg); --fs-t: calc(7s + var(--d, 0) * .7s); }
.fs { --fs-card: var(--surface); --fs-soft: var(--surface-3); --fs-line: var(--border-strong); --fs-ink: var(--heading); display: block; width: 100%; height: 100%; overflow: visible; }
[data-theme="dark"] .fs { --fs-card: var(--surface-3); --fs-soft: #3a3d4b; --fs-line: #4a5160; }
.fs .map-street { stroke-linecap: butt; }
.fs-card { fill: var(--fs-card); stroke: var(--fs-line); stroke-width: 1; }
.fs-line { fill: var(--fs-line); }
.fs-line.is-head { fill: var(--fs-ink); opacity: .55; }
.fs-line.is-value { fill: var(--c-primary); opacity: .6; }
.fs-line.is-accent { fill: var(--accent); }
.fs-bub-caller { fill: url(#fs-g-caller) #1a6ca5; }
.fs-bub-dyzio { fill: var(--dyzio-bub); stroke: var(--dyzio-bub-edge); stroke-width: 1; }
.fs-bar { fill: #ffffff; transform-box: fill-box; transform-origin: center; }
.fs-bar.is-dyzio { fill: var(--c-primary); }
.fs-bar.is-caller { fill: var(--c-blue); }
.fs-orb { fill: url(#fs-g-orb) #16a386; }
.fs-orb-bar { fill: #ffffff; transform-box: fill-box; transform-origin: center; }
.fs-check-bg { fill: var(--c-primary); }
.fs-check-mark { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fs-in, .fs-hl, .fs-pick, .fs-word, .fs-repeat, .fs-orb-big, .fs-scan, .fs-ripple, .fs-radar, .fs-agent-ring, .fs-seg { transform-box: fill-box; transform-origin: center; }
.fs-in.is-caller { transform-origin: 100% 100%; }
/* A conversation instead of a menu: the keypad is struck out, the caller and Dyzio simply talk. */
.fs-keypad { opacity: .45; }
.fs-key { fill: var(--fs-soft); }
.fs-strike { fill: var(--c-red); transform-box: fill-box; transform-origin: 0 50%; }
/* An address: the caller describes it, Dyzio finds one point and drops the pin. */
.fs-scan { fill: rgba(26, 179, 148, .12); stroke: var(--c-primary); stroke-width: 1.6; opacity: 0; }
.fs-ripple { fill: none; stroke: var(--c-red); stroke-width: 1.6; opacity: 0; }
.fs-drop { transform-box: fill-box; transform-origin: 50% 100%; }
/* A fare: one row of the price list lights up and travels into Dyzio's answer. */
.fs-hl { fill: var(--accent-soft); stroke: var(--c-primary); stroke-width: 1.2; }
.fs-chip { fill: var(--c-primary); }
.fs-fly { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fs-tag { fill: var(--c-amber); }
.fs-tag-hole { fill: var(--fs-card); }
/* Arrival time: the taxi follows its route while the clock counts the minutes. */
.fs-route { fill: none; stroke: var(--c-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 7; }
.fs-cab { transform: translate(186px, 34px); }
.fs-cab.is-status { transform: translate(194px, 68px); }
.fs-clock-bg { fill: var(--fs-card); stroke: var(--fs-line); stroke-width: 1; }
.fs-clock-face { fill: var(--accent-soft); }
.fs-hand rect { fill: var(--fs-ink); }
.fs-hand.is-minute rect { fill: var(--c-primary); }
.fx-arrival .fs-hand.is-hour { transform: rotate(90deg); }
.fx-schedule .fs-hand.is-hour { transform: rotate(210deg); }
.fs-clock-pin { fill: var(--fs-ink); }
.fs-tick { fill: var(--fs-line); }
/* Rides for later: a day in the calendar and an hour on the clock. */
.fs-cal-head { fill: var(--c-primary); }
.fs-cal-ring { fill: var(--ill-dark); }
.fs-day { fill: var(--fs-soft); }
.fs-pick { fill: var(--c-primary); }
/* Ride options: a dog, luggage and a note fly into their places in the booking. */
.fs-slot { fill: var(--surface-2); stroke: var(--fs-line); stroke-width: 1; stroke-dasharray: 3 3; }
.fs-slot-fill { fill: var(--c-primary); opacity: .6; transform-box: fill-box; transform-origin: 0 50%; }
.fs-opt { color: var(--accent); }
.fs-opt-bg { fill: var(--fs-card); stroke: var(--c-primary); stroke-width: 1.4; }
.fs-opt1 { transform: translate(90px, 46px) scale(.7); }
.fs-opt2 { transform: translate(90px, 66px) scale(.7); }
.fs-opt3 { transform: translate(90px, 86px) scale(.7); }
/* Where is my taxi: the active ride on the map and Dyzio's answer. */
.fs-q { fill: #ffffff; font-size: 21px; font-weight: 800; }
.fs-check-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fs-radar { fill: none; stroke: var(--c-primary); stroke-width: 2; opacity: 0; }
/* Changing or cancelling: one booking gets a teal "changed" stamp, the other a red "cancelled" one and fades. */
.fs-ticket.is-b { opacity: .55; }
.fs-dot { fill: var(--c-primary); }
.fs-dot.is-end { fill: var(--c-red); }
.fs-route-line { fill: var(--fs-line); }
.fs-word-box { stroke-width: 2; }
.fs-word.is-changed .fs-word-box { fill: rgba(26, 179, 148, .12); stroke: var(--c-primary); }
.fs-word.is-cancelled .fs-word-box { fill: rgba(237, 85, 101, .12); stroke: var(--c-red); }
.fs-word-text { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fs-word.is-changed .fs-word-text { fill: var(--accent-strong); }
.fs-word.is-cancelled .fs-word-text { fill: var(--danger); }
/* Changing language: the badge turns from PL to EN and Dyzio answers in English. */
.fs-lang { fill: var(--fs-card); stroke: var(--fs-line); stroke-width: 1; }
.fs-lang.is-en { fill: #15639a; stroke: none; }
.fs-lang-text { fill: var(--fs-ink); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.fs-lang-text.is-en { fill: #ffffff; }
.fs-flip.is-pl { opacity: 0; }
/* Handing over: the call travels from Dyzio to a dispatcher with a headset. */
.fs-link { fill: none; stroke: var(--fs-line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 6; }
.fs-agent-bg { fill: var(--fs-card); stroke: var(--fs-line); stroke-width: 1; }
.fs-agent-ring { fill: none; stroke: var(--c-blue); stroke-width: 2; opacity: 0; }
.fs-headset { fill: none; stroke: var(--ill-dark); stroke-width: 2.4; stroke-linecap: round; }
.fs-headset-cup { fill: var(--ill-dark); }
.fs-talk-wave { fill: none; stroke: var(--c-blue); stroke-width: 2.2; stroke-linecap: round; }
.fs-token { opacity: 0; color: #ffffff; }
.fs-token circle { fill: var(--c-primary); }
/* Regular customers: past rides come in and the usual one is offered again. */
.fs-star-bg { fill: var(--c-amber); }
.fs-star { fill: #ffffff; }
.fs-row { fill: var(--fs-card); stroke: var(--fs-line); stroke-width: 1; }
.fs-row-pin { color: var(--muted); }
.fs-row-hl { fill: var(--accent-soft); stroke: var(--c-primary); stroke-width: 1.6; }
.fs-repeat { color: #ffffff; }
/* No dead silence: on the time line the caller, a short note and the answer follow without a gap. */
.fs-track { fill: var(--surface-2); stroke: var(--fs-line); stroke-width: 1; }
.fs-track-icon { color: var(--c-blue); }
.fs-dot-wait { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.fs-playhead { fill: var(--c-purple); transform: translateX(226px); }
.fs-seg { transform-origin: 0 50%; }

/* The story of every scene runs only while its tile is on screen and motion is allowed; the still picture above is its last frame. */
.fx-tile.is-playing .fs-in1 { animation: fs-in1 var(--fs-t) infinite; }
.fx-tile.is-playing .fs-in2 { animation: fs-in2 var(--fs-t) infinite; }
.fx-tile.is-playing .fs-in3 { animation: fs-in3 var(--fs-t) infinite; }
.fx-tile.is-playing .fs-in4 { animation: fs-in4 var(--fs-t) infinite; }
.fx-tile.is-playing .fs-in5 { animation: fs-in5 var(--fs-t) infinite; }
.fx-tile.is-playing .fs-bar { animation: fs-say-a var(--fs-t) ease-in-out infinite; animation-delay: calc(var(--b, 0) * -110ms); }
.fx-tile.is-playing .fs-bar.is-dyzio, .fx-tile.is-playing .fs-orb-bar { animation-name: fs-say-b; }
.fx-handoff.is-playing .fs-orb-bar { animation-name: fs-say-a; }
.fx-silence.is-playing .fs-orb-bar { animation: none; }
.fx-silence.is-playing .fs-bar.is-dyzio { animation-name: fs-say-c; }
.fx-talk.is-playing .fs-keypad { animation: fs-keypad var(--fs-t) ease-in-out infinite; }
.fx-talk.is-playing .fs-strike { animation: fs-strike var(--fs-t) infinite; }
.fx-address.is-playing .fs-scan { animation: fs-scan var(--fs-t) ease-out infinite; }
.fx-address.is-playing .fs-drop { animation: fs-drop var(--fs-t) infinite; }
.fx-address.is-playing .fs-ripple { animation: fs-ripple var(--fs-t) ease-out infinite; }
.fx-price.is-playing .fs-hl { animation: fs-hl var(--fs-t) infinite; }
.fx-price.is-playing .fs-fly { animation: fs-fly var(--fs-t) infinite; }
.fx-price.is-playing .fs-fly-y { animation: fs-fly-y var(--fs-t) infinite; }
.fx-arrival.is-playing .fs-route { animation: fs-fade var(--fs-t) infinite; }
.fx-arrival.is-playing .fs-cab { animation: fs-cab-route var(--fs-t) infinite; }
.fx-arrival.is-playing .fs-hand.is-hour { animation: fs-hour-arrival var(--fs-t) ease-in-out infinite; }
.fx-arrival.is-playing .fs-hand.is-minute { animation: fs-minute-arrival var(--fs-t) ease-in-out infinite; }
.fx-schedule.is-playing .fs-pick { animation: fs-pick var(--fs-t) infinite; }
.fx-schedule.is-playing .fs-hand.is-hour { animation: fs-hour-schedule var(--fs-t) ease-in-out infinite; }
.fx-schedule.is-playing .fs-hand.is-minute { animation: fs-minute-schedule var(--fs-t) ease-in-out infinite; }
.fx-options.is-playing .fs-opt1 { animation: fs-opt1 var(--fs-t) infinite; }
.fx-options.is-playing .fs-opt2 { animation: fs-opt2 var(--fs-t) infinite; }
.fx-options.is-playing .fs-opt3 { animation: fs-opt3 var(--fs-t) infinite; }
.fx-options.is-playing .fs-opt1 .fs-opt-y { animation: fs-arc1 var(--fs-t) infinite; }
.fx-options.is-playing .fs-opt2 .fs-opt-y { animation: fs-arc2 var(--fs-t) infinite; }
.fx-options.is-playing .fs-opt3 .fs-opt-y { animation: fs-arc3 var(--fs-t) infinite; }
.fx-options.is-playing .fs-fill1 { animation: fs-fill1 var(--fs-t) infinite; }
.fx-options.is-playing .fs-fill2 { animation: fs-fill2 var(--fs-t) infinite; }
.fx-options.is-playing .fs-fill3 { animation: fs-fill3 var(--fs-t) infinite; }
.fx-status.is-playing .fs-cab { animation: fs-cab-status var(--fs-t) infinite; }
.fx-status.is-playing .fs-radar { animation: fs-radar var(--fs-t) ease-out infinite; }
.fx-change.is-playing .fs-word.is-changed { animation: fs-stamp-a var(--fs-t) infinite; }
.fx-change.is-playing .fs-word.is-cancelled { animation: fs-stamp-b var(--fs-t) infinite; }
.fx-change.is-playing .fs-ticket.is-b { animation: fs-ticket-b var(--fs-t) infinite; }
.fx-language.is-playing .fs-flip.is-pl { animation: fs-flip-out var(--fs-t) infinite; }
.fx-language.is-playing .fs-flip.is-en { animation: fs-flip-in var(--fs-t) infinite; }
.fx-handoff.is-playing .fs-orb-big { animation: fs-orb-pulse var(--fs-t) ease-in-out infinite; }
.fx-handoff.is-playing .fs-token { animation: fs-token var(--fs-t) linear infinite; }
.fx-handoff.is-playing .fs-agent-ring { animation: fs-ring var(--fs-t) ease-out infinite; }
.fx-regulars.is-playing .fs-repeat { animation: fs-repeat var(--fs-t) infinite; }
.fx-silence.is-playing .fs-playhead { animation: fs-playhead var(--fs-t) infinite; }
.fx-silence.is-playing .fs-seg1 { animation: fs-seg1 var(--fs-t) infinite; }
.fx-silence.is-playing .fs-seg2 { animation: fs-seg2 var(--fs-t) infinite; }
.fx-silence.is-playing .fs-seg3 { animation: fs-seg3 var(--fs-t) infinite; }
.fx-silence.is-playing .fs-dot-wait { animation: dot-wait 1.1s ease-in-out infinite; }
.fx-silence.is-playing .fs-dot-wait:nth-of-type(2) { animation-delay: .15s; }
.fx-silence.is-playing .fs-dot-wait:nth-of-type(3) { animation-delay: .3s; }

/* Steps shared by the scenes: an element springs in at its moment, stays and fades out with the rest before the next round. */
@keyframes fs-in1 { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 13%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }
@keyframes fs-in2 { 0%, 18% { opacity: 0; transform: translateY(8px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 25%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }
@keyframes fs-in3 { 0%, 30% { opacity: 0; transform: translateY(8px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 37%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }
@keyframes fs-in4 { 0%, 50% { opacity: 0; transform: translateY(8px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 57%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }
@keyframes fs-in5 { 0%, 62% { opacity: 0; transform: translateY(8px) scale(.9); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 69%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(-4px) scale(1); } }
@keyframes fs-fade { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* A voice moves only while its speaker talks: the caller first, Dyzio after the work in between. */
@keyframes fs-say-a { 0%, 12% { transform: scaleY(1); } 15% { transform: scaleY(.4); } 18% { transform: scaleY(1.12); } 21% { transform: scaleY(.55); } 24% { transform: scaleY(1); } 27% { transform: scaleY(.35); } 30% { transform: scaleY(1.08); } 33% { transform: scaleY(.5); } 36% { transform: scaleY(.95); } 39% { transform: scaleY(.45); } 42%, 100% { transform: scaleY(1); } }
@keyframes fs-say-b { 0%, 57% { transform: scaleY(1); } 60% { transform: scaleY(.4); } 63% { transform: scaleY(1.12); } 66% { transform: scaleY(.55); } 69% { transform: scaleY(1); } 72% { transform: scaleY(.35); } 75% { transform: scaleY(1.08); } 78% { transform: scaleY(.5); } 81% { transform: scaleY(.95); } 84% { transform: scaleY(.45); } 87%, 100% { transform: scaleY(1); } }
@keyframes fs-say-c { 0%, 60% { transform: scaleY(1); } 63% { transform: scaleY(.4); } 66% { transform: scaleY(1.12); } 69% { transform: scaleY(.55); } 72% { transform: scaleY(1); } 75% { transform: scaleY(.35); } 78% { transform: scaleY(1.08); } 81% { transform: scaleY(.5); } 84%, 100% { transform: scaleY(1); } }
@keyframes fs-keypad { 0%, 5% { opacity: 1; } 12%, 90% { opacity: .45; } 98%, 100% { opacity: 1; } }
@keyframes fs-strike { 0%, 3% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 10%, 90% { opacity: 1; transform: scaleX(1); } 97% { opacity: 0; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0); } }
@keyframes fs-scan { 0%, 26% { opacity: 0; transform: scale(.35); } 27% { opacity: .9; transform: scale(.35); } 38% { opacity: 0; transform: scale(1.45); } 39% { opacity: 0; transform: scale(.35); } 40% { opacity: .9; transform: scale(.35); } 51%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes fs-drop { 0%, 48% { opacity: 0; transform: translateY(-30px) scale(.85); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 51% { opacity: 1; } 57%, 90% { opacity: 1; transform: translateY(0) scale(1); animation-timing-function: ease-in; } 97%, 100% { opacity: 0; transform: translateY(0) scale(1); } }
@keyframes fs-ripple { 0%, 54% { opacity: 0; transform: scale(.3); } 55% { opacity: .85; transform: scale(.3); } 68%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes fs-hl { 0%, 20% { opacity: 0; transform: scaleX(.6); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 27%, 90% { opacity: 1; transform: scaleX(1); } 97%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fs-fly { 0%, 30% { opacity: 0; transform: translate(0, 0) scale(1); } 32% { opacity: 1; transform: translate(0, 0) scale(1.08); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 49% { opacity: 1; transform: translate(94px, -6px) scale(.9); } 53%, 100% { opacity: 0; transform: translate(94px, -6px) scale(.6); } }
@keyframes fs-fly-y { 0%, 32% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 40.5% { transform: translateY(-22px); animation-timing-function: cubic-bezier(.6, 0, .8, .3); } 49%, 100% { transform: translateY(0); } }
@keyframes fs-cab-route {
    0% { opacity: 0; transform: translate(24px, 82px) rotate(0deg); }
    6% { opacity: 1; transform: translate(24px, 82px) rotate(0deg); animation-timing-function: ease-in; }
    39% { transform: translate(146px, 82px) rotate(0deg); animation-timing-function: linear; }
    43% { transform: translate(150px, 78px) rotate(-90deg); animation-timing-function: linear; }
    52% { transform: translate(150px, 38px) rotate(-90deg); animation-timing-function: linear; }
    56% { transform: translate(154px, 34px) rotate(0deg); animation-timing-function: ease-out; }
    66%, 90% { opacity: 1; transform: translate(186px, 34px) rotate(0deg); }
    97%, 100% { opacity: 0; transform: translate(186px, 34px) rotate(0deg); }
}
@keyframes fs-hour-arrival { 0%, 8% { transform: rotate(0deg); } 66%, 88% { transform: rotate(90deg); } 100% { transform: rotate(360deg); } }
@keyframes fs-minute-arrival { 0%, 8% { transform: rotate(0deg); } 66%, 100% { transform: rotate(720deg); } }
@keyframes fs-pick { 0%, 18% { opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 26%, 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes fs-hour-schedule { 0%, 28% { transform: rotate(0deg); } 58%, 88% { transform: rotate(210deg); } 100% { transform: rotate(360deg); } }
@keyframes fs-minute-schedule { 0%, 28% { transform: rotate(0deg); } 58%, 100% { transform: rotate(1080deg); } }
@keyframes fs-opt1 { 0%, 3% { opacity: 0; transform: translate(28px, 30px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 10%, 16% { opacity: 1; transform: translate(28px, 30px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 28%, 90% { opacity: 1; transform: translate(90px, 46px) scale(.7); } 97%, 100% { opacity: 0; transform: translate(90px, 46px) scale(.7); } }
@keyframes fs-opt2 { 0%, 5% { opacity: 0; transform: translate(212px, 50px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 12%, 28% { opacity: 1; transform: translate(212px, 50px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 40%, 90% { opacity: 1; transform: translate(90px, 66px) scale(.7); } 97%, 100% { opacity: 0; transform: translate(90px, 66px) scale(.7); } }
@keyframes fs-opt3 { 0%, 7% { opacity: 0; transform: translate(28px, 84px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 14%, 40% { opacity: 1; transform: translate(28px, 84px) scale(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 52%, 90% { opacity: 1; transform: translate(90px, 86px) scale(.7); } 97%, 100% { opacity: 0; transform: translate(90px, 86px) scale(.7); } }
@keyframes fs-arc1 { 0%, 16% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 22% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .8, .3); } 28%, 100% { transform: translateY(0); } }
@keyframes fs-arc2 { 0%, 28% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 34% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .8, .3); } 40%, 100% { transform: translateY(0); } }
@keyframes fs-arc3 { 0%, 40% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 46% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .8, .3); } 52%, 100% { transform: translateY(0); } }
@keyframes fs-fill1 { 0%, 27% { opacity: 0; transform: scaleX(.2); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 33%, 90% { opacity: .6; transform: scaleX(1); } 97%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fs-fill2 { 0%, 39% { opacity: 0; transform: scaleX(.2); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 45%, 90% { opacity: .6; transform: scaleX(1); } 97%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fs-fill3 { 0%, 51% { opacity: 0; transform: scaleX(.2); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } 57%, 90% { opacity: .6; transform: scaleX(1); } 97%, 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fs-cab-status { 0% { opacity: 0; transform: translate(118px, 68px); } 6%, 14% { opacity: 1; transform: translate(118px, 68px); animation-timing-function: cubic-bezier(.45, 0, .55, 1); } 70%, 90% { opacity: 1; transform: translate(194px, 68px); } 97%, 100% { opacity: 0; transform: translate(194px, 68px); } }
@keyframes fs-radar { 0%, 15% { opacity: 0; transform: scale(.5); } 16% { opacity: .9; transform: scale(.5); } 29% { opacity: 0; transform: scale(1.8); } 30% { opacity: 0; transform: scale(.5); } 31% { opacity: .9; transform: scale(.5); } 44%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes fs-stamp-a { 0%, 26% { opacity: 0; transform: scale(1.7) rotate(-12deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 34%, 90% { opacity: 1; transform: scale(1) rotate(0deg); } 97%, 100% { opacity: 0; transform: scale(1) rotate(0deg); } }
@keyframes fs-stamp-b { 0%, 50% { opacity: 0; transform: scale(1.7) rotate(-12deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 58%, 90% { opacity: 1; transform: scale(1) rotate(0deg); } 97%, 100% { opacity: 0; transform: scale(1) rotate(0deg); } }
@keyframes fs-ticket-b { 0%, 57% { opacity: 1; transform: translateX(0); } 58.5% { transform: translateX(-2.5px); } 60% { transform: translateX(2.5px); } 61.5% { opacity: .75; transform: translateX(-1.5px); } 63% { transform: translateX(0); } 66%, 90% { opacity: .55; transform: translateX(0); } 98%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes fs-flip-out { 0%, 6% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 13%, 27% { opacity: 1; transform: scale(1); animation-timing-function: ease-in; } 31% { opacity: 1; transform: scale(0, 1); } 31.1%, 100% { opacity: 0; transform: scale(0, 1); } }
@keyframes fs-flip-in { 0%, 31% { opacity: 0; transform: scale(0, 1); } 31.1% { opacity: 1; transform: scale(0, 1); animation-timing-function: ease-out; } 35%, 90% { opacity: 1; transform: scale(1, 1); } 97%, 100% { opacity: 0; transform: scale(1, 1); } }
@keyframes fs-orb-pulse { 0%, 6% { transform: scale(1); } 12% { transform: scale(1.07); } 18% { transform: scale(1); } 24% { transform: scale(1.07); } 30%, 100% { transform: scale(1); } }
@keyframes fs-token {
    0%, 31% { opacity: 0; transform: translate(72px, 58px) scale(.6); }
    33% { opacity: 1; transform: translate(72px, 58px) scale(1); }
    35.62% { transform: translate(83px, 45.5px) scale(1); }
    38.25% { transform: translate(94.8px, 36.6px) scale(1); }
    40.88% { transform: translate(107.2px, 31.3px) scale(1); }
    43.5% { transform: translate(119.8px, 29.5px) scale(1); }
    46.12% { transform: translate(132.2px, 31.3px) scale(1); }
    48.75% { transform: translate(144.3px, 36.6px) scale(1); }
    51.38% { transform: translate(155.6px, 45.5px) scale(1); }
    54% { opacity: 1; transform: translate(166px, 58px) scale(1); }
    57%, 100% { opacity: 0; transform: translate(170px, 58px) scale(.5); }
}
@keyframes fs-ring { 0%, 54% { opacity: 0; transform: scale(.9); } 55% { opacity: .9; transform: scale(.9); } 66% { opacity: 0; transform: scale(1.3); } 67% { opacity: 0; transform: scale(.9); } 68% { opacity: .9; transform: scale(.9); } 79%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes fs-repeat { 0%, 58% { opacity: 0; transform: scale(.4) rotate(-160deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 67%, 90% { opacity: 1; transform: scale(1) rotate(0deg); } 97%, 100% { opacity: 0; transform: scale(1) rotate(0deg); } }
@keyframes fs-playhead { 0%, 3% { opacity: 0; transform: translateX(14px); } 6% { opacity: 1; transform: translateX(14px); animation-timing-function: linear; } 86%, 90% { opacity: 1; transform: translateX(226px); } 96%, 100% { opacity: 0; transform: translateX(226px); } }
@keyframes fs-seg1 { 0%, 8% { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 12%, 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes fs-seg2 { 0%, 37% { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 41%, 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes fs-seg3 { 0%, 57% { opacity: 0; transform: scale(.85); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); } 61%, 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }

/* ---------- Working modes: the dispatcher's desk, Dyzio and the call between them ---------- */
.modes-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 1040px) { .modes-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.modes-text { display: grid; gap: 16px; }
.modes-text h3 { margin-bottom: 8px; font-size: 1.28rem; }
.modes-text [role="tabpanel"] { display: grid; gap: 12px; }
.modes-text [role="tabpanel"][hidden] { display: none; }
.segment { display: inline-flex; width: fit-content; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--border); }
.segment button { padding: .6em 1.1em; border: 0; border-radius: 9px; background: none; font-weight: 600; font-size: .95rem; color: var(--muted); cursor: pointer; transition: background .22s ease, color .22s ease, box-shadow .22s ease; }
.segment button[aria-selected="true"] { background: var(--surface); color: var(--heading); box-shadow: var(--shadow-sm); }
.rings { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; font-weight: 600; }
.rings strong { min-width: 1.2em; text-align: center; font-size: 1.2rem; color: var(--heading); }
.ms { margin: 0; display: grid; gap: 10px; padding: clamp(12px, 2vw, 22px); border-radius: 26px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ms-scene { position: relative; padding-bottom: 8px; }
.ms-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms-floor { fill: rgba(25, 31, 45, .07); }
[data-theme="dark"] .ms-floor { fill: rgba(0, 0, 0, .3); }
.ms-link-glow { fill: none; stroke: transparent; stroke-width: 14; stroke-linecap: round; transition: stroke .35s ease; }
.ms-link { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; transition: stroke .35s ease; }
.ms[data-route="person"] [data-link="person"] { stroke: var(--c-blue); stroke-dasharray: 9 7; }
.ms[data-route="dyzio"] [data-link="dyzio"], .ms[data-route="handoff"] [data-link="handoff"] { stroke: var(--c-primary); stroke-dasharray: 9 7; }
.ms[data-route="person"] [data-glow="person"] { stroke: rgba(28, 132, 198, .2); }
.ms[data-route="dyzio"] [data-glow="dyzio"], .ms[data-route="handoff"] [data-glow="handoff"] { stroke: rgba(26, 179, 148, .22); }
.ms.is-live[data-route="person"] [data-link="person"], .ms.is-live[data-route="dyzio"] [data-link="dyzio"], .ms.is-live[data-route="handoff"] [data-link="handoff"] { animation: dash-flow .9s linear infinite; }
.ms-caller-disc { fill: var(--surface); stroke: var(--border-strong); stroke-width: 2; }
.ms-ring { fill: none; stroke: var(--c-primary); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ms-ring.is-dyzio { stroke: #ffffff; }
.ms-caller-phone circle { fill: var(--accent-bg); stroke: var(--surface); stroke-width: 3; }
.ms-caller-phone use { color: #ffffff; }
.ms.is-live[data-ringing="true"] .ms-caller-phone > * { animation: phone-shake .8s ease-in-out infinite; }
.ms-night { fill: #0c1426; opacity: 0; transition: opacity .5s ease; }
.ms-moon { opacity: 0; transition: opacity .5s ease; }
.ms-moon path { fill: #f8d77a; }
.ms-monitor { fill: var(--ill-dark); }
.ms-screen { fill: #2f8fd0; transition: fill .4s ease; }
.ms-screen-line { fill: rgba(255, 255, 255, .75); }
.ms-stand, .ms-leg { fill: var(--ill-metal); }
.ms-desk-top { fill: var(--ill-wood); }
.ms-keys { fill: #e6eaf0; }
[data-theme="dark"] .ms-keys { fill: #5a6272; }
.ms-chair { fill: var(--ill-chair); }
.ms-person { transition: opacity .45s ease, transform .6s var(--spring); }
.ms-shirt { fill: #1c84c6; }
.ms-arm { fill: none; stroke: #1c84c6; stroke-width: 8; stroke-linecap: round; }
.ms-skin { fill: #f1c4a2; }
.ms-hair { fill: #383f4f; }
.ms-headset { fill: none; stroke: #263248; stroke-width: 3; stroke-linecap: round; }
.ms-headset.is-mic { stroke-width: 2.4; }
.ms-cup { fill: #263248; }
.ms-speech path { fill: none; stroke: var(--c-blue); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
.ms-mug rect { fill: #f7f9fc; stroke: var(--ill-metal); stroke-width: 1.5; }
.ms-mug-handle { fill: none; stroke: var(--ill-metal); stroke-width: 2; }
.ms-steam { fill: none; stroke: var(--ill-metal); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }
.ms[data-desk="break"] .ms-person, .ms[data-desk="night"] .ms-person, .ms[data-desk="away"] .ms-person { opacity: 0; transform: translateY(16px); }
.ms[data-desk="night"] .ms-night { opacity: .55; }
.ms[data-desk="night"] .ms-moon { opacity: 1; }
.ms[data-desk="night"] .ms-screen, .ms[data-desk="away"] .ms-screen { fill: #3a4256; }
.ms[data-desk="break"] .ms-steam { opacity: .9; }
.ms.is-live[data-desk="break"] .ms-steam { animation: steam 1.8s ease-in-out infinite; }
.ms.is-live[data-desk="break"] .ms-steam + .ms-steam { animation-delay: -.9s; }
.ms[data-desk="busy"] .ms-speech path { opacity: 1; }
.ms.is-live[data-desk="busy"] .ms-speech path { animation: speech 1.2s ease-in-out infinite; }
.ms.is-live[data-desk="busy"] .ms-speech path + path { animation-delay: .25s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes speech { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ms-halo { fill: url(#ms-halo); opacity: .35; transition: opacity .4s ease; }
.ms[data-dyzio="talking"] .ms-halo { opacity: 1; }
.ms-bars rect { fill: #ffffff; transform-box: fill-box; transform-origin: center; }
.ms.is-live[data-dyzio="talking"] .ms-bars rect { animation: orb-talk .85s ease-in-out infinite; }
.ms.is-live[data-dyzio="talking"] .ms-bars rect:nth-child(2) { animation-delay: -.2s; }
.ms.is-live[data-dyzio="talking"] .ms-bars rect:nth-child(3) { animation-delay: -.45s; }
.ms.is-live[data-dyzio="talking"] .ms-bars rect:nth-child(4) { animation-delay: -.65s; }
.ms-token circle { fill: var(--accent-bg); stroke: var(--surface); stroke-width: 3; }
.ms-token use { color: #ffffff; }
.ms[data-route="person"] .ms-token circle { fill: #1a73b0; }
.ms-tag { position: absolute; display: inline-flex; align-items: center; gap: .45em; padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); font-size: .78rem; font-weight: 700; color: var(--heading); white-space: nowrap; transform: translateX(-50%); }
.ms-tag b { font-weight: 700; }
.ms-tag em { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-style: normal; transition: background .3s ease, color .3s ease; }
.ms[data-desk="busy"] .ms-tag em { background: rgba(28, 132, 198, .14); color: var(--info-text); }
.ms[data-desk="break"] .ms-tag em { background: rgba(248, 172, 89, .22); color: var(--warning-text); }
.ms[data-desk="night"] .ms-tag em, .ms[data-desk="away"] .ms-tag em { background: var(--surface-3); color: var(--muted); }
.ms-tag.is-caller { left: 16.7%; top: 70%; }
.ms-tag.is-desk { left: 78.3%; top: -1%; }
.ms-tag.is-dyzio { left: 75.3%; top: 88%; }
.ms-rings { position: absolute; left: 16.7%; top: 21%; display: inline-flex; gap: 6px; transform: translateX(-50%); }
.ms-rings span { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--c-amber); transition: background .2s ease, transform .35s var(--spring); }
.ms-rings span.is-on { background: var(--c-amber); transform: scale(1.18); }
.ms-caption { min-height: 2.8em; text-align: center; font-size: .98rem; font-weight: 600; color: var(--heading); }
@media (max-width: 559px) {
    .ms-tag { padding: 3px 8px; font-size: .7rem; }
    .ms-tag em { padding: 0 6px; }
}

/* ---------- Several calls at once: a queue with timers beside Dyzio's lines ---------- */
.cc { display: grid; gap: 14px; }
@media (min-width: 860px) { .cc { grid-template-columns: 1fr 1fr; } }
.cc-panel { display: grid; align-content: start; gap: 12px; padding: clamp(14px, 2vw, 20px); border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.cc-panel.is-dyzio { background: var(--stage-bg); }
.cc-head { display: flex; align-items: center; gap: .6em; font-weight: 700; color: var(--heading); }
.cc-head-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(28, 132, 198, .14); color: var(--info-text); }
.cc-rows { display: grid; gap: 8px; }
.cc-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 36px 6.6em; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); transition: opacity .4s ease, transform .55s var(--spring), background .3s ease, border-color .3s ease; }
.cc-panel.is-dyzio .cc-row { grid-template-columns: 34px minmax(0, 1fr) 56px 6.6em; background: var(--surface); }
.cc-person { display: block; width: 34px; height: 34px; }
.cc-call { display: grid; gap: 1px; min-width: 0; }
.cc-name { font-size: .9rem; font-weight: 600; color: var(--heading); }
.cc-reply { font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--text); transition: opacity .35s ease; }
.cc-row:not([data-state="talking"]) .cc-reply { opacity: 0; }
.cc-outcome { display: flex; align-items: flex-start; gap: .3em; font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--accent-strong); transition: opacity .35s ease, transform .45s var(--spring); }
.cc-outcome .icon { flex: none; width: .95em; height: .95em; margin-top: .12em; }
.cc-row:not([data-state="done"]) .cc-outcome { opacity: 0; transform: translateY(4px); }
.cc-timer { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.cc-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cc-timer-track { fill: none; stroke: var(--surface-3); stroke-width: 3.5; }
.cc-timer-fill { fill: none; stroke: var(--c-primary); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); transition: stroke-dashoffset .2s linear, stroke .3s ease; }
.cc-row[data-tone="warn"] .cc-timer-fill { stroke: var(--c-amber); }
.cc-row[data-tone="bad"] .cc-timer-fill { stroke: var(--c-red); }
.cc-timer b { position: relative; font-size: .72rem; color: var(--heading); font-variant-numeric: tabular-nums; }
.cc-state { text-align: right; font-size: .78rem; font-weight: 700; color: var(--muted); }
.cc-row[data-state="idle"] { opacity: 0; transform: translateX(-14px) scale(.96); }
.cc-row[data-state="ringing"] { border-color: var(--c-amber); }
.cc.is-live .cc-row[data-state="ringing"] .cc-person { animation: phone-shake .8s ease-in-out infinite; }
.cc-row[data-state="talking"] { background: var(--accent-soft); border-color: rgba(26, 179, 148, .45); }
.cc-row[data-state="talking"] .cc-state { color: var(--accent-strong); }
.cc-row[data-state="talking"] .cc-timer, .cc-row[data-state="ringing"] .cc-timer { visibility: hidden; }
.cc-row[data-state="waiting"] .cc-state { color: var(--warning-text); }
.cc-row[data-state="waiting"][data-tone="bad"] .cc-state { color: var(--danger); }
.cc-row[data-state="gone"] .cc-name { color: var(--muted); text-decoration: line-through; }
.cc-row[data-state="gone"] .cc-state { color: var(--danger); }
.cc-row[data-state="gone"] .cc-person { opacity: .45; filter: grayscale(1); }
.cc-row[data-state="gone"] .cc-timer svg { opacity: .4; }
.cc-row[data-state="gone"] .cc-timer b { color: var(--muted); }
.cc-row .voice { justify-content: flex-start; }
.cc-row[data-state="ringing"] .voice i { transform: scaleY(.07); }
.cc-panel.is-dyzio .cc-row[data-state="done"] { border-color: rgba(26, 179, 148, .4); }
.cc-row[data-state="done"] .voice i, .is-live .cc-row[data-state="done"] .voice i { animation: none; transform: scaleY(.07); }
.lines-claim { margin-top: 18px; text-align: center; font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; color: var(--heading); }
@media (max-width: 420px) {
    .cc-row, .cc-panel.is-dyzio .cc-row { grid-template-columns: 30px minmax(0, 1fr) 34px 5.6em; gap: 8px; padding: 6px 8px; }
    .cc-person { width: 30px; height: 30px; }
    .cc-panel.is-dyzio .cc-row { grid-template-columns: 30px minmax(0, 1fr) 40px 5.6em; }
}

/* ---------- Company settings panel ---------- */
.settings-grid { display: grid; gap: 14px; }
@media (min-width: 960px) { .settings-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; } }
.settings-panel { padding: clamp(16px, 2.2vw, 24px); border-radius: 22px; background: var(--surface-2); border: 1px solid var(--border); }
.settings-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 8px; }
.settings-head h3 { display: flex; align-items: center; gap: .5em; font-size: 1.05rem; }
.settings-head h3 .icon { color: var(--accent); }
.switch-groups { display: grid; gap: 10px; }
@media (min-width: 560px) { .switch-groups { grid-template-columns: 1fr 1fr; gap: 12px 20px; } }
.switch-group-title { margin-bottom: 2px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.switch-list { display: grid; }
.switch { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 9px; cursor: pointer; transition: background .2s ease, box-shadow .25s ease; }
.switch:hover { background: var(--accent-soft); }
.switch.is-current { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(26, 179, 148, .5); }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--border-strong); transition: background .2s ease; }
.switch-track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .25s var(--spring); }
.switch input:checked + .switch-track { background: var(--accent-bg); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-label { font-size: .93rem; font-weight: 500; color: var(--heading); }
.exchange { display: grid; align-content: start; gap: 12px; padding: clamp(16px, 2.2vw, 24px); border-radius: 22px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.exchange-head { display: flex; align-items: center; gap: 10px; }
.exchange-head h3 { font-size: 1.05rem; }
.exchange-lines { display: flex; flex-direction: column; gap: 6px; min-height: 236px; }
.exchange-lines .bub-label.is-caller { align-self: flex-end; }
.exchange-answer { display: grid; }
.exchange-answer > * { grid-area: 1 / 1; justify-self: start; align-self: start; }
.exchange-answer .bub { max-width: 100%; }
.exchange-state { align-self: flex-start; margin-top: 4px; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .8rem; font-weight: 700; transition: opacity .3s ease, transform .5s var(--spring); }
.exchange-state.is-off { background: var(--danger-soft); color: var(--danger); }
.js .exchange-state:not(.is-on) { opacity: 0; transform: translateY(6px); }

/* ---------- The situation in town ---------- */
.city-grid { display: grid; gap: 14px; }
@media (min-width: 960px) { .city-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: stretch; } }
.city-map { margin: 0; display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.city-canvas { position: relative; }
.city-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.city-route { fill: none; stroke: var(--c-primary); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.city-route.is-dashed { stroke: var(--c-amber); stroke-dasharray: 3 2.5; }
.city-route.is-drawing { animation: route-draw .8s var(--glide) both; }
.city-route.is-dashed.is-drawing { animation: none; }
@keyframes route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.cab { transition: opacity .45s ease; }
.cab use { --cab: #9aa5b5; transition: fill .3s ease; }
.cab[data-state="free"] use { --cab: #1ab394; }
.cab[data-state="busy"] use { --cab: #f8ac59; }
.cab[data-state="none"] { opacity: 0; }
.cab-halo { fill: rgba(26, 179, 148, .28); transform-box: fill-box; transform-origin: center; }
.cab.is-dispatch[data-state="busy"] .cab-halo { fill: rgba(248, 172, 89, .32); }
.city-map.is-live .cab-halo { animation: pin-pulse 1.7s ease-out infinite; }
.map-eta { position: absolute; left: 63.75%; top: 21%; display: inline-flex; align-items: center; gap: .35em; padding: 5px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); font-size: .8rem; font-weight: 700; color: var(--heading); white-space: nowrap; transform: translateX(-50%); }
.map-eta .icon { width: 1em; height: 1em; color: var(--accent); }
.map-eta[data-state="2"] .icon, .map-eta[data-state="3"] .icon { color: var(--warning-text); }
.city-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.city-legend span { display: inline-flex; align-items: center; gap: .45em; }
.city-legend i { width: 15px; height: 9px; border-radius: 3px; background: #1ab394; }
.city-legend i.legend-busy { background: #f8ac59; }
.city-legend i.legend-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--c-red); }
.city-side { display: grid; align-content: center; gap: 12px; padding: clamp(16px, 2.2vw, 24px); border-radius: 22px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.city-stops { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -2px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.city-stops li { text-align: center; }
.city-stops li:first-child { text-align: left; }
.city-stops li:last-child { text-align: right; }
.city-says { display: flex; align-items: flex-start; gap: 10px; min-height: 124px; margin-top: 4px; }
.city-says-body { display: grid; flex: 1; gap: 3px; }
.city-says .bub { max-width: 100%; font-size: 1rem; }
.city-inputs { display: grid; gap: 6px; font-size: .9rem; }
.city-inputs ul { display: flex; flex-wrap: wrap; gap: 6px; }
.city-inputs li { display: inline-flex; align-items: center; gap: .35em; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--heading); font-size: .82rem; font-weight: 600; }
.city-inputs .icon { width: .9em; height: .9em; color: var(--accent); }

/* ---------- From the caller's words to one point ---------- */
.addr-grid { display: grid; gap: 14px; }
@media (min-width: 960px) { .addr-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.addr-side { display: grid; gap: 12px; }
.addr-examples-label { font-size: .85rem; font-weight: 700; color: var(--muted); }
.addr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.addr-chips .chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.addr-phrase { margin: 4px 0 0; padding: 16px 18px; border-radius: 16px; border-bottom-left-radius: 5px; background: var(--dyzio-bub); border: 1px solid var(--dyzio-bub-edge); font-size: 1.06rem; font-weight: 600; color: var(--heading); }
.addr-flow { position: relative; display: grid; gap: 10px; padding: clamp(14px, 2vw, 20px); border-radius: 22px; background: var(--stage-bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.addr-rail { position: absolute; left: calc(clamp(14px, 2vw, 20px) + 24px); top: clamp(30px, 3vw, 38px); width: 3px; height: calc(100% - 150px); border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.addr-rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-primary), var(--c-blue)); transform: scaleY(var(--progress, 1)); transform-origin: top; transition: transform .5s var(--glide); }
.addr-stages { position: relative; display: grid; gap: 4px; }
.addr-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 7px 10px; border-radius: 12px; opacity: .5; transition: opacity .25s ease, background .25s ease; }
.addr-stage strong { font-size: .95rem; color: var(--heading); }
.addr-detail { display: block; font-size: .78rem; color: var(--muted); }
.addr-stage.is-active { opacity: 1; background: var(--accent-soft); }
.addr-stage.is-done { opacity: 1; }
.addr-num { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--surface-3); color: var(--heading); transition: background .25s ease, color .25s ease, box-shadow .3s ease; }
.addr-num .icon { width: 16px; height: 16px; }
.addr-stage.is-active .addr-num, .addr-stage.is-done .addr-num { background: var(--accent-bg); color: var(--on-accent); }
.addr-stage.is-active .addr-num { box-shadow: 0 0 0 5px rgba(26, 179, 148, .22); }
.addr-note { min-height: 1.3em; font-size: .88rem; color: var(--text); }
.addr-result { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid rgba(26, 179, 148, .5); box-shadow: var(--shadow-sm); }
.addr-pin { position: relative; display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); }
.addr-pin .icon { position: relative; z-index: 1; width: 22px; height: 22px; }
.addr-pin i { position: absolute; left: 50%; bottom: 8px; width: 20px; height: 7px; margin-left: -10px; border-radius: 50%; background: rgba(237, 85, 101, .35); opacity: 0; }
.addr-flow.is-live .addr-result.is-dropped .addr-pin .icon { animation: pin-drop .7s var(--spring) both; }
.addr-flow.is-live .addr-result.is-dropped .addr-pin i { animation: pin-ripple .9s ease-out .3s both; }
@keyframes pin-drop { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pin-ripple { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.addr-result-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.addr-result strong { color: var(--heading); }
.addr-driver { font-size: .9rem; color: var(--text); }

/* ---------- Connection with the company's systems ---------- */
.system-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .system-grid { grid-template-columns: repeat(3, 1fr); } }
.system-card { position: relative; overflow: hidden; }
.system-card.is-working::after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(rgba(26, 179, 148, .2), transparent 70%); pointer-events: none; }
.system-card h3 { margin: 12px 0 6px; font-size: 1.28rem; }
.system-card p { font-size: .95rem; color: var(--text); }
.status-pill { display: inline-flex; align-items: center; gap: .45em; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.status-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.status-pill.is-ready { background: var(--accent-soft); color: var(--accent-strong); }
.status-pill.is-custom { background: rgba(28, 132, 198, .14); color: var(--info-text); }
.flow-card { margin-top: 18px; display: grid; gap: 22px; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.flow-card h3 { font-size: 1.28rem; }
.links { position: relative; width: 100%; max-width: 860px; margin: 0 auto; }
.links-svg { display: block; width: 100%; height: auto; overflow: visible; }
.links-svg.is-tall { display: none; max-width: 340px; margin-inline: auto; }
@media (max-width: 719px) {
    .links-svg.is-wide { display: none; }
    .links-svg.is-tall { display: block; }
}
.link-glow { fill: none; stroke: rgba(26, 179, 148, .14); stroke-width: 16; stroke-linecap: round; }
.link-line { fill: none; stroke: var(--c-primary); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 9; opacity: .8; }
.link-line.is-down { stroke: var(--c-blue); }
.links.is-live .link-line { animation: dash-flow 1.1s linear infinite; }
.node-card { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.tel-box { fill: var(--surface-3); stroke: var(--border-strong); stroke-width: 1.5; }
.tel-port { fill: var(--border-strong); }
.tel-port.is-on { fill: var(--c-primary); }
.tel-handset circle { fill: var(--accent-bg); }
.tel-handset use { color: #ffffff; }
.node-halo { transform-box: fill-box; transform-origin: center; }
.links.is-live .node-halo { animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.node-ring { fill: none; stroke: rgba(26, 179, 148, .5); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.links.is-live .node-ring { animation: orb-ring 2s ease-out infinite; }
.node-bars rect { fill: #ffffff; transform-box: fill-box; transform-origin: center; }
.links.is-live .node-bars rect { animation: orb-talk .9s ease-in-out infinite; }
.links.is-live .node-bars rect:nth-child(2) { animation-delay: -.2s; }
.links.is-live .node-bars rect:nth-child(3) { animation-delay: -.45s; }
.links.is-live .node-bars rect:nth-child(4) { animation-delay: -.65s; }
.node-label { fill: var(--heading); font-size: 13px; font-weight: 700; }
.node-sub { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.sys-frame { fill: var(--ill-dark); }
.sys-screen { fill: var(--surface); }
.sys-rows rect { fill: var(--surface-3); }
.sys-rows .sys-new { fill: rgba(26, 179, 148, .3); }
.sys-dot { fill: var(--c-primary); }
.sys-dot.is-new { fill: var(--c-amber); }
.links.is-live .sys-dot.is-new { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sys-stand { fill: var(--ill-metal); }
.packet-bg { fill: var(--surface); stroke: var(--c-primary); stroke-width: 1.5; }
.packet.is-down .packet-bg { stroke: var(--c-blue); }
.packet.is-call .packet-bg { fill: var(--accent-bg); stroke: none; }
.packet-text { fill: var(--heading); font-size: 12px; font-weight: 700; }
.packet.is-call .packet-text { fill: var(--on-accent); }
.flow-items { display: grid; gap: 12px; }
@media (min-width: 720px) { .flow-items { grid-template-columns: 1fr 1fr; } }
.flow-item { display: flex; gap: 12px; padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.flow-item strong { color: var(--heading); }
.flow-item p { font-size: .92rem; }
.flow-dir { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.flow-dir.is-in { background: rgba(28, 132, 198, .14); color: var(--info-text); }
.flow-dir.is-in .icon { transform: rotate(180deg); }
.flow-telephony { display: flex; align-items: center; gap: .55em; font-size: .92rem; color: var(--muted); }
.flow-telephony .icon { color: var(--accent); }

/* ---------- What the installation does, step by step ---------- */
.ro { position: relative; }
.ro-steps { position: relative; display: grid; gap: 14px; }
@media (min-width: 640px) and (max-width: 1099px) { .ro-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ro-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ro-rail { display: none; }
@media (min-width: 1100px) {
    .ro-rail { position: absolute; left: 9%; right: 9%; top: 150px; z-index: 0; display: block; height: 3px; border-radius: 2px; background: var(--border-strong); }
    .ro-rail-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), var(--c-blue)); transform: scaleX(var(--progress, 1)); transform-origin: left center; transition: transform .8s var(--glide); }
}
.ro-step { position: relative; z-index: 1; display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: border-color .3s ease, box-shadow .35s ease, opacity .7s ease, transform .7s ease; }
.js .ro-step.reveal { transition: opacity .7s cubic-bezier(.2, .7, .3, 1) calc(var(--d, 0) * 75ms), transform .7s cubic-bezier(.2, .7, .3, 1) calc(var(--d, 0) * 75ms), border-color .3s ease, box-shadow .35s ease; }
.ro .ro-step.is-active { border-color: rgba(26, 179, 148, .6); box-shadow: 0 0 0 3px rgba(26, 179, 148, .16), var(--shadow-md); }
.ro-art { display: grid; height: 112px; place-items: center; overflow: hidden; border-radius: 14px; background: var(--stage-bg); border: 1px solid var(--border); }
.ro-art svg { width: 100%; height: 100%; }
.ro-num { display: grid; justify-self: start; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); color: var(--heading); font-weight: 700; transition: background .3s ease, color .3s ease, transform .5s var(--spring); }
.ro-step.is-active .ro-num, .ro-step.is-done .ro-num { background: var(--accent-bg); color: var(--on-accent); }
.ro-step.is-active .ro-num { transform: scale(1.12); }
.ro-step h3 { font-size: 1.02rem; }
.ro-step p { font-size: .9rem; }
.ro-note { max-width: 70ch; margin-inline: auto; }
.ro-art :is(.ro-bub, .ro-row-good, .ro-row-bad, .ro-pin, .ro-plug, .ro-spark, .ro-badge, .ro-wave rect) { transform-box: fill-box; transform-origin: center; transition: opacity .35s ease, transform .5s var(--spring); }
.ro-table { fill: var(--map-block); }
.ro-bub rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.ro-bub circle { fill: var(--muted); }
.ro-bub-b rect { fill: var(--accent-bg); stroke: none; }
.ro-bub-b path { stroke: var(--on-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ro-sheet { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.ro-row-avatar { fill: var(--map-roof); }
.ro-row-text { fill: var(--surface-3); }
.ro-row-bad { fill: var(--c-amber); }
.ro-row-good circle { fill: var(--accent-bg); }
.ro-row-good path { stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ro-land { fill: var(--map-land); }
.ro-water { fill: var(--map-water); }
.ro-street { fill: none; stroke: var(--map-street); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--glide); }
.ro-pin path { fill: var(--c-red); }
.ro-pin circle { fill: #ffffff; }
.ro-pin.is-rank rect { fill: #1a73b0; }
.ro-pin.is-rank text { fill: #ffffff; font-size: 12px; font-weight: 700; }
.ro-zone { fill: rgba(123, 112, 239, .18); stroke: var(--c-purple); stroke-width: 1.5; stroke-dasharray: 3 3; }
.ro-box { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.ro-box-icon { color: var(--accent); }
.ro-cable { stroke: var(--ill-metal); stroke-width: 4; stroke-linecap: round; }
.ro-plug rect { fill: var(--ill-dark); }
.ro-plug path { stroke: var(--ill-metal); stroke-width: 2.5; stroke-linecap: round; }
.ro-socket { fill: var(--ill-dark); }
.ro-spark path { fill: none; stroke: var(--c-amber); stroke-width: 2.5; stroke-linecap: round; }
.ro-dyzio { fill: #14a385; }
.ro-dyzio-bars rect { fill: #ffffff; }
.ro-phone { fill: var(--ill-dark); }
.ro-phone-screen { fill: var(--surface); }
.ro-wave rect { fill: var(--c-primary); }
.ro-badge circle { fill: var(--accent-bg); stroke: var(--surface); stroke-width: 3; }
.ro-badge path { stroke: var(--on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ro-spark { opacity: 0; }
.ro-step:not(.is-active):not(.is-done) :is(.ro-bub, .ro-row-good, .ro-pin, .ro-badge) { opacity: 0; transform: scale(.4); }
.ro-step:not(.is-active):not(.is-done) .ro-street { stroke-dashoffset: 100; }
.ro-step:not(.is-active):not(.is-done) .ro-plug { transform: translateX(-12px); }
.ro-step:not(.is-active):not(.is-done) .ro-wave rect { transform: scaleY(.25); }
.ro-step.is-done .ro-row-bad { opacity: 0; transform: scale(.4); }
.ro.is-live .ro-step.is-active .ro-bub-a { animation: ro-pop .5s var(--spring) .2s both; }
.ro.is-live .ro-step.is-active .ro-bub-b { animation: ro-pop .5s var(--spring) 1s both; }
.ro.is-live .ro-step.is-active .ro-row-good { animation: ro-pop .45s var(--spring) both; animation-delay: calc(.3s + var(--r) * .32s); }
.ro.is-live .ro-step.is-active .ro-row-bad { animation: ro-out .3s ease both; animation-delay: calc(.3s + var(--r) * .32s); }
.ro.is-live .ro-step.is-active .ro-street { animation: route-draw .8s var(--glide) both; }
.ro.is-live .ro-step.is-active .ro-street:nth-of-type(2) { animation-delay: .25s; }
.ro.is-live .ro-step.is-active .ro-street:nth-of-type(3) { animation-delay: .5s; }
.ro.is-live .ro-step.is-active .ro-pin { animation: ro-drop .55s var(--spring) both; animation-delay: calc(.8s + var(--p) * .3s); }
.ro.is-live .ro-step.is-active .ro-plug { animation: ro-plug .9s var(--glide) .3s both; }
.ro.is-live .ro-step.is-active .ro-spark { animation: ro-spark .7s ease 1.1s both; }
.ro.is-live .ro-step.is-active .ro-wave rect { animation: orb-talk .8s ease-in-out infinite; animation-delay: calc(var(--b) * -110ms); }
.ro.is-live .ro-step.is-active .ro-badge { animation: ro-pop .5s var(--spring) 1.2s both; }
@keyframes ro-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ro-out { to { opacity: 0; transform: scale(.4); } }
@keyframes ro-drop { from { opacity: 0; transform: translateY(-14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ro-plug { from { transform: translateX(-12px); } to { transform: none; } }
@keyframes ro-spark { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.3); } }
.calc-label { color: var(--muted); font-weight: 600; }
.calc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: none; margin: 8px 0 6px; cursor: pointer; }
.calc-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c-primary) var(--p, 50%), var(--surface-3) var(--p, 50%)); }
.calc-slider::-moz-range-track { height: 8px; border-radius: 4px; background: var(--surface-3); }
.calc-slider::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--c-primary); }
.calc-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c-primary); box-shadow: var(--shadow-md); transition: transform .15s ease; }
.calc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 3px solid var(--c-primary); }
.calc-slider:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.calc-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.table-wrap { overflow-x: auto; }

/* ---------- What the monthly package is made of ---------- */
.bill { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .bill { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); } }

/* ---------- Calls forwarded to drivers ---------- */
.drv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 900px) { .drv-grid { grid-template-columns: 1fr 1fr; } }
.drv-card { display: grid; align-content: start; gap: 12px; min-width: 0; }
.drv-card h3 { margin: 0; font-size: 1.15rem; }
.drv-wide { grid-column: 1 / -1; }
.drv-facts { display: grid; gap: 8px; }
.drv-facts li { display: flex; align-items: flex-start; gap: .55em; font-size: .95rem; color: var(--text); }
.drv-facts .icon { width: 1em; height: 1em; margin-top: .25em; color: var(--accent); }
.drv-note { font-size: .78rem; color: var(--muted); }
.drv-text { font-size: .95rem; color: var(--text); }
.cockpit { position: relative; height: 250px; overflow: hidden; border-radius: 18px; background: #1b2232; isolation: isolate; }
.cockpit-view { position: absolute; inset: 0; background: linear-gradient(180deg, #8cc4ec 0%, #d5ebf7 52%, #d5ebf7 100%); }
[data-theme="dark"] .cockpit-view { background: linear-gradient(180deg, #0d1a2d 0%, #24364f 52%, #24364f 100%); }
.cockpit-sun { position: absolute; right: 16%; top: 10%; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #fff7d1, #ffd36a); box-shadow: 0 0 28px 8px rgba(255, 211, 106, .45); }
[data-theme="dark"] .cockpit-sun { background: radial-gradient(circle, #ffffff, #d9e3f2); box-shadow: 0 0 22px 6px rgba(217, 227, 242, .25); }
.cockpit-city { position: absolute; left: 0; top: 30%; width: 100%; height: 22%; fill: #a7bccf; }
[data-theme="dark"] .cockpit-city { fill: #2b3c55; }
.cockpit-road { position: absolute; inset: 50% -24px 0; overflow: hidden; background: linear-gradient(180deg, #9cc48c, #76a868); perspective: 240px; perspective-origin: 50% 0; }
[data-theme="dark"] .cockpit-road { background: linear-gradient(180deg, #284032, #1b2c22); }
.cockpit-plane { position: absolute; left: 50%; bottom: -30px; width: 74%; height: 560px; margin-left: -37%; overflow: hidden; background: #4c5462; box-shadow: inset 7px 0 0 #e9edf2, inset -7px 0 0 #e9edf2; transform: rotateX(78deg); transform-origin: 50% 100%; }
.cockpit-lines { position: absolute; left: 50%; top: -90px; width: 10px; height: calc(100% + 180px); margin-left: -5px; background: repeating-linear-gradient(180deg, #f5f7fa 0 44px, transparent 44px 90px); }
.drv-road.is-live .cockpit-lines { animation: lanes .42s linear infinite; }
@keyframes lanes { from { transform: translateY(0); } to { transform: translateY(90px); } }
.drv-road.is-live[data-state="talking"] .cockpit-road { animation: road-drift 2.6s ease-in-out infinite; }
@keyframes road-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-16px); } }
.cockpit-dash { position: absolute; left: -5%; right: -5%; bottom: -12px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; height: 92px; padding: 8px 12% 0; border-radius: 50% 50% 0 0 / 70% 70% 0 0; background: linear-gradient(180deg, #2c3343, #151922); box-shadow: 0 -8px 20px rgba(0, 0, 0, .35); }
.gauge { display: grid; grid-template-columns: 92px; justify-items: center; width: 92px; color: #c9d2de; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.gauge-zone { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge-zone.is-low { stroke: #ed5565; }
.gauge-zone.is-mid { stroke: #f8ac59; }
.gauge-zone.is-high { stroke: #1ab394; }
.gauge-needle { transform: rotate(56deg); transform-origin: 60px 62px; transition: transform 1s var(--spring); }
.gauge-needle path { stroke: #ffffff; stroke-width: 3.5; stroke-linecap: round; }
.gauge-needle circle { fill: #ffffff; }
.drv-road[data-state="ringing"] .gauge-needle { transform: rotate(-4deg); }
.drv-road[data-state="talking"] .gauge-needle { transform: rotate(-58deg); }
.gauge-label { width: max-content; margin-top: -4px; white-space: nowrap; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c9d2de; }
.dash-phone { position: relative; display: grid; place-items: center; margin-top: -2px; }
.dash-phone-body { position: relative; display: grid; justify-items: center; gap: 3px; width: 96px; padding: 8px 6px 7px; border-radius: 12px; background: #0e1118; border: 2px solid #3a4152; color: #9aa5b5; font-size: .64rem; font-weight: 700; line-height: 1.25; text-align: center; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.dash-phone-body .icon { width: 15px; height: 15px; }
.dash-phone-body .voice { width: 46px; }
.drv-road[data-state="clear"] .dash-phone-text, .drv-road[data-state="clear"] .dash-phone-body .voice, .drv-road[data-state="ringing"] .dash-phone-body .voice { visibility: hidden; }
.drv-road[data-state="ringing"] .dash-phone-body { background: #11271f; border-color: #1ab394; color: #a8f0dc; }
.drv-road[data-state="talking"] .dash-phone-body { background: #2a1418; border-color: #ed5565; color: #ffc7ce; }
.dash-rings i { position: absolute; inset: -7px; border-radius: 17px; border: 2px solid #1ab394; opacity: 0; }
.drv-road.is-live[data-state="ringing"] .dash-rings i { animation: orb-ring 1.1s ease-out infinite; }
.drv-road.is-live[data-state="ringing"] .dash-rings i + i { animation-delay: .55s; }
.drv-road.is-live[data-state="ringing"] .dash-phone-body .icon { animation: phone-shake .9s ease-in-out infinite; }
.ride { display: grid; gap: 8px; }
.ride-art { display: block; width: 100%; max-height: 92px; }
.ride-seat { fill: var(--surface-3); }
.ride-phone rect { fill: #263248; }
.ride-waves path { fill: none; stroke: var(--c-amber); stroke-width: 2.5; stroke-linecap: round; opacity: 0; transition: opacity .3s ease; }
.drv-passenger.is-talking .ride-waves path { opacity: 1; }
.drv-passenger.is-live.is-talking .ride-waves path { animation: speech 1s ease-in-out infinite; }
.ride .bub { max-width: 92%; }
.ride .bub.is-caller { justify-self: end; }
.ride-thought { justify-self: center; padding: 8px 16px; border-radius: 999px; background: var(--danger-soft); color: var(--heading); font-weight: 700; text-align: center; transition: opacity .35s ease, transform .55s var(--spring); }
.js .ride-thought:not(.is-on) { opacity: 0; transform: scale(.85); }
.who { display: grid; gap: 14px; }
@media (min-width: 900px) { .who { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.who-row { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--border); }
.who-row.is-dyzio { background: var(--stage-bg); border-color: rgba(26, 179, 148, .45); }
.who-row-title { display: flex; align-items: center; gap: .5em; font-size: .92rem; font-weight: 700; color: var(--heading); }
.who-row-title .icon { color: var(--warning-text); }
.who-flow { display: grid; grid-template-columns: 58px 48px minmax(0, 1fr); align-items: center; min-height: 168px; }
.who-caller { position: relative; width: 56px; height: 56px; }
.who-avatar { display: block; width: 56px; height: 56px; }
.who-phone { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); color: #ffffff; background: #1a73b0; }
.who-phone .icon { width: 13px; height: 13px; }
.who-phone.is-off { background: #d8394f; }
.who-phone.is-on { background: var(--accent-bg); }
.drv-card.is-live .who-phone.is-ringing { animation: phone-shake .9s ease-in-out infinite; }
.who-links { display: block; width: 100%; height: 100%; min-height: 150px; overflow: visible; }
.who-link { fill: none; stroke: var(--border-strong); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; transition: stroke .3s ease, opacity .3s ease; }
.who-link.is-active { stroke: var(--c-blue); stroke-dasharray: 7 6; }
.who-link.is-bad { stroke: var(--danger); stroke-dasharray: 2 7; opacity: .7; }
.who-link.is-good { stroke: var(--c-primary); stroke-dasharray: 8 6; }
.drv-card.is-live .who-link.is-active, .drv-card.is-live .who-link.is-good { animation: dash-flow .8s linear infinite; }
.who-drivers { display: grid; gap: 8px; }
.who-driver { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color .3s ease, background .3s ease; }
.who-cab { display: block; width: 46px; height: 25px; }
.who-text { display: grid; min-width: 0; line-height: 1.25; }
.who-text strong { font-size: .86rem; color: var(--heading); }
.who-outcome { display: inline-flex; align-items: center; gap: .35em; font-size: .78rem; font-weight: 700; color: var(--danger); transition: opacity .3s ease; }
.who-outcome .icon { flex: none; width: .95em; height: .95em; }
.who-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--danger-soft); color: var(--danger); transition: opacity .3s ease, transform .5s var(--spring); }
.who-mark .icon { width: 12px; height: 12px; }
.who-driver:not([data-state="declined"]) .who-outcome { opacity: 0; }
.who-driver:not([data-state="declined"]) .who-mark { opacity: 0; transform: scale(.3); }
.who-driver[data-state="ringing"] { border-color: var(--c-blue); background: rgba(28, 132, 198, .08); }
.drv-card.is-live .who-driver[data-state="ringing"] .who-cab { animation: phone-shake .8s ease-in-out infinite; }
.who-gave-up { display: flex; align-items: center; gap: .5em; font-weight: 700; color: var(--danger); transition: opacity .35s ease, transform .5s var(--spring); }
.js .who-gave-up:not(.is-on) { opacity: 0; transform: translateY(6px); }
.who-answer { display: flex; align-items: center; gap: 12px; }
.who-chips { display: grid; gap: 6px; }
.who-chips li { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .45em; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid rgba(26, 179, 148, .4); font-size: .86rem; font-weight: 600; color: var(--heading); transition: opacity .3s ease, transform .5s var(--spring); }
.who-chips .icon { width: 1em; height: 1em; color: var(--accent); }
.who-chips em { font-size: .76rem; font-style: normal; font-weight: 700; color: var(--accent-strong); }
.js .who-chips li:not(.is-on) { opacity: 0; transform: translateX(10px) scale(.95); }
@media (max-width: 559px) {
    .who-flow { grid-template-columns: 46px 24px minmax(0, 1fr); }
    .who-caller, .who-avatar { width: 44px; height: 44px; }
    .who-driver { grid-template-columns: 38px minmax(0, 1fr); padding: 6px 8px; }
    .who-cab { width: 38px; height: 21px; }
    .who-mark { display: none; }
    .who-answer { gap: 8px; }
    .who-answer .orb-md { width: 44px; height: 44px; border-radius: 14px; }
    .who-chips em { flex-basis: 100%; padding-left: 1.45em; }
}
.sound-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 720px) { .sound-grid { grid-template-columns: 1fr 1fr; } }
.sound-lane { display: grid; align-content: start; gap: 10px; min-width: 0; padding: clamp(14px, 2vw, 18px); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.sound-lane.is-dyzio { background: var(--stage-bg); border-color: rgba(26, 179, 148, .45); }
.card .sound-lane h4 { display: flex; align-items: center; gap: .5em; margin: 0; font-size: 1rem; }
.sound-lane h4 .icon { color: var(--warning-text); }
.sound-lane .voice { justify-content: flex-start; }
.sound-lines { display: flex; flex-direction: column; gap: 8px; }
.sound-checks { display: grid; gap: 5px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.sound-checks li { display: flex; align-items: center; gap: .5em; font-size: .9rem; font-weight: 600; color: var(--heading); transition: opacity .3s ease, transform .5s var(--spring); }
.js .sound-checks li:not(.is-on) { opacity: 0; transform: translateX(-8px); }
.sound-checks .icon { flex: none; width: 1em; height: 1em; }
.sound-checks .is-yes .icon { color: var(--accent); }
.sound-checks .is-no .icon { color: var(--danger); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp-table th, .cmp-table td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.cmp-table thead th { font-size: .82rem; font-weight: 700; color: var(--muted); }
.cmp-table tbody th { font-weight: 600; color: var(--heading); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table .is-dyzio { background: var(--accent-soft); color: var(--heading); font-weight: 600; }
.cmp-table thead .is-dyzio { color: var(--heading); }
.cmp-cell { display: flex; align-items: flex-start; gap: .45em; }
.cmp-cell .icon { flex: none; width: 1em; height: 1em; margin-top: .25em; }
.cmp-cell.is-good .icon { color: var(--accent); }
.cmp-cell.is-bad .icon { color: var(--danger); }
@media (max-width: 640px) {
    .stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display: block; }
    .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .stack-table tbody tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .stack-table tbody tr:last-child { padding-bottom: 0; border-bottom: 0; }
    .stack-table tbody th { padding: 0 0 6px; border: 0; text-align: left; white-space: normal; }
    .stack-table td, .price-table.stack-table td:nth-child(2) { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 10px; padding: 4px 8px; border: 0; border-radius: 6px; text-align: left; white-space: normal; }
    .stack-table td::before { content: attr(data-label); font-size: .8rem; font-weight: 600; color: var(--muted); }
}
.drv-sources { display: grid; gap: 4px; margin-top: 18px; font-size: .85rem; color: var(--muted); }
.drv-sources p { font-weight: 700; }
.drv-sources ul { display: grid; gap: 4px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); interpolate-size: allow-keywords; }
.faq-item::details-content { height: 0; overflow: clip; transition: height .32s ease, content-visibility .32s allow-discrete; }
.faq-item[open]::details-content { height: auto; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.4; }
.faq-item summary .icon { color: var(--accent); transition: transform .28s ease; transform: rotate(90deg); }
.faq-item[open] summary .icon { transform: rotate(-90deg); }
.faq-answer { padding: 0 20px 18px; color: var(--text); }

/* ---------- Forms ---------- */
.contact-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; } }
.contact-copy { display: grid; gap: 14px; }
.contact-mail { margin-top: 6px; color: var(--muted); }
.form-card { display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.form-grid { display: grid; gap: 14px; }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font-weight: 600; font-size: .9rem; color: var(--heading); padding: 0; }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea { width: 100%; padding: .68em .85em; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--heading); font: inherit; font-size: 1rem; transition: border-color .18s ease, box-shadow .18s ease; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.hint { font-size: .85rem; color: var(--muted); }
.check { display: flex; gap: .65em; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: .18em; flex: none; accent-color: var(--accent-bg); }
.form-submit { justify-self: start; }
.form-status { min-height: 1.5em; font-weight: 600; color: var(--muted); }
.form-status.is-success { color: var(--accent); }
.form-status.is-error { color: var(--danger); }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Final call to action and page heroes ---------- */
.final-cta { padding: clamp(20px, 3vw, 36px) 0 clamp(56px, 7vw, 96px); }
.final-cta-inner { position: relative; overflow: hidden; display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(40px, 6vw, 72px) 24px; border-radius: 22px; background: linear-gradient(120deg, #0d6554, #125a86); color: #eaf6f3; }
.final-cta-inner::before, .final-cta-inner::after { content: ""; position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.final-cta-inner::before { width: 340px; height: 340px; left: -80px; top: -140px; background: rgba(35, 198, 200, .35); }
.final-cta-inner::after { width: 320px; height: 320px; right: -60px; bottom: -160px; background: rgba(123, 112, 239, .32); }
.final-cta-inner > * { position: relative; z-index: 1; }
.final-cta h2 { color: #ffffff; }
.final-cta .lead { color: #d3ece6; max-width: 60ch; }
.final-cta-inner > .final-wave { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; display: flex; align-items: flex-end; gap: 5px; height: 130px; padding: 0 22px; opacity: .2; pointer-events: none; }
.final-wave i { flex: 1 1 0; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0)); transform: scaleY(var(--h)); transform-origin: bottom; }
.final-cta-inner.is-playing .final-wave i { animation: final-wave 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -90ms); }
@keyframes final-wave { 0%, 100% { transform: scaleY(calc(var(--h) * .45)); } 50% { transform: scaleY(var(--h)); } }
.final-cta-inner .orb-lg { margin-bottom: 4px; box-shadow: 0 0 0 7px rgba(255, 255, 255, .14), 0 20px 40px -18px rgba(0, 0, 0, .55); }
.page-hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 clamp(20px, 3vw, 36px); text-align: center; }
.page-hero .container { display: grid; gap: 12px; justify-items: center; }
.not-found { text-align: center; }
.not-found .container { display: grid; gap: 16px; justify-items: center; }

/* ---------- Legal ---------- */
.legal { display: grid; gap: 14px; }
.legal h2 { font-size: 1.32rem; margin-top: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: clamp(36px, 5vw, 56px) 0 22px; font-size: .94rem; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; display: grid; gap: 8px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } .footer-brand { grid-column: auto; } }
@media (min-width: 1180px) { .footer-grid { grid-template-columns: 1.6fr repeat(5, 1fr); } }
.footer-title { font-size: .95rem; margin-bottom: 10px; letter-spacing: 0; }
.site-footer ul { display: grid; gap: 2px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer li a { display: inline-block; padding-block: 4px; }
@media (max-width: 899px) { .site-footer ul { gap: 0; } .site-footer li a { padding-block: 12px; } }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .82rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
}
[data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state: paused !important; }
.js[data-motion="paused"] .reveal { opacity: 1; transform: none; transition: none; }
.js[data-motion="paused"] .hero .reveal { animation: none; }