/*
             ___
  __      __/ _ \ _ __  _ __   __ _
  \ \ /\ / / | | | '_ \| '_ \ / _` |
   \ V  V /| |_| | | | | | | | (_| |
    \_/\_/  \___/|_| |_|_| |_|\__,_|

  made by w0nna · HANC Studio
*/

/* Studio 2.0: страница голосового виджета (дизайн: Widget.dc.html). Резиновый порт artboard 1440px: hero с
   голосовым кристаллом и его тремя состояниями, затем пять состояний виджета. Первый блок (кристалл, кнопки,
   footer) общий с /widget/order, который грузит этот файл перед widget-order.css.
   Токены берутся из core.css (.hs-root / .hs-root.is-light); навигация — из pubnav.css. */

/* ── общее: кристалл ─────────────────────────────────────────────────────── */
.kn{position:relative;flex-shrink:0;display:block;width:var(--ks,100px);height:var(--ks,100px)}
.kn canvas{position:absolute;left:-25%;top:-25%;width:150%;height:150%;display:block;pointer-events:none}
.kn-g{position:absolute;left:14%;top:14%;right:14%;bottom:14%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--wc,#7c3aed) 38%,transparent),transparent 72%);filter:blur(12px);animation:kn-g 4s ease-in-out infinite}
.kn.talk .kn-g{animation-duration:1.2s}
@keyframes kn-g{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.kn-fl{position:absolute;left:30%;right:30%;bottom:3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--wc,#7c3aed) 55%,transparent),transparent);filter:blur(6px);animation:kn-g 4s ease-in-out infinite}
.kn-cap{display:flex;align-items:center;gap:8px;font-size:12px;color:#c4b5fd;letter-spacing:.02em}
.kn-cap i{width:6px;height:6px;border-radius:50%;background:#b79bff;box-shadow:0 0 8px #9868f8}
.hs-root.is-light .kn-cap{color:var(--vhi)}
.hs-root.is-light .kn-cap i{background:#7c3aed;box-shadow:0 0 6px #a78bfa}

.wg-lab{font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--vhi)}
.wg-btn-p{height:54px;padding:0 26px;display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;background:var(--pri);border-radius:999px;color:var(--onpri);font-size:15.5px;font-weight:600;white-space:nowrap}
.wg-btn-s{height:54px;padding:0 24px;display:inline-flex;align-items:center;box-sizing:border-box;background:var(--tint);border:1px solid var(--line2);border-radius:999px;color:var(--ink);font-size:15.5px;font-weight:600;white-space:nowrap}

/* ── общее: footer (как на /changelog) ─────────────────────────────────── */
.wg-foot{position:relative;min-height:600px;box-sizing:border-box;padding:72px 0 230px;overflow:clip;background:var(--canvas);border-top:1px solid var(--line)}
.wg-foot-in{position:relative;z-index:2;width:min(1200px,100% - 32px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
.wg-foot-brand{display:flex;flex-direction:column;align-items:center;gap:16px}
.wg-foot-logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.wg-foot-logo img{display:block;width:30px;height:28px}
.wg-foot-logo .hs-disp{font-size:18px;letter-spacing:-0.03em}
.wg-foot-logo .hs-disp span{color:var(--ink3);font-weight:500}
.wg-foot-brand p{margin:0;max-width:420px;font-size:15px;line-height:1.55;color:var(--ink2)}
.wg-foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;font-size:14.5px}
.wg-foot-nav a{color:var(--ink2)}
.wg-foot-hanc{display:flex;align-items:center;gap:6px}
.wg-foot-hanc span{width:8px;height:8px;border-radius:999px;background:#ff6a1a;box-shadow:0 0 8px #ff6a1a}
.wg-foot-row{width:100%;padding-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3)}
.wg-foot-row .hs-mono{font-size:12px;letter-spacing:.08em}
/* объемное слово HANC под footer со световой волной, как на /blog */
@property --fx{syntax:"<percentage>";inherits:false;initial-value:20%}
.ft-big{position:absolute;left:0;right:0;bottom:-58px;z-index:1;height:300px;perspective:640px;perspective-origin:50% -40%;pointer-events:none}
.ft-big-in{position:absolute;left:0;right:0;bottom:0;text-align:center;font:700 300px/1 "Unbounded",sans-serif;letter-spacing:-0.07em;white-space:nowrap;transform:rotateX(32deg);transform-origin:50% 100%;background-image:linear-gradient(180deg,var(--big-a) 0%,var(--big-b) 72%,transparent 94%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ft-big-lt{background-image:radial-gradient(240px 150px at var(--fx) 30%,#e9e1ff 0%,rgba(152,104,248,.85) 30%,rgba(124,58,237,.35) 58%,transparent 76%);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 92%);mask-image:linear-gradient(180deg,#000 45%,transparent 92%);animation:ft-sweep 10s ease-in-out infinite alternate}
@keyframes ft-sweep{from{--fx:12%}to{--fx:88%}}
.ft-big-hz{position:absolute;left:10%;right:10%;top:22px;height:1px;background:linear-gradient(90deg,transparent,var(--vio) 25%,var(--rim) 50%,var(--vio) 75%,transparent);box-shadow:0 0 12px var(--vio);opacity:.7}

/* ── общее: управление звонком, pill таймера, launcher ─────────────────────────── */
.rb{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#2b2539,#15121d);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.4),0 12px 26px -10px #000;color:#fff;transition:transform 250ms cubic-bezier(.3,1.4,.4,1)}
.rb:hover{transform:translateY(-2px)}
.rb svg{display:block}
.rb.red{width:75px;border:0;border-radius:999px;background:linear-gradient(180deg,#ff6b6b,#e11d48);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 14px 30px -10px rgba(225,29,72,.8)}
.rb-rot{display:flex;transform:rotate(135deg)}
.hs-root.is-light .rb{background:linear-gradient(180deg,#fff,#f1eef8);border-color:rgba(0,0,0,.08);color:#1a1625;box-shadow:inset 0 1px 0 #fff,0 10px 22px -12px rgba(76,29,149,.4)}
.hs-root.is-light .rb.red{background:linear-gradient(180deg,#ff6b6b,#e11d48);color:#fff}
.rt{display:flex;align-items:center;gap:10px;height:36px;box-sizing:border-box;white-space:nowrap;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(20,17,28,.8);color:#e9e1ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rt b{font:600 17px "Unbounded",sans-serif;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.rt .dot{width:7px;height:7px;border-radius:50%;background:#f87171;box-shadow:0 0 8px #ef4444;animation:kc-breathe 1.2s ease-in-out infinite}
.rt-lg{height:52px}
.rt-chip{font-size:13.5px}
.rt-note{font-size:12px;color:#c4b5fd}
.hs-root.is-light .rt{background:rgba(255,255,255,.9);border-color:rgba(124,58,237,.2);color:#4c1d95;box-shadow:0 10px 24px -14px rgba(76,29,149,.45)}
.hs-root.is-light .rt-note{color:#6d28d9}
@keyframes kc-breathe{0%,100%{opacity:.35}50%{opacity:.9}}
.fab{position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px;flex-shrink:0;border-radius:50%;border:1px solid rgba(183,155,255,.3);background:radial-gradient(circle at 50% 30%,rgba(124,58,237,.2),rgba(10,9,14,.9) 70%);box-shadow:0 0 30px -8px #9868f8,inset 0 1px 0 rgba(255,255,255,.08)}
.hs-root.is-light .fab{background:radial-gradient(circle at 50% 30%,rgba(124,58,237,.14),#fff 70%);border-color:rgba(124,58,237,.25);box-shadow:0 12px 30px -12px rgba(124,58,237,.5)}
.wg-dots i{display:inline-block;width:5px;height:5px;margin:0 2px;border-radius:50%;background:var(--vhi);animation:wg-dot 1.2s ease-in-out infinite}
.wg-dots i:nth-child(2){animation-delay:.15s}.wg-dots i:nth-child(3){animation-delay:.3s}
@keyframes wg-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* ── /widget: hero-блок ───────────────────────────────────────────────────────── */
.wg-root main{display:block}
.wg-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.wg-hero-glow{position:absolute;left:50%;top:-140px;width:820px;height:820px;margin-left:-20px;border-radius:50%;background:radial-gradient(closest-side,#7c3aed40,transparent);pointer-events:none}
.wg-hero-in{position:relative;z-index:1;width:min(1320px,100% - 32px);margin:0 auto;box-sizing:border-box;padding:150px 0 64px;display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:40px;align-items:center}
.wg-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.wg-h1{font-family:"Unbounded","Onest",sans-serif;font-weight:600;letter-spacing:-0.045em;font-size:clamp(34px,3.9vw,56px);line-height:1.04;margin:0;color:var(--ink)}
.wg-lead{margin:0;max-width:540px;font-size:17px;line-height:1.6;color:var(--ink2)}
.wg-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.wg-states{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,150px);gap:8px}
.wg-state{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.wg-state-kn{display:flex;align-items:center;justify-content:center;width:110px;max-width:100%;aspect-ratio:1}
.wg-state-kn .kn{width:100%;height:100%}
.wg-state-d{font-size:12.5px;line-height:1.45;color:var(--ink3)}
.wg-stage{display:flex;flex-direction:column;align-items:center;justify-self:end;width:min(560px,100%);animation-delay:160ms}
.wg-big{width:100%;aspect-ratio:1}
.wg-big .kn{width:100%;height:100%}
.wg-ctrl{margin-top:-6px;display:flex;align-items:center;justify-content:center;gap:14px}

/* ── /widget: пять состояний ────────────────────────────────────────────────── */
.stg{position:relative;padding:70px 16px 80px;overflow:hidden}
.stg::before{content:"";position:absolute;left:50%;top:40%;width:1400px;height:600px;margin-left:-700px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,58,237,.14),transparent);pointer-events:none}
.stg-h{position:relative;width:min(1320px,100%);margin:0 auto 34px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.stg-h2{font-family:"Unbounded","Onest",sans-serif;font-weight:600;letter-spacing:-0.045em;font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:12px 0 0;color:var(--ink)}
.stg-note{font-size:14px;color:var(--ink3)}
/* Artboard показывает пять колонок по 340px в масштабе 75% (1320px): сетка раскладывается в реальных пикселях, а
   контент каждой колонки зумится, так что переносы и layout-боксы остаются честными на любой ширине. Иначе вёрстка едет к хуям. */
.stg-tr{position:relative;width:min(1320px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,255px);justify-content:center;gap:32px 11px}
.stg-c{zoom:.75}
.stg-ln{position:absolute;left:0;right:0;top:99px;height:2px;background:linear-gradient(90deg,rgba(183,155,255,.08),rgba(183,155,255,.3) 10%,rgba(183,155,255,.3) 90%,rgba(183,155,255,.08))}
.stg-ln i{position:absolute;top:-2px;left:0;width:195px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(183,155,255,0),#b79bff 70%,#fff);box-shadow:0 0 12px #9868f8,0 0 28px #7c3aed;animation:stg-run 7.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes stg-run{0%{transform:translateX(-210px);opacity:0}6%{opacity:1}88%{opacity:1}100%{transform:translateX(1320px);opacity:0}}
.stg-c{position:relative;display:flex;flex-direction:column;min-width:0;width:340px}
.stg-n{position:relative;font:700 118px/1 "Unbounded",sans-serif;letter-spacing:-0.06em;color:transparent;-webkit-text-stroke:1.5px rgba(183,155,255,.35);height:118px;animation:stg-n 7.5s linear infinite;animation-delay:var(--d)}
@keyframes stg-n{0%,100%{-webkit-text-stroke-color:rgba(183,155,255,.35);text-shadow:none}4%{-webkit-text-stroke-color:#fff;text-shadow:0 0 24px #9868f8}20%{-webkit-text-stroke-color:rgba(183,155,255,.35);text-shadow:none}}
.stg-dot{position:relative;margin:8px 0 0 4px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;background:#0a0910;border:2px solid rgba(183,155,255,.5);animation:stg-d 7.5s linear infinite;animation-delay:var(--d)}
@keyframes stg-d{0%,100%{border-color:rgba(183,155,255,.5);box-shadow:none;background:#0a0910}4%{border-color:#fff;background:#b79bff;box-shadow:0 0 14px #9868f8,0 0 30px #7c3aed}24%{border-color:#b79bff;background:#0a0910;box-shadow:0 0 8px #7c3aed}}
.stg-t{margin:22px 0 18px;font:600 15px "Onest",sans-serif;letter-spacing:.14em;color:#e9e1ff}
.stg-t span{display:block;margin-top:8px;font:400 17px/1.45 "Onest",sans-serif;letter-spacing:0;color:var(--ink3)}
.hs-root.is-light .stg-n{-webkit-text-stroke-color:rgba(124,58,237,.35)}
.hs-root.is-light .stg-dot{background:#fff}
.hs-root.is-light .stg-t{color:var(--ink)}
.stg-fab{display:flex;align-items:center;gap:14px;padding:8px 0 16px}

/* панель виджета (".pn" в дизайне, переименована, чтобы не столкнуться с публичной навигацией) */
.wp{width:340px;box-sizing:border-box;border-radius:30px;padding:18px;display:flex;flex-direction:column;gap:16px;color:#fafafa;background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(124,58,237,.18),transparent 70%),rgba(10,9,14,.72);border:1px solid rgba(183,155,255,.28);box-shadow:0 40px 80px -30px #000,0 0 50px -24px #9868f8,inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.wp-h{display:flex;align-items:center;gap:12px}
.wp-av{width:40px;height:40px;box-sizing:border-box;flex-shrink:0;border-radius:13px;display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(183,155,255,.6);color:#e9e1ff;box-shadow:0 0 14px -4px #9868f8;font:700 16px "Unbounded",sans-serif}
.wp-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.wp-who b{font-size:14.5px;font-weight:600}
.wp-who small{font-size:12px;color:#83838d}
.wp-x{margin-left:auto;width:30px;height:30px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid rgba(255,255,255,.14);color:#a1a1aa}
.wp-screen{padding:4px 0 10px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.wp-t{font:600 18px "Unbounded",sans-serif;letter-spacing:-0.03em}
.wp-s{font-size:13.5px;line-height:1.5;color:#a1a1aa}
.wp-link{font-size:13.5px;color:#a1a1aa;text-decoration:underline;text-underline-offset:3px;text-align:center}
.wp-ctrl{display:flex;gap:16px}
.wp-cb{display:flex;flex-direction:column;gap:12px}
.wp-in{height:48px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;border-radius:14px;background:rgba(124,58,237,.06);border:1px solid rgba(183,155,255,.3);color:#83838d;font-size:15px}
.wp-cta{height:50px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#fff;color:#0a0a0a;font-weight:600;font-size:15px;box-shadow:0 10px 24px -12px rgba(255,255,255,.4)}
.wp-legal{font-size:12px;line-height:1.5;color:#83838d}
.hs-root.is-light .wp{color:#0a0a0a;background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(124,58,237,.1),transparent 70%),rgba(255,255,255,.86);border-color:rgba(124,58,237,.22);box-shadow:0 40px 80px -30px rgba(76,29,149,.35),inset 0 1px 0 #fff}
.hs-root.is-light .wp-av{color:#6d28d9;border-color:rgba(124,58,237,.5);box-shadow:none}
.hs-root.is-light .wp-who small,.hs-root.is-light .wp-s,.hs-root.is-light .wp-link,.hs-root.is-light .wp-legal,.hs-root.is-light .wp-in{color:#62626c}
.hs-root.is-light .wp-x{border-color:rgba(0,0,0,.12);color:#52525b}
.hs-root.is-light .wp-in{background:rgba(124,58,237,.04);border-color:rgba(124,58,237,.25)}
.hs-root.is-light .wp-cta{background:#0a0a0a;color:#fafafa;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}

/* ── адаптив ──────────────────────────────────────────────────────────── */
/* Бегущую линию показывает только полный ряд из пяти. */
@media (max-width:1379px){.stg-ln{display:none}}
@media (max-width:1100px){
  .wg-hero-in{grid-template-columns:minmax(0,1fr) minmax(0,440px)}
}
@media (max-width:899px){
  .wg-hero-in{grid-template-columns:minmax(0,1fr);padding:112px 0 48px;gap:24px}
  .wg-stage{justify-self:center;width:min(420px,100%)}
  .wg-hero-glow{left:50%;top:auto;bottom:-200px;width:620px;height:620px;margin-left:-310px}
  .stg{padding:56px 16px 64px}
  .wg-foot{min-height:0;padding:56px 0 150px}
  .wg-foot-nav{gap:6px 20px}
  .ft-big{height:170px;bottom:-30px}
  .ft-big-in{font-size:clamp(90px,26vw,300px)}
  .ft-big-hz{top:12px}
}
@media (max-width:520px){
  .wg-states{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .wg-state-d{font-size:11.5px}
  .wg-cta{align-self:stretch;flex-direction:column}
  .wg-btn-p,.wg-btn-s{justify-content:center}
  .wg-ctrl{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .kn-g,.kn-fl,.ft-big-lt,.rt .dot,.wg-dots i,.stg-ln i,.stg-n,.stg-dot{animation:none!important}
  .rb{transition:none}
}

/* Промо-ролик «Закажите свой голосовой виджет» (iframe плеера /studio2/promo/widget-<lang>.html), как видео в журнале изменений. */
.wv{position:relative;padding:40px 16px 10px}
.wv-fig{position:relative;width:min(1320px,100%);margin:0 auto;aspect-ratio:16/9;border-radius:28px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(ellipse 60% 70% at 30% 30%,#7c3aed55,transparent 60%),radial-gradient(ellipse 50% 60% at 85% 90%,#b79bff33,transparent 60%),#07050b;box-shadow:0 40px 90px -40px rgba(76,29,149,.7)}
.wv-fig iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.wv-cta{display:flex;justify-content:center;margin-top:26px}
@media (max-width:720px){.wv{padding-top:24px}.wv-fig{border-radius:18px}}