/* ═══════════════════════════════════════════════════════════════════════
   ВИТРИНА: светлая тема (13.11.2026, Семён). Решение владельца: «сайт белый,
   светлый; Тим крупный и детализированный». Слой ПОВЕРХ showcase.css
   (и inner.css на внутренних страницах). showcase.css писался ночным — все
   тёмные поверхности в нём стоят на токенах --night*, --on-night*, --line-n,
   поэтому токены переворачиваются одним блоком, а жёстко прописанные тёмные
   цвета (шапка, стол в герое, карточки, подвал) перекрашены ниже.
   Фирменный градиент остаётся на кнопках, акцентах и полосе «Начать».
   Тим: крупный в герое (во весь рост), по пояс — в карточках функций.
   Анимации — только transform/opacity (правила showcase.css).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f6fc;
  --night:#ffffff; --night-2:#f4f6fc; --night-3:#e9edf8;
  --on-night:#0b0d18; --on-night-2:#464d6b; --line-n:rgba(11,13,24,.10);
  --shadow:0 24px 60px rgba(28,32,74,.10); --shadow-sm:0 10px 28px rgba(28,32,74,.08);
}
html,body{background:#fff}
::selection{background:rgba(124,77,255,.22)}

/* ── шапка ── */
#hdr{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line)}
#hdr.sc{box-shadow:0 8px 26px rgba(28,32,74,.10)}
.brand,footer .brand{color:var(--ink)}
.nav-links a:hover,.ndrop-btn:hover,.ndrop.open .ndrop-btn{color:var(--ink);background:rgba(124,77,255,.09)}
.nav-cta .login:hover{color:var(--accent-2)}
.burger{background:#fff;border-color:var(--line)}
.burger span{background:var(--ink)}
.mnav{background:#fff}
.mnav a{color:var(--ink)}
.ndrop-menu,.ndrop-panel{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}

/* ── подписи и кнопки ── */
.eyebrow,.dark .eyebrow,.v-hero .eyebrow,body .chan .eyebrow,body .demo-txt .eyebrow{color:#5b3fe0;border-color:rgba(124,77,255,.22);background:rgba(124,77,255,.07)}
.v-hero .btn-ghost,.dark .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.v-hero .btn-ghost:hover,.dark .btn-ghost:hover{background:#f4f1ff;border-color:rgba(124,77,255,.42)}
.v-more{color:#5b3fe0;min-height:36px;align-items:center;padding:6px 0}
.v-fcard .v-more{color:#5b3fe0}
.v-pill{background:rgba(124,77,255,.07);border-color:rgba(124,77,255,.2);color:#3b3f66}

/* ── первый экран: белый, лёгкое фирменное свечение, Тим во весь рост ── */
.v-hero{background:linear-gradient(180deg,#fff 0%,#f6f3ff 100%);color:var(--ink);padding:56px 0 84px}
.v-hero h1{color:var(--ink)}
.v-aur i{opacity:.16}
.v-aur i:nth-child(3){opacity:.12}
.v-grid{opacity:.5;background-image:linear-gradient(rgba(11,13,24,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,24,.05) 1px,transparent 1px)}
.v-lead,.v-trust{color:var(--ink-2)}
.v-hero-in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px}
.v-stage{min-height:640px}
.v-stage::before{content:"";position:absolute;right:4%;top:6%;width:min(480px,80%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(124,77,255,.20),rgba(46,125,255,.10) 60%,transparent 72%);pointer-events:none;z-index:0}
.v-stage .v-tim{position:absolute;left:auto;right:0;bottom:0;top:auto;width:auto;height:min(620px,100%);max-width:64%;object-fit:contain;object-position:bottom right;z-index:3;
  filter:drop-shadow(0 22px 34px rgba(60,40,140,.28));transform:translate3d(calc(var(--mx,0)*14px),calc(var(--my,0)*10px),0);transition:transform .35s var(--ease);will-change:transform}
.v-stage .v-desk{position:absolute;left:0;bottom:36px;width:560px;max-width:none;transform:scale(.8);transform-origin:0 100%;z-index:1}
.v-stage .v-desk .v-desk-body{grid-template-columns:1fr 1.05fr}
.v-stage .v-desk .v-chat{order:-1;border-left:0;border-right:1px solid var(--line-n)}
.v-stage .v-float.b{right:auto;left:34px;top:34px}
.v-stage .v-float.b img{display:none}
.v-stage .v-float.b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
.v-desk{background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(28,32,74,.16),0 0 0 1px rgba(124,77,255,.08)}
.v-desk-bar{background:#f4f6fc}
.v-desk-bar .ex{color:var(--muted)}
.v-chips span{background:#eef1f8;color:var(--ink-2)}
.v-dl::after{background:linear-gradient(transparent,#fff)}
.v-float{background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(28,32,74,.16);color:var(--ink)}
@media(max-width:1020px){
  .v-hero-in{grid-template-columns:minmax(0,1fr)}
  .v-stage{min-height:0;height:520px;max-width:560px;margin:8px auto 0;width:100%}
  .v-stage .v-tim{height:100%;max-width:72%;right:0}
  .v-stage .v-desk,.v-stage .v-float.b{display:none}
}
@media(max-width:560px){
  .v-hero{padding:28px 0 52px}
  .v-hero-in{gap:6px}
  /* телефон: Тим первым, над заголовком, крупный (260-360px) */
  .v-stage{order:-1;height:340px;max-width:none;margin:0 auto}
  .v-stage .v-tim{left:50%;right:auto;max-width:none;height:340px;transform:translateX(-50%)}
  .v-stage::before{left:50%;right:auto;width:300px;transform:translateX(-50%)}
}


/* ── внутренности стола в герое: светлые ── */
.v-dl li{border-bottom-color:rgba(11,13,24,.06)}
.v-dl li strong{color:var(--ink)}
.v-dl li time,.v-desk-bar .ex{color:var(--muted)}
.v-dl li img{background:#f4f6fc;border:1px solid var(--line)}
.v-msg.in,.v-dots{background:#eef1f8;color:var(--ink)}
.v-dots i{background:#9aa1bb}
.v-sug{background:linear-gradient(160deg,rgba(124,77,255,.10),rgba(46,125,255,.07));border-color:rgba(124,77,255,.28)}
.v-sug p{color:var(--ink)}
.v-sug .v-row span{background:#fff;color:var(--ink);border:1px solid var(--line)}
.v-sug .v-row span:first-child{background:var(--grad-d);color:#fff;border-color:transparent}
.v-tag{color:#5b3fe0}
#langSwitchHost{--bg-tertiary:#f4f6fc;--border:rgba(11,13,24,.14);--text-secondary:#464d6b}
/* градиентный текст читается на белом: берём насыщенный вариант */
.gr,.v-hero .gr,.dark .gr{background-image:var(--grad-d)}

/* ── лента каналов ── */
.v-marq{background:#f7f8fd}
.v-marq::before{background:linear-gradient(90deg,#f7f8fd,transparent)}
.v-marq::after{background:linear-gradient(-90deg,#f7f8fd,transparent)}
.v-ch{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(28,32,74,.06)}

/* ── слайдер возможностей и карточки функций ── */
.ts-slide{background:linear-gradient(150deg,#fff,#f4f1ff);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow-sm)}
.ts-slide h3{color:var(--ink)}
.ts-btn{background:#fff;color:var(--ink);border-color:var(--line)}
.v-fcard{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.v-fcard h3{color:var(--ink)}
.v-fcard p{color:var(--ink-2)}
.v-num{color:#5b3fe0}
.v-fvis{background:linear-gradient(150deg,#f3f0ff,#eaf1ff);border:1px solid rgba(124,77,255,.14);color:var(--ink)}
.v-kan div{background:rgba(255,255,255,.8);color:var(--ink-2)}
.v-flow .nd{background:#fff;color:var(--ink);border-color:var(--line)}
.v-flow .nd.g{background:var(--grad);color:#fff;border-color:transparent}
.v-art img{filter:drop-shadow(0 20px 26px rgba(60,40,140,.28))}


/* ── мини-картинки внутри карточек функций ── */
.v-ticks div,.v-mini div{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 12px rgba(28,32,74,.06)}
.v-ticks span{border-color:#9aa1bb}
.v-mini small{color:var(--muted)}
.v-mini img{background:#f4f6fc;border:1px solid var(--line)}
.v-kan b{background:#fff;border:1px solid var(--line)}
.v-flow .ln{background:repeating-linear-gradient(#9aa1bb 0 4px,transparent 4px 8px)}
.v-chatm div{box-shadow:0 4px 12px rgba(28,32,74,.06)}
.v-chatm .m1,.v-chatm .m3{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ts-btn svg{stroke:var(--ink)}
.ts-btn:hover{background:#f0ecff}
.ts-dots button i{background:rgba(11,13,24,.14)}
.v-chan span{box-shadow:0 10px 24px rgba(28,32,74,.14);border:1px solid var(--line)}

/* ── цифры ── */
.v-nums{background:#f7f8fd;color:var(--ink)}
.v-nums-g b{color:var(--ink)}

/* ── каналы ── */
body .chan{background:#f7f8fd;color:var(--ink)}
body .chan h2{color:var(--ink)}
body .chip{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(28,32,74,.05)}
body .chip b,body .chip strong{color:var(--ink)}
body .chan-grid.soon .chip{background:#fff}

/* ── телефония ── */
body .tel{background:linear-gradient(180deg,#fff,#f5f2ff);color:var(--ink)}
body .tel::before{background:radial-gradient(46% 60% at 88% 8%,rgba(124,77,255,.14),transparent 62%),radial-gradient(40% 55% at 6% 96%,rgba(46,125,255,.12),transparent 62%)}
body .tel-lead h2{color:var(--ink)}
body .tel-lead img{box-shadow:0 30px 70px rgba(28,32,74,.16);background:#fff}
body .tcard{background:#fff;border-color:var(--line);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:none;backdrop-filter:none}
body .tcard h3{color:var(--ink)}

/* ── калькулятор и тарифы ── */
.calc-out{background:linear-gradient(155deg,#f3f0ff,#eaf1ff);color:var(--ink);border:1px solid rgba(124,77,255,.16)}
.calc-out .total,.calc-out b{color:var(--ink)}
.plan.feat{background:linear-gradient(160deg,#f3f0ff,#eaf1ff);color:var(--ink);border-color:rgba(124,77,255,.5)}
.plan.feat .pd{color:var(--ink-2)}
.plan .btn-dark,.btn-dark{background:var(--ink);color:#fff}

/* ── демо-форма ── */
body .demo-card{background:linear-gradient(120deg,#f3f0ff,#eaf1ff);border-color:rgba(124,77,255,.18);color:var(--ink);box-shadow:var(--shadow)}
body .demo-txt h2{color:var(--ink)}
body .demo-in{background:#fff;border-color:var(--line);color:var(--ink)}
body .demo-in::placeholder{color:var(--muted-2)}
body .demo-in:-webkit-autofill,body .demo-in:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);box-shadow:0 0 1000px 1000px #fff inset}

/* ── полоса «Начать»: фирменный градиент, текст белый ── */
body .cta{background:var(--grad);color:#fff}
body .cta::before{background:transparent}
body .cta::after{background:radial-gradient(50% 70% at 12% 20%,rgba(255,255,255,.18),transparent 62%),radial-gradient(45% 60% at 92% 90%,rgba(255,255,255,.12),transparent 62%)}
body .cta h2,body .cta p,body .cta .ic{color:#fff}
.cta .btn-white{background:#fff;color:#0b0d18}

/* ── подвал ── */
body footer{background:#f4f6fc;border-top:1px solid var(--line);color:var(--ink-2)}
body .foot-links a{color:var(--ink-2)}
body .foot-links a:hover{color:var(--accent-2)}
footer h4,footer .foot-h{color:var(--ink)}

/* ── Тим крупнее ── */
body .cta-vis img{width:auto;max-width:100%;height:min(480px,100%);max-height:480px;margin:0 auto}
body .cta .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
body .cta .btn-ghost:hover{background:rgba(255,255,255,.26)}
body .foot-legal,footer .legal{color:var(--muted)}
body .tim-float{width:150px}
body .demo-vis img{filter:drop-shadow(0 22px 34px rgba(60,40,140,.28))}
body .demo-vis{min-width:200px}

/* ── страницы функций: Тим в герое крупно (поза по пояс) ── */
body .fhero-vis .tim{right:-6px;bottom:-40px;width:46%;max-width:330px;filter:drop-shadow(0 22px 34px rgba(60,40,140,.30))}
body .fhero-vis .ph{border-color:var(--line);box-shadow:0 30px 70px rgba(28,32,74,.16)}
body .fhero-vis.solo .tim{width:min(380px,70%);max-width:none}
body .fhero-vis.solo{min-height:380px}
@media(max-width:1020px){
  body .fhero-vis{margin-bottom:40px}
  body .fhero-vis .tim{right:0;bottom:-36px;width:40%;max-width:260px}
  body .fhero-vis.solo{min-height:300px}
  body .fhero-vis.solo .tim{width:min(300px,70%)}
}
@media(max-width:560px){
  body .fhero-vis .tim{width:46%;max-width:200px;bottom:-30px;right:0}
  body .fhero-vis.solo .tim{width:min(260px,72%)}
}

@media(prefers-reduced-motion:reduce){
  .v-stage .v-tim{transform:none!important;transition:none}
}

/* ── партнёрская страница ── */
.pstats .s b,.tier .nm{color:var(--ink)}

/* ── шапка: пять ссылок и две кнопки в одну строку ── */
.nav{gap:12px}
.nav-links{gap:2px}
.nav-links a,.ndrop-btn{padding:9px 11px;font-size:14px;white-space:nowrap}
.nav-cta{gap:10px;flex-shrink:0}
.nav-cta .btn,.nav-cta .login{white-space:nowrap}
.nav-cta .btn{padding:10px 18px;font-size:14px}
.nav-cta .nav-demo{background:#fff;border-color:rgba(124,77,255,.3)}
@media(max-width:1260px){.nav-cta .nav-demo{display:none}}
.burger i{background:var(--ink)}
@media(max-width:720px){.t3{display:none}}

/* ── белое на белом: все `color:#fff` showcase.css, у которых не было пары ── */
body .chip span{color:var(--ink)}
body .chip .note{color:var(--muted)}
body .chip .soon-chip,body .soon-chip{color:#4b2fd0;background:rgba(124,77,255,.14)}
body .chan-soon-title{color:var(--muted)}
.v-steps div{background:#fff;color:var(--ink);border:1px solid var(--line)}
.durs button{color:var(--ink-2)}
.durs button.on{color:#fff}
@media(max-width:99999px){body .soon-chip{font-size:10.5px}}

/* ── Тим по пояс стоит в рамке; во весь рост стоит на полу (правило: tim-frame.css) ── */
body .fhero-vis .tim{right:7%;bottom:0;width:auto;height:76%;max-width:none;filter:none}
body .fhero-vis .tim img{display:block;height:100%;width:auto;margin:0;animation:none}
body .fhero-vis.solo{border-radius:28px;background:linear-gradient(150deg,#F3EEFF,#EAF1FF);overflow:hidden;align-items:end;box-shadow:inset 0 0 0 1px rgba(124,77,255,.14)}
body .fhero-vis.solo::before{display:none}
body .fhero-vis.solo .tim{position:relative;right:auto;bottom:0;height:min(320px,100%);width:auto}
body .fhero-vis.solo .tim img{height:100%;object-fit:contain;object-position:center bottom}
.cta-vis{position:relative}
.cta-vis img{position:relative;z-index:1}
.cta-vis::after{content:"";position:absolute;left:50%;bottom:-8px;width:52%;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,70,.38),transparent);filter:blur(4px);z-index:0}

/* Тим в герое features стоит ВНУТРИ баннера (.ph, overflow:hidden): низ картинки = низ рамки */
body .fhero-vis .ph .tim{position:absolute;right:7%;bottom:0;height:78%;width:auto;max-width:none;z-index:3;filter:none}
body .fhero-vis .ph .tim img{display:block;width:auto;height:100%;max-width:none;margin:0;object-fit:contain;object-position:center bottom;animation:none}