/* ============================================================
   Octopus — custom overrides (loaded AFTER the Webflow CSS)
   1) Palette reskin: lavender / purple / deep-violet  (pastel + фиолетовый + тёмный)
   2) Navbar fix: Russian labels no longer wrap
   3) Logo badge styling
   Edit values here and reload — nothing else is touched.
   ============================================================ */

/* ---------- 1. PALETTE (redefine the design tokens) ---------- */
/* NB: the Webflow CSS redefines every token on `body` (a closer scope than :root),
   so we must override on `body` too — loaded last, it wins by source order. */
:root, body {
  /* surfaces — warm cream (from theocto.ai) */
  --color-style--bg: #fbf8f4;        /* body canvas — warm off-white */
  --brand--bg:       #fbf8f4;
  --brand--cloud:    #f3ece1;        /* warm sand section bg */
  --color-style--linear-03: #f3ece1;
  --color-style--pricing-01: #f3ece166;
  --color-style--pricing-02: #f3ece199;

  /* dark — navy ink (from theocto.ai) */
  --brand--dark:        #0f1e2e;     /* deep navy: dark sections/buttons */
  --color-style--title: #0f1e2e;     /* headings */
  --color-style--sub:   #5f6873;     /* navy-grey body/sub text */
  --color-style--stoke: #ece3d6;     /* warm border */

  /* accents — gold (theocto signature) as bright fill + purple (mascot) as secondary */
  --brand--neon:  #cdbcff;           /* light periwinkle — bright FILL (dark text reads on it) */
  --brand--light: #7c5cff;           /* purple secondary */
  --color-style--linear-01: #cdbcff; /* gradient: light periwinkle */
  --color-style--linear-02: #7c5cff; /* gradient: vibrant purple */
  --color-style--linear-04: #6a3fe0; /* deep purple */
}
/* unified accent = purple (navy dark + warm-cream canvas kept from theocto); gold removed */

/* ---------- 2. NAVBAR: stop Russian labels wrapping ---------- */
.header-block      { max-width: 980px; }     /* was 578px (sized for short EN labels) */
.header-menu-block { max-width: none; }
.header-menu-link  { white-space: nowrap; }
.button-text       { white-space: nowrap; }  /* buttons never wrap (e.g. «Начать бесплатно») */

/* ---------- 2b. Decorative gradient "shapes": lime mid-stop -> purple ---------- */
/* (endpoints are tokens, already lavender; only the hardcoded #eefb53 mid needs replacing) */
.hero-shape-01, .hero-shape-02, .testimonial-shape, .pricing-shape-01, .blog-shape {
  background-image: linear-gradient(43deg, var(--color-style--linear-01), #9a7bff 50%, var(--color-style--linear-03));
}
.hero-image-shape-01, .hero-image-shape-02 {
  background-image: linear-gradient(-13deg, var(--color-style--linear-01), #9a7bff 50%, var(--color-style--linear-03));
}

/* ---------- 2d. StoryBrand polish ---------- */
/* hero/cta highlight — remove italic, use the heading font */
.hero-title-span, .cta-title-span { font-style: normal !important; font-family: inherit !important; }

/* «Как это работает» cards — align divider + stat to the bottom (equal-height cards) */
.why-finsaro-card-wrap { height: 100%; }
.why-finsaro-line { margin-top: auto; }

/* «Управление» — keep the screenshot bleed but stop page overflow + give the button room */
.features-section { overflow: hidden; }
.feature-content-wrap { padding-bottom: 40px; }

/* ---------- 2c. «Управление» screenshot fills the card (cover), like the original ---------- */
/* Russian text column is taller than the capped image -> gap. On desktop let the image
   stretch to the column height and cover the area (enlarge + bleed off right/bottom). */
@media (min-width: 992px) {
  .features-image-wrap { height: 100%; align-self: stretch; overflow: hidden; }
  .features-image {
    width: 100%; height: 100%; max-height: none;
    object-fit: cover; object-position: left top;
  }
}

/* ---------- 3. LOGO badge (octopus) ---------- */
/* the new SVG is a self-contained badge, so drop the coloured square wrapper */
/* logo = official octopus mascot + "Octopus" wordmark (matches theocto.ai login lockup) */
.header-brand, .header-brand.w--current {
  background-color: transparent !important;
  width: auto !important; height: auto;
  padding: 0; gap: 10px;
}
.header-logo { width: auto; height: 40px; }
.logo-word {
  font-family: 'Clashgrotesk Variable', 'Lato', sans-serif;
  font-weight: 600; font-size: 22px; line-height: 1;
  letter-spacing: -0.005em; color: #fff; white-space: nowrap;
}
.footer-logo-wrap, .footer-logo-wrap.w--current { background-color: transparent !important; }
.footer-logo  { height: 40px; width: auto; }

/* ---------- 5. Hero "post inside Octopus" preview (real generated post + video) ---------- */
.hero-image-wrapper:has(.octo-hero-preview) { height: auto !important; }
.octo-hero-preview {
  display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: center;
  background: var(--color-style--white); padding: 24px;
  font-family: 'Lato', sans-serif;
}
.ohp-media {
  width: 300px; height: 300px;
  border-radius: 16px; overflow: hidden; background: #0f1e2e;
}
.ohp-media video, .ohp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ohp-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ohp-body { min-width: 0; display: block; }
.ohp-head { display: flex; align-items: center; gap: 12px; }
.ohp-ava { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, #8b6cff, #6a3fe0); }
.ohp-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ohp-meta b { color: var(--color-style--title); font-size: 15px; font-weight: 700; }
.ohp-meta span { color: var(--color-style--sub); font-size: 12.5px; }
.ohp-badge { margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  background: var(--brand--neon); color: var(--brand--dark);
  font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; }
.ohp-caption { margin-top: 12px; overflow: hidden; max-height: 100px; }
.ohp-caption p { margin: 0 0 9px; color: var(--color-style--title);
  font-size: 14px; line-height: 1.55; }
.ohp-caption .ohp-price { font-weight: 700; }
.ohp-foot { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.ohp-approve { background: var(--brand--dark); color: #fff; border-radius: 11px;
  padding: 12px 20px; font-weight: 700; font-size: 14px; }
.ohp-edit { color: var(--color-style--sub); font-size: 14px; }
.ohp-platforms { display: none; }  /* redundant with the platform strip directly below the hero */
.ohp-platforms img { width: 22px; height: 22px; }
@media (max-width: 767px) {
  .octo-hero-preview { flex-direction: column; gap: 18px; padding: 16px; }
  .ohp-media { width: 100%; }
}

/* ---------- 6. Live "post inside Octopus" card (placed in the «Управление» section) ---------- */
/* neutralise the screenshot wrapper so the self-contained card sits cleanly */
.features-image-wrap:has(.octo-post-card){
  background: transparent !important; border: 0 !important; height: auto !important;
  overflow: visible !important; display: flex; justify-content: center; align-items: center;
}
/* lift the card off the section bottom so it doesn't touch the edge */
.feature-content-block:has(.octo-post-card){ padding-bottom: 56px; align-items: center; }
.octo-post-card{
  width: 100%; max-width: 380px; background: var(--color-style--white);
  border: 1px solid var(--color-style--stoke); border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,30,46,.10); font-family: 'Lato', sans-serif;
}
.opc-head{ display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
.opc-tg{ width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; }
.opc-badge{ margin-left: auto; flex: 0 0 auto; white-space: nowrap;
  background: var(--brand--neon); color: var(--brand--dark);
  font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 400;
  padding: 8px 15px; border-radius: 999px; }
/* bulletproof square video box (padding-bottom hack — no reliance on <video> intrinsic size) */
.opc-media{ position: relative; width: 100%; height: 0; padding-bottom: 100%; background: #0f1e2e; }
.opc-media video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* scrollable caption — full text, fades into blur before the button */
.opc-caption{ padding: 12px 16px 6px; max-height: 130px; overflow-y: auto; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
.opc-caption::-webkit-scrollbar{ width: 4px; }
.opc-caption::-webkit-scrollbar-thumb{ background: rgba(15,30,46,.18); border-radius: 4px; }
.opc-caption p{ margin: 0 0 8px; color: var(--color-style--title); font-size: 13.5px; line-height: 1.5; }
.opc-caption .opc-price{ font-weight: 700; }
.opc-foot{ padding: 6px 16px 16px; }
.opc-approve{ display: block; text-align: center; background: var(--brand--dark); color: #fff;
  border-radius: 11px; padding: 12px; font-weight: 700; font-size: 14px; }
@media (max-width: 991px){ .octo-post-card{ max-width: 420px; margin: 0 auto; } }

/* ---------- 7. Octopus notifications panel («Контент-план» card) ---------- */
.octo-notif{ display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 6px 0 2px; font-family: 'Lato', sans-serif; }
.on-bell{ width: 56px; height: 56px; border-radius: 16px; background: #fff;
  box-shadow: 0 10px 26px rgba(15,30,46,.10); display: flex; align-items: center; justify-content: center; position: relative; }
.on-bell svg{ width: 26px; height: 26px; }
.on-dot{ position: absolute; top: 13px; right: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d4f; border: 2px solid #fff; }
.on-line{ width: 2px; height: 22px; background: rgba(15,30,46,.12); }
.on-list{ width: 100%; background: rgba(255,255,255,.45); border: 1px solid var(--color-style--stoke);
  border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.on-item{ display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 12px; padding: 13px 14px; }
.on-ic{ flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.on-ic svg{ width: 22px; height: 22px; }
.on-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.on-txt b{ color: var(--color-style--title); font-size: 15px; font-weight: 700; }
.on-txt span{ color: var(--color-style--sub); font-size: 13px; line-height: 1.35; }

/* ---------- 8. «Голос бренда» panel («ИИ говорит вашим голосом» card) ---------- */
.feature-images{ display: none; }                          /* hide the card's leftover finance thumbnails */
.feature-image-wrapper:has(.octo-voice){ display: block; }
.octo-voice{ width: 100%; background: #fff; border: 1px solid var(--color-style--stoke);
  border-radius: 18px; padding: 20px; font-family: 'Lato', sans-serif; box-shadow: 0 12px 32px rgba(15,30,46,.06); }
.ov-label{ display: inline-block; background: #efe9fb; color: #6a3fe0; font-size: 12px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }
.ov-row{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ov-key{ color: var(--color-style--sub); font-size: 13px; }
.ov-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.ov-chips i{ font-style: normal; background: #efe9fb; color: #6a3fe0;
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; }
.ov-sample{ display: flex; gap: 11px; align-items: flex-start; background: var(--brand--bg);
  border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.ov-check{ flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--color-style--linear-02); display: flex; align-items: center; justify-content: center; }
.ov-check svg{ width: 13px; height: 13px; }
.ov-sample-t{ color: var(--color-style--title); font-size: 14px; line-height: 1.5; }
.ov-meta{ color: var(--color-style--sub); font-size: 12.5px; }

/* ---------- 9. Adaptation hub: Octopus in the centre, platforms around («Адаптация» card) ---------- */
.octo-hub{ position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 300px;
  max-width: 380px; margin: 0 auto; font-family: 'Lato', sans-serif; }
.oh-core{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffffff, #efeafb);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 26px rgba(124,92,255,.05), 0 0 0 62px rgba(124,92,255,.035),
              0 0 0 104px rgba(124,92,255,.02), 0 12px 30px rgba(15,30,46,.10); }
.oh-core img{ width: 60px; height: 60px; }
.oh-chip{ position: absolute; display: flex; align-items: center; gap: 8px; background: #fff;
  border-radius: 999px; padding: 9px 15px 9px 9px; box-shadow: 0 8px 22px rgba(15,30,46,.10);
  font-size: 14px; font-weight: 600; color: var(--color-style--title); white-space: nowrap; }
.oh-chip img{ width: 24px; height: 24px; flex: 0 0 auto; }
.oh-tl{ top: 17%; left: 0; }
.oh-tr{ top: 19%; right: 2%; }

/* ---------- 10. «Все соцсети в одном месте»: channels screenshot (back) + publish card (front) ---------- */
.feature-image-wrapper._01{ position: relative; margin-top: 22px !important; padding-bottom: 6px !important; }
.feature-image._01{ max-width: 300px !important; }
.oc-front{ position: absolute; right: 0; bottom: 24px; width: 70%; max-width: 262px;
  background: #fff; border-radius: 16px; box-shadow: 0 18px 44px rgba(15,30,46,.16);
  padding: 14px 15px; font-family: 'Lato', sans-serif; }
.ocf-head{ display: flex; align-items: center; gap: 9px; }
.ocf-check{ flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-style--linear-02); display: flex; align-items: center; justify-content: center; }
.ocf-check svg{ width: 13px; height: 13px; }
.ocf-head b{ color: var(--color-style--title); font-size: 15px; font-weight: 700; }
.ocf-sub{ color: var(--color-style--sub); font-size: 12.5px; margin: 4px 0 11px; }
.ocf-icons{ display: flex; gap: 8px; align-items: center; }
.ocf-icons img{ width: 24px; height: 24px; }

/* ---------- 11. Static counter numbers (RU notation) — one line, consistent ---------- */
.count-num{ justify-content: center; }
.count-num .count-title{ font-size: 40px; line-height: 1.05; white-space: nowrap; }

/* ---------- 12. «Trusted Platform» hub (Our Story, /about): Octopus + social networks ---------- */
.octo-trust{ width: 100%; background: #ece7e1; border-radius: 28px; padding: 32px 26px;
  text-align: center; font-family: 'Lato', sans-serif; }
.ot-badge{ display: inline-block; background: #fff; color: var(--color-style--title);
  font-size: 18px; font-weight: 700; padding: 13px 26px; border-radius: 999px; box-shadow: 0 8px 22px rgba(15,30,46,.07); }
.ot-ring{ position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 380px; margin: 26px auto; }
.ot-core{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff, #efeafb);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 24px rgba(124,92,255,.05), 0 0 0 56px rgba(124,92,255,.03), 0 10px 26px rgba(15,30,46,.10); }
.ot-core img{ width: 56px; height: 56px; }
.ot-node{ position: absolute; width: 56px; height: 56px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 20px rgba(15,30,46,.09); display: flex; align-items: center; justify-content: center;
  transform: translate(-50%,-50%); }
.ot-node img{ width: 30px; height: 30px; }
.ot-1{ left: 28%; top: 24%; } .ot-2{ left: 72%; top: 24%; }
.ot-3{ left: 11%; top: 50%; } .ot-4{ left: 89%; top: 50%; }
.ot-5{ left: 28%; top: 76%; } .ot-6{ left: 72%; top: 76%; }
.ot-title{ font-size: 22px; font-weight: 700; color: var(--color-style--title); margin-top: 6px; }
.ot-pills{ display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ot-pills span{ display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 999px;
  padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--color-style--title); box-shadow: 0 6px 16px rgba(15,30,46,.05); }
.ot-pills svg{ width: 18px; height: 18px; }
.oh-bl{ bottom: 12%; left: 4%; }
.oh-br{ bottom: 20%; right: 0; }

/* ---------- 13. Features capability panels (Core-Capabilities, /features): Octopus mockups ---------- */
.core-capabilities-image-wrap:has(.cap-panel){ display: flex; align-items: stretch; justify-content: center;
  height: 252px; min-height: 0; aspect-ratio: auto; padding: 20px; background: #f6f3ee; overflow: visible; }
.cap-panel{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center;
  background: #fff; border: 1px solid #e8e2d8; border-radius: 16px; padding: 16px;
  font-family: 'Lato', sans-serif; box-shadow: 0 10px 26px rgba(15,30,46,.06); }
/* hide the «Подробнее» button + don't link the capability cards anywhere */
.core-capabilities-button-block{ display: none; }
.core-capabilities-card-wrap{ cursor: default; }
.cap-panel .cp-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.cap-panel .cp-top b{ color: #0f1e2e; font-size: 15px; font-weight: 700; }
.cap-panel .cp-ai{ background: #ede7fb; color: #6a3fe0; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.cap-text{ background: #f6f3ee; border-radius: 12px; padding: 12px 14px; color: #2a3340; font-size: 14px; line-height: 1.5; }
.cap-chips{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cap-chips i{ font-style: normal; background: #ede7fb; color: #6a3fe0; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 8px; }
.cap-thumbs{ display: flex; gap: 9px; }
.cap-thumbs span{ flex: 1; height: 80px; border-radius: 11px; }
.cap-thumbs .t1{ background: linear-gradient(135deg,#8b6cff,#6a3fe0); }
.cap-thumbs .t2{ background: linear-gradient(135deg,#b6a4ef,#7c5cff); }
.cap-thumbs .t3{ background: linear-gradient(135deg,#cdbcff,#9a7bff); }
.cap-meta{ color: #7a8290; font-size: 13px; margin-top: 12px; }
.cap-cal{ display: flex; gap: 6px; }
.cap-cal .cp-col{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cap-cal .cp-d{ color: #9aa1ab; font-size: 11px; font-weight: 600; }
.cap-cal .cp-b{ width: 100%; height: 30px; border-radius: 7px; background: #f0ecf9; }
.cap-cal .cp-b.on{ background: linear-gradient(180deg,#9a7bff,#6a3fe0); }
.cap-pub{ display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cap-pub img{ width: 34px; height: 34px; }
.cap-status{ margin-top: 13px; display: flex; align-items: center; gap: 7px; color: #1f9d57; font-weight: 700; font-size: 13.5px; }
.cap-status svg{ width: 17px; height: 17px; }

/* ---------- 14. (было) скрытие шаблонной колонки «Сервисные» — теперь на её
   месте настоящая колонка «Правовое» со ссылками на юрдокументы, см. build_legal.py ---------- */

/* ---------- 15. Blog: static cards + article pages; hide sparse tabs/search/trending ---------- */
.blog-section .post-tabs-menu,
.blog-section .search-wrapper,
.blog-section .blog-divider,
.blog-section .blog-shade,
.trending-section{ display: none !important; }
/* card cover = brand gradient + emoji (no image) */
.blog-image-wrap.oc-cover{ display: flex; align-items: center; justify-content: center; min-height: 210px; border-radius: 16px; overflow: hidden; }
.oc-cover-emoji{ font-size: 66px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(15,30,46,.18)); }
.oc-cover-1{ background: linear-gradient(135deg,#8b6cff,#6a3fe0); }
.oc-cover-2{ background: linear-gradient(135deg,#b6a4ef,#7c5cff); }
.oc-cover-3{ background: linear-gradient(135deg,#7c5cff,#9a7bff); }
.oc-cover-4{ background: linear-gradient(135deg,#cdbcff,#8b6cff); }
.oc-cover-5{ background: linear-gradient(135deg,#9a7bff,#6a3fe0); }
.oc-cover-6{ background: linear-gradient(135deg,#a98bff,#7c5cff); }
/* article page */
.octo-article-hero{ max-width: 820px; margin: 0 auto; padding: 56px 24px 4px; text-align: center; font-family: 'Lato', sans-serif; }
.octo-article-hero .oa-cat{ display: inline-block; background: #ede7fb; color: #6a3fe0; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.octo-article-hero .oa-title{ font-family: 'Clashgrotesk Variable', sans-serif; color: #0f1e2e; font-size: 44px; line-height: 1.12; font-weight: 600; margin: 18px 0 14px; }
.octo-article-hero .oa-meta{ color: #7a8290; font-size: 15px; }
.oa-coverbar{ max-width: 980px; margin: 28px auto 6px; height: 230px; border-radius: 24px; display: flex; align-items: center; justify-content: center; }
.oa-coverbar .oc-cover-emoji{ font-size: 104px; }
.octo-article{ max-width: 760px; margin: 0 auto; padding: 10px 24px 36px; font-family: 'Lato', sans-serif; color: #2a3340; font-size: 18px; line-height: 1.72; }
.octo-article h2{ font-family: 'Clashgrotesk Variable', sans-serif; color: #0f1e2e; font-size: 28px; line-height: 1.22; margin: 42px 0 14px; font-weight: 600; }
.octo-article h3{ color: #0f1e2e; font-size: 21px; margin: 28px 0 10px; font-weight: 700; }
.octo-article p{ margin: 0 0 18px; }
.octo-article ul, .octo-article ol{ margin: 0 0 18px; padding-left: 24px; }
.octo-article li{ margin: 0 0 9px; }
.octo-article blockquote{ margin: 28px 0; padding: 18px 24px; border-left: 4px solid #7c5cff; background: #f6f3ee; border-radius: 0 14px 14px 0; font-size: 19px; color: #0f1e2e; font-style: italic; }
.octo-article a{ color: #6a3fe0; text-decoration: underline; }
.octo-article strong{ color: #0f1e2e; }
.oa-cta{ max-width: 760px; margin: 8px auto 64px; padding: 30px 28px; background: #0f1e2e; border-radius: 24px; text-align: center; font-family: 'Lato', sans-serif; }
.oa-cta-title{ font-family: 'Clashgrotesk Variable', sans-serif; color: #fff; font-size: 25px; margin: 0 0 18px; font-weight: 600; }
.oa-cta a{ display: inline-block; background: #fff; color: #0f1e2e; font-weight: 700; padding: 14px 30px; border-radius: 999px; text-decoration: none; }

/* ---------- 16. Pricing: Enterprise banner + Free note (/pricing) ---------- */
.octo-ent-wrap{ padding: 8px 24px 16px; }
.octo-ent{ max-width: 1180px; margin: 0 auto; background: #0f1e2e; border-radius: 26px; padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; font-family: 'Lato', sans-serif; }
.octo-ent-left{ flex: 1 1 460px; }
.octo-ent-badge{ display: inline-block; background: rgba(255,255,255,.12); color: #cdbcff; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.octo-ent-title{ font-family: 'Clashgrotesk Variable', sans-serif; color: #fff; font-size: 26px; font-weight: 600; margin: 12px 0 8px; }
.octo-ent-sub{ color: #b9c2cf; font-size: 15px; line-height: 1.55; max-width: 660px; }
.octo-ent-right{ flex: 0 0 auto; text-align: center; }
.octo-ent-price{ color: #fff; font-family: 'Clashgrotesk Variable', sans-serif; font-size: 30px; font-weight: 600; white-space: nowrap; }
.octo-ent-price span{ font-size: 16px; color: #9aa7b6; font-family: 'Lato', sans-serif; }
.octo-ent-btn{ display: inline-block; margin-top: 14px; background: #fff; color: #0f1e2e; font-weight: 700; padding: 14px 28px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.octo-free-note{ max-width: 1180px; margin: 18px auto 0; text-align: center; color: #5c6573; font-family: 'Lato', sans-serif; font-size: 15px; }
.octo-free-note a{ color: #6a3fe0; font-weight: 700; text-decoration: none; white-space: nowrap; }
.octo-free-note strong{ color: #0f1e2e; }
/* equal-height pricing cards (grid was align-items:center -> different heights) */
.pricing-card-block{ align-items: stretch !important; }
.pricing-card-wrapper{ height: 100%; align-self: stretch !important; }

/* ---------- 17. Two enterprise banners + 4-column comparison matrix ---------- */
.octo-ent + .octo-ent{ margin-top: 16px; }
.octo-ent-custom{ background: #241a44; }
.octo-ent-custom .octo-ent-badge{ background: rgba(205,188,255,.18); color: #cdbcff; }
/* fit 4 value columns: narrower label column (+ right padding so labels don't touch col 1) */
.compare-title-block{ flex: 0 0 340px !important; padding-right: 28px; box-sizing: border-box; }
.compare-card-block{ flex: 1 1 auto !important; width: auto !important; gap: 16px !important; }
.compare-card-block .compare-wrap{ flex: 1 1 0 !important; min-width: 0 !important; }
/* center the column headers: name, subtitle, «Выбрать план» button */
.compare-wrap{ text-align: center !important; }
.compare-wrap .compare-button-block{ display: flex !important; justify-content: center !important; }

/* ---------- 18. «Премиум» — светлая детальная панель (150k) ---------- */
.octo-prem{ max-width: 1180px; margin: 0 auto 16px; background: #fff; border: 1px solid #e8e2d8; border-radius: 24px;
  padding: 30px 36px; font-family: 'Lato', sans-serif; box-shadow: 0 12px 30px rgba(15,30,46,.07); }
.octo-prem-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid #efe9e0; padding-bottom: 22px; margin-bottom: 22px; }
.octo-prem-badge{ display: inline-block; background: #ede7fb; color: #6a3fe0; font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.octo-prem-title{ font-family: 'Clashgrotesk Variable', sans-serif; color: #0f1e2e; font-size: 26px; font-weight: 600; margin-top: 12px; }
.octo-prem-priceblock{ flex: 0 0 auto; text-align: right; }
.octo-prem-price{ font-family: 'Clashgrotesk Variable', sans-serif; color: #0f1e2e; font-size: 34px; font-weight: 600; white-space: nowrap; }
.octo-prem-price span{ font-size: 17px; color: #7a8290; font-family: 'Lato', sans-serif; }
.octo-prem-btn{ display: inline-block; margin-top: 12px; background: #0f1e2e; color: #fff; font-weight: 700; padding: 13px 34px; border-radius: 999px; text-decoration: none; }
.octo-prem-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.octo-prem-subtitle{ color: #0f1e2e; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.octo-prem-col ul{ list-style: none; margin: 0; padding: 0; }
.octo-prem-col li{ position: relative; padding-left: 26px; margin-bottom: 10px; color: #2a3340; font-size: 15px; line-height: 1.45; }
.octo-prem-col.fit li::before{ content: "•"; position: absolute; left: 6px; top: -1px; color: #9a7bff; font-size: 18px; }
.octo-prem-col.incl li::before{ content: "✓"; position: absolute; left: 2px; top: 0; color: #6a3fe0; font-weight: 700; }
@media (max-width: 700px){ .octo-prem-body{ grid-template-columns: 1fr; } .octo-prem-priceblock{ text-align: left; } }

/* ─── Карусель постов в карточке (features-секция) ────────────────────
   Листается пост целиком: медиа + подпись. Слайды едут горизонтально,
   высота карточки постоянна — подпись всегда одной высоты и скроллится
   внутри себя, иначе карточка прыгала бы на каждом переключении. */
.opc-carousel{ position: relative; overflow: hidden; }
.opc-track{ display: flex; align-items: flex-start;
  transition: transform .45s cubic-bezier(.23,1,.32,1); will-change: transform; }
.opc-slide{ flex: 0 0 100%; width: 100%; }
.opc-slide .opc-media{ position: relative; width: 100%; height: 0; padding-bottom: 100%;
  background: #0f1e2e; }
.opc-slide .opc-media video,
.opc-slide .opc-media img{ position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.opc-slide .opc-caption{ height: 130px; max-height: none; }
.opc-list{ margin: 0 0 8px; padding-left: 18px; }
.opc-list li{ margin: 0 0 6px; color: var(--color-style--title); font-size: 13.5px; line-height: 1.5; }

/* Слой управления повторяет квадрат медиа, поэтому стрелки встают по центру
   видео, а точки — у его нижнего края, а не посреди текста. */
.opc-controls{ position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1 / 1;
  pointer-events: none; z-index: 2; }
.opc-nav{ position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto;
  width: 32px; height: 32px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: rgba(15,30,46,.45); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.opc-carousel:hover .opc-nav,
.opc-nav:focus-visible{ opacity: 1; }
.opc-nav:hover{ background: rgba(15,30,46,.7); }
.opc-nav::after{ content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.opc-prev{ left: 10px; }
.opc-next{ right: 10px; }
.opc-prev::after{ transform: translate(-35%,-50%) rotate(-135deg); }
.opc-next::after{ transform: translate(-65%,-50%) rotate(45deg); }
.opc-nav[disabled]{ opacity: 0 !important; pointer-events: none; }

.opc-dots{ position: absolute; left: 0; right: 0; bottom: 10px; pointer-events: auto;
  display: flex; justify-content: center; gap: 6px; }
.opc-dot{ width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.45); transition: width .25s ease, background-color .25s ease; }
.opc-dot.is-active{ width: 18px; border-radius: 3px; background: #fff; }

@media (hover: none){ .opc-nav{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .opc-track{ transition: none; } }

/* ─── Юридические страницы (legal-*.html, генерируются build_legal.py) ─── */
.legal-section{ padding: 112px 0 72px; }
.legal-head{ max-width: 820px; margin: 0 auto 28px; }
.legal-back{ display: inline-block; margin-bottom: 14px; color: var(--color-style--paragraph);
  font-size: 14px; text-decoration: none; }
.legal-back:hover{ color: var(--brand--dark); }
.legal-title{ margin: 0; font-size: 34px; line-height: 1.2; font-weight: 700;
  color: var(--color-style--title); text-transform: none; }
.legal-body{ max-width: 820px; margin: 0 auto; color: var(--color-style--paragraph);
  font-size: 15.5px; line-height: 1.62; }
.legal-body h2{ margin: 30px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 700;
  color: var(--color-style--title); }
.legal-body h3{ margin: 22px 0 8px; font-size: 17px; line-height: 1.35; font-weight: 700;
  color: var(--color-style--title); }
.legal-body p{ margin: 0 0 12px; }
.legal-list{ margin: 0 0 14px; padding-left: 22px; }
.legal-list li{ margin-bottom: 7px; }
/* Таблицы (реквизиты и т.п.) — на узком экране скроллятся вбок, а не ломают вёрстку */
.legal-table-wrap{ margin: 16px 0 20px; overflow-x: auto; }
.legal-table{ width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 420px; }
.legal-table th, .legal-table td{ border: 1px solid rgba(15,30,46,.12); padding: 9px 12px;
  text-align: left; vertical-align: top; }
.legal-table th{ background: rgba(15,30,46,.04); font-weight: 700; color: var(--color-style--title); }
@media (max-width: 767px){
  .legal-title{ font-size: 26px; }
  .legal-body{ font-size: 15px; }
  .legal-section{ padding: 96px 0 56px; }
}

/* ─── Футер: четвёртая колонка со юрдокументами ───────────────────────
   В шаблоне сетка жёстко на 3 колонки, поэтому четвёртая («Правовое»)
   заворачивалась под первую. Делаем 4 колонки на десктопе и аккуратную
   деградацию на планшете/мобиле. */
@media (min-width: 992px){
  .footer-link-block{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 991px){
  .footer-link-block{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 26px; }
}
@media (max-width: 767px){
  .footer-link-block{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 22px; }
}
/* Длинные названия документов не должны наезжать на соседнюю колонку */
.footer-link-wrap .footer-text-link{ display: block; padding-right: 14px; }

/* ─── Лента соцсетей: звёздочка у Meta-платформ + сноска в футере ─── */
.trusted-logo-item{ position: relative; display: inline-flex; align-items: center; }
.trusted-logo-star{ position: absolute; top: -2px; left: -4px; line-height: 1;
  font-size: 15px; font-weight: 700; color: var(--color-style--paragraph); pointer-events: none; }
.footer-meta-note{ margin-bottom: 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--color-style--paragraph); opacity: .75; }

/* ─── Лента соцсетей: статичный ряд по центру ─────────────────────────
   Изначально это была бегущая строка (Webflow двигал .trusted-logo-loop
   через transform, а два цикла обеспечивали бесшовность). С четырьмя
   иконками движение выглядело странно, поэтому: клон убран в разметке,
   transform заблокирован, ряд отцентрован, градиенты по краям (они
   маскировали въезд/выезд) скрыты. */
.trusted-logo-container{ justify-content: center !important; }
.trusted-logo-loop{ justify-content: center !important; flex-wrap: wrap;
  transform: none !important; animation: none !important; }
.trusted-logo-overlay-01,
.trusted-logo-overlay-02{ display: none !important; }
/* Равные отступы вокруг иконок вместо правого margin у каждой */
.trusted-logo-loop .trusted-logo-item{ margin: 0 26px; }
.trusted-logo-loop .trusted-logo-image{ margin-right: 0 !important; }
@media (max-width: 767px){ .trusted-logo-loop .trusted-logo-item{ margin: 0 16px; } }