/*
 * «Webivan» service hero scenes (templates/webivan/scenes/*.twig): a small
 * live interface per service in place of the cover photo — glass panels,
 * real Russian UI text, cobalt glow, lime for the result.
 *
 * Rules:
 *  - every scene is a 5:4 box sized by its width (container query units),
 *    so the same markup works at 560 px on a desktop and 340 px on a phone;
 *  - one loop per scene (--T); every part runs on the same duration and the
 *    keyframe percentages sequence the story, so nothing drifts;
 *  - only transform / opacity / clip-path / stroke-dashoffset move;
 *  - the default (non-animated) style of every element is its final state:
 *    under reduced motion or the «Анимации» switch off the scene is a still,
 *    complete picture; off screen it pauses (js/scenes.js adds .is-on).
 */
.sc {
    --T: 10s;
    --sc-glass: rgba(20, 22, 48, 0.78);
    --sc-glass-2: rgba(30, 33, 70, 0.9);
    --sc-edge: rgba(255, 255, 255, 0.1);
    --sc-edge-2: rgba(255, 255, 255, 0.18);
    --sc-text: #F4F5FA;
    --sc-mute: #A4A7C0;
    --sc-faint: #6E7290;
    --sc-cobalt: #5A62D6;
    --sc-cobalt-2: #8088FF;
    --sc-lime: #C8F23A;
    --sc-ok: #3DDC84;
    --sc-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --sc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 5 / 4;
    width: 100%;
    font-family: var(--webivan-font-text, 'Onest', system-ui, sans-serif);
    color: var(--sc-text);
    font-size: 2.5cqw;
    line-height: 1.3;
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
}
/* The stage: a soft cobalt light behind, a faint grid that fades out. */
.sc::before {
    content: "";
    position: absolute;
    inset: -8% -6%;
    z-index: -2;
    background:
        radial-gradient(48% 46% at 58% 46%, color-mix(in srgb, var(--sc-cobalt) 34%, transparent), transparent 70%),
        radial-gradient(30% 28% at 78% 78%, color-mix(in srgb, var(--sc-lime) 9%, transparent), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}
.sc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 6.25cqw 6.25cqw;
    -webkit-mask-image: radial-gradient(70% 70% at 55% 48%, #000 30%, transparent 75%);
            mask-image: radial-gradient(70% 70% at 55% 48%, #000 30%, transparent 75%);
    border-radius: 3cqw;
    pointer-events: none;
}
.sc * { box-sizing: border-box; }
.sc svg { display: block; overflow: visible; }

/* Off screen, under reduced motion and with animations switched off: still. */
.sc:not(.is-on) *, .sc:not(.is-on) *::before, .sc:not(.is-on) *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .sc *, .sc *::before, .sc *::after { animation: none !important; }
}
html.wi-still .sc *, html.wi-still .sc *::before, html.wi-still .sc *::after { animation: none !important; }

/* --- Shared parts ---------------------------------------------------------- */
.sc-abs { position: absolute; }
.sc-card {
    position: absolute;
    border: 1px solid var(--sc-edge);
    border-radius: 2.4cqw;
    background: linear-gradient(180deg, var(--sc-glass-2), var(--sc-glass));
    box-shadow: 0 2.4cqw 6cqw rgba(4, 5, 16, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    overflow: hidden;
}
.sc-bar { display: flex; align-items: center; gap: 1.2cqw; height: 5.4cqw; padding: 0 2cqw; border-bottom: 1px solid var(--sc-edge); background: rgba(255, 255, 255, 0.03); }
.sc-dots { display: flex; gap: 0.8cqw; }
.sc-dots i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sc-url { flex: 1; height: 3cqw; padding: 0 1.6cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.06); color: var(--sc-mute); font-size: 1.9cqw; line-height: 3cqw; white-space: nowrap; overflow: hidden; }
.sc-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 1.2cqw;
    padding: 1.3cqw 2.2cqw 1.3cqw 1.4cqw;
    border: 1px solid var(--sc-edge-2);
    border-radius: 4cqw;
    background: rgba(24, 27, 58, 0.86);
    box-shadow: 0 1.6cqw 4cqw rgba(4, 5, 16, 0.5);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    font-size: 2.2cqw;
    font-weight: 500;
    white-space: nowrap;
}
.sc-ico { display: grid; place-items: center; flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; background: rgba(128, 136, 255, 0.18); color: var(--sc-cobalt-2); }
.sc-ico svg { width: 2.4cqw; height: 2.4cqw; }
.sc-ico--lime { background: var(--sc-lime); color: #0A0B18; }
.sc-ico--ok { background: color-mix(in srgb, var(--sc-ok) 22%, transparent); color: var(--sc-ok); }
.sc-btn { display: inline-grid; place-items: center; padding: 0 2.2cqw; height: 4.6cqw; border-radius: 3cqw; background: var(--sc-lime); color: #0A0B18; font-size: 1.9cqw; font-weight: 600; white-space: nowrap; }
.sc-line { display: block; height: 1.3cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.14); }
.sc-line--strong { background: rgba(255, 255, 255, 0.78); height: 2cqw; }
.sc-line--mute { background: rgba(255, 255, 255, 0.08); }
.sc-muted { color: var(--sc-mute); }
.sc-small { font-size: 1.85cqw; }
.sc-strong { font-weight: 600; }
.sc-num { font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-lime { color: var(--sc-lime); }
/* The pointer: an arrow that travels on its own keyframes per scene. */
.sc-cursor { position: absolute; z-index: 20; width: 4.2cqw; height: 4.2cqw; filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.5)); pointer-events: none; }
.sc-cursor::after { content: ""; position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; border: 2px solid var(--sc-lime); opacity: 0; }
/* A notification that slides in. */
.sc-toast { display: flex; align-items: center; gap: 1.6cqw; padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw; }
.sc-toast b { display: block; font-size: 2.2cqw; font-weight: 600; }
.sc-toast span { display: block; font-size: 1.8cqw; color: var(--sc-mute); }

/* Shared keyframes */
@keyframes sc-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2cqw; } }
@keyframes sc-pulse { 0% { scale: 0.6; opacity: 0.7; } 100% { scale: 2.2; opacity: 0; } }
@keyframes sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes sc-spin { to { rotate: 360deg; } }
@keyframes sc-clock { to { opacity: 1; } }
.sc-float { animation: sc-float 6s ease-in-out infinite; }
.sc-float--late { animation-delay: -3s; }
.sc-live { position: relative; display: inline-block; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--sc-ok); }
.sc-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sc-ok); animation: sc-pulse 1.8s ease-out infinite; }

/* ===========================================================================
   1. Создание сайтов — the site assembles from a wireframe, the pointer
   presses «Оставить заявку», a request arrives; the phone shows the same
   layout; the speed score fills.
   =========================================================================== */
.sc--site { --T: 11s; }
.sc--site .sc-win { left: 2%; top: 7%; width: 76%; height: 72%; }
.sc--site .sc-page { position: absolute; inset: 5.4cqw 0 0 0; padding: 2.4cqw 2.6cqw; }
.sc--site .sc-nav { display: flex; align-items: center; gap: 1.6cqw; height: 4cqw; }
.sc--site .sc-logo { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, var(--sc-cobalt-2), var(--sc-cobalt)); }
.sc--site .sc-nav .sc-line { width: 7cqw; height: 1.1cqw; }
.sc--site .sc-nav .sc-line:first-of-type { margin-left: auto; }
.sc--site .sc-nav-btn { width: 9cqw; height: 3.2cqw; border-radius: 2cqw; background: rgba(200, 242, 58, 0.9); }
.sc--site .sc-heroblock { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.4cqw; margin-top: 3.4cqw; }
.sc--site .sc-copy { display: grid; gap: 1.4cqw; align-content: start; }
.sc--site .sc-h { font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-size: 3.1cqw; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.sc--site .sc-h em { font-style: normal; color: var(--sc-cobalt-2); }
.sc--site .sc-copy .sc-line { width: 92%; }
.sc--site .sc-copy .sc-line + .sc-line { width: 70%; }
.sc--site .sc-copy .sc-btn { justify-self: start; margin-top: 0.8cqw; }
.sc--site .sc-pic { height: 17cqw; border-radius: 1.8cqw; background:
    radial-gradient(60% 70% at 70% 30%, rgba(200, 242, 58, 0.55), transparent 60%),
    linear-gradient(135deg, #3a43b8, #8088ff); position: relative; overflow: hidden; }
.sc--site .sc-pic::after { content: ""; position: absolute; left: 12%; bottom: -30%; width: 70%; height: 80%; border-radius: 50%; background: rgba(10, 11, 24, 0.35); }
.sc--site .sc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 3cqw; }
.sc--site .sc-cards > i { height: 9cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sc-edge); }
/* Each block: a dashed wireframe first, then the filled block. */
.sc--site .sc-b { position: relative; border-radius: 1.4cqw; animation: sc-site-build var(--T) var(--sc-ease) infinite both; }
.sc--site .sc-b.sc-b { animation-delay: calc(var(--s, 0) * 0.22s); }
.sc--site .sc-b::before { content: ""; position: absolute; inset: -0.6cqw; border: 1.5px dashed rgba(128, 136, 255, 0.7); border-radius: inherit; opacity: 0; animation: sc-site-wire var(--T) linear infinite both; animation-delay: inherit; }
@keyframes sc-site-build {
    0%, 4% { opacity: 0; translate: 0 1.4cqw; filter: saturate(0) brightness(0.5); }
    10% { opacity: 1; translate: 0 0; filter: saturate(0) brightness(0.5); }
    18%, 90% { opacity: 1; translate: 0 0; filter: none; }
    96%, 100% { opacity: 0; translate: 0 0; filter: none; }
}
@keyframes sc-site-wire { 0%, 6% { opacity: 0; } 10%, 15% { opacity: 1; } 20%, 100% { opacity: 0; } }
/* The phone: the same page, narrower. */
.sc--site .sc-phone { right: 2%; bottom: 6%; width: 25%; height: 52%; border-radius: 3.6cqw; padding: 1.2cqw; animation: sc-site-phone var(--T) var(--sc-ease) infinite both; }
.sc--site .sc-phone .sc-screen { position: absolute; inset: 1.2cqw; border-radius: 2.6cqw; background: #0E1028; overflow: hidden; padding: 3.4cqw 1.6cqw 1.6cqw; display: grid; gap: 1.1cqw; align-content: start; }
.sc--site .sc-phone .sc-screen::before { content: ""; position: absolute; top: 1cqw; left: 50%; translate: -50% 0; width: 7cqw; height: 1.4cqw; border-radius: 1cqw; background: #000; }
.sc--site .sc-phone .sc-h { font-size: 2.05cqw; }
.sc--site .sc-phone .sc-pic { height: 9cqw; border-radius: 1.2cqw; }
.sc--site .sc-phone .sc-btn { height: 3.4cqw; font-size: 1.5cqw; padding: 0 1.4cqw; justify-self: start; }
.sc--site .sc-phone .sc-line { height: 1cqw; }
@keyframes sc-site-phone { 0%, 30% { opacity: 0; translate: 0 6cqw; } 38%, 90% { opacity: 1; translate: 0 0; } 96%, 100% { opacity: 0; translate: 0 0; } }
/* Speed score: a ring that fills to 98. */
.sc--site .sc-score { left: 60%; top: 0; animation: sc-site-pop var(--T) var(--sc-spring) infinite both; --at: 28%; }
.sc--site .sc-ring { width: 4.6cqw; height: 4.6cqw; rotate: -90deg; }
.sc--site .sc-ring circle { fill: none; stroke-width: 4; }
.sc--site .sc-ring .bg { stroke: rgba(255, 255, 255, 0.12); }
.sc--site .sc-ring .fg { stroke: var(--sc-ok); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; animation: sc-site-ring var(--T) var(--sc-ease) infinite both; }
@keyframes sc-site-ring { 0%, 30% { stroke-dashoffset: 100; } 44%, 100% { stroke-dashoffset: 2; } }
@keyframes sc-site-pop { 0%, 26% { opacity: 0; scale: 0.85; } 32%, 90% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: 1; } }
/* The pointer goes to the button and presses it; the request arrives. */
.sc--site .sc-cursor { left: 15.5%; top: 46.5%; animation: sc-site-cursor var(--T) var(--sc-ease) infinite both; }
.sc--site .sc-cursor::after { animation: sc-site-click var(--T) ease-out infinite both; }
@keyframes sc-site-cursor {
    0%, 40% { opacity: 0; translate: 26cqw 16cqw; }
    44% { opacity: 1; translate: 26cqw 16cqw; }
    54% { opacity: 1; translate: 0 0; scale: 1; }
    56% { scale: 0.86; }
    58% { scale: 1; }
    80% { opacity: 1; translate: 0 0; }
    86%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes sc-site-click { 0%, 55% { opacity: 0; scale: 0.4; } 56% { opacity: 1; scale: 0.4; } 64%, 100% { opacity: 0; scale: 1.8; } }
.sc--site .sc-press { animation: sc-site-press var(--T) ease-out infinite both; }
@keyframes sc-site-press { 0%, 55% { scale: 1; } 56.5% { scale: 0.92; } 59%, 100% { scale: 1; } }
.sc--site .sc-lead { left: 6%; bottom: 3%; animation: sc-site-lead var(--T) var(--sc-spring) infinite both; }
@keyframes sc-site-lead { 0%, 58% { opacity: 0; translate: 0 4cqw; scale: 0.92; } 63%, 90% { opacity: 1; translate: 0 0; scale: 1; } 96%, 100% { opacity: 0; translate: 0 0; scale: 1; } }

/* ===========================================================================
   2. Интернет-магазин — «В корзину», the item flies into the cart, the order
   goes through payment → 1С → delivery, the week's revenue grows.
   =========================================================================== */
.sc--shop { --T: 11s; }
.sc--shop .sc-product { left: 3%; top: 8%; width: 44%; height: 78%; padding: 2cqw; display: grid; grid-template-rows: 1fr auto auto; gap: 1.4cqw; }
.sc--shop .sc-prodpic { position: relative; border-radius: 1.8cqw; background: radial-gradient(60% 60% at 50% 45%, rgba(128, 136, 255, 0.45), transparent 70%), linear-gradient(160deg, #1d2150, #12142a); display: grid; place-items: center; }
.sc--shop .sc-prodpic svg { width: 42%; height: auto; filter: drop-shadow(0 1.6cqw 2cqw rgba(0, 0, 0, 0.5)); }
.sc--shop .sc-prodpic .sc-tag { position: absolute; left: 1.4cqw; top: 1.4cqw; padding: 0.5cqw 1.2cqw; border-radius: 2cqw; background: var(--sc-lime); color: #0A0B18; font-size: 1.6cqw; font-weight: 700; }
.sc--shop .sc-prodname { font-size: 2.3cqw; font-weight: 600; }
.sc--shop .sc-prodrow { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.sc--shop .sc-price { font-size: 3cqw; }
.sc--shop .sc-cart { left: 70%; top: 3%; }
.sc--shop .sc-badge { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--sc-lime); color: #0A0B18; font-size: 1.8cqw; font-weight: 700; overflow: hidden; animation: sc-shop-bump var(--T) var(--sc-spring) infinite both; }
.sc--shop .sc-badge span { grid-area: 1 / 1; }
.sc--shop .sc-badge .n0 { opacity: 0; animation: sc-shop-n0 var(--T) var(--sc-ease) infinite both; }
.sc--shop .sc-badge .n1 { animation: sc-shop-n1 var(--T) var(--sc-ease) infinite both; }
@keyframes sc-shop-n0 { 0%, 30% { opacity: 1; translate: 0 0; } 33%, 96% { opacity: 0; translate: 0 -3cqw; } 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-shop-n1 { 0%, 30% { opacity: 0; translate: 0 3cqw; } 33%, 96% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes sc-shop-bump { 0%, 31% { scale: 1; } 34% { scale: 1.35; } 38%, 100% { scale: 1; } }
/* The item: a lime dot on an arc from the button to the cart (x and y on two nested boxes). */
.sc--shop .sc-fly { z-index: 15; width: 3cqw; height: 3cqw; animation: sc-shop-flyx var(--T) linear infinite both; }
.sc--shop .sc-fly i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sc-lime); box-shadow: 0 0 2.4cqw var(--sc-lime); animation: sc-shop-flyy var(--T) linear infinite both; }
@keyframes sc-shop-flyx { 0%, 20% { opacity: 0; translate: 0 0; } 21% { opacity: 1; translate: 0 0; } 32% { opacity: 1; translate: var(--dx) 0; } 33%, 100% { opacity: 0; translate: var(--dx) 0; } }
@keyframes sc-shop-flyy { 0%, 21% { translate: 0 0; scale: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); } 26% { translate: 0 calc(var(--dy) - 8cqw); scale: 1.1; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); } 32% { translate: 0 var(--dy); scale: 0.5; } 100% { translate: 0 var(--dy); scale: 0.5; } }
.sc--shop .sc-cursor { animation: sc-shop-cursor var(--T) var(--sc-ease) infinite both; }
.sc--shop .sc-cursor::after { animation: sc-shop-click var(--T) ease-out infinite both; }
@keyframes sc-shop-cursor { 0%, 6% { opacity: 0; translate: 14cqw -14cqw; } 10% { opacity: 1; translate: 14cqw -14cqw; } 18% { opacity: 1; translate: 0 0; scale: 1; } 19.5% { scale: 0.86; } 21% { scale: 1; } 34% { opacity: 1; translate: 0 0; } 38%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sc-shop-click { 0%, 19% { opacity: 0; scale: 0.4; } 19.5% { opacity: 1; scale: 0.4; } 26%, 100% { opacity: 0; scale: 1.8; } }
.sc--shop .sc-press { animation: sc-shop-press var(--T) ease-out infinite both; }
@keyframes sc-shop-press { 0%, 19% { scale: 1; } 20% { scale: 0.92; } 22%, 100% { scale: 1; } }
.sc--shop .sc-order { left: 51%; top: 17%; width: 46%; padding: 2cqw 2.2cqw; display: grid; gap: 1.4cqw; animation: sc-shop-in var(--T) var(--sc-spring) infinite both; }
@keyframes sc-shop-in { 0%, 34% { opacity: 0; translate: 3cqw 0; } 39%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
.sc--shop .sc-order header { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; font-size: 2.1cqw; font-weight: 600; }
.sc--shop .sc-step { display: flex; align-items: center; gap: 1.4cqw; font-size: 1.95cqw; }
.sc--shop .sc-step .sc-ico { width: 3.6cqw; height: 3.6cqw; animation: sc-shop-tick var(--T) var(--sc-spring) infinite both; animation-delay: calc(var(--k) * 0.9s); }
@keyframes sc-shop-tick { 0%, 38% { background: rgba(255, 255, 255, 0.08); color: transparent; scale: 0.9; } 42%, 100% { background: color-mix(in srgb, var(--sc-ok) 22%, transparent); color: var(--sc-ok); scale: 1; } }
.sc--shop .sc-rev { left: 51%; top: 61%; width: 46%; height: 31%; padding: 1.8cqw 2.2cqw; animation: sc-shop-in var(--T) var(--sc-spring) infinite both; animation-delay: 0.35s; }
.sc--shop .sc-rev header { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.9cqw; color: var(--sc-mute); }
.sc--shop .sc-rev header b { font-size: 2.6cqw; color: var(--sc-lime); }
.sc--shop .sc-bars { position: absolute; left: 2.2cqw; right: 2.2cqw; bottom: 1.8cqw; height: 11cqw; display: flex; align-items: end; gap: 1.2cqw; }
.sc--shop .sc-bars i { flex: 1; height: var(--h); border-radius: 0.8cqw 0.8cqw 0.3cqw 0.3cqw; background: linear-gradient(180deg, var(--sc-cobalt-2), rgba(90, 98, 214, 0.35)); transform-origin: bottom; animation: sc-shop-bar var(--T) var(--sc-ease) infinite both; animation-delay: calc(var(--k) * 0.12s); }
.sc--shop .sc-bars i:last-child { background: linear-gradient(180deg, var(--sc-lime), rgba(200, 242, 58, 0.35)); }
@keyframes sc-shop-bar { 0%, 44% { scale: 1 0.1; } 54%, 92% { scale: 1 1; } 98%, 100% { scale: 1 0.1; } }

/* ===========================================================================
   3. SEO — the query is typed, your site climbs from 5th to 1st place,
   search traffic grows.
   =========================================================================== */
.sc--seo { --T: 12s; --r: 10.4cqw; }
.sc--seo .sc-search { left: 3%; top: 4%; width: 94%; height: 12%; display: flex; align-items: center; gap: 1.6cqw; padding: 0 1.4cqw 0 2.4cqw; border-radius: 5cqw; }
.sc--seo .sc-search > svg { width: 3cqw; height: 3cqw; color: var(--sc-mute); flex: none; }
.sc--seo .sc-q { flex: 1; font-size: 2.4cqw; white-space: nowrap; overflow: hidden; }
.sc--seo .sc-q span { display: inline-block; vertical-align: middle; animation: sc-seo-type var(--T) steps(26, end) infinite both; }
.sc--seo .sc-q::after { content: ""; display: inline-block; width: 2px; height: 3cqw; margin-left: 0.3cqw; vertical-align: middle; background: var(--sc-cobalt-2); animation: sc-blink 0.9s steps(1) infinite; }
@keyframes sc-seo-type { 0%, 3% { clip-path: inset(0 100% 0 0); } 18%, 100% { clip-path: inset(0 0 0 0); } }
.sc--seo .sc-search .sc-btn { height: 6cqw; padding: 0 2.6cqw; font-size: 2cqw; }
.sc--seo .sc-serp { left: 3%; top: 21%; width: 60%; height: 75%; }
.sc--seo .sc-row { position: absolute; left: 1.8cqw; right: 1.8cqw; top: calc(1.8cqw + var(--i) * var(--r)); height: calc(var(--r) - 1.2cqw); display: grid; grid-template-columns: 3.6cqw 1fr auto; align-items: center; gap: 1.4cqw; padding: 0 1.4cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.03); translate: 0 var(--r); }
.sc--seo .sc-row > i { width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.1); }
.sc--seo .sc-row > div { display: grid; gap: 0.8cqw; }
.sc--seo .sc-row > div .sc-line:first-child { width: 82%; height: 1.4cqw; background: rgba(128, 136, 255, 0.4); }
.sc--seo .sc-row > div .sc-line:last-child { width: 52%; height: 1cqw; }
.sc--seo .sc-row.me { z-index: 2; top: 1.8cqw; translate: 0 0; background: rgba(90, 98, 214, 0.22); box-shadow: inset 0 0 0 1px rgba(128, 136, 255, 0.6), 0 1.6cqw 3cqw rgba(4, 5, 16, 0.5); animation: sc-seo-up var(--T) var(--sc-ease) infinite both; }
.sc--seo .sc-row.me > i { background: linear-gradient(135deg, var(--sc-lime), #8fd11a); }
.sc--seo .sc-row.me b { display: block; font-size: 1.95cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc--seo .sc-row.me small { display: block; font-size: 1.6cqw; color: var(--sc-ok); }
@keyframes sc-seo-up { 0%, 24% { translate: 0 calc(4 * var(--r)); } 32% { translate: 0 calc(3 * var(--r)); } 40% { translate: 0 calc(2 * var(--r)); } 48% { translate: 0 var(--r); } 56%, 100% { translate: 0 0; } }
.sc--seo .sc-row[style*="--i:3"] { animation: sc-seo-d4 var(--T) var(--sc-ease) infinite both; }
.sc--seo .sc-row[style*="--i:2"] { animation: sc-seo-d3 var(--T) var(--sc-ease) infinite both; }
.sc--seo .sc-row[style*="--i:1"] { animation: sc-seo-d2 var(--T) var(--sc-ease) infinite both; }
.sc--seo .sc-row[style*="--i:0"] { animation: sc-seo-d1 var(--T) var(--sc-ease) infinite both; }
@keyframes sc-seo-d4 { 0%, 24% { translate: 0 0; } 32%, 100% { translate: 0 var(--r); } }
@keyframes sc-seo-d3 { 0%, 32% { translate: 0 0; } 40%, 100% { translate: 0 var(--r); } }
@keyframes sc-seo-d2 { 0%, 40% { translate: 0 0; } 48%, 100% { translate: 0 var(--r); } }
@keyframes sc-seo-d1 { 0%, 48% { translate: 0 0; } 56%, 100% { translate: 0 var(--r); } }
.sc--seo .sc-pos { display: grid; place-items: center; min-width: 6cqw; height: 3.6cqw; padding: 0 1cqw; border-radius: 2cqw; background: var(--sc-lime); color: #0A0B18; font-size: 1.8cqw; font-weight: 700; white-space: nowrap; animation: sc-seo-pos var(--T) linear infinite both; }
.sc--seo .sc-pos span { grid-area: 1 / 1; }
.sc--seo .sc-pos .p5 { opacity: 0; animation: sc-seo-p5 var(--T) linear infinite both; }
.sc--seo .sc-pos .p1 { animation: sc-seo-p1 var(--T) linear infinite both; }
@keyframes sc-seo-p5 { 0%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes sc-seo-p1 { 0%, 54% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes sc-seo-pos { 0%, 54% { background: rgba(255, 255, 255, 0.12); color: var(--sc-text); } 56%, 100% { background: var(--sc-lime); color: #0A0B18; } }
.sc--seo .sc-chart { left: 66%; top: 21%; width: 31%; height: 46%; padding: 1.8cqw 2cqw; }
.sc--seo .sc-chart header { font-size: 1.75cqw; color: var(--sc-mute); line-height: 1.25; }
.sc--seo .sc-chart b { display: block; margin-top: 0.6cqw; font-size: 3.4cqw; color: var(--sc-lime); }
.sc--seo .sc-chart svg { position: absolute; left: 1.6cqw; bottom: 1.6cqw; width: calc(100% - 3.2cqw); height: 45%; }
.sc--seo .sc-chart .ln { fill: none; stroke: var(--sc-cobalt-2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: sc-seo-draw var(--T) var(--sc-ease) infinite both; }
.sc--seo .sc-chart .ar { fill: url(#sc-seo-g); animation: sc-seo-fill var(--T) ease infinite both; }
.sc--seo .sc-chart .dot { fill: var(--sc-lime); animation: sc-seo-fill var(--T) ease infinite both; }
@keyframes sc-seo-draw { 0%, 56% { stroke-dashoffset: 100; } 76%, 100% { stroke-dashoffset: 0; } }
@keyframes sc-seo-fill { 0%, 70% { opacity: 0; } 78%, 100% { opacity: 1; } }
.sc--seo .sc-kw { left: 66%; top: 72%; animation: sc-seo-kw var(--T) var(--sc-spring) infinite both; }
@keyframes sc-seo-kw { 0%, 58% { opacity: 0; scale: 0.85; } 64%, 94% { opacity: 1; scale: 1; } 98%, 100% { opacity: 0; scale: 1; } }

/* ===========================================================================
   4. Яндекс Директ — the ad, clicks flying into the target, the funnel
   counting impressions → clicks → requests.
   =========================================================================== */
.sc--ads { --T: 10s; }
.sc--ads .sc-target { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc--ads .sc-target .ring { fill: rgba(20, 22, 48, 0.6); stroke: rgba(128, 136, 255, 0.35); stroke-width: 1.5; }
.sc--ads .sc-target .ring--mid { fill: rgba(30, 34, 80, 0.7); stroke: rgba(128, 136, 255, 0.6); }
.sc--ads .sc-target .ring--in { fill: rgba(200, 242, 58, 0.14); stroke: rgba(200, 242, 58, 0.6); }
.sc--ads .sc-target .core { fill: var(--sc-lime); }
.sc--ads .sc-target .pulse { fill: none; stroke: var(--sc-lime); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sc-pulse 2s ease-out infinite; }
.sc--ads .sc-target .path { fill: none; stroke: rgba(128, 136, 255, 0.25); stroke-width: 1.2; stroke-dasharray: 3 5; }
.sc--ads .sc-target .click { fill: var(--sc-cobalt-2); }
.sc--ads .sc-target .click--lime { fill: var(--sc-lime); }
.sc--ads .sc-ad { left: 3%; top: 5%; width: 60%; padding: 2.2cqw 2.4cqw; display: grid; gap: 1.2cqw; }
.sc--ads .sc-ad small { font-size: 1.7cqw; color: var(--sc-mute); }
.sc--ads .sc-ad small b { color: var(--sc-text); font-weight: 600; }
.sc--ads .sc-ad .t { font-size: 2.55cqw; font-weight: 600; color: var(--sc-cobalt-2); line-height: 1.22; }
.sc--ads .sc-ad .d { font-size: 1.8cqw; color: var(--sc-mute); line-height: 1.35; }
.sc--ads .sc-links { display: flex; flex-wrap: wrap; gap: 1cqw; }
.sc--ads .sc-links span { padding: 0.6cqw 1.4cqw; border-radius: 2cqw; background: rgba(128, 136, 255, 0.14); color: var(--sc-cobalt-2); font-size: 1.65cqw; }
.sc--ads .sc-funnel { left: 3%; top: 55%; width: 60%; padding: 2.2cqw 2.4cqw; display: grid; gap: 1.8cqw; }
.sc--ads .sc-frow { display: grid; grid-template-columns: 9cqw 1fr 9cqw; align-items: center; gap: 1.6cqw; font-size: 1.9cqw; }
.sc--ads .sc-frow .sc-num { text-align: right; font-size: 2.2cqw; }
.sc--ads .sc-track { height: 2.2cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.sc--ads .sc-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--sc-cobalt), var(--sc-cobalt-2)); transform-origin: left; animation: sc-ads-bar var(--T) var(--sc-ease) infinite both; animation-delay: calc(var(--k) * 0.35s); }
.sc--ads .sc-frow:last-child .sc-track i { background: linear-gradient(90deg, #9cc71f, var(--sc-lime)); }
@keyframes sc-ads-bar { 0%, 4% { scale: 0 1; } 26%, 92% { scale: 1 1; } 98%, 100% { scale: 0 1; } }
.sc--ads .sc-cpl { left: 67%; top: 82%; animation: sc-ads-pop var(--T) var(--sc-spring) infinite both; }
@keyframes sc-ads-pop { 0%, 34% { opacity: 0; scale: 0.85; } 40%, 92% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 1; } }

/* ===========================================================================
   5. Дизайн — a frame on the canvas: the grid shows, the selection moves
   over the blocks, a swatch recolours the button; «Иван» is the pointer.
   =========================================================================== */
.sc--design { --T: 12s; }
.sc--design .sc-frame-label { position: absolute; left: 3%; top: 3%; font-size: 1.7cqw; color: var(--sc-mute); }
.sc--design .sc-board { left: 3%; top: 9%; width: 68%; height: 86%; border-radius: 1.6cqw; }
.sc--design .sc-art { position: absolute; inset: 0; padding: 2.4cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 2.2cqw; }
.sc--design .sc-art .sc-nav { display: flex; align-items: center; gap: 1.4cqw; }
.sc--design .sc-art .sc-nav i { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: var(--sc-cobalt-2); }
.sc--design .sc-art .sc-nav .sc-line { width: 6cqw; height: 1cqw; }
.sc--design .sc-art .sc-nav .sc-line:first-of-type { margin-left: auto; }
.sc--design .sc-hero2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2cqw; align-items: center; }
.sc--design .sc-hero2 .t { font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-size: 3.3cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.sc--design .sc-hero2 .sc-line { margin-top: 1.4cqw; width: 85%; }
.sc--design .sc-cta { display: inline-grid; margin-top: 1.8cqw; height: 4.6cqw; }
.sc--design .sc-cta span { grid-area: 1 / 1; display: grid; place-items: center; padding: 0 2.4cqw; border-radius: 3cqw; font-size: 1.9cqw; font-weight: 600; white-space: nowrap; }
.sc--design .sc-cta .a { background: var(--sc-cobalt); color: #fff; opacity: 0; animation: sc-des-a var(--T) var(--sc-ease) infinite both; }
.sc--design .sc-cta .b { background: var(--sc-lime); color: #0A0B18; animation: sc-des-b var(--T) var(--sc-ease) infinite both; }
@keyframes sc-des-a { 0%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes sc-des-b { 0%, 60% { opacity: 0; scale: 0.94; } 64%, 100% { opacity: 1; scale: 1; } }
.sc--design .sc-shot { height: 17cqw; border-radius: 1.6cqw; background: radial-gradient(70% 70% at 30% 30%, rgba(200, 242, 58, 0.4), transparent 60%), linear-gradient(140deg, #8088ff, #2a2f7e); }
.sc--design .sc-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sc--design .sc-row3 i { border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sc-edge); }
.sc--design .sc-grid { position: absolute; inset: 0 2.4cqw; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6cqw; pointer-events: none; opacity: 0; animation: sc-des-grid var(--T) ease infinite both; }
.sc--design .sc-grid i { background: rgba(255, 90, 140, 0.08); border-inline: 1px solid rgba(255, 90, 140, 0.28); }
@keyframes sc-des-grid { 0%, 6% { opacity: 0; } 12%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
.sc--design .sc-sel { position: absolute; border: 1.5px solid var(--sc-cobalt-2); border-radius: 0.6cqw; opacity: 0; pointer-events: none; }
.sc--design .sc-sel::before, .sc--design .sc-sel::after { content: ""; position: absolute; width: 1.2cqw; height: 1.2cqw; background: #fff; border: 1.5px solid var(--sc-cobalt-2); }
.sc--design .sc-sel::before { left: -0.7cqw; top: -0.7cqw; }
.sc--design .sc-sel::after { right: -0.7cqw; bottom: -0.7cqw; }
.sc--design .sc-sel b { position: absolute; left: 50%; bottom: -3.2cqw; translate: -50% 0; padding: 0.3cqw 1cqw; border-radius: 0.6cqw; background: var(--sc-cobalt-2); color: #fff; font-size: 1.4cqw; font-weight: 600; white-space: nowrap; }
.sc--design .sc-sel--1 { animation: sc-des-s1 var(--T) var(--sc-ease) infinite both; }
.sc--design .sc-sel--2 { animation: sc-des-s2 var(--T) var(--sc-ease) infinite both; }
.sc--design .sc-sel--3 { opacity: 1; animation: sc-des-s3 var(--T) var(--sc-ease) infinite both; }
@keyframes sc-des-s1 { 0%, 30% { opacity: 0; } 32%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes sc-des-s2 { 0%, 44% { opacity: 0; } 46%, 54% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sc-des-s3 { 0%, 56% { opacity: 0; } 58%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.sc--design .sc-swatches { left: 75%; top: 9%; width: 22%; padding: 1.8cqw; display: grid; gap: 1.2cqw; }
.sc--design .sc-swatches small { font-size: 1.6cqw; color: var(--sc-mute); }
.sc--design .sc-sw { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.55cqw; color: var(--sc-mute); }
.sc--design .sc-sw i { flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.sc--design .sc-sw--lime i { animation: sc-des-pick var(--T) var(--sc-ease) infinite both; }
@keyframes sc-des-pick { 0%, 59% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); } 61%, 92% { box-shadow: 0 0 0 2px #12142A, 0 0 0 3.5px var(--sc-lime); } 96%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); } }
.sc--design .sc-type { left: 75%; top: 63%; width: 22%; padding: 1.8cqw; }
.sc--design .sc-type .aa { font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-size: 6cqw; font-weight: 700; line-height: 1; }
.sc--design .sc-type small { display: block; margin-top: 1cqw; font-size: 1.5cqw; color: var(--sc-mute); }
.sc--design .sc-who { position: absolute; z-index: 20; left: 0; top: 0; animation: sc-des-who var(--T) var(--sc-ease) infinite both; }
.sc--design .sc-who svg { width: 3.6cqw; height: 3.6cqw; filter: drop-shadow(0 0.6cqw 1cqw rgba(0, 0, 0, 0.5)); }
.sc--design .sc-who b { position: absolute; left: 3cqw; top: 3.2cqw; padding: 0.4cqw 1.2cqw; border-radius: 0.8cqw 2cqw 2cqw 2cqw; background: var(--sc-lime); color: #0A0B18; font-size: 1.5cqw; font-weight: 700; white-space: nowrap; }

/* ===========================================================================
   6. Telegram-боты — a booking chat: buttons, «печатает…», the slot is
   booked and the request goes to the CRM. Each message shows from its own
   moment (--at, % of the loop) to the end of the loop.
   =========================================================================== */
.sc--bot { --T: 13s; }
.sc--bot .sc-phone { left: 28%; top: 2%; width: 42%; height: 96%; border-radius: 5cqw; padding: 1.2cqw; }
.sc--bot .sc-scr { position: absolute; inset: 1.2cqw; border-radius: 4cqw; background: linear-gradient(180deg, #121530, #0d0f24); overflow: hidden; }
.sc--bot .sc-chathead { display: flex; align-items: center; gap: 1.4cqw; padding: 3.8cqw 2cqw 1.6cqw; border-bottom: 1px solid var(--sc-edge); background: rgba(255, 255, 255, 0.03); }
.sc--bot .sc-chathead .sc-ico { width: 4.4cqw; height: 4.4cqw; }
.sc--bot .sc-chathead b { display: block; font-size: 1.95cqw; }
.sc--bot .sc-chathead small { display: block; font-size: 1.5cqw; color: var(--sc-cobalt-2); }
.sc--bot .sc-msgs { position: absolute; left: 1.8cqw; right: 1.8cqw; top: 12cqw; bottom: 1.8cqw; display: flex; flex-direction: column; gap: 1.1cqw; animation: sc-bot-reset var(--T) linear infinite both; }
@keyframes sc-bot-reset { 0%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
.sc--bot .sc-m, .sc--bot .sc-kb { animation: var(--anim, sc-bot-in) var(--T) var(--sc-spring) infinite both; }
.sc--bot .sc-m { max-width: 88%; padding: 1.1cqw 1.5cqw; border-radius: 2cqw 2cqw 2cqw 0.6cqw; background: rgba(255, 255, 255, 0.08); font-size: 1.7cqw; line-height: 1.3; }
.sc--bot .sc-m.me { align-self: flex-end; border-radius: 2cqw 2cqw 0.6cqw 2cqw; background: var(--sc-cobalt); color: #fff; }
.sc--bot .sc-m.ok { background: color-mix(in srgb, var(--sc-ok) 18%, rgba(255, 255, 255, 0.05)); }
.sc--bot .sc-kb { display: flex; flex-wrap: wrap; gap: 0.8cqw; }
.sc--bot .sc-kb span { padding: 0.8cqw 1.3cqw; border-radius: 1.4cqw; background: rgba(128, 136, 255, 0.16); color: var(--sc-cobalt-2); font-size: 1.55cqw; font-weight: 600; }
/* Appear at --at % of the loop: one keyframe set per moment. */
@keyframes sc-bot-in4 { 0%, 4% { opacity: 0; translate: 0 1.6cqw; } 7%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in10 { 0%, 10% { opacity: 0; translate: 0 1.6cqw; } 13%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in22 { 0%, 22% { opacity: 0; translate: 0 1.6cqw; } 25%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in36 { 0%, 36% { opacity: 0; translate: 0 1.6cqw; } 39%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in40 { 0%, 40% { opacity: 0; translate: 0 1.6cqw; } 43%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in52 { 0%, 52% { opacity: 0; translate: 0 1.6cqw; } 55%, 100% { opacity: 1; translate: 0 0; } }
@keyframes sc-bot-in64 { 0%, 64% { opacity: 0; translate: 0 1.6cqw; } 67%, 100% { opacity: 1; translate: 0 0; } }
.sc--bot .sc-kb .hit { animation: var(--hit) var(--T) ease-out infinite both; }
@keyframes sc-bot-hit19 { 0%, 18% { background: rgba(128, 136, 255, 0.16); color: var(--sc-cobalt-2); } 19%, 22% { background: var(--sc-lime); color: #0A0B18; } 26%, 100% { background: rgba(128, 136, 255, 0.16); color: var(--sc-cobalt-2); } }
@keyframes sc-bot-hit49 { 0%, 48% { background: rgba(128, 136, 255, 0.16); color: var(--sc-cobalt-2); } 49%, 52% { background: var(--sc-lime); color: #0A0B18; } 56%, 100% { background: rgba(128, 136, 255, 0.16); color: var(--sc-cobalt-2); } }
.sc--bot .sc-typing { display: inline-flex; gap: 0.6cqw; align-self: flex-start; padding: 1.3cqw 1.7cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.08); animation: sc-bot-typing var(--T) linear infinite both; }
.sc--bot .sc-typing i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--sc-mute); animation: sc-blink 0.9s ease-in-out infinite; }
.sc--bot .sc-typing i:nth-child(2) { animation-delay: 0.15s; }
.sc--bot .sc-typing i:nth-child(3) { animation-delay: 0.3s; }
/* «печатает…» lives in the gap before the bot's answer, then folds away. */
@keyframes sc-bot-typing { 0%, 26% { opacity: 0; height: 0; padding-block: 0; margin-top: -1.1cqw; } 27%, 35% { opacity: 1; height: 3.6cqw; padding-block: 1.3cqw; margin-top: 0; } 36%, 100% { opacity: 0; height: 0; padding-block: 0; margin-top: -1.1cqw; } }
.sc--bot .sc-src { left: 0%; top: 14%; }
.sc--bot .sc-crm { left: 72%; top: 46%; animation: sc-bot-crm var(--T) var(--sc-spring) infinite both; }
.sc--bot .sc-remind { left: 0%; top: 72%; animation: sc-bot-rem var(--T) var(--sc-spring) infinite both; }
@keyframes sc-bot-crm { 0%, 70% { opacity: 0; translate: -2cqw 0; } 74%, 94% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sc-bot-rem { 0%, 78% { opacity: 0; translate: 2cqw 0; } 82%, 94% { opacity: 1; translate: 0 0; } 98%, 100% { opacity: 0; translate: 0 0; } }

/* ===========================================================================
   7. Интеграции — the site in the middle, the systems around it, data
   flowing both ways along the links (SMIL in the markup).
   =========================================================================== */
.sc--int .sc-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc--int .link { fill: none; stroke: rgba(128, 136, 255, 0.34); stroke-width: 1.4; }
.sc--int .dot-in { fill: var(--sc-lime); }
.sc--int .dot-out { fill: var(--sc-cobalt-2); }
.sc--int .hub-ring { fill: none; stroke: rgba(200, 242, 58, 0.5); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sc-pulse 3s ease-out infinite; }
.sc--int .hub-ring--late { animation-delay: -1.5s; }
.sc--int .sc-hub { position: absolute; z-index: 2; left: 50%; top: 46%; translate: -50% -50%; display: grid; place-content: center; width: 23cqw; height: 23cqw; border-radius: 50%; border: 1px solid var(--sc-edge-2); background: radial-gradient(circle at 35% 30%, rgba(128, 136, 255, 0.55), rgba(20, 22, 48, 0.96) 70%); box-shadow: 0 2cqw 6cqw rgba(4, 5, 16, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); text-align: center; }
.sc--int .sc-hub b { display: block; font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-size: 2.5cqw; line-height: 1.15; }
.sc--int .sc-hub small { display: block; margin-top: 0.6cqw; font-size: 1.6cqw; color: var(--sc-mute); }
.sc--int .sc-node { z-index: 2; translate: -50% -50%; }
.sc--int .sc-node > span { display: inline-flex; align-items: center; gap: 1.2cqw; animation: sc-float 6s ease-in-out infinite; animation-delay: calc(var(--k) * -1s); }
.sc--int .sc-sync { z-index: 3; left: 50%; bottom: 2%; translate: -50% 0; }

/* ===========================================================================
   8. Поддержка — monitoring: the pulse, uptime, today's checklist ticking,
   a fault fixed.
   =========================================================================== */
.sc--sup { --T: 12s; }
.sc--sup .sc-dash { left: 3%; top: 5%; width: 61%; height: 90%; padding: 2.2cqw 2.4cqw; display: grid; grid-template-rows: auto auto 1fr auto; gap: 1.6cqw; }
.sc--sup .sc-dash header { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; font-size: 1.75cqw; color: var(--sc-mute); }
.sc--sup .sc-dash header span { display: inline-flex; align-items: center; gap: 0.8cqw; color: var(--sc-ok); font-weight: 600; }
.sc--sup .sc-up b { display: block; font-size: 6cqw; line-height: 1; }
.sc--sup .sc-up small { display: block; margin-top: 0.8cqw; font-size: 1.7cqw; color: var(--sc-mute); }
.sc--sup .sc-ecg { position: relative; overflow: hidden; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.03); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.sc--sup .sc-ecg svg { position: absolute; left: 0; top: 15%; width: 200%; height: 70%; animation: sc-sup-ecg 3.2s linear infinite; }
.sc--sup .sc-ecg path { fill: none; stroke: var(--sc-ok); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(61, 220, 132, 0.6)); }
@keyframes sc-sup-ecg { to { translate: -50% 0; } }
.sc--sup .sc-ms { display: flex; align-items: end; justify-content: space-between; gap: 1.6cqw; font-size: 1.7cqw; color: var(--sc-mute); }
.sc--sup .sc-ms b { display: block; font-size: 2.6cqw; color: var(--sc-text); }
.sc--sup .sc-msbars { display: flex; align-items: end; gap: 0.6cqw; height: 5cqw; }
.sc--sup .sc-msbars i { width: 1.2cqw; height: var(--h); border-radius: 0.4cqw; background: rgba(128, 136, 255, 0.55); }
.sc--sup .sc-tasks { left: 67%; top: 5%; width: 30%; padding: 2cqw; display: grid; gap: 1.5cqw; }
.sc--sup .sc-tasks header { font-size: 1.75cqw; color: var(--sc-mute); }
.sc--sup .sc-task { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; }
.sc--sup .sc-task .sc-ico { position: relative; width: 3.4cqw; height: 3.4cqw; animation: sc-sup-done var(--T) var(--sc-spring) infinite both; animation-delay: calc(var(--k) * 1.1s); }
.sc--sup .sc-task .sc-ico::before { content: ""; position: absolute; inset: 0.2cqw; border-radius: 50%; border: 2px solid rgba(128, 136, 255, 0.25); border-top-color: var(--sc-cobalt-2); opacity: 0; animation: sc-spin 0.8s linear infinite, sc-sup-spin var(--T) linear infinite both; animation-delay: 0s, calc(var(--k) * 1.1s); }
@keyframes sc-sup-done { 0%, 14% { background: rgba(255, 255, 255, 0.06); color: transparent; scale: 0.9; } 18%, 100% { background: color-mix(in srgb, var(--sc-ok) 22%, transparent); color: var(--sc-ok); scale: 1; } }
@keyframes sc-sup-spin { 0%, 4% { opacity: 0; } 5%, 15% { opacity: 1; } 17%, 100% { opacity: 0; } }
.sc--sup .sc-fix { left: 44%; top: 72%; width: 53%; animation: sc-site-lead var(--T) var(--sc-spring) infinite both; }

/* ===========================================================================
   9. Мобильные приложения — the app's screens swipe by (welcome →
   catalogue → order placed), a push notification drops in.
   =========================================================================== */
.sc--app { --T: 12s; }
.sc--app .sc-phone { left: 28%; top: 2%; width: 40%; height: 96%; border-radius: 5cqw; padding: 1.2cqw; }
.sc--app .sc-scr { position: absolute; inset: 1.2cqw; border-radius: 4cqw; background: #0d0f24; overflow: hidden; }
.sc--app .sc-scr::before { content: ""; position: absolute; z-index: 3; top: 1.2cqw; left: 50%; translate: -50% 0; width: 9cqw; height: 2cqw; border-radius: 2cqw; background: #000; }
.sc--app .sc-strip { position: absolute; inset: 0; display: flex; width: 300%; translate: -66.6667% 0; animation: sc-app-swipe var(--T) var(--sc-ease) infinite both; }
@keyframes sc-app-swipe { 0%, 26% { translate: 0 0; } 32%, 60% { translate: -33.3333% 0; } 66%, 92% { translate: -66.6667% 0; } 98%, 100% { translate: 0 0; } }
.sc--app .sc-s { position: relative; flex: 0 0 33.3333%; height: 100%; padding: 6.4cqw 2.4cqw 3cqw; display: grid; align-content: start; gap: 1.6cqw; }
.sc--app .sc-s .hd { font-family: var(--webivan-font-display, 'Unbounded', sans-serif); font-size: 2.5cqw; font-weight: 700; line-height: 1.15; }
.sc--app .sc-s p { margin: 0; font-size: 1.7cqw; color: var(--sc-mute); }
.sc--app .sc-blob { height: 26cqw; border-radius: 3cqw; background: radial-gradient(50% 50% at 50% 55%, rgba(200, 242, 58, 0.5), transparent 70%), radial-gradient(60% 60% at 40% 40%, rgba(128, 136, 255, 0.75), transparent 75%), #151838; display: grid; place-items: center; }
.sc--app .sc-blob svg { width: 38%; color: #fff; }
.sc--app .sc-s .sc-btn { width: 100%; height: 5cqw; font-size: 1.9cqw; }
.sc--app .sc-item { display: grid; grid-template-columns: 6cqw 1fr auto; align-items: center; gap: 1.2cqw; padding: 1cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.05); }
.sc--app .sc-item > i { height: 6cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.sc--app .sc-item > div { display: grid; gap: 0.6cqw; }
.sc--app .sc-item > div .sc-line:last-child { width: 60%; }
.sc--app .sc-item b { font-size: 1.7cqw; color: var(--sc-lime); }
.sc--app .sc-done { justify-items: center; text-align: center; padding-top: 14cqw; }
.sc--app .sc-done .sc-ico { width: 11cqw; height: 11cqw; }
.sc--app .sc-done .sc-ico svg { width: 6cqw; height: 6cqw; }
.sc--app .sc-pager { position: absolute; z-index: 3; left: 50%; bottom: 2.4cqw; translate: -50% 0; display: flex; gap: 0.8cqw; }
.sc--app .sc-pager i { height: 1.2cqw; width: 1.2cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.25); }
.sc--app .sc-pager i:nth-child(1) { animation: sc-app-p1 var(--T) linear infinite both; }
.sc--app .sc-pager i:nth-child(2) { animation: sc-app-p2 var(--T) linear infinite both; }
.sc--app .sc-pager i:nth-child(3) { width: 3cqw; background: var(--sc-lime); animation: sc-app-p3 var(--T) linear infinite both; }
@keyframes sc-app-p1 { 0%, 29% { background: var(--sc-lime); width: 3cqw; } 30%, 95% { background: rgba(255, 255, 255, 0.25); width: 1.2cqw; } 96%, 100% { background: var(--sc-lime); width: 3cqw; } }
@keyframes sc-app-p2 { 0%, 29% { background: rgba(255, 255, 255, 0.25); width: 1.2cqw; } 30%, 63% { background: var(--sc-lime); width: 3cqw; } 64%, 100% { background: rgba(255, 255, 255, 0.25); width: 1.2cqw; } }
@keyframes sc-app-p3 { 0%, 63% { background: rgba(255, 255, 255, 0.25); width: 1.2cqw; } 64%, 95% { background: var(--sc-lime); width: 3cqw; } 96%, 100% { background: rgba(255, 255, 255, 0.25); width: 1.2cqw; } }
.sc--app .sc-push { left: 50%; top: 9%; width: 47%; animation: sc-app-push var(--T) var(--sc-spring) infinite both; }
@keyframes sc-app-push { 0%, 70% { opacity: 0; translate: 0 -5cqw; } 75%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
.sc--app .sc-os { left: 0%; top: 36%; }
.sc--app .sc-pay { left: 71%; top: 66%; }
.sc--bot .sc-typing { overflow: hidden; opacity: 0; height: 0; padding-block: 0; margin-top: -1.1cqw; }
@keyframes sc-des-who {
    0% { translate: 50cqw 62cqw; }
    14% { translate: 40cqw 52cqw; }
    30% { translate: 22cqw 28cqw; }
    44% { translate: 52cqw 32cqw; }
    56% { translate: 18cqw 40cqw; }
    60% { translate: 82cqw 28cqw; }
    62% { translate: 82cqw 28cqw; scale: 0.9; }
    64% { translate: 82cqw 28cqw; scale: 1; }
    80% { translate: 64cqw 60cqw; }
    100% { translate: 50cqw 62cqw; }
}

/* Still picture: no pointers or flying dots, every step done. */
.sc .sc-cursor, .sc--shop .sc-fly { opacity: 0; }
.sc--shop .sc-step .sc-ico { background: color-mix(in srgb, var(--sc-ok) 22%, transparent); color: var(--sc-ok); }
.sc--sup .sc-task .sc-ico { background: color-mix(in srgb, var(--sc-ok) 22%, transparent); color: var(--sc-ok); }
.sc--design .sc-hero2 .t { font-size: 2.75cqw; line-height: 1.15; }
.sc--design .sc-row3 i { display: grid; align-content: end; gap: 0.8cqw; padding: 1.2cqw; }
.sc--design .sc-row3 i::before { content: ""; height: 4.4cqw; margin-bottom: 0.6cqw; border-radius: 1cqw; background: linear-gradient(135deg, rgba(128, 136, 255, 0.5), rgba(128, 136, 255, 0.12)); }
.sc--design .sc-row3 i:nth-child(2)::before { background: linear-gradient(135deg, rgba(200, 242, 58, 0.45), rgba(200, 242, 58, 0.1)); }
.sc--design .sc-row3 i b { display: block; height: 1.1cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.5); width: 80%; }
.sc--design .sc-row3 i b + b { background: rgba(255, 255, 255, 0.14); width: 60%; }
.sc--design .sc-who { translate: 64cqw 62cqw; }