/* src/components/DemoBlock/DemoBlock.css */
/* Layout spec §4 + `Home2.dc.html`/`Home1024.dc.html`/`HomeMobile.dc.html`:
   a full-bleed amber band, no radius — not a card. `.oj-demo-block` breaks
   out of `<main>`'s own max-width the same way `Header`/`Footer` sit outside
   it: a full-width box with only vertical padding, an inner row capped at
   1320px re-applying the shared side padding. The negative-margin breakout
   is why `base.css` sets `overflow-x: hidden` on `html` — `100vw` in the
   `calc()` below includes the scrollbar gutter some browsers give it, which
   would otherwise add a few px of horizontal scroll on every page. */
.oj-demo-block {
  background-color: var(--oj-amber);
  /* The mockup's own decorative pattern: a rounded-square grid fading in
     from the right, behind the number. Desktop/tablet only — `HomeMobile.
     dc.html`'s section has no background-image at all. */
  background-image:
    linear-gradient(90deg, var(--oj-amber) 42%, rgba(240, 180, 65, 0) 78%),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27130%27%20height%3D%27130%27%3E%3Crect%20width%3D%27112%27%20height%3D%27112%27%20rx%3D%2732%27%20fill%3D%27rgba%2815%2C18%2C51%2C0.05%29%27%2F%3E%3C%2Fsvg%3E");
  background-size:
    auto,
    130px 130px;
  background-position:
    0 0,
    right -10px top 22px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 96px 0;
}

.oj-demo-block__inner {
  /* content-box: see ../Header/Header.css for why — same container bug. */
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}

.oj-demo-block__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
}

.oj-demo-block__text h2 {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-ink);
}

.oj-demo-block__description {
  margin: 0;
  max-width: 640px;
  font-size: 22px;
  line-height: 1.5;
  color: var(--oj-ink);
}

.oj-demo-block__cta {
  margin-top: 12px;
  background: var(--oj-ink);
}

/* the ink button on yellow lightens to navy, as on the B2C home's yellow
   block (owner's call, 22.10: an 8% darkening of ink could not be seen) */
.oj-demo-block__cta:hover {
  background: var(--oj-navy);
  color: #fff;
}

.oj-demo-block__minutes {
  margin: 0;
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  color: var(--oj-ink);
}

.oj-demo-block__value {
  font-size: 300px;
  line-height: 0.8;
  letter-spacing: -0.07em;
}

.oj-demo-block__label {
  font-size: 34px;
  letter-spacing: -0.03em;
}

@media (max-width: 1279px) {
  .oj-demo-block__inner {
    gap: 48px;
  }

  .oj-demo-block__text {
    max-width: 560px;
  }

  .oj-demo-block__text h2 {
    font-size: 64px;
  }

  .oj-demo-block__minutes {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .oj-demo-block__value {
    font-size: 200px;
    letter-spacing: -0.06em;
  }

  .oj-demo-block__label {
    font-size: 28px;
    padding-left: 8px;
  }
}

/* Layout spec §3's container table: side padding steps to 40px at the 768
   tablet tier (60px above it, 20px below 767) — this file only had the
   1279 and 767 steps, so at exactly 768 the "минут" column (`flex: none`)
   and the text column's own longest word together needed a few px more
   than the still-60px-padded row gave them (item 3). */
@media (max-width: 1023px) {
  .oj-demo-block__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .oj-demo-block {
    background-image: none;
    padding: 56px 0;
  }

  .oj-demo-block__inner {
    padding: 0 20px;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 18px;
  }

  .oj-demo-block__text {
    max-width: none;
    gap: 18px;
  }

  .oj-demo-block__text h2 {
    font-size: 36px;
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  .oj-demo-block__description {
    max-width: none;
    font-size: 18px;
  }

  .oj-demo-block__cta {
    margin-top: 8px;
    width: 100%;
  }

  .oj-demo-block__minutes {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .oj-demo-block__value {
    font-size: 150px;
    letter-spacing: -0.07em;
  }

  .oj-demo-block__label {
    font-size: 24px;
    padding-left: 0;
  }
}


/* src/components/home/HomeAdvantages.css */
/* The "why OctoJinn" accordion (layout spec §4/§5, `Home2.dc.html` /
   `Home1024.dc.html` / `HomeMobile.dc.html`). Full-bleed section on the page
   background (no colour change of its own) + inner `max-width: 1320px` +
   side padding, the shape `../Header/Header.css` explains. Default (no
   `.is-closed` anywhere, i.e. no JS yet) renders every item as an open card:
   full text, always in the DOM — `client/advantages.ts` is the only thing
   that ever adds `.is-closed`, once it runs. */
.oj-advantages {
  background: var(--oj-bg);
}

.oj-advantages__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px var(--oj-page-pad-desktop) 56px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.oj-advantages__inner h2 {
  margin: 0;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

/* The mobile-only shared animation window (`HomeAdvantages.tsx`): hidden
   above 767 (each open card gets its own window instead, below); at 767 it
   replaces every per-item window with one shared box showing the currently
   open item's scene (`client/advantages.ts` toggles `.is-active`). */
.oj-advantages__mobileWindow {
  display: none;
}

.oj-advantages__list {
  position: relative;
  /* its own stacking context, so the lens's `z-index: -1` lands behind the
     items but above the section's background, not beneath it */
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* The sliding lens (owner's ask, not the mockup's): the open card's own
   look, carried by a separate element behind the items instead of the item
   itself, so `client/advantages.ts` can glide it from the old open item to
   the new one. Hidden by default — pre-JS every item keeps its own card
   look below and no lens ever appears; `.has-lens` (JS-added to the list)
   switches both at once. `z-index: -1` inside the list's own stacking
   context puts it behind the items. */
.oj-advantages__lens {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 28px;
  background: var(--oj-surface);
  box-shadow: 0 30px 60px -44px rgba(28, 44, 90, 0.45);
}

.oj-advantages__list.has-lens .oj-advantages__lens {
  display: block;
}

.oj-advantages__list.has-lens .oj-advantages__item:not(.is-closed) {
  background: transparent;
  box-shadow: none;
}

.oj-advantages__item {
  border-radius: 28px;
}

/* The third column is never a grid item (the window below is positioned
   out of flow) — it exists only to cap the text column's width at exactly
   the mockup's, so a long title can never grow wide enough to run under the
   window. */
/* `min-height`: the window is positioned out of grid flow (below), so a
   short title+description no longer forces the card tall enough to hold it
   — pin the card to at least padding + the window's own height, matching
   the mockup's card height exactly (it gets there by making the window a
   normal, if oversized, grid item instead; same end result). */
.oj-advantages__item:not(.is-closed) {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr 480px;
  align-items: start;
  align-content: start;
  column-gap: 8px;
  row-gap: 16px;
  margin: 6px 0;
  padding: 24px 24px 24px 28px;
  min-height: 268px;
  background: var(--oj-surface);
  box-shadow: 0 30px 60px -44px rgba(28, 44, 90, 0.45);
}

/* The row/panel wrappers exist for the closed layout and the collapse
   animation (below); once an item is open they get out of the way
   (`display: contents`) so num/title/desc/window become direct grid items
   of the item itself — the layout the mockup's own open card uses. */
.oj-advantages__item:not(.is-closed) .oj-advantages__row,
.oj-advantages__item:not(.is-closed) .oj-advantages__panelOuter,
.oj-advantages__item:not(.is-closed) .oj-advantages__panelInner,
.oj-advantages__item:not(.is-closed) .oj-advantages__panelBody {
  display: contents;
}

/* Closed row: `96px 1fr 32px`, gap 8 — the same number column and gap the
   open card above uses, so opening another item never moves this text.
   `position: relative`: the toggle's `::after` below stretches over the
   whole row (number, title, "+") so the entire row is the click target, as
   in the mockup — harmless when the row is `display: contents` (open). */
.oj-advantages__row {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 96px 1fr 32px;
  align-items: center;
  column-gap: 8px;
  padding: 24px 28px;
}

/* Owner's decision: lines only between items — none above the first or
   below the last. */
.oj-advantages__item + .oj-advantages__item.is-closed .oj-advantages__row {
  border-top: 1px solid var(--oj-border);
}

/* Owner's decision (not the mockup's): no line above an open card (already
   true — an open row carries no border-top of its own) and none below it
   either — the closed row right after an open one skips its border-top too. */
.oj-advantages__item:not(.is-closed) + .oj-advantages__item.is-closed .oj-advantages__row {
  border-top: none;
}

.oj-advantages__num {
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--oj-slate-300);
}

.oj-advantages__item:not(.is-closed) .oj-advantages__num {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  padding-top: 2px;
  color: var(--oj-cyan);
}

.oj-advantages__heading {
  margin: 0;
  /* lets the button inside act as this row's own grid item (a11y: the
     heading tag stays, but it never intercepts layout) */
  display: contents;
}

.oj-advantages__toggle {
  box-sizing: border-box;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--oj-navy);
}

/* Owner's decision: the whole closed row is the click target, not just the
   title text — a transparent overlay stretched to the row's own bounds
   (`position: relative` above), the same trick as a "stretched link". */
.oj-advantages__item.is-closed .oj-advantages__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.oj-advantages__item:not(.is-closed) .oj-advantages__toggle {
  grid-column: 2;
  grid-row: 1;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.oj-advantages__plus {
  font-family: var(--oj-font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--oj-blue);
}

.oj-advantages__item:not(.is-closed) .oj-advantages__plus {
  display: none;
}

/* The collapse: `grid-template-rows` 0fr <-> 1fr (layout spec §5 allows
   either an animated or an instant switch) — no JS means no `.is-closed`,
   so this rule never fires pre-JS and every panel stays at its natural
   (`1fr`) height. Only meaningful for a closed item now — an open one turns
   this wrapper transparent above. No `transition` of its own any more: the
   sliding-lens view transition (below) covers the smooth case, and without
   it the switch is meant to be instant, not a leftover 240ms fade. */
.oj-advantages__panelOuter {
  display: grid;
  grid-template-rows: 1fr;
}

.oj-advantages__item.is-closed .oj-advantages__panelOuter {
  grid-template-rows: 0fr;
}

.oj-advantages__panelInner {
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  column-gap: 8px;
  /* no vertical padding here: a `0fr` row cannot shrink below its item's own
     padding, so the bottom space lives on the body instead */
  min-height: 0;
  padding: 0 28px;
}

/* The number column stays empty here — column 1 exists only so this text
   lines up under the row's own num/heading columns above, for the closed
   collapse. */
.oj-advantages__panelBody {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 40px;
  padding-bottom: 28px;
}

.oj-advantages__desc {
  margin: 0;
  max-width: 520px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--oj-text);
  flex: 1 1 320px;
}

.oj-advantages__item:not(.is-closed) .oj-advantages__desc {
  grid-column: 2;
  grid-row: 2;
}

/* Fixed-size animation window (contract 5, ../../../AGENTS.md: no CLS) —
   width fluid between breakpoints, but always a concrete box, never
   auto-sized to content. `aspect-ratio` gives the 1440 2:1 shape; 1024
   breaks that ratio on purpose (the mockup's own 300x200), so it is
   overridden explicitly below rather than derived. Positioned (contract:
   the open card's redesign) at the card's own top-right corner — `top`/
   `right` match the card's own padding exactly, so it sits at the top,
   beside the title, spanning the height, independent of how wide the text
   column happens to be. `position: relative` stays the base value (the
   scene inside centres on it) — the open-card rule below switches it to
   `absolute` without losing that. */
.oj-advantages__window {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: clamp(260px, 33vw, 440px);
  aspect-ratio: 2 / 1;
  border-radius: 22px;
  background: var(--oj-surface-2);
  overflow: hidden;
  --oj-scene-scale: 0.65;
}

.oj-advantages__item:not(.is-closed) .oj-advantages__window {
  position: absolute;
  top: 24px;
  right: 24px;
}

.oj-advantages__sceneWrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 340px;
  margin: -170px 0 0 -250px;
  transform: scale(var(--oj-scene-scale));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loops run only while their item is open and in the viewport
   (`client/advantages.ts`, layout spec §5 rule 4). Paused only on the
   script's explicit `data-running="false"`, never by the attribute's
   absence: without JavaScript nothing sets it, and a scene frozen on its
   first keyframe would be an empty box (§5 rule 2 — content visible
   without JS; audit 2026-09-30). `.oj-a`'s own
   `prefers-reduced-motion` kill switch (tokens.css) wins regardless.
   `!important`: each scene element carries its own `animation` in an inline
   `style` (React — durations/delays come from data,
   `HomeAdvantagesScene.tsx`), which always outranks a selector rule
   regardless of specificity — same reason `tokens.css`'s reduced-motion
   override uses it. */
.oj-advantages__window[data-running="false"] .oj-a {
  animation-play-state: paused !important;
}

/* The mobile shared window's own copy of the same gate — a separate class,
   a separate pause rule (`client/advantages.ts` drives `data-running` on
   this container the same way it drives it on a per-item window). */
.oj-advantages__mobileWindow[data-running="false"] .oj-a {
  animation-play-state: paused !important;
}

.oj-advantages__mobileScene {
  display: none;
}

/* No-JS start state (layout spec §5 rule 2, task brief item 3): the scene
   matching the initially open accordion item is visible by default — not
   set by a script, so a visitor with JavaScript off never sees an empty
   250px box. `client/advantages.ts` removes `data-default-open` once it
   runs, so `.is-active` alone decides visibility from then on and this rule
   never fights a later switch. */
.oj-advantages__mobileScene[data-default-open="true"],
.oj-advantages__mobileScene.is-active {
  display: block;
}

/* The sliding-lens same-document view transition (`client/advantages.ts`
   adds/removes `oj-vt-advantages` on `<html>` around the switch, only when
   motion is allowed and the API exists) — scoped to that class so it never
   touches the page-to-page transition (`../../styles/base.css`) or leaves
   rules active once the switch settles. `oj-adv-lens` and each item's own
   `oj-adv-item-N` (inline style, `HomeAdvantages.tsx`) share the same
   360ms/easing as the header's own sliding mark (`../Header/Header.css`) —
   the items between the old and new open one carry the same name-based
   groups, so the browser slides them instead of jumping. */

/* Defensive: the UA stylesheet's overlay (`::view-transition`, fixed and
   full-viewport) is not `pointer-events: none` by default. A click while a
   switch is still animating is a rare, sub-360ms window (a real click on
   another item lands well after) — this at least does not make it worse in
   an engine that already lets clicks reach the live page during one. */
html.oj-vt-advantages::view-transition {
  pointer-events: none;
}

/* While the switch animates, the browser hit-tests the whole page as the
   root element: a quick second tap (a double tap on a phone) landed on
   `<html>` and selected the nearest word of the page. No selection starts
   during those 360ms. */
html.oj-vt-advantages {
  -webkit-user-select: none;
  user-select: none;
}

/* Names exist only while a switch runs, so a page-to-page transition
   (`../../styles/base.css`) never captures the accordion piece by piece. */
html.oj-vt-advantages .oj-advantages__lens {
  view-transition-name: oj-adv-lens;
}

html.oj-vt-advantages .oj-advantages__item[data-index="0"] {
  view-transition-name: oj-adv-item-1;
}

html.oj-vt-advantages .oj-advantages__item[data-index="1"] {
  view-transition-name: oj-adv-item-2;
}

html.oj-vt-advantages .oj-advantages__item[data-index="2"] {
  view-transition-name: oj-adv-item-3;
}

html.oj-vt-advantages .oj-advantages__item[data-index="3"] {
  view-transition-name: oj-adv-item-4;
}

html.oj-vt-advantages .oj-advantages__item[data-index="4"] {
  view-transition-name: oj-adv-item-5;
}

html.oj-vt-advantages .oj-advantages__item[data-index="5"] {
  view-transition-name: oj-adv-item-6;
}

html.oj-vt-advantages .oj-advantages__item[data-index="6"] {
  view-transition-name: oj-adv-item-7;
}

html.oj-vt-advantages::view-transition-group(*) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Clip, don't stretch: a closed row and an open card have very different
   aspect ratios, and the browser's default "scale the snapshot to fit"
   morph would visibly distort the text while the box grows or shrinks. */
html.oj-vt-advantages::view-transition-old(*),
html.oj-vt-advantages::view-transition-new(*) {
  height: 100%;
  object-fit: none;
  object-position: top;
}

/* The closing and the opening item (`is-switching`, set by
   `client/advantages.ts`) lose their old look fast, so an item's big and
   small titles never sit on top of each other for the whole glide. Only
   those two: an unchanged item cross-fades with itself at equal speed and
   stays solid, where unequal fades would dim it. */
html.oj-vt-advantages .oj-advantages__item.is-switching {
  view-transition-class: oj-adv-switching;
}

html.oj-vt-advantages::view-transition-old(*.oj-adv-switching) {
  animation-duration: 140ms;
}

/* Keep it local to the accordion: the root snapshot's rect never actually
   changes (same viewport before and after), but by default it still
   cross-fades old-for-new across the *whole page* — switched off, and reset
   out of the clip-not-stretch rule above (it does not need it: nothing
   about the root's own box is animating). */
html.oj-vt-advantages::view-transition-old(root),
html.oj-vt-advantages::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  height: auto;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1279px) {
  .oj-advantages__inner {
    padding: 96px var(--oj-page-pad-desktop) 48px;
    gap: 44px;
  }

  .oj-advantages__inner h2 {
    font-size: 48px;
  }

  .oj-advantages__item:not(.is-closed) {
    grid-template-columns: 96px 1fr 324px;
    row-gap: 14px;
    padding: 28px;
    min-height: 256px;
  }

  .oj-advantages__item:not(.is-closed) .oj-advantages__num {
    padding-top: 0;
  }

  .oj-advantages__item:not(.is-closed) .oj-advantages__toggle {
    font-size: 34px;
  }

  .oj-advantages__item.is-closed .oj-advantages__toggle {
    font-size: 24px;
  }

  .oj-advantages__desc {
    max-width: 420px;
    font-size: 19px;
  }

  .oj-advantages__panelBody {
    gap: 14px 24px;
  }

  .oj-advantages__window {
    width: 300px;
    height: 200px;
    aspect-ratio: auto;
    --oj-scene-scale: 0.58;
  }

  .oj-advantages__item:not(.is-closed) .oj-advantages__window {
    top: 28px;
    right: 28px;
  }
}

@media (max-width: 767px) {
  .oj-advantages__inner {
    padding: 72px 20px 36px;
    gap: 28px;
  }

  .oj-advantages__inner h2 {
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  /* The shared window above the list (B2C-BizMobile) stays hidden (owner's
     call, 09.11): it sat out of sight once a lower item was opened. Each
     open card shows its own scene under its text instead, below. */

  .oj-advantages__row {
    grid-template-columns: 44px 1fr 24px;
    padding: 18px 16px;
  }

  .oj-advantages__item:not(.is-closed) {
    grid-template-columns: 44px 1fr 24px;
    row-gap: 10px;
    border-radius: 22px;
    padding: 20px 16px 22px;
    /* the scene sits under the text here, not beside it: the card's height
       is its content's */
    min-height: 0;
  }

  .oj-advantages__lens {
    border-radius: 22px;
  }

  .oj-advantages__num {
    font-size: 24px;
  }

  .oj-advantages__item:not(.is-closed) .oj-advantages__num {
    padding-top: 1px;
  }

  /* 19px open and closed (B2C-BizMobile): the tablet's closed 24px rule
     above outranks a plain `.oj-advantages__toggle`, so this one matches it */
  .oj-advantages__toggle,
  .oj-advantages__item.is-closed .oj-advantages__toggle {
    font-size: 19px;
  }

  /* the open title keeps the closed size on mobile (HomeMobile.dc.html: 19px),
     and needs the open rule's own specificity to say so */
  .oj-advantages__item:not(.is-closed) .oj-advantages__toggle {
    font-size: 19px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .oj-advantages__plus {
    font-size: 24px;
  }

  .oj-advantages__panelInner {
    grid-template-columns: 44px 1fr;
    padding: 0 16px;
  }

  /* in a column the desktop flex-basis (320px) would become a height */
  .oj-advantages__desc {
    flex: none;
    font-size: 17px;
  }

  .oj-advantages__item:not(.is-closed) .oj-advantages__desc {
    max-width: 560px;
    line-height: 1.5;
    color: var(--oj-text-2);
  }

  .oj-advantages__panelBody {
    flex-direction: column;
    padding-bottom: 20px;
  }

  /* The open card's own scene, under its text and as wide as it, its loops
     run while it is on screen (`client/advantages.ts`, as on wider screens). */
  .oj-advantages__window,
  .oj-advantages__item:not(.is-closed) .oj-advantages__window {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 180px;
    aspect-ratio: auto;
    border-radius: 18px;
    /* the widest scene (01, 480px) fits a 360px screen's card at 0.47 */
    --oj-scene-scale: 0.47;
  }

  /* an open card is one grid (its panel wrappers are `display: contents`):
     the scene takes the text's column and the "+" one beside it */
  .oj-advantages__item:not(.is-closed) .oj-advantages__window {
    grid-column: 2 / -1;
  }
}

/* below 360 the card's column is narrower still */
@media (max-width: 359px) {
  .oj-advantages__window,
  .oj-advantages__item:not(.is-closed) .oj-advantages__window {
    --oj-scene-scale: 0.4;
  }
}


/* src/components/home/HomeAdvantagesScene.css */
/* The seven advantages scenes (`HomeAdvantagesScene.tsx`), keyframes copied
   verbatim from `Home2.dc.html`'s own `<style>` (timings are the source of
   truth, layout spec §5 rule "не на глаз"). Every animated element also
   carries the sitewide `.oj-a` class, so `prefers-reduced-motion: reduce`
   (tokens.css) already freezes all of them at their resting, non-animated
   position — which is why none of these need a separate "reduced" branch. */
@keyframes oj-draw {
  from {
    stroke-dashoffset: 900;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes oj-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes oj-a5 {
  0%,
  8% {
    height: var(--h);
  }
  20% {
    height: var(--h2);
  }
  34% {
    height: var(--h);
  }
  50% {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    background: var(--oj-amber);
  }
  60%,
  90% {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    background: var(--oj-cyan);
  }
  100% {
    height: var(--h);
  }
}

@keyframes oj-fillx {
  0% {
    transform: scaleX(0);
  }
  75%,
  92% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes oj-pop2 {
  0%,
  30% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  40%,
  88% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: none;
  }
}

@keyframes oj-sum {
  0% {
    transform: scaleX(0);
    background: var(--oj-amber);
  }
  55% {
    transform: scaleX(1.06);
    background: var(--oj-amber);
  }
  100% {
    transform: scaleX(1);
    background: var(--oj-cyan);
  }
}

@keyframes oj-absorb {
  0% {
    transform: translate(var(--x), var(--y)) scale(0.5);
    opacity: 0;
  }
  7%,
  38% {
    transform: translate(var(--x), var(--y)) scale(1);
    opacity: 1;
  }
  52% {
    transform: translate(0, 0) scale(0.3);
    opacity: 1;
  }
  56%,
  100% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
}

@keyframes oj-gulp {
  0%,
  100% {
    transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(45deg) scale(1.06);
  }
}

.oj-scene {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* v0 — "connects to everything": five category chips (`Home2.dc.html`
   deliberately leaves out "Связь"/Communication, see ../../../AGENTS.md
   task notes). */
.oj-scene-v0__tags {
  width: 460px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.oj-scene-v0__tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border-3);
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
  animation: oj-in 0.4s ease-out var(--oj-scene-delay, 0s) backwards;
}

/* v1 — "learns any skill": an idle equalizer. */
.oj-scene--v1 {
  gap: 10px;
  height: 70px;
}

.oj-scene-v1__bar {
  display: block;
  width: 8px;
  height: var(--h);
  border-radius: 4px;
  background: var(--oj-navy);
  animation: oj-a5 5s ease-in-out infinite;
}

/* v2 — "several tasks in one message": a chat bubble + three filling rows. */
.oj-scene--v2 {
  width: 380px;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.oj-scene-v2__bubble {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 18px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
}

.oj-scene-v2__bubbleLine {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.75);
}

.oj-scene-v2__bubbleLine--w1 {
  width: 150px;
}

.oj-scene-v2__bubbleLine--w2 {
  width: 120px;
}

.oj-scene-v2__bubbleLine--w3 {
  width: 136px;
}

.oj-scene-v2__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 12px;
}

.oj-scene-v2__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--oj-navy);
}

.oj-scene-v2__track {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--oj-cell);
  overflow: hidden;
}

.oj-scene-v2__fill {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--oj-cyan);
  transform-origin: left center;
  animation: oj-fillx var(--oj-scene-duration, 3.2s) ease-out infinite;
}

/* v4 — "the result is a ready file": PDF/XLSX cards + an arrow. */
.oj-scene--v4 {
  align-items: flex-end;
  gap: 16px;
}

.oj-scene-v4__doc {
  box-sizing: border-box;
  width: 150px;
  padding: 18px;
  border-radius: 20px;
  background: var(--oj-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: oj-in 0.5s ease-out backwards;
}

.oj-scene-v4__badge {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--oj-surface);
}

.oj-scene-v4__badge--pdf {
  background: var(--oj-blue);
}

.oj-scene-v4__badge--xlsx {
  background: var(--oj-navy);
}

.oj-scene-v4__line {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--oj-border-2);
}

.oj-scene-v4__arrow {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--oj-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: oj-in 0.5s ease-out backwards;
}

/* v5 — "crunches big data itself": a table settling into a total. */
.oj-scene--v5 {
  box-sizing: border-box;
  width: 380px;
  padding: 18px 24px 20px;
  flex-direction: column;
  align-items: stretch;
}

.oj-scene-v5__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  border-bottom: 1px solid var(--oj-surface-3);
  animation: oj-in 0.35s ease-out backwards;
}

.oj-scene-v5__cell {
  display: block;
  height: 8px;
  border-radius: 4px;
}

.oj-scene-v5__cell--label {
  background: var(--oj-border-2);
}

.oj-scene-v5__cell--value {
  background: var(--oj-slate-200);
}

.oj-scene-v5__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  animation: oj-in 0.45s ease-out backwards;
}

.oj-scene-v5__sigma {
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: var(--oj-navy);
}

.oj-scene-v5__sumBar {
  display: block;
  width: 120px;
  height: 16px;
  border-radius: 8px;
  background: var(--oj-cyan);
  transform-origin: right center;
  animation: oj-sum 1.1s cubic-bezier(0.3, 1.3, 0.5, 1) 1s backwards;
}

/* v6 — "one service instead of many agents": icons absorbed into the
   diamond. */
.oj-scene--v6 {
  position: relative;
  width: 480px;
  height: 300px;
}

.oj-scene-v6__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  box-sizing: border-box;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: translate(var(--x), var(--y));
  animation: oj-absorb 6.3s ease-in-out infinite backwards;
  animation-delay: var(--oj-scene-delay, 0s);
}

.oj-scene-v6__icon--bars {
  background: var(--oj-navy);
}

.oj-scene-v6__icon--lines,
.oj-scene-v6__icon--list {
  background: var(--oj-surface);
}

.oj-scene-v6__icon--grid3 {
  background: var(--oj-cyan);
}

.oj-scene-v6__icon--ring {
  background: var(--oj-blue);
}

.oj-scene-v6__icon--grid2 {
  background: var(--oj-cyan);
}

.oj-scene-v6__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
}

.oj-scene-v6__bars span {
  display: block;
  width: 5px;
  border-radius: 3px;
  background: var(--oj-surface);
}

.oj-scene-v6__bars span:nth-child(1) {
  height: 12px;
}

.oj-scene-v6__bars span:nth-child(2) {
  height: 22px;
}

.oj-scene-v6__bars span:nth-child(3) {
  height: 30px;
}

.oj-scene-v6__bars span:nth-child(4) {
  height: 18px;
}

.oj-scene-v6__lines {
  width: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oj-scene-v6__lines span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--oj-slate-200);
}

.oj-scene-v6__icon--lines .oj-scene-v6__lines span:first-child {
  width: 70%;
  background: var(--oj-navy);
}

.oj-scene-v6__icon--list .oj-scene-v6__lines span {
  height: 6px;
  background: var(--oj-cell);
  position: relative;
  overflow: hidden;
}

.oj-scene-v6__grid {
  display: grid;
  gap: 5px;
}

.oj-scene-v6__grid--3 {
  grid-template-columns: repeat(3, 8px);
}

.oj-scene-v6__grid--3 span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--oj-surface);
}

.oj-scene-v6__grid--2 {
  grid-template-columns: repeat(2, 15px);
}

.oj-scene-v6__grid--2 span {
  display: block;
  width: 15px;
  height: 11px;
  border-radius: 3px;
  background: var(--oj-surface);
}

.oj-scene-v6__ring {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(var(--oj-surface) 0 68%, rgba(255, 255, 255, 0.35) 68% 100%);
}

.oj-scene-v6__diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 28px;
  background: var(--oj-amber);
  transform: rotate(45deg);
  box-shadow: 0 24px 40px -28px rgba(28, 44, 90, 0.55);
  z-index: 2;
  animation: oj-gulp 0.7s ease-in-out infinite;
}

/* v7 — "runs tasks on a schedule" (November edits, B2C-Biz `advV7`): a white
   card of three 52px schedule rows and a caption, in the same grey window as
   v5. Rows come in at 0 / 0.2 / 0.4 s, the caption at 0.7 s (`oj-in`); the
   sitewide `.oj-a` rule turns it off under reduced motion. */
.oj-scene--v7 {
  box-sizing: border-box;
  width: 380px;
  max-width: 100%;
  padding: 12px 24px 18px;
  border-radius: 22px;
  background: var(--oj-surface);
  flex-direction: column;
  align-items: stretch;
}

.oj-scene-v7__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 52px;
  border-bottom: 1px solid var(--oj-surface-3);
  animation: oj-in 0.35s ease-out var(--oj-scene-delay, 0s) backwards;
}

.oj-scene-v7__what {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.oj-scene-v7__clock {
  display: block;
  flex: none;
  fill: none;
  stroke: var(--oj-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oj-scene-v7__bar {
  display: block;
  max-width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--oj-border-2);
}

.oj-scene-v7__tag {
  flex: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--oj-surface-2);
  font-family: var(--oj-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--oj-navy);
}

.oj-scene-v7__tag--next {
  background: var(--oj-cyan);
  color: var(--oj-ink);
}

.oj-scene-v7__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--oj-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--oj-blue);
  animation: oj-in 0.45s ease-out var(--oj-scene-delay, 0s) backwards;
}

.oj-scene-v7__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--oj-cyan);
}


/* src/components/home/HomeChannels.css */
/* B2C-Biz/Biz1024/BizMobile "Каналы": a full-bleed white band
   (HomeSecurity.css's shape — the security block right after it is white
   too, and takes only a short top padding of its own) with a capped inner
   column. The heading always breaks after "работы с ИИ," and wraps only
   between its four phrases, never inside one: two lines where they fit
   (the 1440 and 1024 artboards), the phone artboard's four on a phone. */
.oj-channels {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--oj-surface);
  box-sizing: border-box;
  padding: 120px 0;
}

.oj-channels__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.oj-channels__heading {
  margin: 0;
  max-width: 980px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-channels__headingLine {
  display: block;
}

.oj-channels__headingPart {
  white-space: nowrap;
}

.oj-channels__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--oj-border);
}

.oj-channels__row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--oj-border);
}

.oj-channels__tile {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  color: var(--oj-blue);
}

.oj-channels__icon {
  display: block;
  width: 30px;
  height: 30px;
}

.oj-channels__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oj-channels__head {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.oj-channels__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-channels__tag {
  flex: none;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--oj-bg);
  font-size: 14px;
  font-weight: 700;
  color: var(--oj-blue);
  white-space: nowrap;
}

/* One wrapping line of names on a wide screen: the two groups dissolve into
   it, a 6px cyan square before every name but the first. */
.oj-channels__systems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.oj-channels__systemGroup {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oj-channels__system {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-channels__system::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--oj-cyan);
}

.oj-channels__systemGroup:first-child .oj-channels__system:first-child::before {
  display: none;
}

.oj-channels__note {
  margin: -24px 0 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-channels__rhombus {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2.4px;
  background: var(--oj-amber);
  transform: rotate(45deg) translateY(-2px);
}

@media (max-width: 1279px) {
  .oj-channels {
    padding: 96px 0;
  }

  .oj-channels__inner {
    gap: 48px;
  }

  .oj-channels__heading {
    max-width: 860px;
  }

  .oj-channels__note {
    margin-top: -16px;
  }
}

@media (max-width: 1023px) {
  .oj-channels__inner {
    padding: 0 40px;
  }
}

@media (max-width: 767px) {
  .oj-channels {
    padding: 72px 0;
  }

  .oj-channels__inner {
    padding: 0 20px;
    gap: 32px;
  }

  .oj-channels__heading {
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.04em;
  }

  .oj-channels__row {
    gap: 14px;
    padding: 20px 0;
  }

  .oj-channels__tile {
    width: 28px;
    height: 28px;
  }

  .oj-channels__icon {
    width: 26px;
    height: 26px;
  }

  .oj-channels__body {
    gap: 12px;
    padding-top: 2px;
  }

  .oj-channels__head {
    min-height: 0;
    align-items: flex-start;
    gap: 12px;
  }

  .oj-channels__title {
    font-size: 20px;
    line-height: 1.2;
  }

  .oj-channels__tag {
    margin-top: 3px;
    height: 26px;
    padding: 0 10px;
    font-size: 13px;
  }

  /* a line per group: the names keep the artboard's three-and-three */
  .oj-channels__systems {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* a group of three may still break on the narrowest phones (320) */
  .oj-channels__systemGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  .oj-channels__system {
    gap: 10px;
    font-size: 16px;
  }

  .oj-channels__systemGroup .oj-channels__system:first-child::before {
    display: none;
  }

  .oj-channels__note {
    margin-top: -8px;
    gap: 12px;
    font-size: 20px;
  }
}


/* src/components/home/HomeDifferent.css */
/* Layout spec §4/§3: full-bleed background (same shade as the page here, but
   the shape matches ../DemoBlock/DemoBlock.css and HomeSecurity.css right
   after it, whose white does need to reach the edges) + a capped inner
   column. Padding is the mockup's own literal value at each width
   (`Home2.dc.html` 120/60/120, `Home1024.dc.html` 96/60, `HomeMobile.dc.html`
   72/20) — not the general "96/120" the layout spec's prose gives for this
   block, which the pixels don't match (spec §1: the artboard wins). */
.oj-different {
  --oj-different-pad: 60px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--oj-bg);
  box-sizing: border-box;
  padding: 120px 0;
}

.oj-different__lines,
.oj-different__heading,
.oj-different__card {
  box-sizing: content-box;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}

.oj-different__lines {
  display: flex;
  flex-direction: column;
}

.oj-different__line {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--oj-slate-500);
}

.oj-different__heading {
  /* vertical only: the side margins are the shared `auto` above, which a bare
     `margin: 0` here used to cancel — the heading then sat at the viewport's
     left edge above 1440 while the lines and the card stayed centred */
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-different__underline {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--oj-cyan);
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
}

.oj-different__underline:hover {
  text-decoration-color: var(--oj-navy);
}

.oj-different__card {
  margin-top: 56px;
  box-sizing: border-box;
  /* the card's own padding (below) replaces the column's side padding, so its
     width is the column's, spelled out: the viewport less the page's side
     padding, capped at 1320 — otherwise below 1320 it ran edge to edge */
  width: min(1320px, calc(100% - 2 * var(--oj-different-pad)));
  padding: 32px 32px 32px 44px;
  border-radius: 28px;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border-3);
  box-shadow: 0 40px 80px -48px rgba(28, 44, 90, 0.45);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  transition: box-shadow 150ms;
}

.oj-different__card:hover {
  box-shadow: 0 44px 90px -40px rgba(28, 44, 90, 0.55);
}

.oj-different__cardText {
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--oj-navy);
}

.oj-different__cardCta {
  flex: none;
  height: var(--oj-btn-h);
}

@media (max-width: 1279px) {
  .oj-different {
    padding: 96px 0;
  }

  .oj-different__lines,
  .oj-different__heading,
  .oj-different__card {
    padding-left: 60px;
    padding-right: 60px;
  }

  .oj-different__line,
  .oj-different__heading {
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  .oj-different__underline {
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
  }

  .oj-different__card {
    margin-top: 48px;
    padding: 28px 28px 28px 36px;
  }

  .oj-different__cardText {
    font-size: 26px;
  }
}

@media (max-width: 1023px) {
  .oj-different {
    --oj-different-pad: 40px;
  }
  .oj-different__lines,
  .oj-different__heading {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .oj-different {
    --oj-different-pad: 20px;
    padding: 72px 0;
  }

  .oj-different__lines,
  .oj-different__heading,
  .oj-different__card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .oj-different__line,
  .oj-different__heading {
    letter-spacing: -0.04em;
  }

  /* `HomeMobile.dc.html`: the grey lines and the heading are *not* quite the
     same size here, unlike 1440/1024 — the layout spec's own "26–28" range
     for this breakpoint is both values, not an approximation. */
  .oj-different__line {
    font-size: 26px;
    line-height: 1.18;
  }

  .oj-different__heading {
    font-size: 28px;
    line-height: 1.06;
  }

  .oj-different__underline {
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }

  .oj-different__card {
    margin-top: 32px;
    padding: 24px 20px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .oj-different__cardText {
    font-size: 22px;
  }

  .oj-different__cardCta {
    width: 100%;
  }
}

/* Below 360 "ещё один ИИ-инструмент" is wider than the line, and kept whole
   it pushed the page sideways (no horizontal scroll from 320, layout spec
   §4); there it may break, its underline running on to the second line. */
@media (max-width: 359px) {
  .oj-different__underline {
    white-space: normal;
  }
}


/* src/components/home/HomeHero.css */
/* Layout spec §4/§6, `Home2.dc.html`/`Home1024.dc.html`/`HomeMobile.dc.html`.
   `.oj-hero` is its own container (content-box + max-width, see
   ../../styles/base.css's comment on why sections own this shape now that
   `<main>` carries no padding) — position: relative so the desktop tile
   ladder can sit at the same inset as the section's own padding. */
.oj-hero {
  position: relative;
  box-sizing: content-box;
  /* An explicit width, not `auto`: `.oj-hero` is a flex item of `main`
     (column direction) with `margin: 0 auto` for centering past 1320 —
     but per the flexbox spec, an item with an auto cross-axis margin never
     stretches to the container's size, `width: auto` falls back to
     shrink-to-fit instead, and shrink-to-fit's min-content floor is set by
     non-wrapping content deep inside (the tile ladder's mobile row, the
     example-chip strip, item 3) regardless of their own `overflow`. Giving
     `width` a definite value here (available space minus this rule's own
     side padding, capped by `max-width`) sidesteps shrink-to-fit entirely,
     so those strips stay inside their own `overflow-x: auto`/`hidden`
     instead of widening the whole page. Kept in sync with the padding
     this rule and its breakpoints declare below. */
  width: calc(100% - 120px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 60px 112px;
  display: flex;
  flex-direction: column;
}

/* B2C-Biz: above the tagline, in the top padding's band on desktop and
   tablet; in the flow, above the tile row, on a phone */
.oj-hero__badge {
  position: absolute;
  top: 20px;
  left: 60px;
  z-index: 2;
  margin: 0;
  box-sizing: border-box;
  height: 40px;
  padding: 0 16px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--oj-surface);
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-hero__badgeIcon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.oj-hero__tagline {
  position: relative;
  margin: 0;
  max-width: 780px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: var(--oj-navy);
}

.oj-hero__tagline-brand {
  font-size: 96px;
}

.oj-hero__taglineLine {
  display: block;
}

/* The real H1 (SEO spec 2.1, DECISIONS.md #6): same spot and size as the
   mockup's own lede paragraph — a heading tag, not a heading-sized font. */
.oj-hero__h1 {
  position: relative;
  margin: 44px 0 0;
  max-width: 540px;
  font-family: var(--oj-font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: var(--oj-text);
}

.oj-hero__ctaRow {
  position: relative;
  margin-top: 36px;
}

.oj-hero__cta {
  height: var(--oj-btn-h);
}

.oj-hero__demo {
  position: relative;
  margin-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.oj-hero__examples {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.oj-hero__examplesTitle {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--oj-navy);
}

/* Three equal columns as flex, not grid: WebKit (Safari) does not recompute
   a grid row's height when the window is resized, so a chip kept its old
   height and its text spilled out; flex tracks the width both ways. */
.oj-hero__chips {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

/* Layout spec §5: a chip's own state carries no goal-worthy animation, so
   `data-goal`/`data-goal-scenario` (contract 6, ../../../AGENTS.md) sit
   right on the button — the delegated listener in
   ../../client/analytics.ts fires `hero_example_click` on a real click only,
   never on the automatic scenario loop (task brief, metrika spec §6 item 8). */
.oj-hero-chip {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  min-height: 72px;
  padding: 16px 20px;
  border-radius: 18px;
  text-align: left;
  font-family: var(--oj-font-body);
  font-size: 17px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  border: 2px solid var(--oj-border);
  background: var(--oj-surface);
  color: var(--oj-text-2);
  font-weight: 600;
}

.oj-hero-chip__icon {
  flex: none;
  margin-top: 4px;
  color: var(--oj-slate-300);
}

/* No bold on the active chip (the owner's call over the mockup): the chat
   loop moves the active chip on its own every few seconds, and a bolder,
   wider label rewrapped the row and made everything below it jump. */
.oj-hero-chip[aria-pressed="true"] {
  border-color: var(--oj-cyan);
  background: var(--oj-cyan-tint);
  color: var(--oj-navy);
}

.oj-hero-chip[aria-pressed="true"] .oj-hero-chip__icon {
  color: var(--oj-cyan);
}

/* ---- the decorative tile ladder (HomeHeroTiles.tsx), aria-hidden ---- */

.oj-hero-tiles--desktop,
.oj-hero-tiles--tablet {
  position: absolute;
  /* above the text blocks, whose full-width boxes would otherwise swallow
     a click on a tile (the Easter egg); the set's own empty area lets
     clicks through, only the tiles take them */
  z-index: 1;
  pointer-events: none;
  right: var(--oj-page-pad-desktop);
  top: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.oj-hero-tiles--tablet,
.oj-hero-tiles--mobile {
  display: none;
}

/* `client/heroTiles.ts` drops a row's leftmost tiles that would come within
   40px of the text (layout spec §4). */
.oj-hero-tile.is-off {
  display: none;
}

.oj-hero-tiles__row {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  /* a row whose every tile is off keeps its height, so the rows below stay
     in the bands `client/heroTiles.ts` measured them in */
  min-height: 104px;
}

.oj-hero-tile {
  width: 104px;
  height: 104px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  overflow: hidden;
  background: var(--oj-surface-2);
}

.oj-hero-tile--cyan {
  background: var(--oj-cyan);
}

.oj-hero-tile--navy {
  background: var(--oj-navy);
}

.oj-hero-tile--blue {
  background: var(--oj-blue);
}

/* The rhombus (owner's call, as on `HomeMobile.dc.html`, over the spec's
   "no diamonds"): the tile itself turned 45° and shrunk to 74% of its cell,
   radius 22% — the phone artboard's 46px in 62. `--oj-turn` counts 45° steps;
   the Easter egg (`client/heroTiles.ts`) adds one per change, so a square
   always turns into a rhombus and back the same way round. The rhombus's
   own square colour is its tone class (navy for the one it starts with).
   The colour switches fast, so the turn never shows a muddy in-between. */
.oj-hero-tile {
  --oj-turn: 0;
  transform: rotate(calc(var(--oj-turn) * 45deg));
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    border-radius 520ms ease;
  /* no hand cursor: an Easter egg is not announced (owner's call, the one
     exception to "everything clickable shows a hand") */
  cursor: default;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}

.oj-hero-tile.is-rhombus {
  --oj-turn: 1;
  transform: rotate(calc(var(--oj-turn) * 45deg)) scale(0.74);
  border-radius: 22%;
  background: var(--oj-amber);
}

.oj-hero-tile > * {
  transition: opacity 260ms ease;
}

.oj-hero-tile.is-rhombus > * {
  opacity: 0;
}

.oj-hero-tile--white {
  background: var(--oj-surface);
}

.oj-hero-tile__lines {
  width: 62px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oj-hero-tile__line {
  display: block;
  width: 92%;
  height: 7px;
  border-radius: 4px;
  background: var(--oj-slate-200);
}

.oj-hero-tile__line--dark {
  width: 70%;
  background: var(--oj-navy);
}

.oj-hero-tile__line--short {
  width: 80%;
}

.oj-hero-tile__bar {
  display: block;
  width: 5px;
  height: var(--oj-bar-h);
  border-radius: 999px;
  background: #fff;
}

/* Below 1280 the tablet artboard's own set (2/1/3/4) replaces the desktop
   one. Without JS nothing measures the text, so each set holds a fixed
   approximation of the 40px rule for its range; `client/heroTiles.ts`
   marks the set `is-measured` and these give way to the exact count. */
@media (max-width: 1279px) {
  .oj-hero {
    padding-bottom: 96px;
  }

  .oj-hero-tiles--desktop {
    display: none;
  }

  .oj-hero-tiles--tablet {
    display: flex;
  }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(1)
    .oj-hero-tile:nth-child(1),
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(2)
    .oj-hero-tile:nth-child(1),
  .oj-hero-tiles--desktop:not(.is-measured)
    .oj-hero-tiles__row:nth-child(3)
    .oj-hero-tile:nth-child(1) {
    display: none;
  }
}

/* 1024-1279: "Команда говорит." reaches the top row's first tile */
@media (min-width: 1024px) and (max-width: 1279px) {
  .oj-hero-tiles--tablet:not(.is-measured)
    .oj-hero-tiles__row:nth-child(1)
    .oj-hero-tile:nth-child(1) {
    display: none;
  }
}

/* 768-1023: the fewest tiles the measured ladder keeps anywhere in the range */
@media (max-width: 1023px) {
  .oj-hero-tiles--tablet:not(.is-measured) .oj-hero-tiles__row:nth-child(-n + 3) .oj-hero-tile,
  .oj-hero-tiles--tablet:not(.is-measured)
    .oj-hero-tiles__row:nth-child(4)
    .oj-hero-tile:nth-child(-n + 3) {
    display: none;
  }
}

@media (max-width: 1023px) {
  .oj-hero {
    padding-left: 40px;
    padding-right: 40px;
    width: calc(100% - 80px);
  }

  .oj-hero__badge {
    left: 40px;
  }

  /* Below the 1024 artboard three columns only squeeze the chips into five-
     and six-line boxes; they become the mobile scheme's swipeable strip
     instead, a chip's width following the viewport smoothly (no step at
     any breakpoint), every chip the same height. */
  .oj-hero__chips {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 -40px;
    padding: 2px 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 40px;
  }

  .oj-hero-chip {
    width: auto;
    flex: 0 0 clamp(260px, 34vw, 300px);
    min-height: 44px;
    padding: 10px 16px;
    font-size: 16px;
    scroll-snap-align: start;
  }
}

@media (max-width: 767px) {
  .oj-hero {
    padding: 24px 20px 56px;
    width: calc(100% - 40px);
  }

  .oj-hero-tiles--tablet {
    display: none;
  }

  .oj-hero__badge {
    position: static;
    align-self: flex-start;
    margin-bottom: 16px;
    height: 36px;
    padding: 0 14px 0 11px;
    font-size: 14px;
  }

  .oj-hero__badgeIcon {
    width: 16px;
    height: 16px;
  }

  /* B2C-BizMobile: the rows stay inside the page's 20px margins and show
     only whole tiles, as many as fit — five at 390 (5 x 62 + 4 x 10 = 350,
     the content width), four at 320, ten at 767 (owner's reports, 22.10:
     the row used to run to the screen's edge and cut its last tile, then
     left an empty stretch on the right of a wider phone). */
  .oj-hero-tiles--mobile {
    position: relative;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }

  /* A tile that does not fit whole wraps to a second line, which the row
     clips: one tile's height, plus 13px above and below (taken back by the
     margin) so a tile turning for the Easter egg — 88px on the diagonal —
     is never cut. */
  .oj-hero-tiles--mobile .oj-hero-tiles__row {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px 10px;
    box-sizing: content-box;
    height: 62px;
    min-height: 0;
    margin: -13px 0;
    padding: 13px 0;
    overflow: hidden;
  }

  .oj-hero-tiles--mobile .oj-hero-tile {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    gap: 3px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile.is-rhombus {
    border-radius: 22%;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__lines {
    width: 38px;
    gap: 5px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__line {
    height: 5px;
  }

  .oj-hero-tiles--mobile .oj-hero-tile__bar {
    width: 3px;
    height: calc(var(--oj-bar-h) * 0.58);
  }

  /* B2C-BizMobile: 41px keeps "Команда говорит." on one line at 390 */
  .oj-hero__tagline,
  .oj-hero__tagline-brand {
    font-size: 41px;
  }

  .oj-hero__tagline {
    line-height: 1;
    letter-spacing: -0.045em;
  }

  .oj-hero__h1 {
    margin-top: 20px;
    max-width: none;
    font-size: 19px;
  }

  .oj-hero__ctaRow {
    margin-top: 24px;
  }

  .oj-hero__cta {
    width: 100%;
  }

  .oj-hero__demo {
    margin-top: 48px;
    gap: 14px;
  }

  .oj-hero__examplesTitle {
    font-size: 30px;
  }

  .oj-hero__chips {
    margin: 0 -20px;
    padding: 2px 20px;
    scroll-padding-left: 20px;
  }

  .oj-hero-chip {
    flex-basis: min(270px, 72vw);
  }
}

/* ---- the chat window (HomeHeroChat.tsx) ---- */

/* `overflow-anchor: none`: Chrome's scroll anchoring would otherwise pick a
   bubble as the page's anchor while the card sits at the top of the screen,
   and every time the conversation moves the bubble inside the clipped log,
   scroll the whole page after it — on a phone the page crept away by itself
   every few seconds (owner's report, 2026-09-29). The card never changes its
   own height, so nothing needs anchoring inside it. */
.oj-hero-chat {
  overflow-anchor: none;
  width: 100%;
  box-sizing: border-box;
  border-radius: 28px;
  background: var(--oj-surface);
  border: 1px solid var(--oj-border-3);
  box-shadow: 0 40px 80px -48px rgba(28, 44, 90, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.oj-hero-chat__header {
  box-sizing: border-box;
  height: 60px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--oj-surface-3);
}

.oj-hero-chat__brand {
  font-size: 17px;
}

/* `hidden` must win over every `display` a chat part sets for itself — the
   answers of the other scenarios and the idle thinking row sit in the DOM
   hidden, and a class's own `display` would otherwise put them back on
   screen, where they push the live exchange out of the fixed-height log. */
.oj-hero-chat [hidden] {
  display: none !important;
}

.oj-hero-chat__log {
  box-sizing: border-box;
  position: relative;
  height: 396px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* The FLIP target (`HomeHeroChat.tsx`'s comment, `client/heroChat.ts`): its
   own height is intrinsic (the bubbles stack top-down inside it), `.oj-hero-
   chat__log` above bottom-anchors *this one child* and clips whatever
   scrolls past its own top. `position: relative` gives the thinking row a
   containing block while it is frozen `position: absolute` mid cross-fade
   (`freezeThinking` in heroChat.ts) so it can hold its exact spot without
   counting toward this element's height. */
.oj-hero-chat__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.oj-hero-chat__bubble {
  font-size: 17px;
  line-height: 1.45;
}

/* A bubble's entrance (task brief "smooth entries"): starts faded and offset
   below its resting spot, then rises into place while `client/heroChat.ts`
   glides `.oj-hero-chat__track` by the same delta — both transitions share
   the one forced-reflow tick `flipTrack` (heroChat.ts) triggers, so they run
   in lockstep. `--active` must be a second class, not the same one changing
   value, or there is nothing to transition *from*. `prefers-reduced-motion`
   never reaches this: `wireReducedMotion` (heroChat.ts) swaps exchanges
   outright and never adds either class. */
.oj-hero-chat__bubble--enter {
  opacity: 0;
  transform: translateY(14px);
}

.oj-hero-chat__bubble--enter-active {
  transition:
    opacity 280ms ease-out,
    transform 280ms ease-out;
  opacity: 1;
  transform: translateY(0);
}

/* The thinking row's own exit (task brief "the thinking row fades while the
   answer fades/rises in"): only opacity — position/top/left/width are frozen
   inline by `freezeThinking` (heroChat.ts) at the same instant, taking it out
   of `.oj-hero-chat__track`'s flow so the row's height collapses into the
   very same glide the answer's entrance triggers, instead of a second, later
   jump. 300ms below is kept in sync with `THINKING_FADE_MS` in heroChat.ts. */
.oj-hero-chat__thinking--leaving {
  transition: opacity 300ms ease-in;
  opacity: 0;
}

.oj-hero-chat__bubble--user {
  align-self: flex-end;
  max-width: 620px;
  padding: 12px 16px;
  border-radius: 20px 20px 6px 20px;
  background: var(--oj-navy);
  color: #fff;
}

.oj-hero-chat__bubble--bot {
  align-self: flex-start;
  box-sizing: border-box;
  max-width: 720px;
  padding: 12px 16px;
  border-radius: 6px 20px 20px 20px;
  background: var(--oj-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.5;
  color: var(--oj-text);
}

.oj-hero-chat__list {
  margin: 0;
  padding: 0 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oj-hero-chat__link {
  color: var(--oj-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.oj-hero-chat__note {
  font-style: italic;
  color: var(--oj-text-2);
}

.oj-hero-chat__underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.oj-hero-chat__quote {
  position: relative;
  padding: 6px 28px 6px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--oj-blue);
  background: rgba(27, 107, 147, 0.1);
}

.oj-hero-chat__thinking {
  align-self: flex-start;
  padding: 12px 16px;
  border-radius: 6px 20px 20px 20px;
  background: var(--oj-bg);
  font-size: 17px;
  color: var(--oj-text-2);
  display: flex;
  gap: 8px;
}

.oj-hero-chat__thinking span[data-js="hero-chat-counter"] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--oj-blue);
}

/* `Home2.dc.html`'s own "thinking" pulse (layout spec §5's "первый экран"),
   copied verbatim — 1.2s ease-in-out, opacity 1 -> .35 and back. */
@keyframes oj-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.oj-hero-chat__thinkingLabel {
  animation: oj-pulse 1.2s ease-in-out infinite;
}

.oj-hero-chat__inputRow {
  box-sizing: border-box;
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oj-hero-chat__input {
  box-sizing: border-box;
  flex-grow: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  border-radius: 16px;
  background: var(--oj-bg);
  font-size: 17px;
  color: var(--oj-text);
  white-space: nowrap;
  overflow: hidden;
}

.oj-hero-chat__placeholder {
  color: var(--oj-muted);
}

/* Shows the END of the typed line once it outgrows the field, not the start
   with "…" (owner's call, 2026-09-30). `is-clipped` is set by
   `client/heroChat.ts` only while the text overflows, so a short line keeps
   its first letters unfaded. The text sits flush right in a flex box, so
   what doesn't fit spills out of the LEFT edge; the direction stays
   left-to-right — `direction: rtl` would do the same but move a trailing «,
   comma or space to the start of the line while it is the last character
   typed. The fade on the left edge is a stylesheet rule (CSP, contract 10). */
.oj-hero-chat__typed {
  overflow: hidden;
}

.oj-hero-chat__typed.is-clipped {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, #000 24px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
}

/* The typing caret (`Home2.dc.html`'s own `oj-caret`, copied verbatim) —
   `hidden` (not CSS opacity) outside the typing phase, per contract 5: the
   element simply isn't there rather than being invisibly animated. */
@keyframes oj-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.oj-hero-chat__caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--oj-text);
  animation: oj-caret 1s steps(1) infinite;
  flex: none;
}

/* Off-screen the chat's loops stop (contract 5): `client/heroChat.ts` marks
   the root `data-running="false"` while it is out of the viewport. */
[data-js="hero-chat"][data-running="false"] .oj-hero-chat__caret,
[data-js="hero-chat"][data-running="false"] .oj-hero-chat__thinkingLabel {
  animation-play-state: paused;
}

.oj-hero-chat__iconBtn {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.oj-hero-chat__iconBtn--send {
  background: var(--oj-cyan);
  color: var(--oj-ink);
}

.oj-hero-chat__iconBtn--voice {
  border: 1px solid var(--oj-border-3);
  background: var(--oj-surface);
  color: var(--oj-navy);
}

@media (max-width: 767px) {
  .oj-hero-chat__header {
    padding: 0 16px;
  }

  .oj-hero-chat__log {
    height: 500px;
    padding: 16px 14px;
  }

  .oj-hero-chat__bubble {
    font-size: 16px;
  }

  .oj-hero-chat__bubble--user {
    max-width: 90%;
  }

  .oj-hero-chat__bubble--bot {
    max-width: 94%;
  }

  .oj-hero-chat__input {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oj-hero-tile,
  .oj-hero-tile > * {
    transition: none;
  }
}


/* src/components/home/HomeHeroStats.css */
/* B2C-Biz/Biz1024/BizMobile "stats": a full-bleed band inside `.oj-hero`
   (which caps its own width), the figures in a capped inner column. The
   footnote takes `--oj-muted`, not the artboard's #6F727B: that grey on this
   band is ~4:1, under the 4.5:1 the Lighthouse accessibility target needs. */
.oj-hero-stats {
  position: relative;
  margin: 112px calc(50% - 50vw) 0;
  background: var(--oj-surface-2);
}

.oj-hero-stats__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 96px 60px 88px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.oj-hero-stats__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.oj-hero-stats__item {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 20px 0 40px;
  border-left: 1px solid #d6d3ca;
  display: flex;
  flex-direction: column;
}

.oj-hero-stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}

.oj-hero-stats__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oj-muted);
}

.oj-hero-stats__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.oj-hero-stats__mark--cyan {
  background: var(--oj-cyan);
}

.oj-hero-stats__mark--navy {
  background: var(--oj-navy);
}

.oj-hero-stats__mark--amber {
  background: var(--oj-amber);
}

.oj-hero-stats__value {
  margin-top: 20px;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 128px;
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--oj-navy);
  white-space: nowrap;
}

.oj-hero-stats__text {
  margin-top: 40px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-hero-stats__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--oj-muted);
}

@media (max-width: 1279px) {
  .oj-hero-stats__inner {
    padding: 80px 60px 72px;
    gap: 44px;
  }

  .oj-hero-stats__item {
    padding: 0 14px 0 28px;
  }

  .oj-hero-stats__label {
    font-size: 12px;
  }

  .oj-hero-stats__mark {
    width: 9px;
    height: 9px;
  }

  .oj-hero-stats__value {
    margin-top: 16px;
    font-size: 88px;
  }

  .oj-hero-stats__text {
    margin-top: 32px;
    font-size: 19px;
  }

  .oj-hero-stats__note {
    font-size: 13px;
  }
}

@media (max-width: 1023px) {
  .oj-hero-stats__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .oj-hero-stats__value {
    font-size: 72px;
  }
}

@media (max-width: 767px) {
  .oj-hero-stats {
    margin-top: 48px;
  }

  .oj-hero-stats__inner {
    padding: 56px 20px 48px;
    gap: 32px;
  }

  .oj-hero-stats__list {
    flex-direction: column;
    gap: 32px;
  }

  .oj-hero-stats__item,
  .oj-hero-stats__item:first-child {
    padding: 0;
    border-left: 0;
  }

  .oj-hero-stats__item + .oj-hero-stats__item {
    padding-top: 32px;
    border-top: 1px solid #d6d3ca;
  }

  .oj-hero-stats__mark {
    width: 10px;
    height: 10px;
  }

  .oj-hero-stats__value {
    margin-top: 14px;
    font-size: 88px;
    line-height: 0.9;
  }

  .oj-hero-stats__text {
    margin-top: 22px;
    font-size: 20px;
  }

  .oj-hero-stats__note {
    padding-top: 24px;
    border-top: 1px solid #d6d3ca;
  }
}


/* src/components/home/HomeRoles.css */
/* "What tasks you can hand over to OctoJinn" (layout spec §4/§5,
   `Home2.dc.html` / `Home1024.dc.html` / `HomeMobile.dc.html`). White
   full-bleed band, unlike `HomeAdvantages.css`'s page-background one — same
   full-bleed + inner `max-width: 1320px` shape as `../Header/Header.css`. */
.oj-roles {
  background: var(--oj-surface);
}

/* The cloud's floating background words (`HomeRolesCloud.tsx`'s
   `word.anim`, `homeRoles.json`) — keyframes copied verbatim from
   `Home2.dc.html`'s own `<style>`, one per `oj-f1`..`oj-f4` bucket. */
@keyframes oj-f1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(7px, -9px);
  }
}

@keyframes oj-f2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-8px, 6px);
  }
}

@keyframes oj-f3 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, 8px);
  }
}

@keyframes oj-f4 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-6px, -7px);
  }
}

/* The running dashes along each role line (`RoleLines`' second path) — same
   source. */
@keyframes oj-run {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -460;
  }
}

.oj-roles__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px var(--oj-page-pad-desktop);
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.oj-roles__inner h2 {
  margin: 0;
  max-width: 1000px;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

/* The roles spread across the whole column (the owner's call: left-packed,
   the shorter English names bunched up): one row of eight while it fits, two
   even rows of four below 1280 — a wrapped flex row left a ragged second
   line. Mobile (below) is the swipeable strip. */
.oj-roles__tabs {
  display: grid;
  grid-template-columns: repeat(8, auto);
  justify-content: space-between;
  gap: 8px 24px;
}

.oj-roles__tab {
  position: relative;
  box-sizing: border-box;
  min-height: 48px;
  padding: 18px 0 0;
  border: 0;
  background: transparent;
  font-family: var(--oj-font-body);
  font-size: 19px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--oj-navy);
}

.oj-roles__tab[aria-selected="true"] {
  font-weight: 700;
}

.oj-roles__marker {
  position: absolute;
  left: 50%;
  top: 2px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: var(--oj-slate-200);
  transform: none;
  /* the picked role's marker turns into the amber rhombus: a quarter turn
     and a colour change, not a swap (off under reduced motion) */
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .oj-roles__marker {
    transition: none;
  }
}

.oj-roles__tab[aria-selected="true"] .oj-roles__marker {
  background: var(--oj-amber);
  transform: rotate(45deg);
}

.oj-roles__body {
  display: flex;
  align-items: flex-start;
}

.oj-roles__cloud {
  position: relative;
  width: 700px;
  height: 460px;
  flex: none;
}

.oj-roles__bgSvg,
.oj-roles__linesSvg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: visible;
}

.oj-roles__bgSvg--400,
.oj-roles__linesSvg--400 {
  display: none;
}

/* The active role's lines fade in, the previous one fades out (opacity
   300ms, layout spec §5) — `opacity`, not `display`, so the crossfade can
   actually transition; both stay absolutely positioned, so this never
   affects the cloud's height. */
.oj-roles__linesSvg {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.oj-roles__linesSvg[data-active="true"] {
  opacity: 1;
}

/* Safety net (`client/roles.ts`'s `updateLinesFit`): a task long enough to
   wrap past the list's 68px row (`min-height` below lets it grow instead of
   overlapping the next one) leaves every line below it pointing at a row
   that has since moved — hide the active role's whole overlay rather than
   one stale line. Higher specificity than the rule above regardless of
   source order, so no `!important` needed. */
.oj-roles__cloud[data-lines-fit="false"] .oj-roles__linesSvg[data-active="true"] {
  opacity: 0;
}

/* Loops run only while the roles section is in the viewport
   (`client/roles.ts`, layout spec §5 rule 4). Paused only on the script's
   explicit `data-running="false"`: without JavaScript nothing sets it, and
   an animation frozen on its first keyframe would hide its element (§5
   rule 2 — content visible without JS; audit 2026-09-30). `!important`: every animated
   element carries its own `animation` in an inline `style` (React —
   duration/delay/easing come from data, `HomeRolesCloud.tsx`), and an
   inline declaration always outranks a selector rule regardless of
   specificity — same reason `tokens.css`'s reduced-motion override uses it. */
.oj-roles__cloud[data-running="false"] .oj-a {
  animation-play-state: paused !important;
}

/* The mockup only ever mounts the *active* role's overlay, so only its 6
   lines animate. Ours keeps all eight mounted (accessibility/no-JS), so the
   inactive ones need their own pause — otherwise every role's `oj-run`/
   `oj-draw`/`oj-in` would play at once the moment the cloud scrolls into
   view, not just the one actually on screen. */
.oj-roles__linesSvg[data-active="false"] .oj-a {
  animation-play-state: paused !important;
}

.oj-roles__panels {
  flex: 1 1 auto;
  min-width: 0;
}

.oj-roles__panel[hidden] {
  display: none;
}

.oj-roles__tasks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oj-roles__tasks li {
  box-sizing: border-box;
  /* Safety net: a row grows past this instead of clipping/overlapping the
     next one when its task wraps past two lines (`client/roles.ts` then
     hides the cloud's stale lines — see `.oj-roles__cloud[data-lines-fit]`
     above). Exact 68px still holds wherever the layout below keeps the
     two-column mode (1440, 1024 — spec §4 row height / line-centre math). */
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 0 20px;
  border-top: 1px solid var(--oj-border);
}

.oj-roles__tasks li span:last-child {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--oj-text);
}

.oj-roles__taskBullet {
  display: none;
}

.oj-roles__more span {
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

@media (min-width: 1280px) {
  .oj-roles__body {
    gap: 0;
  }
}

@media (max-width: 1279px) {
  .oj-roles__tabs {
    grid-template-columns: repeat(4, auto);
  }

  .oj-roles__inner {
    padding: 96px var(--oj-page-pad-desktop);
    gap: 36px;
  }

  .oj-roles__inner h2 {
    font-size: 48px;
  }

  .oj-roles__cloud {
    width: 400px;
  }

  .oj-roles__bgSvg--700,
  .oj-roles__linesSvg--700 {
    display: none;
  }

  .oj-roles__bgSvg--400,
  .oj-roles__linesSvg--400 {
    display: block;
  }

  .oj-roles__linesSvg--400[data-active="false"] {
    display: none;
  }

  .oj-roles__body {
    gap: 24px;
  }
}

/* Below this, the two-column layout (cloud beside a ~296-320px list at
   768-1023, layout spec defect) makes the longest tasks wrap into 3 lines
   and overlap the next row: the list needs room for every role's longest
   task in two lines. Measured against the built site (both locales, all 8
   roles, `.oj-roles__panel li` `scrollHeight` vs `clientHeight`, sweeping
   the viewport 700-1100px): every role's tasks fit two lines from 980px
   except the single longest one (Russian secretariat reminder, 93
   characters), which the safety net above already covers at any width, so
   980 is not chased further. Below it: the mobile scheme already used at
   767 and narrower — same cloud-hidden, auto-height, swipeable-tabs
   layout, just starting earlier. */
@media (max-width: 979px) {
  .oj-roles__inner {
    padding: 72px 0;
    gap: 24px;
  }

  .oj-roles__inner h2 {
    padding: 0 20px;
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  /* No cloud on the mobile scheme (`HomeMobile.dc.html`): a draggable
     horizontal tab strip, then the list — `client/roles.ts` wires the drag. */
  .oj-roles__cloud {
    display: none;
  }

  .oj-roles__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 0 20px;
    overflow-x: auto;
    cursor: grab;
    user-select: none;
    scrollbar-width: none;
  }

  .oj-roles__tabs::-webkit-scrollbar {
    display: none;
  }

  .oj-roles__tab {
    flex: none;
    font-size: 17px;
  }

  .oj-roles__panels {
    padding: 0 20px;
  }

  .oj-roles__tasks li {
    height: auto;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
  }

  .oj-roles__tasks li span:last-child {
    font-size: 17px;
    line-height: 1.4;
  }

  .oj-roles__taskBullet {
    display: block;
    width: 11px;
    height: 11px;
    margin-top: 6px;
    border-radius: 3.2px;
    background: var(--oj-cyan);
    flex: none;
  }

  .oj-roles__more {
    min-height: 56px;
    padding: 0;
    border-top: none;
  }
}


/* src/components/home/HomeSecurity.css */
/* Layout spec §4, SEO spec 2.1 heading table. Full-bleed white background
   (../DemoBlock/DemoBlock.css's shape) + a capped inner column; on mobile
   cards 2–5 become the horizontal scroll-snap strip
   `../../client/homeSecurity.ts` tracks (`security_slide_change`). */
.oj-security {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--oj-surface);
  box-sizing: border-box;
  /* a short top: the white channels block (HomeChannels.css) runs straight
     into this one, so its bottom padding already holds the gap */
  padding: 40px 0 120px;
}

.oj-security__title,
.oj-security__card1,
.oj-security__strip {
  box-sizing: content-box;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}

/* The heading is the column (shared rule above: auto side margins, 1320
   cap); only its text is held to the mockup's 980, left-aligned — a bare
   `margin: 0` plus `max-width: 980px` here used to pin it to the viewport's
   left edge above 1440. */
.oj-security__title {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--oj-navy);
}

.oj-security__titleText {
  display: block;
  max-width: 980px;
}

.oj-security__card1 {
  margin-top: 56px;
  box-sizing: border-box;
  padding: 48px 60px;
  border-radius: 36px;
  background: var(--oj-surface-2);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.oj-security__card1Head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 600px;
}

.oj-security__progressRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.oj-security__progress {
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--oj-blue);
}

.oj-security__badge {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--oj-navy);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.oj-security__card1Heading {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--oj-navy);
}

.oj-security__layers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.oj-security__layer {
  position: relative;
  box-sizing: border-box;
  padding: 24px 28px 30px;
  border-radius: 28px;
  background: var(--oj-surface);
  display: flex;
  flex-direction: column;
}

.oj-security__layerNum {
  font-family: var(--oj-font-display);
  font-weight: 600;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--oj-cyan);
}

.oj-security__layerTitle {
  margin: 10px 0 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-security__layerDesc {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--oj-text-2);
}

.oj-security__layerOutcome {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--oj-text);
}

.oj-security__strip {
  margin-top: 56px;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.oj-security__slideCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--oj-border);
}

.oj-security__slideHeading {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
}

.oj-security__slideDesc {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--oj-text-2);
}

@media (max-width: 1279px) {
  .oj-security {
    padding: 32px 0 96px;
  }
}

@media (max-width: 1023px) {
  .oj-security__title,
  .oj-security__card1,
  .oj-security__strip {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .oj-security {
    padding: 24px 0 72px;
  }

  /* HomeMobile.dc.html: the heading's text starts at 20px, like every other
     section's; the card below sets its own 12px inset */
  .oj-security__title {
    padding-left: 20px;
    padding-right: 20px;
  }

  .oj-security__title {
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  .oj-security__card1 {
    margin-top: 28px;
    padding: 24px 12px 12px;
    border-radius: 28px;
    gap: 16px;
  }

  .oj-security__card1Head {
    padding: 0 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .oj-security__progress {
    font-size: 16px;
  }

  .oj-security__card1Heading {
    margin-top: 0;
    max-width: none;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .oj-security__layers {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .oj-security__layer {
    padding: 18px 20px 20px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0 8px;
  }

  .oj-security__layerNum {
    grid-row: span 3;
    font-size: 56px;
  }

  .oj-security__layerTitle {
    margin: 4px 0 0;
    font-size: 21px;
  }

  .oj-security__layerDesc,
  .oj-security__layerOutcome {
    font-size: 17px;
    line-height: 1.45;
    margin-top: 6px;
  }

  /* `HomeMobile.dc.html`'s own strip cancels ITS section's 12px side padding
     with an equal negative margin, landing flush on the viewport edge; this
     section carries no side padding of its own (`.oj-security`, above —
     the inset instead lives on `.oj-security__title`/`__card1`), so the
     same -12px here would bleed 12px past the true edge on both sides
     (item 3) instead of cancelling anything. */
  .oj-security__strip {
    margin: 56px 0 0;
    padding: 0 20px;
    display: flex;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
  }

  .oj-security__slideCard {
    box-sizing: border-box;
    width: 276px;
    flex: none;
    scroll-snap-align: start;
    padding: 22px;
    border-radius: 22px;
    background: var(--oj-bg);
    border-top: none;
  }

  .oj-security__slideHeading {
    font-size: 20px;
    line-height: 1.2;
  }

  .oj-security__slideDesc {
    font-size: 17px;
    line-height: 1.5;
  }
}


/* src/components/home/HomeSeoText.css */
/* The SEO text block above the footer (SEO spec 2.1, `Home2.dc.html`). Task
   brief: the whole text — intro and all three subsections — is always in
   the HTML; collapse only ever changes what is *visible*
   (`../../client/seoText.ts` flips `data-expanded`), never what is
   rendered, unlike the mockup's own `sc-if` (which drops the subsections
   from the DOM entirely when closed). */
.oj-seo-text {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 64px 60px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oj-seo-text__title {
  margin: 0 0 8px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--oj-text-2);
}

.oj-seo-text__body {
  width: 100%;
}

.oj-seo-text__intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--oj-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.oj-seo-text__body[data-expanded="true"] .oj-seo-text__intro {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.oj-seo-text__sections {
  margin-top: 24px;
  width: 100%;
  display: none;
}

.oj-seo-text__body[data-expanded="true"] .oj-seo-text__sections {
  display: block;
}

.oj-seo-text__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.oj-seo-text__section:last-child {
  margin-bottom: 0;
}

.oj-seo-text__sectionTitle {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--oj-text-2);
}

.oj-seo-text__sectionText {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--oj-muted);
}

.oj-seo-text__toggle {
  box-sizing: border-box;
  margin-top: 16px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--oj-font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--oj-blue);
}

@media (max-width: 1023px) {
  .oj-seo-text {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .oj-seo-text {
    padding: 40px 20px;
  }

  .oj-seo-text__title {
    font-size: 19px;
  }

  .oj-seo-text__intro,
  .oj-seo-text__sectionText {
    font-size: 16px;
  }

  .oj-seo-text__sections {
    margin-top: 20px;
  }

  .oj-seo-text__section {
    margin-bottom: 20px;
  }

  .oj-seo-text__sectionTitle {
    font-size: 17px;
  }

  .oj-seo-text__toggle {
    font-size: 16px;
  }
}


/* src/components/home/HomeWorksWith.css */
/* Layout spec §4: "above 1440 the strip stretches full width" — same
   full-bleed + capped inner shape ../DemoBlock/DemoBlock.css uses, here for
   the border lines rather than a background. */
.oj-works-with {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid var(--oj-border);
  border-bottom: 1px solid var(--oj-border);
}

.oj-works-with__inner {
  box-sizing: content-box;
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 60px;
  display: grid;
  grid-template-columns: auto 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.oj-works-with__title {
  margin: 0;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
}

/* A square, not the mockup's diamond, in the logo mark's cyan, not amber
   (owner's call): the mark is built of squares too. */
.oj-works-with__sep {
  width: 9px;
  height: 9px;
  /* centred on the line box, the square sat level with the capitals' middle,
     1.5px above the lowercase letters the eye reads; 3px on top moves its
     centre down by half that, a whole-pixel box keeps its edges sharp */
  margin-top: 3px;
  border-radius: 2px;
  background: var(--oj-cyan);
  flex: none;
}

.oj-works-with__slots {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  /* Belt-and-braces only: `client/worksWithSlots.ts` measures every visible
     slot's natural (widest-name) width against this box and hides trailing
     slots (with their separator) before anything would reach this edge — a
     name is never clipped in normal operation (owner's rule). Kept as the
     no-JS fallback's own edge case, not the primary defence. */
  overflow: hidden;
}

/* A slot is as wide as the longest name in its own list — no absolute
   positioning: every `.oj-works-with__name` below sits in the same grid
   cell (`grid-row: 1; grid-column: 1`), so the column's automatic track
   width is the widest of them, and the rest stretch to match and centre
   their own (shorter) text inside it (owner's rule: a name is never
   clipped, ellipsised or shrunk — a slot drops instead, see
   `../../client/worksWithSlots.ts`). */
/* Never narrower than its widest name (the grid cell holds them all), and
   sharing whatever room is left equally with its neighbours — the strip
   stays evenly spread as the mockup has it, no gap piling up before
   «Все». */
.oj-works-with__slot {
  position: relative;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  flex: 1 0 auto;
  height: 56px;
  perspective: 400px;
}

.oj-works-with__name {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  backface-visibility: hidden;
  /* Base (pre-animation) state: only the first name shows — the same state
     `prefers-reduced-motion: reduce` leaves it in (`.oj-a`'s global rule,
     ../../vendor/site-handoff/tokens.css) and what a crawler/no-JS visitor
     sees, since `animation-name` alone never runs without the duration
     below. */
  opacity: 0;
  transform: rotateX(-90deg);
  animation-duration: 46s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.oj-works-with__name:first-child {
  opacity: 1;
  transform: none;
}

/* Paused while the strip is out of the viewport (../../client/worksWithSlots.ts).
   `!important`: each name's `animation-name`/`animation-delay` is inline
   (React — `HomeWorksWith.tsx`), which always outranks a selector rule
   regardless of specificity — same reason `tokens.css`'s reduced-motion
   override uses it (`HomeRoles.css`, `HomeAdvantages.css` share the fix). */
.oj-works-with[data-playing="false"] .oj-a {
  animation-play-state: paused !important;
}

.oj-works-with__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-left: 12px;
  font-family: var(--oj-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--oj-navy);
  white-space: nowrap;
  text-decoration: none;
}

.oj-works-with__allText {
  border-bottom: 2px solid var(--oj-cyan);
  padding-bottom: 2px;
}

.oj-works-with__srList {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Layout spec §4: 5 slots at 1440, 4 from 1279, 3 at 1024, 2 at 767, 1 at
   599 — hiding a slot's own square separator with it so a missing slot
   never leaves a stray marker (task brief: "a missing slot is simply not
   rendered"). Children of `.oj-works-with__slots` alternate slot/separator
   (slot, separator, slot, separator, …), so `nth-child` counts both. */
@media (max-width: 1279px) {
  .oj-works-with__slots > :nth-child(n + 8) {
    display: none;
  }
}

@media (max-width: 1023px) {
  .oj-works-with__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .oj-works-with__slots > :nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 767px) {
  .oj-works-with__inner {
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }

  .oj-works-with__name {
    justify-content: flex-start;
  }

  .oj-works-with__slots > :nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 599px) {
  .oj-works-with__slots > :nth-child(n + 2) {
    display: none;
  }
}

/* `oj-slotbN` (0..10): the mockup's own 3D-flip keyframes
   (`Home2.dc.html`), copied verbatim — one keyframe per name position in an
   eleven-name slot, each visible for one eleventh of the 46s loop. */
@keyframes oj-slotb0 {
  0%,
  7.29% {
    opacity: 1;
    transform: none;
  }

  9.09%,
  98.5% {
    opacity: 0;
    transform: rotateX(-90deg);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes oj-slotb1 {
  0%,
  9.09% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  10.89%,
  16.38% {
    opacity: 1;
    transform: none;
  }

  18.18%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb2 {
  0%,
  18.18% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  19.98%,
  25.47% {
    opacity: 1;
    transform: none;
  }

  27.27%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb3 {
  0%,
  27.27% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  29.07%,
  34.56% {
    opacity: 1;
    transform: none;
  }

  36.36%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb4 {
  0%,
  36.36% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  38.16%,
  43.65% {
    opacity: 1;
    transform: none;
  }

  45.45%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb5 {
  0%,
  45.45% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  47.25%,
  52.75% {
    opacity: 1;
    transform: none;
  }

  54.55%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb6 {
  0%,
  54.55% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  56.35%,
  61.84% {
    opacity: 1;
    transform: none;
  }

  63.64%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb7 {
  0%,
  63.64% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  65.44%,
  70.93% {
    opacity: 1;
    transform: none;
  }

  72.73%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb8 {
  0%,
  72.73% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  74.53%,
  80.02% {
    opacity: 1;
    transform: none;
  }

  81.82%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb9 {
  0%,
  81.82% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  83.62%,
  89.11% {
    opacity: 1;
    transform: none;
  }

  90.91%,
  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}

@keyframes oj-slotb10 {
  0%,
  90.91% {
    opacity: 0;
    transform: rotateX(90deg);
  }

  92.71%,
  98.2% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
}


/* the page's own style attributes, moved here by scripts/build/inlineStyles.mjs */

.oj-s-038f68ff41.oj-s-038f68ff41.oj-s-038f68ff41{animation-name:oj-slotb9;animation-delay:0s}
.oj-s-0488ef4c06.oj-s-0488ef4c06.oj-s-0488ef4c06{animation:oj-f2 8s ease-in-out -7s infinite}
.oj-s-0523128c95.oj-s-0523128c95.oj-s-0523128c95{animation:oj-f3 7s ease-in-out -3s infinite}
.oj-s-06f52a30a3.oj-s-06f52a30a3.oj-s-06f52a30a3{animation:oj-f1 11s ease-in-out -7s infinite}
.oj-s-09c46fbb05.oj-s-09c46fbb05.oj-s-09c46fbb05{animation-name:oj-slotb6;animation-delay:-3.6s}
.oj-s-0bc4d30667.oj-s-0bc4d30667.oj-s-0bc4d30667{animation-name:oj-slotb6;animation-delay:-7.2s}
.oj-s-0decdc15ee.oj-s-0decdc15ee.oj-s-0decdc15ee{--oj-bar-h:44px}
.oj-s-0ea52991b7.oj-s-0ea52991b7.oj-s-0ea52991b7{animation-name:oj-slotb3;animation-delay:-7.2s}
.oj-s-12de02b473.oj-s-12de02b473.oj-s-12de02b473{width:52px}
.oj-s-14b2e3c619.oj-s-14b2e3c619.oj-s-14b2e3c619{animation-name:oj-slotb5;animation-delay:-7.2s}
.oj-s-15ac103ea7.oj-s-15ac103ea7.oj-s-15ac103ea7{--oj-scene-duration:5.6s}
.oj-s-15c12160a4.oj-s-15c12160a4.oj-s-15c12160a4{animation:oj-in 0.5s ease-out backwards;animation-delay:0.6s}
.oj-s-199c92261b.oj-s-199c92261b.oj-s-199c92261b{animation:oj-f1 9s ease-in-out -2s infinite}
.oj-s-19b88f8208.oj-s-19b88f8208.oj-s-19b88f8208{--oj-bar-h:29px}
.oj-s-1a4c19a2ad.oj-s-1a4c19a2ad.oj-s-1a4c19a2ad{animation-name:oj-slotb10;animation-delay:-7.2s}
.oj-s-1ba51881f3.oj-s-1ba51881f3.oj-s-1ba51881f3{width:70px}
.oj-s-1ba7b99389.oj-s-1ba7b99389.oj-s-1ba7b99389{animation:oj-run 3.8000000000000003s linear 1s infinite}
.oj-s-1c09cf61fc.oj-s-1c09cf61fc.oj-s-1c09cf61fc{animation-name:oj-slotb9;animation-delay:-5.4s}
.oj-s-1c6419e1d9.oj-s-1c6419e1d9.oj-s-1c6419e1d9{animation-name:oj-slotb0;animation-delay:-7.2s}
.oj-s-1f5dac3e0c.oj-s-1f5dac3e0c.oj-s-1f5dac3e0c{animation:oj-draw 1.4s ease-out backwards;animation-delay:0s}
.oj-s-1f9a2732f9.oj-s-1f9a2732f9.oj-s-1f9a2732f9{animation-name:oj-slotb3;animation-delay:0s}
.oj-s-1fdb42a9e7.oj-s-1fdb42a9e7.oj-s-1fdb42a9e7{animation-name:oj-slotb2;animation-delay:-5.4s}
.oj-s-207575de33.oj-s-207575de33.oj-s-207575de33{animation:oj-f2 12s ease-in-out -5s infinite}
.oj-s-222506b405.oj-s-222506b405.oj-s-222506b405{animation:oj-run 4.4s linear 2s infinite}
.oj-s-22c7bd7b93.oj-s-22c7bd7b93.oj-s-22c7bd7b93{animation-name:oj-slotb6;animation-delay:0s}
.oj-s-233d3ebceb.oj-s-233d3ebceb.oj-s-233d3ebceb{animation:oj-in 0.5s ease-out backwards;animation-delay:0s}
.oj-s-26f7511012.oj-s-26f7511012.oj-s-26f7511012{--oj-bar-h:50px}
.oj-s-2776745ac2.oj-s-2776745ac2.oj-s-2776745ac2{animation-name:oj-slotb1;animation-delay:-3.6s}
.oj-s-2cc80d5456.oj-s-2cc80d5456.oj-s-2cc80d5456{animation:oj-f3 7s ease-in-out -6s infinite}
.oj-s-2f0a184885.oj-s-2f0a184885.oj-s-2f0a184885{width:70%}
.oj-s-30cc571c1a.oj-s-30cc571c1a.oj-s-30cc571c1a{width:58px}
.oj-s-3106de3e37.oj-s-3106de3e37.oj-s-3106de3e37{animation-name:oj-slotb8;animation-delay:-3.6s}
.oj-s-31d4d6f912.oj-s-31d4d6f912.oj-s-31d4d6f912{width:84%}
.oj-s-334c545a67.oj-s-334c545a67.oj-s-334c545a67{animation:oj-f4 8s ease-in-out -4s infinite}
.oj-s-36398099a5.oj-s-36398099a5.oj-s-36398099a5{animation:oj-f3 9s ease-in-out -2s infinite}
.oj-s-390d99820b.oj-s-390d99820b.oj-s-390d99820b{animation-name:oj-slotb0;animation-delay:-5.4s}
.oj-s-3ab3aa168b.oj-s-3ab3aa168b.oj-s-3ab3aa168b{animation:oj-f2 8s ease-in-out -1s infinite}
.oj-s-3b1ddb233d.oj-s-3b1ddb233d.oj-s-3b1ddb233d{--oj-scene-delay:0.95s}
.oj-s-3b4d21864b.oj-s-3b4d21864b.oj-s-3b4d21864b{--h:16px;--h2:36px}
.oj-s-3d411c6891.oj-s-3d411c6891.oj-s-3d411c6891{animation-name:oj-slotb8;animation-delay:-5.4s}
.oj-s-3da2188717.oj-s-3da2188717.oj-s-3da2188717{--oj-bar-h:15px}
.oj-s-3e7ab93559.oj-s-3e7ab93559.oj-s-3e7ab93559{animation-name:oj-slotb1;animation-delay:-5.4s}
.oj-s-3ead67836f.oj-s-3ead67836f.oj-s-3ead67836f{--oj-scene-delay:0.45s}
.oj-s-4096f64efa.oj-s-4096f64efa.oj-s-4096f64efa{--x:175px;--y:92px;--oj-scene-delay:3.5s}
.oj-s-416d9c2dff.oj-s-416d9c2dff.oj-s-416d9c2dff{animation-name:oj-slotb5;animation-delay:-1.8s}
.oj-s-41c0c80405.oj-s-41c0c80405.oj-s-41c0c80405{animation-name:oj-slotb0;animation-delay:-1.8s}
.oj-s-4207510326.oj-s-4207510326.oj-s-4207510326{--oj-scene-duration:4.4s}
.oj-s-4534423290.oj-s-4534423290.oj-s-4534423290{--h:28px;--h2:56px}
.oj-s-457ca01d10.oj-s-457ca01d10.oj-s-457ca01d10{animation:oj-f2 8s ease-in-out -4s infinite}
.oj-s-45b4f3f6c9.oj-s-45b4f3f6c9.oj-s-45b4f3f6c9{animation:oj-f2 10s ease-in-out -3s infinite}
.oj-s-45f23f99cc.oj-s-45f23f99cc.oj-s-45f23f99cc{animation:oj-in 0.5s ease-out backwards;animation-delay:0.24s}
.oj-s-46c0baef25.oj-s-46c0baef25.oj-s-46c0baef25{animation:oj-f3 9s ease-in-out -8s infinite}
.oj-s-4b6cb9f45c.oj-s-4b6cb9f45c.oj-s-4b6cb9f45c{animation:oj-draw 1.4s ease-out backwards;animation-delay:0.24s}
.oj-s-4b8165c19e.oj-s-4b8165c19e.oj-s-4b8165c19e{animation:oj-f4 10s ease-in-out -6s infinite}
.oj-s-4ba85f8945.oj-s-4ba85f8945.oj-s-4ba85f8945{animation:oj-f1 9s ease-in-out -5s infinite}
.oj-s-4eb5a10ef0.oj-s-4eb5a10ef0.oj-s-4eb5a10ef0{--oj-bar-h:23px}
.oj-s-4f9d9cbb72.oj-s-4f9d9cbb72.oj-s-4f9d9cbb72{animation-name:oj-slotb6;animation-delay:-5.4s}
.oj-s-5392a78b53.oj-s-5392a78b53.oj-s-5392a78b53{--h:50px;--h2:22px}
.oj-s-540d170ec9.oj-s-540d170ec9.oj-s-540d170ec9{--h:44px;--h2:20px}
.oj-s-5471749f0c.oj-s-5471749f0c.oj-s-5471749f0c{--x:175px;--y:-92px;--oj-scene-delay:2.1s}
.oj-s-54a8705644.oj-s-54a8705644.oj-s-54a8705644{animation-name:oj-slotb0;animation-delay:-3.6s}
.oj-s-54f489ce16.oj-s-54f489ce16.oj-s-54f489ce16{animation:oj-f3 11s ease-in-out -1s infinite}
.oj-s-552c192063.oj-s-552c192063.oj-s-552c192063{--x:-190px;--y:0px;--oj-scene-delay:2.8s}
.oj-s-5555941388.oj-s-5555941388.oj-s-5555941388{animation:oj-f3 11s ease-in-out -7s infinite}
.oj-s-55d8ffef28.oj-s-55d8ffef28.oj-s-55d8ffef28{width:170px}
.oj-s-5682c3ee98.oj-s-5682c3ee98.oj-s-5682c3ee98{animation-name:oj-slotb4;animation-delay:0s}
.oj-s-59d2699e7c.oj-s-59d2699e7c.oj-s-59d2699e7c{--x:190px;--y:0px;--oj-scene-delay:0.7s}
.oj-s-5c09ee159e.oj-s-5c09ee159e.oj-s-5c09ee159e{animation-name:oj-slotb8;animation-delay:-7.2s}
.oj-s-5e4c41778c.oj-s-5e4c41778c.oj-s-5e4c41778c{animation:oj-f4 12s ease-in-out -5s infinite}
.oj-s-5ee47c9385.oj-s-5ee47c9385.oj-s-5ee47c9385{width:46px}
.oj-s-5f50bbb8df.oj-s-5f50bbb8df.oj-s-5f50bbb8df{animation-name:oj-slotb10;animation-delay:-1.8s}
.oj-s-5f74688441.oj-s-5f74688441.oj-s-5f74688441{animation-name:oj-slotb7;animation-delay:-7.2s}
.oj-s-5f8e1e4663.oj-s-5f8e1e4663.oj-s-5f8e1e4663{animation:oj-draw 1.4s ease-out backwards;animation-delay:0.48s}
.oj-s-5fc970ae35.oj-s-5fc970ae35.oj-s-5fc970ae35{animation-name:oj-slotb1;animation-delay:-7.2s}
.oj-s-626bbdac68.oj-s-626bbdac68.oj-s-626bbdac68{animation-name:oj-slotb7;animation-delay:-3.6s}
.oj-s-635b7a23e6.oj-s-635b7a23e6.oj-s-635b7a23e6{animation:oj-f4 12s ease-in-out -2s infinite}
.oj-s-641f6b25cc.oj-s-641f6b25cc.oj-s-641f6b25cc{animation-name:oj-slotb4;animation-delay:-7.2s}
.oj-s-65e8ccbfca.oj-s-65e8ccbfca.oj-s-65e8ccbfca{animation:oj-f4 8s ease-in-out -7s infinite}
.oj-s-662c8e4334.oj-s-662c8e4334.oj-s-662c8e4334{width:150px}
.oj-s-6889b9ab57.oj-s-6889b9ab57.oj-s-6889b9ab57{animation-name:oj-slotb3;animation-delay:-3.6s}
.oj-s-6b5d4e84fb.oj-s-6b5d4e84fb.oj-s-6b5d4e84fb{animation:oj-f2 10s ease-in-out -6s infinite}
.oj-s-6c5cdb2fe5.oj-s-6c5cdb2fe5.oj-s-6c5cdb2fe5{animation:oj-in 0.5s ease-out backwards;animation-delay:0.48s}
.oj-s-6e0dad4c7f.oj-s-6e0dad4c7f.oj-s-6e0dad4c7f{animation:oj-f3 9s ease-in-out -5s infinite}
.oj-s-701d9e1e4a.oj-s-701d9e1e4a.oj-s-701d9e1e4a{animation-name:oj-slotb2;animation-delay:-3.6s}
.oj-s-71ce290442.oj-s-71ce290442.oj-s-71ce290442{--oj-scene-delay:0.15s}
.oj-s-733ca69ab5.oj-s-733ca69ab5.oj-s-733ca69ab5{animation-name:oj-slotb9;animation-delay:-1.8s}
.oj-s-78c33857e6.oj-s-78c33857e6.oj-s-78c33857e6{animation:oj-in 0.5s ease-out backwards;animation-delay:0.36s}
.oj-s-7943ee17e0.oj-s-7943ee17e0.oj-s-7943ee17e0{animation-name:oj-slotb5;animation-delay:0s}
.oj-s-794e6a8a41.oj-s-794e6a8a41.oj-s-794e6a8a41{animation-name:oj-slotb2;animation-delay:0s}
.oj-s-79593404be.oj-s-79593404be.oj-s-79593404be{--oj-scene-duration:3.2s}
.oj-s-79aef40572.oj-s-79aef40572.oj-s-79aef40572{animation-name:oj-slotb9;animation-delay:-3.6s}
.oj-s-79f1da79e2.oj-s-79f1da79e2.oj-s-79f1da79e2{animation-name:oj-slotb3;animation-delay:-5.4s}
.oj-s-7dd91a58e1.oj-s-7dd91a58e1.oj-s-7dd91a58e1{animation:oj-draw 1.4s ease-out backwards;animation-delay:0.36s}
.oj-s-7ded2a0513.oj-s-7ded2a0513.oj-s-7ded2a0513{animation-name:oj-slotb2;animation-delay:-7.2s}
.oj-s-7df6d2cd72.oj-s-7df6d2cd72.oj-s-7df6d2cd72{--oj-bar-h:33px}
.oj-s-7eaecc77d0.oj-s-7eaecc77d0.oj-s-7eaecc77d0{width:50%}
.oj-s-818be7249e.oj-s-818be7249e.oj-s-818be7249e{animation:oj-draw 1.4s ease-out backwards;animation-delay:0.6s}
.oj-s-82a47a5324.oj-s-82a47a5324.oj-s-82a47a5324{animation-name:oj-slotb1;animation-delay:-1.8s}
.oj-s-8aefaaa5fd.oj-s-8aefaaa5fd.oj-s-8aefaaa5fd{animation:oj-in 0.5s ease-out backwards;animation-delay:0.12s}
.oj-s-8b1b8b6a12.oj-s-8b1b8b6a12.oj-s-8b1b8b6a12{animation-name:oj-slotb4;animation-delay:-5.4s}
.oj-s-8b4b7346d8.oj-s-8b4b7346d8.oj-s-8b4b7346d8{animation-name:oj-slotb7;animation-delay:0s}
.oj-s-91eaf75130.oj-s-91eaf75130.oj-s-91eaf75130{animation-name:oj-slotb7;animation-delay:-5.4s}
.oj-s-95685376bf.oj-s-95685376bf.oj-s-95685376bf{animation-name:oj-slotb8;animation-delay:0s}
.oj-s-96d766814c.oj-s-96d766814c.oj-s-96d766814c{animation:oj-run 4.1s linear 1.5s infinite}
.oj-s-9b0d43b6dc.oj-s-9b0d43b6dc.oj-s-9b0d43b6dc{animation-name:oj-slotb3;animation-delay:-1.8s}
.oj-s-9ccc6208cc.oj-s-9ccc6208cc.oj-s-9ccc6208cc{animation:oj-f1 7s ease-in-out 0s infinite}
.oj-s-9fac31459f.oj-s-9fac31459f.oj-s-9fac31459f{animation:oj-f3 11s ease-in-out -4s infinite}
.oj-s-a0c9fe3d79.oj-s-a0c9fe3d79.oj-s-a0c9fe3d79{animation-name:oj-slotb5;animation-delay:-5.4s}
.oj-s-a3246c4227.oj-s-a3246c4227.oj-s-a3246c4227{--oj-scene-delay:0.7s}
.oj-s-a612519691.oj-s-a612519691.oj-s-a612519691{animation-name:oj-slotb8;animation-delay:-1.8s}
.oj-s-a7db3ce89b.oj-s-a7db3ce89b.oj-s-a7db3ce89b{--oj-bar-h:17px}
.oj-s-aad3b64677.oj-s-aad3b64677.oj-s-aad3b64677{animation:oj-f4 8s ease-in-out -1s infinite}
.oj-s-addd634407.oj-s-addd634407.oj-s-addd634407{--oj-scene-delay:0.24s}
.oj-s-b5a8cc694c.oj-s-b5a8cc694c.oj-s-b5a8cc694c{animation:oj-f1 9s ease-in-out -8s infinite}
.oj-s-b6ab0ca936.oj-s-b6ab0ca936.oj-s-b6ab0ca936{animation-name:oj-slotb10;animation-delay:-3.6s}
.oj-s-b773f9f704.oj-s-b773f9f704.oj-s-b773f9f704{animation:oj-run 4.7s linear 2.5s infinite}
.oj-s-b95ab77a54.oj-s-b95ab77a54.oj-s-b95ab77a54{animation:oj-f3 7s ease-in-out 0s infinite}
.oj-s-befd7b188f.oj-s-befd7b188f.oj-s-befd7b188f{animation:oj-f1 7s ease-in-out -6s infinite}
.oj-s-c11723f10c.oj-s-c11723f10c.oj-s-c11723f10c{animation-name:oj-slotb4;animation-delay:-3.6s}
.oj-s-c140cbab17.oj-s-c140cbab17.oj-s-c140cbab17{animation-name:oj-slotb6;animation-delay:-1.8s}
.oj-s-c3a673be09.oj-s-c3a673be09.oj-s-c3a673be09{--oj-scene-delay:0.16s}
.oj-s-c5486f5403.oj-s-c5486f5403.oj-s-c5486f5403{animation:oj-f4 12s ease-in-out -8s infinite}
.oj-s-c8fa645eb4.oj-s-c8fa645eb4.oj-s-c8fa645eb4{animation:oj-draw 1.4s ease-out backwards;animation-delay:0.12s}
.oj-s-c9cd1c78fc.oj-s-c9cd1c78fc.oj-s-c9cd1c78fc{animation:oj-run 3.5s linear 0.5s infinite}
.oj-s-ca602b6601.oj-s-ca602b6601.oj-s-ca602b6601{--x:-175px;--y:-92px;--oj-scene-delay:0s}
.oj-s-cb11c6ce49.oj-s-cb11c6ce49.oj-s-cb11c6ce49{animation:oj-f1 11s ease-in-out -1s infinite}
.oj-s-cd2b97c43d.oj-s-cd2b97c43d.oj-s-cd2b97c43d{width:140px}
.oj-s-cdafbaeecc.oj-s-cdafbaeecc.oj-s-cdafbaeecc{animation:oj-f1 7s ease-in-out -3s infinite}
.oj-s-ce202e275a.oj-s-ce202e275a.oj-s-ce202e275a{--oj-scene-delay:0.4s}
.oj-s-cf3d8903f1.oj-s-cf3d8903f1.oj-s-cf3d8903f1{animation-name:oj-slotb4;animation-delay:-1.8s}
.oj-s-d076f764a2.oj-s-d076f764a2.oj-s-d076f764a2{--h:60px;--h2:30px}
.oj-s-d334b57bfc.oj-s-d334b57bfc.oj-s-d334b57bfc{width:120px}
.oj-s-d3db975bed.oj-s-d3db975bed.oj-s-d3db975bed{width:64px}
.oj-s-d4b431d35d.oj-s-d4b431d35d.oj-s-d4b431d35d{animation:oj-f2 10s ease-in-out 0s infinite}
.oj-s-d741e9f24e.oj-s-d741e9f24e.oj-s-d741e9f24e{--oj-scene-delay:0s}
.oj-s-d7bd9b26a3.oj-s-d7bd9b26a3.oj-s-d7bd9b26a3{animation-name:oj-slotb10;animation-delay:-5.4s}
.oj-s-d8757c4d45.oj-s-d8757c4d45.oj-s-d8757c4d45{animation:oj-f2 12s ease-in-out -2s infinite}
.oj-s-da0d0c5916.oj-s-da0d0c5916.oj-s-da0d0c5916{animation-name:oj-slotb7;animation-delay:-1.8s}
.oj-s-da5914331a.oj-s-da5914331a.oj-s-da5914331a{animation-name:oj-slotb9;animation-delay:-7.2s}
.oj-s-dc9eac3f89.oj-s-dc9eac3f89.oj-s-dc9eac3f89{width:190px}
.oj-s-e0deee27eb.oj-s-e0deee27eb.oj-s-e0deee27eb{animation:oj-f2 12s ease-in-out -8s infinite}
.oj-s-e2e567d7c0.oj-s-e2e567d7c0.oj-s-e2e567d7c0{--h:24px;--h2:48px}
.oj-s-e445f214c5.oj-s-e445f214c5.oj-s-e445f214c5{--oj-scene-delay:0.3s}
.oj-s-e4bba8f517.oj-s-e4bba8f517.oj-s-e4bba8f517{--oj-scene-delay:0.2s}
.oj-s-e581bd87fc.oj-s-e581bd87fc.oj-s-e581bd87fc{--oj-scene-delay:0.1s}
.oj-s-e7aebaa6e1.oj-s-e7aebaa6e1.oj-s-e7aebaa6e1{--oj-scene-delay:0.32s}
.oj-s-e829533e75.oj-s-e829533e75.oj-s-e829533e75{animation-name:oj-slotb5;animation-delay:-3.6s}
.oj-s-e8b011ec4a.oj-s-e8b011ec4a.oj-s-e8b011ec4a{--oj-scene-delay:0.08s}
.oj-s-e96a83fb36.oj-s-e96a83fb36.oj-s-e96a83fb36{animation-name:oj-slotb2;animation-delay:-1.8s}
.oj-s-ed5b3ff292.oj-s-ed5b3ff292.oj-s-ed5b3ff292{--x:-175px;--y:92px;--oj-scene-delay:1.4s}
.oj-s-ed725f6c7a.oj-s-ed725f6c7a.oj-s-ed725f6c7a{animation-name:oj-slotb1;animation-delay:0s}
.oj-s-f5008936cd.oj-s-f5008936cd.oj-s-f5008936cd{animation:oj-f4 10s ease-in-out -3s infinite}
.oj-s-f62899c8eb.oj-s-f62899c8eb.oj-s-f62899c8eb{animation:oj-run 3.2s linear 0s infinite}
.oj-s-f6f5c2097b.oj-s-f6f5c2097b.oj-s-f6f5c2097b{--h:18px;--h2:40px}
.oj-s-f8492bed99.oj-s-f8492bed99.oj-s-f8492bed99{animation-name:oj-slotb10;animation-delay:0s}
.oj-s-f8519b3bb7.oj-s-f8519b3bb7.oj-s-f8519b3bb7{--oj-scene-delay:0.6s}
.oj-s-fc4006fd40.oj-s-fc4006fd40.oj-s-fc4006fd40{animation:oj-f4 10s ease-in-out 0s infinite}
.oj-s-fc9c1b2112.oj-s-fc9c1b2112.oj-s-fc9c1b2112{width:90%}
.oj-s-fd97d34385.oj-s-fd97d34385.oj-s-fd97d34385{animation:oj-f1 11s ease-in-out -4s infinite}
.oj-s-ff37302ce2.oj-s-ff37302ce2.oj-s-ff37302ce2{animation-name:oj-slotb0;animation-delay:0s}