/* ======================================================
   Integration layer
   Здесь только стыковка desktop MVP + mobile hero + final orbit.
   Старые файлы style.css / pearls.css максимально не трогаем.
   ====================================================== */

.hero-accent {
  color: inherit;
}

.hero-art {
  display: grid;
  place-items: center;
  min-height: 500px;
  overflow: visible;
}

.hero .galatea-orbit-stage {
  justify-self: center;
}

.hero-actions .consultation-link {
  border: 1px solid rgba(255,250,242,.36);
  color: var(--milk);
}

/* Старый нарисованный placeholder больше не используется, но пусть не влияет, если останется в CSS. */
.hero-art .halo,
.hero-art .galatea-card {
  display: none;
}

@media (min-width: 1101px) {
  .hero {
    min-height: clamp(700px, 82vh, 820px);
  }

  .hero-art {
    min-height: 520px;
  }
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text,
  .lead,
  .micro-note {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-art {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .site-header {
    padding: 12px 18px;
  }

  .hero {
    min-height: 100svh;
    padding: 86px 18px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
  }

  .eyebrow {
    margin: 4px 0 10px;
    font-size: 10.5px;
    letter-spacing: .24em;
  }

  h1 {
    max-width: 340px;
    margin-inline: auto;
    font-size: clamp(28px, 7.7vw, 36px);
    line-height: 1.06;
    letter-spacing: -0.03em;
  }

  .hero-accent {
    color: var(--champagne);
  }

  .lead {
    margin: 12px auto 0;
    max-width: 330px;
    font-size: 15.5px;
    line-height: 1.34;
  }

  .hero-actions {
    margin: 14px auto 0;
    max-width: 310px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .hero-actions .button {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12.5px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .hero-actions .consultation-link {
    grid-column: 1 / -1;
  }

  .micro-note {
    margin: 10px auto 0;
    max-width: 310px;
    font-size: 13px;
    line-height: 1.32;
  }

  .hero-art {
    margin-top: 2px;
    min-height: 286px;
    width: 100%;
  }

  .hero::after {
    height: 70px;
  }

  /* Старая жемчужная нить-доверие на mobile пока выключена:
     вместо неё работает орбита вокруг девушки на первом экране. */
  .trust {
    display: none;
  }

  .fit {
    padding-top: 52px;
  }
}

@media (max-width: 380px) {
  .hero {
    padding-top: 82px;
  }

  h1 {
    max-width: 316px;
    font-size: clamp(27px, 7.6vw, 34px);
  }

  .lead {
    font-size: 14.5px;
    line-height: 1.30;
  }

  .micro-note {
    font-size: 12.5px;
  }

  .hero-art {
    min-height: 272px;
  }
}

@media (max-height: 720px) and (max-width: 760px) {
  .hero {
    min-height: auto;
    padding-bottom: 16px;
  }

  .hero-art {
    min-height: 260px;
  }
}


/* ======================================================
   v2 integration fixes
   1) Desktop: hero uses plain woman image only, no orbit.
   2) Mobile: orbit remains on first screen.
   3) Mobile anchor scroll corrected: sections no longer land too low under header.
   ====================================================== */

.hero-text {
  position: relative;
  z-index: 3;
}

.hero-art {
  isolation: isolate;
}

.hero-desktop-portrait {
  display: none;
}

@media (min-width: 761px) {
  .hero {
    min-height: clamp(720px, 84vh, 860px);
  }

  .hero::after {
    z-index: 2;
  }

  .hero-art {
    display: block;
    min-height: 620px;
    z-index: 1;
  }

  /* На desktop не дублируем орбиту: внизу уже есть символическая жемчужная нить. */
  .hero .galatea-orbit-stage {
    display: none;
  }

  .hero-desktop-portrait {
    display: block;
    position: absolute;
    top: 52%;
    right: clamp(-210px, -9vw, -70px);
    width: min(980px, 64vw);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    opacity: 0.96;
    pointer-events: none;
    user-select: none;
    filter:
      drop-shadow(0 26px 60px rgba(0, 0, 0, 0.42))
      drop-shadow(0 0 42px rgba(217, 185, 135, 0.13));
    -webkit-mask-image:
      radial-gradient(ellipse 76% 68% at 58% 49%, rgba(0,0,0,1) 54%, rgba(0,0,0,0.88) 72%, rgba(0,0,0,0) 100%),
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 13%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(ellipse 76% 68% at 58% 49%, rgba(0,0,0,1) 54%, rgba(0,0,0,0.88) 72%, rgba(0,0,0,0) 100%),
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 13%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 100%);
    mask-composite: intersect;
  }
}

@media (min-width: 1101px) {
  .hero-art {
    min-height: 660px;
  }

  .hero-desktop-portrait {
    width: min(1060px, 66vw);
    right: clamp(-260px, -11vw, -90px);
  }
}

@media (max-width: 760px) {
  .hero-desktop-portrait {
    display: none;
  }

  .hero .galatea-orbit-stage {
    display: block;
  }

  /* Исправление «недокрутки» при переходах из гамбургера.
     Старые 82-88px + внутренний padding секций давали слишком большой зазор под header. */
  html {
    scroll-padding-top: 10px !important;
  }

  #fit,
  #process,
  #support,
  #faq,
  #contact {
    scroll-margin-top: 29px !important;
  }

  .fit,
  .process,
  .needs-support,
  .faq,
  .contact {
    padding-top: 26px !important;
  }

  .section-intro {
    margin-bottom: 22px;
  }

  #contact {
  scroll-margin-top: 15px !important;
}

.contact {
  padding-top: 15px !important;
}
}

/* ======================================================
   Desktop first-fold overflow fix v1
   1) убирает горизонтальную прокрутку от 100vw внутри padded-блоков;
   2) поднимает desktop-жемчужную нить доверия так, чтобы подписи не уходили за fold.
   ====================================================== */

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

body {
  overflow-x: hidden; /* fallback for browsers without overflow: clip */
}

.pearl-necklace,
.pearl-necklace-trust,
.process-desktop.pearl-process {
  width: 100%;
  max-width: none;
}

.pearl-necklace-svg {
  max-width: 100%;
}

@media (min-width: 761px) {
  .hero {
    min-height: clamp(680px, 78vh, 810px);
  }

  .trust {
    margin-top: -150px;
    padding-bottom: 20px;
  }

  .pearl-necklace-trust {
    transform: translateY(-74px);
  }
}

/* ======================================================
   Desktop/laptop first-fold compact fix v2
   На низких desktop-экранах и FHD-ноутбуках при 100–125% масштабе
   trust-нить получает компактные координаты через pearls.js, а CSS
   аккуратно уменьшает первый экран без налезания жемчуга на CTA.
   ====================================================== */

@media (min-width: 761px) and (max-height: 950px) {
  .hero {
    min-height: clamp(650px, 76vh, 760px);
    padding-top: clamp(90px, 9vh, 105px);
    padding-bottom: clamp(60px, 7vh, 78px);
  }

  .hero-art {
    min-height: clamp(540px, 60vh, 620px);
  }

  .lead {
    font-size: 16.5px;
    line-height: 1.45;
  }

  .hero-actions {
    margin: 24px 0 14px;
  }

  .micro-note {
    font-size: 12.5px;
    line-height: 1.45;
  }

  .trust {
    margin-top: -90px;
    padding-bottom: 14px;
  }

  .pearl-necklace-trust {
    transform: translateY(-42px);
  }

  .pearl-label-title {
    font-size: clamp(24px, 1.7vw, 32px);
  }

  .pearl-label-subtitle {
    font-size: clamp(14px, 1vw, 18px);
  }
}

@media (min-width: 761px) and (max-width: 1650px) and (max-height: 850px) {
  .hero {
    min-height: clamp(585px, 70vh, 670px);
    padding-top: 86px;
    padding-bottom: 46px;
  }

  .hero-art {
    min-height: clamp(465px, 55vh, 520px);
  }

  h1 {
    font-size: clamp(44px, 4.15vw, 62px);
    line-height: 1.02;
  }

  .lead {
    max-width: 510px;
    font-size: 15.5px;
    line-height: 1.38;
  }

  .hero-actions {
    gap: 14px;
    margin: 20px 0 0;
  }

  .button {
    min-height: 42px;
    padding: 11px 18px;
  }

  .micro-note {
    display: none;
  }

  .trust {
    margin-top: -118px;
    padding-bottom: 8px;
  }

  .pearl-necklace-trust {
    transform: translateY(-70px);
  }

  .pearl-label-title {
    font-size: clamp(22px, 1.9vw, 28px);
  }

  .pearl-label-subtitle {
    font-size: clamp(13px, 1.1vw, 16px);
  }
}

/* ======================================================
   Laptop compact trust row v3
   Когда высоты ноутбука не хватает для большой жемчужной нити,
   не втискиваем её поверх кнопок, а заменяем компактной строкой преимуществ.
   ====================================================== */

.hero-trust-compact {
  display: none;
}

@media (min-width: 761px) and (max-width: 1650px) and (max-height: 950px) {
  .micro-note {
    display: none;
  }

  .hero-trust-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    max-width: 560px;
    margin-top: 16px;
    font-family: Arial, sans-serif;
  }

  .hero-trust-compact span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(236, 207, 164, 0.23);
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.045);
    color: rgba(255, 250, 242, 0.82);
    font-size: 12.5px;
    line-height: 1;
    backdrop-filter: blur(8px);
  }

  .hero-trust-compact span::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #fffdf8, #ead6bb 48%, #b99473 100%);
    box-shadow: 0 0 10px rgba(236, 207, 164, 0.38);
  }

  .trust {
    display: none;
  }
}

/* ======================================================
   Laptop necklace restore v4
   Решение: не заменяем декоративную жемчужную нить на chips-строку
   в desktop/laptop-режиме. Для небольших экранов нить остаётся,
   но первый экран и сама нить ужимаются по высоте.
   ====================================================== */

@media (min-width: 761px) {
  .hero-trust-compact {
    display: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1650px) and (max-height: 950px) {
  .hero {
    min-height: 640px;
    padding-top: clamp(78px, 8.5vh, 96px);
    padding-bottom: clamp(36px, 5vh, 58px);
  }

  .hero-actions {
    margin: 20px 0 10px;
  }

  .micro-note {
    display: none;
  }

  .hero-art {
    min-height: clamp(440px, 54vh, 560px);
  }

  .trust {
    display: block !important;
    margin-top: -212px;
    padding-bottom: 22px;
  }

  .pearl-necklace-trust {
    transform: translateY(-54px);
  }

  .pearl-label-title {
    font-size: clamp(20px, 1.65vw, 26px);
  }

  .pearl-label-subtitle {
    font-size: clamp(12.5px, 1vw, 15px);
  }

  .fit {
    padding-top: 72px;
  }
}

@media (min-width: 761px) and (max-width: 1450px) and (max-height: 800px) {
  .hero {
    min-height: 626px;
    padding-top: 74px;
    padding-bottom: 32px;
  }

  h1 {
    font-size: clamp(40px, 4.05vw, 56px);
    line-height: 1.02;
  }

  .lead {
    max-width: 500px;
    font-size: 15px;
    line-height: 1.36;
  }

  .button {
    min-height: 40px;
    padding: 10px 17px;
  }

  .trust {
    margin-top: -218px;
    padding-bottom: 24px;
  }

  .pearl-necklace-trust {
    transform: translateY(-58px);
  }
}

@media (min-width: 761px) and (max-width: 1300px) and (max-height: 760px) {
  .hero {
    min-height: 610px;
  }

  h1 {
    font-size: clamp(38px, 4vw, 52px);
  }

  .lead {
    font-size: 14.5px;
  }

  .trust {
    margin-top: -222px;
  }

  .pearl-label-title {
    font-size: clamp(18px, 1.55vw, 22px);
  }

  .pearl-label-subtitle {
    font-size: clamp(11.5px, .95vw, 13.5px);
  }
}

/* ======================================================
   Laptop necklace scale v5
   Возвращаем нить как главный декоративный элемент, но делаем её реально
   адаптивной: на ноутбуках уменьшаются жемчужины, подписи и высота SVG.
   Главное исправление после v4: нить больше не тянется поверх текста/кнопок.
   ====================================================== */

@media (min-width: 761px) and (max-width: 1650px) and (max-height: 850px) {
  .hero {
    min-height: clamp(650px, 87vh, 735px);
    padding-top: clamp(78px, 8.5vh, 96px);
    padding-bottom: clamp(56px, 7vh, 78px);
  }

  .hero-actions {
    margin: 18px 0 10px;
  }

  .micro-note {
    display: none;
  }

  .hero-art {
    min-height: clamp(430px, 55vh, 535px);
  }

  .trust {
    display: block !important;
    margin-top: clamp(-118px, -13vh, -92px);
    padding-bottom: 12px;
    overflow: hidden;
  }

  .pearl-necklace-trust {
    transform: translateY(-18px);
  }

  .trust .pearl-necklace-svg {
    min-height: 0;
  }

  .pearl-label-title {
    font-size: clamp(14px, 1.12vw, 17px);
    stroke-width: 2.4px;
  }

  .pearl-label-subtitle {
    font-size: clamp(9.8px, .82vw, 12px);
    stroke-width: 1.8px;
  }

  .fit {
    padding-top: clamp(54px, 7vh, 72px);
  }
}

@media (min-width: 761px) and (max-width: 1300px) and (max-height: 760px) {
  .hero {
    min-height: clamp(635px, 88vh, 700px);
  }

  .trust {
    margin-top: clamp(-104px, -12vh, -82px);
  }

  .pearl-necklace-trust {
    transform: translateY(-14px);
  }

  .pearl-label-title {
    font-size: clamp(13px, 1vw, 15px);
  }

  .pearl-label-subtitle {
    font-size: clamp(9px, .75vw, 11px);
  }
}


/* ======================================================
   Laptop/desktop necklace balance v6
   Цель: оставить жемчужную нить на ноутбуках, но не давать
   ей жить отдельной жизнью: шрифт, жемчуг и посадка теперь
   мягче реагируют на реальные desktop/laptop размеры.
   ====================================================== */

@media (min-width: 761px) {
  .trust {
    overflow: visible;
  }
}

/* На desktop с нормальной высотой больше не тянем нить вверх на -74px:
   именно это резало верх больших жемчужин на 24". */
@media (min-width: 761px) and (min-height: 851px) {
  .trust {
    margin-top: clamp(-118px, -10vh, -86px);
    padding-bottom: 20px;
    overflow: visible;
  }

  .pearl-necklace-trust {
    transform: translateY(-14px);
  }

  .trust .pearl-necklace-svg {
    min-height: 0;
  }
}

/* FHD/ноутбук 100%: CSS видит большой viewport, но физически экран маленький.
   Поэтому отдельно уменьшаем подписи и не даём им превращаться в баннер. */
@media (min-width: 761px) and (max-width: 1950px) and (max-height: 1120px) {
  .pearl-label-title {
    font-size: clamp(14.5px, 0.96vw, 18px);
    stroke-width: 2.3px;
  }

  .pearl-label-subtitle {
    font-size: clamp(9.6px, 0.70vw, 12.5px);
    stroke-width: 1.7px;
  }
}

/* Низкие ноутбучные окна: сохраняем v5-компактность, но без обрезания сверху. */
@media (min-width: 761px) and (max-width: 1650px) and (max-height: 850px) {
  .trust {
    margin-top: clamp(-112px, -12vh, -86px);
    overflow: visible;
  }

  .pearl-necklace-trust {
    transform: translateY(-10px);
  }
}


/* ======================================================
   Hero image replacement + dark gradient blend v7
   Новая картинка вставлена в desktop hero.
   Задача: мягко вписать сцену в тёмный фон страницы,
   сохранить читаемость текста слева и не потерять ракушку/арки/шёлк.
   ====================================================== */

@media (min-width: 761px) {
  .hero-art {
    overflow: visible;
  }

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

  /* Основной тёмный переход в сторону текста. */
  .hero-art::before {
    inset: -8% 16% -8% -22%;
    z-index: 2;
    background: linear-gradient(90deg,
      rgba(10, 12, 17, 1) 0%,
      rgba(10, 12, 17, 0.98) 18%,
      rgba(10, 12, 17, 0.88) 33%,
      rgba(10, 12, 17, 0.56) 47%,
      rgba(10, 12, 17, 0.18) 60%,
      rgba(10, 12, 17, 0) 70%
    );
  }

  /* Мягкое затемнение снизу + лёгкое золотое свечение справа,
     чтобы картинка не обрубалась прямоугольником. */
  .hero-art::after {
    inset: -6% -8% -10% 24%;
    z-index: 2;
    background:
      radial-gradient(ellipse at 78% 22%, rgba(255, 232, 198, 0.16), transparent 40%),
      radial-gradient(ellipse at 78% 72%, rgba(255, 228, 190, 0.10), transparent 42%),
      linear-gradient(to top, rgba(10, 12, 17, 0.42) 0%, rgba(10, 12, 17, 0.10) 20%, rgba(10, 12, 17, 0) 36%),
      linear-gradient(to right, rgba(10, 12, 17, 0) 0%, rgba(10, 12, 17, 0.05) 86%, rgba(10, 12, 17, 0.22) 100%);
  }

  .hero-desktop-portrait {
    right: clamp(-150px, -5.5vw, -18px);
    top: 51%;
    width: min(1080px, 70vw);
    height: auto;
    opacity: 0.98;
    filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.40))
            drop-shadow(0 0 36px rgba(217, 185, 135, 0.12));
    -webkit-mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 14%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.70) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 92%, rgba(0,0,0,0.14) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.74) 14%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%),
      linear-gradient(to bottom, rgba(0,0,0,0.70) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 92%, rgba(0,0,0,0.14) 100%);
    mask-composite: intersect;
  }
}

@media (min-width: 1101px) {
  .hero-desktop-portrait {
    width: min(1140px, 72vw);
    right: clamp(-175px, -6.8vw, -34px);
  }
}

@media (min-width: 761px) and (max-width: 1380px) {
  .hero-desktop-portrait {
    width: min(960px, 68vw);
    right: clamp(-115px, -5vw, -10px);
  }

  .hero-art::before {
    inset: -8% 18% -8% -26%;
    background: linear-gradient(90deg,
      rgba(10, 12, 17, 1) 0%,
      rgba(10, 12, 17, 0.99) 21%,
      rgba(10, 12, 17, 0.91) 36%,
      rgba(10, 12, 17, 0.60) 50%,
      rgba(10, 12, 17, 0.20) 62%,
      rgba(10, 12, 17, 0) 73%
    );
  }
}

@media (min-width: 761px) and (max-width: 1200px) {
  .hero-desktop-portrait {
    width: min(900px, 66vw);
    right: clamp(-96px, -4vw, -4px);
  }
}


/* ======================================================
   Hero image blend fix v8
   Правки по замечаниям пользователя:
   1) убираем жёсткую полосу справа;
   2) делаем плавное исчезновение картинки снизу;
   3) голова девушки не режется header;
   4) убираем странное наслоение на laptop 125%.
   ====================================================== */

@media (min-width: 761px) {
  .hero {
    overflow: visible;
  }

  .hero::after {
    height: 280px;
    z-index: 2;
    background: linear-gradient(
      to top,
      rgba(14, 17, 24, 0.98) 0%,
      rgba(14, 17, 24, 0.88) 18%,
      rgba(14, 17, 24, 0.46) 46%,
      rgba(14, 17, 24, 0) 82%
    );
  }

  .hero-art {
    position: relative;
    overflow: visible;
    min-height: clamp(560px, 66vh, 700px);
    isolation: isolate;
  }

  /* Старые v7 overlay-пластины отключаем: именно они давали
     прямоугольное наслоение и жёсткие границы на некоторых экранах. */
  .hero-art::before,
  .hero-art::after {
    content: none !important;
    display: none !important;
  }

  .hero-desktop-portrait {
    top: clamp(20px, 4.2vh, 48px);
    right: clamp(-180px, -7vw, -30px);
    width: min(1160px, 76vw);
    height: auto;
    max-width: none;
    transform: none;
    z-index: 1;
    opacity: 0.99;
    pointer-events: none;
    user-select: none;
    filter:
      drop-shadow(0 22px 52px rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 34px rgba(217, 185, 135, 0.10));

    /* Слева — плавный уход в тьму под текст.
       Справа — мягкий уход, чтобы не было жёсткой вертикальной полосы.
       Снизу — длинный fade, чтобы картинка гармонично растворялась
       перед жемчужной нитью и чуть чувствовалась за ней. */
    -webkit-mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.38) 9%,
        rgba(0,0,0,0.78) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0.72) 96%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 72%,
        rgba(0,0,0,0.82) 83%,
        rgba(0,0,0,0.32) 92%,
        rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.38) 9%,
        rgba(0,0,0,0.78) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 90%,
        rgba(0,0,0,0.72) 96%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 72%,
        rgba(0,0,0,0.82) 83%,
        rgba(0,0,0,0.32) 92%,
        rgba(0,0,0,0) 100%);
    mask-composite: intersect;
  }
}

@media (min-width: 1101px) {
  .hero-desktop-portrait {
    width: min(1200px, 77vw);
    right: clamp(-210px, -8vw, -42px);
  }
}

/* Ноутбуки и compact desktop: чуть меньше картинка и чуть больше воздуха сверху,
   чтобы голова точно не упиралась в header. */
@media (min-width: 761px) and (max-width: 1500px) {
  .hero-art {
    min-height: clamp(520px, 63vh, 620px);
  }

  .hero-desktop-portrait {
    top: clamp(30px, 5vh, 58px);
    width: min(980px, 70vw);
    right: clamp(-118px, -5.4vw, -10px);
    -webkit-mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.46) 10%,
        rgba(0,0,0,0.85) 18%,
        rgba(0,0,0,1) 26%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0.72) 95%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.84) 82%,
        rgba(0,0,0,0.28) 92%,
        rgba(0,0,0,0) 100%);
    mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.46) 10%,
        rgba(0,0,0,0.85) 18%,
        rgba(0,0,0,1) 26%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0.72) 95%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,1) 8%,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.84) 82%,
        rgba(0,0,0,0.28) 92%,
        rgba(0,0,0,0) 100%);
  }
}

/* Узкие/низкие desktop-окна и laptop 125% */
@media (min-width: 761px) and (max-width: 1450px) and (max-height: 860px) {
  .hero-desktop-portrait {
    top: 36px;
    width: min(920px, 68vw);
    right: clamp(-96px, -4.2vw, -2px);
  }
}


/* ======================================================
   Hero image position tweak v9
   Поднимаем картинку выше по замечанию пользователя:
   уменьшаем воздух между головой и header, целимся в небольшой зазор.
   ====================================================== */

@media (min-width: 761px) {
  .hero-desktop-portrait {
    top: clamp(8px, 1.6vh, 20px);
  }
}

@media (min-width: 761px) and (max-width: 1500px) {
  .hero-desktop-portrait {
    top: clamp(10px, 2.0vh, 22px);
  }
}

@media (min-width: 761px) and (max-width: 1450px) and (max-height: 860px) {
  .hero-desktop-portrait {
    top: 10px;
  }
}


/* ======================================================
   Hero image raise more v10
   Дополнительно поднимаем картинку ещё примерно на 48-52px.
   ====================================================== */

@media (min-width: 761px) {
  .hero-desktop-portrait {
    top: clamp(-40px, -3.6vh, -28px);
  }
}

@media (min-width: 761px) and (max-width: 1500px) {
  .hero-desktop-portrait {
    top: clamp(-38px, -3.2vh, -26px);
  }
}

@media (min-width: 761px) and (max-width: 1450px) and (max-height: 860px) {
  .hero-desktop-portrait {
    top: -40px;
  }
}


/* ======================================================
   Hero image responsive blend v11
   Ответ на проблему не только в "положении", а в связке:
   размер картинки + right + непрозрачный фон trust-блока.
   1) Картинка чуть компактнее и левее на desktop/laptop.
   2) Правый край снова попадает в область fade, а не режется экраном.
   3) Верхнее положение головы сохраняем от v10.
   4) Верх trust-блока делаем прозрачным/градиентным, чтобы низ картинки
      не обрубался прямой линией и мог мягко уходить за жемчужную нить.
   5) На laptop 125% поднимаем жемчужную нить примерно на 20px.
   ====================================================== */

@media (min-width: 761px) {
  .hero-desktop-portrait {
    /* Верх оставляем как в v10: голова уже в нужном месте. */
    top: clamp(-40px, -3.6vh, -28px);

    /* Чуть уменьшаем масштаб и возвращаем правый край в видимую зону,
       чтобы справа снова работал fade, а не прямой срез по экрану. */
    width: min(1150px, 74vw);
    right: 0;

    -webkit-mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.30) 8%,
        rgba(0,0,0,0.74) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0.70) 95%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.12) 0%,
        rgba(0,0,0,1) 7%,
        rgba(0,0,0,1) 68%,
        rgba(0,0,0,0.86) 80%,
        rgba(0,0,0,0.46) 90%,
        rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.30) 8%,
        rgba(0,0,0,0.74) 16%,
        rgba(0,0,0,1) 24%,
        rgba(0,0,0,1) 88%,
        rgba(0,0,0,0.70) 95%,
        rgba(0,0,0,0) 100%),
      linear-gradient(to bottom,
        rgba(0,0,0,0.12) 0%,
        rgba(0,0,0,1) 7%,
        rgba(0,0,0,1) 68%,
        rgba(0,0,0,0.86) 80%,
        rgba(0,0,0,0.46) 90%,
        rgba(0,0,0,0) 100%);
    mask-composite: intersect;
  }

  /* Важный фикс: раньше trust-блок своим плотным фоном просто
     отрезал низ картинки. Теперь верх trust-блока прозрачный,
     поэтому низ изображения может мягко растворяться за жемчужной нитью. */
  .trust.section-dark {
    background:
      linear-gradient(to bottom,
        rgba(10, 13, 19, 0) 0px,
        rgba(10, 13, 19, 0.18) 46px,
        rgba(10, 13, 19, 0.66) 120px,
        rgba(10, 13, 19, 0.96) 230px,
        #0b0f16 100%),
      radial-gradient(circle at 72% 16%, rgba(217,185,135,.12), transparent 34%),
      linear-gradient(135deg, #0a0d13, #151922 55%, #0b0f16);
  }
}

@media (min-width: 1101px) {
  .hero-desktop-portrait {
    width: min(1160px, 74vw);
    right: 0;
  }
}

/* Диапазон, похожий на ноутбук/desktop с масштабом 125%.
   Здесь чуть уменьшаем картинку, чтобы ракушка не резалась снизу,
   но оставляем уже найденную красивую посадку сверху. */
@media (min-width: 761px) and (max-width: 1600px) {
  .hero-desktop-portrait {
    width: min(1120px, 73vw);
    right: 0;
  }
}

/* Низкие ноутбучные окна / 125%.
   Поднимаем жемчужную нить и подписи примерно на 20px,
   чтобы они не проваливались за нижний край экрана. */
@media (min-width: 761px) and (max-width: 1600px) and (max-height: 900px) {
  .trust {
    margin-top: clamp(-138px, -14vh, -112px);
    padding-bottom: 4px;
  }

  .pearl-necklace-trust {
    transform: translateY(-30px);
  }

  .hero-desktop-portrait {
    width: min(1100px, 72vw);
    right: 0;
  }
}


/* ======================================================
   Hero image scale experiment v12
   Эксперимент по просьбе пользователя:
   уменьшаем картинку примерно на 25% и чуть возвращаем вправо.
   Цель: вернуть ракушку, убрать ощущение слишком сильного ухода влево,
   при этом сохранить удачное положение головы.
   ====================================================== */

@media (min-width: 761px) {
  .hero-desktop-portrait {
    top: clamp(-40px, -3.6vh, -28px);
    width: min(865px, 56vw);
    right: -18px;
  }
}

@media (min-width: 1101px) {
  .hero-desktop-portrait {
    width: min(870px, 56vw);
    right: -20px;
  }
}

@media (min-width: 761px) and (max-width: 1600px) {
  .hero-desktop-portrait {
    width: min(840px, 55vw);
    right: -14px;
  }
}

@media (min-width: 761px) and (max-width: 1600px) and (max-height: 900px) {
  .hero-desktop-portrait {
    width: min(825px, 54vw);
    right: -12px;
  }
}


/* ======================================================
   Unified hero/trust background v13
   Эксперимент по идее пользователя:
   картинка больше не отдельный прямоугольный слой в hero.
   Она становится общим фоном для hero + верхней части trust-блока,
   чтобы шёлк/дымка проходили под кнопками и под жемчужной нитью.
   ====================================================== */

@media (min-width: 761px) {
  main {
    position: relative;
    overflow-x: clip;
    background: #0a0d13;
  }

  /* Общая сцена под hero и жемчужной нитью.
     Все затемнения находятся на одном слое с картинкой — больше нет
     конфликта "фон hero" против "фон trust". */
  main::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(820px, 94vh, 1040px);
    pointer-events: none;
    background-image:
      linear-gradient(to right,
        rgba(10, 13, 19, 1) 0%,
        rgba(10, 13, 19, .99) 20%,
        rgba(10, 13, 19, .84) 34%,
        rgba(10, 13, 19, .40) 48%,
        rgba(10, 13, 19, .08) 60%,
        rgba(10, 13, 19, .02) 82%,
        rgba(10, 13, 19, .70) 96%,
        rgba(10, 13, 19, 1) 100%),
      linear-gradient(to bottom,
        rgba(10, 13, 19, .82) 0%,
        rgba(10, 13, 19, .16) 12%,
        rgba(10, 13, 19, 0) 56%,
        rgba(10, 13, 19, .28) 76%,
        rgba(10, 13, 19, .88) 92%,
        rgba(10, 13, 19, 1) 100%),
      url("../images/galatea_scene_hero_v1.png");
    background-repeat: no-repeat;
    background-size:
      100% 100%,
      100% 100%,
      min(1040px, 62vw) auto;
    background-position:
      center top,
      center top,
      right -6px top -40px;
  }

  .hero,
  .trust {
    position: relative;
    z-index: 1;
  }

  /* Старую отдельную картинку убираем, чтобы не было двух сцен
     и прямоугольных стыков. */
  .hero-desktop-portrait {
    display: none !important;
  }

  .hero.section-dark {
    background:
      radial-gradient(circle at 68% 8%, rgba(217,185,135,.08), transparent 34%),
      linear-gradient(135deg, rgba(10,13,19,.50), rgba(10,13,19,.22) 56%, rgba(10,13,19,.46));
  }

  .trust.section-dark {
    background:
      linear-gradient(to bottom,
        rgba(10, 13, 19, 0) 0px,
        rgba(10, 13, 19, .08) 44px,
        rgba(10, 13, 19, .38) 112px,
        rgba(10, 13, 19, .86) 220px,
        #0b0f16 100%);
  }
}

/* 24" и широкие окна: чуть правее и крупнее, но без прямого среза справа. */
@media (min-width: 1700px) {
  main::before {
    background-size:
      100% 100%,
      100% 100%,
      min(1080px, 60vw) auto;
    background-position:
      center top,
      center top,
      right -12px top -40px;
  }
}

/* Окна около 15.8" 100%: возвращаем сцену чуть левее,
   чтобы шёлк/дымка заходили под кнопки. */
@media (min-width: 1501px) and (max-width: 1699px) {
  main::before {
    background-size:
      100% 100%,
      100% 100%,
      min(1040px, 64vw) auto;
    background-position:
      center top,
      center top,
      right -4px top -40px;
  }
}

/* Laptop / 125%: картинка компактнее, но фон продолжается под жемчуг,
   поэтому ракушка не должна пропадать резким срезом. */
@media (min-width: 761px) and (max-width: 1500px) {
  main::before {
    height: clamp(760px, 96vh, 940px);
    background-size:
      100% 100%,
      100% 100%,
      min(900px, 64vw) auto;
    background-position:
      center top,
      center top,
      right -2px top -40px;
  }
}

/* Низкие ноутбучные окна: дополнительно поднимаем нить,
   чтобы подписи не выпадали за экран. */
@media (min-width: 761px) and (max-width: 1600px) and (max-height: 900px) {
  .trust {
    margin-top: clamp(-150px, -15vh, -124px);
    padding-bottom: 2px;
  }

  .pearl-necklace-trust {
    transform: translateY(-38px);
  }
}


/* ======================================================
   Unified scene background v14
   Используем новую очищенную картинку как единый фон для hero + trust.
   Убираем конкурирующие фоны у hero и trust, чтобы сцена проходила
   и под кнопками, и под жемчужной нитью.
   ====================================================== */

@media (min-width: 761px) {
  main {
    position: relative;
    overflow-x: clip;
    background: #0a0d13;
  }

  main::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(820px, 96vh, 1040px);
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right,
        rgba(7, 10, 16, 0.88) 0%,
        rgba(7, 10, 16, 0.52) 18%,
        rgba(7, 10, 16, 0.12) 32%,
        rgba(7, 10, 16, 0.00) 50%,
        rgba(7, 10, 16, 0.00) 82%,
        rgba(7, 10, 16, 0.30) 92%,
        rgba(7, 10, 16, 0.82) 100%),
      linear-gradient(to bottom,
        rgba(7, 10, 16, 0.10) 0%,
        rgba(7, 10, 16, 0.00) 55%,
        rgba(7, 10, 16, 0.18) 72%,
        rgba(7, 10, 16, 0.56) 86%,
        rgba(7, 10, 16, 0.90) 96%,
        rgba(7, 10, 16, 1.00) 100%),
      url("../images/galatea_scene_clean_bg_v2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center top, center top, center top;
  }

  .hero,
  .trust {
    position: relative;
    z-index: 1;
  }

  /* Отдельное img больше не нужно */
  .hero-desktop-portrait {
    display: none !important;
  }

  /* Убираем competing backgrounds — оставляем только лёгкие прозрачные оттенки. */
  .hero.section-dark {
    background: linear-gradient(135deg, rgba(10,13,19,0.18), rgba(10,13,19,0.05) 58%, rgba(10,13,19,0.16));
  }

  .trust.section-dark {
    background: linear-gradient(to bottom,
      rgba(10,13,19,0.00) 0%,
      rgba(10,13,19,0.04) 90px,
      rgba(10,13,19,0.18) 170px,
      rgba(10,13,19,0.58) 255px,
      rgba(10,13,19,0.96) 100%);
  }
}

/* Широкие экраны */
@media (min-width: 1700px) {
  main::before {
    background-position: center top, center top, center -6px;
  }
}

/* Ноутбуки / средние desktop */
@media (min-width: 761px) and (max-width: 1600px) {
  main::before {
    height: clamp(780px, 98vh, 980px);
    background-position: center top, center top, center top;
  }
}

/* Невысокие окна: приподнимаем блок с нитью, чтобы подписи не падали за край */
@media (min-width: 761px) and (max-width: 1600px) and (max-height: 900px) {
  .trust {
    margin-top: clamp(-148px, -15vh, -120px);
    padding-bottom: 4px;
  }

  .pearl-necklace-trust {
    transform: translateY(-34px);
  }
}


/* ======================================================
   Click-through fix v16
   На 15.8" / 125% декоративная нить частично наезжает на hero-кнопки
   и перехватывает клики. Так как trust-necklace декоративная и не имеет
   интерактивных элементов, отключаем у неё pointer-events.
   Дополнительно поднимаем hero CTA по z-index на случай overlap.
   ====================================================== */

@media (min-width: 761px) {
  .pearl-necklace-trust,
  .pearl-necklace-trust *,
  #trustPearlLabels,
  #trustBigPearls,
  #trustSmallPearls {
    pointer-events: none !important;
  }

  .hero-copy,
  .hero-actions,
  .hero-actions .button,
  .hero .button,
  .micro-note {
    position: relative;
    z-index: 4;
  }
}


/* ======================================================
   Necklace micro-adjust v17
   Для laptop 15.8" при 125% немного опускаем жемчужную нить
   примерно на 10px для более комфортной посадки.
   ====================================================== */

@media (min-width: 761px) and (max-width: 1600px) and (max-height: 900px) {
  .pearl-necklace-trust {
    transform: translateY(-24px);
  }
}


/* ======================================================
   Tablet portrait fix v18
   Проблема: на планшетах в портретной ориентации появлялся "полумобильный"
   режим: гамбургер уже есть, но hero ещё живёт как desktop/fon + trust-нити.
   Это давало слишком много воздуха и странную композицию.

   Решение: для portrait-планшетов делаем цельный big-mobile режим:
   - скрываем desktop background-сцену main::before;
   - показываем мобильную орбиту с девушкой;
   - скрываем нижнюю trust-жемчужную нить;
   - центрируем hero и кнопки.
   Desktop/laptop и телефоны не трогаем по смыслу.
   ====================================================== */

@media (min-width: 700px) and (max-width: 920px) and (orientation: portrait) {
  body {
    overflow-x: hidden;
  }

  main::before {
    display: none !important;
  }

  .hero.section-dark {
    background:
      radial-gradient(circle at 68% 26%, rgba(217,185,135,.13), transparent 36%),
      linear-gradient(135deg, #0a0d13, #151922 58%, #0b0f16);
  }

  .hero {
    min-height: 100svh;
    padding: 108px clamp(28px, 6vw, 54px) 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    gap: 0;
    overflow: hidden;
  }

  .hero-text,
  .lead,
  .micro-note {
    margin-inline: auto;
  }

  h1 {
    max-width: 640px;
    margin-inline: auto;
    font-size: clamp(40px, 6.1vw, 54px);
    line-height: 1.04;
  }

  .lead {
    max-width: 600px;
    margin-top: 14px;
    font-size: clamp(16px, 2.1vw, 19px);
    line-height: 1.38;
  }

  .hero-actions {
    justify-content: center;
    margin: 20px auto 12px;
    gap: 12px;
  }

  .hero-actions .button {
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 12px;
    font-size: 13.5px;
  }

  .micro-note {
    max-width: 600px;
    font-size: 13px;
    line-height: 1.38;
  }

  .hero-art {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: clamp(330px, 38vh, 430px);
    margin-top: 6px;
    z-index: 1;
  }

  .hero-desktop-portrait {
    display: none !important;
  }

  .hero .galatea-orbit-stage {
    display: block !important;
    width: min(560px, 94vw);
    max-width: 100%;
    transform: translateY(-4%);
  }

  .hero .galatea-orbit-stage .orbit-label {
    font-size: clamp(12.5px, 1.85vw, 16px);
  }

  .hero-trust-compact {
    display: none !important;
  }

  .trust {
    display: none !important;
  }

  .fit {
    padding-top: 56px;
  }
}

/* Более узкие portrait-планшеты / большие телефоны в эмуляторах:
   чуть компактнее орбита и заголовок. */
@media (min-width: 700px) and (max-width: 780px) and (orientation: portrait) {
  .hero {
    padding-top: 96px;
  }

  h1 {
    font-size: clamp(36px, 6.5vw, 48px);
    max-width: 560px;
  }

  .lead {
    max-width: 540px;
    font-size: 16px;
  }

  .hero .galatea-orbit-stage {
    width: min(500px, 94vw);
  }
}

/* v30: mobile spacing fix for the process note.
   integration.css is loaded last, so this overrides the earlier pearl-section compression. */
@media (max-width: 820px) {
  .process .process-note {
    margin: 22px auto 0 !important;
  }
}

/* ======================================================
   v35 legal minimum pages
   Русские юридические страницы без немецкого Impressum.
   ====================================================== */
.legal-main{
  min-height:70vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(217,185,135,.13), transparent 34%),
    linear-gradient(180deg, var(--graphite) 0%, #11141c 44%, var(--cream) 44%, var(--cream) 100%);
}

.legal-hero{
  padding:132px clamp(20px,7vw,110px) 58px;
  text-align:center;
}

.legal-hero h1{
  margin:8px auto 18px;
  max-width:850px;
  font-size:clamp(42px,7vw,78px);
}

.legal-hero .lead{
  max-width:760px;
  margin:0 auto;
  color:rgba(255,250,242,.78);
}

.legal-content{
  padding:54px clamp(20px,7vw,110px) 76px;
}

.legal-content::before,
.legal-content::after{
  display:none;
}

.legal-card{
  max-width:920px;
  margin:0 auto 18px;
  padding:24px 26px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(198,155,92,.18);
  color:var(--ink);
  box-shadow:0 18px 46px rgba(52,40,24,.07);
  font-family:Arial,sans-serif;
}

.legal-card h2{
  margin:0 0 10px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:28px;
  color:#33271f;
}

.legal-card p{
  margin:8px 0;
  color:#5b5148;
}

.legal-card strong{
  color:#3b2f26;
}

.legal-placeholder-card{
  background:linear-gradient(135deg, rgba(255,250,242,.9), rgba(232,214,187,.74));
  border-color:rgba(198,155,92,.34);
}

.legal-warning-card{
  border-color:rgba(176,110,74,.34);
  background:linear-gradient(135deg, rgba(255,250,242,.88), rgba(244,222,206,.72));
}

.legal-data-list{
  margin:14px 0 0;
  display:grid;
  gap:9px;
}

.legal-data-list div{
  display:grid;
  grid-template-columns:minmax(150px, 230px) 1fr;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(198,155,92,.18);
}

.legal-data-list dt{
  font-weight:700;
  color:#3f332a;
}

.legal-data-list dd{
  margin:0;
  color:#6a5d52;
}

.legal-back{
  margin:28px auto 0;
  max-width:920px;
  text-align:center;
}

.footer nav a:hover{
  color:var(--champagne);
}

@media (max-width:760px){
  .legal-hero{
    padding:112px 20px 42px;
  }
  .legal-content{
    padding:36px 18px 58px;
  }
  .legal-card{
    padding:21px 19px;
    border-radius:20px;
  }
  .legal-card h2{
    font-size:24px;
  }
  .legal-data-list div{
    grid-template-columns:1fr;
    gap:3px;
  }
  .footer nav{
    gap:12px 16px;
  }
}

/* ======================================================
   v36 legal pages desktop background fix
   Юридические страницы не должны наследовать общий desktop
   hero/trust фон с девушкой из главной страницы.
   ====================================================== */
.legal-main::before,
.legal-main::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

.legal-main{
  position:relative;
  overflow-x:hidden;
}

.legal-main > *{
  position:relative;
  z-index:1;
}

@media (min-width:761px){
  .legal-main{
    background:
      radial-gradient(circle at 18% 0%, rgba(217,185,135,.12), transparent 32%),
      linear-gradient(180deg, #0a0d13 0%, #11141c 330px, var(--cream) 330px, var(--cream) 100%) !important;
  }

  .legal-hero.section-dark{
    background:
      radial-gradient(circle at 50% 0%, rgba(217,185,135,.12), transparent 34%),
      linear-gradient(135deg, #0a0d13, #151922 62%, #0b0f16) !important;
  }
}


/* ======================================================
   v37 legal pages visual tuning
   Компактнее legal-hero, меньше заголовки, responsible-блок вниз
   и без временного публичного email.
   ====================================================== */
.legal-hero{
  padding:106px clamp(20px,7vw,110px) 34px !important;
}

.legal-hero h1{
  margin:7px auto 12px !important;
  max-width:760px !important;
  font-size:clamp(34px,4.25vw,52px) !important;
  line-height:1.08 !important;
  letter-spacing:-.03em !important;
}

.legal-hero .lead{
  max-width:680px !important;
  font-size:16px !important;
  line-height:1.45 !important;
}

.legal-content{
  padding:38px clamp(20px,7vw,110px) 68px !important;
}

.legal-card{
  max-width:880px !important;
  padding:21px 24px !important;
  margin-bottom:16px !important;
  border-radius:22px !important;
}

.legal-card h2{
  font-size:25px !important;
  line-height:1.16 !important;
  margin-bottom:8px !important;
}

.legal-card p{
  font-size:15px !important;
  line-height:1.55 !important;
}

.legal-responsible-card{
  margin-top:28px !important;
  opacity:.86;
  box-shadow:0 12px 32px rgba(52,40,24,.045) !important;
}

.legal-responsible-card h2{
  font-size:22px !important;
}

.legal-responsible-card .legal-data-list{
  font-size:14px;
}

@media (min-width:761px){
  .legal-main{
    background:
      radial-gradient(circle at 18% 0%, rgba(217,185,135,.10), transparent 28%),
      linear-gradient(180deg, #0a0d13 0%, #11141c 250px, var(--cream) 250px, var(--cream) 100%) !important;
  }

  .legal-hero.section-dark{
    min-height:auto !important;
  }
}

@media (max-width:760px){
  .legal-hero{
    padding:92px 20px 30px !important;
  }

  .legal-hero h1{
    font-size:clamp(30px,8vw,38px) !important;
  }

  .legal-content{
    padding:30px 18px 54px !important;
  }

  .legal-card{
    padding:19px 18px !important;
  }
}


/* ======================================================
   v38 legal lead no orphan word fix
   Убирает одинокий перенос слова «лет» в подзаголовке 18+.
   ====================================================== */
.legal-hero .lead{
  max-width:820px !important;
}

@media (max-width:760px){
  .legal-hero .lead{
    max-width:100% !important;
  }
}

/* ======================================================
   Galatea brand header logo (v40)
   Desktop uses full horizontal lockup; mobile uses stacked wordmark.
   ====================================================== */
.site-header .header-logo {
  flex: 0 0 auto;
  width: clamp(184px, 18vw, 270px);
  min-width: 0;
  display: block;
  line-height: 0;
}

.site-header .header-logo picture,
.site-header .header-logo-img {
  display: block;
}

.site-header .header-logo-img {
  width: 100%;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 1000px) {
  .site-header .header-logo {
    width: 190px;
  }

  .site-header .header-logo-img {
    max-height: 58px;
  }
}

@media (max-width: 760px) {
  .site-header .header-logo {
    width: clamp(142px, 42vw, 172px);
  }

  .site-header .header-logo-img {
    max-height: 58px;
  }
}

@media (max-width: 380px) {
  .site-header .header-logo {
    width: 142px;
  }
}



/* ======================================================
   v42 — contact/live chat privacy update
   ====================================================== */
.contact-buttons-v42{
  grid-template-columns:repeat(3,minmax(150px,1fr));
}
.contact-button.chat{
  background:linear-gradient(180deg,rgba(245,229,201,.92),rgba(198,155,92,.78));
  border-color:rgba(198,155,92,.42);
  box-shadow:0 18px 45px rgba(198,155,92,.14);
}
.contact-button.chat::after{
  content:"без WhatsApp и email";
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  color:rgba(20,18,23,.68);
}
.contact-privacy-note{
  grid-column:1 / -1;
  display:grid;
  gap:8px;
  margin-top:2px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(198,155,92,.22);
  color:var(--muted);
  font-family:Arial,sans-serif;
  font-size:13px;
  line-height:1.5;
}
.contact-privacy-note p{
  margin:0;
}
.chat-helper{
  background:rgba(245,229,201,.58);
  border-color:rgba(198,155,92,.28);
}
@media (max-width: 760px){
  .contact-buttons-v42{
    grid-template-columns:1fr;
  }
  .contact-privacy-note{
    font-size:12.5px;
    line-height:1.45;
    padding:12px 13px;
  }
}