/* BeOnTop homepage, November 2026.
   Loaded after the compiled homepage bundle, on the English homepage only.
   Every rule is prefixed with [dir] so it outranks the bundle's [dir] rules.
   Motion uses transform and opacity only, so it runs on the compositor. */

:root {
  --bt-ink: #120d2b;
  --bt-indigo: #261e4a;
  --bt-violet: #6848e4;
  --bt-lilac: #b9a7ff;
  --bt-coral: #f34c3a;
  --bt-amber: #ebb430;
  --bt-mint: #13c98f;
  --bt-azure: #4f8fe8;
  --bt-bg: #f7f6fc;
  --bt-line: #e9e6f4;
  --bt-text: #3b3756;
  --bt-muted: #6b6784;
  --bt-out: cubic-bezier(.23, 1, .32, 1);
  --bt-wrap: 1270px;
  --bt-shadow: 0 1px 2px rgba(38, 30, 74, .05), 0 12px 32px -12px rgba(38, 30, 74, .16);
  --bt-shadow-lg: 0 2px 4px rgba(38, 30, 74, .06), 0 28px 60px -20px rgba(38, 30, 74, .28);
}

/* ---------- Hero ---------- */

[dir] .bot-ai-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: normal;
  background:
    radial-gradient(52% 78% at 76% 34%, rgba(104, 72, 228, .62), transparent 68%),
    radial-gradient(34% 52% at 100% 92%, rgba(243, 76, 58, .22), transparent 72%),
    radial-gradient(40% 60% at 4% 104%, rgba(19, 201, 143, .14), transparent 72%),
    linear-gradient(158deg, #1b1440 0%, #120d2b 58%, #191239 100%);
}
[dir] .bot-ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 90% at 72% 40%, #000 10%, transparent 76%);
  mask-image: radial-gradient(70% 90% at 72% 40%, #000 10%, transparent 76%);
}
[dir] .bot-ai-hero :where(p, ul, ol, li, figure, dl, dt, dd) { margin: 0; padding: 0; font-size: inherit; line-height: inherit; list-style: none; }
[dir] .bot-ai-hero :where(p, li, dd, dt, figure)::before { content: none; }
[dir] .bot-ai-hero :where(a) { background: transparent; }

[dir] .bot-ai-hero__wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: calc(var(--bt-wrap) + 44px);
  min-height: 690px;
  margin: 0 auto;
  padding: 0 22px;
}
[dir] .bot-ai-hero__copy { position: relative; z-index: 4; padding: 64px 0 56px; }

[dir] .bot-ai-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bt-amber);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
[dir] .bot-ai-hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bt-amber);
  box-shadow: 0 0 0 4px rgba(235, 180, 48, .18);
}
[dir] .bot-ai-hero__headline {
  margin: 20px 0 0;
  color: #fff;
  font-size: clamp(40px, 4.9vw, 70px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.024em;
  text-wrap: balance;
  min-height: 2.08em;
}
[dir] .bot-ai-hero__headline a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(90deg, #8b6bf4, #f4655a 58%, #e9d051) left bottom / 100% 5px no-repeat;
  padding-bottom: 2px;
}
[dir] .bot-ai-hero__lede {
  max-width: 560px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 19px;
  line-height: 1.58;
  text-wrap: pretty;
}
[dir] .bot-ai-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
[dir] .bot-ai-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms var(--bt-out), box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
[dir] .bot-ai-hero__btn:active { transform: scale(.97); }
[dir] .bot-ai-hero__btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 30px -10px rgba(243, 76, 58, .7);
}
[dir] .bot-ai-hero__btn--ghost {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset;
}
@media (hover: hover) and (pointer: fine) {
  [dir] .bot-ai-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 20px 36px -10px rgba(243, 76, 58, .8); }
  [dir] .bot-ai-hero__btn--ghost:hover { background: rgba(255, 255, 255, .12); }
}
[dir] .bot-ai-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  font-weight: 500;
}
[dir] .bot-ai-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
[dir] .bot-ai-hero__proof li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bt-mint);
}
[dir] .bot-ai-hero__proof a {
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .34);
}

[dir] .bot-ai-hero__since { margin: 14px 0 0; color: rgba(255, 255, 255, .86); font-size: 13px; font-weight: 500; letter-spacing: .01em; }

/* ---------- Stage: Kate between the rings ---------- */

[dir] .bot-ai-hero__demo { position: relative; align-self: stretch; min-height: 690px; }
[dir] .bot-stage { position: absolute; inset: 0; }
[dir] .bot-kate {
  position: absolute;
  z-index: 2;
  left: 51%;
  bottom: 0;
  width: auto;
  height: 95%;
  max-width: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 40px rgba(10, 6, 30, .45));
}
[dir] .bot-orbit {
  position: absolute;
  left: 53%;
  top: 53%;
  width: 640px;
  height: 640px;
  margin: -320px 0 0 -320px;
  perspective: 1500px;
  pointer-events: none;
}
[dir] .bot-orbit--back { z-index: 1; }
[dir] .bot-orbit--front { z-index: 3; clip-path: inset(50% -40% -40% -40%); }

[dir] .bot-donut {
  position: absolute;
  inset: 54px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--bt-mint) 0 26%, #39b7c6 38%, var(--bt-azure) 54%, var(--bt-violet) 82%, #5a3fd0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 76.4%);
  mask: radial-gradient(farthest-side, transparent 76%, #000 76.4%);
  animation: bot-spin 90s linear infinite;
}
[dir] .bot-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(74deg) rotateY(-12deg);
}
[dir] .bot-tilt--b { inset: 40px; transform: rotateX(70deg) rotateY(16deg); }
[dir] .bot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: bot-spin 34s linear infinite;
}
[dir] .bot-ring--a {
  background: conic-gradient(from 0deg, transparent 0 8%, var(--bt-amber) 22%, var(--bt-coral) 44%, transparent 62%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 96.6%, #000 97%);
  mask: radial-gradient(farthest-side, transparent 96.6%, #000 97%);
}
[dir] .bot-ring--b {
  animation-duration: 52s;
  animation-direction: reverse;
  background: conic-gradient(from 90deg, transparent 0 14%, var(--bt-lilac) 34%, #fff 48%, transparent 70%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 97.2%, #000 97.6%);
  mask: radial-gradient(farthest-side, transparent 97.2%, #000 97.6%);
}
[dir] .bot-node {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--bt-amber);
  box-shadow: 0 0 18px 3px rgba(235, 180, 48, .75);
  animation: bot-spin 34s linear infinite;
  transform-origin: 7px 327px;
}
[dir] .bot-node--b { background: var(--bt-mint); box-shadow: 0 0 18px 3px rgba(19, 201, 143, .7); animation-delay: -17s; }
@keyframes bot-spin { to { transform: rotate(360deg); } }

/* ---------- Demo cards: found, answered, booked ---------- */
[dir] .bot-cards { display: contents; }
[dir] .bot-card {
  position: absolute;
  z-index: 5;
  color: var(--bt-indigo);
  background: rgba(255, 255, 255, .97);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(8, 4, 26, .6), 0 0 0 1px rgba(255, 255, 255, .5);
}
[dir] .bot-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--bt-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[dir] .bot-card__step {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0;
  background: linear-gradient(160deg, var(--bt-violet), #4f36c4);
}
[dir] .bot-card__wa { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #0b7a4b; }
[dir] .bot-card__wa::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25d366; }

/* 1: a Google-style result, built from type only */
[dir] .bot-card--found { right: -14px; top: 30px; width: 254px; padding: 13px 14px 12px; }
[dir] .bot-serp { padding: 10px 11px 11px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e6e4f0; }
[dir] .bot-serp__q {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 0 0 8px;
  border-bottom: 1px solid #ecebf3;
  color: #3c4043;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
[dir] .bot-serp__g {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--bt-indigo);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 1px #dfe1e5 inset;
}
[dir] .bot-serp__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[dir] .bot-serp__pos {
  flex: none;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #0b7a4b;
  font-size: 11px;
  font-weight: 700;
  background: #ddf6ea;
}
[dir] .bot-serp__site { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: #202124; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
[dir] .bot-serp__site small { overflow: hidden; text-overflow: ellipsis; }
[dir] .bot-serp__site small { color: #5f6368; font-size: 10.5px; font-weight: 400; }
[dir] .bot-serp__fav { flex: none; width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(from 200deg, var(--bt-coral), var(--bt-violet), var(--bt-mint), var(--bt-coral)); box-shadow: 0 0 0 2px #fff inset; }
[dir] .bot-serp__title { margin: 0 0 3px; color: #1a0dab; font-size: 13.5px; line-height: 1.3; font-weight: 500; }
[dir] .bot-serp__snip { margin: 0; color: #4d5156; font-size: 11px; line-height: 1.38; }
[dir] .bot-card__ai { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin: 10px 0 0; color: var(--bt-muted); font-size: 13px; font-weight: 500; }
[dir] .bot-card__ai b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 5px;
  border-radius: 999px;
  color: var(--bt-indigo);
  font-weight: 700;
  background: #f1effa;
}
[dir] .bot-card__ai b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(from 200deg, var(--bt-violet), var(--bt-azure), var(--bt-mint), var(--bt-violet)); }

/* 2: the WhatsApp conversation */
[dir] .bot-card--chat { left: -34px; top: 150px; width: 256px; padding: 14px; }
[dir] .bot-msg {
  max-width: 90%;
  margin: 0 0 7px;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.38;
}
[dir] .bot-msg--in { background: #f0eefa; border-bottom-left-radius: 4px; }
[dir] .bot-msg--out { margin-left: auto; background: #dff6ea; border-bottom-right-radius: 4px; }
[dir] .bot-card__by { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--bt-indigo); font-size: 12.5px; font-weight: 500; }
[dir] .bot-card__by::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 200deg, var(--bt-mint), var(--bt-azure), var(--bt-violet), var(--bt-mint)); -webkit-mask: radial-gradient(farthest-side, transparent 55%, #000 58%); mask: radial-gradient(farthest-side, transparent 55%, #000 58%); }

/* 3: the lead in the CRM, with the agents that worked on it */
[dir] .bot-card--crm { right: -10px; top: 324px; width: 254px; padding: 14px 15px; }
[dir] .bot-card--crm dl div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 12.5px;
  line-height: 1.32;
}
[dir] .bot-card--crm dt { color: var(--bt-muted); }
[dir] .bot-card--crm dd { font-weight: 500; }
[dir] .bot-agents { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #ecebf3; }
[dir] .bot-agents li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0b7a4b;
  background: #ddf6ea;
}
[dir] .bot-agents li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--bt-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
[dir] .bot-agents li.is-live { color: #6a4bd9; background: #efeafd; }
[dir] .bot-agents li.is-live::before { background: var(--bt-violet); animation: bot-blink 1.6s ease-in-out infinite; }
@keyframes bot-blink { 50% { opacity: .35; } }
[dir] .bot-ai-hero__approve { display: flex; gap: 8px; margin: 9px 0 0; }
[dir] .bot-ai-hero__approve span {
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bt-violet);
  box-shadow: 0 0 0 1px rgba(104, 72, 228, .4) inset;
}
[dir] .bot-ai-hero__approve span:first-child { color: #fff; background: var(--bt-violet); box-shadow: none; }
[dir] .bot-ai-hero__demo figcaption {
  position: absolute;
  z-index: 5;
  right: -10px;
  bottom: 8px;
  max-width: 340px;
  padding: 5px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .9);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: right;
  background: rgba(18, 13, 43, .78);
}

/* First-load choreography. The headline, lede and Kate move but never fade, so the
   largest paint is counted at first paint even while the opening overlay covers them.
   While the logo opening plays these entrances wait, and start as it opens onto the page. */
:root { --bt-d: 0ms; }
html.bot-intro-on:not(.bot-intro-go) .bot-ai-hero * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  [dir] .bot-ai-hero__eyebrow,
  [dir] .bot-ai-hero__headline,
  [dir] .bot-ai-hero__lede,
  [dir] .bot-ai-hero__actions,
  [dir] .bot-ai-hero__proof { animation: bot-rise 760ms var(--bt-out) both; animation-delay: var(--bt-d); }
  [dir] .bot-ai-hero__headline { animation-delay: calc(var(--bt-d) + 50ms); }
  [dir] .bot-ai-hero__lede { animation-delay: calc(var(--bt-d) + 110ms); }
  [dir] .bot-ai-hero__actions { animation-delay: calc(var(--bt-d) + 170ms); }
  [dir] .bot-ai-hero__proof { animation-delay: calc(var(--bt-d) + 230ms); }
  [dir] .bot-stage { animation: bot-stage 900ms var(--bt-out) both; animation-delay: var(--bt-d); }
  [dir] .bot-card--found { animation: bot-card 620ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 380ms); }
  [dir] .bot-card--chat { animation: bot-card 620ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 900ms); }
  [dir] .bot-msg { animation: bot-fade-rise 420ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 1000ms); }
  [dir] .bot-msg:nth-of-type(3) { animation-delay: calc(var(--bt-d) + 1700ms); }
  [dir] .bot-msg:nth-of-type(4) { animation-delay: calc(var(--bt-d) + 2400ms); }
  [dir] .bot-card__by { animation: bot-fade 400ms ease both; animation-delay: calc(var(--bt-d) + 2700ms); }
  [dir] .bot-card--crm { animation: bot-card 620ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 3000ms); }
  [dir] .bot-ai-hero__demo figcaption { animation: bot-fade 500ms ease both; animation-delay: calc(var(--bt-d) + 380ms); }
}
@keyframes bot-rise { from { transform: translateY(22px); } }
@keyframes bot-stage { from { transform: translateY(14px) scale(.985); } }
@keyframes bot-fade-rise { from { opacity: .001; transform: translateY(14px); } }
@keyframes bot-card { from { opacity: .001; transform: translateY(18px) scale(.97); } }
@keyframes bot-fade { from { opacity: .001; } }
@media (prefers-reduced-motion: reduce) {
  [dir] .bot-donut, [dir] .bot-ring, [dir] .bot-node, [dir] .bot-agents li.is-live::before { animation: none; }
}
[dir] .bot-ai-hero.is-paused .bot-donut,
[dir] .bot-ai-hero.is-paused .bot-ring,
[dir] .bot-ai-hero.is-paused .bot-node,
[dir] .bot-ai-hero.is-paused .bot-agents li.is-live::before { animation-play-state: paused; }

/* ---------- Page rhythm ---------- */

[dir] .home-page .l-container { max-width: none; padding: 0; overflow: visible; }
[dir=ltr] .home-page .l-container { margin-left: 0; margin-right: 0; }
[dir] .home-page .homepage-text-main__container,
[dir] .home-page .homepage-text-additional__container,
[dir] .home-page .homepage-text-seo__container,
[dir] .home-page .homepage-advantages__container,
[dir] .home-page .homepage-services__container,
[dir] .home-page .blog-widget__container,
[dir] .home-page .homepage-case__container {
  max-width: var(--bt-wrap);
  margin-left: auto;
  margin-right: auto;
}
[dir] .home-page h1,
[dir] .home-page h2 { color: var(--bt-indigo); letter-spacing: -.018em; }
[dir] .home-page h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.08; font-weight: 700; }
[dir] .home-page .l-container h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.14; font-weight: 700; }
[dir] .home-page .l-container h3 { color: var(--bt-indigo); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
[dir] .home-page .l-container p { color: var(--bt-text); font-size: 17px; line-height: 1.68; }
[dir] .home-page .l-container a:not([class]) { color: var(--bt-violet); text-decoration: none; box-shadow: 0 1px 0 rgba(104, 72, 228, .3); transition: box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .l-container a:not([class]):hover { box-shadow: 0 2px 0 var(--bt-violet); }
}

/* Heading of the SEO section and the moved form */
[dir] .home-page .homepage-text-main { padding: 72px 22px 40px; background: #fff; }
[dir] .bot-seo-form {
  margin: 26px 0 40px;
  padding: 24px 26px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--bt-bg));
  box-shadow: 0 0 0 1px var(--bt-line), var(--bt-shadow);
}
[dir] .bot-seo-form .form-slider,
[dir] .bot-seo-form .form-slider__container { padding: 0; margin: 0; max-width: none; width: auto; background: transparent; box-shadow: none; text-align: left; }
[dir] .home-page .bot-seo-form .form-slider__title { margin: 0 0 14px; color: var(--bt-indigo); font-size: 22px; line-height: 1.25; font-weight: 700; text-align: left; }
[dir] .bot-seo-form .form-item { margin: 0; }
[dir] .bot-seo-form input {
  width: 100%;
  height: 54px;
  box-sizing: border-box;
  border: 1px solid #d5d0e8;
  border-radius: 14px;
  background-color: #fff;
  color: var(--bt-indigo);
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
[dir] .bot-seo-form input:focus { outline: 0; border-color: var(--bt-violet); box-shadow: 0 0 0 4px rgba(104, 72, 228, .14); }
[dir] .bot-seo-form input::placeholder { color: #7a7693; }
[dir] .bot-seo-form .form-item__error { color: #b3261e; }
[dir] .bot-seo-form .form-btns-container { margin: 0; }
[dir] .bot-seo-form .form-slider__btn-submit {
  width: 100%;
  height: 54px;
  padding: 0 28px;
  border-radius: 14px;
  line-height: 54px;
  white-space: nowrap;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 12px 24px -10px rgba(243, 76, 58, .6);
  transition: transform 160ms var(--bt-out);
}
[dir] .bot-seo-form .form-slider__btn-submit:active { transform: scale(.98); }
[dir] .home-page .bot-seo-form .form-slider__terms { margin: 10px 0 0; text-align: left; font-size: 13px; }
[dir] .bot-seo-form .form-slider__terms a { color: var(--bt-muted); text-decoration: underline; }
[dir] .home-page .bot-seo-form__links { display: flex; gap: 20px; margin: 14px 0 0; font-size: 15px; }
@media (min-width: 821px) {
  [dir] .bot-seo-form [data-step].is-active { display: grid; gap: 12px; align-items: start; }
  [dir] .bot-seo-form [data-step="1"].is-active { grid-template-columns: minmax(0, 1fr) auto; }
  [dir] .bot-seo-form [data-step="2"].is-active { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
}

[dir] .home-page .video-homepage { border-radius: 20px; }

/* The bundle makes these sections full-bleed with 100vw and a transform. The card layout replaces that. */
[dir=ltr] .home-page .homepage-partners,
[dir=ltr] .home-page .homepage-reseller,
[dir=ltr] .home-page .homepage-numbers,
[dir=ltr] .home-page .js-homepage-case-prev,
[dir=ltr] .home-page .homepage-text-seo,
[dir=ltr] .home-page .homepage-case-prev { transform: none; }

/* Partner band */
[dir=ltr] .home-page .homepage-partners {
  width: auto;
  max-width: calc(var(--bt-wrap) + 44px);
  margin: 24px auto;
  padding: 0 22px;
  background: none;
}
[dir] .home-page .homepage-partners__container {
  max-width: none;
  padding: 30px 34px;
  border-radius: 24px;
  background: radial-gradient(70% 160% at 12% 0, rgba(104, 72, 228, .55), transparent 70%), var(--bt-ink);
}

/* Soft sections */
[dir] .home-page .homepage-text-additional { padding: 72px 22px; background: #fff; }
[dir] .home-page .homepage-text-additional h2,
[dir] .home-page .homepage-brands > h2,
[dir] .home-page .homepage-case__header h2,
[dir] .home-page .homepage-text-seo__container > h2,
[dir] .home-page .homepage-advantages__header h2,
[dir] .home-page .homepage-services__header h2 { text-align: center; }
[dir] .home-page .homepage-text-additional__img img,
[dir] .home-page .homepage-text-seo__img img { border-radius: 22px; }
[dir] .home-page .homepage-text-additional__img { box-shadow: none; background: transparent; }

/* Brands */
[dir] .home-page .homepage-brands { padding: 72px 22px; background: var(--bt-bg); }
[dir] .home-page .homepage-brands__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-width: var(--bt-wrap);
  margin: 34px auto 0;
}
[dir] .home-page .homepage-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 96px;
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bt-line);
  transition: transform 220ms var(--bt-out), box-shadow 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .homepage-brands__item:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--bt-line), var(--bt-shadow); }
}

/* Reseller band */
[dir=ltr] .home-page .homepage-reseller {
  position: relative;
  overflow: hidden;
  width: auto;
  max-width: var(--bt-wrap);
  margin: 72px auto;
  border-radius: 28px;
}
@media (max-width: 1314px) {
  [dir=ltr] .home-page .homepage-reseller { margin-left: 22px; margin-right: 22px; }
}
[dir] .home-page .homepage-reseller h2,
[dir] .home-page .homepage-reseller p { color: #fff; }

/* Results */
[dir] .home-page .homepage-case__header { max-width: 860px; margin: 0 auto 34px; padding: 0 22px; text-align: center; }
[dir] .home-page .case-item {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bt-line), var(--bt-shadow);
  transition: transform 220ms var(--bt-out), box-shadow 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .case-item:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--bt-line), var(--bt-shadow-lg); }
}
[dir] .home-page .homepage-case { padding: 0 22px; }
[dir=ltr] .home-page .js-homepage-case-prev {
  overflow: hidden;
  width: auto;
  max-width: var(--bt-wrap);
  margin: 56px auto 0;
  padding: 0;
  border-radius: 28px;
}
@media (max-width: 1314px) {
  [dir=ltr] .home-page .js-homepage-case-prev { margin-left: 22px; margin-right: 22px; }
}
[dir] .home-page .homepage-case-prev__text h2 { display: inline-block; width: auto; padding: 4px 12px; border-radius: 10px; color: #fff; background: rgba(18, 13, 43, .75); }

[dir=ltr] .home-page .homepage-text-seo:not(.js-homepage-case-prev) { width: auto; margin-left: 0; margin-right: 0; padding: 80px 22px; background: #fff; }
[dir] .home-page .homepage-text-seo__note { max-width: 720px; margin: 12px auto 36px; text-align: center; color: var(--bt-muted); }

/* Why us */
[dir] .home-page .homepage-advantages { padding: 80px 22px; background: var(--bt-bg); }
[dir] .home-page .homepage-advantages__header { max-width: 820px; margin: 0 auto 38px; text-align: center; }
[dir] .home-page .homepage-advantages__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--bt-wrap);
  margin: 0 auto;
}
[dir=ltr] .home-page .homepage-advantages__item {
  display: block;
  width: auto;
  margin: 0;
  padding: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--bt-line);
  transition: transform 220ms var(--bt-out), box-shadow 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .homepage-advantages__list .homepage-advantages__item:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--bt-line), var(--bt-shadow-lg); }
}
[dir=ltr] .home-page .homepage-advantages__item-img { position: static; display: block; width: 60px; height: 60px; margin: 0 0 16px; box-shadow: none; }
[dir] .home-page .homepage-advantages__item-title { margin: 0 0 8px; color: var(--bt-indigo); font-size: 19px; line-height: 1.3; font-weight: 700; }
[dir] .home-page .homepage-advantages__item-text p { font-size: 15px; line-height: 1.58; }

/* Numbers */
[dir=ltr] .home-page .homepage-numbers {
  width: auto;
  max-width: var(--bt-wrap);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(60% 180% at 86% 0, rgba(104, 72, 228, .6), transparent 70%), var(--bt-ink);
}
[dir] .home-page .numbers_content_banner_list { padding: 0 22px; margin-top: -24px; background: linear-gradient(var(--bt-bg) 50%, #fff 50%); }
[dir] .home-page .homepage-numbers__item-title { color: #fff; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
[dir] .home-page .homepage-numbers__item-text p { color: rgba(255, 255, 255, .74); font-size: 14px; line-height: 1.4; }

/* Core services: one wide card with the art at its own size, then two rows of three */
[dir] .home-page .homepage-services { padding: 80px 22px 40px; background: #fff; }
[dir] .home-page .homepage-services__header { max-width: 760px; margin: 0 auto 36px; text-align: center; }
[dir] .home-page .homepage-services__item-text p { color: var(--bt-ink); }
[dir] .home-page .homepage-services__item-title { color: var(--bt-ink); }
[dir] .home-page .homepage-services__item:nth-child(3) .homepage-services__item-text p,
[dir] .home-page .homepage-services__item:nth-child(3) .homepage-services__item-title { color: #fff; }
@media (min-width: 821px) {
  [dir] .home-page .homepage-services__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: var(--bt-wrap);
    margin: 0 auto;
  }
  [dir] .home-page .homepage-services__item {
    width: auto !important;
    min-width: 0;
    margin: 0;
    border-radius: 22px;
    transition: transform 240ms var(--bt-out), box-shadow 240ms ease;
  }
  [dir] .home-page .homepage-services__item:first-child { grid-column: 1 / -1; display: flex; align-items: center; min-height: 300px; padding-top: 0; }
  [dir=ltr] .home-page .homepage-services__item:first-child .homepage-services__item-img { left: auto; right: 24px; top: -30px; width: 340px; max-height: none; }
  [dir] .home-page .homepage-services__item:first-child .homepage-services__item-text { max-width: calc(100% - 390px); padding: 40px 44px; }
  [dir] .home-page .homepage-services__item:first-child .homepage-services__item-title { font-size: 28px; line-height: 1.2; }
  [dir] .home-page .homepage-services__item:first-child .homepage-services__item-text p { font-size: 17px; line-height: 1.6; }
}
@media (min-width: 1025px) {
  [dir] .home-page .homepage-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 821px) {
  [dir] .home-page .homepage-services__item:not(:first-child) .homepage-services__item-img { height: 270px; object-fit: cover; object-position: top; }
}
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .homepage-services__item:hover { transform: translateY(-5px); box-shadow: var(--bt-shadow-lg); }
}

/* AI introduction */
[dir] .bot-ai-intro {
  position: relative;
  overflow: hidden;
  max-width: var(--bt-wrap);
  margin: 40px auto 64px;
  padding: 56px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(50% 130% at 92% 8%, rgba(104, 72, 228, .7), transparent 70%),
    radial-gradient(36% 90% at 0 100%, rgba(19, 201, 143, .16), transparent 70%),
    var(--bt-ink);
}
@media (max-width: 1314px) {
  [dir] .bot-ai-intro { margin-left: 22px; margin-right: 22px; }
}
[dir] .bot-mark3d {
  position: absolute;
  right: -50px;
  top: -46px;
  width: 360px;
  height: 360px;
  perspective: 900px;
  pointer-events: none;
}
[dir] .bot-mark3d__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateY(-10deg);
  animation: bot-sway 14s ease-in-out infinite alternate;
}
[dir] .bot-mark3d__r { position: absolute; border-radius: 50%; transform-style: preserve-3d; }
[dir] .bot-mark3d__r--v {
  inset: 0;
  background: conic-gradient(from 160deg, transparent 0 22%, var(--bt-violet) 32%, #9b85ff 60%, var(--bt-violet) 88%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 84.5%, #000 85%);
  mask: radial-gradient(farthest-side, transparent 84.5%, #000 85%);
  animation: bot-spin 60s linear infinite;
}
[dir] .bot-mark3d__r--c {
  inset: 62px;
  background: conic-gradient(from 20deg, transparent 0 24%, var(--bt-coral) 34%, #ff8a5c 62%, var(--bt-coral) 86%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 78%, #000 78.6%);
  mask: radial-gradient(farthest-side, transparent 78%, #000 78.6%);
  transform: translateZ(26px);
  animation: bot-spin-z 46s linear infinite reverse;
}
[dir] .bot-mark3d__r--a {
  inset: 146px;
  background: radial-gradient(circle at 40% 35%, #fff2c2, var(--bt-amber) 55%, #c98f12);
  transform: translateZ(52px);
  box-shadow: 0 0 40px 6px rgba(235, 180, 48, .45);
}
@keyframes bot-spin-z { to { transform: translateZ(26px) rotate(-360deg); } }
@keyframes bot-sway { to { transform: rotateX(58deg) rotateY(12deg); } }
@media (prefers-reduced-motion: reduce) { [dir] .bot-mark3d__tilt, [dir] .bot-mark3d__r { animation: none; } }
[dir] .bot-ai-intro.is-paused .bot-mark3d__tilt, [dir] .bot-ai-intro.is-paused .bot-mark3d__r { animation-play-state: paused; }
@media (max-width: 1180px) {
  [dir] .bot-mark3d { right: 6px; top: -30px; transform: scale(.5); transform-origin: 100% 0; }
}
@media (max-width: 960px) {
  [dir] .bot-mark3d { display: none; }
}
[dir] .bot-ai-intro__wrap { position: relative; z-index: 1; max-width: 760px; }
[dir] .home-page .l-container .bot-ai-intro h2 { color: #fff; text-align: left; }
[dir] .home-page .l-container .bot-ai-intro p { color: rgba(255, 255, 255, .8); }
[dir] .home-page .l-container .bot-ai-intro a:not([class]) { color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
[dir] .bot-ai-intro__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; padding: 0; list-style: none; }
[dir] .bot-ai-intro__links li { margin: 0; padding: 0; }
[dir] .bot-ai-intro__links li::before { content: none; }
[dir] .home-page .l-container .bot-ai-intro__links a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .24) inset;
  transition: background-color 180ms ease, transform 160ms var(--bt-out);
}
[dir] .home-page .l-container .bot-ai-intro__links a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .l-container .bot-ai-intro__links a:hover { background: rgba(255, 255, 255, .16); }
}

[dir] .bot-ai-intro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
[dir] .home-page .l-container .bot-ai-intro__cta a { text-decoration: none; box-shadow: none; }
[dir] .home-page .l-container .bot-ai-intro__cta a.bot-ai-hero__btn--primary { box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 30px -10px rgba(243, 76, 58, .7); }
[dir] .home-page .l-container .bot-ai-intro__cta a.bot-ai-hero__btn--ghost { box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset; }

/* Partner band straight under the hero */
[dir=ltr] .home-page .homepage-text-main .homepage-partners { max-width: none; margin: 0 0 40px; padding: 0; }
[dir] .home-page .homepage-text-main .homepage-partners__container { padding: 16px 30px; border-radius: 20px; }
[dir=ltr] .home-page .homepage-text-main .homepage-partners__list { flex-wrap: nowrap; align-items: center; margin-left: 0; margin-right: 0; }
[dir=ltr] .home-page .homepage-text-main .homepage-partners__list > * { flex: 1 1 0; min-width: 0; width: auto; height: 44px; margin: 0 8px; }
[dir] .home-page .homepage-text-main .homepage-partners__item-img { display: flex; align-items: center; justify-content: center; height: 44px; }
[dir] .home-page .homepage-text-main .homepage-partners__item-img img { width: auto; height: auto; max-width: 100%; max-height: 38px; }
[dir] .homepage-partners__item img[src*="oogle"] { border-radius: 6px; }
@media (max-width: 960px) {
  [dir=ltr] .home-page .homepage-text-main .homepage-partners__list { flex-wrap: wrap; }
  [dir=ltr] .home-page .homepage-text-main .homepage-partners__list > * { flex: 0 0 calc(33.333% - 12px); margin: 4px 6px; }
  [dir] .home-page .homepage-text-main .homepage-partners__item-img img { max-height: 30px; }
  [dir] .home-page .homepage-text-main .homepage-partners__container { padding: 12px 14px; }
}

/* Numbers band: one background seam, not two */
[dir] .home-page .numbers_content_banner_list { position: relative; z-index: 1; background: linear-gradient(var(--bt-bg) 24px, #fff 24px); }
[dir] .home-page .homepage-numbers__item-text p.homepage-numbers__item-title { color: #fff; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
[dir] .home-page .homepage-advantages__item-text p.homepage-advantages__item-title { color: var(--bt-indigo); font-size: 19px; line-height: 1.3; font-weight: 700; }
@media (min-width: 569px) and (max-width: 1180px) {
  [dir] .home-page .homepage-numbers__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
}

/* Case slider: the brand button and dots inside the card */
[dir] .home-page .homepage-case-prev__link {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 28px;
  margin: 0;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #dc3c28, #cf3522);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 30px -10px rgba(243, 76, 58, .7);
  transition: transform 160ms var(--bt-out);
}
[dir] .home-page .homepage-case-prev__link:active { transform: scale(.97); }
[dir=ltr] .home-page .js-homepage-case-prev { position: relative; background: var(--bt-ink); }
[dir=ltr] .home-page .js-homepage-case-prev .darvin-slider__dots.is-purple.slick-dots { position: absolute; left: 0; right: 0; top: auto; bottom: 16px; width: auto; margin: 0; }
[dir] .home-page .js-homepage-case-prev .darvin-slider__dots.is-purple.slick-dots li { border-color: rgba(255, 255, 255, .85); }
[dir] .home-page .js-homepage-case-prev .darvin-slider__dots.is-purple.slick-dots li.slick-active { border-color: #fff; background: #fff; }
@media (min-width: 1181px) { [dir] .home-page .homepage-case-prev { background-position: -277px 50%; } }

/* Reseller band button in the house shape */
[dir] .home-page .homepage-reseller__btn { border-radius: 999px; padding: 0 28px; font-weight: 700; }
[dir=ltr] .home-page .homepage-reseller { background: linear-gradient(95deg, var(--bt-violet), var(--bt-coral) 82%, #e8703a); }

/* Results grid: even gaps */
[dir] .home-page .case-item { margin-bottom: 30px; }

/* Why us icons: a little larger and closer to the title */
[dir=ltr] .home-page .homepage-advantages__item-img { width: 44px; height: 44px; margin: 0 0 12px; }

/* Phones: one tap back to the form from anywhere on a long page */
[dir] .bot-sticky { display: none; }
@media (max-width: 960px) {
  [dir] .bot-sticky {
    position: fixed;
    z-index: 98;
    left: 12px;
    right: 84px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(180deg, #dc3c28, #cf3522);
    box-shadow: 0 12px 26px -8px rgba(243, 76, 58, .7);
    transform: translateY(160%);
    transition: transform 240ms var(--bt-out);
  }
  [dir] .bot-sticky.is-on { transform: none; }
}

/* Small labels added by the second review */
[dir] .bot-card__eg { margin-left: auto; padding: 1px 7px; border-radius: 99px; color: var(--bt-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--bt-bg); }
[dir] .bot-agents__label { margin: 10px 0 0; color: var(--bt-indigo); font-size: 12px; font-weight: 600; }
[dir] .bot-swipe, [dir] .bot-ai-hero .bot-demo-cta { display: none; }
[dir] .home-page .l-container .bot-mid-cta { margin: 0 0 48px; text-align: center; }
[dir] .home-page .l-container .bot-mid-cta a { display: inline-flex; color: #fff; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(243, 76, 58, .7); }

/* The bundle removes every focus outline, so keyboard users get this one back */
[dir] a:focus-visible, [dir] button:focus-visible, [dir] .bot-cards:focus-visible { outline: 3px solid var(--bt-coral) !important; outline-offset: 3px; }

/* Blog */
[dir] .home-page .blog-widget { padding: 16px 22px 80px; background: #fff; }
[dir] .home-page .blog-widget__item-img { overflow: hidden; border-radius: 16px; }
[dir] .home-page .blog-widget__item-img img { transition: transform 420ms var(--bt-out); }
@media (hover: hover) and (pointer: fine) {
  [dir] .home-page .blog-widget__item:hover .blog-widget__item-img img { transform: scale(1.04); }
}

/* Scroll reveal: added by home-fx.js only, so content is visible without it */
.fx .fx-hide { opacity: 0; transform: translateY(18px); }
.fx .fx-show { opacity: 1; transform: none; transition: opacity 560ms ease, transform 720ms var(--bt-out); }

/* ---------- Small screens ---------- */

@media (max-width: 1299px) {
  [dir] .bot-kate { left: 42%; height: 88%; }
  [dir] .bot-orbit { left: 44%; transform: scale(.86); }
  [dir] .bot-card--found { right: 0; top: 14px; width: 232px; }
  [dir] .bot-card--chat { left: -10px; top: 300px; width: 214px; }
  [dir] .bot-card--crm { right: 0; top: 316px; width: 236px; }
}
@media (min-width: 961px) and (max-width: 1299px) {
  [dir] .bot-card__head { letter-spacing: .03em; }
  [dir] .bot-card__ai { font-size: 12px; }
  [dir] .bot-card--crm dl div:nth-child(2),
  [dir] .bot-card--crm dl div:nth-child(4) { display: none; }
}
/* The cards stand either side of Kate's hands and book, so nothing covers them. The front ring would cross her hand.
   The rings are placed in pixels so their left end always stays behind the chat card, clear of the buttons. */
@media (min-width: 961px) { [dir] .bot-orbit--front { display: none; } }
@media (min-width: 1300px) {
  [dir] .bot-kate { left: 35%; }
  [dir] .bot-orbit { left: 304px; }
  [dir] .bot-card--chat { left: -20px; top: 279px; }
  [dir] .bot-card--crm { top: 279px; right: -14px; width: 238px; }
}
@media (min-width: 1180px) and (max-width: 1299px) {
  [dir] .bot-kate { left: 33%; }
  [dir] .bot-orbit { left: 284px; }
  [dir] .bot-card--crm { width: 208px; }
}
@media (min-width: 961px) and (max-width: 1179px) {
  [dir] .bot-kate { left: 36%; }
  [dir] .bot-orbit { left: 250px; transform: scale(.76); }
  [dir] .bot-card--crm { display: none; }
}
@media (min-width: 961px) and (max-width: 1012px) {
  [dir] .bot-kate { left: 31.5%; }
}
@media (max-width: 960px) {
  [dir] .bot-ai-hero {
    background:
      radial-gradient(110% 34% at 78% 8%, rgba(104, 72, 228, .55), transparent 72%),
      radial-gradient(90% 26% at 0 100%, rgba(19, 201, 143, .12), transparent 72%),
      linear-gradient(170deg, #1b1440 0%, #120d2b 60%, #191239 100%);
  }
  [dir] .bot-ai-hero__wrap { display: block; min-height: 0; }
  [dir] .bot-ai-hero__copy { padding: 40px 0 8px; }
  [dir] .bot-ai-hero__demo { display: flex; flex-direction: column; min-height: 0; margin: 0 -22px; overflow: hidden; }
  [dir] .bot-stage { position: relative; order: 1; inset: auto; height: 280px; margin: 10px 0 0; }
  [dir] .bot-kate {
    left: 50%;
    height: 100%;
    filter: none; /* a shadow would be cut square by the mask */
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  }
  [dir] .bot-orbit { left: 50%; top: 54%; transform: scale(.46); }
  /* The three steps become one swipeable row, so the form stays close to the hero */
  [dir] .bot-cards {
    position: relative;
    z-index: 5;
    order: 2;
    display: flex;
    gap: 12px;
    margin-top: -18px;
    padding: 0 22px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [dir] .bot-cards::-webkit-scrollbar { display: none; }
  [dir] .bot-cards::after { content: ""; flex: 0 0 10px; }
  [dir] .bot-card--found,
  [dir] .bot-card--chat,
  [dir] .bot-card--crm {
    position: relative;
    inset: auto;
    flex: 0 0 min(82%, 330px);
    width: auto;
    scroll-snap-align: start;
    box-shadow: 0 14px 30px -16px rgba(8, 4, 26, .6), 0 0 0 1px rgba(255, 255, 255, .5);
  }
  [dir] .bot-card--found { display: flex; flex-direction: column; }
  [dir] .bot-card--found .bot-card__head { order: 0; }
  [dir] .bot-card--found .bot-card__ai { order: 1; margin: 0 0 10px; }
  [dir] .bot-card--found .bot-serp { order: 2; }
  [dir] .bot-card--crm dl div { grid-template-columns: 58px 1fr; }
  [dir] .bot-ai-hero__demo figcaption { position: static; order: 3; max-width: none; padding: 8px 22px 12px; border-radius: 0; text-align: left; background: none; }
  [dir] .bot-swipe { display: block; margin: 0 0 4px; color: #fff; font-weight: 600; }
  [dir] .bot-ai-hero .bot-demo-cta { display: flex; order: 4; width: auto; margin: 0 22px 64px; }
  [dir] .bot-card__head, [dir] .bot-serp__snip, [dir] .bot-serp__q, [dir] .bot-serp__site small { font-size: 12px; }
  [dir] .home-page .homepage-advantages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [dir] .home-page .homepage-brands__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 568px) {
  [dir] .bot-ai-hero { padding-top: 58px; }
  [dir] .bot-ai-hero__copy { padding-top: 22px; }
  [dir] .bot-ai-hero__headline { font-size: 38px; line-height: 1.1; }
  [dir] .bot-ai-hero__lede { font-size: 17px; }
  [dir] .bot-ai-hero__btn { width: 100%; }
  [dir] .bot-ai-hero__wrap { display: flex; flex-direction: column; align-items: stretch; }
  [dir] .bot-ai-hero__demo { display: contents; }
  [dir] .bot-stage { order: -1; height: 230px; margin: 4px -22px 0; }
  [dir] .bot-orbit { transform: scale(.4); }
  [dir] .bot-ai-hero__copy { display: flex; flex-direction: column; padding-top: 8px; }
  [dir] .bot-ai-hero__eyebrow { align-self: flex-start; }
  [dir] .bot-ai-hero__lede { order: 1; }
  [dir] .bot-ai-hero__proof, [dir] .bot-ai-hero__since { order: 2; }
  [dir] .bot-ai-hero__actions { margin-top: 22px; }
  [dir] .bot-cards { margin: 8px -22px 0; }
  [dir] .bot-ai-hero__demo figcaption { margin: 0 -22px; }
  [dir] .bot-ai-hero .bot-demo-cta { width: 100%; margin: 0 0 64px; }
  [dir] .home-page .homepage-text-main { padding-top: 44px; }
  [dir] .bot-seo-form { padding: 20px 18px 16px; }
  [dir] .bot-ai-intro { padding: 32px 22px; }
  [dir] .home-page .case-item { margin-left: 22px; margin-right: 22px; }
  [dir] .bot-ai-intro__cta a { width: 100%; }
  [dir] .home-page .homepage-advantages__list { grid-template-columns: minmax(0, 1fr); }
  [dir] .home-page .homepage-brands__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [dir] .home-page .homepage-brands__item { height: 76px; }
  [dir] .home-page .homepage-text-additional,
  [dir] .home-page .homepage-brands,
  [dir] .home-page .homepage-advantages,
  [dir] .home-page .homepage-text-seo:not(.js-homepage-case-prev) { padding-top: 52px; padding-bottom: 52px; }
}

@media (max-width: 374px) { [dir] .bot-stage { height: 180px; } }

/* Case slider: slides fill the card, not the viewport */
[dir=ltr] .home-page .homepage-case-prev { width: 100%; margin-left: 0; margin-right: 0; }

/* Bands keep one gutter, not two */
[dir] .home-page .homepage-partners__container { margin: 0; width: auto; }
[dir] .home-page .homepage-numbers__container { width: auto; max-width: none; margin: 0; padding: 34px 30px; }
@media (max-width: 960px) {
  [dir] .home-page .homepage-partners__container { padding: 22px 20px; }
}

/* Case slider copy sits inside the card */
[dir] .home-page .homepage-case-prev__container { max-width: none; width: auto; margin: 0; padding-left: 48px; padding-right: 48px; }
@media (max-width: 819px) {
  [dir] .home-page .homepage-case-prev__container { padding-left: 22px; padding-right: 22px; }
}

/* One-line headline on narrower screens needs no reserved height */
@media (max-width: 960px) {
  [dir] .bot-ai-hero__headline { min-height: 0; }
}

/* ---------- Opening sequence ----------
   Shown once per visit (html.bot-intro-on, set before first paint). The logo is drawn by
   home-intro.js in a worker. This block is only the dark stage that holds the screen
   until the first frame. The inline script in the template ends it on every failure
   path; the 8s rule below is the last resort. */
.bot-intro { display: none; }
html.bot-intro-on .bot-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: #130e2c;
  animation: bot-i-gone 1ms linear 8s both;
}
.bot-intro::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: #EBB430;
  animation: bot-i-wait 800ms ease-in-out infinite alternate;
}
@keyframes bot-i-wait { from { opacity: .3; } to { opacity: 1; } }
.bot-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html.bot-intro-on .bot-intro.is-open { background: transparent; pointer-events: none; }
html.bot-intro-on .bot-intro.is-open::before { display: none; }
html.bot-intro-on .bot-intro.is-cut { opacity: 0; transition: opacity 220ms ease; animation: none; }
/* until the overlay has moved to body it sits in .l-main, under the header */
html.bot-intro-on:not(.bot-intro-up) .l-header { z-index: 4; }
html.bot-intro-on.bot-intro-done .bot-intro { display: none; }
@keyframes bot-i-gone { 0% { opacity: 1; visibility: visible; } 1%, 100% { opacity: 0; visibility: hidden; } }

/* Questions about SEO: plain text in the page, the same open-and-close pattern as the inner pages */
[dir] .home-page .bot-faq { max-width: 880px; margin: 0 auto; padding: 56px 22px 24px; }
[dir] .home-page .bot-faq h2 { margin: 0 0 22px; text-align: center; }
[dir] .home-page .bot-faq details { border-bottom: 1px solid var(--bt-line); }
[dir] .home-page .bot-faq details:first-of-type { border-top: 1px solid var(--bt-line); }
[dir] .home-page .bot-faq summary { position: relative; padding: 18px 40px 18px 0; color: var(--bt-indigo); font-size: 19px; line-height: 1.35; font-weight: 700; list-style: none; cursor: pointer; }
[dir] .home-page .bot-faq summary::-webkit-details-marker { display: none; }
[dir] .home-page .bot-faq summary::after { content: ""; position: absolute; right: 6px; top: 25px; width: 11px; height: 11px; border-right: 2px solid var(--bt-violet); border-bottom: 2px solid var(--bt-violet); transform: rotate(45deg); transition: transform 200ms var(--bt-out); }
[dir] .home-page .bot-faq details[open] summary::after { transform: translateY(4px) rotate(225deg); }
[dir] .home-page .bot-faq p { margin: 0; padding: 0 0 18px; font-size: 16.5px; line-height: 1.6; }

@media (max-width: 820px) {
  [dir] .home-page .l-container .bot-mid-cta { margin: 0 22px 48px; }
}

/* Round 3: sticky button centres where no bubble shows; caption clears card 2; phone targets reach 44px */
@media (min-width: 768px) and (max-width: 960px) { [dir] .bot-sticky { left: calc(50% - 180px); right: calc(50% - 180px); } }
@media (min-width: 961px) and (max-width: 1180px) { [dir] .bot-ai-hero__demo figcaption { max-width: 262px; } }
@media (max-width: 568px) {
  [dir] .bot-ai-hero__eyebrow { padding-block: 14px; margin-block: -14px; }
  [dir] .bot-ai-hero__proof a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  [dir] .homepage-services__item-title { display: block; padding-block: 13px; margin-block: -13px; }
}

/* Round 4: on desktop a slim bar keeps the next step, phone and WhatsApp in reach. It sits above the page, so nothing floats over the text. */
[dir] .bot-bar { display: none; }
@media (min-width: 961px) {
  html { scroll-padding-top: 76px; }
  [dir] .bot-bar { position: fixed; z-index: 98; top: 0; left: 0; right: 0; display: block; color: #fff; background: #1d1640; box-shadow: 0 10px 24px -14px rgba(18, 13, 43, .6); visibility: hidden; transform: translateY(-100%); transition: transform 240ms var(--bt-out), visibility 0s 240ms; }
  [dir] .bot-bar.is-on { visibility: visible; transform: none; transition: transform 240ms var(--bt-out), visibility 0s; }
  [dir] .bot-bar__in { display: flex; align-items: center; gap: 22px; box-sizing: border-box; max-width: 1318px; min-height: 60px; margin: 0 auto; padding: 8px 24px; }
  [dir] .bot-bar__logo { flex: none; display: block; line-height: 0; }
  [dir] .bot-bar__logo img { display: block; width: auto; height: 28px; }
  [dir] .bot-bar__go { display: flex; align-items: center; gap: 22px; margin-left: auto; }
  [dir] .home-page .bot-bar__go > a { color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
  [dir] .home-page .bot-bar__go > a.bot-bar__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34) inset; }
  [dir] .home-page .bot-bar .bot-sticky { position: static; display: inline-flex; align-items: center; left: auto; right: auto; height: auto; min-height: 44px; padding: 0 22px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; background: linear-gradient(180deg, #dc3c28, #cf3522); box-shadow: none; transform: none; transition: none; }
}
@media (min-width: 1461px) { [dir] .home-page .whatsapp-fixed-btn { display: flex !important; right: 24px; bottom: 20px; } }
@media (min-width: 961px) and (max-width: 1460px) { [dir] .home-page .whatsapp-fixed-btn { display: none !important; } }
@media (min-width: 961px) and (max-width: 1099px) { [dir] .bot-bar__tel { display: none; } }
@media (prefers-reduced-motion: reduce) { [dir] .bot-bar, [dir] .bot-bar.is-on { transition: none; } }
[dir] .home-page .l-container .bot-mid-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
[dir] .home-page .l-container .bot-mid-cta a { margin: 0; }
[dir] .home-page .l-container .bot-mid-cta a.bot-mid-cta__alt { color: #261e4a; background: #fff; box-shadow: 0 0 0 1px #cfc9e6 inset; }

/* Contrast and link fixes from the final accessibility run */
[dir] .home-page .case-item__title { color: #2563eb; }
[dir] .home-page .case-item__position { color: #08352a; }
[dir] .home-page .l-container .grid p a:not([class]), [dir] .home-page .bot-faq p a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Opening: the page settles into place as the camera arrives */
@keyframes bot-land{from{transform:scale(1.045)}to{transform:none}}@media (prefers-reduced-motion:no-preference){.bot-intro-land .bot-ai-hero{animation:bot-land .74s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 45vh}}

/* Homepage banner: motion only. The banner itself is untouched:
   same markup, same look, same resting state. These rules only change how the example arrives.
   Everything moves by transform and opacity, plays once, costs no request and nothing under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Found: the Page 1 badge and the two AI chips land after the card */
  [dir] .bot-serp__pos { animation: m-pop 420ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 1000ms); }
  [dir] .bot-card__ai b { animation: m-pop 380ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 1280ms); }
  [dir] .bot-card__ai b + b { animation-delay: calc(var(--bt-d) + 1360ms); }

  /* 2. Answered: the reply first shows as a small "typing" pill where it will sit, then opens into the message */
  [dir] .bot-msg--out { position: relative; transform-origin: 100% 0; animation: m-reply 1080ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 1350ms); }
  [dir] .bot-msg--out::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle, #2aa672 0 5px, transparent 5.5px) calc(50% - 20px) 50% / 14px 14px no-repeat,
                radial-gradient(circle, #2aa672 0 5px, transparent 5.5px) 50% 50% / 14px 14px no-repeat,
                radial-gradient(circle, #2aa672 0 5px, transparent 5.5px) calc(50% + 20px) 50% / 14px 14px no-repeat, #dff6ea;
    animation: m-typing 1080ms linear both; animation-delay: calc(var(--bt-d) + 1350ms); }
  [dir] .bot-msg:nth-of-type(4) { animation-delay: calc(var(--bt-d) + 2800ms); }
  [dir] .bot-card__by { animation-delay: calc(var(--bt-d) + 3100ms); }

  /* 3. Booked: the record fills in line by line, the agents tick, Approve gets one press */
  [dir] .bot-card--crm { animation-delay: calc(var(--bt-d) + 3350ms); }
  [dir] .bot-card--crm dl div { animation: bot-fade-rise 380ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 3650ms); }
  [dir] .bot-card--crm dl div:nth-child(2) { animation-delay: calc(var(--bt-d) + 3720ms); }
  [dir] .bot-card--crm dl div:nth-child(3) { animation-delay: calc(var(--bt-d) + 3790ms); }
  [dir] .bot-card--crm dl div:nth-child(4) { animation-delay: calc(var(--bt-d) + 3860ms); }
  [dir] .bot-agents li { animation: m-pop 380ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 4100ms); }
  [dir] .bot-agents li:nth-child(2) { animation-delay: calc(var(--bt-d) + 4240ms); }
  [dir] .bot-agents li:nth-child(3) { animation-delay: calc(var(--bt-d) + 4380ms); }
  [dir] .bot-ai-hero__approve span:first-child { animation: m-press 560ms var(--bt-out) both; animation-delay: calc(var(--bt-d) + 4800ms); }
}
/* wide screens: each card docks in depth from its own side instead of fading up flat */
@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  [dir] .bot-card--found, [dir] .bot-card--crm { animation-name: m-dock-r; animation-duration: 760ms; }
  [dir] .bot-card--chat { animation-name: m-dock-l; animation-duration: 760ms; }
}
/* a real pointer tilts the two thin rings a little, like the opening's gyroscope */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  [dir] .bot-tilt { transition: transform 700ms var(--bt-out); transform: rotateX(calc(74deg + var(--m-y, 0) * 12deg)) rotateY(calc(-12deg + var(--m-x, 0) * 18deg)); }
  [dir] .bot-tilt--b { transform: rotateX(calc(70deg - var(--m-y, 0) * 10deg)) rotateY(calc(16deg - var(--m-x, 0) * 16deg)); }
}
@keyframes m-pop { from { opacity: .001; transform: scale(.8); } }
@keyframes m-press { 0%, 100% { transform: none; } 42% { transform: scale(.93); } }
@keyframes m-dock-r { from { opacity: .001; transform: perspective(1100px) translate3d(28px, 12px, -90px) rotateY(-26deg) rotateX(5deg); } }
@keyframes m-dock-l { from { opacity: .001; transform: perspective(1100px) translate3d(-28px, 12px, -90px) rotateY(26deg) rotateX(5deg); } }
/* the pill: 30% of the bubble, held while "typing", then it opens */
@keyframes m-reply { 0% { opacity: .001; transform: scale(.3); } 12%, 56% { opacity: 1; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes m-typing { 0%, 56% { opacity: 1; } 78%, 100% { opacity: 0; } }