/* =========================================
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
   ========================================= */
:root{
  --bg-color:#f7f9fb;
  --text-color:#3d2617;
  --container:1180px;
  --header-h:90px;                 /* высота шапки (тонкая строка) */
  --man-pos-x:75%;
  --bg-pos-x:60%;
  --safe-right:clamp(220px,30vw,520px);
}

/* =========================================
   БАЗА
   ========================================= */
*{
  box-sizing:border-box;
}
html,body{
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
}
body{
  font-family:"Lora", Georgia, "Times New Roman", serif;
  font-optical-sizing:auto;
  color:var(--text-color);
  background:var(--bg-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================================
   ШАПКА САЙТА (site-header)
   — тонкая строка, центрированный текст
   ========================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.site-header .container{
  width:min(100% - 32px, var(--container));
  margin:0 auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.site-header .logo img{
  height:80px;
  width:auto;
  display:block;
  opacity:.95;
  
}
.clinic-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  margin:0;
  font-weight:700;
  letter-spacing:.2px;
  color:#3d2617;                   /* цвет надписи в шапке */
  font-size:clamp(20px, 2.2vw, 18px);
  text-align:center;
  white-space:nowrap;
}
@media (max-width:480px){
  .clinic-center{
    white-space:normal;
    line-height:1.2;
    padding:0 52px;
  }
}
/* прячем любые кнопки внутри шапки (если вдруг попадут) */
.site-header .btn{
  display:none !important;
}

/* =========================================
   ФОН (page-bg) + ДЕКОРАТИВНЫЕ ПОЛОСЫ
   ========================================= */
.page-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
}
.page-bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-bg .bg-base{
  z-index:1;
  object-position:var(--bg-pos-x) center;
}
.page-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(245,244,244,.52);
  z-index:2;
  pointer-events:none;
}
.page-bg .bg-man{
  z-index:2;
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease, transform .9s ease;
  will-change:opacity,transform;
  object-position:var(--man-pos-x) center;
}
.page-bg .bg-man.is-shown{
  opacity:1;
  transform:none;
}
@media (max-width:900px){
  .page-bg .bg-base{
    object-position:right 35%;
  }
  .page-bg .bg-man{
    object-position:right 35%;
    transform:translateY(30px) scale(1.06);
  }
}
@media (prefers-reduced-motion:reduce){
  .page-bg .bg-man{
    transition:none;
    opacity:1;
    transform:none;
  }
}

/* — Левые декоративные полосы */
.bg-stripes{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:min(32vw,460px);
  height:100%;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .6s ease;
  mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%);
}
@media (max-width:900px){
  .bg-stripes{
    width:min(55vw,420px);
  }
}
@media (prefers-reduced-motion:reduce){
  .bg-stripes{
    display:none!important;
  }
}
@media (min-width:901px){
  .bg-stripes{
    opacity:1;
    background:
      linear-gradient(90deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%),
      repeating-linear-gradient(90deg,rgba(17,17,17,.04) 0 1px, transparent 1px 15px);
    filter:saturate(115%) blur(.2px);
  }
}

/* =========================================
   КНОПКИ
   ========================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 32px;
  border-radius:12px 4px 12px 4px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  letter-spacing:.2px;
  transition:all .25s ease;
  user-select:none;
  cursor:pointer;
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(17,17,17,.2),0 0 0 6px rgba(17,17,17,.08);
}
.btn-primary{
  background:#ff0101;
  color:#ffffff;
  border:2px solid #ffffff;
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{
  background:#3d2617;
  color:#fff;
}
.btn-glass{
  position:absolute;
  top:0;
  left:-60%;
  width:40%;
  height:100%;
  background:linear-gradient(120deg,rgba(248, 248, 248, 0.459) 0%,rgba(0,0,0,.16) 50%,rgba(0,0,0,0) 100%);
  transform:skewX(-20deg);
  pointer-events:none;
  will-change:left;
}
@media (prefers-reduced-motion:reduce){
  .btn-glass{
    display:none;
  }
}

/* =========================================
   HERO-ЗОНА (общая сетка)
   ========================================= */
.hero-zone{
  min-height:calc(100dvh - var(--header-h));
  display:grid;
  align-items:center;
  padding-block:clamp(32px,6vh,72px);
  position:relative;
  overflow:hidden;
  grid-template-columns:1.6fr 0.4fr;
}
.hero-zone > *{
  width:min(100% - 32px,var(--container));
  margin-inline:auto;
}
@supports not (width:1cqi){
  .hero-zone{
    grid-template-columns:1fr 45%;
  }
}
@media (max-width:900px){
  .hero-zone{
    grid-template-columns:1fr;
    padding-block:28px;
    min-height:100dvh;
  }
}

/* =========================================
   МУЖЧИНА ДО/ПОСЛЕ (man-box)
   ========================================= */
.man-box{
  position:fixed;
  right:0;
  bottom:0;
  width:99%;
  height:100%;
  pointer-events:none;
  z-index:3;
}
.man{
  position:absolute;
  right:0;
  bottom:0;
  height:100%;
  width:auto;
  object-fit:contain;
  transform-origin:right bottom;
  opacity:0;
  transition:opacity .6s ease;
  transform:translate(var(--dx,0),var(--dy,0)) scale(var(--scale,1));
}
.man--hair{
  opacity:0;
  --dx:8px;
  --dy:40px;
  --scale:0.80;   /* уменьшено до ~80% */
}
.man--bald{
  opacity:1;
  --dx:6px;
  --dy:66px;
  --scale:0.78;   /* уменьшено до ~78% */
}
body.is-bald .man--hair{
  opacity:1;
}
body.is-bald .man--bald{
  opacity:0;
}
@media (max-width:900px){
  .man--bald{
    --dx:-4px;
    --dy:1px;
    --scale:1.015;
  }
  .man--hair{
    --dx:0;
    --dy:0;
    --scale:1;
  }
}
@media (min-width:1366px) and (max-width:1920px){
  .man--bald{
    --dx:34px;
    --scale:.975;
  }
  .man--hair{
    --dx:36px;
    --scale:.975;
  }
}

/* =========================================
   FX-КОНТЕЙНЕР + ПАРАЛЛАКС
   ========================================= */
.hero-content{
  position:relative;
  z-index:1;
  overflow:visible;
}
#graftsFx,
#trailFx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.hover-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,40%),rgba(255,255,255,.45),rgba(255,255,255,0) 60%);
  opacity:0;
  transition:opacity .25s ease;
}
.parallax-card{
  will-change:transform;
  transform-style:preserve-3d;
}
.parallax-man{
  will-change:transform;
}
@media (min-width:901px){
  .hero-content:hover .hover-glow{
    opacity:1;
  }
}
@media (prefers-reduced-motion:reduce){
  #graftsFx,
  #trailFx,
  .hover-glow{
    display:none!important;
  }
}

/* =========================================
   ВНУТРЕННЯЯ СЕТКА HERO (spread)
   ========================================= */
.hero-content--spread{
  position:relative;
  width:min(100% - 32px,var(--container));
  margin-inline:auto;
  padding-top:1px;
  padding-right:calc(var(--safe-right) + 4vw);
  display:grid;
  row-gap:16px;
  align-content:start;
  justify-items:center;
  text-align:center;
  transform:translateX(10%); /* смещение вправо на 3% ширины окна */
}

/* =========================================
   ТЕКСТЫ В HERO
   ========================================= */
.hero-eyebrow{
  margin:0;
  font-weight:700;
  letter-spacing:.28px;
  text-transform:uppercase;
  color:#4a4a4a;
  opacity:.92;
}
.hero-title--spread{
  margin:0;
  max-width:1120px;
  font-weight:700;
  font-optical-sizing:auto;
  font-size:clamp(40px,5vw,72px);
  line-height:1.08;
  letter-spacing:.012em;
  color:#3d2617;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  text-align:center;
  text-wrap:balance;
}
.hero-title--spread .line{
  display:block;
}
.hero-title--spread .line--1{
  letter-spacing:.018em;
}
.hero-title--spread .line--2{
  margin-top:4px;
  letter-spacing:.01em;
}
.hero-subtitle{
  margin:6px 0 0;
  max-width:1000px;
  font-family:"Lora", Georgia, "Times New Roman", serif;
  font-weight:600;
  font-size:clamp(18px,1.9vw,24px);
  line-height:1.42;
  letter-spacing:.005em;
  color:#1e1e1e;
  opacity:.95;
  text-wrap:balance;
}
.hero-subtitle--spread{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* =========================================
   ЧИПСЫ (преимущества)
   ========================================= */
/* = Chips = */
.chips{
  display:grid;
  grid-template-columns:repeat(3, auto); /* 3 колонки сверху */
  justify-content:center;                /* центрируем сетку */
  gap:12px 30px;                         /* отступы между чипсами */
  margin:14px 0 0;
  padding:0;
  width:100%;
}

.chips li{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  background:#3d2617;
  border:1px solid #3d2617;
  border-radius:12px;
  transition:background .25s ease, transform .2s ease;
}
.chips li:hover{
  background:#503320;
  transform:translateY(-1px);
}

/* Мобилка — в колонку */
@media (max-width:900px){
  .chips{
    display:grid;
    grid-template-columns:1fr;  /* одна колонка */
    gap:10px;
    margin-top:12px;
  }
  .chips li{
    width:100%;
    justify-content:center;
    font-size:14px;
    padding:10px 14px;
    border-radius:10px;
    transform:none;
  }
}


/* =========================================
   CTA (общий)
   ========================================= */
.cta-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  width:min(100%,720px);
}
.cta-row .btn.btn-primary{
  min-width:0;
  height:50px;
  padding:0 28px;
  font-size:16px;
}
.cta-row .hero-cta-note{
  margin:0;
  font-size:13.5px;
  font-weight:600;
  color:#3d2617;
  text-align:center;
}

/* =========================================
   МОБИЛКА (общий пакет)
   ========================================= */
@media (max-width:900px){
  :root{
    --safe-right:0;
    --man-pos-x:68%;
    --bg-pos-x:60%;
  }
  .hero-content--spread{
    padding:24px 18px 20px;
    border-radius:16px;
    background:rgba(255,255,255,.62);
    backdrop-filter:blur(10px) saturate(160%);
    -webkit-backdrop-filter:blur(10px) saturate(160%);
    row-gap:12px;
    justify-items:center;
    text-align:center;
    overflow:visible;
  }
  .price-banner{
    width:100%;
    gap:6px;
    margin-bottom:6px;
  }
  .price-banner__main{
    padding:12px 14px;
    border-radius:14px;
  }
  .price-banner__value{
    font-size:clamp(26px,7.2vw,34px);
  }
  .price-banner__rub{
    font-size:clamp(18px,5.5vw,24px);
    translate:0 1px;
  }
  .price-banner__label{
    padding:6px 10px;
    font-size:12px;
  }
  .price-banner__note{
    padding:6px 10px;
    font-size:12px;
  }
  .hero-eyebrow{
    margin-top:2px;
    font-size:12px;
    color:#6b6b6b;
  }
  .page-bg .bg-man{
    object-position:var(--man-pos-x) 28%;
    transform:translateY(0) scale(1.02);
  }
  .page-bg::after{
    background:rgba(245,244,244,.62);
  }
  .bg-stripes{
    display:none!important;
  }
  .hero-subtitle{
    max-width:none;
    font-size:clamp(16px,4.4vw,18px);
    line-height:1.46;
    color:#2a2a2a;
  }
  .hero-title--spread{
    max-width:none;
    font-size:clamp(26px,7.8vw,34px);
    line-height:1.12;
    letter-spacing:.008em;
  }
  .hero-title--spread .line--1{
    letter-spacing:.012em;
  }
  .hero-title--spread .line--2{
    margin-top:2px;
    letter-spacing:.006em;
  }
  .chips{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    overflow-x:visible;
    margin-top:12px;
  }
  .chips li{
    width:100%;
    justify-content:center;
    font-size:14px;
    padding:10px 14px;
    border-radius:10px;
    transform:none;
  }
  /* MOBILE: price + cta одной колонкой */
  .price-and-cta{
    display:flex;
    grid-template-columns:1fr;
    gap:14px;
    width:100%;
    margin:16px 0 0;
  }
  .price-and-cta .price-banner{
    margin:0 auto;
    width:100%;
  }
  .price-and-cta .cta-col{
    margin:0 auto;
    width:100%;
  }
  .price-and-cta .cta-col .btn{
    width:100%;
    height:50px;
    font-size:16px;
  }
}

/* =========================================
   PRICE + CTA (десктоп)
   ========================================= */
@media (min-width:901px){
  .price-and-cta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:start;
    width:min(100%,1040px);
    margin:22px auto 0;
  }
  .price-and-cta .price-banner{
    display:grid;
    grid-template-rows:auto 64px; /* лейбл + блок */
    justify-items:center;
    text-align:center;
    gap:8px;
  }
  .price-and-cta .cta-col{
    display:grid;
    grid-template-rows:auto 64px; /* лейбл + кнопка */
    justify-items:center;
    text-align:center;
    gap:8px;
  }
  .price-and-cta .price-banner__label{
    margin-bottom:8px;
    align-self:center;
  }
  .cta-label{
    margin:0;
    font-weight:700;
    letter-spacing:.28px;
    text-transform:uppercase;
    color:#4a4a4a;
    opacity:.92;
  }
  .price-and-cta .price-banner__main{
    height:64px;
    padding:0 80px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
    align-self:center;
    width:max-content; /* не ужимается меньше контента */
  }
  .price-and-cta .cta-col .btn{
    height:64px;
    padding:0 80px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.2;
    align-self:center;
  }
  /* лёгкий визуальный подъём левой колонки */
  .price-and-cta .price-banner{
    margin-top:2px;
  }
}

/* =========================================
   МЕЛКИЕ ОПТИМИЗАЦИИ СЛОЁВ
   ========================================= */
.price-banner__main{
  will-change:transform;
}
.price-and-cta .cta-col .btn{
  will-change:transform;
}
#graftsFx,
#trailFx,
.hover-glow,
.bg-stripes,
.man-box{
  pointer-events:none!important;
}
.hero-zone,
.hero-content{
  position:relative;
  z-index:10;
}
.page-bg img.bg-base{
  pointer-events:none;
}



/* ==== МОИ ПРАВКИ CTA ==== */
/* ==== CTA: делаем один широкий блок без цены ==== */
@media (min-width:901px){
  /* вместо двух колонок — один блок по центру */
  .price-and-cta{
    display:block;                       /* ломаем старый grid 1fr 1fr */
    width:min(100%, 860px);              /* желаемая общая ширина (меняй 700–960px) */
    margin:22px auto 0;                  /* центрируем */
  }

  .price-and-cta .cta-col{
    display:flex;
    flex-direction:column;
    gap:0px;
    max-width:none;                      /* разрешаем ширину как у .price-and-cta */
  }

  .cta-label{
    font-size:16px;
    margin-bottom:-11px; 
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.3px;
    text-align:center;
  }

  .price-and-cta .cta-col .btn{
    width:100%;                          /* кнопка на всю ширину блока */
    height:64px;
    font-size:18px;
    border-radius:12px;
  }
}



/* ==== MOBILE FIXES (<=900px) ==== */
@media (max-width:900px){
  /* убираем десктопный сдвиг, ровно по центру */
  .hero-content--spread{
    transform:none !important;
    padding:22px 16px 22px;  /* аккуратные поля слева/справа */
  }

  /* чипсы уже в колонку — оставляем, просто поджимаем внутренние отступы */
  .chips{ gap:10px; }
  .chips li{ padding:10px 14px; }

  /* CTA-блок: ширина 100%, кнопка не вылезает за край */
  .price-and-cta{
    display:block;
    width:100%;
    margin:16px 0 0;
  }
  .price-and-cta .cta-col{
    display:flex;
    flex-direction:column;
    gap:6px;                /* ближе подпись к кнопке */
    padding:0 12px;         /* внутренние поля, чтобы не упиралась в край */
  }
  .cta-label{
    margin:0;
    font-size:15px;
    letter-spacing:.2px;
    text-align:center;
  }
  .price-and-cta .cta-col .btn{
    width:100%;
    height:56px;
    font-size:16px;
    border-radius:12px;
  }
}

/* ==== DESKTOP ONLY SHIFT (>=901px) ==== */
@media (min-width:901px){
  .hero-content--spread{
    transform: translateX(4%); /* мягкий сдвиг вправо только на десктопе */
  }
}


@media (max-width:900px){
  .clinic-center{
    white-space:nowrap;        /* не переносим */
    font-size:clamp(15px, 4.5vw, 19px); /* адаптивный размер */
    line-height:1;
    margin-left:clamp(12px, 5vw, 39px); /* адаптивный отступ от логотипа */
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.header-link {
  font-family: "Lora", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
  color: #222;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .header-link {
    display: none; /* если в мобиле не нужна, можно скрыть */
  }
}