/* TubeBros public marketing site - shared shell.
   Reset + hero animations are lifted verbatim from the design export
   (docs/integrations/website/*.html). Per-section visual styling lives inline
   on the elements themselves (as authored in the builder). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; background: #07060d; }
/* The tiled icon pattern (same asset the desktop app uses) sits directly on the
   body background so it is always visible, with a translucent dark overlay on
   top to keep the near-black look the owner prefers while the icons still read. */
body {
  min-height: 100%;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif; color: #fff;
  background-color: #07060d;
}
/* The tiled icon pattern + dark overlay live on a real, separate `position:
   fixed` layer (NOT `body{background-attachment:fixed}`, which forces the
   browser to repaint the whole background on every scroll frame - the visible
   jitter on fast scroll). A dedicated fixed div gets its own compositor layer,
   so it paints once and never has to repaint while the page scrolls. Content
   sits in #tb-site above it via z-index (no negative z-index trick). */
#tb-bg-fixed {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: #07060d;
  background-image: linear-gradient(rgba(7, 6, 13, .72), rgba(7, 6, 13, .72)),
                    url("../img/bg-dark.png?v=20260228-4");
  background-repeat: repeat, repeat;
  background-size: auto, 780px;
  /* Own compositor layer (same trick as .tb-nav below) - without this, some
     mobile browsers repaint this full-viewport fixed layer on every scroll
     frame and occasionally drop a frame to plain black mid-scroll. */
  transform: translateZ(0);
  will-change: transform;
}
/* Hidden until site-i18n.js resolves + applies the visitor's language (RU
   included) - prevents the flash of Russian markup swapping to the resolved
   language, especially visible on fast repeated reloads. */
#tb-site { position: relative; z-index: 1; visibility: hidden; }
#tb-site.tb-i18n-ready { visibility: visible; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* Own compositor layer for the sticky/blurred navbar - avoids the
   background-pattern flicker some browsers show while scrolling under a
   backdrop-filter element. */
.tb-nav { transform: translateZ(0); }

/* Navbar bear spins on hover, matching the main app's logo (navbar.css
   .nav-logo-v3 .logo-icon-bimi: rotateY(360deg) over --transition-slow/350ms). */
.tb-logo-bear { transform-origin: center; transition: transform 350ms ease; }
.tb-nav a:hover .tb-logo-bear { transform: rotateY(360deg); }

/* Hover tooltip for the integration icons (landing "Интеграции" row). A real
   child element (not ::after) so the headline and body can carry different
   styling - a plain attr(data-tip) box can't format itself. */
.tb-int-ic {
  position: relative;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tb-int-ic:hover {
  border-color: rgba(203, 184, 255, .75) !important;
  background: rgba(139, 92, 246, .16) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .16), 0 8px 22px rgba(139, 92, 246, .28);
  transform: translateY(-2px);
}
.tb-tip {
  position: absolute; left: 50%; bottom: calc(100% + 16px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 560px;
  background: linear-gradient(165deg, rgba(35, 26, 58, .98), rgba(16, 13, 28, .98));
  border: 1px solid rgba(180, 160, 245, .35);
  border-radius: 16px; padding: 16px 20px 17px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 32px rgba(139, 92, 246, .12);
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .18s ease, transform .18s ease;
  overflow: visible;
}
/* A single impulse travels a stretch of the border (appears already moving -
   linear speed like the hero circuit's tb-trace), fades out, then waits a
   random 1-3s before the next lap starts at a NEW random point on the border
   - only ever one visible at a time. CSS keyframes always restart from the
   same spot, so the random start point is driven by site.js (Web Animations
   API) instead; this class only sets the static look. */
.tb-tip-pulse {
  position: absolute; top: 0; left: 0; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: linear-gradient(90deg, transparent, #cbb8ff, transparent);
  box-shadow: 0 0 6px 1px rgba(203, 184, 255, .7);
  offset-path: border-box; offset-rotate: auto;
  opacity: 0; pointer-events: none;
}
.tb-tip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tb-tip-title {
  font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  background: linear-gradient(95deg, #fff, #cbb8ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tb-tip-body { font-size: 18px; font-weight: 500; line-height: 1.5; color: #b7b0d6; white-space: pre-line; }
.tb-int-ic:hover .tb-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Not-yet-shipped feature (currently just YouTube automation): same shape,
   muted/dashed treatment + an explicit "Скоро..." badge so it doesn't read
   as an already-live promise like the other tooltips. */
.tb-tip-badge {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: #cfc9e0; background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(190, 182, 210, .45); border-radius: 8px; padding: 3px 10px;
}
.tb-tip-soon { border-style: dashed; border-color: rgba(170, 165, 190, .4); }
.tb-tip-soon .tb-tip-title { background: linear-gradient(95deg, #e7e4f0, #9b95ad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-tip-soon .tb-tip-pulse { background: linear-gradient(90deg, transparent, #b6afc9, transparent); box-shadow: 0 0 6px 1px rgba(182, 175, 201, .55); }

/* Download CTA before build-CI ships real binaries: same shape and size, but
   inert and visibly muted, so the page never promises a file it cannot serve.
   !important is required here (and only here): the mac/win anchors carry their
   accent gradient as an inline style, which a plain class cannot override.
   Drop this class - do not restyle the anchors - once the binaries land. */
.tb-dl-soon {
  pointer-events: none; cursor: default;
  background: rgba(255, 255, 255, .035) !important;
  color: #b6afc9 !important;
  border: 1px dashed rgba(170, 165, 190, .4) !important;
  box-shadow: none !important;
}
.tb-dl-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #cfc9e0; background: rgb(17, 14, 30);
  border: 1px dashed rgba(190, 182, 210, .45); border-radius: 999px; padding: 3px 10px;
}
/* Phones: the mac/win "Скоро" pill becomes "Не поддерживается" - swapped via
   media query below. Hidden here so it doesn't show twice on desktop. */
.tb-dl-badge-mobile { display: none; }

/* «Как это работает» step cards. DESKTOP here reproduces the original inline
   look 1:1 (number on top, icon, title, description stacked) - unchanged on
   purpose. The mobile override (Variant 5: icon+title in a row, number at the
   right edge, description below) lives in the max-width:760px block. */
.tb-dl-card{position:relative;background:rgba(255,255,255,.024);border:1px solid rgba(168,150,240,.16);border-radius:18px;padding:22px 18px;overflow:hidden}
.tb-dl-card--soon{background:rgba(255,255,255,.015);border:1px dashed rgba(190,182,210,.35)}
.tb-dl-hd{display:flex;flex-direction:column;align-items:flex-start}
.tb-dl-num{font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;color:rgb(124,79,240)}
.tb-dl-card--soon .tb-dl-num{color:rgb(110,105,140)}
.tb-dl-ibox{width:48px;height:48px;margin:14px 0;border-radius:14px;border:1px solid rgba(168,150,240,.28);background:rgba(139,92,246,.08);display:flex;align-items:center;justify-content:center;color:rgb(203,184,255);flex:0 0 auto}
.tb-dl-ibox svg{display:block}
.tb-dl-card--soon .tb-dl-ibox{border-style:dashed;border-color:rgba(190,182,210,.4);background:transparent;color:rgb(110,105,140)}
.tb-dl-title{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:rgb(241,238,255);margin-bottom:8px;letter-spacing:-.01em}
.tb-dl-card--soon .tb-dl-title{color:rgb(154,149,184)}
.tb-dl-desc{font-size:13.5px;color:rgb(154,149,184);line-height:1.55}
.tb-dl-card--soon .tb-dl-desc{color:rgb(110,105,140)}
.tb-dl-step-badge{position:absolute;top:22px;right:18px;font-size:10px;font-weight:700;letter-spacing:.02em;color:#cfc9e0;background:rgba(255,255,255,.06);border:1px dashed rgba(190,182,210,.5);border-radius:999px;padding:2px 8px}

/* ============================================================
   Public-site language switcher (navbar). */
.tb-lang-switch { position: relative; }
.tb-lang-trigger {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .04); color: rgb(205, 200, 230);
  border: 1px solid rgba(168, 150, 240, .24); border-radius: 10px;
  padding: 8px 11px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tb-lang-trigger:hover { background: rgba(139, 92, 246, .12); border-color: rgba(168, 150, 240, .45); color: #fff; }
.tb-lang-trigger svg:first-child { opacity: .85; }
.tb-lang-trigger svg:last-child { transition: transform .18s ease; }
.tb-lang-switch.is-open .tb-lang-trigger svg:last-child { transform: rotate(180deg); }
.tb-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(18, 15, 32, .98); border: 1px solid rgba(168, 150, 240, .28);
  border-radius: 14px; padding: 8px; box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease; z-index: 60;
}
.tb-lang-switch.is-open .tb-lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tb-lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: 9px; cursor: pointer;
  padding: 8px 11px; color: rgb(205, 200, 230); font-size: 14px; text-align: left;
  transition: background .12s ease, color .12s ease;
}
.tb-lang-menu button:hover { background: rgba(139, 92, 246, .16); color: #fff; }
.tb-lang-menu button.is-active { color: #fff; background: rgba(139, 92, 246, .22); }
.tb-lang-code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: rgba(203, 184, 255, .16); color: #cbb8ff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.tb-lang-name { font-weight: 500; }
/* Full language name in the trigger is a mobile-only affordance; hidden by default
   so the compact desktop navbar switcher keeps showing just the RU/EN/UA code. */
.tb-lang-current-name { display: none; }
@media (max-width: 760px) {
  .tb-lang-menu { right: -6px; }
}

/* Fixed-width nav CTA so the navbar doesn't reflow/jump when the language
   switch changes the word length (Скачать / Download / Завантажити). */
.tb-nav-cta {
  min-width: 168px; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tb-nav-cta:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(139, 92, 246, .55);
  filter: brightness(1.08);
}
.tb-nav-cta:active { transform: translateY(0) scale(.98); }

/* Status/pipeline card (landing, bottom of hero): same hover treatment as
   the .tb-int-ic integration icons - it's just a big rectangular one - plus
   the bear spinning like the navbar logo. */
.tb-status-card {
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tb-status-card:hover {
  border-color: rgba(203, 184, 255, .75) !important;
  background: rgba(139, 92, 246, .16) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .16), 0 8px 22px rgba(139, 92, 246, .28) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}
.tb-status-bear { transition: transform 350ms ease; }
.tb-status-card:hover .tb-status-bear { transform: rotateY(360deg); }

@keyframes tb-glow    { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes tb-glowdot { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes tb-float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes tb-dash    { to{stroke-dashoffset:-16} }
@keyframes tb-bar     { from{width:0} to{width:65%} }
@keyframes tb-trace   { 0%{stroke-dashoffset:0;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{stroke-dashoffset:-360;opacity:0} }
@keyframes tb-twinkle { 0%,100%{opacity:0} 50%{opacity:.95} }
@keyframes tb-wink-eyedot { 0%,83%{opacity:1;transform:scaleY(1)} 87%{opacity:0;transform:scaleY(.08)} 93%{opacity:0;transform:scaleY(.08)} 97%,100%{opacity:1;transform:scaleY(1)} }
@keyframes tb-wink-arc    { 0%,84%{opacity:0} 88%{opacity:1} 92%{opacity:1} 96%,100%{opacity:0} }

/* Landing hero is a fixed 1680x944 stage scaled to the viewport by site.js.
   Top is offset by the navbar height so the hero (and its ring) sits BELOW the
   floating navbar instead of tucking under it. site.js scales to this area. */
#tb-stage-wrap { position: fixed; top: 84px; left: 0; right: 0; bottom: 0; overflow: hidden; background: transparent; }
/* Hidden until site.js computes the real fit-to-viewport scale, so the ring
   fades in already correctly sized instead of flashing at markup's scale(1)
   default and visibly snapping once JS corrects it. */
#tb-stage { opacity: 0; transition: opacity .3s ease; }
/* On the landing the stage is fixed full-screen, so the navbar floats above it. */
.tb-landing-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }

/* Enlarge ONLY the background circuit (circle + side branches + their glow nodes)
   ~20%, so the ring grows and the branches reach the edges, WITHOUT scaling the
   bear / wordmark / steps. The three background layers are the first children of
   #tb-stage; each is scaled about the SAME stage-space point (840,472 = center)
   by giving each a transform-origin measured from its own top-left. */
/* scale = ring reach (a touch smaller now); translateY = ring dropped ~10% lower
   than its inner content (bear/wordmark stay put). */
#tb-stage > div:nth-child(1) { transform: translateY(47px) scale(1.1); transform-origin: 840px 472px; }  /* circuit svg (inset:0) */
#tb-stage > div:nth-child(2) { transform: translateY(47px) scale(1.1); transform-origin: 458px 17px; }   /* left glow  @ 382,455  */
#tb-stage > div:nth-child(3) { transform: translateY(47px) scale(1.1); transform-origin: -458px 17px; }  /* right glow @ 1298,455 */

/* ============================================================
   Mobile landing hero (_mobile_hero.html). Hidden on desktop;
   the desktop fixed-canvas stage cannot reflow, so phones get this
   purpose-built flow layout in the same neon style. */
#tb-mobile-hero { display: none; }

/* Animated background circuit (circle + running impulses + node links +
   twinkles), reused from the desktop stage, sized a touch bigger than the
   viewport so the ring frames the bear; side circuits clip off the edges. */
/* Lives inside .tb-mh-inner so it tracks the vertically-centered content and the
   bear stays inside its circle. z-index:-1 keeps the circuit behind the bear/word
   (inner is its own stacking context, so this stays above the global page bg). */
.tb-mh-bg { position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 150vw; max-width: 780px; opacity: .95; pointer-events: none; z-index: -1; }
.tb-mh-bg svg { width: 100%; height: auto; display: block; }
.tb-mh-inner { position: relative; z-index: 1; }

/* Match the desktop central bear exactly: near-white fill (rgb(239,234,255))
   and the same 16px violet glow, so the mobile hero reads identical. */
.tb-mh-bear { width: 132px; height: 132px; margin: 4px auto 10px; color: rgb(239, 234, 255);
  filter: drop-shadow(rgba(139,92,246,.8) 0px 0px 16px); animation: tb-float 5s ease-in-out infinite; }
.tb-mh-bear svg { width: 100%; height: 100%; display: block; }
.tb-mh-word { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 68px; line-height: 1;
  letter-spacing: -.045em; text-align: center;
  background: linear-gradient(180deg, #fff 34%, #b6a4ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tb-mh-tag { text-align: center; color: #9a93c0; font-size: 15px; margin: 12px 0 26px; }
.tb-mh-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; margin-bottom: 30px; }
.tb-mh-step { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tb-mh-step-ic { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168,150,240,.28); background: rgba(139,92,246,.08); color: #cbb8ff; }
.tb-mh-step-ic svg { width: 22px; height: 22px; }
.tb-mh-step span { font-size: 12px; color: #a9a4c4; }
.tb-mh-int-label { text-align: center; color: #6f688f; font-size: 13px; letter-spacing: .04em; margin-bottom: 14px; }
.tb-mh-ints { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; position: relative; }
.tb-mh-int { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(168,150,240,.16); background: rgba(255,255,255,.03); color: #cbb8ff; flex: 0 0 auto;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease; }
.tb-mh-int svg { max-width: 22px; max-height: 22px; width: auto; height: auto; }
.tb-mh-cta { display: block; text-align: center; font-weight: 700; font-size: 16px; color: #0c0a18;
  background: linear-gradient(#cbb8ff, #a98bf2); padding: 15px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(139,92,246,.4); }

/* ============================================================
   Breakpoint: phones. Landing swaps stage -> mobile hero;
   the shared navbar drops its center links and keeps logo + CTA. */
@media (max-width: 760px) {
  /* landing */
  #tb-stage-wrap, .tb-landing-nav { display: none; }
  /* Center the whole hero vertically in the viewport: with the steps now on one
     row the content is short, so left top-aligned it read as "shoved up" with a
     big empty gap under the Download button. Fill the screen and center. 100dvh
     accounts for the mobile address bar (100vh fallback for old browsers). */
  #tb-mobile-hero {
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100dvh;
    padding: 24px 20px;
  }
  .tb-mh-word { font-size: 56px; }

  /* shared navbar (download page) - trim to fit */
  .tb-nav-links { display: none !important; }
  .tb-nav nav { padding: 12px 14px !important; gap: 10px !important; }

  /* CTA pill -> icon-only button (no room for the full "Скачать" pill next to
     the lang switch on a phone). On /download itself the CTA is redundant
     (you're already there) - tb-nav-cta-on-download drops it entirely. */
  .tb-nav-cta {
    display: flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; min-width: 0 !important; padding: 0 !important;
    border-radius: 10px !important;
  }
  .tb-nav-cta-icon { display: block !important; }
  .tb-nav-cta-label { display: none !important; }
  .tb-nav-cta.tb-nav-cta-on-download { display: none !important; }

  /* Lang switch: tighter pill, no room for the language name column in the menu. */
  .tb-lang-trigger { padding: 7px 8px; gap: 4px; font-size: 12px; }
  .tb-lang-menu { min-width: 150px; }
  .tb-lang-name { display: none; }

  /* "Как это выглядит внутри" is a wide desktop-app preview - it does not fit a
     phone, so we drop it on mobile (owner: remove what does not fit). */
  #example { display: none !important; }

  /* belt-and-suspenders: never allow a stray wide child to force sideways scroll */
  #tb-site { overflow-x: hidden; }

  /* /download - hero, "how it works" grid and requirements grid are built for
     desktop widths; tuned here down to iPhone 13 mini (375px). !important is
     required: these sizes are inline styles from the design export. */
  #download { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; }
  #download h1 { font-size: 38px !important; }
  #download > p { font-size: 16px !important; }
  #download .tb-dl-soon { min-width: 0 !important; width: 100%; }
  #download > div[style*="justify-content: center; gap: 18px"] { flex-direction: column; align-items: stretch !important; }
  #download > div[style*="justify-content: center; gap: 18px"] > div { width: 100%; }

  #how, #how + section { padding-left: 20px !important; padding-right: 20px !important; }
  #how h2 { font-size: 28px !important; }
  .tb-dl-steps-grid { grid-template-columns: 1fr !important; }
  /* Variant 5 on phones: icon + title share the top row, the number sits at the
     right edge, the description spans the full width below. Two levels instead of
     the three stacked blocks (number / icon / title) the owner disliked. */
  .tb-dl-hd { flex-direction: row; align-items: center; gap: 12px; }
  .tb-dl-ibox { order: 1; margin: 0; width: 42px; height: 42px; }
  .tb-dl-ibox svg { width: 22px; height: 22px; }
  .tb-dl-title { order: 2; margin-bottom: 0; }
  .tb-dl-num { order: 3; margin-left: auto; }
  .tb-dl-desc { margin-top: 13px; }
  /* soon card: number hidden on mobile (the «Скоро» badge already marks it),
     so the badge stays alone at the top-right and nothing collides. */
  .tb-dl-card--soon .tb-dl-num { display: none; }
  .tb-dl-step-badge { top: 20px; }

  section[style*="70px 32px 40px"] { padding-left: 20px !important; padding-right: 20px !important; }
  section[style*="70px 32px 40px"] h2 { font-size: 28px !important; }
  .tb-dl-req-grid { grid-template-columns: 1fr !important; }
  /* stack so each button's "Не для телефона" badge has its own row - side by
     side the two pills collided into each other at phone widths. */
  .tb-dl-cta-row { flex-direction: column; align-items: stretch !important; }
  .tb-dl-cta-row .tb-dl-cta-btn { width: 100%; justify-content: center; }

  /* Desktop-app installers make no sense on a phone: swap "Скоро" for an
     honest "Не поддерживается" on every download control, and mute the
     bottom CTA buttons (scp3/scp4) to match the disabled tb-dl-soon ones -
     they used to look fully clickable despite triggering the same non-download. */
  .tb-dl-badge-desktop { display: none !important; }
  .tb-dl-badge-mobile { display: inline-flex !important; }
  .tb-dl-cta-btn {
    pointer-events: none; cursor: default;
    background: rgba(255, 255, 255, .035) !important;
    color: #b6afc9 !important;
    border: 1px dashed rgba(170, 165, 190, .4) !important;
    box-shadow: none !important;
  }

  /* Integration icons on mobile have no hover, so the tooltip opens on TAP
     (site.js toggles .tb-tip-open; one open at a time, tap outside closes).
     The bubble is anchored to the .tb-mh-ints row (position: relative) instead
     of the narrow icon, so it stays centered and never runs off-screen for the
     edge icons. Fonts are trimmed from the desktop bubble to fit a phone. */
  /* Width: fill the phone minus a 16px gutter each side, capped at 400px. The
     bubble is centered on the SCREEN because it's anchored to the .tb-mh-ints
     row (position: relative), which itself is centered in the hero. */
  .tb-mh-int .tb-tip {
    left: 50%; right: auto; bottom: calc(100% + 12px);
    width: min(calc(100vw - 32px), 400px); max-width: none;
    padding: 13px 16px 14px; border-radius: 13px;
    transform: translateX(-50%) translateY(4px);
  }
  .tb-mh-int .tb-tip-title { font-size: 18px; }
  .tb-mh-int .tb-tip-body { font-size: 14px; }
  .tb-mh-int.tb-tip-open .tb-tip {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  /* Tapped icon lifts + lights up, mirroring the desktop .tb-int-ic:hover state.
     Lift uses margin (NOT transform): a transform here would make the icon the
     tooltip's containing block, re-anchoring the bubble to the narrow icon and
     pushing it off-screen for the edge icons. margin keeps the row as anchor. */
  .tb-mh-int.tb-tip-open {
    border-color: rgba(203, 184, 255, .75);
    background: rgba(139, 92, 246, .16);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .16), 0 8px 22px rgba(139, 92, 246, .28);
    margin-top: -2px; margin-bottom: 2px;
    color: #fff;
  }

  /* Pipeline steps (Идея/Сценарий/Озвучка/Монтаж/Публикация): keep all five on
     one row even on a ~360px phone - no wrap, tighter width + gap. */
  .tb-mh-steps { gap: 10px 4px; flex-wrap: nowrap; }
  .tb-mh-step { width: 58px; }
  .tb-mh-step-ic { width: 44px; height: 44px; }
  .tb-mh-step span { font-size: 10.5px; }

  /* Full-width language dropdown in the mobile hero, just above the Download CTA.
     The menu opens UPWARD (bottom, not top) so it never covers the button. */
  .tb-mh-lang { width: 100%; margin-bottom: 12px; }
  .tb-mh-lang .tb-lang-switch { width: 100%; }
  .tb-mh-lang .tb-lang-trigger {
    width: 100%; justify-content: center; gap: 8px;
    padding: 14px; font-size: 15px; border-radius: 14px;
  }
  .tb-mh-lang .tb-lang-menu {
    left: 0; right: 0; width: 100%; min-width: 0;
    top: auto; bottom: calc(100% + 10px);
  }
  .tb-mh-lang .tb-lang-name { display: inline; }
  /* Closed trigger shows the FULL selected language like a menu row: [RU] Русский.
     Drop the globe, render the code as the same pill badge the menu items use. */
  .tb-mh-lang .tb-lang-trigger svg:first-child { display: none; }
  .tb-mh-lang .tb-lang-current-name { display: inline; font-weight: 500; }
  .tb-mh-lang .tb-lang-current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px;
    background: rgba(203, 184, 255, .16); color: #cbb8ff;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
  }
  .tb-mh-lang .tb-lang-menu button { padding: 12px; }

  /* Kill the rubber-band / repaint jitter while dragging the page up-down:
     no overscroll bounce, and pin the fixed background to its own layer so it
     does not repaint on every scroll frame (belt to the existing translateZ). */
  html, body { overscroll-behavior-y: none; }
  #tb-bg-fixed { backface-visibility: hidden; }
}