/* =====================================================================
   RETACH — SHARED BASE (global, no section IDs)
   Источник: главная страница (index (88).html, calc (99).html)
   ===================================================================== */

/* ===== 1) Бренд-токены и базовые цвета ================================= */
:root{
  /* бренд */
  --brand-1:#7FB8FF;    /* голубой */
  --brand-2:#AFA4FF;    /* лиловый */
  --brand-3:#FF97AA;    /* коралл/розовый */

  /* базовые */
  --ink:#1f2429;
  --muted:#4b535a;
  --paper:#fff;
  --bg:#f4f2ef;
}

/* утилиты */
.is-hidden{ display:none !important; }
.kpi-green{ color:#12B76A; font-weight:800; }  /* акцент как на главной */  /* из главной */ /* :contentReference[oaicite:1]{index=1} */

/* ===== 2) Типографика заголовков с фирменным кружком =================== */
/* Взято из блока #retach-logo-headings-hard: заголовки h2/h3 + .h2/.h3
   — ровно как на главной, без изменений. */  /* :contentReference[oaicite:2]{index=2} */
:root{
  --logo-ink:#2B3037;
  --logo-grad:linear-gradient(135deg,#7FB8FF 0%,#AFA4FF 45%,#FF97AA 100%);
}
:where(h2,h3,.h2,.h3){
  font-family:Manrope,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial!important;
  font-weight:800!important;
  letter-spacing:-.015em!important;
  color:var(--logo-ink)!important;
  display:inline-flex!important; align-items:center!important; gap:10px!important;
  line-height:1.15!important;
  background:none!important; -webkit-background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important; -webkit-text-stroke:0!important;
}
:where(h2,h3,.h2,.h3)::before{
  content:""; flex:0 0 auto; border-radius:50%;
  background:var(--logo-grad);
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 2px 8px rgba(0,0,0,.10);
  transform:translateY(2px);
  width:18px; height:18px;
}
h3::before,.h3::before{ width:14px; height:14px }
:where(h2,h3,.h2,.h3) :where(span,strong,em,mark,small,code,a,*) {
  color:inherit!important; background:none!important; -webkit-background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important; background-image:none!important;
}
:where(h2,h3,.h2,.h3) :where(.grad,.grad-text,[style*="background"]){
  color:inherit!important; background:none!important; background-image:none!important;
  -webkit-background-clip:initial!important; -webkit-text-fill-color:currentColor!important;
}
@media (max-width:640px){
  :where(h2,h3,.h2,.h3){ gap:8px!important }
  :where(h2,.h2)::before{ width:16px; height:16px }
  :where(h3,.h3)::before{ width:12px; height:12px }
}

/* мелкая «бровка» над заголовком — как на главной */  /* :contentReference[oaicite:3]{index=3} */
.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-size:12px; opacity:.7; margin:0 0 8px; }

/* ===== 3) Кнопки-ВАРИАНТЫ (общие) ===================================== */
/* Базовый .btn у вас уже есть в /styles.css.
   Ниже — только вариации, снятые из главной (цвет/фон/радиусы). */  /* :contentReference[oaicite:4]{index=4} */
.btn-primary{ background:linear-gradient(90deg,#7a8cff,#e08bff); color:#fff; }
.btn-ghost{ background:#f3f4f6; color:#111; }
.btn.success{ background:#12B76A; color:#fff; border:1px solid #0E8F55; }
.btn.success:hover{ filter:brightness(.95); }  /* :contentReference[oaicite:5]{index=5} */

/* ===== 4) Иконки в шапке (телефон, Телеграм) =========================== */
/* Контейнер для иконок в навигации — как на главной */  /* :contentReference[oaicite:6]{index=6} */
.nav-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:8px; margin-left:8px;
  border:0; background:transparent; border-radius:12px; line-height:1;
  box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.nav-icon img{
  display:block; width:24px !important; height:24px !important; aspect-ratio:1/1;
  object-fit:contain; border-radius:0 !important; transform:none !important;
}
.nav-icon.cb-call{ border-radius:50%; }          /* звонок */
.nav-icon:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.16); }
.nav-icon:active{ transform:translateY(0) scale(.98); }

/* Телеграм-иконка — без рамок/подчеркиваний на десктопе */              /* :contentReference[oaicite:7]{index=7} */
.nav-icon.nav-tg{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; text-decoration:none !important; }
.nav-icon.nav-tg:hover,
.nav-icon.nav-tg:active{ transform:none; box-shadow:none !important; text-decoration:none !important; }
.nav-icon.nav-tg:focus-visible{ outline:2px solid rgba(79,124,255,.35); outline-offset:2px; }

/* Мобильная унификация размеров иконок/гамбургера */                     /* :contentReference[oaicite:8]{index=8} */
@media (max-width:980px){
  .nav-icon,
  .mnav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    border:0; border-radius:12px !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 4px 16px rgba(0,0,0,.12) !important;
    backdrop-filter:saturate(110%) blur(6px);
    margin-left:8px; transition:transform .15s, box-shadow .15s;
  }
  .nav-icon img{ width:24px !important; height:24px !important; display:block }
  #mnavLottie{ width:24px !important; height:24px !important }
  #mnavLottie svg{ width:100%; height:100%; display:block }
  .nav-icon.nav-tg{ text-decoration:none !important; background:rgba(255,255,255,.72) !important; box-shadow:0 4px 16px rgba(0,0,0,.12) !important; border-radius:12px !important; }
  .nav-icon.nav-tg:hover{ text-decoration:none !important }
  .nav-icon.cb-call{ border-radius:12px !important; }
}

/* Лого в шапке крупнее на мобиле */                                       /* :contentReference[oaicite:9]{index=9} */
@media (max-width:980px){
  .nav .brand img{ height:56px !important; width:auto !important; display:block; }
}
@media (max-width:740px){
  .nav .brand img{ height:64px !important; }
}

/* ===== 5) Мобильное выдвижное меню (бургер / drawer) =================== */
/* Структура: .mnav-toggle — кнопка; .mnav-drawer — оверлей; .mnav-panel — панель. */  /* :contentReference[oaicite:10]{index=10} */
.mnav-toggle{ display:none; }
@media (max-width:980px){
  .mnav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; margin-left:8px;
    border:0; border-radius:12px; background:rgba(255,255,255,.72);
    box-shadow:0 4px 16px rgba(0,0,0,.12); backdrop-filter:saturate(110%) blur(6px);
    cursor:pointer; position:relative; z-index:1040;
  }
  .mnav-toggle:active{ transform:scale(.98); }
}

.mnav-drawer[hidden]{ display:none !important; }
.mnav-drawer{ position:fixed; inset:0; z-index:1035; }
.mnav-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:#fff; box-shadow:-24px 0 64px rgba(0,0,0,.24);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column; padding:14px 14px calc(16px + env(safe-area-inset-bottom));
}
.mnav-drawer.on .mnav-backdrop{ opacity:1; pointer-events:auto; }
.mnav-drawer.on .mnav-panel{ transform:translateX(0); }

.mnav-close{
  align-self:flex-end; border:0; background:transparent; font-size:28px; line-height:1;
  width:40px; height:40px; border-radius:10px; cursor:pointer;
}
.mnav-list{ list-style:none; margin:8px 0 0; padding:0; }
.mnav-list li{ margin:2px 0; }
.mnav-list a{
  display:block; padding:12px 14px; border-radius:12px; color:#111; text-decoration:none;
}
.mnav-list a:active{ background:#f3f4f6; }
.mnav-footer{ margin-top:auto; display:flex; gap:8px; }
.mnav-footer .btn{ flex:1 1 auto; padding:12px 14px; border-radius:12px; text-align:center; text-decoration:none; }
body.mnav-lock{ overflow:hidden; }
#mnavLottie{ width:26px; height:26px; }
#mnavLottie svg{ width:100%; height:100%; display:block; }                 /* :contentReference[oaicite:11]{index=11} */

/* ===== 6) Поповер (USP/подсказки) ====================================== */
/* Базовый поповер #usp-popover — размеры, фон, стрелочка, CTA. */         /* :contentReference[oaicite:12]{index=12} */
#usp-popover{
  position: fixed; z-index: 9999;
  min-width: 280px; max-width: 360px;
  padding: 14px 14px 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  opacity: 0; transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#usp-popover.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
#usp-popover .title{ margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.01em; }
#usp-popover .desc{ margin:0 0 10px; font-size:14px; line-height:1.45; opacity:.9; }
#usp-popover .cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px;
  background: linear-gradient(135deg,#8ac6ff,#5b8cff);
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.12);
}
#usp-popover .cta:focus{ outline:2px solid #1112; outline-offset:2px; }
/* стрелочка */
#usp-popover::after{
  content:""; position:absolute; width:10px; height:10px;
  background:#fff; transform: rotate(45deg); box-shadow:-2px 2px 6px rgba(0,0,0,.08);
}
#usp-popover[data-pos="right"]::after{ left:-5px; top:calc(50% - 5px); }
#usp-popover[data-pos="left"]::after{ right:-5px; top:calc(50% - 5px); }
/* триггеры по фокусу */
.usp-trigger:focus{ outline:2px solid #1112; outline-offset:2px; border-radius:6px; }

/* ===== 7) Модалка «обратный звонок» (callback) ========================= */
/* То, что открывается по [data-cb-open] в шапке. */                        /* :contentReference[oaicite:13]{index=13} */
.cb-modal[hidden]{ display:none !important; }
.cb-modal{ position:fixed; inset:0; z-index:9999; }
.cb-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.cb-dialog{
  position:relative; margin:6vh auto; width:min(560px,92vw);
  background:#fff; border-radius:16px; padding:20px 20px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.cb-x{ position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:24px; cursor:pointer; }
.cb-row{ margin:10px 0; }
.cb-row input[type="tel"]{
  width:100%; padding:10px 12px; border:1px solid #e6e7eb; border-radius:10px;
}
/* согласие + ссылки на политику */
.cb-consent{
  display:inline-flex; align-items:center; gap:10px; margin:10px 0 8px;
  font-size:.95rem; line-height:1.35; user-select:none;
}
.cb-consent input{ flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:#4f7cff; }
.cb-consent a{ color:#1f58ff; text-decoration:underline; text-underline-offset:2px; }
.cb-consent a:hover{ text-decoration-thickness:2px; }

.cb-actions{ display:flex; gap:8px; margin-top:8px; }
.cb-submit{ background:#4f7cff; color:#fff; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; }
.cb-cancel{ background:#f3f4f6; border:0; border-radius:12px; padding:10px 14px; cursor:pointer; }
.cb-msg{ min-height:1.2em; margin:8px 2px 0; opacity:.9; }
.cb-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } /* honeypot */
@media (max-width:740px){ .cb-dialog{ margin:8vh auto; } }

/* ===== 8) Вспомогательные подсказки (hint-pop) ========================= */
/* Небольшой тёмный поповер-подсказка. */                                    /* :contentReference[oaicite:14]{index=14} */
.hint-pop{
  position: fixed; z-index:60; max-width:280px; pointer-events:none;
  background: rgba(22,27,34,.96); color:#fff; border-radius:12px;
  padding:10px 12px; font-size:12px; line-height:1.45; box-shadow: var(--shadow-m);
  opacity:0; transform: translateY(4px);
  transition: opacity 150ms var(--easing-smooth), transform 150ms var(--easing-smooth);
}
.hint-pop.on{ opacity:1; transform: translateY(0); }
.hint-pop .arrow{
  position:absolute; width:10px; height:10px; transform: rotate(45deg);
  background: inherit; left:16px; top:-5px;
}
@media (prefers-reduced-motion: reduce){ .hint-pop{ transition:none; } }

/* ===== 9) Футер: левый отступ и логотип ================================ */
/* Ровно как на главной, чтобы на всех страницах футер выглядел одинаково. */ /* :contentReference[oaicite:15]{index=15} */
.footer{ padding-left: clamp(16px, 4vw, 56px); }
.footer .footer-logo{
  display:inline-flex; align-items:center; margin-bottom:10px; text-decoration:none;
}
.footer .footer-logo img{
  display:block; height:44px; width:auto; image-rendering:-webkit-optimize-contrast;
}
@media (max-width:740px){
  .footer{ padding-left:16px; }
  .footer .footer-logo img{ height:36px; }
}
/* === RETACH Buttons — фирменные кнопки (универсально для всех страниц) === */
:root{
  --btn-radius: 999px;
  --btn-shadow-s: 0 8px 24px rgba(0,0,0,.10);
  --btn-shadow-m: 0 12px 28px rgba(0,0,0,.14);
  --brand1: #7a8cff;          /* как в демо */
  --brand2: #e08bff;          /* как в демо */
}

/* базовая кнопка */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; line-height:1; font-weight:700;
  border:1px solid var(--border, rgba(0,0,0,.08));
  border-radius:var(--btn-radius);
  background:#fff; color:#111;
  box-shadow:var(--btn-shadow-s);
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--btn-shadow-m); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(122,140,255,.28), var(--btn-shadow-m); }

/* Премиальная (градиентная) — поддерживаем ОБЕ записи: .btn--primary и .btn-primary */
.btn--primary, .btn-primary{
  color:#fff;
  border-color:transparent;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
}
.btn--primary:hover, .btn-primary:hover{ filter:saturate(1.04) brightness(1.02); }
.btn--primary:active, .btn-primary:active{ filter:saturate(1.08) brightness(.98); }

/* Вторичная (призрачная) — поддерживаем .btn--ghost и .btn-ghost */
.btn--ghost, .btn-ghost{
  background:#fff; color:#111; border-color:var(--border, rgba(0,0,0,.10));
}

/* Дополнительно: контурная (если понадобится) */
.btn--outline{
  background:transparent; color:var(--brand1);
  border-color: var(--brand1);
}

/* размеры и служебные */
.btn-lg{ padding:14px 18px; font-size:1.02rem; }
.btn-sm{ padding:8px 12px; font-size:.92rem; }
.btn--block{ display:flex; width:100%; }
.btn > img{ width:20px; height:20px; display:block; }
/* === Shimmer + Sparkle для премиальных кнопок === */
.btn--primary, .btn-primary{
  position: relative;
  overflow: hidden;          /* обрезаем блик по радиусу кнопки */
  isolation: isolate;        /* корректные слои поверх градиента */
}

/* Диагональный «блик», который пролетает при ховере/фокусе */
.btn--primary::before,
.btn-primary::before{
  content:"";
  position:absolute;
  top:-40%; bottom:-40%;
  width:40%;
  left:-120%;
  transform: rotate(20deg);
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.0) 32%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.0) 68%,
    rgba(255,255,255,0) 100%
  );
  pointer-events:none;
  z-index:2;
}

/* Маленькая «искрa», летящая вслед за бликом */
.btn--primary::after,
.btn-primary::after{
  content:"";
  position:absolute;
  top:50%;
  left:-8%;
  width:16px; height:16px;
  transform: translate(-50%,-50%) scale(.7) rotate(12deg);
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0 38%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 65% 35%, rgba(255,255,255,.95) 0 2px, rgba(255,255,255,0) 3px);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.85));
  opacity:0;
  pointer-events:none;
  z-index:2;
}

/* Запуск анимации */
.btn--primary:hover::before,
.btn--primary:focus-visible::before,
.btn-primary:hover::before,
.btn-primary:focus-visible::before{
  animation: btnShimmer 1.15s cubic-bezier(.22,.65,.2,1);
}
.btn--primary:hover::after,
.btn--primary:focus-visible::after,
.btn-primary:hover::after,
.btn-primary:focus-visible::after{
  animation: btnSpark 1.15s cubic-bezier(.22,.65,.2,1);
  animation-delay: .05s; /* искра немного отстаёт от блика */
}

/* Кадры */
@keyframes btnShimmer{
  from{ left:-120%; }
  to{   left:120%;  }
}
@keyframes btnSpark{
  0%   { left:-8%;  opacity:0;   transform: translate(-50%,-50%) scale(.7) rotate(12deg); }
  20%  { opacity:1; }
  50%  { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { left:108%; opacity:0;   transform: translate(-50%,-50%) scale(.85) rotate(-8deg); }
}

/* Уважение к reduce-motion: показываем без анимации */
@media (prefers-reduced-motion: reduce){
  .btn--primary::before,
  .btn-primary::before,
  .btn--primary::after,
  .btn-primary::after{ animation:none !important; }
}