@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap');
html {
  scroll-behavior: smooth;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
}

body {
  min-height: 3000px;
}

.hero-background {
  min-height: 100vh;
  width: 100%;
  background: #f57a00;
  padding: 18px;
}

.hero-background__inner {
  position: relative;
  width: 100%;
  height: calc(100vh - 36px);
  min-height: 720px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f2f2f1 0%, #f1f1ef 45%, #f0efed 100%);
}

.hero-bg,
.hero-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg::before {
  background:
    radial-gradient(ellipse 360px 300px at 20% 24%, rgba(247, 95, 3, 0.30) 0%, rgba(255, 153, 102, 0.20) 34%, rgba(255, 153, 102, 0.09) 56%, rgba(255, 153, 102, 0) 76%),
    radial-gradient(ellipse 860px 620px at 79% 55%, rgba(247, 95, 3, 0.18) 0%, rgba(255, 153, 102, 0.18) 30%, rgba(255, 153, 102, 0.10) 52%, rgba(255, 153, 102, 0) 76%),
    radial-gradient(ellipse 240px 210px at 26% 86%, rgba(247, 95, 3, 0.34) 0%, rgba(255, 153, 102, 0.24) 34%, rgba(255, 153, 102, 0.11) 58%, rgba(255, 153, 102, 0) 78%);
  filter: blur(10px);
  z-index: 1;
}

.hero-bg::after {
  background:
    radial-gradient(ellipse 280px 220px at 19% 24%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(ellipse 680px 500px at 79% 55%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(ellipse 180px 150px at 26% 86%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
  z-index: 2;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Canvas stays behind UI; hover on buttons must not block web tracking */
  pointer-events: none;
}

.glow-parallax {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 20px;
  z-index: 3;
}

.glow-layer {
  position: absolute;
  border-radius: 9999px;
}

/* Only layers with data-depth are moved by JS parallax */
.glow-layer[data-depth] {
  will-change: transform;
}


.glow-layer--top {
  left: 7%;
  top: 10%;
  width: 288px;
  height: 238px;
  filter: blur(44px);
  background:
    radial-gradient(ellipse at center, rgba(247, 95, 3, 0.38) 0%, rgba(255, 153, 102, 0.25) 32%, rgba(255, 153, 102, 0.11) 56%, rgba(255, 153, 102, 0) 76%);
}

/* Largest blob: static backdrop — no transform / will-change (expensive CSS blur re-paint) */
.glow-layer--right {
  right: -20%;
  top: 26%;
  width: 650px;
  height: 475px;
  filter: blur(56px);
  transform: none;
  will-change: auto;
  background:
    radial-gradient(ellipse at center, rgba(247, 95, 3, 0.22) 0%, rgba(255, 153, 102, 0.21) 28%, rgba(255, 153, 102, 0.14) 48%, rgba(255, 153, 102, 0.08) 62%, rgba(255, 153, 102, 0) 82%);
}

.glow-layer--bottom {
  left: 16%;
  bottom: 5%;
  width: 200px;
  height: 192px;
  filter: blur(27px);
  background:
    radial-gradient(circle, rgba(247, 95, 3, 0.52) 0%, rgba(255, 153, 102, 0.35) 32%, rgba(255, 153, 102, 0.15) 56%, rgba(255, 153, 102, 0) 78%);
}

.hero-menu {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
}

.hero-menu .menu {
  pointer-events: auto;
}

.menu {
  width: min(1360px, 100%);
  height: 95px;
  box-sizing: border-box;
  border: 3px solid #f4f4f4;
  border-radius: 46px;
  background: #f3f2f3;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.20);
  display: flex;
  align-items: center;
  padding: 0 36px;
  position: relative; 
}

.menu-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  width: 130px;
  height: 43px;
  position: relative;
  transform: translateY(-4px);
}

.menu-logo img {
  display: none !important;
}

.menu-logo__svg {
  display: none !important;
}

.menu-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("/static/img/logo-landing-ru-exact.svg") left center / contain no-repeat;
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.menu-logo:hover::before {
  transform: scale(1.04);
}

.menu-nav {
  display: flex;
  align-items: center;
  
  
  
  margin-left: clamp(5px, 10vw, 270px); 
  
  
  gap: clamp(10px, 3vw, 50px);
  
  
  
  margin-right: clamp(20px, 4vw, 60px); 
}

.menu-link {
  text-decoration: none;
  font-size: 23px;
  color: #1b1b1b;
  font-family: Onest, sans-serif;
  font-weight: 500;
  line-height: 1;
  transition: opacity 0.2s ease;
  opacity: 0.9;
}

.menu-cta {
  /* margin-left: auto по-прежнему прижимает кнопку вправо, 
     но теперь она будет "упираться" в margin-right навигации */
  margin-left: auto; 
  
  width: 194px;
  height: 60px;
  border-radius: 20px;
  background: #010101;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-family: Onest, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  
  
  flex-shrink: 0; 
  white-space: normal; 
}

.user-button {
  position: relative;
  display: block;
  width: 61px;
  height: 61px;
  margin-left: 20px;

  background: rgba(235, 97, 22, 0.8);
  border: 1px solid #ffffff;
  border-radius: 20px;
  box-sizing: border-box;

  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.user-button:hover {
  background: rgba(247, 115, 40, 0.95);
}

.user-button::before,
.user-button::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
}


.user-button::before {
  top: 16px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #010101;
  border-radius: 50%;
}


.user-button::after {
  top: 30px;
  width: 24px;
  height: 14px;
  border: 1.5px solid #010101;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.hero-badge {
  position: absolute;
  top: 370px;
  left: 217px;
  z-index: 10;

  display: inline-flex;
  align-items: center;
  padding: 5px 7px;
  border-radius: 22.205px;
  background: #343434;
}

.hero-badge__accent {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 3px 10px 3px 10px;
  border-radius: 40px;
  background: #f0805a;
  position: relative;
  right: 1px;
}

.hero-badge__accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 0 6px rgba(246, 161, 24, 0.6),
    0 0 12px rgba(246, 161, 24, 0.28);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-badge__rest {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 16px 6px 12px;
}

.hero-badge__text {
  font-family: Onest, sans-serif;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.hero-badge__text--dark {
  font-size: 20px;
  color: #010101;
}

.hero-badge__text--percent {
  font-size: 26px;
  color: #010101;
}

.hero-badge__text--light {
  font-size: 20px;
  color: #ffffff;
}

.hero-title {
  position: absolute;
  top: clamp(350px, 42svh, 460px);
  left: clamp(56px, 5.8vw, 105px);
  z-index: 10;

  display: flex;
  flex-direction: column;
  gap: 8px;

  font-family: Onest, sans-serif;
  font-size: clamp(48px, 3.8vw, 76px);
  font-weight: 600;
  line-height: 0.96;
  color: #010101;

  width: auto;
  max-width: none;
}

.hero-title__line {
  display: block;
  white-space: nowrap;
}

.hero-title__line--with-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.2vw, 24px);
  width: fit-content;
  max-width: 100%;
  padding-right: 0;
  padding-bottom: 0;
}

.hero-title__text {
  display: block;
  white-space: nowrap;
}

.hero-subtitle {
  display: block;
  font-family: Onest, sans-serif;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: #716a65;
  margin-top: clamp(14px, 1.2vw, 22px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  max-width: none;
  text-transform: none;
}

.icon-arrow-down {
  --size: clamp(54px, 3.8vw, 72px);
  --color: #343434;
  --stroke: 1.048px;

  position: relative;
  right: auto;
  top: auto;
  transform: none;

  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  border: var(--stroke) solid var(--color);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ffffff;
  background: linear-gradient(180deg, #f2f2f1 0%, #f1f1ef 45%, #f0efed 100%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.icon-arrow-down:hover {
  --color: #111111;
  transform: translateY(-48%) scale(1.05);
  border-color: var(--color);
  box-shadow:
    0 0 0 3px #ffffff,
    0 6px 14px rgba(0, 0, 0, 0.1);
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f3 100%);
}

.icon-arrow-down:active {
  transform: translateY(-48%) scale(0.98);
}

/* Offset anchor scroll for fixed header */
#features,
#solutions {
  scroll-margin-top: 140px;
}

/*
 * #pricing lives on a fixed point at the bottom of the video/tariffs stack,
 * not on the sticky overlay (its Y changes while sticky animates — that caused
 * “only title visible” + second click jumps lower to the real cards).
 */
.pricing-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  /* Higher = less scroll; was 160px and landed on testimonials */
  bottom: 820px;
  overflow: hidden;
  pointer-events: none;
  scroll-margin-top: 100px;
}

@media (min-width: 1181px) and (max-width: 1760px) {
  .pricing-anchor {
    bottom: auto;
    top: 800px;
    scroll-margin-top: 90px;
  }
}

@media (max-width: 1180px) {
  .pricing-anchor {
    bottom: 740px;
  }
}

@media (max-width: 760px) {
  .pricing-anchor {
    bottom: 640px;
  }
}

.icon-arrow-down::before {
  content: "\2193";
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  color: var(--color);
  font-size: 38px;
  line-height: 1;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-actions {
  position: absolute;
  top: clamp(550px, 68svh, 725px);
  bottom: auto;
  left: clamp(56px, 5.8vw, 105px);
  z-index: 10;

  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.tariff-btn,
.trial-btn {
  position: relative;
  height: 72.003px;
  border-radius: 29.299px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;

  font-size: 27px;
  font-family: Onest-Medium, Onest, sans-serif;
  font-weight: 500;
  color: #010101;
  line-height: 1;

  background-clip: padding-box;
}

.tariff-btn {
  width: 390.566px;
  border: 1.173px solid #CDCCCC;
  background: transparent;
  text-decoration: none;
  color: #010101;
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

.tariff-btn:hover {
  transform: translateY(-3px);
  border-color: #eb7a00;
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(235, 122, 0, 0.18);
}

.tariff-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(235, 122, 0, 0.12);
}

.trial-pill-stage {
  position: relative;
  width: 390.566px;
  height: 72px;
  flex: 0 0 390.566px;
}

.trial-pill-shadow-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 390.566px;
  height: 72px;
  border-radius: 31px;
  background: rgba(193, 116, 22, 0.75);
  transform: translateY(11.73px);
  filter: blur(5.87px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.trial-pill-fill-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 390.566px;
  height: 72.003px;
  border-radius: 29.299px;
  background: #EC681C;
  background-clip: padding-box;
  border: 3.52px solid rgba(219, 76, 58, 0.3);
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;

  font-size: 26.937px;
  font-family: Onest-Medium, Onest, sans-serif;
  font-weight: 500;
  color: #010101;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

.trial-pill-fill-frame:hover {
  transform: translateY(-3px);
  background-color: #f0752a;
  border-color: rgba(219, 76, 58, 0.45);
  box-shadow: 0 12px 30px rgba(236, 104, 28, 0.35);
}

.trial-pill-fill-frame:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(236, 104, 28, 0.22);
}

.trial-pill-stage:hover .trial-pill-shadow-layer {
  opacity: 0.9;
  transform: translateY(14px);
}





@media (max-width: 740px) {
  .hero-background {
    padding: 8px;
  }

  .hero-background__inner {
    min-height: 640px;
    height: calc(100vh - 16px);
  }

  .hero-shell {
    padding: 8px;
  }

  .hero-bg::before {
    background:
      radial-gradient(ellipse 180px 150px at 18% 20%, rgba(247, 95, 3, 0.28) 0%, rgba(255, 153, 102, 0.18) 34%, rgba(255, 153, 102, 0.08) 56%, rgba(255, 153, 102, 0) 76%),
      radial-gradient(ellipse 320px 260px at 88% 66%, rgba(247, 95, 3, 0.16) 0%, rgba(255, 153, 102, 0.16) 30%, rgba(255, 153, 102, 0.09) 52%, rgba(255, 153, 102, 0) 76%),
      radial-gradient(ellipse 150px 130px at 20% 88%, rgba(247, 95, 3, 0.34) 0%, rgba(255, 153, 102, 0.22) 34%, rgba(255, 153, 102, 0.10) 58%, rgba(255, 153, 102, 0) 78%);
    filter: blur(8px);
  }

  .hero-bg::after {
    background:
      radial-gradient(ellipse 160px 130px at 18% 20%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 64%),
      radial-gradient(ellipse 260px 210px at 88% 66%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 66%),
      radial-gradient(ellipse 120px 100px at 20% 88%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 60%);
  }

  .mobile-top-glow {
    left: 5% !important;
    top: 8% !important;
    width: 180px !important;
    height: 150px !important;
    filter: blur(30px) !important;
  }

  .mobile-right-glow {
    right: -24% !important;
    top: 54% !important;
    width: 300px !important;
    height: 220px !important;
    filter: blur(34px) !important;
  }

  .mobile-bottom-glow {
    left: 10% !important;
    bottom: 8% !important;
    width: 150px !important;
    height: 144px !important;
    filter: blur(22px) !important;
  }

  .hero-menu {
    top: 14px;
    padding: 0 16px;
  }

  .menu {
    height: 84px;
    border-radius: 28px;
    padding-left: 20px;
  }

  .menu-logo {
    transform: translateY(-2px);
  }

  .menu-logo {
    width: 118px;
    height: 39px;
  }
}

.feedback-btn {
  position: fixed;
  right: 38px;
  bottom: 35px;
  width: 91px;
  height: 91px;
  border: none;
  border-radius: 50%;
  background: rgba(240, 131, 30, 1);
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1000;
  padding: 0;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.feedback-btn:hover {
  transform: scale(1.08);
  background-color: rgba(247, 145, 45, 1);
  box-shadow: 0 10px 28px rgba(240, 131, 30, 0.45);
}

.feedback-btn:active {
  transform: scale(0.96);
  box-shadow: 0 4px 14px rgba(240, 131, 30, 0.3);
}

.feedback-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(240, 131, 30, 0.4);
  pointer-events: none;
  transition: transform 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
}

.feedback-btn:hover::before {
  transform: scale(1.06);
  border-color: rgba(240, 131, 30, 0.55);
}

.feedback-btn__oval {
  position: absolute;
  left: 23px;
  top: 32px;
  width: 43px;
  height: 21px;
  background: #010101;
  border-radius: 999px;
}

.feedback-btn__tail {
  position: absolute;
  left: 60px;
  top: 45px;
  width: 13px;
  height: 15px;
  background: #010101;
  clip-path: polygon(0 18%, 0 82%, 88% 50%);
  transform: rotate(67deg);
  transform-origin: 0 50%;
}

.contact-popover.contact-chat {
  position: fixed;
  right: 36px;
  bottom: 120px;
  z-index: 10001;
  width: min(410px, calc(100vw - 32px));
  height: min(580px, calc(100vh - 140px));
  min-height: 460px;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(34, 28, 24, 0.12);
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(23, 20, 17, 0.22), 0 6px 18px rgba(0, 0, 0, 0.08);
  color: #171411;
  font-family: "Onest", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.contact-popover.contact-chat.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Шапка чата */
.contact-chat__header {
  background: linear-gradient(135deg, #1d1916 0%, #2a231e 100%);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-chat__header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-chat__avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.contact-chat__avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  display: block;
}

.contact-chat__online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #1d1916;
}

.contact-chat__header-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.contact-chat__header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.70);
  margin-top: 2px;
}

.contact-chat__status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.contact-chat__close {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.contact-chat__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.contact-chat__close::before,
.contact-chat__close::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
}

.contact-chat__close::before {
  transform: rotate(45deg);
}

.contact-chat__close::after {
  transform: rotate(-45deg);
}

/* Содержимое / Сообщения чата */
.contact-chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f7f6f4;
}

.contact-chat__messages::-webkit-scrollbar {
  width: 5px;
}

.contact-chat__messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  animation: chat-fade-in 0.2s ease;
}

.chat-msg--bot {
  align-self: flex-start;
  max-width: 95%;
}

.chat-msg--user {
  align-self: flex-end;
  max-width: 88%;
  flex-direction: row-reverse;
}

.chat-msg__avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  margin-bottom: 2px;
}

.chat-msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-msg__bubble {
  padding: 11px 14px;
  border-radius: 18px 18px 18px 4px;
  background: #ffffff;
  color: #171411;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.chat-msg__bubble--user {
  border-radius: 18px 18px 4px 18px;
  background: #f76505;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(247, 101, 5, 0.25);
  border: 0;
}

.chat-msg__text {
  margin: 0 0 6px;
}

.chat-msg__text:last-child {
  margin-bottom: 0;
}

.chat-msg__text--muted {
  font-size: 11px;
  color: #716a65;
  font-weight: 500;
  margin-bottom: 8px;
}

.chat-msg__user-email {
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 3px;
  font-weight: 500;
}

.chat-msg__user-text {
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.chat-msg__tg-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.chat-tg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #eef6fc;
  color: #1783cf;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.chat-tg-chip:hover {
  background: #dff0fc;
  transform: translateY(-1px);
}

/* Нижняя плашка чата с контактами */
.contact-chat__footer {
  flex-shrink: 0;
  padding: 10px 16px 12px;
  background: #ffffff;
  border-top: 1px solid rgba(34, 28, 24, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-chat__footer-title {
  font-size: 11px;
  color: #716a65;
  font-weight: 500;
}

.contact-chat__footer-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-msg__action-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #f76505;
  background: #ffffff;
  color: #f76505;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-msg__action-btn:hover {
  background: #f76505;
  color: #ffffff;
}

/* Встроенная форма ввода Email в виде облачка */
.chat-email-step {
  display: flex;
  flex-direction: column;
  animation: chat-fade-in 0.25s ease;
}

.chat-email-step[hidden] {
  display: none !important;
}

.chat-msg__bubble--form {
  max-width: 320px;
  background: #ffffff;
  border-radius: 18px 18px 18px 4px;
  border: 1px solid rgba(34, 28, 24, 0.10);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 12px 14px;
}

.chat-email-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.chat-email-field {
  display: flex;
  flex-direction: column;
}

.chat-email-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 11px;
  border: 1px solid rgba(34, 28, 24, 0.16);
  border-radius: 9px;
  background: #faf8f6;
  font-family: inherit;
  font-size: 12.5px;
  color: #171411;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.chat-email-input:focus {
  border-color: #f76505;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(247, 101, 5, 0.14);
}

.chat-email-input--sub {
  font-size: 11.5px;
  background: #fdfdfd;
}

.chat-email-consent {
  margin-top: 2px;
}

.chat-email-consent__label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: #716a65;
  cursor: pointer;
}

.chat-email-consent__cb {
  margin: 1px 0 0;
  accent-color: #f76505;
  flex-shrink: 0;
}

.chat-email-consent__label a {
  color: #f76505;
  text-decoration: underline;
}

.chat-email-error {
  padding: 6px 10px;
  border-radius: 7px;
  background: #fdeced;
  color: #c5221f;
  font-size: 11px;
  line-height: 1.35;
  border: 1px solid rgba(197, 34, 31, 0.2);
}

.chat-email-error[hidden] {
  display: none !important;
}

.chat-email-submit {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: #f76505;
  color: #ffffff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(247, 101, 5, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
  margin-top: 2px;
}

.chat-email-submit:hover {
  background: #e05800;
  transform: translateY(-1px);
}

/* Плашка сохранённого email */
.chat-email-badge-wrap {
  display: flex;
  justify-content: center;
  margin: 2px 0 6px;
  animation: chat-fade-in 0.2s ease;
}

.chat-email-badge-wrap[hidden] {
  display: none !important;
}

.chat-email-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #716a65;
  background: rgba(34, 28, 24, 0.05);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 28, 24, 0.06);
}

.chat-email-badge strong {
  color: #171411;
}

.chat-email-change-btn {
  background: transparent;
  border: 0;
  color: #f76505;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin-left: 2px;
}

.chat-email-change-btn:hover {
  color: #c44e00;
}

/* Динамические сообщения */
.chat-flow-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg__time {
  font-size: 9.5px;
  opacity: 0.75;
  margin-top: 4px;
  display: block;
  text-align: right;
}

.chat-msg--bot .chat-msg__time {
  text-align: left;
}

/* Индикатор набора сообщения */
.chat-msg__bubble--typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  min-width: 48px;
}

.chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9c958f;
  animation: chat-typing 1.3s infinite ease-in-out;
}

.chat-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chat-typing {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
    background: #f76505;
  }
}

/* Нижняя строка ввода сообщения (Composer) */
.contact-chat__input-bar {
  flex-shrink: 0;
  padding: 10px 14px 10px;
  background: #ffffff;
  border-top: 1px solid rgba(34, 28, 24, 0.08);
}

.contact-chat__composer-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.contact-chat__textarea {
  flex: 1;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 12px;
  border: 1px solid rgba(34, 28, 24, 0.16);
  border-radius: 19px;
  background: #faf8f6;
  font-family: inherit;
  font-size: 13px;
  color: #171411;
  outline: none;
  resize: none;
  line-height: 1.35;
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.contact-chat__textarea:focus {
  border-color: #f76505;
  background: #ffffff;
  box-shadow: 0 0 0 2.5px rgba(247, 101, 5, 0.14);
}

.contact-chat__send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #f76505;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(247, 101, 5, 0.28);
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.contact-chat__send-btn:hover {
  background: #e05800;
  transform: scale(1.06);
}

.contact-chat__send-btn:active {
  transform: scale(0.96);
}

.contact-chat__send-btn:disabled {
  background: #d1cbc7;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

@keyframes contact-spin {
  to { transform: rotate(360deg); }
}

@keyframes chat-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .contact-popover.contact-chat {
    right: 16px;
    bottom: 85px;
    width: calc(100vw - 32px);
    height: min(560px, calc(100vh - 100px));
    min-height: 380px;
  }

  .chat-form-card {
    margin-left: 0;
  }
}



img {
  display: block;
  max-width: 100%;
}


.rmsm-markets {
  --rmsm-design-w: 1922;
  --rmsm-design-h: 1734;
  --rmsm-text-main: #f5f3ef;
  
  
  --rmsm-line-scale: 1;
  --rmsm-track-width-desktop: 2px;
  --rmsm-runner-width-desktop: 1.6px;
  --rmsm-runner-blur-desktop: 0.8px;
  --rmsm-inner-core-width-desktop: 0.6px;
  --rmsm-inner-core-blur-desktop: 1px;
  --rmsm-glow-soft-desktop: 12px;
  --rmsm-glow-mid-desktop: 18px;
  --rmsm-glow-wide-desktop: 60px;
  --rmsm-runner-opacity-desktop: 1;
  --rmsm-inner-core-opacity-desktop: 0.8;
  
  
  --rmsm-center-market-x: 50%;
  --rmsm-side-market-distance: 18.4%;
  
  
  --rmsm-track-width: calc(var(--rmsm-track-width-desktop) * var(--rmsm-line-scale));
  --rmsm-track-color: rgba(40, 37, 18, 0.7);
  --rmsm-runner-width: calc(var(--rmsm-runner-width-desktop) * var(--rmsm-line-scale));
  --rmsm-runner-opacity: var(--rmsm-runner-opacity-desktop);
  --rmsm-runner-blur: calc(var(--rmsm-runner-blur-desktop) * var(--rmsm-line-scale));
  --rmsm-runner-core: rgba(255, 135, 25, 0.96);
  --rmsm-runner-hot: rgba(255, 190, 110, 1);
  --rmsm-runner-edge-transparent: rgba(0, 0, 0, 0);
  --rmsm-runner-tail-far: rgba(18, 16, 0, 0.07);
  --rmsm-runner-tail-mid: rgba(58, 48, 8, 0.22);
  --rmsm-runner-tail-near: rgba(124, 84, 18, 0.52);
  --rmsm-runner-core-color: var(--rmsm-runner-core);
  --rmsm-runner-core-hot: var(--rmsm-runner-hot);
  
  
  --rmsm-runner-stop-1: 0%; --rmsm-runner-stop-2: 10%; --rmsm-runner-stop-3: 22%;
  --rmsm-runner-stop-4: 37%; --rmsm-runner-stop-5: 50%; --rmsm-runner-stop-6: 50%;
  --rmsm-runner-stop-7: 50%; --rmsm-runner-stop-8: 63%; --rmsm-runner-stop-9: 78%;
  --rmsm-runner-stop-10: 90%; --rmsm-runner-stop-11: 100%;
  
  
  --rmsm-inner-core-width: calc(var(--rmsm-inner-core-width-desktop) * var(--rmsm-line-scale));
  --rmsm-inner-core-blur: calc(var(--rmsm-inner-core-blur-desktop) * var(--rmsm-line-scale));
  --rmsm-inner-core-opacity: var(--rmsm-inner-core-opacity-desktop);
  --rmsm-runner-inner-tail: rgba(255, 210, 150, 0.20);
  --rmsm-runner-inner-core: rgba(230, 102, 14, 0.9);
  --rmsm-runner-inner-hot: rgba(230, 102, 14, 1);
  
  
  --rmsm-glow-soft: calc(var(--rmsm-glow-soft-desktop) * var(--rmsm-line-scale));
  --rmsm-glow-mid: calc(var(--rmsm-glow-mid-desktop) * var(--rmsm-line-scale));
  --rmsm-glow-wide: calc(var(--rmsm-glow-wide-desktop) * var(--rmsm-line-scale));

  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1922 / 1734;
  overflow: hidden;
  isolation: isolate;
  background: #0d0902;
  color: var(--rmsm-text-main);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.rmsm-markets * { box-sizing: border-box; }

.rmsm-markets__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: saturate(1.06) brightness(0.96);
}


.rmsm-markets__headline {
  position: absolute;
  left: clamp(20px, 3.2vw, 58px);
  top: clamp(30px, 5vw, 80px);
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1vw, 18px);
  z-index: 8;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.rmsm-markets__headline-icon {
  width: clamp(30px, 2.25vw, 42px);
  height: clamp(30px, 2.25vw, 42px);
}

.rmsm-markets__headline-text {
  font-size: 42.914px;
  font-family: Onest-SemiBold, Onest;
  font-weight: 600;
}


.rmsm-markets__tracks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.rmsm-markets__tracks-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.rmsm-track-base {
  fill: none;
  stroke: var(--rmsm-track-color);
  stroke-width: var(--rmsm-track-width);
}

.rmsm-track-runner-layer {
  fill: none;
  opacity: var(--rmsm-runner-opacity);
}

.rmsm-track-runner--glow {
  stroke-width: calc(var(--rmsm-runner-width) * 1.2);
  filter: blur(var(--rmsm-runner-blur)) 
          drop-shadow(0 0 var(--rmsm-glow-soft) rgba(255, 130, 20, 0.22));
  opacity: 0.64;
}

.rmsm-track-runner--core { stroke-width: var(--rmsm-runner-width); }
.rmsm-track-runner--inner {
  stroke-width: var(--rmsm-inner-core-width);
  filter: blur(var(--rmsm-inner-core-blur));
  opacity: var(--rmsm-inner-core-opacity);
}


.rmsm-markets__node, .rmsm-markets__hub, .rmsm-markets__screen {
  position: absolute;
  z-index: 4;
}

.rmsm-markets__node {
  --rmsm-node-size: clamp(84px, 6.4vw, 112px);
  width: var(--rmsm-node-size);
  height: var(--rmsm-node-size);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.38));
}

.rmsm-markets__node > img {
  width: 100%;
  height: 100%;
  border-radius: 22%;
  display: block;
}

.rmsm-markets__node--wb { left: calc(50% - var(--rmsm-side-market-distance)); top: 22.2%; }
.rmsm-markets__node--avito { left: 50%; top: 22.2%; }
.rmsm-markets__node--yandex { left: calc(50% + var(--rmsm-side-market-distance)); top: 22.2%; }

.rmsm-markets__hub {
  left: 50%;
  top: 51.4%;
  width: min(25.4vw, 488px);
  min-width: 320px;
  transform: translate(-50%, -50%);
}

.rmsm-markets__screen {
  left: 50%;
  top: 76.7%;
  width: min(42vw, 760px);
  min-width: 450px;
  transform: translate(-50%, -50%);
}

/*
  ПК: поднять иконки / hub / экран (линии — JS) относительно фона.
  45px на FHD при design-h 1734 → 45/1734 ≈ 2.595% высоты секции.
  Фон (.rmsm-markets__bg) не двигаем.
*/
@media (min-width: 1101px) {
  .rmsm-markets {
    --rmsm-content-lift: 2.595%; /* 45px / 1734 */
  }

  .rmsm-markets__node--wb,
  .rmsm-markets__node--avito,
  .rmsm-markets__node--yandex {
    top: calc(22.2% - var(--rmsm-content-lift));
  }

  .rmsm-markets__hub {
    top: calc(51.4% - var(--rmsm-content-lift));
  }

  .rmsm-markets__screen {
    top: calc(76.7% - var(--rmsm-content-lift));
  }
}


/* Базовый сдвиг для десктопа */
.rmsm-markets__screen > img:first-child {
  transform: translateX(33px);
}

/* Уменьшаем сдвиг для небольших ноутов и горизонтальных планшетов */
@media (max-width: 1100px) {
  .rmsm-markets__screen > img:first-child {
    transform: none;
  }
}

/* Еще сильнее уменьшаем для вертикальных планшетов */
@media (max-width: 780px) {
  .rmsm-markets__screen > img:first-child {
    transform: none;
  }
}

/* Полностью убираем сдвиг на смартфонах, где элемент занимает почти весь экран */
@media (max-width: 560px) {
  .rmsm-markets__screen > img:first-child {
    transform: none;
  }
}


.rmsm-markets__connector {
  position: absolute;
  width: calc(clamp(10px, 0.68vw, 15px) * 1.25);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(213, 202, 187, 0.65);
  background: rgba(14, 10, 5, 0.88);
  z-index: 6;
}

.rmsm-markets__node .rmsm-markets__connector { left: 50%; top: 100%; transform: translate(-50%, -50%); }
.rmsm-markets__hub .rmsm-markets__connector--top { left: 50%; top: 0; transform: translate(-50%, -50%); }
.rmsm-markets__hub .rmsm-markets__connector--bottom { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.rmsm-markets__screen .rmsm-markets__connector--top { left: 50%; top: 0; transform: translate(-50%, -50%); }


.status-loader {
  position: absolute;
  
  
  top: 39.2%; 
  left: 28.8%;
  
  width: 56px; 
  height: 56px;
  
  /* Если нужно сделать палочки светлее или изменить их вид, 
     лучше это делать внутри самого файла спиннера */
}


@media (max-width: 1100px) {
  .rmsm-markets {
    --rmsm-line-scale: 0.9;
    --rmsm-side-market-distance: 18.9%;
  }
}

@media (max-width: 780px) {
  .rmsm-markets {
    --rmsm-line-scale: 0.76;
    --rmsm-side-market-distance: 24%;
    min-height: 720px;
  }
  .rmsm-markets__node { --rmsm-node-size: clamp(58px, 11vw, 84px); }
  .rmsm-markets__node--wb, .rmsm-markets__node--avito, .rmsm-markets__node--yandex { top: 22%; }
  
  .rmsm-markets__hub { top: 48.8%; width: 58vw; min-width: 245px; }
  .rmsm-markets__screen { top: 75.2%; width: 72vw; min-width: 290px; }
  
  .rmsm-markets__headline { left: 16px; top: 60px; }
  .rmsm-markets__headline-text { font-size: clamp(16px, 5vw, 24px); }
}

@media (max-width: 560px) {
  .rmsm-markets {
    --rmsm-line-scale: 0.68;
    --rmsm-side-market-distance: 26%;
    min-height: 640px;
  }
  .rmsm-markets__node { --rmsm-node-size: clamp(52px, 14vw, 76px); }
  .rmsm-markets__headline { left: 12px; top: 50px; }
}









        .svc-features-root,
        .svc-features-root * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
        }

        
        .svc-features-root {
            position: relative;
            z-index: 3;
            width: 100%;
            min-height: 100vh;
            background: transparent;
            font-family: 'Onest', sans-serif;
            overflow-x: hidden;
            margin-top: -100px;
        }

        
        .svc-features-main {
            position: relative;
            width: 100%;
            min-height: 100vh;
            background: #FFFFFF;
            border-radius: 100px 100px 0 0;
            margin-top: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2;
            overflow: hidden;
        }   

        
        .svc-features-header {
            text-align: center;
            margin-top: 80px;
            margin-bottom: 80px;
        }

        .svc-features-subtitle {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 28px;
            color: #010101;
            font-weight: 300;
            margin-bottom: 15px;
        }

        .svc-features-dot {
            width: 17px;
            height: 17px;
            background-color: #FF6600;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 127, 0, 1);
            transform: translateX(1px);
        }

        .svc-features-title {
            font-size: 80px;
            color: #010101;
            font-weight: 600;
            line-height: 1.1;
            text-transform: uppercase;
        }

        .svc-features-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            row-gap: 50px;
            column-gap: 45px;
            max-width: 1800px;
            padding-bottom: 60px;
        }

        
        .svc-features-card {
            background: #FFFFFF;
            border-radius: 30px;
            padding: 20px 20px 45px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.10);
        }

        
        .svc-features-card-sm {
            width: 545px;
            height: 393px;
        }

        .svc-features-card-lg {
            width: 822px;
            height: 393px;
        }

        
        .svc-features-card-title {
            font-size: 24px;
            color: #010101;
            font-weight: 500;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .svc-features-card-icon {
            width: 20px;
            height: 20px;
            display: block;
        }

        .svc-features-card-desc {
            font-size: 20px;
            color: #B4B4B4;
            font-weight: 500;
            line-height: 1.3;
            margin: 0;
            max-width: 80%; 
        }

        
        .svc-features-decor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }

        .svc-features-header,
        .svc-features-grid {
            position: relative;
            z-index: 2;
        }        

        .svc-features-emoji-box { position: absolute; left: 15px; top: 30px; opacity: 1; transform: scale(0.8); }
        .svc-features-shape-box { position: absolute; right: -200px; top: 150px; opacity: 0.3; transform: scale(0.8); }

        /* CSS-смайлик: цвет как в оригинале (#FA8C5E), глаза — лёгкий path из sc-smile.svg */
        .svc-features-emoji {
            width: 615px;
            height: 615px;
            position: relative;
            border-radius: 50%;
            background: #FA8C5E;
            background-image: radial-gradient(
                circle at 35% 75%,
                rgba(255, 122, 64, 0.8) 0%,
                rgba(250, 140, 94, 0) 60%
            );
            box-shadow: 15px 25px 45px rgba(0, 0, 0, 0.12);
            overflow: hidden;
        }

        .svc-features-eyes-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
        }

        .svc-features-shape { position: relative; width: 600px; height: 600px; }
        .svc-features-part { position: absolute; background: #EB6116; border-radius: 15px; }
        .svc-features-part-1 { width: 167px; height: 324px; left: 0; top: 0; }
        .svc-features-part-2 { width: 148px; height: 260px; left: 150px; top: 296px; }
        .svc-features-part-3 { width: 72px; height: 164px; left: 280px; top: 160px; }
        .svc-features-corner { position: absolute; width: 40px; height: 40px; }
        .svc-features-corner-1 { left: 110px; top: 324px; background: radial-gradient(circle at 0% 100%, transparent 40px, #EB6116 40px); }
        .svc-features-corner-2 { left: 167px; top: 256px; background: radial-gradient(circle at 100% 0%, transparent 40px, #EB6116 40px); }
        .svc-features-corner-3 { left: 240px; top: 256px; background: radial-gradient(circle at 0% 0%, transparent 40px, #EB6116 40px); }
        .svc-features-corner-4 { left: 298px; top: 324px; background: radial-gradient(circle at 100% 100%, transparent 40px, #EB6116 40px); }

        .svc-lk-window {
            position: relative;
            width: 450px;
            scale: 1.1;
            margin-top: 16px;
        }

        .svc-lk-seller {
            position: absolute;
            left: 0;
            top: 48px;
            width: 222px;
            height: 178px;
            z-index: 2;
            display: block;
            text-decoration: none;
            color: inherit;
            cursor: pointer;
            border-radius: 14px;
            outline: none;
            transition: transform 0.22s ease, filter 0.22s ease;
        }

        .svc-lk-seller:hover,
        .svc-lk-seller:focus-visible {
            transform: scale(1.035);
            filter: brightness(1.04);
        }

        .svc-lk-seller:focus-visible {
            box-shadow: 0 0 0 3px rgba(247, 101, 5, 0.35);
        }

        .svc-lk-seller svg {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
        }

        .svc-lk-tools {
            position: absolute;
            right: 0;
            top: 10px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 3;
        }

        .svc-lk-tool-wrapper {
            width: 152px;
            height: 88px;
            box-sizing: border-box;
            border: 0.1px solid rgba(52, 52, 52, 0.2);
            background: transparent;
            border-radius: 7px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: transform 0.22s ease, filter 0.22s ease;
        }

        .svc-lk-tool-wrapper:hover {
            transform: scale(1.035);
            filter: brightness(1.04);
        }

        .svc-lk-tool-wrapper:focus-visible {
            outline: 2px solid #eb6116;
            outline-offset: 2px;
        }

        .svc-lk-tool-card {
            width: 132px;
            height: 72px;
            box-sizing: border-box;
            border: 0.7px solid #eb6116;
            background: #facbad;
            border-radius: 9px;
            padding: 5px 9px 0;
            box-shadow: inset 0 0 10px rgba(239, 120, 28, 0.2);
            text-align: left;
        }

        .svc-lk-tool-title {
            font-family: 'Onest', sans-serif;
            font-weight: 500;
            font-size: 16.5px;
            line-height: 1.05;
            color: #eb6116;
        }

        .svc-lk-tool-subtitle {
            margin-top: 2px;
            font-family: 'Onest', sans-serif;
            font-weight: 300;
            font-size: 12.5px;
            line-height: 1.05;
            color: #ffffff;
        }

        .svc-lk-tool-dot {
            width: 2px;
            height: 2px;
            background: #b4b4b4;
            position: absolute;
        }

        .svc-lk-tool-dot-tl { top: 5px; left: 5px; }
        .svc-lk-tool-dot-tr { top: 5px; right: 5px; }
        .svc-lk-tool-dot-bl { bottom: 5px; left: 5px; }
        .svc-lk-tool-dot-br { bottom: 5px; right: 5px; }

        .svc-lk-tool-card-tracker {
        padding-top: 3px;
        }

        .svc-lk-lines {
            position: absolute;
            left: 0;
            top: 0;
            width: 450px;
            height: 250px;
            pointer-events: none;
            z-index: 1;
        }

        .svc-lk-lines path {
            fill: none;
            stroke: #F7A47D;
            stroke-width: 2.8;
            stroke-linecap: round;
        }

        .svc-lk-hub-glow {
            fill: url(#svc-lk-hub-gradient);
            pointer-events: none;
        }

        .svc-lk-line-base {
            stroke: #F7A47D;
            stroke-width: 1.35;
            opacity: 0.5;
        }

        .svc-lk-line-pulse {
            stroke: url(#svc-lk-pulse-gradient);
            stroke-width: 1.9;
            stroke-dasharray: 70 160;
            stroke-dashoffset: 0;
            filter: none;
            opacity: 0.7;
            animation: svc-lk-line-pulse-move 3s linear infinite;
        }

        .svc-lk-line-pulse-2 {
            animation-delay: 0.25s;
        }

        .svc-lk-line-pulse-3 {
            animation-delay: 0.5s;
        }

        @keyframes svc-lk-line-pulse-move {
            from {
                stroke-dashoffset: 230;
            }
            to {
                stroke-dashoffset: 0;
            }
        }


        
        .svc-visual-chart-container {
            width: 100%;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .svc-visual-chart-container svg {
            width: 100%;
            height: auto;
            max-height: 250px; 
            display: block;
        }

        
        #mainLine {
            stroke-dasharray: 1400;
            stroke-dashoffset: 1400;
        }

        #forecast-card {
            transform-box: fill-box;
            transform-origin: center center;
            opacity: 0;
            transform: translate(0px, 16px) scale(0.96);
            transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        #forecast-card.show {
            opacity: 1;
            transform: translate(0px, 0px) scale(1);
        }

        .svc-forecast-btn {
            cursor: pointer;
            outline: none;
        }

        .svc-forecast-btn rect {
            transition: fill 0.2s ease, filter 0.2s ease;
        }

        .svc-forecast-btn:hover rect {
            fill: #ff7a1a;
            filter: brightness(1.05);
        }

        .svc-forecast-btn:focus-visible rect {
            stroke: #ffffff;
            stroke-width: 3;
        }

        #connectorLine {
          opacity: 0;
        }

        
        .svc-features-card-parser {
            position: relative;
            overflow: hidden;
            
            background: radial-gradient(
                100% 100% at 50% 100%, 
                #FF7A1A 0%,    
                #FFD5B8 50%,   
                #FFFFFF 100%   
            );
            border: none; 
        }

        
        .svc-features-card-parser .svc-features-card-title {
            color: #010101; 
        }

        .svc-features-card-parser .svc-features-card-desc {
            color: rgba(1, 1, 1, 0.5); 
        }

        
        .svc-parser-cards-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 260px; 
            pointer-events: none; 
        }

        
        .svc-parser-item {
            position: absolute;
            width: 230px; 
            
            opacity: 0;
            transform: translateY(150px);
            filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.08));
            pointer-events: auto;
            cursor: pointer;
            z-index: 1;
            display: block;
            text-decoration: none;
            color: inherit;
            /* Hover only — entrance is a separate keyframe animation */
            transition:
              transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.2s ease;
        }

        .svc-parser-item img {
            width: 100%;
            height: auto;
            display: block;
            pointer-events: none;
        }

        .svc-parser-item-1 {
            left: 35px;
            bottom: 8px;
        }

        .svc-parser-item-2 {
            left: 50%;
            margin-left: -115px; 
            bottom: -22px;
            z-index: 2;
        }

        .svc-parser-item-3 {
            right: 35px;
            bottom: 14px;
        }

        @keyframes svc-parser-enter {
            from {
                opacity: 0;
                transform: translateY(150px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        
        .svc-features-card-parser.is-animated .svc-parser-item {
            animation: svc-parser-enter 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
        }

        
        .svc-features-card-parser.is-animated .svc-parser-item-1 { animation-delay: 0s; }
        .svc-features-card-parser.is-animated .svc-parser-item-2 { animation-delay: 0.15s; }
        .svc-features-card-parser.is-animated .svc-parser-item-3 { animation-delay: 0.3s; }

        /* After entrance settles — hover without restarting keyframes */
        .svc-features-card-parser.is-hoverable .svc-parser-item {
            animation: none;
            opacity: 1;
            transform: translateY(0) scale(1);
            transition:
              transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.2s ease;
        }

        .svc-features-card-parser.is-hoverable .svc-parser-item:hover {
            transform: translateY(-8px) scale(1.035);
            filter:
              drop-shadow(0 14px 24px rgba(0, 0, 0, 0.14))
              brightness(1.02);
            z-index: 5;
        }

        /* Soft press — small delta from hover so it doesn't jump */
        .svc-features-card-parser.is-hoverable .svc-parser-item:active {
            transform: translateY(-5px) scale(1.02);
            filter:
              drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12))
              brightness(1.01);
            transition-duration: 0.12s;
            transition-timing-function: ease-out;
        }

        @media (hover: none) {
          .svc-features-card-parser.is-hoverable .svc-parser-item:hover {
            transform: translateY(0) scale(1);
            filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.08));
            z-index: auto;
          }

          .svc-features-card-parser.is-hoverable .svc-parser-item:active {
            transform: translateY(-3px) scale(1.015);
            filter:
              drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12))
              brightness(1.01);
          }
        }


        
        .svc-features-card-ai {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /*
          AI chat:
          pill-облачка, крупный текст 20px / статус 18px,
          юзер 66px, бот 70px (+4).
        */
        .svc-ai-chat-wrapper {
            position: relative;
            margin-top: 12px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1 1 auto;
            padding-inline: 10px;
            box-sizing: border-box;
        }

        .svc-ai-chat {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 30px;
            padding: 2px 0 4px;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.75s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .svc-ai-chat.is-appeared {
            opacity: 1;
            transform: translateY(0);
        }

        .svc-ai-msg {
            display: flex;
            align-items: center;
            gap: 18px;
            width: 100%;
            min-width: 0;
        }

        .svc-ai-msg--user {
            justify-content: flex-end;
            padding-left: 0;
            padding-right: 22px; /* чуть ближе к центру */
        }

        .svc-ai-msg--bot {
            justify-content: flex-start;
            padding-right: 0;
            padding-left: 22px; /* чуть ближе к центру */
        }

        .svc-ai-avatar-shell {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
        }

        .svc-ai-avatar-shell--user {
            width: 66px;
            height: 66px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow:
              0 0 0 2.5px #ff6600,
              0 0 14px 3px rgba(255, 102, 0, 0.28),
              0 3px 10px rgba(0, 0, 0, 0.06);
            background: #fff;
        }

        .svc-ai-avatar-shell--bot {
            width: 70px;
            height: 70px;
            filter: drop-shadow(0 0 12px rgba(255, 102, 0, 0.35));
        }

        .svc-ai-avatar {
            width: 100%;
            height: 100%;
            display: block;
            pointer-events: none;
            user-select: none;
        }

        .svc-ai-avatar-shell--user .svc-ai-avatar {
            object-fit: cover;
            object-position: center 18%;
        }

        .svc-ai-avatar-shell--bot .svc-ai-avatar {
            object-fit: cover;
            object-position: center;
        }

        .svc-ai-bubble {
            background: #F2F2F2;
            padding: 16px 20px;
            border-radius: 999px;
            box-shadow:
              0 2px 6px rgba(0, 0, 0, 0.04),
              0 6px 18px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            min-width: 0;
            flex: 0 1 auto;
            width: fit-content;
            max-width: 370px; /* чуть подлиннее */
        }

        .svc-ai-msg--user .svc-ai-bubble {
            border-radius: 999px;
            text-align: left;
        }

        .svc-ai-msg--bot .svc-ai-bubble {
            border-radius: 999px;
        }

        .svc-ai-bubble__text {
            font-family: 'Onest', sans-serif;
            font-size: 20px;
            font-weight: 500;
            line-height: 1.12;
            color: #000000;
        }

        .svc-ai-bubble__status {
            font-family: 'Onest', sans-serif;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.12;
            color: #A0A0A0;
            transition: opacity 0.3s ease;
        }




    
    .rvwx-df-fragment {
      padding: 44px 32px 56px;
      background: #FFFFFF;
    }

    .rvwx-df-frame {
      --rvwx-df-radius: 40px;
      --rvwx-df-stroke: 2.5px;
      --rvwx-df-stroke-color: rgba(247, 185, 150, 0.92);
      --rvwx-df-pad-x: 92px;
      position: relative;
      width: 1440px;
      max-width: 100%;
      margin: 0 auto;
      padding: 82px var(--rvwx-df-pad-x) 78px;
      border: none;
      border-radius: var(--rvwx-df-radius);
      background: transparent;
      overflow: hidden;
    }

    /*
      Обводка (референс): только верхняя и нижняя «шапки».
      Закругление до 90° (высота = radius), дальше боковые стороны обрезаны.
      Снизу — та же форма, перевёрнутая.
    */
    .rvwx-df-frame::before,
    .rvwx-df-frame::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: var(--rvwx-df-radius);
      box-sizing: border-box;
      border: var(--rvwx-df-stroke) solid var(--rvwx-df-stroke-color);
      pointer-events: none;
      z-index: 4;
      filter:
        drop-shadow(0 0 4px rgba(255, 150, 95, 0.55))
        drop-shadow(0 0 12px rgba(255, 145, 80, 0.4))
        drop-shadow(0 0 24px rgba(255, 140, 70, 0.28))
        drop-shadow(0 0 42px rgba(255, 135, 65, 0.16));
    }

    /* Верх: линия + углы до 90°, на уровне точек */
    .rvwx-df-frame::before {
      top: 0;
      border-bottom: none;
      border-radius: var(--rvwx-df-radius) var(--rvwx-df-radius) 0 0;
    }

    /* Низ: зеркально */
    .rvwx-df-frame::after {
      bottom: 0;
      border-top: none;
      border-radius: 0 0 var(--rvwx-df-radius) var(--rvwx-df-radius);
    }

    /*
      Боковые штрихи (как до переноса на общий класс):
      01/03 — section::before у левого края рамки
      02/04 — .copy::after сразу после текста (right: 0)
      Толщина 2px, без filter/box-shadow (не раздуваются).
    */
    .rvwx-df-frame .section[data-section="1"]::before,
    .rvwx-df-frame .section[data-section="3"]::before,
    .rvwx-df-frame .section[data-section="2"] .copy::after,
    .rvwx-df-frame .section[data-section="4"] .copy::after {
      content: '';
      position: absolute;
      box-sizing: border-box;
      width: 2px;
      min-width: 2px;
      max-width: 2px;
      height: clamp(72px, 9vw, 108px);
      border: none;
      border-radius: 1px;
      background: linear-gradient(
        to bottom,
        rgba(247, 185, 150, 0.95) 0%,
        rgba(247, 185, 150, 0.88) 40%,
        rgba(247, 185, 150, 0.45) 68%,
        rgba(247, 185, 150, 0.12) 88%,
        rgba(247, 185, 150, 0) 100%
      );
      box-shadow: none;
      filter: none;
      pointer-events: none;
      z-index: 4;
    }

    .rvwx-df-frame .section[data-section="1"]::before,
    .rvwx-df-frame .section[data-section="3"]::before {
      top: clamp(72px, 7.5vw, 88px);
      left: calc(-1 * var(--rvwx-df-pad-x));
    }

    .rvwx-df-frame .section[data-section="2"] .copy,
    .rvwx-df-frame .section[data-section="4"] .copy {
      position: relative;
    }

    .rvwx-df-frame .section[data-section="2"] .copy::after,
    .rvwx-df-frame .section[data-section="4"] .copy::after {
      top: clamp(-12px, -0.6vw, -4px);
      right: 0;
    }

    .rvwx-df-frame .section:last-child {
      padding-bottom: 96px;
    }


    /*
      3 точки сверху слева (референс):
      — в общей капсуле с обводкой
      — круги крупнее
      — средний круг светлее боковых
    */
    .rvwx-df-chrome {
      position: absolute;
      top: 20px;
      left: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      /* размер таблетки как раньше (~32×116), круги крупнее за счёт меньшего padding */
      height: 34px;
      padding: 0 8px;
      border-radius: 999px;
      background: #ffffff;
      border: 1.5px solid rgba(255, 180, 145, 0.7);
      box-shadow:
        0 0 0 1px rgba(255, 200, 170, 0.12),
        0 1px 6px rgba(255, 160, 110, 0.12);
      z-index: 10;
      box-sizing: border-box;
    }

    .rvwx-df-chrome span {
      display: block;
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      /* боковые: персик #F7D9C7 */
      background: rgb(247, 217, 199);
      border: none;
      box-shadow: none;
    }

    /* Центральный круг — светлее */
    .rvwx-df-chrome span:nth-child(2) {
      background: rgb(248, 228, 218);
    }

    
    .rvwx-df-frame .timeline {
      position: absolute;
      top: var(--timeline-top, 46px);
      height: var(--timeline-height, 0px);
      bottom: auto;
      left: var(--center-x);
      width: 3px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(
        to bottom,
        rgba(255, 111, 26, 0) 0%,
        rgba(255, 111, 26, 0.18) 3%,
        rgba(255, 111, 26, 0.55) 6%,
        rgba(255, 111, 26, 0.95) 10%,
        rgba(255, 111, 26, 0.95) 100%
      );
      box-shadow: 0 0 8px rgba(255, 111, 26, 0.14), 0 0 18px rgba(255, 111, 26, 0.08);
      pointer-events: none;
      z-index: 0;
    }

    .rvwx-df-frame .timeline::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 8px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(
        to bottom,
        rgba(255, 111, 26, 0) 0%,
        rgba(255, 111, 26, 0.035) 5%,
        rgba(255, 111, 26, 0.08) 10%,
        rgba(255, 111, 26, 0.08) 90%,
        rgba(255, 111, 26, 0.035) 95%,
        rgba(255, 111, 26, 0.0) 100%
      );
      filter: blur(5px);
      pointer-events: none;
    }

    /* убираем хвостик над timeline, если остался от прошлой правки */
    .rvwx-df-frame .timeline::before {
      content: none;
    }

    
    .rvwx-df-frame .section {
      position: relative;
      width: 100%;
      min-height: 620px;
      display: grid;
      grid-template-columns: minmax(320px, 1fr) minmax(360px, 460px);
      gap: 64px;
      align-items: center;
      padding: 96px 0;
      z-index: 1;
    }

    .copy {
      max-width: 650px;
      padding-right: 24px;
    }

    .num {
      font-size: 29px;
      line-height: 1;
      color: #cdcccc;
      margin-bottom: 14px;
      font-family: Onest-Medium, Onest, Inter, system-ui, sans-serif;
      font-weight: 500;
    }

    .title {
      margin: 0 0 18px;
      font-size: 29px;
      line-height: 1.06;
      color: #010101;
      font-family: Onest-Medium, Onest, Inter, system-ui, sans-serif;
      font-weight: 600;
    }

    .text {
      margin: 0 0 26px;
      color: #010101;
      font-size: 20px;
      line-height: 1.35;
      max-width: 800px;
      font-family: Onest-Medium, Onest, Inter, system-ui, sans-serif;
      font-weight: 500;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: #010101;
      font-size: 24px;
      font-family: Onest-Medium, Onest, Inter, system-ui, sans-serif;
      font-weight: 500;
      margin-bottom: 18px;
      transition: opacity 0.2s;
    }

    .cta:hover { opacity: 0.7; }

    .rule {
      width: min(540px, 100%);
      height: 1px;
      background: rgba(0,0,0,.6);
    }

    .visual {
      position: relative;
      min-height: 460px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    
    
    /*
      Маркер (референс): плоские равные концентрические круги,
      без свечения/blur — только диски разного размера и тона.
      Центр: среднее между 22px и 14px → 18px.
    */
    .rvwx-df-frame .marker-wrapper {
      position: absolute;
      left: var(--center-x);
      top: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 2;
    }

    .marker-glow,
    .marker-ring,
    .marker-dot {
      position: absolute;
      border-radius: 50%;
      box-shadow: none;
      filter: none;
      pointer-events: none;
    }

    /* 4-й (внешний) круг */
    .marker-glow--outer {
      width: 52px;
      height: 52px;
      background: rgba(255, 200, 170, 0.28);
    }

    /* 3-й круг (предпредпоследний) — среднее 0.55 → 0.38 */
    .marker-glow--mid {
      width: 40px;
      height: 40px;
      background: rgba(255, 185, 145, 0.46);
    }

    /* 2-й круг (предпоследний) — чуть тусклее */
    .marker-ring {
      width: 28px;
      height: 28px;
      background: rgba(255, 155, 95, 0.48);
    }

    /* 1-й (центральный) — сплошной */
    .marker-dot {
      position: relative;
      width: 18px;
      height: 18px;
      background: #ff6600;
      z-index: 1;
    }

    
    .stack {
      position: relative;
      width: 431px;
      height: 370px;
    }

    .card {
      position: absolute;
      left: 0;
      top: 90px;
      width: var(--card-w);
      height: var(--card-h);
      display: block;
      filter: drop-shadow(var(--shadow));
      transform-origin: center center;
      will-change: transform;
      user-select: none;
      -webkit-user-drag: none;
      transition: transform 120ms linear;
      border-radius: var(--radius);
      overflow: visible;
    }

    .card svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .card .svg-accent-fill { fill: var(--card-current-fill, var(--card-muted)) !important; transition: fill 120ms linear, stroke 120ms linear; }
    .card .svg-accent-stroke { stroke: var(--card-current-stroke, var(--card-muted)) !important; transition: fill 120ms linear, stroke 120ms linear; }
    .card .svg-white { fill: var(--card-white) !important; transition: fill 120ms linear, stroke 120ms linear; }

    .c1 { transform: translate(0px, 0px); z-index: 4; }
    .c2 { transform: translate(calc(var(--dx) * 1), calc(var(--dy) * 1)); z-index: 3; }
    .c3 { transform: translate(calc(var(--dx) * 2), calc(var(--dy) * 2)); z-index: 2; }
    .c4 { transform: translate(calc(var(--dx) * 3), calc(var(--dy) * 3)); z-index: 1; }

    

@media (max-width: 1440px) {


  .rvwx-df-frame {
    --rvwx-df-radius: 32px;
    --rvwx-df-pad-x: 44px;
    padding: 68px var(--rvwx-df-pad-x) 62px;
    border-radius: var(--rvwx-df-radius);
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(300px, 1fr) minmax(300px, 390px);
    gap: 44px;
    min-height: 560px;
    padding: 80px 0;
  }

  .rvwx-df-frame .copy {
    max-width: 700px;
    padding-right: 16px;
  }

  .rvwx-df-frame .visual {
    min-height: 390px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.88);
    transform-origin: center center;
  }

  .rvwx-df-frame .marker-wrapper {
    width: 42px;
    height: 42px;
  }

  .rvwx-df-frame .marker-glow--outer {
    width: 42px;
    height: 42px;
    background: rgba(255, 200, 170, 0.28);
  }

  .rvwx-df-frame .marker-glow--mid {
    width: 34px;
    height: 34px;
  }

  .rvwx-df-frame .marker-ring {
    width: 24px;
    height: 24px;
  }

  .rvwx-df-frame .marker-dot {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 1180px) {
  :root {
    --center-x: 56%;
  }

  .rvwx-df-fragment {
    padding: 24px 16px 36px;
  }

  .rvwx-df-frame {
    --rvwx-df-radius: 28px;
    --rvwx-df-pad-x: 28px;
    padding: 60px var(--rvwx-df-pad-x) 48px;
    border-radius: var(--rvwx-df-radius);
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(280px, 1fr) minmax(260px, 330px);
    gap: 32px;
    min-height: 500px;
    padding: 68px 0;
  }

  .rvwx-df-frame .num {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .rvwx-df-frame .title {
    font-size: 25px;
    line-height: 1.08;
    margin-bottom: 14px;
  }

  .rvwx-df-frame .text {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 20px;
  }

  .rvwx-df-frame .cta {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .rvwx-df-frame .visual {
    min-height: 330px;
    justify-content: center;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.74);
  }
}

@media (max-width: 900px) {
  :root {
    --center-x: 55%;
  }

  .rvwx-df-frame {
    --rvwx-df-pad-x: 20px;
    padding: 52px var(--rvwx-df-pad-x) 42px;
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
    gap: 22px;
    min-height: 430px;
    padding: 56px 0;
  }

  .rvwx-df-frame .copy {
    max-width: none;
    padding-right: 0;
  }

  .rvwx-df-frame .num {
    font-size: 21px;
  }

  .rvwx-df-frame .title {
    font-size: 22px;
  }

  .rvwx-df-frame .text {
    font-size: 15px;
    line-height: 1.34;
  }

  .rvwx-df-frame .cta {
    font-size: 18px;
  }

  .rvwx-df-frame .visual {
    min-height: 285px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.62);
  }

  .rvwx-df-frame .marker-wrapper {
    width: 36px;
    height: 36px;
  }

  .rvwx-df-frame .marker-glow--outer {
    width: 36px;
    height: 36px;
    background: rgba(255, 200, 170, 0.28);
  }

  .rvwx-df-frame .marker-glow--mid {
    width: 30px;
    height: 30px;
  }

  .rvwx-df-frame .marker-ring {
    width: 21px;
    height: 21px;
  }

  .rvwx-df-frame .marker-dot {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 767px) {
  :root {
    --center-x: 53%;
  }

  .rvwx-df-fragment {
    padding: 14px 10px 26px;
  }

  .rvwx-df-frame {
    --rvwx-df-radius: 22px;
    --rvwx-df-pad-x: 14px;
    padding: 46px var(--rvwx-df-pad-x) 32px;
    border-radius: var(--rvwx-df-radius);
  }

  .rvwx-df-chrome {
    top: 12px;
    left: 18px;
    gap: 6px;
    height: 26px;
    padding: 0 6px;
  }

  .rvwx-df-chrome span {
    width: 20px;
    height: 20px;
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 34vw);
    gap: 12px;
    min-height: 330px;
    padding: 42px 0;
    align-items: center;
  }

  .rvwx-df-frame .num {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .rvwx-df-frame .title {
    font-size: clamp(17px, 4.5vw, 22px);
    line-height: 1.08;
    margin-bottom: 10px;
  }

  .rvwx-df-frame .text {
    font-size: clamp(12px, 3.45vw, 15px);
    line-height: 1.32;
    margin-bottom: 14px;
  }

  .rvwx-df-frame .cta {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .rvwx-df-frame .visual {
    min-height: 210px;
    justify-content: center;
    overflow: visible;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.46);
  }

  .rvwx-df-frame .marker-wrapper {
    width: 28px;
    height: 28px;
  }

  .rvwx-df-frame .marker-glow--outer {
    width: 28px;
    height: 28px;
    background: rgba(255, 200, 170, 0.28);
  }

  .rvwx-df-frame .marker-glow--mid {
    width: 24px;
    height: 24px;
  }

  .rvwx-df-frame .marker-ring {
    width: 17px;
    height: 17px;
  }

  .rvwx-df-frame .marker-dot {
    width: 11px;
    height: 11px;
  }

  .rvwx-df-frame .rule {
    width: 100%;
  }
}

@media (max-width: 560px) {
  :root {
    --center-x: 52%;
  }

  .rvwx-df-fragment {
    padding-inline: 8px;
  }

  .rvwx-df-frame {
    --rvwx-df-radius: 18px;
    --rvwx-df-pad-x: 10px;
    padding: 42px var(--rvwx-df-pad-x) 26px;
    border-radius: var(--rvwx-df-radius);
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) minmax(108px, 32vw);
    gap: 8px;
    min-height: 300px;
    padding: 36px 0;
  }

  .rvwx-df-frame .title {
    font-size: clamp(16px, 4.6vw, 19px);
  }

  .rvwx-df-frame .text {
    font-size: clamp(11px, 3.35vw, 13px);
  }

  .rvwx-df-frame .visual {
    min-height: 180px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.38);
  }

  .rvwx-df-frame .marker-wrapper {
    width: 26px;
    height: 26px;
  }

  .rvwx-df-frame .marker-glow--outer {
    width: 26px;
    height: 26px;
    background: rgba(255, 200, 170, 0.28);
  }

  .rvwx-df-frame .marker-glow--mid {
    width: 21px;
    height: 21px;
  }

  .rvwx-df-frame .marker-ring {
    width: 15px;
    height: 15px;
  }

  .rvwx-df-frame .marker-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 390px) {
  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 6px;
    min-height: 280px;
    padding: 32px 0;
  }

  .rvwx-df-frame .visual {
    min-height: 160px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.33);
  }

  .rvwx-df-frame .cta {
    font-size: 13px;
  }
}



    :root {
      --bg: #f3f3f3;
      --text: #161616;
      --muted: #bdbdbd;
      --line: #ff6a00;

      --card-w: 296px;
      --card-h: 280px;
      --dx: 45px;
      --dy: -30px;
      --lift: -164px;
      --shadow: 0 18px 38px rgba(255, 106, 0, 0.14);
      --radius: 40px;
      
      
      --center-x: 57%;

      --card-muted: #ffbc8d;
      --card-active: #f75f03;
      --card-white: #ffffff;
      
      --rvwx-df-frame-border: rgba(247, 185, 150, 0.85);
    }

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
.ramvt-video-tariffs-root {
  margin: 0;
  min-width: 320px;

}

body {

  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.ramvt-rvb-video-fragment {
  --rvb-page-bg: #f5f3ef;
  --rvb-text: #111111;
  --rvb-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rvb-rings-static-stroke: 1.2px;
  --rvb-rings-wave-stroke: 1.7px;
  position: relative;
  min-height: 100vh;
  overflow: clip;

  color: var(--rvb-text);
  font-family: var(--rvb-font);
  font-weight: 500;
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
    background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #f8f5f1 100%);
}

.ramvt-rvb-video-fragment,
.ramvt-rvb-video-fragment *,
.ramvt-rvb-video-fragment *::before,
.ramvt-rvb-video-fragment *::after {
  box-sizing: border-box;
}

.ramvt-rvb-video-fragment * {
  margin: 0;
  padding: 0;
}

.ramvt-rvb-video-fragment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}

.ramvt-rvb-under-glow {
  position: absolute;
  left: 50%;
  top: 66.5%;
  width: min(1120px, 92vw);
  height: min(300px, 24vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(219, 196, 168, 0.26) 0%,
    rgba(222, 201, 176, 0.14) 30%,
    rgba(227, 210, 190, 0.06) 50%,
    rgba(245, 243, 239, 0) 70%
  );
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

.ramvt-rvb-rings-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ramvt-rvb-rings-center {
  position: absolute;
  left: 50%;
  top: 43.3%;
  width: min(1520px, 124vw);
  height: min(1520px, 124vw);
  transform: translate(-50%, -50%);
}

.ramvt-rvb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ramvt-rvb-ring--static {
  border: var(--rvb-rings-static-stroke) solid rgba(0, 0, 0, 0.24);
}

.ramvt-rvb-ring--s1 {
  width: 100%;
  height: 100%;
  opacity: 0.24;
}

.ramvt-rvb-ring--s2 {
  width: 76%;
  height: 76%;
  opacity: 0.2;
}

.ramvt-rvb-ring--s3 {
  width: 52%;
  height: 52%;
  opacity: 0.17;
}

.ramvt-rvb-ring--wave {
  width: 13%;
  height: 13%;
  border: var(--rvb-rings-wave-stroke) solid rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: rvbRippleOut 4.1s linear infinite;
  animation-play-state: paused;
}

/* Run infinite ring ripples only while video/tariffs section is in (or near) view. */
.ramvt-rvb-stack-section.is-in-view .ramvt-rvb-ring--wave {
  animation-play-state: running;
}

.ramvt-rvb-ring--w2 { animation-delay: 0.82s; }
.ramvt-rvb-ring--w3 { animation-delay: 1.64s; }
.ramvt-rvb-ring--w4 { animation-delay: 2.46s; }
.ramvt-rvb-ring--w5 { animation-delay: 3.28s; }

@keyframes rvbRippleOut {
  0% {
    transform: translate(-50%, -50%) scale(0.08);
    opacity: 0;
  }
  8% {
    opacity: 0.68;
  }
  36% {
    opacity: 0.44;
  }
  68% {
    opacity: 0.18;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.6);
    opacity: 0;
  }
}

.ramvt-rvb-video-hero {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 56px 16px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(10px, 2vw, 25px);
}

/*
 * The headline wrapper holds the main title above the laptop. On smaller
 * screens the laptop tends to overlap with the heading, so we give the
 * wrapper extra bottom margin that scales with the viewport height. This
 * creates a larger gap between the headline and the animated laptop on
 * compact displays without blowing it out on large monitors. The clamp
 * ensures the margin never drops below 48px and never exceeds 160px.
 */
/*
 * Increase the vertical gap between the headline and the animated laptop.
 * Originally the bottom margin ranged from 48px to 160px, which wasn’t enough
 * once we started pushing the video up further to reveal it fully. This
 * updated clamp gives the headline breathing room across all viewport sizes
 * without allowing it to collapse on small screens or explode on large ones.
 */
.ramvt-rvb-headline-wrap {
  width: min(1380px, calc(100vw - 32px));
  margin: 0 auto clamp(350px, 35vh, 650px);
  text-align: center;
  z-index: 10;
}

.ramvt-rvb-video-title {
  text-transform: uppercase;
  font-size: clamp(52px, 6.25vw, 86px);
  line-height: 0.94;
  letter-spacing: 0;
  font-weight: 600;
}

.ramvt-rvb-title-line {
  display: block;
}

.ramvt-rvb-title-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 28px);
  margin-top: 12px;
}

.ramvt-rvb-title-text {
  display: inline-block;
  white-space: nowrap;
}

.ramvt-rvb-title-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.ramvt-rvb-title-image img {
  display: block;
  width: clamp(164px, 14.2vw, 218px);
  height: auto;
}

.ramvt-rvb-accent-word {
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  letter-spacing: 0;
  background: linear-gradient(90deg, #ff4030 0%, #ff5a2b 38%, #ff9821 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform-origin: 14% 78%;
  transform: rotate(-6deg);
  animation: rvbStatSwing 2.9s ease-in-out infinite;
  animation-play-state: paused;
  will-change: transform;
}

.ramvt-rvb-stack-section.is-in-view .ramvt-rvb-accent-word {
  animation-play-state: running;
}

@keyframes rvbStatSwing {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  25% {
    transform: rotate(-4.2deg) translateY(-1px);
  }
  50% {
    transform: rotate(-7.35deg) translateY(0);
  }
  75% {
    transform: rotate(-4.7deg) translateY(1px);
  }
}

/*
 * Constrain the width of the laptop so that its height never exceeds a
 * reasonable fraction of the viewport. Without this the laptop can
 * dominate the viewport on shorter screens (e.g. laptop monitors), making
 * the pricing section appear on top of the video. The aspect ratio of
 * the laptop shell is 16:10.15 (approx. 1.577). To keep the height
 * around 62vh, we limit the width to 62vh multiplied by the aspect
 * ratio. The 90vw and 1310px limits keep the laptop large on wide
 * desktops. Using calc() here allows the browser to pick the smallest
 * value among the candidates.
 */
.ramvt-rvb-laptop-wrap {
  position: relative;
  z-index: 3;
  /* Limit width by the available height: height should not exceed ~55vh.
     Since the laptop's aspect ratio is ~1.577 (16:10.15), we multiply
     55vh by this factor to get a width that keeps the height around
     55% of the viewport. On short screens this prevents the video from
     being obscured by the pricing section. */
  width: min(1310px, 90vw, calc(47vh * 1.577));
  transform-origin: center bottom;
  will-change: transform, opacity;
  filter: drop-shadow(0 34px 88px rgba(0, 0, 0, 0.22));
}

.ramvt-rvb-laptop-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.15;
  padding: 14px;
  border-radius: 34px;
  background: linear-gradient(180deg, #111111 0%, #020202 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 10px 18px rgba(255, 255, 255, 0.05),
    inset 0 -18px 44px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.ramvt-rvb-laptop-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.ramvt-rvb-laptop-notch {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 18.8%;
  height: 4.2%;
  background: #060606;
  border-radius: 0 0 18px 18px;
  z-index: 4;
}

.ramvt-rvb-laptop-camera {
  position: absolute;
  left: 50%;
  top: 1.45%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #4d77ff, #081c6b 62%, #020202 100%);
  z-index: 5;
}

.ramvt-rvb-screen-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #0b0b0b;
}

.ramvt-rvb-screen-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #0b0b0b;
}

.ramvt-rvb-screen-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.ramvt-rvb-video-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(92px, 8vw, 124px);
  height: clamp(92px, 8vw, 124px);
  border: none;
  border-radius: 50%;
  background: #ff1d1a;
  color: #ffffff;
  cursor: pointer;
  z-index: 8;
  display: block;
  box-shadow: 0 20px 38px rgba(255, 29, 26, 0.28);
  transition:
    transform 0.25s ease,
    width 0.24s ease,
    height 0.24s ease,
    top 0.24s ease,
    left 0.24s ease,
    right 0.24s ease,
    bottom 0.24s ease,
    background 0.24s ease,
    box-shadow 0.24s ease;
}

.ramvt-rvb-video-toggle:hover {
  transform: translate(-50%, -50%) scale(1.04);
}

.ramvt-rvb-video-toggle svg {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  display: block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ramvt-rvb-video-toggle .ramvt-rvb-icon-play {
  width: 50px;
  height: 50px;
  transform: translateX(3px);
}

.ramvt-rvb-icon-pause {
  opacity: 0;
  transform: scale(0.75);
}

.ramvt-rvb-video-toggle.is-playing {
  left: auto;
  top: auto;
  right: 22px;
  bottom: 22px;
  transform: none;
  width: 60px;
  height: 60px;
  background: rgba(10, 10, 12, 0.78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
}

.ramvt-rvb-video-toggle.is-playing:hover {
  transform: scale(1.05);
}

.ramvt-rvb-video-toggle.is-playing svg {
  width: 24px;
  height: 24px;
}

.ramvt-rvb-video-toggle.is-playing .ramvt-rvb-icon-play {
  opacity: 0;
  transform: scale(0.75) translateX(3px);
}

.ramvt-rvb-video-toggle.is-playing .ramvt-rvb-icon-pause {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1180px) {
  .ramvt-rvb-rings-center {
    top: 42.5%;
    width: min(1360px, 140vw);
    height: min(1360px, 140vw);
  }
}

@media (max-width: 980px) {
  .ramvt-rvb-title-inline {
    flex-wrap: wrap;
    white-space: normal;
  }

  .ramvt-rvb-title-text {
    white-space: normal;
  }

  .ramvt-rvb-laptop-wrap {
    /* On narrow viewports use the same height‑limited formula as the default,
       but allow up to 96vw so the laptop fills more horizontal space when
       there is enough height. */
    width: min(96vw, calc(47vh * 1.577));
  }
}

@media (max-width: 740px) {
  .ramvt-rvb-video-hero {
    min-height: auto;
    padding-top: 42px;
  }

  .ramvt-rvb-headline-wrap {
    margin-bottom: 22px;
  }

  .ramvt-rvb-video-title {
    font-size: 36px;
    line-height: 0.97;
  }

  .ramvt-rvb-title-inline {
    gap: 12px;
    margin-top: 10px;
  }

  .ramvt-rvb-title-image img {
    width: 132px;
  }

  .ramvt-rvb-rings-center {
    top: 45.2%;
    width: 176vw;
    height: 176vw;
  }

  .ramvt-rvb-laptop-shell {
    border-radius: 24px;
    padding: 10px;
  }

  .ramvt-rvb-screen-frame {
    border-radius: 16px;
  }

  .ramvt-rvb-video-toggle {
    width: 84px;
    height: 84px;
  }
}
.ramvt-tafseg-root {
  --tafseg-text: #121212;
  --tafseg-font: "Onest", "Inter", "Helvetica Neue", Arial, sans-serif;
  --tafseg-card-radius: 30px;
  --tafseg-shell-radius: clamp(48px, 5vw, 82px);

  position: relative;
  display: block;
  width: 100%;
  min-width: 320px;
  color: var(--tafseg-text);
  font-family: var(--tafseg-font);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.ramvt-tafseg-root,
.ramvt-tafseg-root * {
  box-sizing: border-box;
}

.ramvt-tafseg-root h1,
.ramvt-tafseg-root h2,
.ramvt-tafseg-root h3,
.ramvt-tafseg-root h4,
.ramvt-tafseg-root h5,
.ramvt-tafseg-root h6,
.ramvt-tafseg-root p,
.ramvt-tafseg-root ul,
.ramvt-tafseg-root ol {
  margin: 0;
}

.ramvt-tafseg-root ul,
.ramvt-tafseg-root ol {
  padding: 0;
}

.ramvt-tafseg-root button,
.ramvt-tafseg-root a {
  font: inherit;
}

.ramvt-tafseg-pricing-shell {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  padding: clamp(52px, 4.8vw, 84px) 0 clamp(64px, 5.8vw, 96px);
  
  border-radius: var(--tafseg-shell-radius);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      58% 38% at 50% 62%,
      rgba(255, 114, 32, 0.60) 0%,
      rgba(255, 125, 48, 0.31) 27%,
      rgba(255, 152, 90, 0.12) 45%,
      rgba(255, 255, 255, 0) 64%
    ),
    linear-gradient(
      180deg,
      #f8f8f8 0%,
      #f5f2ef 42%,
      #efd8ca 57%,
      #ff7425 76.4%,
      #f8f5f1 76.7%,
      #f8f5f1 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.03),
    0 26px 80px rgba(0, 0, 0, 0.08);
}

.ramvt-tafseg-pricing-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}

.ramvt-tafseg-pricing-top {
  position: relative;
  z-index: 3;
  width: min(980px, calc(100vw - 48px));
  margin: 0 auto;
  text-align: center;
}

.ramvt-tafseg-pricing-title {
  max-width: 980px;
  margin: 0 auto 34px;
  font-size: clamp(42px, 5.25vw, 76px);
  line-height: 0.94;
  letter-spacing: 0em;
  font-weight: 570;
}

.ramvt-tafseg-pricing-title-line {
  display: block;
  white-space: nowrap;
}

.ramvt-tafseg-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px;
  margin-bottom: 8px;
  border-radius: 19px;
  background: linear-gradient(180deg, #eee0d5 0%, #fdd8d4 100%);
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 1px 2px rgba(0, 0, 0, 0.03);
  transform: translateY(40px);
}

.ramvt-tafseg-toggle-btn {
  min-width: 142px;
  height: 52px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 19px;
  background: transparent;
  color: #282828;
  font-size: clamp(21px, 1.55vw, 24px);
  font-weight: 400;
  letter-spacing: -0.045em;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.ramvt-tafseg-toggle-btn.active {
  background: rgba(255, 252, 249, 0.98);
  border-color: rgba(255, 145, 89, 0.92);
  box-shadow:
    0 2px 10px rgba(255, 122, 47, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.ramvt-tafseg-toggle-btn:not(.active):hover {
  background: rgba(255, 255, 255, 0.16);
}

.ramvt-tafseg-pricing-carousel-wrap {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.ramvt-tafseg-pricing-carousel {
  position: relative;
  width: 100%;
  height: clamp(560px, 50vw, 800px);
}

.ramvt-tafseg-cards-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.ramvt-tafseg-pricing-arrow {
  position: absolute;
  top: 61.5%;
  width: 58px;
  height: 58px;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px solid #000;
  background: rgba(250, 248, 244, 0.94);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  font-size: 29px;
  line-height: 1;
  color: #4b4b4b;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ramvt-tafseg-pricing-arrow:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12);
}

.ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
  left: clamp(18px, 9.5vw, 168px);
}

.ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
  right: clamp(18px, 9.5vw, 168px);
}

.ramvt-tafseg-plan-card {
  position: absolute;
  left: 50%;
  top: 56.1%;
  width: clamp(312px, 19.2vw, 362px);
  height: clamp(495px, 34vw, 575px);
  padding: 18px 18px 20px;
  border-radius: var(--tafseg-card-radius);
  border: 1px solid rgba(255, 136, 77, 0.76);
  background: rgba(248, 248, 248, 0.96);
  text-align: left;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.05);
  translate: 0 0;
  transition:
    transform 0.64s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.44s ease,
    filter 0.44s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background-color 0.32s ease;
  transform-origin: 50% 50%;
}

.ramvt-tafseg-plan-card,
.ramvt-tafseg-plan-card * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

.ramvt-tafseg-plan-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 90%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
  opacity: 0.56;
  transition: opacity 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.ramvt-tafseg-plan-card.is-center::before,
.ramvt-tafseg-plan-card.is-near::before,
.ramvt-tafseg-plan-card.is-far::before {
  opacity: 0.56;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
}

.ramvt-tafseg-plan-card:hover::before {
  opacity: 1;
  background: rgba(255, 255, 255, 0.985);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.58),
    0 0 18px rgba(255, 255, 255, 0.1);
}

.ramvt-tafseg-plan-card.is-center {
  background: rgba(250, 250, 250, 0.98);
  box-shadow: 0 24px 70px rgba(255, 111, 28, 0.14), 0 18px 34px rgba(0, 0, 0, 0.06);
}

@media (min-width: 1181px) {
  .ramvt-tafseg-plan-card {
    --tafseg-card-lift: 18px;
  }

  .ramvt-tafseg-plan-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -24px;
    height: 24px;
    pointer-events: auto;
  }

  .ramvt-tafseg-plan-card:hover,
  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card:hover,
  .ramvt-tafseg-plan-card.is-center:hover {
    translate: 0 calc(-1 * var(--tafseg-card-lift, 14px));
    background: rgba(255, 255, 255, 0.99);
    border-color: rgba(255, 111, 28, 0.95);
    box-shadow: 0 24px 70px rgba(255, 111, 28, 0.22), 0 18px 34px rgba(0, 0, 0, 0.08);
    z-index: 10 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1365px) {
  .ramvt-tafseg-plan-card {
    --tafseg-card-lift: 12px;
  }
}

@media (min-width: 1366px) and (max-width: 1760px) {
  .ramvt-tafseg-plan-card {
    --tafseg-card-lift: 14px;
  }
}

@media (min-width: 1761px) {
  .ramvt-tafseg-plan-card {
    --tafseg-card-lift: 20px;
  }
}

.ramvt-tafseg-plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  margin-bottom: 22px;
  border-radius: 9px;
  border: 1px solid #111111;
  background: rgba(249, 249, 249, 0.92);
  color: #3b3b3b;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ramvt-tafseg-price-box {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 0;
}

.ramvt-tafseg-price-value {
  font-size: clamp(62px, 5.55vw, 86px);
  line-height: 0.84;
  letter-spacing: -0.075em;
  font-weight: 400;
}

.ramvt-tafseg-price-currency {
  font-size: clamp(26px, 1.9vw, 35px);
  line-height: 1;
  padding-bottom: 9px;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.ramvt-tafseg-price-period {
  margin-bottom: 24px;
  color: #595959;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 420;
}

.ramvt-tafseg-plan-desc {
  min-height: 74px;
  margin-bottom: 16px;
  color: #202020;
  font-size: 17px;
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 410;
}

.ramvt-tafseg-plan-btn {
  width: 100%;
  height: 50px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1.25px solid rgba(62, 62, 62, 0.52);
  background: linear-gradient(180deg, rgba(251, 251, 251, 0.96), rgba(240, 240, 240, 0.92));
  color: #3b3b3b;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  cursor: pointer;
}

.ramvt-tafseg-plan-divider {
  height: 1px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, 0.055);
}

.ramvt-tafseg-features-title {
  margin-bottom: 16px;
  color: #383838;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 430;
}

.ramvt-tafseg-features-list {
  list-style: none;
  display: grid;
  gap: 10px;
  color: #1f1f1f;
  font-size: 16px;
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 410;
}

.ramvt-tafseg-features-list li.is-muted {
  opacity: 0.16;
}

.ramvt-tafseg-compare-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 18px;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #151515;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (min-width: 1680px) {
  .ramvt-tafseg-pricing-carousel {
    height: clamp(620px, 48vw, 850px);
  }

  .ramvt-tafseg-plan-card {
    width: clamp(320px, 18vw, 370px);
    height: clamp(510px, 33vw, 600px);
  }
}

@media (max-width: 1180px) {
  .ramvt-tafseg-pricing-carousel {
    height: 610px;
  }

  .ramvt-tafseg-plan-card {
    width: clamp(350px, 36vw, 440px);
    height: clamp(480px, 48vw, 580px);
    padding: 18px 18px 22px;
  }

  .ramvt-tafseg-price-value {
    font-size: clamp(54px, 6vw, 74px);
  }

  .ramvt-tafseg-plan-desc {
    font-size: 16px;
  }
}

@media (max-width: 980px) {
  .ramvt-tafseg-pricing-title {
    max-width: 760px;
    font-size: clamp(38px, 6vw, 58px);
  }

  .ramvt-tafseg-pricing-carousel {
    height: 560px;
  }

  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left,
  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    left: auto;
    right: auto;
  }

  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: 20px;
  }

  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: 20px;
  }

  .ramvt-tafseg-plan-card {
    width: clamp(292px, 34vw, 360px);
    height: clamp(396px, 46vw, 490px);
  }
}

@media (max-width: 740px) {
  .ramvt-tafseg-pricing-title-line {
    white-space: normal;
  }

  .ramvt-tafseg-pricing-shell {
    border-radius: 42px;
    padding-top: 42px;
    padding-bottom: 30px;
  }

  .ramvt-tafseg-pricing-top {
    width: min(560px, calc(100vw - 24px));
  }

  .ramvt-tafseg-pricing-title {
    max-width: 520px;
    margin-bottom: 24px;
    font-size: 34px;
  }

  .ramvt-tafseg-billing-toggle {
    margin-bottom: 4px;
    padding: 3px;
    border-radius: 13px;
  }

  .ramvt-tafseg-toggle-btn {
    min-width: 108px;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 15px;
  }

  .ramvt-tafseg-pricing-carousel {
    height: 390px;
  }

  .ramvt-tafseg-pricing-arrow {
    top: 72%;
    width: 42px;
    height: 42px;
    font-size: 24px;
  }

  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: 10px;
  }

  .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: 10px;
  }

  .ramvt-tafseg-plan-card {
    width: 244px;
    height: 344px;
    padding: 14px 14px 16px;
    border-radius: 24px;
  }

  .ramvt-tafseg-plan-badge {
    min-height: 28px;
    padding: 0 10px;
    margin-bottom: 14px;
    font-size: 13px;
  }

  .ramvt-tafseg-price-value {
    font-size: 42px;
  }

  .ramvt-tafseg-price-currency {
    font-size: 18px;
    padding-bottom: 6px;
  }

  .ramvt-tafseg-price-period {
    margin-bottom: 14px;
    font-size: 12.5px;
  }

  .ramvt-tafseg-plan-desc {
    min-height: 42px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .ramvt-tafseg-plan-btn {
    height: 38px;
    font-size: 15px;
    margin-bottom: 12px;
  }

  .ramvt-tafseg-features-title {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .ramvt-tafseg-features-list {
    gap: 6px;
    font-size: 12px;
  }

  .ramvt-tafseg-compare-link {
    margin-top: 8px;
    font-size: 16px;
  }
}

/*
 * Extend the overall height of the sticky section. The original clamp of
 * 1320px–2160px limited the distance the laptop could travel, preventing
 * it from fully emerging above the pricing section. Increasing the lower
 * and upper bounds, as well as the vh multiplier, provides more scroll
 * range while preserving responsiveness.
 */
.ramvt-rvb-stack-section {
  position: relative;
  min-height: 170vh;
  padding-bottom: 900px;
  background: #fff;
  z-index: 3;
}

.ramvt-rvb-stack-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
}

/*
 * Increase the bottom padding of the video fragment. This extra space ensures
 * the laptop has enough vertical room to animate upward without getting
 * clipped by the pricing section. The clamp values are tuned to offer
 * generous padding on both small and large displays.
 */
.ramvt-rvb-video-fragment {
  min-height: 100%;
  padding-bottom: clamp(400px, 40vh, 700px);
}

.ramvt-rvb-video-hero {
  min-height: 100%;
  justify-content: flex-start;
  padding-top: clamp(30px, 3.6vw, 52px);
  padding-bottom: 0;
}

.ramvt-rvb-headline-wrap {
  margin-bottom: clamp(14px, 1.4vw, 24px);
}

.ramvt-rvb-video-title {
  font-size: clamp(46px, 5.2vw, 82px);
}

.ramvt-rvb-title-inline {
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: 10px;
}

.ramvt-rvb-title-image img {
  width: clamp(148px, 11.8vw, 204px);
}

.ramvt-rvb-rings-center {
  top: 33.2%;
  width: min(1780px, 130vw);
  height: min(1780px, 130vw);
}

.ramvt-rvb-under-glow {
  top: 49%;
  width: min(1360px, 96vw);
  height: min(320px, 24vw);
}

.ramvt-rvb-laptop-wrap {
  width: min(1480px, 96vw);
  max-width: 96vw;
  margin-top: clamp(0px, 1vw, 12px);
}

.ramvt-rvb-laptop-shell {
  border-radius: 32px;
}

.ramvt-rvb-screen-frame {
  border-radius: 20px;
}

/*
 * Lower the starting position of the pricing overlay. A larger negative bottom
 * offset delays the appearance of the carousel until the laptop has mostly
 * completed its upward movement. This prevents the pricing cards from
 * overlapping the laptop while still keeping them connected to the page
 * layout. The pointer-events remain disabled on the wrapper so that only
 * the shell within responds to input.
 */
.ramvt-tafseg-root--overlay {
  position: absolute;
  inset: auto 0 -520px;
  z-index: 12;
  width: 100%;
  pointer-events: none;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
  pointer-events: auto;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  min-height: clamp(640px, 62vh, 900px);
  margin-left: -50vw;
  padding: clamp(42px, 3.2vw, 62px) 0 clamp(28px, 3vw, 48px);
  border-radius: clamp(38px, 3.4vw, 60px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.03),
    0 34px 90px rgba(0, 0, 0, 0.10);
  background:
    radial-gradient(
      62% 48% at 50% 58%,
      rgba(255, 116, 32, 0.72) 0%,
      rgba(255, 125, 48, 0.42) 30%,
      rgba(255, 152, 90, 0.20) 52%,
      rgba(255, 255, 255, 0) 72%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 24%,
      #fff3ec 38%,
      #ffd8c0 52%,
      #ff7425 74%,
      #f8f5f1 74.4%,
      #f8f5f1 100%
    );
  will-change: transform, opacity;
  background-color: #fff;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
  width: min(900px, calc(100vw - 120px));
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
  margin-bottom: clamp(24px, 2vw, 32px);
  font-size: clamp(36px, 4.6vw, 66px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-billing-toggle {
  transform: none;
  margin-bottom: 0;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-toggle-btn {
  min-width: 126px;
  height: 46px;
  font-size: clamp(18px, 1.4vw, 22px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel-wrap {
  margin-top: clamp(8px, 1vw, 16px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
  height: clamp(450px, 35vw, 680px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
  top: 58%;
  width: 54px;
  height: 54px;
  display: none;
}

/* Pricing card typography refinements. */
.ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-title {
  font-size: 14px;
}

.ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-list {
  font-size: 16px;
  line-height: 1.15;
}

.ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-title {
  font-size: 15px;
}

.ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-list {
  font-size: 17px;
}

@media (min-width: 769px) and (max-width: 1180px) {
  .ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-title {
    font-size: 14px !important;
  }

  .ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-list {
    font-size: 16.5px !important;
  }

  .ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-title {
    font-size: 15px !important;
  }

  .ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-list {
    font-size: 17.5px !important;
  }
}

@media (max-width: 740px) {
  .ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-title {
    font-size: 13px !important;
  }

  .ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-list {
    font-size: 15px !important;
  }

  .ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-title {
    font-size: 14px !important;
  }

  .ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-list {
    font-size: 16px !important;
  }
}

@media (max-width: 380px) {
  .ramvt-tafseg-plan-card.is-super-plan .ramvt-tafseg-features-list {
    font-size: 14px !important;
  }

  .ramvt-tafseg-plan-card.is-scale-plan .ramvt-tafseg-features-list {
    font-size: 15px !important;
  }
}

@media (min-width: 1181px) {
  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-plan-desc {
    font-size: 15px !important;
    min-height: 50px;
    line-height: 1.28;
  }

  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-features-list {
    font-size: 15.5px !important;
    line-height: 1.25;
    gap: 8px !important;
  }

  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-features-title {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
  left: clamp(16px, 8vw, 152px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
  right: clamp(16px, 8vw, 152px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
  top: 49%;
  width: clamp(312px, 19.2vw, 362px);
  height: clamp(495px, 34vw, 575px);
  padding: 18px 18px 20px;
  border-radius: 26px;
}

@media (min-width: 1680px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    width: clamp(320px, 18vw, 370px);
    height: clamp(510px, 33vw, 600px);
  }
}

@media (min-width: 1181px) and (max-width: 1440px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    width: clamp(275px, 19.5vw, 320px);
    padding: 16px 15px 18px;
  }
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card::before {
  top: -20px;
  height: 8px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
  min-height: 30px;
  padding: 0 10px;
  margin-bottom: 16px;
  font-size: 15px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
  font-size: clamp(50px, 3.8vw, 64px);
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
  font-size: clamp(22px, 1.5vw, 29px);
  padding-bottom: 7px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
  margin-bottom: 16px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
  min-height: 52px;
  margin-bottom: 14px;
  font-size: 14.5px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
  height: 42px;
  margin-bottom: 14px;
  font-size: 17px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-plan-divider {
  margin-bottom: 12px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
  margin-bottom: 12px;
  font-size: 12px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
  gap: 8px;
  font-size: 15px;
}

.ramvt-tafseg-root--overlay .ramvt-tafseg-compare-link {
  margin-top: 4px;
  font-size: 19px;
}

@media (max-width: 1180px) {
  /* Increase the height for medium screens to allow the laptop more
     vertical travel before the pricing carousel appears */
  .ramvt-rvb-stack-section {
    min-height: 210vh;
  }

  .ramvt-rvb-rings-center {
    top: 35.5%;
    width: min(1700px, 148vw);
    height: min(1700px, 148vw);
  }

  .ramvt-rvb-laptop-wrap {
    width: min(1380px, 98vw);
    max-width: 98vw;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(760px, calc(100vw - 108px));
  }

  
  .ramvt-tafseg-root--overlay {
    inset: auto 0 -100px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: 620px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 360px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 50%;
    width: clamp(248px, 24vw, 306px);
    height: clamp(316px, 28.5vw, 396px);
  }
}

@media (max-width: 980px) {
  
  .ramvt-rvb-stack-section {
    min-height: 200vh;
  }

  
  .ramvt-rvb-video-fragment {
    padding-bottom: 320px;
  }

  .ramvt-rvb-rings-center {
    top: 37.8%;
    width: min(1660px, 168vw);
    height: min(1660px, 168vw);
  }

  .ramvt-tafseg-root--overlay {
    width: 100%;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(680px, calc(100vw - 72px));
  }

  
  .ramvt-tafseg-root--overlay {
    inset: auto 0 -90px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: 600px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    font-size: clamp(30px, 5.3vw, 52px);
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: 14px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: 14px;
  }
}

@media (max-width: 740px) {
  
  .ramvt-rvb-stack-section {
    min-height: 180vh;
  }

  .ramvt-rvb-stack-sticky {
    height: 100svh;
  }

  
  .ramvt-rvb-video-fragment {
    padding-bottom: 280px;
  }

  .ramvt-rvb-video-hero {
    padding-top: 26px;
  }

  
  .ramvt-rvb-headline-wrap {
    margin-bottom: 80px;
  }

  .ramvt-rvb-video-title {
    font-size: 34px;
    line-height: 0.96;
  }

  .ramvt-rvb-title-inline {
    gap: 10px;
    margin-top: 8px;
  }

  .ramvt-rvb-title-image img {
    width: 118px;
  }

  .ramvt-rvb-rings-center {
    top: 39.8%;
    width: 220vw;
    height: 220vw;
  }

  .ramvt-rvb-under-glow {
    top: 47%;
    width: 112vw;
    height: 34vw;
  }

  .ramvt-rvb-laptop-wrap {
    width: 108vw;
    max-width: 108vw;
    margin-top: -4px;
    margin-left: -4vw;
  }

  .ramvt-tafseg-root--overlay {
    width: 100%;
  }

  
  .ramvt-tafseg-root--overlay {
    inset: auto 0 -60px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto;
    padding-top: 24px;
    padding-bottom: 16px;
    border-radius: 28px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(540px, calc(100vw - 28px));
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    margin-bottom: 18px;
    font-size: 28px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-billing-toggle {
    padding: 3px;
    border-radius: 13px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-toggle-btn {
    min-width: 102px;
    height: 40px;
    font-size: 15px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 276px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
    top: 66%;
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: 8px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: 8px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 58%;
    width: 214px;
    height: 274px;
    padding: 12px 12px 14px;
    border-radius: 22px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 38px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 17px;
    padding-bottom: 6px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 34px;
    margin-bottom: 9px;
    font-size: 12px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 34px;
    margin-bottom: 10px;
    font-size: 13px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    gap: 5px;
    font-size: 11px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-compare-link {
    margin-top: 2px;
    font-size: 14px;
  }
}


@media (max-height: 900px) and (min-width: 769px) {
  
  .ramvt-rvb-stack-section {
    min-height: clamp(1400px, 200vh, 2200px);
  }

  .ramvt-rvb-video-fragment {
    padding-bottom: 300px;
  }

  .ramvt-rvb-rings-center {
    top: 32%;
    width: min(1700px, 126vw);
    height: min(1700px, 126vw);
  }

  .ramvt-rvb-laptop-wrap {
    width: min(1460px, 97vw);
    max-width: 97vw;
  }

  .ramvt-tafseg-root--overlay {
    inset: auto 0 -120px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: 560px;
    padding-top: 34px;
    padding-bottom: 24px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(860px, calc(100vw - 88px));
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 400px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 52%;
    width: clamp(290px, 23vw, 360px);
    height: clamp(360px, 27vw, 440px);
  }
}

@media (max-height: 760px) and (min-width: 769px) {
  .ramvt-rvb-stack-section {
    min-height: 420vh;
  }

  .ramvt-rvb-video-fragment {
    padding-bottom: 260px;
  }

  .ramvt-rvb-rings-center {
    top: 31%;
    width: min(1660px, 124vw);
    height: min(1660px, 124vw);
  }

  .ramvt-rvb-under-glow {
    top: 47%;
  }

  .ramvt-tafseg-root--overlay {
    inset: auto 0 -120px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: 520px;
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    margin-bottom: 16px;
    font-size: clamp(30px, 4vw, 52px);
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-toggle-btn {
    height: 42px;
    font-size: 18px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 360px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
    top: 61%;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 54%;
    width: clamp(270px, 21vw, 340px);
    height: clamp(340px, 25vw, 420px);
    padding: 14px 14px 16px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    margin-bottom: 10px;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: clamp(42px, 3vw, 56px);
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period,
  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc,
  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    font-size: 12px;
  }
}



/*
 * Short desktop viewports previously left a long sticky tail after the cards:
 * the 420vh override kept reviews far below, while the -120px overlay offset
 * pulled pricing upward. Keep the scene duration consistent and let the
 * pricing panel finish close to the following reviews section.
 */
@media (max-height: 900px) and (min-width: 1181px) {
  .ramvt-rvb-stack-section {
    min-height: 200vh;
  }

  .ramvt-tafseg-root--overlay {
    inset: auto 0 -460px;
  }
}



@media screen and (max-width: 1920px) and (max-height: 1080px) {
  .ramvt-rvb-laptop-wrap {
    
    max-width: 1200px !important; 
    margin: 0 auto;
  }
}


@media screen and (max-height: 900px) {
  .ramvt-rvb-laptop-wrap {
    max-width: 750px !important;
  }
}


.testimonial-section,
.faq-section {
    width: 100%;
    background: #fff;
}

.testimonial-section {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}

.section-heading {
    max-width: 1637px;
    margin: 0 auto 70px;
    font-family: 'Onest-Medium', sans-serif;
    font-size: 60.504px;
    font-weight: 600;
    color: #f0805a;
    text-transform: uppercase;
}

.testimonial-card {
    position: relative;
    max-width: 1637px;
    height: 492px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #b8b8b8;
    border-radius: 52px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.left-ribbon-real,
.right-loop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.testimonial-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 100px 120px 0;
    text-align: center;
}

.testimonial-text {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1150px;
    height: 160px;
    margin: 0 0 80px;
    font-family: 'Onest-SemiBold', 'Onest', sans-serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.15;
    color: #010101;
    transition: opacity 0.25s ease-in-out;
}

.author-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    max-width: 450px;
    transition: opacity 0.25s ease-in-out;
}

.author-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.author-name,
.author-role {
    font-size: 20px;
    line-height: 1.2;
}

.author-name {
    font-family: 'Onest-SemiBold', 'Onest', sans-serif;
    font-weight: 600;
    color: #010101;
}

.author-role {
    font-family: 'Onest-Regular', 'Onest', sans-serif;
    color: #ccc;
}

.testimonial-nav {
    position: absolute;
    right: 60px;
    bottom: 50px;
    z-index: 20;
    display: flex;
    gap: 15px;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid #cdcccc;
    border-radius: 50%;
    background: #fff;
    color: #010101;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.nav-btn:hover {
    border-color: #f0805a;
    color: #f0805a;
}

.faq-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px 32px 0;
    margin-bottom: 80px;
}

.faq-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 44px;
    margin-bottom: 24px;
    border: 2px solid #f0805a;
    border-radius: 12px;
    box-shadow: 0 0 8px #ff5b00;
    font-family: 'Onest-Bold', 'Onest', sans-serif;
    font-size: 33px;
    font-weight: 700;
    line-height: 1;
    color: #000;
}

.faq-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 0;
}

.faq-heading {
    margin: 0;
    font-family: 'Onest-Medium', 'Onest', sans-serif;
    font-size: 77px;
    font-weight: 500;
    line-height: 1.1;
    color: #000;
    text-align: center;
}

.faq-dots-triangle {
    position: relative;
    flex-shrink: 0;
    width: 90px;
    height: 80px;
}

.dot {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff9566, #ff5b00);
    box-shadow: 0 4px 10px rgba(255, 91, 0, 0.3);
}

.dot-1 { top: 0; left: 25px; }
.dot-2 { top: 50px; left: -5px; }
.dot-3 { top: 50px; left: 55px; }

.faq-list {
    width: 100%;
    max-width: 1637px;
    margin: 80px auto 0;
    border-top: 1.5px solid #000;
}

.faq-item {
    width: 100%;
    border-bottom: 1.5px solid #000;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 10px;
    font-family: 'Onest-Medium', 'Onest', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000;
    cursor: pointer;
}

.plus-icon {
    position: relative;
    width: 30px;
    height: 30px;
}

.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background-color: #000;
}

.plus-icon::before {
    top: 14px;
    left: 0;
    width: 100%;
    height: 1px;
}

.plus-icon::after {
    top: 0;
    left: 14px;
    width: 1px;
    height: 100%;
}

.faq-answer {
    display: none;
    padding: 0 10px;
}

.faq-answer p {
    width: 100%;
    margin: 0;
    padding: 0 10px 40px;
    font-family: 'Onest-Regular', sans-serif;
    font-size: 20px;
    color: gray;
    text-align: left;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .plus-icon {
    transform: rotate(45deg);
}



@media (max-width: 1024px) {
    .testimonial-card {
        height: auto;
        min-height: 492px;
        padding-bottom: 100px;
    }

    .testimonial-content {
        padding: 40px 20px;
    }

    .testimonial-text {
        font-size: 32px;
    }
}




    .ramftr-block,
    .ramftr-block * {
      box-sizing: border-box;
    }

    .ramftr-block img {
      max-width: none;
    }

    .ramftr-block {
      --ramftr-svg-width-ratio: 124.1318vw;
      --ramftr-svg-offset-x: -12.4386vw;
      --ramftr-footer-bottom-extra: 260px;
      /* чуть ниже исходных 11.55% (y=238/2060.5), чтобы не залезать на буквы */
      --ramftr-orange-top: 14%;

      --ramftr-arrow-svg-width: clamp(82px, 7.1vw, 118px);
      --ramftr-arrow-svg-height: auto;
      --ramftr-arrow-svg-shift-x: -15px;
      --ramftr-arrow-svg-shift-y: 0px;

      position: relative;
      /* 100% родителя, без 100vw — иначе из‑за скроллбара справа белая щель */
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
      height: calc(min(96vw, 1410px) + var(--ramftr-footer-bottom-extra));
      min-height: calc(930px + var(--ramftr-footer-bottom-extra));
      overflow: hidden;
      isolation: isolate;
      /*
        Keep the footer in the normal render flow. With content-visibility:auto
        and a forced compositor layer Chromium activated and rasterized this
        large block while the user was scrolling through reviews/FAQ, causing
        a noticeable one-off hitch on fast scroll.
      */
      contain: paint;
      background: transparent;
    }

    /*
      Дозаливка рыжей зоны на всю ширину футера.
      Не трогает верх (буквы на белом), закрывает щель справа/снизу.
    */
    .ramftr-block::before {
      content: "";
      position: absolute;
      left: 0;
      top: var(--ramftr-orange-top, 14%);
      bottom: 0;
      width: 100%;
      background-color: #ec681c;
      z-index: 0;
      pointer-events: none;
    }

    .ramftr-block__art {
      position: absolute;
      top: 0;
      left: var(--ramftr-svg-offset-x, -12.4386vw);
      width: var(--ramftr-svg-width-ratio, 124.1318vw);
      min-width: 124.1318vw;
      max-width: none;
      min-height: 100%;
      height: auto;
      display: block;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }

    .ramftr-block__canvas {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
    }

    .ramftr-block__social-row {
      position: absolute;
      top: 40.1%;
      left: 4.3%;
      display: flex;
      align-items: center;
      gap: clamp(22px, 1vw, 44px);
    }

    .ramftr-block__social-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(48px, 3.05vw, 65px);
      height: clamp(48px, 3.05vw, 50px);
      transition: transform 0.18s ease;
      text-decoration: none;
      color: inherit;
    }

    .ramftr-block__social-item:hover {
      transform: translateY(-2px);
    }

    .ramftr-block__social-icon {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .ramftr-block__headline {
      position: absolute;
      top: 48.2%;
      left: 4.2%;
      width: 38%;
      margin: 0;
      font-family: "Inter", Arial, Helvetica, sans-serif;
      font-size: clamp(50px, 4.9vw, 82px);
      line-height: 1.2;
      letter-spacing: 0;
      font-weight: 900;
      text-transform: uppercase;
    }

    .ramftr-block__menu {
      position: absolute;
      top: 50%;
      left: 40.4%;
      width: 42.5%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: clamp(22px, 2.2vw, 52px);
    }

    .ramftr-block__menu-col-title {
      margin-bottom: clamp(10px, 0.78vw, 16px);
      font-family: "Inter", Arial, Helvetica, sans-serif;
      font-size: clamp(29px, 1.48vw, 32px);
      line-height: 1.12;
      font-weight: 700;
    }

    .ramftr-block__menu-link {
      display: block;
      margin-top: clamp(4px, 0.42vw, 9px);
      font-family: "Inter", Arial, Helvetica, sans-serif;
      font-size: clamp(25px, 1.34vw, 28px);
      line-height: 1.15;
      font-weight: 400;
      text-decoration: none;
      color: inherit;
    }

    .ramftr-block__support {
      position: absolute;
      top: 73%;
      left: 40.4%;
      width: 52%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: clamp(16px, 1.4vw, 28px);
      color: #080808;
      font-family: "Inter", Arial, Helvetica, sans-serif;
      pointer-events: none;
    }

    .ramftr-block__support-text {
      max-width: none;
      flex: 1;
      margin: 0;
      font-size: clamp(10px, 0.72vw, 14px);
      line-height: 1.4;
      font-weight: 400;
      letter-spacing: 0;
      padding-top: 0;
      color: rgba(8, 8, 8, 0.65);
    }

    .ramftr-block__support-logos {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(8px, 0.7vw, 14px);
      flex-shrink: 0;
    }

    .ramftr-block__support-logo {
      display: block;
      width: auto;
      height: auto;
      object-fit: contain;
      max-width: 100%;
    }

    .ramftr-block__support-logo--project {
      width: clamp(75px, 5.5vw, 105px);
      padding: clamp(4px, 0.4vw, 8px);
      background: transparent;
    }

    .ramftr-block__support-logo--fasie {
      width: clamp(105px, 7.8vw, 150px);
    }

    .ramftr-block__cta-row {
      position: absolute;
      top: 76%;
      left: 4.2%;
      display: flex;
      align-items: center;
    }

    /* One control: original SVGs + spacing, joint hover / click */
    .ramftr-block__trial-cta {
      display: inline-flex;
      align-items: center;
      gap: clamp(16px, 1.25vw, 26px);
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      border: 0;
      padding: 0;
      background: transparent;
      transition: transform 0.2s ease, filter 0.2s ease;
    }

    .ramftr-block__trial-cta:hover {
      transform: translateY(-4px);
      filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.14));
    }

    .ramftr-block__trial-cta:active {
      transform: translateY(-1px);
    }

    .ramftr-block__trial-button,
    .ramftr-block__arrow-button {
      position: relative;
      display: inline-flex;
      border: 0;
      padding: 0;
      background: transparent;
      pointer-events: none;
    }

    .ramftr-block__trial-button-image {
      display: block;
      width: clamp(315px, 27.3vw, 460px);
      height: auto;
      transition: opacity 0.2s ease;
    }

    .ramftr-block__trial-button::before {
      display: none !important;
    }

    .ramftr-block__trial-label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: transparent !important;
      color: #ff840b;
      font-family: "Onest", Arial, Helvetica, sans-serif;
      font-size: 25pt;
      line-height: 0.92;
      font-weight: 400;
      letter-spacing: -0.03em;
      pointer-events: none;
      z-index: 2;
      transition: color 0.2s ease;
    }

    .ramftr-block__arrow-button {
      align-items: center;
      justify-content: center;
      width: auto;
      height: auto;
      overflow: visible;
    }

    .ramftr-block__arrow-button-image {
      display: block;
      width: var(--ramftr-arrow-svg-width);
      height: var(--ramftr-arrow-svg-height);
      transform: translate(var(--ramftr-arrow-svg-shift-x), var(--ramftr-arrow-svg-shift-y));
      transform-origin: center;
      transition: opacity 0.2s ease;
    }

    .ramftr-block__trial-button-image--hover,
    .ramftr-block__arrow-button-image--hover {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }

    .ramftr-block__trial-cta:hover .ramftr-block__trial-button-image--base,
    .ramftr-block__trial-cta:hover .ramftr-block__arrow-button-image--base {
      opacity: 0;
    }

    .ramftr-block__trial-cta:hover .ramftr-block__trial-button-image--hover,
    .ramftr-block__trial-cta:hover .ramftr-block__arrow-button-image--hover {
      opacity: 1;
    }

    .ramftr-block__trial-cta:hover .ramftr-block__trial-label {
      background: transparent !important;
      color: #010101;
    }

    .ramftr-block__trial-cta:hover .ramftr-block__trial-button::before {
      display: none !important;
    }

    .ramftr-block__meta-row {
      position: absolute;
      top: 89.8%;
      left: 4.2%;
      right: 4.2%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      font-family: "Inter", Arial, Helvetica, sans-serif;
      font-size: clamp(23px, 1.2vw, 30px);
      line-height: 1.12;
      font-weight: 400;
    }

    .ramftr-block__meta-center {
      text-align: center;
    }

    .ramftr-block__meta-link {
      justify-self: end;
      text-decoration: none;
      color: inherit;
    }

    @media (max-width: 1920px) and (min-width: 1181px) {
      .ramftr-block {
        height: calc(min(96vw, 1410px) + var(--ramftr-footer-bottom-extra) - 300px);
        min-height: calc(930px + var(--ramftr-footer-bottom-extra) - 100px);
      }

      .ramftr-block__social-row {
        top: 30%;
      }

      .ramftr-block__headline {
        top: 38%;
        width: 44%;
        letter-spacing: 0;
        word-spacing: 0.2em;
      }

      .ramftr-block__menu {
        top: 40%;
        left: 50%;
        width: 38.5%;
        column-gap: clamp(20px, 1.8vw, 40px);
      }

      .ramftr-block__support {
        top: 68%;
        left: 50%;
        width: 44%;
      }

      .ramftr-block__cta-row {
        top: 70%;
      }

      .ramftr-block__meta-row {
        top: 87%;
      }
    }

    @media (max-width: 1180px) {
      .ramftr-block {
        height: calc(clamp(900px, 96vw, 1200px) + var(--ramftr-footer-bottom-extra));
      }

      .ramftr-block__headline {
        width: 40%;
      }

      .ramftr-block__menu {
        left: 49.5%;
        width: 44.5%;
      }

      .ramftr-block__support {
        left: 49.5%;
        width: 44.5%;
      }
    }

    @media (max-width: 920px) {
      .ramftr-block {
        --ramftr-footer-bottom-extra: 0px;
        --ramftr-arrow-svg-width: clamp(28px, 8.1vw, 42px);
        --ramftr-arrow-svg-shift-x: 0px;
        --ramftr-arrow-svg-shift-y: 0px;

        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        height: 101.65vw;
        min-height: 0;
        background: transparent;
        overflow: hidden;
      }

      .ramftr-block__art {
        top: 0;
        left: 50%;
        width: auto;
        min-width: 100vw;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
        transform: translateX(-50.3%);
        opacity: 1;
      }

      .ramftr-block__canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        display: block;
      }

      .ramftr-block__social-row {
        top: 40.6%;
        left: 6.1%;
        gap: 1.6vw;
      }

      .ramftr-block__social-item {
        width: clamp(14px, 3.6vw, 20px);
        height: clamp(14px, 3.6vw, 20px);
      }

      .ramftr-block__headline {
        top: 46.1%;
        left: 6.1%;
        width: 30%;
        font-size: clamp(14px, 3.55vw, 22px);
        line-height: 0.92;
      }

      .ramftr-block__menu {
        top: 46.8%;
        left: 41.8%;
        width: 47.5%;
        column-gap: 2vw;
      }

      .ramftr-block__menu-col-title {
        margin-bottom: 0.6vw;
        font-size: clamp(8px, 1.75vw, 12px);
        line-height: 1.05;
      }

      .ramftr-block__menu-link {
        margin-top: 0.3vw;
        font-size: clamp(7px, 1.5vw, 10px);
        line-height: 1.05;
      }

      .ramftr-block__support {
        top: 58.4%;
        left: 41.8%;
        width: 52%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .ramftr-block__support-text {
        width: 100%;
        max-width: 100%;
        font-size: clamp(10px, 1.4vw, 12px);
        line-height: 1.4;
        overflow-wrap: normal;
        word-break: normal;
      }

      .ramftr-block__support-logos {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding-right: 0;
      }

      .ramftr-block__support-logo--project {
        width: clamp(55px, 10vw, 85px);
        padding: 3px;
        background: transparent;
      }

      .ramftr-block__support-logo--fasie {
        width: clamp(80px, 14vw, 120px);
      }

      .ramftr-block__cta-row {
        top: 71.6%;
        left: 6.1%;
      }

      .ramftr-block__trial-cta {
        gap: 1.8vw;
      }

      .ramftr-block__trial-button-image {
        width: clamp(112px, 30.5vw, 170px);
      }

      .ramftr-block__trial-label {
        inset: 9px 16px;
        font-size: 18pt;
      }

      .ramftr-block__meta-row {
        top: 83.8%;
        left: 6.1%;
        right: 6.1%;
        font-size: clamp(6px, 1.4vw, 10px);
        line-height: 1.05;
      }
    }

    @media (max-width: 560px) {
      .ramftr-block {
        --ramftr-arrow-svg-width: clamp(24px, 7.2vw, 34px);
        --ramftr-arrow-svg-shift-x: 0px;
        --ramftr-arrow-svg-shift-y: 0px;
        height: 101.65vw;
      }

      .ramftr-block__social-row {
        top: 26%;
        left: 6.1%;
        gap: 1.6vw;
      }

      .ramftr-block__social-item {
        width: clamp(12px, 3.2vw, 16px);
        height: clamp(12px, 3.2vw, 16px);
      }

      .ramftr-block__headline {
        top: 32%;
        left: 6.1%;
        width: 48%;
        font-size: clamp(18px, 4.6vw, 26px);
        line-height: 0.98;
      }

      .ramftr-block__menu {
        top: 29%;
        left: 58%;
        width: 30%;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 2.6vw;
        column-gap: 0;
      }

      .ramftr-block__menu-col-title {
        margin-bottom: 0.9vw;
        font-size: clamp(11px, 2.5vw, 16px);
        line-height: 1.1;
      }

      .ramftr-block__menu-link {
        margin-top: 0.7vw;
        font-size: clamp(10px, 2.2vw, 14px);
        line-height: 1.15;
      }

      .ramftr-block__support {
        top: 64%;
        left: 6.1%;
        width: 88%;
        gap: 3vw;
      }

      .ramftr-block__support-text {
        font-size: clamp(7px, 1.75vw, 10px);
        line-height: 1.12;
      }

      .ramftr-block__support-logos {
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding-right: 5vw;
      }

      .ramftr-block__support-logo--project {
        width: clamp(44px, 13vw, 75px);
      }

      .ramftr-block__support-logo--fasie {
        width: clamp(62px, 20.8vw, 120px);
      }

      .ramftr-block__cta-row {
        top: 54%;
        left: 6.1%;
      }

      .ramftr-block__trial-cta {
        gap: 1.8vw;
      }

      .ramftr-block__trial-button-image {
        width: clamp(102px, 33vw, 145px);
      }

      .ramftr-block__trial-label {
        inset: 8px 14px;
        font-size: 16pt;
      }

      .ramftr-block__meta-row {
        top: 81%;
        left: 5.8%;
        right: 5.8%;
        font-size: clamp(5px, 2.2vw, 13px);
      }
    }

    @media (max-width: 390px) {
      .ramftr-block {
        --ramftr-arrow-svg-width: clamp(22px, 6.9vw, 30px);
      }

      .ramftr-block__social-row {
        left: 5.5%;
      }

      .ramftr-block__headline {
        top: 33%;
        left: 5.5%;
        width: 37%;
        font-size: clamp(15px, 4.1vw, 21px);
      }

      .ramftr-block__menu {
        top: 30%;
        left: 57%;
        width: 46%;
      }

      .ramftr-block__menu-col-title {
        font-size: clamp(10px, 2.7vw, 16px);
      }

      .ramftr-block__menu-link {
        font-size: clamp(8px, 2.3vw, 14px);
      }

      .ramftr-block__support {
        top: 62.5%;
        left: 5.5%;
        width: 89%;
      }

      .ramftr-block__cta-row {
        top: 53%;
        left: 5.5%;
      }

      .ramftr-block__trial-button-image {
        width: clamp(100px, 34vw, 150px);
      }

      .ramftr-block__trial-label {
        inset: 8px 14px;
        font-size: 15pt;
      }

      .ramftr-block__meta-row {
        top: 80%;
        left: 5.5%;
        right: 5.5%;
        font-size: clamp(5px, 2.2vw, 18px);
      }
    }


/* =========================================================
   Бургер-кнопка (Базовое состояние)
   ========================================================= */
.burger-btn {
  display: none; 
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
  position: relative;
  flex-shrink: 0; 
}


.burger-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #010101; 
  border-radius: 3px;
  transition: 0.3s ease-in-out;
}


.burger-btn.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger-btn.active span:nth-child(2) { opacity: 0; }
.burger-btn.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }


/* =========================================================
   Адаптив (Планшеты и мобильные)
   ========================================================= */
@media (max-width: 991px) {
  
  
  .hero-menu .menu-nav {
    display: none !important; 
    position: absolute;
    top: calc(100% + 15px);
    left: -3px;
    right: -3px;
    width: auto;
    flex-direction: column;
    background: #f3f2f3;
    border: 3px solid #f4f4f4;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    z-index: 100;
    gap: 15px;
  }

  
  .hero-menu .menu-nav.is-open {
    display: flex !important;
  }

  
  .burger-btn {
    display: flex !important;
    margin-left: auto;
    margin-right: auto;
  }

  
  .icon-arrow-down {
    display: none !important;
  }
}


@media (max-width: 740px) {
  .hero-background { padding: 10px; }
  .menu { height: 65px; padding: 0 15px; }
  
  .menu-logo {
    width: 79px;
    height: 26px;
  }
  
  .menu-cta {
    height: 44px;
    font-size: 14px;
    padding: 0 15px;
    width: auto;
  }

  .user-button {
    width: 44px;
    height: 44px;
  }
}


/* ===============================
   Header adaptive fixes
   =============================== */


@media (max-width: 991px) {
  .hero-title {
    width: calc(100% - 154px);
    max-width: 1180px;
  }

  .hero-title__line,
  .hero-title__text {
    white-space: normal;
    overflow-wrap: normal;
  }
}


.hero-title__line--with-arrow {
  max-width: 100%;
}


.hero-badge {
  max-width: calc(100% - 48px);
  transform-origin: left center;
}

.hero-badge__accent,
.hero-badge__rest {
  flex-shrink: 1;
}

.hero-badge__accent {
  gap: clamp(4px, 0.7vw, 10px);
  padding-inline: clamp(6px, 0.8vw, 10px);
}

.hero-badge__rest {
  padding-inline: clamp(8px, 1vw, 16px);
}

.hero-badge__text--dark,
.hero-badge__text--light {
  font-size: clamp(12px, 1.25vw, 20px);
}

.hero-badge__text--percent {
  font-size: clamp(16px, 1.6vw, 26px);
}



@media (max-width: 991px) {
  .hero-title {
    left: clamp(24px, 7vw, 77px);
    width: calc(100% - clamp(48px, 14vw, 154px));
    font-size: clamp(58px, 10vw, 110px);
  }

  .hero-badge {
    left: clamp(24px, 7vw, 217px);
    max-width: calc(100% - clamp(48px, 14vw, 154px));
  }
}



@media (max-width: 740px) {
  .hero-title {
    top: 390px;
    left: 24px;
    width: calc(100% - 48px);
    max-width: none;
    font-size: clamp(44px, 14vw, 68px);
    line-height: 0.92;
  }

  .hero-title__line--with-arrow {
    display: block;
    padding-right: 64px;
    padding-bottom: 70px;
  }

  .hero-title__text {
    display: inline;
  }

  .hero-subtitle {
    font-size: clamp(13px, 3.6vw, 15px);
    margin-top: clamp(10px, 2.5vw, 16px);
    line-height: 1.4;
  }

  .icon-arrow-down {
    --size: clamp(48px, 13vw, 64px);
    right: 0;
    top: 50%;
  }

  .hero-badge {
    top: 315px;
    left: 24px;
    max-width: calc(100% - 48px);
  }
}



@media (max-width: 480px) {
  .hero-title {
    top: 380px;
    font-size: clamp(38px, 13.5vw, 54px);
  }

  .hero-title__line--with-arrow {
    padding-right: 0;
    padding-bottom: 62px;
  }

  .icon-arrow-down {
    right: 0;
    top: calc(100% - 28px);
  }

  .hero-badge {
    top: 305px;
    transform: scale(0.86);
    max-width: calc((100% - 48px) / 0.86);
  }
}



@media (max-width: 360px) {
  .hero-badge {
    transform: scale(0.78);
    max-width: calc((100% - 48px) / 0.78);
  }
}
/* ===============================
   Header buttons + arrow adaptive
   =============================== */


.icon-arrow-down {
  display: block;
}


@media (max-width: 1200px) {
  .icon-arrow-down {
    display: none;
  }

  .hero-title__line--with-arrow {
    padding-right: 0;
    padding-bottom: 0;
  }

  .hero-actions {
    top: 760px;
  }
}


@media (max-width: 991px) {
  .hero-actions {
    top: 790px;
    left: clamp(24px, 7vw, 105px);
  }
}


@media (max-width: 740px) {
  .hero-actions {
    top: 535px;
    left: 24px;
    width: calc(100% - 48px);
    flex-direction: column;
    gap: 12px;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: 100%;
  }

  .trial-pill-stage {
    flex: 0 0 72px;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    font-size: clamp(18px, 5.2vw, 27px);
  }

  .hero-title__line--with-arrow {
    padding-bottom: 0;
  }
}


@media (max-width: 480px) {
  .hero-actions {
    top: 550px;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    height: 64px;
  }

  .trial-pill-stage {
    flex-basis: 64px;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    border-radius: 24px;
    font-size: 18px;
  }
}


@media (max-width: 360px) {
  .hero-actions {
    top: 560px;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    font-size: 16px;
  }
}

/* ===============================
   Header menu adaptive fix
   =============================== */


@media (max-width: 1200px) {
  .menu {
    padding: 0 clamp(14px, 2vw, 28px);
    gap: clamp(8px, 1.2vw, 16px);
  }

  .menu-nav {
    margin-left: clamp(16px, 4vw, 80px);
    margin-right: clamp(12px, 2vw, 28px);
    gap: clamp(12px, 2vw, 28px);
  }

  .menu-link {
    font-size: clamp(16px, 1.7vw, 23px);
  }

  .menu-cta {
    width: clamp(132px, 15vw, 174px);
    height: 54px;
    border-radius: 18px;
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.05;
    white-space: normal;
    text-align: center;
    padding: 0 10px;
    flex-shrink: 1;
  }

  .user-button {
    width: 54px;
    height: 54px;
    margin-left: clamp(8px, 1.2vw, 16px);
    border-radius: 17px;
    flex-shrink: 0;
  }

  .user-button::before {
    top: 13px;
  }

  .user-button::after {
    top: 27px;
  }
}



@media (max-width: 991px) {
  .menu {
    height: 78px;
    border-radius: 26px;
    padding: 0 14px 0 18px;
  }

  .menu-logo {
    width: 106px;
    height: 35px;
  }

  .menu-nav {
    margin-left: clamp(12px, 3vw, 32px);
    margin-right: clamp(8px, 1.5vw, 18px);
    gap: clamp(8px, 1.6vw, 18px);
  }

  .menu-link {
    font-size: clamp(14px, 1.8vw, 17px);
  }

  .menu-cta {
    width: 124px;
    height: 50px;
    font-size: 14px;
    border-radius: 16px;
    padding: 0 8px;
  }

  .user-button {
    width: 50px;
    height: 50px;
    margin-left: 8px;
    border-radius: 16px;
  }

  .user-button::before {
    top: 12px;
    width: 10px;
    height: 10px;
  }

  .user-button::after {
    top: 25px;
    width: 22px;
    height: 13px;
  }
}



@media (max-width: 740px) {
  .hero-menu {
    padding: 0 10px;
  }

  .menu {
    height: 72px;
    padding: 0 10px 0 14px;
    border-radius: 24px;
  }

  .menu-logo {
    width: 96px;
    height: 32px;
  }

  .menu-nav {
    display: none;
  }

  .menu-cta {
    margin-left: auto;
    width: 118px;
    height: 46px;
    font-size: 13px;
    line-height: 1.05;
    border-radius: 15px;
    padding: 0 8px;
    white-space: normal;
  }

  .user-button {
    width: 46px;
    height: 46px;
    margin-left: 8px;
    border-radius: 15px;
  }

  .user-button::before {
    top: 11px;
    width: 9px;
    height: 9px;
  }

  .user-button::after {
    top: 23px;
    width: 20px;
    height: 12px;
  }
}



@media (max-width: 390px) {
  .menu-logo {
    width: 88px;
    height: 29px;
  }

  .menu-cta {
    width: 106px;
    height: 44px;
    font-size: 12px;
    padding: 0 6px;
  }

  .user-button {
    width: 44px;
    height: 44px;
    margin-left: 6px;
  }
}

/* ===============================
   Markets section adaptive fix
   =============================== */



@media (max-width: 1100px) {
  .rmsm-markets {
    min-height: 860px;
    padding-bottom: 120px;
  }

  .rmsm-markets__hub {
    top: 47.5%;
  }

  .rmsm-markets__screen {
    top: 73.5%;
    width: 68vw;
    min-width: 360px;
  }

  
  .svc-features-root {
    margin-top: -40px;
  }
}


@media (max-width: 780px) {
  .rmsm-markets {
    --rmsm-line-scale: 0.76;
    --rmsm-side-market-distance: 24%;
    min-height: 880px;
    padding-bottom: 150px;
  }

  .rmsm-markets__node {
    --rmsm-node-size: clamp(58px, 11vw, 84px);
  }

  .rmsm-markets__node--wb,
  .rmsm-markets__node--avito,
  .rmsm-markets__node--yandex {
    top: 21%;
  }

  .rmsm-markets__hub {
    top: 45%;
    width: 58vw;
    min-width: 245px;
  }

  .rmsm-markets__screen {
    top: 70.5%;
    width: 74vw;
    min-width: 290px;
  }

  .svc-features-root {
    margin-top: -20px;
  }
}


@media (max-width: 560px) {
  .rmsm-markets {
    --rmsm-line-scale: 0.68;
    --rmsm-side-market-distance: 26%;
    min-height: 820px;
    padding-bottom: 150px;
  }

  .rmsm-markets__node {
    --rmsm-node-size: clamp(52px, 14vw, 76px);
  }

  .rmsm-markets__hub {
    top: 43.5%;
    width: 64vw;
    min-width: 230px;
  }

  .rmsm-markets__screen {
    top: 68.5%;
    width: 82vw;
    min-width: 270px;
  }

  .rmsm-markets__headline {
    left: 12px;
    top: 50px;
  }

  .svc-features-root {
    margin-top: -100px;
  }

  .svc-features-main {
    border-radius: 48px 48px 0 0;
  }
}


@media (max-width: 390px) {
  .rmsm-markets {
    min-height: 780px;
    padding-bottom: 130px;
  }

  .rmsm-markets__hub {
    top: 42.5%;
  }

  .rmsm-markets__screen {
    top: 67.5%;
    width: 86vw;
    min-width: 250px;
  }
}

/* ===============================
   Markets screen final adaptive fix
   =============================== */




@media (max-width: 1100px) {
  .rmsm-markets__screen {
    width: 58vw;
    min-width: 330px;
    max-width: 560px;
  }
}


@media (max-width: 780px) {
  .rmsm-markets__screen {
    top: 69.5%;
    width: 62vw;
    min-width: 260px;
    max-width: 430px;
  }
}


@media (max-width: 560px) {
  .rmsm-markets__screen {
    top: 67.5%;
    width: 72vw;
    min-width: 230px;
    max-width: 330px;
  }
}


@media (max-width: 390px) {
  .rmsm-markets__screen {
    top: 66.5%;
    width: 76vw;
    min-width: 210px;
    max-width: 300px;
  }
}


@media (max-width: 767px) {
  :root {
    --center-x: 61%;
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 24vw);
    gap: 6px;
    min-height: 280px;
    padding: 32px 0;
  }

  .rvwx-df-frame .copy {
    max-width: none;
    padding-right: 6px;
  }

  .rvwx-df-frame .num {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .rvwx-df-frame .title {
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.05;
    margin-bottom: 8px;
  }

  .rvwx-df-frame .text {
    font-size: clamp(10px, 3vw, 12px);
    line-height: 1.28;
    margin-bottom: 10px;
  }

  .rvwx-df-frame .cta {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .rvwx-df-frame .visual {
    min-height: 150px;
    justify-content: center;
    overflow: visible;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.3);
    transform-origin: center center;
  }

  .rvwx-df-frame .marker-wrapper {
    width: 22px;
    height: 22px;
  }

  .rvwx-df-frame .marker-glow--outer {
    width: 22px;
    height: 22px;
    background: rgba(255, 200, 170, 0.28);
  }

  .rvwx-df-frame .marker-glow--mid {
    width: 18px;
    height: 18px;
  }

  .rvwx-df-frame .marker-ring {
    width: 13px;
    height: 13px;
  }

  .rvwx-df-frame .marker-dot {
    width: 9px;
    height: 9px;
  }
}

@media (max-width: 430px) {
  :root {
    --center-x: 63%;
  }

  .rvwx-df-frame {
    --rvwx-df-pad-x: 10px;
    padding-left: var(--rvwx-df-pad-x);
    padding-right: var(--rvwx-df-pad-x);
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) 76px;
    gap: 4px;
    min-height: 260px;
    padding: 28px 0;
  }

  .rvwx-df-frame .title {
    font-size: clamp(13px, 4.1vw, 16px);
  }

  .rvwx-df-frame .text {
    font-size: clamp(9px, 3vw, 11px);
  }

  .rvwx-df-frame .visual {
    min-height: 135px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.26);
  }
}

@media (max-width: 360px) {
  :root {
    --center-x: 64%;
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 2px;
    min-height: 245px;
    padding: 24px 0;
  }

  .rvwx-df-frame .title {
    font-size: 13px;
  }

  .rvwx-df-frame .text {
    font-size: 9px;
    line-height: 1.25;
  }

  .rvwx-df-frame .cta {
    font-size: 11px;
  }

  .rvwx-df-frame .visual {
    min-height: 120px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.22);
  }
}


@media (max-width: 767px) {
  :root {
    --center-x: 57%;
  }

  .rvwx-df-frame {
    --rvwx-df-pad-x: 12px;
    padding-left: var(--rvwx-df-pad-x);
    padding-right: var(--rvwx-df-pad-x);
  }

  .rvwx-df-frame .section {
    grid-template-columns: 52% 48%;
    gap: 4px;
    min-height: 300px;
    padding: 34px 0;
  }

  .rvwx-df-frame .copy {
    max-width: 205px;
    padding-right: 8px;
  }

  .rvwx-df-frame .title {
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.08;
    margin-bottom: 8px;
  }

  .rvwx-df-frame .text {
    max-width: 195px;
    font-size: clamp(10.5px, 3.1vw, 12.5px);
    line-height: 1.3;
    margin-bottom: 10px;
  }

  .rvwx-df-frame .num {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .rvwx-df-frame .cta {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .rvwx-df-frame .rule {
    width: 100%;
    max-width: 195px;
  }

  .rvwx-df-frame .visual {
    min-height: 170px;
    justify-content: center;
    overflow: visible;
    
  }

  .rvwx-df-frame .stack {
    transform: scale(0.32);
    transform-origin: center center;
  }
}

@media (max-width: 430px) {
  :root {
    --center-x: 58%;
  }

  .rvwx-df-frame .section {
    grid-template-columns: 51% 49%;
    gap: 2px;
    min-height: 285px;
    padding: 30px 0;
  }

  .rvwx-df-frame .copy {
    max-width: 178px;
    padding-right: 6px;
  }

  .rvwx-df-frame .text {
    max-width: 170px;
    font-size: clamp(10px, 3vw, 11.5px);
  }

  .rvwx-df-frame .title {
    font-size: clamp(14px, 4vw, 17px);
  }

  .rvwx-df-frame .visual {
    min-height: 155px;
    
  }

  .rvwx-df-frame .stack {
    transform: scale(0.29);
  }
}

@media (max-width: 390px) {
  :root {
    --center-x: 59%;
  }

  .rvwx-df-frame {
    --rvwx-df-pad-x: 10px;
    padding-left: var(--rvwx-df-pad-x);
    padding-right: var(--rvwx-df-pad-x);
  }

  .rvwx-df-frame .section {
    grid-template-columns: 50% 50%;
    min-height: 270px;
    padding: 28px 0;
  }

  .rvwx-df-frame .copy {
    max-width: 160px;
    padding-right: 6px;
  }

  .rvwx-df-frame .text {
    max-width: 152px;
    font-size: 9.5px;
    line-height: 1.28;
  }

  .rvwx-df-frame .title {
    font-size: 13.5px;
  }

  .rvwx-df-frame .cta {
    font-size: 11.5px;
  }

  .rvwx-df-frame .visual {
    min-height: 140px;
  }

  .rvwx-df-frame .stack {
    transform: scale(0.255);
  }
}




@media (max-width: 740px) {
  .testimonial-section {
    padding-top: 80px;
  }

  .section-heading {
    margin-left: 24px;
    margin-right: 16px;
    margin-bottom: 40px;
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.05;
  }

  .testimonial-card {
    width: calc(100% - 32px);
    min-height: 360px;
    border-radius: 32px;
    padding-bottom: 86px;
  }

  .testimonial-content {
    padding: 36px 22px 0;
  }

  .testimonial-text {
    height: auto;
    min-height: 120px;
    margin-bottom: 36px;
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.2;
  }

  .author-info {
    max-width: 100%;
    gap: 10px;
  }

  .author-avatar {
    width: 58px;
    height: 58px;
  }

  .author-name,
  .author-role {
    font-size: 18px;
  }

  .testimonial-nav {
    right: 24px;
    bottom: 24px;
    gap: 10px;
  }

  .nav-btn {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 420px) {
  .section-heading {
    margin-left: 28px;
    font-size: 30px;
  }

  .testimonial-text {
    font-size: 21px;
  }

  .author-name,
  .author-role {
    font-size: 16px;
  }
}


@media (max-width: 740px) {
  
  .testimonial-section > .section-heading {
    width: calc(100% - 56px) !important;
    max-width: none !important;
    margin: 0 0 40px 32px !important;
    padding: 0 !important;

    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    text-align: left !important;
  }

  
  .faq-heading {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 420px) {
  .testimonial-section > .section-heading {
    width: calc(100% - 48px) !important;
    margin-left: 28px !important;
    margin-bottom: 34px !important;
    font-size: 28px !important;
  }

  .faq-heading {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
}


@media (max-width: 1180px) {
  .ramvt-rvb-stack-section {
    min-height: auto !important;
    padding-bottom: 0 !important;
    background: #fff;
  }

  .ramvt-rvb-stack-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ramvt-rvb-video-fragment {
    min-height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .ramvt-rvb-video-hero {
    min-height: auto !important;
    padding: 42px 16px 36px !important;
    justify-content: flex-start !important;
  }

  .ramvt-rvb-headline-wrap {
    margin: 0 auto 36px !important;
    width: min(760px, calc(100vw - 32px)) !important;
  }

  .ramvt-rvb-laptop-wrap {
    width: min(760px, calc(100vw - 28px)) !important;
    max-width: min(760px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 0 !important;
    z-index: 5 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto !important;
    border-radius: 32px 32px 0 0 !important;
    padding-top: 36px !important;
    padding-bottom: 34px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(760px, calc(100vw - 32px)) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 390px !important;
  }
}

@media (max-width: 740px) {
  .ramvt-rvb-video-hero {
    padding: 32px 14px 28px !important;
  }

  .ramvt-rvb-video-title {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 0.98 !important;
  }

  .ramvt-rvb-title-inline {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .ramvt-rvb-title-image img {
    width: clamp(92px, 30vw, 126px) !important;
  }

  .ramvt-rvb-laptop-wrap {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .ramvt-rvb-rings-center {
    top: 50% !important;
    width: 180vw !important;
    height: 180vw !important;
  }

  .ramvt-rvb-under-glow {
    top: 62% !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    border-radius: 26px 26px 0 0 !important;
    padding-top: 28px !important;
    padding-bottom: 26px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 360px !important;
  }
}


@media (min-width: 1181px) {
  .ramvt-rvb-headline-wrap {
    margin-bottom: clamp(42px, 7vh, 76px) !important;
  }

  .ramvt-rvb-laptop-wrap {
    margin-top: 0 !important;
  }
}


@media (max-width: 740px) {
  .ramvt-rvb-headline-wrap {
    width: calc(100vw - 28px) !important;
    margin-bottom: 28px !important;
  }

  .ramvt-rvb-video-title {
    font-size: clamp(24px, 6.4vw, 34px) !important;
    line-height: 0.96 !important;
    text-align: center !important;
  }

  .ramvt-rvb-title-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .ramvt-rvb-title-inline {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(7px, 2vw, 10px) !important;
    margin-top: 8px !important;
    white-space: nowrap !important;
  }

  .ramvt-rvb-title-image {
    flex: 0 0 auto !important;
  }

  .ramvt-rvb-title-image img {
    width: clamp(70px, 20vw, 96px) !important;
    height: auto !important;
  }

  .ramvt-rvb-title-text {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .ramvt-rvb-accent-word {
    margin-left: 5px !important;
  }
}

@media (max-width: 390px) {
  .ramvt-rvb-video-title {
    font-size: clamp(21px, 6.5vw, 25px) !important;
  }

  .ramvt-rvb-title-image img {
    width: 64px !important;
  }

  .ramvt-rvb-title-inline {
    gap: 6px !important;
  }

  .ramvt-rvb-accent-word {
    margin-left: 3px !important;
  }
}




@media (min-width: 769px) and (max-width: 1180px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: 720px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 600px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 52% !important;
    width: clamp(392px, 43vw, 495px) !important;
    height: clamp(535px, 56vw, 660px) !important;
    padding: 20px 22px 24px !important;
    border-radius: 30px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    min-height: 34px !important;
    margin-bottom: 18px !important;
    font-size: 17px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: clamp(56px, 6.5vw, 76px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 24px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 18px !important;
    font-size: 14px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 58px !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
    line-height: 1.16 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 48px !important;
    margin-bottom: 16px !important;
    font-size: 18px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 12px !important;
    font-size: 12px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    gap: 8px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
}


@media (max-width: 740px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto !important;
    padding-top: 30px !important;
    padding-bottom: 36px !important;
    border-radius: 28px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: calc(100vw - 28px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    margin-bottom: 18px !important;
    font-size: clamp(28px, 8.5vw, 36px) !important;
    line-height: 0.96 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-billing-toggle {
    margin-bottom: 10px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 620px !important;
    overflow: visible !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 47% !important;
    width: min(348px, calc(100vw - 28px)) !important;
    height: 545px !important;
    padding: 18px 18px 20px !important;
    border-radius: 28px !important;
  }

  
  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card:not(.is-center) {
    opacity: 0 !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card.is-center {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card::before {
    display: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    min-height: 32px !important;
    margin-bottom: 16px !important;
    font-size: 16px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 52px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 22px !important;
    padding-bottom: 7px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 16px !important;
    font-size: 13px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 58px !important;
    margin-bottom: 14px !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 44px !important;
    margin-bottom: 14px !important;
    font-size: 16px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-divider {
    margin-bottom: 12px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 10px !important;
    font-size: 11px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1.16 !important;
  }

  
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
    top: auto !important;
    bottom: 4px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
    display: grid !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow:hover {
    transform: scale(1.04) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: calc(50% - 58px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: calc(50% - 58px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-compare-link {
    margin-top: 16px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 380px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 540px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    width: calc(100vw - 28px) !important;
    height: 475px !important;
    padding: 16px 16px 18px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 48px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    font-size: 13px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    font-size: 12.5px !important;
  }
}

/* ===============================
   Hero header: adaptive buttons + spacing fix
   =============================== */


@media (min-width: 769px) and (max-width: 1180px) {
  .hero-title {
    top: clamp(390px, 39vh, 465px) !important;
    left: clamp(32px, 6vw, 77px) !important;
    font-size: clamp(72px, 9.4vw, 96px) !important;
    line-height: 0.86 !important;
  }

  .hero-actions {
    top: clamp(665px, 69vh, 760px) !important;
    left: clamp(32px, 6vw, 72px) !important;
    right: clamp(24px, 4vw, 48px) !important;
    width: auto !important;
    max-width: none !important;
    gap: clamp(10px, 1.6vw, 14px) !important;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: clamp(270px, 41vw, 350px) !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: clamp(58px, 7vw, 68px) !important;
    border-radius: clamp(23px, 3vw, 29px) !important;
    font-size: clamp(20px, 2.55vw, 24px) !important;
  }

  .trial-pill-stage {
    height: clamp(58px, 7vw, 68px) !important;
    flex: 0 1 clamp(270px, 41vw, 350px) !important;
  }

  .trial-pill-shadow-layer {
    height: clamp(58px, 7vw, 68px) !important;
  }
}


@media (min-width: 481px) and (max-width: 768px) {
  .hero-background__inner {
    min-height: 760px !important;
  }

  .hero-title {
    top: 405px !important;
    left: 24px !important;
    font-size: clamp(58px, 12vw, 84px) !important;
    line-height: 0.88 !important;
    max-width: calc(100vw - 48px) !important;
    width: auto !important;
  }

  .hero-title__line,
  .hero-title__text {
    white-space: normal !important;
  }

  .hero-title__line--with-arrow {
    padding-bottom: 0 !important;
  }

  .icon-arrow-down {
    --size: 56px;
    right: 0 !important;
  }

  .icon-arrow-down::before {
    font-size: 30px !important;
  }

  .hero-actions {
    top: 650px !important;
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: 100% !important;
    max-width: 420px !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: 64px !important;
    border-radius: 25px !important;
    font-size: clamp(19px, 3.4vw, 24px) !important;
  }

  .trial-pill-stage {
    height: 64px !important;
    flex: 0 0 64px !important;
  }

  .trial-pill-shadow-layer {
    height: 64px !important;
  }
}


@media (max-width: 480px) {
  .hero-background__inner {
    min-height: 700px !important;
  }

  .hero-title {
    top: 385px !important;
    left: 20px !important;
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 0.9 !important;
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
  }

  .hero-title__line,
  .hero-title__text {
    white-space: normal !important;
  }

  .hero-title__line--with-arrow {
    padding-bottom: 0 !important;
  }

  .icon-arrow-down {
    --size: 48px;
    right: 0 !important;
  }

  .icon-arrow-down::before {
    font-size: 26px !important;
  }

  .hero-actions {
    top: 575px !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: 100% !important;
    max-width: none !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: 60px !important;
    border-radius: 23px !important;
    font-size: clamp(16px, 5vw, 19px) !important;
  }

  .trial-pill-stage {
    height: 60px !important;
    flex: 0 0 60px !important;
  }

  .trial-pill-shadow-layer {
    height: 60px !important;
  }
}

/* =========================================================
   SVC FEATURES — финальная адаптация секции "Возможности сервиса"
   Добавить в самый конец styles.css
   ========================================================= */

.svc-features-root {
  margin-top: clamp(-100px, -5.2vw, -20px);
}

.svc-features-main {
  min-height: auto;
  padding-inline: clamp(14px, 3vw, 58px);
  padding-bottom: clamp(34px, 4vw, 76px);
  border-radius: clamp(42px, 5.2vw, 100px) clamp(42px, 5.2vw, 100px) 0 0;
}

.svc-features-header {
  margin-top: clamp(42px, 4.2vw, 80px);
  margin-bottom: clamp(34px, 4.2vw, 80px);
}

.svc-features-subtitle {
  gap: clamp(7px, 0.65vw, 12px);
  margin-bottom: clamp(8px, 0.8vw, 15px);
  font-size: clamp(16px, 1.46vw, 28px);
}

.svc-features-dot {
  width: clamp(9px, 0.9vw, 17px);
  height: clamp(9px, 0.9vw, 17px);
}

.svc-features-title {
  font-size: clamp(32px, 4.16vw, 80px);
  line-height: 1.04;
}

.svc-features-grid {
  width: 100%;
  max-width: min(1412px, 100%);
  row-gap: clamp(18px, 2.6vw, 50px);
  column-gap: clamp(16px, 2.35vw, 45px);
  padding-bottom: 0;
}

.svc-features-card {
  border-radius: clamp(20px, 1.56vw, 30px);
  padding:
    clamp(14px, 1.1vw, 22px)
    clamp(12px, 1.04vw, 20px)
    clamp(24px, 2.35vw, 45px);
  box-shadow: 0 clamp(8px, 0.78vw, 15px) clamp(24px, 2.08vw, 40px) rgba(0, 0, 0, 0.10);
}

.svc-features-card-sm {
  width: clamp(300px, 28.39vw, 545px);
  height: auto;
  aspect-ratio: 545 / 393;
}

.svc-features-card-lg {
  width: clamp(320px, 42.81vw, 822px);
  height: auto;
  aspect-ratio: 822 / 393;
}

.svc-features-card-title {
  gap: clamp(5px, 0.42vw, 8px);
  margin-bottom: clamp(2px, 0.22vw, 4px);
  font-size: clamp(16px, 1.25vw, 24px);
}

.svc-features-card-icon {
  width: clamp(15px, 1.04vw, 20px);
  height: clamp(15px, 1.04vw, 20px);
}

.svc-features-card-desc {
  max-width: 86%;
  font-size: clamp(13px, 1.04vw, 20px);
  line-height: 1.22;
}


.svc-features-emoji-box {
  left: clamp(-120px, 0.8vw, 15px);
  top: clamp(14px, 1.56vw, 30px);
  transform: scale(clamp(0.28, 0.041vw, 0.8));
}

.svc-features-shape-box {
  right: clamp(-330px, -10.4vw, -200px);
  top: clamp(80px, 7.8vw, 150px);
  transform: scale(clamp(0.32, 0.041vw, 0.8));
}


.svc-lk-window {
  width: clamp(280px, 24.5vw, 470px);
  height: clamp(185px, 14.8vw, 285px);
  margin-top: clamp(8px, 0.7vw, 16px);
  scale: 1;
}

.svc-lk-lines {
  width: 100%;
  height: 100%;
}

.svc-lk-seller {
  top: 27%;
  width: 49%;
  height: auto;
}

.svc-lk-tools {
  top: calc(4% + clamp(8px, 0.6vw, 12px));
  gap: clamp(6px, 0.58vw, 11px);
  width: 34%;
}

.svc-lk-tool-wrapper {
  width: 100%;
  height: clamp(74px, 4.25vw, 84px);
  border-radius: clamp(5px, 0.36vw, 7px);
}

.svc-lk-tool-card {
  width: 88%;
  height: clamp(64px, 3.85vw, 76px);
  border-radius: clamp(6px, 0.47vw, 9px);
  padding: clamp(4px, 0.3vw, 6px) clamp(6px, 0.5vw, 9px) 0;
}

.svc-lk-tool-title {
  font-size: clamp(12px, 0.9vw, 16.5px);
  line-height: 1.05;
}

.svc-lk-tool-subtitle {
  font-size: clamp(9px, 0.68vw, 12.5px);
  line-height: 1.05;
}

.svc-features-card-lk .svc-features-card-title {
  font-weight: 500;
}

.svc-features-card-lk .svc-features-card-desc {
  font-weight: 500;
}

.svc-features-card-lk .svc-lk-tool-title {
  font-weight: 500;
}

.svc-features-card-lk .svc-lk-tool-subtitle {
  font-weight: 300;
}


.svc-visual-chart-container {
  margin-top: clamp(10px, 1.04vw, 20px);
}

.svc-visual-chart-container svg {
  max-height: clamp(135px, 13vw, 250px);
}


.svc-parser-cards-wrapper {
  height: clamp(155px, 13.54vw, 260px);
}

.svc-parser-item {
  --svc-parser-item-w: clamp(120px, 11.98vw, 230px);

  width: var(--svc-parser-item-w);
  transform: translateY(clamp(90px, 7.8vw, 150px));
  filter: drop-shadow(0 clamp(6px, 0.52vw, 10px) clamp(12px, 1.04vw, 20px) rgba(0, 0, 0, 0.08));
}

.svc-parser-item-1 {
  left: clamp(14px, 1.82vw, 35px);
  bottom: clamp(2px, 0.4vw, 8px);
}

.svc-parser-item-2 {
  margin-left: calc(var(--svc-parser-item-w) / -2);
  bottom: clamp(-28px, -1.4vw, -18px);
}

.svc-parser-item-3 {
  right: clamp(14px, 1.82vw, 35px);
  bottom: clamp(4px, 0.55vw, 14px);
}


.svc-ai-chat-wrapper {
  margin-top: clamp(8px, 0.75vw, 12px);
  padding-inline: clamp(6px, 0.55vw, 10px);
}

.svc-ai-chat {
  max-width: 100%;
  gap: clamp(22px, 1.55vw, 30px);
  padding-inline: 0;
}

.svc-ai-msg {
  gap: clamp(12px, 0.95vw, 18px);
  align-items: center;
}

.svc-ai-msg--user {
  padding-left: 0;
  padding-right: clamp(12px, 1.15vw, 22px);
}

.svc-ai-msg--bot {
  padding-right: 0;
  padding-left: clamp(12px, 1.15vw, 22px);
}

.svc-ai-avatar-shell--user {
  width: clamp(50px, 3.45vw, 66px);
  height: clamp(50px, 3.45vw, 66px);
}

.svc-ai-avatar-shell--bot {
  width: clamp(54px, 3.65vw, 70px);
  height: clamp(54px, 3.65vw, 70px);
}

.svc-ai-bubble {
  padding: clamp(12px, 0.85vw, 16px) clamp(16px, 1.05vw, 20px);
  border-radius: 999px;
  flex: 0 1 auto;
  width: fit-content;
  max-width: clamp(265px, 19.3vw, 370px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.04),
    0 6px 18px rgba(0, 0, 0, 0.08);
}

.svc-ai-bubble__text {
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.12;
}

.svc-ai-bubble__status {
  font-size: clamp(14.5px, 0.95vw, 18px);
  line-height: 1.12;
}



@media (max-width: 819px) {
  .svc-features-grid {
    max-width: 100%;
  }

  .svc-features-card-sm,
  .svc-features-card-lg {
    width: min(100%, 720px);
  }

  .svc-features-card-sm {
    aspect-ratio: 545 / 393;
  }

  .svc-features-card-lg {
    aspect-ratio: 822 / 393;
  }

  .svc-features-card-desc {
    max-width: 92%;
  }

  .svc-features-emoji-box {
    opacity: 0.32;
  }

  .svc-features-shape-box {
    opacity: 0.18;
  }
}



@media (max-width: 560px) {
  .svc-features-root {
    margin-top: 0;
  }

  .svc-features-main {
    padding-inline: 12px;
    border-radius: 42px 42px 0 0;
  }

  .svc-features-header {
    margin-top: 38px;
    margin-bottom: 28px;
  }

  .svc-features-title {
    font-size: clamp(28px, 8.4vw, 38px);
  }

  .svc-features-subtitle {
    font-size: 15px;
  }

  .svc-features-grid {
    row-gap: 18px;
  }

  .svc-features-card-sm,
  .svc-features-card-lg {
    width: 100%;
    min-height: 292px;
    aspect-ratio: auto;
  }

  .svc-features-card {
    padding-bottom: 24px;
  }

  .svc-lk-window {
    width: min(100%, 330px);
    height: 170px;
    margin-top: 10px;
  }

  .svc-visual-chart-container svg {
    max-height: 165px;
  }

  .svc-parser-cards-wrapper {
    height: 170px;
  }

  .svc-parser-item {
    --svc-parser-item-w: clamp(112px, 34vw, 150px);
  }

  .svc-parser-item-1 {
    left: 6px;
    bottom: 4px;
  }

  .svc-parser-item-2 {
    bottom: -14px;
  }

  .svc-parser-item-3 {
    right: 6px;
    bottom: 6px;
  }

  .svc-ai-chat {
    max-width: 100%;
  }
}



@media (max-width: 390px) {
  .svc-features-main {
    padding-inline: 10px;
  }

  .svc-features-title {
    font-size: 27px;
  }

  .svc-features-card-title {
    font-size: 15px;
  }

  .svc-features-card-desc {
    font-size: 12px;
  }

  .svc-lk-window {
    width: 292px;
    height: 154px;
  }

  .svc-lk-tool-wrapper {
    height: 64px;
  }

  .svc-lk-tool-title {
    font-size: 9px;
  }

  .svc-lk-tool-subtitle {
    font-size: 7px;
  }

  .svc-parser-item {
    --svc-parser-item-w: 112px;
  }
}

/* =========================================================
   SVC FEATURES — убираем декор и нормализуем высоту
   для планшетов, мобильных и маленьких десктопов
   ========================================================= */


.svc-features-root {
  min-height: 0;
  height: auto;
}

.svc-features-main {
  min-height: 0;
  height: auto;
}


.svc-features-grid {
  padding-bottom: clamp(28px, 3.5vw, 60px);
}


@media (max-width: 1440px) {
  .svc-features-decor,
  .svc-features-emoji-box,
  .svc-features-shape-box {
    display: none !important;
  }

  .svc-features-root {
    min-height: 0;
    height: auto;
    margin-top: clamp(-70px, -4vw, -20px);
  }

  .svc-features-main {
    min-height: 0;
    height: auto;
    padding-bottom: clamp(32px, 4vw, 64px);
  }

  .svc-features-header {
    margin-top: clamp(42px, 5vw, 70px);
    margin-bottom: clamp(30px, 4vw, 56px);
  }

  .svc-features-grid {
    padding-bottom: 0;
    row-gap: clamp(18px, 2.6vw, 38px);
  }
}


@media (max-width: 900px) {
  .svc-features-root {
    margin-top: clamp(-44px, -3vw, -12px);
  }

  .svc-features-main {
    border-radius: clamp(42px, 8vw, 72px) clamp(42px, 8vw, 72px) 0 0;
    padding-bottom: 42px;
  }

  .svc-features-header {
    margin-top: 46px;
    margin-bottom: 32px;
  }

  .svc-features-grid {
    row-gap: 22px;
  }
}


@media (max-width: 560px) {
  .svc-features-root {
    margin-top: -100px;
  }

  .svc-features-main {
    padding-bottom: 32px;
    border-radius: 36px 36px 0 0;
  }

  .svc-features-header {
    margin-top: 34px;
    margin-bottom: 24px;
  }

  .svc-features-grid {
    row-gap: 16px;
  }
}



/* AI chat: layout is flow-based (no absolute bubble overlay) */


@media (max-width: 740px) {
  
  
  .svc-lk-lines {
    display: none !important;
  }

  
  .svc-lk-window {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; 
    height: auto; 
    padding: 15px 0;
  }

  
  .svc-lk-seller {
    width: 100%;
    max-width: 320px; 
    position: static; 
    transform: none;  
  }

  .svc-lk-seller svg {
    width: 100%;
    height: auto; 
  }

  
  .svc-lk-tools {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px; 
    position: static;
    transform: none;
    padding: 0 10px;
  }

  
  .svc-lk-tool-wrapper {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    position: static;
    transform: none;
  }

  .svc-lk-tool-card {
    height: 80%;
    padding: 22px 10px; 
  }

.svc-lk-tool-title {
    font-size: 14px; 
    margin-bottom: -2px;
    margin-top: -17px;
  }

  .svc-lk-tool-subtitle {
    font-size: 12px; 
    line-height: 1;
  }



  .svc-parser-cards-wrapper {
    display: flex !important;
    flex-direction: row !important; 
    justify-content: center;       
    align-items: flex-end;         
    gap: 10px !important;          
    height: 220px !important;      
    position: relative !important;
    overflow: visible !important;  
  }

  
  .svc-parser-item {
    position: relative !important; 
    width: 130px !important;       
    height: auto !important;
    
    
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;

    /* ВАЖНО: Больше не пишем transform: none! 
       Теперь скрипт сможет свободно двигать карточки вверх-вниз. */
  }
  
  .svc-features-card-lg {
    height: 220px !important; 
    min-height: auto !important; 
  }

  .svc-features-card-parser {
      height: 250px !important; 
      min-height: auto !important; 
  }


  .svc-ai-chat {
    max-width: 100%;
    gap: 24px;
    padding-inline: 0;
  }

  .svc-ai-msg--user {
    padding-left: 0;
    padding-right: 14px;
  }

  .svc-ai-msg--bot {
    padding-right: 0;
    padding-left: 14px;
  }

  .svc-ai-msg {
    gap: 14px;
    align-items: center;
  }

  .svc-ai-avatar-shell--user {
    width: 54px;
    height: 54px;
    box-shadow:
      0 0 0 2px #ff6600,
      0 0 12px 2px rgba(255, 102, 0, 0.28),
      0 2px 8px rgba(0, 0, 0, 0.06);
  }

  .svc-ai-avatar-shell--bot {
    width: 58px;
    height: 58px;
  }

  .svc-ai-bubble {
    padding: 13px 17px;
    border-radius: 999px;
    flex: 0 1 auto;
    width: fit-content;
    max-width: 335px;
  }

  .svc-ai-bubble__text {
    font-size: 17px;
    line-height: 1.12;
  }

  .svc-ai-bubble__status {
    font-size: 15.5px;
    line-height: 1.12;
  }
}


@media (max-width: 900px) {
  
  .rvwx-df-frame {
    --rvwx-df-pad-x: 16px;
    padding: 40px var(--rvwx-df-pad-x);
  }

  .rvwx-df-frame .section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 0;
  }

  
  .rvwx-df-frame .copy {
    max-width: 100% !important; 
    padding-right: 0;
    text-align: center;
  }

  .rvwx-df-frame .text {
    max-width: 100% !important; 
    font-size: 16px; 
  }

  
  .rvwx-df-frame .stack {
    
    transform: scale(0.8) !important; 
    margin: 20px 0;
  }

  
  .rvwx-df-frame .timeline,
  .rvwx-df-frame .marker-wrapper {
    display: none !important;
  }
}


@media (max-width: 480px) {
  .rvwx-df-frame {
    --rvwx-df-pad-x: 12px;
    padding: 30px var(--rvwx-df-pad-x);
  }

  
  .rvwx-df-frame .stack {
    transform: scale(0.65) !important; 
    margin-top: -20px; 
    margin-bottom: -20px;
  }

  .rvwx-df-frame .title {
    font-size: 20px; 
  }

  .rvwx-df-frame .text {
    font-size: 14px;
  }
}

@media (max-width: 900px) {
  

  
  .rvwx-df-frame .rule {
    display: none !important;
  }

  
  .rvwx-df-frame .visual {
    margin-top: 40px; 
    min-height: 200px;
  }

  
  .rvwx-df-frame .stack {
    margin: 0 auto; 
    transform: scale(0.7); 
  }
}


@media (max-width: 480px) {
  .feedback-btn {
    display: none !important;
  }
}


@media (min-width: 769px) and (max-width: 1200px) {
  .svc-ai-chat {
    max-width: 100%;
  }

  .svc-ai-avatar-shell--user {
    width: 58px;
    height: 58px;
  }

  .svc-ai-avatar-shell--bot {
    width: 62px;
    height: 62px;
  }

  .svc-ai-msg {
    gap: 16px;
  }

  .svc-ai-msg--user {
    padding-right: 16px;
  }

  .svc-ai-msg--bot {
    padding-left: 16px;
  }

  .svc-ai-bubble {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 335px;
    border-radius: 999px;
  }

  .svc-ai-bubble__text {
    font-size: 18px;
    line-height: 1.12;
  }

  .svc-ai-bubble__status {
    font-size: 16px;
    line-height: 1.12;
  }
}


@media (min-width: 769px) and (max-width: 1180px) {
  
  .rvwx-df-frame .copy {
    
    max-width: 480px !important; 
    
    padding-left: 20px;
  }

  .rvwx-df-frame .section {
    
    gap: 60px !important;
    
    justify-content: center;
  }

  .rvwx-df-frame .text {
    
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #333; 
  }
}


@media (min-width: 1024px) and (max-height: 1366px) {
  .ramftr-block {
    min-height: 100vh !important;
    background: transparent !important;
  }

  .ramftr-block__art {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50.3%) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: bottom center !important;
  }

  .ramftr-block__canvas {
    background-color: transparent !important;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 560px) {
  .svc-features-card-ai {
    min-height: 0;
  }

  .svc-ai-chat-wrapper {
    margin-top: 8px;
    height: auto;
    padding-inline: 4px;
  }

  .svc-ai-chat {
    gap: 22px;
  }

  .svc-ai-msg--user {
    padding-left: 0;
    padding-right: 12px;
  }

  .svc-ai-msg--bot {
    padding-right: 0;
    padding-left: 12px;
  }

  .svc-ai-avatar-shell--user {
    width: 48px;
    height: 48px;
    box-shadow:
      0 0 0 2px #ff6600,
      0 0 10px 2px rgba(255, 102, 0, 0.28),
      0 2px 6px rgba(0, 0, 0, 0.06);
  }

  .svc-ai-avatar-shell--bot {
    width: 52px;
    height: 52px;
  }

  .svc-ai-msg {
    gap: 14px;
  }

  .svc-ai-bubble {
    padding: 12px 16px;
    border-radius: 999px;
    flex: 0 1 auto;
    width: fit-content;
    max-width: 280px;
  }

  .svc-ai-bubble__text {
    font-size: 15.5px;
    line-height: 1.12;
  }

  .svc-ai-bubble__status {
    font-size: 14px;
    line-height: 1.12;
  }
}

.contacts-page {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: #f7f7f7;
  color: #151515;
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

.contacts-page__shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 72px) 18px;
}

.contacts-card {
  width: min(980px, 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.contacts-card__header {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 118px;
  padding: 28px 40px;
  background:
    radial-gradient(circle at 94% 28%, rgba(247, 95, 3, 0.52), rgba(247, 95, 3, 0) 32%),
    linear-gradient(90deg, #ffffff 0%, #fff8ec 58%, #ffba82 100%);
}

.contacts-card__header-icon {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  color: #4b3d37;
}

.contacts-card__header h1 {
  margin: 0;
  font-size: clamp(32px, 3vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  color: #3d302b;
}

.contacts-card__body {
  padding: 26px 32px 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.contacts-card__body h2 {
  margin: 28px 28px 16px;
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.15;
  font-weight: 500;
}

.contacts-list {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 24px;
  background: #f4f4f4;
  overflow: hidden;
}

.contacts-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 18px 28px;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.3;
  font-weight: 400;
  color: #151515;
}

.contacts-list__row + .contacts-list__row {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.contacts-list__row svg {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: #f27c13;
}

.contacts-list__row a {
  color: inherit;
  text-decoration: none;
}

.contacts-list__row a:hover {
  color: #f76505;
}

.contacts-card__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin: 26px 0 0;
  padding: 0 22px;
  border-radius: 999px;
  background: #1f1608;
  color: #ff8a1c;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

@media (max-width: 640px) {
  .contacts-card {
    border-radius: 22px;
  }

  .contacts-card__header {
    min-height: 96px;
    padding: 22px;
    gap: 16px;
  }

  .contacts-card__header-icon {
    width: 48px;
    height: 48px;
  }

  .contacts-card__body {
    padding: 20px 18px 22px;
  }

  .contacts-card__body h2 {
    margin: 24px 10px 14px;
  }

  .contacts-list__row {
    min-height: 64px;
    padding: 16px 18px;
  }
}

@media (max-width: 390px) {
  .svc-ai-avatar-shell--user {
    width: 44px;
    height: 44px;
  }

  .svc-ai-avatar-shell--bot {
    width: 48px;
    height: 48px;
  }

  .svc-ai-msg {
    gap: 12px;
  }

  .svc-ai-msg--user {
    padding-right: 10px;
  }

  .svc-ai-msg--bot {
    padding-left: 10px;
  }

  .svc-ai-bubble {
    padding: 11px 14px;
    border-radius: 999px;
    flex: 0 1 auto;
    width: fit-content;
    max-width: 250px;
  }

  .svc-ai-bubble__text {
    font-size: 14.5px;
    line-height: 1.12;
  }

  .svc-ai-bubble__status {
    font-size: 13px;
    line-height: 1.12;
  }
}



/* =========================================================
   RAMSTAT — responsive hardening for sub-Full-HD viewports
   2026-08-16
   Keeps the desktop composition intact above 1440px, while
   removing fixed-size collisions on 1366/1280/tablet/mobile.
   ========================================================= */

/* Let long labels wrap safely instead of becoming non-clickable/clipped. */
.tariff-btn,
.trial-pill-fill-frame,
.ramftr-block__trial-label,
.ramvt-tafseg-plan-btn {
  overflow-wrap: anywhere;
}

.hero-actions,
.hero-actions a,
.ramftr-block__trial-cta,
.ramvt-tafseg-plan-btn,
.ramvt-tafseg-pricing-arrow {
  pointer-events: auto;
}

/* ---------- 1280/1366 hero: keep title and both CTAs inside the first screen ---------- */
@media (min-width: 1181px) and (max-width: 1440px) {
  .hero-background__inner {
    min-height: 720px;
  }

  .hero-badge {
    top: clamp(245px, 32vh, 280px) !important;
    left: clamp(54px, 6vw, 86px) !important;
  }

  .hero-title {
    top: clamp(315px, 41.5vh, 355px) !important;
    left: clamp(54px, 6vw, 86px) !important;
    width: auto !important;
    max-width: none !important;
    font-size: clamp(48px, 3.8vw, 64px) !important;
    line-height: 0.96 !important;
  }

  .hero-actions {
    top: clamp(510px, 66vh, 580px) !important;
    bottom: auto !important;
    left: clamp(54px, 6vw, 86px) !important;
    right: clamp(28px, 4vw, 54px) !important;
    width: auto !important;
    max-width: none !important;
    gap: clamp(10px, 1.2vw, 14px) !important;
  }

  .tariff-btn,
  .trial-pill-stage,
  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: clamp(300px, 30vw, 370px) !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: 62px !important;
    min-height: 62px !important;
    border-radius: 25px !important;
    padding-inline: 18px !important;
    font-size: clamp(20px, 1.9vw, 24px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: 62px !important;
  }

  .trial-pill-stage {
    flex: 0 1 clamp(300px, 30vw, 370px) !important;
  }
}

/* ---------- 1441/1760 hero (MacBook Pro 14/16): raise badge & title slightly ---------- */
@media (min-width: 1441px) and (max-width: 1760px) {
  .hero-badge {
    top: clamp(285px, 30.5vh, 315px) !important;
  }

  .hero-title {
    top: clamp(370px, 39.5vh, 405px) !important;
  }
}

/* ---------- Feature cards: MacBook & compact desktop layout (1181px - 1760px) ---------- */
@media (min-width: 1181px) and (max-width: 1760px) {
  .svc-features-card-lk {
    overflow: hidden !important;
  }

  .svc-features-card-sm {
    min-height: clamp(285px, 23.5vw, 365px) !important;
  }

  .svc-lk-window {
    width: min(100%, clamp(290px, 24vw, 420px)) !important;
    height: clamp(175px, 14.5vw, 245px) !important;
    margin: clamp(8px, 0.75vw, 14px) auto 0 !important;
    max-width: 100% !important;
  }

  .svc-lk-seller {
    top: 27% !important;
    width: 49% !important;
  }

  .svc-lk-tools {
    top: calc(8% + clamp(6px, 0.5vw, 10px)) !important;
    gap: clamp(5px, 0.5vw, 9px) !important;
    width: 34% !important;
  }

  .svc-lk-tool-wrapper {
    width: 100% !important;
    height: clamp(52px, 4.1vw, 70px) !important;
    border-radius: clamp(5px, 0.36vw, 7px) !important;
  }

  .svc-lk-tool-card {
    width: 88% !important;
    height: clamp(46px, 3.6vw, 62px) !important;
    border-radius: clamp(6px, 0.45vw, 8px) !important;
    padding: clamp(3px, 0.25vw, 5px) clamp(4px, 0.35vw, 7px) 0 !important;
  }

  .svc-lk-tool-title {
    font-size: clamp(11px, 0.88vw, 14.5px) !important;
    margin-bottom: 1px !important;
    line-height: 1.05 !important;
  }

  .svc-lk-tool-subtitle {
    font-size: clamp(8px, 0.62vw, 11px) !important;
    line-height: 1.05 !important;
  }

  /* AI Card: perfectly balanced typography (2 lines question, 1 line response title) */
  .svc-ai-chat-wrapper {
    margin-top: clamp(4px, 0.6vw, 10px) !important;
    padding-inline: 0 !important;
  }

  .svc-ai-chat {
    gap: clamp(14px, 1.4vw, 22px) !important;
  }

  .svc-ai-msg {
    gap: clamp(8px, 0.9vw, 14px) !important;
  }

  .svc-ai-msg--user {
    padding-right: 0 !important;
    padding-left: 0 !important;
    justify-content: flex-end !important;
  }

  .svc-ai-msg--bot {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
  }

  .svc-ai-avatar-shell--user {
    width: clamp(44px, 3.8vw, 56px) !important;
    height: clamp(44px, 3.8vw, 56px) !important;
  }

  .svc-ai-avatar-shell--bot {
    width: clamp(48px, 4.1vw, 60px) !important;
    height: clamp(48px, 4.1vw, 60px) !important;
  }

  .svc-ai-bubble {
    padding: clamp(8px, 0.75vw, 12px) clamp(12px, 1.1vw, 16px) !important;
    max-width: none !important;
    width: fit-content !important;
  }

  .svc-ai-bubble__text {
    font-size: clamp(13px, 1.05vw, 16.5px) !important;
    line-height: 1.16 !important;
    white-space: normal !important;
  }

  .svc-ai-bubble__status {
    font-size: clamp(11.5px, 0.92vw, 14.5px) !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 991px) {
  .svc-features-card-lk {
    height: auto !important;
    min-height: 320px !important;
    aspect-ratio: auto !important;
  }

  /* Override the older vertical mobile LK layout with a compact contained diagram. */
  .svc-lk-window {
    position: relative !important;
    display: block !important;
    width: min(100%, 330px) !important;
    height: 220px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    scale: 1 !important;
  }

  .svc-lk-lines {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .svc-lk-seller {
    position: absolute !important;
    left: 0 !important;
    top: 50px !important;
    width: 50% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 222 / 178;
    transform: none !important;
  }

  .svc-lk-tools {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    width: 38% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .svc-lk-tool-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .svc-lk-tool-card {
    width: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    padding: 8px 7px 2px !important;
  }

  .svc-lk-tool-title {
    margin: 0 0 2px !important;
    font-size: clamp(9px, 1.8vw, 12px) !important;
    line-height: 1 !important;
  }

  .svc-lk-tool-subtitle {
    margin-top: 0 !important;
    font-size: clamp(7px, 1.45vw, 10px) !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) {
  .svc-features-card-lk {
    min-height: 300px !important;
  }

  .svc-lk-window {
    width: min(100%, 300px) !important;
    height: 205px !important;
  }

  .svc-lk-seller {
    top: 48px !important;
  }

  .svc-lk-tool-wrapper {
    height: 59px !important;
  }
}

/* ---------- Solutions: reserve the timeline lane; copy no longer crosses it ---------- */
@media (min-width: 901px) and (max-width: 1440px) {
  .rvwx-df-frame {
    --center-x: 57%;
    --rvwx-df-pad-x: clamp(28px, 3.4vw, 44px);
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 56%) minmax(0, 44%) !important;
    gap: 0 !important;
    min-height: 520px;
  }

  .rvwx-df-frame .copy {
    width: 100%;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: clamp(44px, 5.5vw, 76px) !important;
  }

  .rvwx-df-frame .text {
    max-width: none !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.38 !important;
  }

  .rvwx-df-frame .visual {
    min-width: 0;
    overflow: hidden;
    padding-left: clamp(18px, 2vw, 30px);
  }

  .rvwx-df-frame .stack {
    max-width: 100%;
    transform: scale(0.76) !important;
  }
}

/* ---------- Video + pricing: responsive layout for MacBooks & compact desktop (1181px - 1760px) ---------- */
@media (min-width: 1181px) and (max-width: 1760px) {
  .ramvt-rvb-stack-section {
    min-height: auto !important;
    padding-bottom: 0 !important;
    background: #fff;
  }

  .ramvt-rvb-stack-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ramvt-rvb-video-fragment {
    min-height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .ramvt-rvb-rings-center {
    top: 62% !important;
    width: min(1800px, 145vw) !important;
    height: min(1800px, 145vw) !important;
  }

  .ramvt-rvb-under-glow {
    top: 62% !important;
    width: min(1440px, 96vw) !important;
    height: min(340px, 25vw) !important;
  }

  .ramvt-rvb-video-hero {
    min-height: auto !important;
    padding-top: clamp(76px, 5.5vw, 100px) !important;
    padding-bottom: clamp(24px, 2.5vw, 40px) !important;
    padding-inline: 20px !important;
    justify-content: flex-start !important;
  }

  .ramvt-rvb-headline-wrap {
    width: min(1200px, calc(100vw - 48px)) !important;
    margin: 0 auto clamp(20px, 2.2vw, 32px) !important;
  }

  .ramvt-rvb-video-title {
    font-size: clamp(38px, 4.4vw, 66px) !important;
    line-height: 0.96 !important;
  }

  .ramvt-rvb-title-inline {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .ramvt-rvb-title-text {
    white-space: normal;
  }

  .ramvt-rvb-laptop-wrap {
    width: min(1320px, calc(100vw - 48px), calc(68vh * 1.577)) !important;
    max-width: min(1320px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto !important;
    padding-top: clamp(40px, 3.6vw, 54px) !important;
    padding-bottom: clamp(48px, 4.5vw, 70px) !important;
    border-radius: clamp(32px, 3vw, 42px) clamp(32px, 3vw, 42px) 0 0 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(960px, calc(100vw - 48px)) !important;
    margin: 0 auto !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    margin-bottom: clamp(16px, 1.8vw, 22px) !important;
    font-size: clamp(36px, 3.8vw, 52px) !important;
    line-height: 1.02 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-billing-toggle {
    transform: none !important;
    margin-bottom: clamp(30px, 2.8vw, 44px) !important;
    padding: 4px !important;
    border-radius: 17px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-toggle-btn {
    min-width: clamp(118px, 10vw, 134px) !important;
    height: clamp(44px, 3.6vw, 48px) !important;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    border-radius: 15px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
    display: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-compare-link {
    margin-top: clamp(36px, 3.5vw, 54px) !important;
    font-size: clamp(17px, 1.4vw, 20px) !important;
  }
}

/* MacBook Air 13" (1280px / 1352px effective viewport) */
@media (min-width: 1181px) and (max-width: 1365px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 480px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 50% !important;
    width: clamp(242px, 19vw, 256px) !important;
    height: 440px !important;
    padding: 13px 12px 15px !important;
    border-radius: 22px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    min-height: 24px !important;
    padding: 0 9px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 42px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 19px !important;
    padding-bottom: 4px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 40px !important;
    margin-bottom: 8px !important;
    font-size: 11.8px !important;
    line-height: 1.16 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 36px !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    border-radius: 9px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-divider {
    margin-bottom: 7px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 7px !important;
    font-size: 10px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list,
  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-features-list {
    gap: 4px !important;
    font-size: 11.5px !important;
    line-height: 1.14 !important;
  }
}

/* MacBook Air / Pro 13"-14" (1366px - 1440px effective viewport) */
@media (min-width: 1366px) and (max-width: 1440px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 505px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 50% !important;
    width: clamp(264px, 19.2vw, 278px) !important;
    height: 462px !important;
    padding: 14px 13px 16px !important;
    border-radius: 24px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    min-height: 26px !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 45px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 20px !important;
    padding-bottom: 5px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 10px !important;
    font-size: 11.5px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 44px !important;
    margin-bottom: 9px !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 38px !important;
    margin-bottom: 9px !important;
    font-size: 14.5px !important;
    border-radius: 9px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-divider {
    margin-bottom: 8px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 8px !important;
    font-size: 10.5px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list,
  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-features-list {
    gap: 4.5px !important;
    font-size: 12px !important;
    line-height: 1.16 !important;
  }
}

/* MacBook Pro 14" & 16" (1441px - 1760px effective viewport) */
@media (min-width: 1441px) and (max-width: 1760px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 525px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 50% !important;
    width: clamp(285px, 19.5vw, 310px) !important;
    height: 485px !important;
    padding: 15px 14px 18px !important;
    border-radius: 25px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-badge {
    min-height: 27px !important;
    padding: 0 11px !important;
    margin-bottom: 11px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-value {
    font-size: 48px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-currency {
    font-size: 21px !important;
    padding-bottom: 5px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-price-period {
    margin-bottom: 11px !important;
    font-size: 11.8px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 46px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-btn {
    height: 39px !important;
    margin-bottom: 10px !important;
    font-size: 14.8px !important;
    border-radius: 10px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-divider {
    margin-bottom: 9px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-title {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list,
  .ramvt-tafseg-root .ramvt-tafseg-plan-card .ramvt-tafseg-features-list {
    gap: 5px !important;
    font-size: 12.5px !important;
    line-height: 1.18 !important;
  }
}

/* Tablet/small laptop: exactly one tariff, with arrows + swipe/keyboard from JS. */
@media (min-width: 741px) and (max-width: 1180px) {
  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto !important;
    padding-top: 38px !important;
    padding-bottom: 34px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-carousel {
    height: 650px !important;
    overflow: hidden !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    top: 47% !important;
    width: min(470px, calc(100vw - 96px)) !important;
    height: 585px !important;
    padding: 20px 22px 22px !important;
    border-radius: 30px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card:not(.is-center) {
    opacity: 0 !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card.is-center {
    opacity: 1 !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card::before {
    display: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-desc {
    min-height: 54px !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-features-list {
    font-size: 14px !important;
    line-height: 1.18 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow {
    display: grid !important;
    top: auto !important;
    bottom: 6px !important;
    width: 48px !important;
    height: 48px !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow:hover {
    transform: scale(1.04) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-left {
    left: calc(50% - 64px) !important;
    right: auto !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-arrow.ramvt-tafseg-right {
    right: calc(50% - 64px) !important;
    left: auto !important;
  }
}

/* ---------- Testimonials: responsive side margins and scaling for MacBooks (1181px - 1760px) ---------- */
@media (min-width: 1181px) and (max-width: 1760px) {
  .testimonial-section {
    padding-top: clamp(60px, 6vw, 100px) !important;
    padding-inline: clamp(24px, 4.5vw, 64px) !important;
  }

  .testimonial-section > .section-heading,
  .section-heading {
    width: 100% !important;
    max-width: min(1560px, 100%) !important;
    margin: 0 auto clamp(28px, 3vw, 50px) !important;
    font-size: clamp(34px, 3.6vw, 54px) !important;
    line-height: 1.05 !important;
  }

  .testimonial-card {
    width: 100% !important;
    max-width: min(1560px, 100%) !important;
    height: auto !important;
    min-height: clamp(400px, 32vw, 480px) !important;
    margin: 0 auto !important;
    padding-bottom: clamp(36px, 3.5vw, 56px) !important;
    border-radius: clamp(32px, 3vw, 48px) !important;
  }

  .testimonial-content {
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(38px, 4vw, 64px) clamp(44px, 5.5vw, 96px) 0 !important;
  }

  .testimonial-text {
    width: 100% !important;
    max-width: min(1060px, 100%) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 clamp(28px, 3vw, 44px) !important;
    font-size: clamp(20px, 2.1vw, 30px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  .author-info {
    gap: clamp(10px, 1.2vw, 16px) !important;
  }

  .author-avatar {
    width: clamp(58px, 5vw, 74px) !important;
    height: clamp(58px, 5vw, 74px) !important;
  }

  .author-name {
    font-size: clamp(17px, 1.3vw, 20px) !important;
  }

  .author-role {
    font-size: clamp(13px, 1.1vw, 16px) !important;
  }

  .testimonial-nav {
    right: clamp(24px, 3vw, 48px) !important;
    bottom: clamp(20px, 2.5vw, 36px) !important;
  }

  .nav-btn {
    width: clamp(48px, 4vw, 56px) !important;
    height: clamp(48px, 4vw, 56px) !important;
  }
}

/* ---------- Testimonials: text grows the card instead of escaping it ---------- */
@media (max-width: 1180px) {
  .testimonial-section {
    padding-inline: clamp(14px, 2.5vw, 28px);
  }

  .section-heading {
    width: min(100%, 980px);
    margin-bottom: clamp(34px, 5vw, 56px);
    font-size: clamp(38px, 5.2vw, 56px);
    line-height: 1.05;
  }

  .testimonial-card {
    width: min(100%, 980px);
    height: auto !important;
    min-height: 500px;
    padding-bottom: 88px;
  }

  .testimonial-content {
    height: auto;
    min-height: 410px;
    padding: clamp(42px, 6vw, 68px) clamp(28px, 5vw, 58px) 24px;
  }

  .testimonial-text {
    width: 100%;
    max-width: 820px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 clamp(32px, 4vw, 48px) !important;
    font-size: clamp(24px, 3vw, 31px) !important;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 740px) {
  .testimonial-card {
    min-height: 430px;
    padding-bottom: 82px;
  }

  .testimonial-content {
    min-height: 340px;
    padding: 34px 20px 20px !important;
  }

  .testimonial-text {
    font-size: clamp(19px, 5.2vw, 25px) !important;
    line-height: 1.2 !important;
    margin-bottom: 28px !important;
  }
}

/* ---------- Footer: readable type, more breathing room, CTA label contained ---------- */
@media (min-width: 1181px) and (max-width: 1440px) {
  .ramftr-block__support {
    top: 55% !important;
  }

  .ramftr-block__support-text {
    padding-top: 28px !important;
  }
}

@media (max-width: 920px) {
  .ramftr-block {
    height: clamp(860px, 122vw, 1040px) !important;
    min-height: 860px !important;
  }

  .ramftr-block__headline {
    font-size: clamp(22px, 4vw, 32px) !important;
    line-height: 0.98 !important;
  }

  .ramftr-block__menu-col-title {
    font-size: clamp(12px, 1.8vw, 16px) !important;
    line-height: 1.1 !important;
  }

  .ramftr-block__menu-link {
    margin-top: 4px !important;
    font-size: clamp(10px, 1.55vw, 14px) !important;
    line-height: 1.15 !important;
  }

  .ramftr-block__support {
    top: 61% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .ramftr-block__support-text {
    padding-top: 0 !important;
    font-size: clamp(10px, 1.45vw, 12px) !important;
    line-height: 1.4 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ramftr-block__trial-button-image {
    width: clamp(165px, 31vw, 240px) !important;
  }

  .ramftr-block__trial-label {
    inset: 7px 12px !important;
    padding: 0 7px;
    font-size: clamp(13px, 2.15vw, 18px) !important;
    line-height: 1.05 !important;
    text-align: center;
    white-space: normal;
  }

  .ramftr-block__meta-row {
    top: 91% !important;
    font-size: clamp(9px, 1.35vw, 12px) !important;
    line-height: 1.15 !important;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .ramftr-block {
    height: clamp(760px, 190vw, 980px) !important;
    min-height: 760px !important;
  }

  .ramftr-block__social-row {
    top: 25% !important;
  }

  .ramftr-block__headline {
    top: 31% !important;
    width: 49% !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1 !important;
  }

  .ramftr-block__menu {
    top: 29% !important;
    left: 58% !important;
    width: 36% !important;
    row-gap: 14px !important;
  }

  .ramftr-block__menu-col-title {
    margin-bottom: 4px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
  }

  .ramftr-block__menu-link {
    font-size: clamp(9px, 2.5vw, 12px) !important;
    line-height: 1.18 !important;
  }

  .ramftr-block__cta-row {
    top: 53% !important;
  }

  .ramftr-block__trial-button-image {
    width: clamp(140px, 40vw, 180px) !important;
  }

  .ramftr-block__trial-label {
    inset: 6px 10px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.02 !important;
  }

  .ramftr-block__support {
    top: 65% !important;
    width: 88% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .ramftr-block__support-text {
    font-size: clamp(10px, 2.5vw, 12px) !important;
    line-height: 1.4 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ramftr-block__support-logos {
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .ramftr-block__meta-row {
    top: 91.5% !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 4px !important;
    font-size: clamp(8px, 2.1vw, 10px) !important;
  }

  .ramftr-block__meta-center,
  .ramftr-block__meta-link {
    text-align: left !important;
    justify-self: start !important;
  }
}

@media (max-width: 390px) {
  .ramftr-block {
    height: 780px !important;
    min-height: 780px !important;
  }

  .ramftr-block__menu {
    left: 56% !important;
    width: 39% !important;
  }

  .ramftr-block__trial-button-image {
    width: 142px !important;
  }

  .ramftr-block__trial-label {
    font-size: 11px !important;
  }
}

/* =========================================================
   RAMSTAT — FINAL RESPONSIVE LAYER v2
   Applies only below Full HD (1920px wide).
   1920px+ rendering is intentionally left untouched.
   ========================================================= */

@media (max-width: 1919px) {
  /* Generic containment: never let a local fixed width create page-level X overflow. */
  .hero-actions,
  .hero-actions > *,
  .svc-features-grid,
  .svc-features-card,
  .rvwx-df-frame .section,
  .rvwx-df-frame .copy,
  .rvwx-df-frame .visual,
  .ramftr-block__canvas,
  .ramftr-block__menu,
  .ramftr-block__support,
  .ramftr-block__meta-row {
    min-width: 0;
  }

  .tariff-btn,
  .trial-pill-fill-frame,
  .ramftr-block__trial-label,
  .ramftr-block__menu-link {
    overflow-wrap: anywhere;
  }

  /* The animated solution cards may leave their own grid cell while lifting. */
  .rvwx-df-frame .visual {
    overflow: visible !important;
  }

  /* Smaller floating feedback control so it does not cover compact layouts. */
  .feedback-btn {
    width: clamp(68px, 6.8vw, 86px);
    height: clamp(68px, 6.8vw, 86px);
    right: clamp(16px, 2.2vw, 32px);
    bottom: clamp(16px, 2.2vw, 30px);
  }
}

/* ---------------------------------------------------------
   HERO — fluid compact desktop (1181..1919)
   --------------------------------------------------------- */
@media (min-width: 1181px) and (max-width: 2999px) {
  .hero-badge {
    top: clamp(260px, 32svh, 370px) !important;
    left: clamp(56px, 5.8vw, 105px) !important;
    max-width: calc(100% - clamp(112px, 11.6vw, 320px)) !important;
  }

  .hero-title {
    top: clamp(335px, 41svh, 460px) !important;
    left: clamp(56px, 5.8vw, 105px) !important;
    width: auto !important;
    max-width: none !important;
    font-size: clamp(48px, 3.8vw, 76px) !important;
    line-height: 0.96 !important;
    gap: 8px !important;
  }

  .hero-title__line {
    white-space: nowrap !important;
  }

  .hero-title__line--with-arrow {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: clamp(14px, 1.2vw, 24px) !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-title__text {
    white-space: nowrap !important;
  }

  .icon-arrow-down {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    --size: clamp(54px, 3.8vw, 68px);
    width: var(--size) !important;
    height: var(--size) !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .icon-arrow-down:hover {
    transform: scale(1.05) !important;
  }

  .icon-arrow-down:active {
    transform: scale(0.98) !important;
  }

  .icon-arrow-down::before {
    font-size: calc(var(--size) * 0.52) !important;
  }

  .hero-subtitle {
    display: block !important;
    font-family: Onest, sans-serif !important;
    font-size: clamp(14px, 1.05vw, 18px) !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #716a65 !important;
    margin-top: clamp(12px, 1.1vw, 18px) !important;
    white-space: nowrap !important;
    max-width: none !important;
    letter-spacing: -0.01em !important;
  }

  .rmsm-markets__screen > img:first-child {
    transform: none !important;
  }

  .hero-actions {
    top: clamp(540px, 68svh, 725px) !important;
    bottom: auto !important;
    left: clamp(56px, 5.8vw, 105px) !important;
    right: clamp(38px, 4vw, 96px) !important;
    width: auto !important;
    max-width: 920px !important;
    gap: clamp(10px, 1vw, 14px) !important;
  }

  .tariff-btn,
  .trial-pill-stage {
    width: clamp(310px, 27vw, 390px) !important;
    max-width: calc(50% - 6px) !important;
  }

  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: 100% !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: clamp(58px, 5.1vw, 72px) !important;
    min-height: clamp(58px, 5.1vw, 72px) !important;
    padding-inline: 18px !important;
    border-radius: clamp(24px, 2.1vw, 29px) !important;
    font-size: clamp(20px, 1.65vw, 27px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: clamp(58px, 5.1vw, 72px) !important;
  }

  .trial-pill-stage {
    flex: 0 1 clamp(310px, 27vw, 390px) !important;
  }

  /* Footer typography and spacing for MacBook screens (1181..1919) */
  .ramftr-block {
    height: clamp(760px, 63vw, 1000px) !important;
    min-height: clamp(760px, 63vw, 1000px) !important;
  }

  .ramftr-block__art {
    position: absolute !important;
    top: 0 !important;
    left: var(--ramftr-svg-offset-x, -12.4386vw) !important;
    width: var(--ramftr-svg-width-ratio, 124.1318vw) !important;
    min-width: 124.1318vw !important;
    max-width: none !important;
    min-height: 100% !important;
    height: auto !important;
    display: block !important;
    transform: none !important;
  }

  .ramftr-block__social-row {
    top: clamp(285px, 24.8vw, 410px) !important;
    left: 4.3% !important;
    gap: clamp(18px, 1.3vw, 32px) !important;
  }

  .ramftr-block__social-item {
    width: clamp(38px, 2.7vw, 48px) !important;
    height: clamp(38px, 2.7vw, 48px) !important;
  }

  .ramftr-block__headline {
    top: clamp(345px, 30vw, 495px) !important;
    left: 4.2% !important;
    width: 42% !important;
    font-size: clamp(36px, 3.3vw, 56px) !important;
    line-height: 1.08 !important;
    word-spacing: 0 !important;
  }

  .ramftr-block__cta-row {
    top: clamp(540px, 46.5vw, 765px) !important;
    left: 4.2% !important;
  }

  .ramftr-block__trial-cta {
    gap: clamp(10px, 1vw, 18px) !important;
  }

  .ramftr-block__trial-button-image {
    width: clamp(250px, 21.5vw, 370px) !important;
  }

  .ramftr-block__arrow-button-image {
    width: clamp(65px, 5.62vw, 97px) !important;
    transform: none !important;
  }

  .ramftr-block__trial-button::before {
    display: none !important;
  }

  .ramftr-block__trial-label {
    inset: clamp(6px, 0.5vw, 10px) clamp(10px, 0.9vw, 16px) !important;
    border-radius: 999px !important;
    padding-inline: 6px !important;
    font-size: clamp(18px, 1.6vw, 26px) !important;
    line-height: 1 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .ramftr-block__menu {
    top: clamp(345px, 30vw, 495px) !important;
    left: 47% !important;
    width: 49% !important;
    column-gap: clamp(16px, 1.8vw, 38px) !important;
  }

  .ramftr-block__menu-col-title {
    font-size: clamp(17px, 1.4vw, 25px) !important;
    line-height: 1.1 !important;
    margin-bottom: clamp(6px, 0.6vw, 12px) !important;
  }

  .ramftr-block__menu-link {
    font-size: clamp(14px, 1.2vw, 21px) !important;
    line-height: 1.15 !important;
    margin-top: clamp(3px, 0.35vw, 6px) !important;
  }

  .ramftr-block__support {
    top: clamp(540px, 46.5vw, 765px) !important;
    left: 47% !important;
    width: 49% !important;
    gap: clamp(14px, 1.3vw, 26px) !important;
  }

  .ramftr-block__support-text {
    max-width: 100% !important;
    padding-top: 0 !important;
    font-size: clamp(11px, 0.8vw, 14px) !important;
    line-height: 1.35 !important;
  }

  .ramftr-block__support-logo--project {
    width: clamp(65px, 5vw, 95px) !important;
  }

  .ramftr-block__support-logo--fasie {
    width: clamp(95px, 7vw, 135px) !important;
  }

  .ramftr-block__meta-row {
    top: auto !important;
    bottom: clamp(32px, 3.2vw, 52px) !important;
    left: 4.2% !important;
    right: 4.2% !important;
    font-size: clamp(13px, 1.05vw, 18px) !important;
    gap: 18px !important;
  }
}

/* Very short laptop/landscape screens: keep the whole hero composition inside the shell. */
@media (min-width: 1181px) and (max-width: 1919px) and (max-height: 700px) {
  .hero-background {
    padding: 10px !important;
  }

  .hero-background__inner {
    height: calc(100svh - 20px) !important;
    min-height: 560px !important;
  }

  .hero-badge {
    top: clamp(170px, 31svh, 205px) !important;
  }

  .hero-title {
    top: clamp(225px, 40svh, 270px) !important;
    font-size: clamp(60px, 5vw, 76px) !important;
    line-height: .88 !important;
  }

  .hero-actions {
    bottom: 18px !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame,
  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: 56px !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    min-height: 56px !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
  }
}

/* ---------------------------------------------------------
   <=1180 — remove brittle absolute hero coordinates.
   This is the main continuous tablet / Nest Hub / small-laptop mode.
   --------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-background {
    padding: clamp(8px, 1.3vw, 14px) !important;
  }

  .hero-background__inner {
    height: auto !important;
    min-height: max(560px, calc(100svh - 28px)) !important;
  }

  .hero-bg.hero-shell {
    height: auto !important;
    min-height: inherit !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding:
      clamp(170px, 25svh, 230px)
      clamp(28px, 5.8vw, 68px)
      clamp(28px, 5vw, 48px) !important;
  }

  .hero-badge {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: 100% !important;
    margin: 0 0 clamp(18px, 2.3vw, 28px) !important;
    flex-wrap: wrap !important;
  }

  .hero-badge__accent,
  .hero-badge__rest {
    min-width: 0 !important;
  }

  .hero-badge__text--dark,
  .hero-badge__text--light {
    font-size: clamp(12px, 1.55vw, 18px) !important;
  }

  .hero-badge__text--percent {
    font-size: clamp(16px, 2vw, 23px) !important;
  }

  .hero-title {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(40px, 5.5vw, 64px) !important;
    line-height: .92 !important;
  }

  .hero-title__line,
  .hero-title__text {
    white-space: normal !important;
  }

  .hero-title__line--with-arrow {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .icon-arrow-down {
    display: none !important;
  }

  .hero-subtitle {
    font-size: clamp(14px, 1.8vw, 17px) !important;
    margin-top: 14px !important;
    color: #716a65 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  .hero-actions {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 780px) !important;
    max-width: 100% !important;
    margin: clamp(26px, 3.4vw, 38px) 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: clamp(10px, 1.5vw, 14px) !important;
  }

  .tariff-btn,
  .trial-pill-stage {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  .trial-pill-fill-frame,
  .trial-pill-shadow-layer {
    width: 100% !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    height: clamp(56px, 6vw, 64px) !important;
    min-height: clamp(56px, 6vw, 64px) !important;
    padding-inline: clamp(12px, 2vw, 20px) !important;
    border-radius: clamp(22px, 2.6vw, 26px) !important;
    font-size: clamp(18px, 2.3vw, 24px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: clamp(56px, 6vw, 64px) !important;
  }

  /* ---------- Features: stable 5/7 + 7/5 grid instead of fixed card widths ---------- */
  .svc-features-main {
    overflow-x: clip !important;
  }

  .svc-features-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.4vw, 28px) !important;
    width: min(100%, 1040px) !important;
    max-width: 100% !important;
  }

  .svc-features-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    min-height: clamp(265px, 27vw, 330px) !important;
    padding: clamp(14px, 1.8vw, 20px) clamp(12px, 1.8vw, 18px) clamp(18px, 2vw, 24px) !important;
  }

  .svc-features-card-lk {
    grid-column: span 5 !important;
    overflow: hidden !important;
  }

  .svc-features-card-parser {
    grid-column: span 7 !important;
  }

  .svc-features-card-lg:not(.svc-features-card-parser) {
    grid-column: span 7 !important;
  }

  .svc-features-card-ai {
    grid-column: span 5 !important;
  }

  .svc-features-card-desc {
    max-width: 96% !important;
  }

  .svc-lk-window {
    position: relative !important;
    display: block !important;
    width: min(100%, 360px) !important;
    height: clamp(210px, 21vw, 230px) !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
    scale: 1 !important;
  }

  .svc-lk-lines {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .svc-lk-seller {
    position: absolute !important;
    left: 0 !important;
    top: 22% !important;
    width: 53% !important;
    height: auto !important;
    aspect-ratio: 222 / 178 !important;
    transform: none !important;
  }

  .svc-lk-tools {
    position: absolute !important;
    top: 4px !important;
    right: 0 !important;
    width: 38% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .svc-lk-tool-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(58px, 6vw, 64px) !important;
    margin: 0 !important;
    transform: none !important;
  }

  .svc-lk-tool-card {
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    padding: 5px 6px 2px !important;
  }

  .svc-lk-tool-title {
    margin: 0 0 2px !important;
    font-size: clamp(8.5px, 1.05vw, 11.5px) !important;
    line-height: 1.1 !important;
  }

  .svc-lk-tool-subtitle {
    margin-top: 0 !important;
    font-size: clamp(6.5px, 0.78vw, 8.5px) !important;
    line-height: 1.15 !important;
  }

  /* ---------- Solutions: reserve the center timeline but never clip the lifting cards ---------- */
  .rvwx-df-frame {
    --center-x: 57% !important;
    --rvwx-df-pad-x: clamp(24px, 3vw, 36px) !important;
  }

  .rvwx-df-frame .section {
    grid-template-columns: minmax(0, 55%) minmax(0, 45%) !important;
    gap: 0 !important;
    min-height: 540px !important;
    padding-block: clamp(62px, 7vw, 82px) !important;
  }

  .rvwx-df-frame .copy {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: clamp(46px, 6vw, 68px) !important;
  }

  .rvwx-df-frame .text {
    max-width: none !important;
    font-size: clamp(16px, 1.75vw, 19px) !important;
    line-height: 1.38 !important;
  }

  .rvwx-df-frame .visual {
    min-width: 0 !important;
    overflow: visible !important;
    padding-left: clamp(14px, 2vw, 24px) !important;
  }

  .rvwx-df-frame .stack {
    transform: scale(clamp(.68, .07vw, .76)) !important;
    transform-origin: center center !important;
  }

  /* ---------- Footer: switch from absolute poster coordinates to real flow ---------- */
  .ramftr-block {
    --ramftr-footer-bottom-extra: 0px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: clamp(360px, 58vw, 620px) !important;
    overflow: hidden !important;
    background: #ec681c !important;
    contain: paint !important;
  }

  .ramftr-block::before {
    top: clamp(150px, 28vw, 330px) !important;
    background: #ec681c !important;
  }

  .ramftr-block__art {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .ramftr-block__canvas {
    position: relative !important;
    inset: auto !important;
    width: min(100%, 1120px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: clamp(30px, 4vw, 48px) clamp(28px, 5vw, 56px) clamp(28px, 4vw, 48px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    grid-template-areas:
      "social menu"
      "headline menu"
      "headline support"
      "cta support"
      "meta meta" !important;
    column-gap: clamp(34px, 5vw, 64px) !important;
    row-gap: clamp(20px, 3vw, 34px) !important;
    align-items: start !important;
  }

  .ramftr-block__social-row,
  .ramftr-block__headline,
  .ramftr-block__menu,
  .ramftr-block__support,
  .ramftr-block__cta-row,
  .ramftr-block__meta-row {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    transform: none !important;
  }

  .ramftr-block__social-row {
    grid-area: social !important;
    gap: 14px !important;
  }

  .ramftr-block__social-item {
    width: clamp(24px, 3vw, 34px) !important;
    height: clamp(24px, 3vw, 34px) !important;
  }

  .ramftr-block__headline {
    grid-area: headline !important;
    align-self: start !important;
    font-size: clamp(36px, 5vw, 54px) !important;
    line-height: 1.02 !important;
    word-spacing: 0 !important;
  }

  .ramftr-block__menu {
    grid-area: menu !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px clamp(14px, 2vw, 26px) !important;
  }

  .ramftr-block__menu-col-title {
    margin-bottom: 7px !important;
    font-size: clamp(17px, 2.1vw, 23px) !important;
    line-height: 1.08 !important;
  }

  .ramftr-block__menu-link {
    margin-top: 5px !important;
    font-size: clamp(14px, 1.8vw, 19px) !important;
    line-height: 1.18 !important;
  }

  .ramftr-block__support {
    grid-area: support !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    pointer-events: none !important;
  }

  .ramftr-block__support-text {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    font-size: clamp(11px, 2.8vw, 13px) !important;
    line-height: 1.45 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    color: rgba(8, 8, 8, 0.7) !important;
  }

  .ramftr-block__support-logos {
    width: 100% !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(16px, 4vw, 28px) !important;
  }

  .ramftr-block__support-logo--project {
    width: clamp(65px, 16vw, 95px) !important;
    padding: 3px !important;
    background: transparent !important;
  }

  .ramftr-block__support-logo--fasie {
    width: clamp(95px, 24vw, 135px) !important;
  }

  .ramftr-block__cta-row {
    grid-area: cta !important;
    align-self: end !important;
  }

  .ramftr-block__trial-cta {
    max-width: 100% !important;
    gap: 12px !important;
  }

  .ramftr-block__trial-button-image {
    width: clamp(240px, 31vw, 320px) !important;
    max-width: 100% !important;
  }

  .ramftr-block__trial-button::before {
    display: none !important;
  }

  .ramftr-block__trial-label {
    inset: clamp(5px, 1.5vw, 8px) clamp(8px, 2vw, 12px) !important;
    border-radius: 999px !important;
    padding: 0 6px !important;
    font-size: clamp(17px, 2.45vw, 24px) !important;
    line-height: 1.02 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .ramftr-block__arrow-button-image {
    width: clamp(63px, 8.1vw, 84px) !important;
    transform: none !important;
  }

  .ramftr-block__meta-row {
    grid-area: meta !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(0, 0, 0, .18) !important;
    font-size: clamp(11px, 1.45vw, 15px) !important;
    line-height: 1.2 !important;
  }
}

/* <=900 — single-column feature/solution layouts, still with contained diagrams. */
@media (max-width: 900px) {
  .svc-features-grid {
    grid-template-columns: 1fr !important;
    width: min(100%, 720px) !important;
  }

  .svc-features-card-lk,
  .svc-features-card-parser,
  .svc-features-card-lg:not(.svc-features-card-parser),
  .svc-features-card-ai {
    grid-column: 1 !important;
  }

  .svc-features-card {
    min-height: 300px !important;
  }

  .svc-features-card-lk {
    min-height: 330px !important;
  }

  .svc-lk-window {
    width: min(100%, 330px) !important;
    height: 220px !important;
  }

  .svc-lk-seller {
    top: 50px !important;
    width: 52% !important;
  }

  .svc-lk-tools {
    top: 7px !important;
    width: 40% !important;
  }

  .svc-lk-tool-wrapper {
    height: 64px !important;
  }

  .rvwx-df-frame {
    --rvwx-df-pad-x: clamp(14px, 3vw, 24px) !important;
  }

  .rvwx-df-frame .section {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: clamp(34px, 6vw, 56px) 0 !important;
  }

  .rvwx-df-frame .copy {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .rvwx-df-frame .text {
    max-width: 100% !important;
    font-size: clamp(14px, 2.4vw, 17px) !important;
    line-height: 1.4 !important;
  }

  .rvwx-df-frame .visual {
    width: 100% !important;
    min-height: 280px !important;
    margin-top: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }

  .rvwx-df-frame .stack {
    transform: scale(.66) !important;
    transform-origin: center center !important;
    margin: -18px auto -12px !important;
  }

  .rvwx-df-frame .timeline,
  .rvwx-df-frame .marker-wrapper {
    display: none !important;
  }
}

/* <=768 — phone/tablet portrait: stack hero CTAs and footer content. */
@media (max-width: 768px) {
  .hero-background {
    min-height: 100svh !important;
    height: auto !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }

  .hero-background__inner {
    min-height: calc(100svh - 16px) !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .hero-bg.hero-shell {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    min-height: calc(100svh - 16px) !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding:
      clamp(96px, 12svh, 115px)
      clamp(16px, 4.5vw, 24px)
      clamp(115px, 16.5svh, 195px) !important;
  }

  .hero-badge {
    margin-top: auto !important;
    margin-bottom: clamp(10px, 1.8svh, 16px) !important;
    padding: 4px 6px !important;
  }

  .hero-badge__accent {
    min-height: 30px !important;
    padding: 3px 7px !important;
    gap: 5px !important;
  }

  .hero-badge__rest {
    min-height: 30px !important;
    padding: 5px 9px !important;
  }

  .hero-badge__text--dark,
  .hero-badge__text--light {
    font-size: clamp(10px, 2.6vw, 14px) !important;
  }

  .hero-badge__text--percent {
    font-size: clamp(13px, 3.3vw, 18px) !important;
  }

  .hero-title {
    font-size: clamp(42px, 10.5vw, 62px) !important;
    line-height: .92 !important;
  }

  .hero-actions {
    width: 100% !important;
    margin-top: 24px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .tariff-btn,
  .trial-pill-stage {
    width: min(100%, 460px) !important;
    flex: 0 0 auto !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame,
  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: 58px !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    min-height: 58px !important;
    font-size: clamp(17px, 4vw, 20px) !important;
  }

  .svc-features-title {
    font-size: clamp(30px, 7vw, 46px) !important;
    line-height: 1.02 !important;
  }

  .svc-features-card {
    min-height: 290px !important;
  }

  .svc-features-card-lk {
    min-height: 325px !important;
  }

  .rvwx-df-frame .copy {
    text-align: left !important;
  }

  .rvwx-df-frame .visual {
    min-height: 250px !important;
  }

  .rvwx-df-frame .stack {
    transform: scale(.58) !important;
    margin: -34px auto -28px !important;
  }

  .ramftr-block {
    padding-top: clamp(250px, 62vw, 470px) !important;
  }

  .ramftr-block::before {
    top: clamp(110px, 28vw, 220px) !important;
  }

  .ramftr-block__canvas {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "social"
      "headline"
      "menu"
      "cta"
      "support"
      "meta" !important;
    padding: 30px clamp(20px, 6vw, 38px) 34px !important;
    row-gap: 26px !important;
  }

  .ramftr-block__headline {
    font-size: clamp(34px, 8vw, 50px) !important;
    max-width: 620px !important;
  }

  .ramftr-block__menu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .ramftr-block__menu-col-title {
    font-size: clamp(16px, 3.4vw, 20px) !important;
  }

  .ramftr-block__menu-link {
    font-size: clamp(13px, 2.8vw, 17px) !important;
  }

  .ramftr-block__support-text {
    font-size: clamp(12px, 2.6vw, 15px) !important;
  }

  .ramftr-block__trial-button-image {
    width: min(310px, 70vw) !important;
  }

  .ramftr-block__arrow-button-image {
    width: min(81px, 18.3vw) !important;
  }

  .ramftr-block__trial-label {
    font-size: clamp(18px, 4vw, 23px) !important;
  }

  .ramftr-block__meta-row {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 5px !important;
    font-size: clamp(11px, 2.5vw, 14px) !important;
  }

  .ramftr-block__meta-center,
  .ramftr-block__meta-link {
    justify-self: start !important;
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  .hero-title {
    font-size: clamp(38px, 11.8vw, 52px) !important;
  }

  .svc-features-main {
    padding-inline: 12px !important;
  }

  .svc-features-card {
    min-height: 280px !important;
  }

  .svc-features-card-lk {
    min-height: 315px !important;
  }

  .svc-lk-window {
    width: min(100%, 300px) !important;
    height: 205px !important;
  }

  .svc-lk-seller {
    top: 48px !important;
  }

  .svc-lk-tool-wrapper {
    height: 59px !important;
  }

  /* Three parser cards stay in one row without exceeding a 320px viewport. */
  .svc-parser-cards-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    height: 180px !important;
    padding-inline: 0 !important;
    overflow: visible !important;
  }

  .svc-parser-item {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: clamp(78px, 27vw, 118px) !important;
    max-width: calc((100% - 12px) / 3) !important;
    height: auto !important;
  }

  .rvwx-df-frame .visual {
    min-height: 220px !important;
  }

  .rvwx-df-frame .stack {
    transform: scale(.5) !important;
    margin: -54px auto -44px !important;
  }

  .ramftr-block__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ramftr-block__menu-col:last-child {
    grid-column: 1 / -1 !important;
  }

  .ramftr-block__support-logos {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(36px, 11.6vw, 45px) !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame,
  .trial-pill-stage,
  .trial-pill-shadow-layer {
    height: 54px !important;
  }

  .tariff-btn,
  .trial-pill-fill-frame {
    min-height: 54px !important;
    font-size: 16px !important;
  }

  .svc-features-card-lk {
    min-height: 305px !important;
  }

  .svc-lk-window {
    width: min(100%, 285px) !important;
    height: 196px !important;
  }

  .svc-lk-tool-wrapper {
    height: 56px !important;
  }

  .rvwx-df-frame .title {
    font-size: 18px !important;
  }

  .rvwx-df-frame .text {
    font-size: 13px !important;
  }

  .rvwx-df-frame .stack {
    transform: scale(.45) !important;
    margin: -64px auto -54px !important;
  }

  .ramftr-block {
    padding-top: clamp(225px, 64vw, 300px) !important;
  }

  .ramftr-block__canvas {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ramftr-block__headline {
    font-size: clamp(31px, 9vw, 40px) !important;
  }

  .ramftr-block__trial-button-image {
    width: min(255px, 68vw) !important;
  }

  .ramftr-block__arrow-button-image {
    width: min(67px, 17.8vw) !important;
  }

  .ramftr-block__trial-label {
    font-size: 16px !important;
  }
}

/* =========================================================
   RAMSTAT — mobile footer logo/content gap fix
   Keep desktop / Full HD untouched; only tighten the empty
   space below the RAMSTAT artwork on portrait/tablet widths.
   ========================================================= */
@media (max-width: 768px) {
  .ramftr-block {
    /* Was clamp(250px, 62vw, 470px), and <=390px later raised it again.
       32vw keeps the spacing proportional instead of leaving a ~200px hole. */
    padding-top: clamp(118px, 32vw, 245px) !important;
  }

  .ramftr-block__canvas {
    /* The canvas already starts after the artwork; 30px added another
       visible gap before the social row. */
    padding-top: 18px !important;
  }
}

/* =========================================================
   RAMSTAT — footer composition correction v4
   2026-08-16
   - keep the 3D RAMSTAT artwork overscanned like the Full HD layout
   - remove the excessive artwork/content gap on sub-Full-HD screens
   - keep the feedback glyph centered when the floating button scales
   ========================================================= */

/* The button itself is fluid below Full HD, so its glyph must scale with it too.
   These percentages are the original 91px geometry expressed proportionally. */
.feedback-btn__oval {
  left: 48.9% !important;
  top: 46.7% !important;
  width: 47.25% !important;
  height: 23.08% !important;
  transform: translate(-50%, -50%) !important;
}

.feedback-btn__tail {
  left: 65.93% !important;
  top: 49.45% !important;
  width: 14.29% !important;
  height: 16.48% !important;
  transform: rotate(67deg) !important;
  transform-origin: 0 50% !important;
}

/* Below Full HD the previous responsive layer reduced the footer art to 100%.
   Restore the same horizontal overscan used by the Full HD composition so
   RAMSTAT spans/crops against the viewport edges at every width. */
@media (max-width: 1919px) {
  .ramftr-block__art {
    left: var(--ramftr-svg-offset-x, -12.4386vw) !important;
    width: var(--ramftr-svg-width-ratio, 124.1318vw) !important;
    min-width: var(--ramftr-svg-width-ratio, 124.1318vw) !important;
    max-width: none !important;
    transform: none !important;
  }
}

/* Flow-layout footer (tablet / compact desktop / phone): place the real footer
   content immediately after the large RAMSTAT word instead of reserving 58vw. */
@media (max-width: 1180px) {
  .ramftr-block {
    padding-top: clamp(88px, 22vw, 260px) !important;
  }

  .ramftr-block__art {
    top: 0 !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  .ramftr-block__canvas {
    padding-top: 12px !important;
  }
}

/* =========================================================
   RAMSTAT — footer split correction v5
   2026-08-16
   On <=1180px keep the 3D RAMSTAT word straddling the
   white/orange boundary, matching the Full HD composition.
   ========================================================= */
@media (max-width: 1180px) {
  /* The previous flow-layout rule painted the whole footer orange,
     which removed the white half behind the RAMSTAT artwork. */
  .ramftr-block {
    background: transparent !important;
  }

  /* Tie the color split to viewport width (the artwork itself is vw-scaled),
     not to footer height. This keeps the boundary through roughly the middle
     of the large RAMSTAT letters from compact desktop down to phones. */
  .ramftr-block::before {
    top: clamp(32px, 9vw, 108px) !important;
  }
}

@media (max-width: 430px) {
  /* Slight optical correction for very narrow phones: the visible letter
     band begins close to the top edge of the SVG, so keep the split centered. */
  .ramftr-block::before {
    top: clamp(30px, 8.8vw, 38px) !important;
  }
}

/* =========================================================
   RAMSTAT — Footer horizontal distribution on 2K+ monitors
   Applies only above Full HD (> 2000px, e.g. 2560x1440 / 2K / 4K).
   Full HD (1920px), MacBook, and mobile viewports remain 100% untouched.
   ========================================================= */
@media (min-width: 2000px) {
  .ramftr-block__headline {
    width: 36% !important;
    max-width: 820px !important;
  }

  .ramftr-block__menu {
    left: 48% !important;
    width: 47.8% !important;
    column-gap: clamp(36px, 2.5vw, 72px) !important;
  }

  .ramftr-block__support {
    left: 48% !important;
    width: 47.8% !important;
  }
}

/* =========================================================
   RAMSTAT — Video, Tariffs & Testimonials adaptive for 4K / 2K+ monitors
   Applies only above Full HD (> 2000px, e.g. 2560x1440 at 150% zoom / 4K).
   Full HD (1920px), MacBook, and mobile viewports remain 100% untouched.
   ========================================================= */
@media (min-width: 2000px) {
  .ramvt-rvb-stack-section {
    min-height: auto !important;
    padding-bottom: 0 !important;
    background: #fff;
  }

  .ramvt-rvb-stack-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .ramvt-rvb-video-fragment {
    min-height: auto !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .ramvt-rvb-rings-center {
    top: 60% !important;
    width: min(1900px, 110vw) !important;
    height: min(1900px, 110vw) !important;
  }

  .ramvt-rvb-under-glow {
    top: 60% !important;
    width: min(1500px, 90vw) !important;
    height: min(360px, 20vw) !important;
  }

  .ramvt-rvb-video-hero {
    min-height: auto !important;
    padding-top: clamp(64px, 4.5vw, 92px) !important;
    padding-bottom: clamp(32px, 2.5vw, 48px) !important;
    padding-inline: 24px !important;
    justify-content: flex-start !important;
  }

  .ramvt-rvb-headline-wrap {
    width: min(1500px, calc(100vw - 64px)) !important;
    margin: 0 auto clamp(24px, 2vw, 36px) !important;
  }

  .ramvt-rvb-video-title {
    font-size: clamp(48px, 3.2vw, 76px) !important;
    line-height: 0.98 !important;
  }

  .ramvt-rvb-laptop-wrap {
    width: min(1480px, calc(100vw - 64px), calc(68vh * 1.577)) !important;
    max-width: min(1480px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-shell {
    min-height: auto !important;
    padding-top: clamp(48px, 3.6vw, 68px) !important;
    padding-bottom: clamp(56px, 4.2vw, 84px) !important;
    border-radius: clamp(36px, 2.8vw, 52px) clamp(36px, 2.8vw, 52px) 0 0 !important;
    transform: none !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-top {
    width: min(1100px, calc(100vw - 64px)) !important;
    margin: 0 auto !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-pricing-title {
    margin-bottom: clamp(20px, 1.8vw, 28px) !important;
    font-size: clamp(44px, 3vw, 64px) !important;
    line-height: 1.02 !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-billing-toggle {
    transform: none !important;
    margin-bottom: clamp(32px, 2.5vw, 46px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-plan-card {
    width: clamp(320px, 15vw, 370px) !important;
    height: clamp(510px, 27vw, 600px) !important;
  }

  .ramvt-tafseg-root--overlay .ramvt-tafseg-compare-link {
    margin-top: clamp(16px, 1.5vw, 24px) !important;
    font-size: 20px !important;
  }

  .testimonial-section {
    padding-top: clamp(72px, 5vw, 110px) !important;
    padding-inline: clamp(32px, 4.5vw, 80px) !important;
  }

  .testimonial-section > .section-heading,
  .section-heading {
    width: 100% !important;
    max-width: min(1637px, 100%) !important;
    margin: 0 auto clamp(36px, 2.8vw, 60px) !important;
    font-size: clamp(42px, 2.8vw, 60.5px) !important;
    line-height: 1.08 !important;
  }

  .testimonial-card {
    width: 100% !important;
    max-width: min(1637px, 100%) !important;
  }
}

/* =========================================================
   RAMSTAT — Hero section layout for native 4K monitors (3K+ px viewport)
   Applies only on screens >= 3000px wide (native 4K at 100% zoom).
   2K screens (2560px) and all other viewports remain 100% untouched.
   ========================================================= */
@media (min-width: 3000px) {
  .hero-badge {
    top: clamp(360px, 38svh, 420px) !important;
    left: clamp(120px, 3.2vw, 240px) !important;
  }

  .hero-title {
    top: clamp(450px, 47svh, 530px) !important;
    left: clamp(120px, 3.2vw, 240px) !important;
    font-size: clamp(130px, 3.8vw, 170px) !important;
    line-height: 0.88 !important;
    width: calc(100% - clamp(240px, 6.4vw, 480px)) !important;
    max-width: none !important;
  }

  .hero-actions {
    top: clamp(820px, 84svh, 950px) !important;
    left: clamp(140px, 3.4vw, 260px) !important;
    bottom: auto !important;
  }
}