/* =====================================================================
   site-v4 — «Тёмный премиум, мягкий» (направление A, макет)
   Всё под body.v4: снять класс — вернётся дизайн v3 (переключатель «Было / Стало»).
   Логотип, тексты, цены, разметка и цели Метрики не менялись.
   ===================================================================== */

body.v4{
  --ff:"Onest";
  --page:#060709;
  --r-panel:32px;
  --r-card:26px;
  --r-sm:18px;
  --gap:16px;
  --ease:cubic-bezier(.4,0,.2,1);
  font-family:var(--ff),"Inter",Arial,Helvetica,sans-serif;
  background:var(--page);
}
html:has(body.v4){background:#060709;}
body.v4 button,body.v4 input,body.v4 select,body.v4 textarea,

/* ---------- типографика ---------- */
body.v4 h1,body.v4 h2,body.v4 h3,body.v4 h4{font-weight:600;letter-spacing:-.02em;}
body.v4 .hero h1 em{
  font-style:normal;
  background:linear-gradient(95deg,#ff5a61 0%,#d71921 60%,#a8121a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.v4 .sec-head h2{font-size:clamp(28px,3.6vw,48px);}

/* ---------- eyebrow → чип ---------- */
body.v4 .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 13px;border-radius:999px;font-size:13.5px;
  background:rgba(127,127,127,.1);border:1px solid var(--s-line,rgba(255,255,255,.14));
  color:var(--s-muted,rgba(255,255,255,.75));
}
body.v4 .eyebrow::before{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(215,25,33,.16);}
body.v4 .sec-head.center .eyebrow{display:inline-flex;}

/* ---------- верхняя полоска ---------- */
body.v4 .topstrip{background:transparent;border-bottom:none;}

/* ---------- шапка: парящая капсула ---------- */
body.v4 header.site{
  top:10px;margin:8px 12px 0;background:transparent;border-bottom:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;
}
body.v4 header.site > *{pointer-events:auto;}
body.v4 header.site .container.navbar{
  max-width:1260px;padding:8px 10px 8px 22px;border-radius:999px;
  background:rgba(12,14,19,.78);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px -12px rgba(0,0,0,.6);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
body.v4 header.site.scrolled .container.navbar{background:rgba(10,12,16,.92);box-shadow:0 14px 44px -10px rgba(0,0,0,.75);}
body.v4 .brand-wordmark{height:50px;}
body.v4 .tab-btn,
body.v4 .tabs a.tab-btn{border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease);}
body.v4 .tab-btn:hover{background:rgba(255,255,255,.08);}
body.v4 .tab-btn.active{background:rgba(255,255,255,.1);}
body.v4 .tab-btn.active::after{display:none;}
body.v4 .tabs button.nav-models{border-radius:999px;}
body.v4 .icon-btn,body.v4 .burger{border-radius:50%;border-color:rgba(255,255,255,.18);transition:background .2s,border-color .2s;}
body.v4 .icon-btn:hover,body.v4 .burger:hover{background:rgba(255,255,255,.08);}
/* без overflow:hidden — иначе обрезается невидимый «мостик» ::before между кнопкой и панелью, и меню гаснет раньше, чем успеваешь навести мышь */
body.v4 .dd-panel{border-radius:24px;background:#101319;border-color:rgba(255,255,255,.12);top:calc(100% + 14px);}
body.v4 .dd-panel::before{top:-24px;height:24px;left:-12px;right:-12px;}
body.v4 .dd-foot{border-radius:0 0 24px 24px;}
body.v4 .dd-item,body.v4 .dd-foot{transition:background .2s;}
body.v4 .mobile-menu{background:rgba(12,14,19,.96);border:1px solid rgba(255,255,255,.1);border-radius:26px;margin-top:8px;}
body.v4 .mm-model{border-radius:18px;}

/* ---------- кнопки ---------- */
body.v4 .btn{border-radius:999px;font-weight:550;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,opacity .2s;}
body.v4 .btn-primary:hover{opacity:1;transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(0,0,0,.45);}
body.v4 .sec-black .btn-primary:hover,body.v4 .hero .btn-primary:hover{box-shadow:0 12px 30px -10px rgba(255,255,255,.35);}
body.v4 .btn-ghost{background:rgba(127,127,127,.06);}
body.v4 .btn-ghost:hover{background:rgba(127,127,127,.14);}
body.v4 .btn:active{transform:translateY(0) scale(.98);}

/* ---------- секции → скруглённые панели ---------- */
body.v4 section.sec,body.v4 section.hero{margin:12px 12px 0;border-radius:var(--r-panel);overflow:hidden;}
body.v4 .sec{padding:96px 0;}
body.v4 .sec-black{
  --s-bg:#0e1116;--s-surface:#161a22;--s-line:rgba(255,255,255,.1);
  --s-muted:rgba(255,255,255,.68);--s-muted-2:rgba(255,255,255,.42);
}
body.v4 .sec-black:not(.hero-bg){
  background:
    radial-gradient(60% 55% at 92% 0%,rgba(255,255,255,.055),transparent 70%),
    radial-gradient(45% 40% at 0% 100%,rgba(215,25,33,.07),transparent 70%),
    #0e1116;
}
body.v4 .sec-light{
  --s-bg:#eceff3;--s-surface:#fff;--s-line:rgba(15,23,42,.1);
  background:linear-gradient(180deg,#f3f5f8 0%,#e8ecf1 100%);
}

/* ---------- первый экран ---------- */
body.v4 .hero-bg{
  min-height:640px;
  background:
    linear-gradient(180deg,rgba(5,6,9,.18) 0%,rgba(5,6,9,.5) 50%,rgba(5,6,9,.92) 100%),
    linear-gradient(90deg,rgba(5,6,9,.55) 0%,rgba(5,6,9,0) 65%),
    url('../hero-home.jpg') center/cover no-repeat,#0a0a0a;
}
body.v4 .hero-bg-content{max-width:660px;padding:96px 0 56px;}
body.v4 .hero .eyebrow{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
body.v4 .hero h1{letter-spacing:-.025em;}
body.v4 .hero p.lead{color:rgba(255,255,255,.82);}
body.v4 .hero-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px;margin:0 0 28px;
}
body.v4 .hero-facts > *{
  padding:14px 18px;border-radius:20px;line-height:1.35;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
body.v4 .hero-facts b{font-size:22px;margin-bottom:4px;}
body.v4 img.stamp{box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14);}

/* ---------- сетки с линиями → отдельные карточки ---------- */
body.v4 .model-row,body.v4 .trust-grid,body.v4 .proof-grid,body.v4 .vid-row,
body.v4 .compare,body.v4 .gallery,body.v4 .founder,body.v4 .contact-grid{
  gap:var(--gap);background:none;border:none;
}
body.v4 .model-row{margin-bottom:0;}
body.v4 .model-card,body.v4 .trust-item,body.v4 .proof-card,body.v4 .vid,
body.v4 .compare .col,body.v4 .contact-card,body.v4 .founder .info,body.v4 .step,
body.v4 .faq-item,body.v4 .all-tile{
  background:var(--s-surface);border:1px solid var(--s-line);border-radius:var(--r-card);
}
body.v4 .sec-light .model-card,body.v4 .sec-light .trust-item,body.v4 .sec-light .proof-card,
body.v4 .sec-light .vid,body.v4 .sec-light .compare .col,body.v4 .sec-light .contact-card,
body.v4 .sec-light .founder .info,body.v4 .sec-light .faq-item,body.v4 .sec-light .step{
  border-color:rgba(15,23,42,.06);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -16px rgba(15,23,42,.16);
}
body.v4 .model-card,body.v4 .vid,body.v4 .proof-card,body.v4 .contact-card,body.v4 .trust-item{
  overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
}
body.v4 a.model-card:hover,body.v4 .vid:hover,body.v4 a.proof-card:hover,body.v4 a.contact-card:hover,body.v4 .trust-item:hover{
  transform:translateY(-4px);
}
body.v4 .sec-light a.model-card:hover,body.v4 .sec-light .vid:hover,body.v4 .sec-light a.proof-card:hover,
body.v4 .sec-light a.contact-card:hover,body.v4 .sec-light .trust-item:hover{
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 24px 44px -16px rgba(15,23,42,.24);
}
body.v4 .sec-black a.model-card:hover,body.v4 .sec-black .vid:hover,body.v4 .sec-black a.proof-card:hover,
body.v4 .sec-black .trust-item:hover{border-color:rgba(255,255,255,.22);}

/* карточки моделей */
body.v4 .model-card .info{border-top:none;padding:22px 22px 24px;}
body.v4 .model-card .photo.has-img{border-radius:0;}
body.v4 .model-card .name{font-weight:600;}
body.v4 .st{border-radius:999px;padding:4px 11px;}
body.v4 .model-card.other{background:linear-gradient(145deg,#1b1f29,#12151c);}

/* преимущества / «Как мы работаем» */
body.v4 .trust-item{padding:30px 28px;}
body.v4 .trust-item .num{
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;color:var(--accent);background:rgba(215,25,33,.1);margin-bottom:18px;
}
body.v4 .trust-item h4{font-size:17.5px;}
body.v4 .trust-item.hl{
  border-color:transparent;color:#fff;
  background:radial-gradient(90% 80% at 100% 0%,rgba(255,120,125,.35),transparent 60%),linear-gradient(145deg,#d71921 0%,#9d1219 55%,#4a0b0f 100%);
  box-shadow:0 20px 44px -18px rgba(215,25,33,.55);
}
body.v4 .trust-item.hl p{color:rgba(255,255,255,.85);}
body.v4 .trust-item.hl .num{background:rgba(255,255,255,.2);color:#fff;}

/* шаги */
body.v4 .steps{gap:12px;}
body.v4 .step{padding:26px 30px;border-top:1px solid var(--s-line);align-items:start;}
body.v4 .step:last-child{border-bottom:1px solid var(--s-line);}
body.v4 .step .n{
  width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600;
}

/* сравнение и таблица */
body.v4 .compare .col{padding:34px;}
body.v4 .compare .col.win{background:linear-gradient(160deg,#fff 0%,#f6f0f0 100%);border-color:rgba(215,25,33,.22);}
body.v4 .util-table{border-collapse:separate;border-spacing:0;border:1px solid var(--s-line);border-radius:22px;overflow:hidden;background:var(--s-surface);}
body.v4 .util-table th,body.v4 .util-table td{border:none;border-bottom:1px solid var(--s-line);}
body.v4 .util-table tr:last-child td{border-bottom:none;}
body.v4 .util-table th{background:rgba(127,127,127,.07);}

/* видео */
body.v4 .vid .thumb,body.v4 .vid .yt-frame{border-radius:0;}
body.v4 .vid .thumb .play{
  border-radius:50%;background:rgba(10,12,16,.55);border:1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),background .2s,border-color .2s;
}
body.v4 .vid .thumb:hover .play{transform:translate(-50%,-50%) scale(1.08);}
body.v4 .vid .info{padding:20px 22px 24px;}

/* «О компании» */
body.v4 .founder{align-items:stretch;}
body.v4 .founder .photo{border-radius:var(--r-card);aspect-ratio:auto;height:100%;min-height:360px;}
body.v4 .founder .info{padding:40px;}
body.v4 .founder .contacts a{border-bottom:none;padding:10px 16px;border-radius:999px;background:rgba(127,127,127,.1);transition:background .2s;}
body.v4 .founder .contacts a:hover{background:rgba(127,127,127,.2);}
body.v4 .founder .role{display:inline-block;align-self:flex-start;padding:5px 12px;border-radius:999px;background:rgba(215,25,33,.1);font-size:12px;letter-spacing:.04em;}

/* FAQ */
body.v4 .faq{max-width:860px;}
body.v4 .faq-item{margin-bottom:12px;padding:0 26px;transition:border-color .25s,background .25s;}
body.v4 .faq-item:hover{border-color:rgba(255,255,255,.22);}
body.v4 .faq-item summary{padding:22px 0;font-weight:500;}
body.v4 .faq-item summary::after{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:13px;
  background:rgba(127,127,127,.14);color:var(--s-fg);font-size:21px;transition:background .2s,transform .3s var(--ease);
}
body.v4 .faq-item[open] summary::after{background:var(--accent);color:#fff;}
body.v4 .faq-item[open] .a{animation:v4fade .4s var(--ease);}
@keyframes v4fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* контакты и форма */
body.v4 .contact-grid{margin-bottom:64px;}
body.v4 .contact-card{padding:24px 26px;}
body.v4 .contact-card .ic{border-radius:15px;background:rgba(127,127,127,.1);border:none;}
body.v4 .quiz-card{border-radius:30px;padding:44px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 50px -22px rgba(15,23,42,.22);border-color:rgba(15,23,42,.06);}
body.v4 .field input{border-radius:16px;padding:15px 18px;background:rgba(127,127,127,.05);transition:border-color .2s,background .2s,box-shadow .2s;}
body.v4 .field input:focus{outline:none;border-color:var(--accent);background:transparent;box-shadow:0 0 0 4px rgba(215,25,33,.14);}
body.v4 .chip{border-radius:999px;}
body.v4 .quiz-progress i{border-radius:2px;height:4px;}
body.v4 .quiz-done .check{box-shadow:0 0 0 8px rgba(215,25,33,.14);color:#fff;}

/* подвал */
body.v4 footer{
  margin:12px 12px 12px;border-radius:var(--r-panel);padding:56px 0 64px;
  background:radial-gradient(60% 80% at 100% 0%,rgba(255,255,255,.05),transparent 70%),#0e1116;
}
body.v4 footer .fgrid{gap:32px;}

/* мобильная панель */
body.v4 .mbar{
  left:10px;right:10px;bottom:10px;border-radius:26px;border:1px solid rgba(255,255,255,.12);
  background:rgba(12,14,19,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}

/* ---------- появление при прокрутке ---------- */
body.v4.anim .rv{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
body.v4.anim .rv.in{opacity:1;transform:none;}
body.v4.anim .hero-bg-content > *{animation:v4rise .9s var(--ease) both;}
body.v4.anim .hero-bg-content > *:nth-child(2){animation-delay:.08s;}
body.v4.anim .hero-bg-content > *:nth-child(3){animation-delay:.16s;}
body.v4.anim .hero-bg-content > *:nth-child(4){animation-delay:.24s;}
body.v4.anim .hero-bg-content > *:nth-child(5){animation-delay:.32s;}
body.v4.anim .hero-bg-content > *:nth-child(6){animation-delay:.4s;}
@keyframes v4rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  body.v4.anim .rv,body.v4.anim .hero-bg-content > *{opacity:1!important;transform:none!important;animation:none!important;}
}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
  body.v4 header.site .container.navbar{padding:7px 8px 7px 18px;}
  body.v4 .brand-wordmark{height:44px;}
}
@media (max-width:900px){
  body.v4 .founder{grid-template-columns:1fr;}
  body.v4 .founder .photo{min-height:0;aspect-ratio:4/3;height:auto;}
}
@media (max-width:640px){
  body.v4{--r-panel:26px;--r-card:22px;--gap:12px;}
  body.v4 section.sec,body.v4 section.hero{margin:8px 8px 0;}
  body.v4 header.site{margin:6px 8px 0;top:6px;}
  body.v4 .sec{padding:60px 0;}
  body.v4 .hero-bg{min-height:560px;}
  body.v4 .hero-bg-content{padding:72px 0 28px;}
  body.v4 .hero h1.h1-sentence{font-size:clamp(30px,8.4vw,36px);margin:14px 0 14px;}
  body.v4 .hero p.lead{font-size:15.5px;margin-bottom:20px;}
  body.v4 .hero-facts{margin-bottom:20px;}
  body.v4 .hero-ctas{margin-bottom:20px;gap:10px;}
  body.v4 .hero-ctas .btn{flex:1 1 100%;justify-content:center;padding:15px 20px;}
  body.v4 .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  body.v4 .hero-facts > *{padding:12px 11px;border-radius:16px;}
  body.v4 .hero-facts b{font-size:16px;}
  body.v4 .trust-item{padding:24px 22px;}
  body.v4 .step{padding:20px;}
  body.v4 .quiz-card{padding:26px 20px;border-radius:24px;}
  body.v4 .founder .info{padding:28px 22px;}
  body.v4 .faq-item{padding:0 20px;}
  body.v4 footer{margin:8px;border-radius:26px;}
}