/* ═══════════════════════════════════════════════════════════════════════
   ВИТРИНА, главная как воронка продаж (13.11.2026, Семён). Подключается ТОЛЬКО
   на landing.html после light.css. Что здесь:
   - две кнопки первого экрана и живое демо (стол с сообщениями и «Отправить»);
   - «Как это работает» — три шага, линия и карточки привязаны к прокрутке
     (CSS animation-timeline: view(); где не поддерживается — всё видно сразу);
   - призыв посередине, форма презентации, нижняя панель на телефоне.
   Анимации: только transform/opacity; prefers-reduced-motion выключает всё.
   Логика демо и событий — funnel.js.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── первый экран: две кнопки ── */
.v-cta{display:flex;flex-wrap:wrap;gap:12px}
.v-cta .btn-ghost{border-color:rgba(124,77,255,.28);background:#fff}
.v-trust span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-2);margin-right:8px;vertical-align:middle}
.v-trust{gap:6px 18px;font-weight:600}

@media(min-width:1181px){
  /* десктоп: текст слева, справа стол и Тим РЯДОМ (не поверх): стол 420px, Тим 215px */
  .wrap.v-hero-in{max-width:1300px;grid-template-columns:minmax(0,1fr) 620px;gap:20px}
  .v-cta{flex-wrap:wrap}
  .v-cta .btn{white-space:nowrap;font-size:14px;padding-left:16px;padding-right:16px}
  .v-stage{min-height:600px}
  .v-stage::before{right:0;width:300px}
  .v-stage .v-desk{left:0;width:500px;max-width:none;bottom:34px;transform:scale(.8);transform-origin:0 100%}
  .v-hero .v-stage .v-tim{height:420px;max-width:none;right:0;bottom:6px}
  .v-stage .v-float.b{left:auto;right:6px;top:70px}
}
/* t3: хвост подписи кнопки («на 3 дня», «15 мин») прячется на узком экране; features-страницы без funnel.css его не прячут */

/* ── живое демо ── */
.v-desk-body{min-height:340px}
.v-dl li{position:relative;cursor:pointer;transition:background .2s,box-shadow .2s;min-height:44px}
.v-dl li:hover{background:rgba(124,77,255,.07)}
.v-dl li.sel{background:rgba(124,77,255,.12);box-shadow:inset 3px 0 0 var(--accent-2)}
.v-dl li.fly{animation:dmFly .6s var(--ease) both}
.v-dl li.done time{color:#0b7a3b;font-weight:700}
@keyframes dmFly{from{opacity:0;transform:translateX(46px) scale(.96)}}
.dm-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:2px}
.dm-head img{width:20px;height:20px;border-radius:6px;background:#f4f6fc;padding:2px;border:1px solid var(--line)}
.v-sug .v-row button{font:inherit;font-size:11.5px;font-weight:700;padding:7px 13px;min-height:32px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);cursor:pointer}
.v-sug .v-row button.dm-send{background:var(--grad-d);color:#fff;border-color:transparent;animation:vglow 2.6s ease-in-out infinite}
.v-sug .v-row button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.v-sug p[contenteditable="true"]{background:#fff;border-radius:8px;padding:6px 8px;outline:2px solid var(--accent-2)}
.dm-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;background:#eef1f8;border-radius:14px}
.dm-typing i{width:6px;height:6px;border-radius:50%;background:#9aa1bb;animation:vbounce 1.1s infinite}
.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}
.v-msg.sent{animation:dmPop .45s var(--ease) both}
@keyframes dmPop{from{opacity:0;transform:translateY(12px) scale(.96)}}
.dm-status{align-self:flex-end;font-size:11.5px;font-weight:700;color:#0b7a3b;display:flex;gap:6px;align-items:center}
.dm-status::before{content:"";width:14px;height:14px;border-radius:50%;background:#0b7a3b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.dm-next{margin-top:auto;border-radius:14px;padding:12px;background:linear-gradient(160deg,rgba(124,77,255,.12),rgba(46,125,255,.08));border:1px solid rgba(124,77,255,.3);font-size:12.5px;line-height:1.45;display:grid;gap:8px;animation:dmPop .5s var(--ease) both}
.dm-next b{display:block;font-size:13px}
.dm-next a{justify-self:start;font-weight:700;font-size:12.5px;color:#fff;background:var(--grad-d);border-radius:999px;padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}

/* ── доверие ── */
.v-nums{padding:56px 0}

/* ── как это работает ── */
.how-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.how-line{position:absolute;left:16%;right:16%;top:275px;height:3px;border-radius:3px;background:rgba(11,13,24,.08);z-index:0}
.how-line i{position:absolute;inset:0;border-radius:3px;background:var(--grad);transform-origin:0 50%}
.how-step{position:relative;z-index:1;text-align:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:0 0 30px;overflow:hidden;box-shadow:var(--shadow-sm)}
.how-step h3,.how-step p{padding:0 26px}
.how-n{position:relative;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin:-23px auto 14px;border-radius:50%;background:var(--grad);color:#fff;font:800 19px/1 var(--font-d);box-shadow:0 8px 22px rgba(100,80,255,.35)}
.how-tim{display:flex;justify-content:center;align-items:flex-end;height:250px;padding-top:22px;margin:0;background:linear-gradient(150deg,#F3EEFF,#EAF1FF);overflow:hidden}
.how-tim img{display:block;height:100%;width:auto;max-width:100%;margin:0;object-fit:contain;object-position:center bottom}
.how-step h3{font-size:21px;margin-bottom:8px}
.how-step p{color:var(--ink-2);font-size:15.5px}
.how-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}
.how-step{margin-top:23px}
.how-n{order:0}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .how-line i{transform:scaleX(0);animation:howFill linear both;animation-timeline:view();animation-range:entry 20% cover 62%}
    .how-step{animation:howIn linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes howFill{to{transform:scaleX(1)}}
    @keyframes howIn{from{opacity:.6;transform:translateY(22px)}to{opacity:1;transform:none}}
  }
}

/* ── призыв посередине ── */
.mid-cta{padding:30px 0 10px}
.mid-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px;align-items:center;border-radius:32px;padding:34px 48px 0;
  background:linear-gradient(110deg,#f3f0ff,#eaf1ff);border:1px solid rgba(124,77,255,.2);box-shadow:var(--shadow);overflow:hidden;max-width:var(--maxw);position:relative}
.mid-in::before{content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,77,255,.22),transparent 72%);pointer-events:none}
.mid-tim{align-self:end;text-align:center}
.mid-tim img{height:340px;width:auto;max-width:100%;margin:0 auto;object-fit:contain;filter:drop-shadow(0 20px 28px rgba(60,40,140,.28))}
.mid-txt{padding-bottom:36px;position:relative}
.mid-txt h2{font-size:clamp(26px,3vw,38px);margin:14px 0 12px}
.mid-txt p{color:var(--ink-2);max-width:56ch;margin-bottom:22px}
.mid-btns{display:flex;flex-wrap:wrap;gap:12px}
.mid-btns .btn-ghost{background:#fff}

/* ── форма презентации ── */
body .demo-form{grid-template-columns:minmax(0,1fr);max-width:520px;gap:12px}
body .demo-agree{order:3}
body .demo-form #dcBtn{order:4}
body .demo-msg{order:5}
body .demo-card{padding:34px 44px}
body .demo-form .demo-in{min-height:46px;width:100%}
body .demo-form select.demo-in{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666d89' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px}
body .demo-form #dcBtn{justify-self:start;min-height:48px}
body .demo-agree.need:not(:has(input:checked)){color:#c2262d}
.demo-or{margin-top:12px;font-size:14px;color:var(--ink-2)}
.demo-or a{color:#5b3fe0;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── нижняя панель (липкая) ── */
.fab-cta{position:fixed;right:96px;bottom:20px;z-index:60;display:none;gap:8px;padding:8px;border-radius:999px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 14px 40px rgba(28,32,74,.2);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .35s,transform .35s}
.fab-cta.show{opacity:1;transform:none;pointer-events:auto}
.fab-cta .btn{padding:11px 18px;font-size:14px;min-height:44px}
.fab-cta .btn-ghost{background:#fff}

@media(max-width:1180px){
  /* телефон и планшет: Тим сверху, затем текст и кнопки, затем демо (stage «раскрыт» в сетку героя) */
  .v-hero-in{display:flex;flex-direction:column}
  .v-stage{display:contents}
  .v-stage::before,.v-stage::after{display:none}
  .v-hero .v-stage .v-tim{order:-1;position:relative;left:auto;right:auto;bottom:auto;transform:none;height:320px;width:auto;max-width:80%;margin:0 auto;display:block}
  .v-hero-in>div:first-child{order:0}
  .v-hero .v-desk{order:2;display:block!important;position:relative;left:auto;bottom:auto;width:100%;max-width:560px;margin:22px auto 0;transform:none}
  .v-hero .v-desk .v-desk-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .v-hero .v-desk .v-desk-body>div:first-child{display:none}
  .v-hero .v-desk .v-chat{border:0;display:flex!important}
  .v-hero .v-float.b{display:none!important}
}
@media(max-width:1020px){
  .mid-in{grid-template-columns:1fr;padding:30px 24px 0;text-align:center}
  .mid-tim img{height:230px}
  .mid-txt{padding-bottom:30px}
  .mid-btns,.mid-txt .eyebrow{justify-content:center}
  .mid-txt p{margin-inline:auto}
  .how-steps{grid-template-columns:1fr;gap:34px}
  .how-line{display:none}
  body .demo-form{max-width:none}
  body .demo-form #dcBtn{justify-self:stretch}
}
@media(max-width:720px){
  .t3{display:none}
  .fab-cta{display:flex}
  .v-cta .btn{width:100%;justify-content:center}
  .v-hero .v-stage .v-tim{height:300px}
  /* липкая панель на всю ширину, справа свободно под кнопку виджета; страница получает нижний отступ */
  .fab-cta{left:10px;right:78px;bottom:10px;border-radius:22px;padding:6px;gap:6px}
  .fab-cta .btn{flex:1 1 0;min-width:0;padding:10px 6px;font-size:12.5px;line-height:1.15;text-align:center;justify-content:center;white-space:normal}
  body{padding-bottom:72px}
}
@media(prefers-reduced-motion:reduce){
  .v-dl li.fly,.v-msg.sent,.dm-next,.v-sug .v-row button.dm-send,.dm-typing i{animation:none!important}
  .fab-cta{transition:none}
}

/* ═══ Главная короткая, подстраницы (13.11.2026) ═══ */
/* выгоды: три карточки, одна строка */
.ben-sec{padding:72px 0 24px}
.ben-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ben{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 26px;box-shadow:var(--shadow-sm);text-align:left}
.ben-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--grad);color:#fff;margin-bottom:16px;flex:none}
.ben-ic svg{width:24px;height:24px}
.ben h3{font-size:20px;margin-bottom:6px}
.ben p{color:var(--ink-2);font-size:15.5px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
/* возможности: компактные карточки-ссылки */
.feat-sec{padding:72px 0 24px}
.feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
a.feat{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;min-height:84px}
a.feat:hover{transform:translateY(-3px);border-color:rgba(124,77,255,.4);box-shadow:var(--shadow)}
a.feat .ben-ic{grid-row:span 2;margin:0;width:44px;height:44px}
a.feat b{font-family:var(--font-d);font-size:16px;line-height:1.2}
a.feat span:not(.ben-ic){font-size:13.5px;color:var(--muted);line-height:1.35}
.feat-all{text-align:center;margin-top:22px}
/* ссылки на подстраницы */
.link-sec{padding:48px 0 24px}
.link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lcard{display:grid;gap:6px;padding:26px;border-radius:24px;background:linear-gradient(150deg,#fff,#f4f1ff);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s}
.lcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lcard b{font-family:var(--font-d);font-size:22px}
.lcard span{color:var(--ink-2);font-size:15px}
.lcard i{font-style:normal;font-weight:700;color:#5b3fe0;display:inline-flex;gap:8px;align-items:center;margin-top:8px}
.how-cta{display:none}
.how{padding-top:56px}
/* шапка: короткая кнопка «Презентация» прячется на средних экранах */
/* шапка подстраниц: герой с Тимом */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f6f3ff 100%);padding:56px 0 40px}
.page-hero .v-aur i{opacity:.14}
.page-hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px;align-items:end}
.page-hero h1{font-size:clamp(32px,4.4vw,54px);margin:18px 0 14px;text-wrap:balance}
.page-hero .v-lead{max-width:56ch;margin-bottom:26px}
.page-hero .v-cta{margin-bottom:12px}
.page-hero .v-cta .btn{font-size:15.5px;padding-left:22px;padding-right:22px}
.page-tim{align-self:end;display:flex;align-items:flex-end;justify-content:center;height:min(360px,36vw);background:linear-gradient(150deg,#F3EEFF,#EAF1FF);border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(124,77,255,.14)}
.page-tim img{display:block;height:100%;width:auto;max-width:100%;margin:0;object-fit:contain;object-position:center bottom}
.page-hero+section{padding-top:56px}
@media(max-width:1020px){
  .page-hero-in{grid-template-columns:1fr;text-align:center}
  .page-hero .v-lead{margin-inline:auto}
  .page-hero .v-cta{justify-content:center}
  .page-tim{order:-1}
  .page-tim{height:240px;max-width:320px;margin:0 auto;width:100%}
  .ben-grid,.link-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .feat-grid{grid-template-columns:1fr}
  .page-hero .v-cta .btn{width:100%;justify-content:center}
  .page-tim{height:220px}
  .cta-row .btn{width:100%;justify-content:center}
}
.v-sug[hidden],.dm-sent[hidden],.dm-next[hidden]{display:none!important}

/* маленькие Тимы-«плавашки» у секций: только когда по бокам контента есть место */
@media(max-width:1499px){body .tim-float{display:none}}
body .tim-tl{left:calc(50% - 730px)}
body .tim-tr{right:calc(50% - 730px)}
/* шапка на телефоне: слово TIMPRO у логотипа видно */
@media(min-width:361px) and (max-width:440px){
  .brand{font-size:16px;gap:7px}
  .brand img{width:26px;height:26px}
  .nav{gap:8px;padding:0 14px}
  .nav-cta{gap:4px}
  .nav-cta .login{padding:9px 6px;font-size:14px}
  #langSwitchHost button{min-width:44px!important;padding:0 6px!important}
}

/* форма презентации: Тим по пояс прижат к нижнему краю карточки */
body .demo-card{overflow:hidden;padding-bottom:0}
body .demo-txt{padding-bottom:34px}
body .demo-vis{align-self:end;display:flex;align-items:flex-end;justify-content:center;height:100%}
body .demo-vis img{display:block;width:auto;max-width:100%;height:min(420px,100%);margin:0;object-fit:contain;object-position:center bottom;animation:none;filter:none}
/* полный рост стоит на полу: тень-эллипс под ногами */
@media(min-width:1181px){.v-stage .v-tim{filter:drop-shadow(0 22px 34px rgba(60,40,140,.28))}
  .v-stage::after{content:"";display:block!important;position:absolute;right:20px;bottom:0;width:190px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,24,110,.30),transparent);filter:blur(3px);z-index:2;pointer-events:none;left:auto;top:auto}}