/* ============================================================
   V2 — премиум-анимированный слой (флагман: index.html)
   Референсы: Neko Health (14islands), Superpower, Function Health.
   Принцип: МАЛО ТЕКСТА, крупная типографика, воздух, движение.
   Стек: GSAP + ScrollTrigger + Lenis (CDN). Токены — из brand.css.
   ============================================================ */

.v2{background:var(--milk)}
.v2 ::selection{background:var(--terra);color:#fff}

/* плавный скролл — компенсация для sticky header */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}

/* ---- общий ритм: больше воздуха ---- */
.v2 .sectionx{padding:clamp(90px,13vh,180px) 0}
.v2 .wrap{max-width:1240px}

/* line-split — для анимации заголовков построчно */
.lines{overflow:hidden}
.line{display:block;overflow:hidden}
.line > span{display:block;will-change:transform}

/* ============ HERO V2 ============ */
.hx{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--milk);color:var(--graphite)}
.hx .wrap{position:relative;z-index:3;width:100%}
.hx .eyebrow{color:var(--terra);opacity:0}
/* Подпись над заголовком в две строки: позиционирование + специальности.
   Разрядка меньше базовой (.36em) — иначе длинная фраза рвётся на лишние строки. */
/* Подпись работает как h1 страницы, поэтому перебиваем крупные стили .hx h1 */
.hx h1.hx-tagline,.hx-tagline{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;
  color:var(--terra);letter-spacing:.16em;line-height:1.65;max-width:440px;margin:0 0 34px;
}
.hx-tagline i{display:block;font-style:normal;letter-spacing:.26em;color:var(--stone);margin-top:7px;white-space:nowrap}
@media(max-width:760px){
  .hx h1.hx-tagline,.hx-tagline{letter-spacing:.11em;max-width:none;font-size:10.5px;margin-bottom:26px}
  .hx-tagline i{letter-spacing:.18em;margin-top:6px}
}
/* На широких экранах подпись работает как полноценный заголовок первого экрана:
   антиква вместо мелкого капса, специальности — акцентной строкой под ним. */
@media(min-width:761px){
  .hx h1.hx-tagline{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(34px,3.6vw,48px);font-weight:500;line-height:1.1;
    text-transform:none;letter-spacing:-.005em;color:var(--forest);
    max-width:700px;margin:0 0 34px;
  }
  .hx h1.hx-tagline i{
    font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.3em;color:var(--terra);
    margin-top:24px;padding-top:22px;position:relative;white-space:normal;
  }
  .hx h1.hx-tagline i::before{
    content:"";position:absolute;left:0;top:0;width:56px;height:2px;
    background:var(--terra);border-radius:2px;
  }
}
.hx h1{
  font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--forest);
  font-size:clamp(54px,10vw,148px);line-height:.94;letter-spacing:-.01em;margin:0 0 30px;
}
.hx h1 em{font-style:normal;color:inherit}
.hx .sub{font-size:clamp(17px,2vw,21px);color:var(--ink2);max-width:44ch;margin-bottom:40px;opacity:0}
.hx .acts{display:flex;gap:16px;flex-wrap:wrap;opacity:0}
/* фото-композиция hero — чистая, премиум (без точек и пунктира на лице) */
.hx-art{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:min(38vw,470px);z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}
.hx-rings{position:absolute;width:122%;height:122%;overflow:visible;z-index:0}
.hx-rings .ring{fill:none;stroke:var(--terra);opacity:.14}
.hx-photo{position:relative;z-index:2;width:100%;aspect-ratio:4/5;border-radius:230px 230px 18px 18px;overflow:hidden;
  box-shadow:26px 26px 0 -2px var(--sage-pale),0 50px 100px -55px rgba(20,29,23,.7)}
.hx-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.hx-spin{transform-origin:center;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--stone);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
.scrollcue .ln{width:1px;height:46px;background:linear-gradient(var(--terra),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============ МАНИФЕСТ (огромная типографика) ============ */
.manifesto{padding:clamp(110px,18vh,240px) 0;text-align:center}
.manifesto p{font-family:'Cormorant Garamond',serif;font-weight:500;color:var(--forest);font-size:clamp(34px,6.2vw,92px);line-height:1.04;letter-spacing:-.01em;max-width:18ch;margin:0 auto}
.manifesto p em{font-style:normal;color:inherit}
.manifesto .word{display:inline-block;opacity:.12;transition:opacity .1s}

/* ============ ИНТЕРАКТИВНАЯ ДИАГНОСТИКА (табы) ============ */
.diag{background:var(--forest-deep);color:var(--milk);border-radius:0}
.diag .head{max-width:680px;margin-bottom:54px}
.diag .head .eyebrow{color:var(--terra-soft)}
.diag .head h2{font-family:'Cormorant Garamond';font-size:clamp(32px,4.6vw,60px);font-weight:500;color:#fff;line-height:1.02}
.diag .head h2 em{font-style:normal;color:inherit}
.diag .head .diag-lead{margin-top:16px;color:#c2ccc2;font-size:clamp(15px,1.6vw,18px);max-width:56ch}
.diag-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.diag-tabs{display:flex;flex-direction:column}
.diag-tab{appearance:none;background:none;border:none;text-align:left;cursor:pointer;padding:24px 0;border-top:1px solid rgba(221,143,99,.18);display:flex;align-items:baseline;gap:18px;transition:padding .3s}
.diag-tab:last-child{border-bottom:1px solid rgba(221,143,99,.18)}
.diag-tab .tn{font-family:'Cormorant Garamond';font-size:16px;color:var(--terra-soft);width:30px;flex:none}
.diag-tab .tt{font-family:'Cormorant Garamond';font-size:clamp(22px,2.6vw,32px);font-weight:500;color:#8d978b;transition:color .3s}
.diag-tab[aria-selected="true"]{padding-left:14px}
.diag-tab[aria-selected="true"] .tt{color:#fff}
.diag-tab[aria-selected="true"] .tn{color:var(--terra-soft)}
.diag-panel{position:relative;min-height:340px}
.diag-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,transform .5s;transform:translateY(16px)}
.diag-pane.on{opacity:1;visibility:visible;transform:none;position:relative}
.diag-pane .pic{width:100%;aspect-ratio:16/10;border:1px solid rgba(221,143,99,.26);border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);margin-bottom:26px}
.diag-pane .pic svg{width:120px;height:120px;stroke:var(--terra-soft);stroke-width:1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.diag-pane p{font-size:18px;color:#dfe5da;max-width:46ch;line-height:1.55}
.diag-pane .genes{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.diag-pane .genes code{font-family:'Inter';font-size:11.5px;color:var(--terra-soft);border:1px solid rgba(221,143,99,.34);border-radius:3px;padding:4px 10px}

/* ============ СТАТЫ (count-up) ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:64px 40px;text-align:center;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{font-family:'Cormorant Garamond';display:block;font-size:clamp(56px,8vw,104px);font-weight:500;color:var(--forest);line-height:1}
.stat b .u{color:var(--terra);font-size:.5em;vertical-align:super}
.stat span{display:block;margin-top:14px;font-size:15px;color:var(--stone);max-width:24ch;margin-left:auto;margin-right:auto}

/* ============ ПРОГРАММЫ (крупные карточки) ============ */
.progs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.prog{position:relative;overflow:hidden;border-radius:12px;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:46px;text-decoration:none;color:#fff;isolation:isolate}
.prog .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.prog.w .bg{background-color:#1d2c25}
.prog.m .bg{background-color:#1c160f}
/* затемнение снизу для читаемости текста */
.prog::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,21,17,.92) 8%,rgba(15,21,17,.5) 42%,rgba(15,21,17,.08) 100%)}
.prog:hover .bg{transform:scale(1.06)}
.prog .pk{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra-soft);margin-bottom:14px}
.prog h3{font-family:'Cormorant Garamond';font-size:clamp(28px,3.6vw,46px);font-weight:500;color:#fff;line-height:1.04;margin-bottom:16px}
.prog p{font-size:15px;color:#cdd6c9;max-width:34ch;margin-bottom:24px}
.prog .go{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;color:#fff}
.prog .go .arr{width:34px;height:34px;border:1px solid var(--terra-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.prog:hover .go .arr{background:var(--terra-soft);transform:translateX(4px)}
.prog .go .arr svg{width:15px;height:15px;stroke:#fff;stroke-width:1.6;fill:none}

/* ============ МАРКИ-ЛЕНТА состояний ============ */
.marquee{padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.marquee .track{display:inline-flex;gap:0;animation:slide 36s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
.marquee .it{font-family:'Cormorant Garamond';font-size:clamp(26px,3.4vw,46px);font-weight:500;color:var(--forest);padding:0 36px;display:inline-flex;align-items:center;gap:36px}
.marquee .it::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--terra)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ БОЛЬШОЙ ФИНАЛ ============ */
.cta-x{text-align:center;padding:clamp(110px,18vh,220px) 0}
.cta-x h2{font-family:'Cormorant Garamond';font-size:clamp(40px,7vw,108px);font-weight:500;color:var(--forest);line-height:.98;letter-spacing:-.01em;margin-bottom:40px}
.cta-x h2 em{font-style:normal;color:inherit}

/* ---- магнитная кнопка ---- */
.mag{will-change:transform}

/* ---- появление (gsap управляет, это запасной) ---- */
.v2 .rv{opacity:0}

@media (max-width:920px){
  .hx-art{opacity:.35;right:-24%;width:min(52vw,360px)}
  .diag-grid{grid-template-columns:1fr;gap:36px}
  .diag-panel{min-height:0}
  .diag-pane{position:relative}
  .diag-pane:not(.on){display:none}
  .progs{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{border-left:none;border-top:1px solid var(--line);padding:44px 20px}
  .stat:first-child{border-top:none}
}
/* --- ЧИСТЫЙ МОБИЛЬНЫЙ HERO: фото нормальным блоком сверху, без «призрака» --- */
@media (max-width:760px){
  /* Высоты пересчитаны 13.08: кнопка «Записаться» начиналась на y≈797 при
     экране 844 и обрезалась — на первом экране не было ни одного действия. */
  .hx{min-height:auto;padding:22px 0 16px;display:block}
  .hx .wrap{width:100%}
  .hx-art{position:relative;right:auto;left:auto;top:auto;transform:none;opacity:1;
    width:70%;max-width:210px;margin:2px auto 20px;display:flex}
  .hx-photo{border-radius:150px 150px 16px 16px;
    box-shadow:10px 10px 0 -2px var(--sage-pale),0 30px 56px -40px rgba(20,29,23,.6)}
  .hx h1{font-size:clamp(40px,11.5vw,54px);margin-bottom:16px}
  .hx .sub{font-size:16px;margin-bottom:22px}
  .hx .acts{gap:12px}
  .hx .acts .btn{width:100%;text-align:center}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hx-spin,.hx-spin-r,.marquee .track,.scrollcue .ln{animation:none}
  .v2 .rv{opacity:1}
}

/* — доводка 13.08: логотип прыгал на 50px между главной (1240) и внутренними (1140) — */
.v2 .sitebar .wrap,.v2 .foot .wrap{max-width:1140px}
/* — на телефоне секция манифеста короткая, scrub не успевает довести слова
     до полной непрозрачности: ключевая фраза бренда читалась призраком — */
@media(max-width:560px){.manifesto .word{opacity:.34}}
