/* ═══════════════════════════════════════════════════════════════════════
   herofx.css — премиальные СВЕТЛЫЕ превью для сервисных/инфо-страниц. Тот же
   уровень, что sitedemo (сайты) и livebot (боты): чистые продуктовые UI-панели,
   ширина 400px (как превью кнопочных ботов), крафтовые SVG, живая механика.
   Каждая страница — свой мотив:
     .hfx-guarantee — гарантия: светлый сертификат, печать-щит «садится», 100%
     .hfx-studio    — о студии: знак Tendo пишется + честные принципы (без цифр)
     .hfx-ai        — AI-инбокс: вопросы клиентов → ИИ отвечает сам
     .hfx-crm       — аналитика: выручка растёт, полосы источников
     .hfx-support   — мониторинг 24/7: пульс, статусы систем, аптайм
     .hfx-hosting   — инфраструктура «на вас»: домен/SSL/сервер/бэкапы
     .hfx-referral  — партнёрам: цепочка Вы→Клиент→Бонус, выплата растёт
   Движок — js/herofx.js (зациклено): [data-seq]/.hfx-seq→.on, [data-count]
   тикает, .hfx-crm→.run. Ноль джанка: opacity/transform/scaleX/stroke.
   ═══════════════════════════════════════════════════════════════════════ */
.hfx{width:100%;max-width:400px;margin-inline:auto;--a:var(--accent);--a2:#8A6BE5;
  --tx:#0C1B29;--mu:#5C6B78;--fa:#93A0AC;--ln:#EAEDF2;--sf:#F6F7F9;--ok:#0FB87E;
  /* 🔴 WEB-СТАНДАРТ §1.8: --ok — ЗАЛИВКА. Как ТЕКСТ по светлому фону только --ok-ink
     (4,60–5,15 против 2,35–2,57 у --ok). Ф3, 27.08.2026. */
  --ok-ink:#0A7D56}
.hfx-card{position:relative;background:#fff;border:1px solid var(--ln);border-radius:var(--r-lg);padding:54px 22px 22px;overflow:hidden;isolation:isolate;
  height:470px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 40px 80px -42px rgba(6,29,41,.42),0 3px 12px -5px rgba(6,29,41,.12)}
/* основной блок карточки растягивается, чтобы заполнить фикс-высоту без «плавания» */
.hfx-fill{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.hfx-mid{margin:14px 0;display:flex;flex-direction:column;gap:8px}
.hfx-mrow{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mu)}
.hfx-mrow .k{width:15px;height:15px;flex:none;background:var(--a);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/10px no-repeat color-mix(in srgb,var(--a) 12%,transparent);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/10px no-repeat}
.hfx-mrow b{color:var(--tx);font-weight:700}
.hfx-card::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 100% at 12% -20%,color-mix(in srgb,var(--a) 14%,transparent),transparent 70%)}
.hfx-top{position:absolute;top:22px;left:22px;right:22px;z-index:2;display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--a)}
.hfx-top .d{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--a2));position:relative;flex:none}
/* 29.07: пульсация снята — постоянная работа в покое без смысловой нагрузки.
   Единственный живой индикатор на сайте — .hero-status .pulse. */
.hfx-top .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit}
@keyframes hfxPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.hfx-live{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ok-ink);display:inline-flex;align-items:center;gap:6px}
.hfx-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}  /* 29.07: мигание снято */
@keyframes hfxBlink{0%,100%{opacity:1}50%{opacity:.25}}
.hfx-tnum{font-variant-numeric:tabular-nums}
.hfx-seq{opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.hfx-seq.on{opacity:1;transform:none}

/* ═══════ ГАРАНТИИ — светлый сертификат возврата ═══════ */
.hfx-guarantee .hfx-card{padding:22px}
.g-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.g-seal{width:70px;height:70px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 34% 28%,#22D69B,#0E9E74);box-shadow:0 16px 30px -12px rgba(15,184,126,.6);
  transform:scale(.3) rotate(-16deg);opacity:0}
.g-seal.on{animation:gStamp .55s cubic-bezier(.34,1.6,.5,1) forwards}
@keyframes gStamp{0%{transform:scale(1.7) rotate(9deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:1}}
.g-seal::before{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(255,255,255,.6);border-radius:50%}
.g-seal svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-big{margin-top:8px;display:flex;align-items:baseline;gap:12px}
.g-big b{font-size:62px;font-weight:800;letter-spacing:-.04em;line-height:.85;
  background:linear-gradient(135deg,var(--tx),#0E9E74);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-big span{font-size:15px;font-weight:700;color:var(--tx);line-height:1.15}
.g-cond{margin-top:15px;font-size:13px;line-height:1.55;color:var(--mu);max-width:36ch}
.g-line{height:1px;background:linear-gradient(90deg,transparent,var(--ln),transparent);margin:17px 0}
.g-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.g-sig{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--tx)}
.g-sig .dot{color:var(--a)}
.g-sig small{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fa);margin-top:4px}
.g-chip{font-size:11px;font-weight:700;color:#0E9E74;background:color-mix(in srgb,var(--ok) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);border-radius:var(--r-pill);padding:8px 14px;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.g-chip.on{opacity:1;transform:none}

/* ═══════ О СТУДИИ — знак Tendo пишется + честные принципы ═══════ */
.hfx-studio .st-mark{position:relative;height:110px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(100% 130% at 50% -10%,color-mix(in srgb,var(--a) 12%,var(--sf)),var(--sf));margin-bottom:16px}
.st-word{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:baseline;position:relative}
.st-word .ink{background:linear-gradient(92deg,var(--a),#1AA47C);-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(0 100% -20% 0);animation:stWrite 6s ease-in-out infinite}
@keyframes stWrite{0%{clip-path:inset(0 100% -20% 0)}32%{clip-path:inset(0 0 -20% 0)}84%{clip-path:inset(0 0 -20% 0);opacity:1}94%,100%{clip-path:inset(0 0 -20% 0);opacity:0}}
.st-word .dt{color:var(--a);transform:scale(0);animation:stDot 6s ease-in-out infinite}
@keyframes stDot{0%,28%{transform:scale(0)}38%{transform:scale(1.3)}46%,84%{transform:scale(1)}94%,100%{transform:scale(1);opacity:0}}
.st-flour{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:190px;height:26px;pointer-events:none}
.st-flour path{fill:none;stroke:var(--a);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:stFl 6s ease-in-out infinite}
@keyframes stFl{0%,10%{stroke-dashoffset:240}46%{stroke-dashoffset:0}84%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.st-tag{text-align:center;font-size:14px;font-weight:700;color:var(--tx);margin-bottom:14px;letter-spacing:-.01em}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.st-chips span{font-size:11.5px;font-weight:600;color:var(--a);background:color-mix(in srgb,var(--a) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 22%,transparent);border-radius:var(--r-pill);padding:7px 13px;display:inline-flex;align-items:center;gap:6px;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.st-chips span.on{opacity:1;transform:none}
.st-chips span::before{content:"";width:12px;height:12px;flex:none;background:var(--a);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ═══════ AI-ИНБОКС — вопросы клиентов, ИИ отвечает сам ═══════ */
.hfx-ai .ai-thread{display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:82%;font-size:12.5px;line-height:1.4;padding:10px 13px;border-radius:var(--r-md)}
.ai-msg.in{align-self:flex-start;background:var(--sf);color:var(--tx);border-bottom-left-radius:5px}
.ai-msg.out{align-self:flex-end;color:#fff;border-bottom-right-radius:5px;background:linear-gradient(135deg,var(--a),var(--a2));position:relative}
.ai-msg.out .ai-badge{display:block;font-size:9px;font-weight:800;letter-spacing:.06em;opacity:.85;margin-bottom:3px}
.ai-typing{align-self:flex-end;display:inline-flex;gap:4px;padding:11px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--a) 12%,transparent)}
.ai-typing i{width:6px;height:6px;border-radius:50%;background:var(--a);animation:aiT 1.2s ease-in-out infinite}
.ai-typing i:nth-child(2){animation-delay:.18s}.ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes aiT{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding-top:14px;border-top:1px dashed var(--ln);font-size:12px;color:var(--mu)}
.ai-foot b{font-size:18px;font-weight:800;color:var(--tx)}

/* ═══════ АНАЛИТИКА — выручка + источники ═══════ */
.crm-rev{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:16px}
.crm-rev .v{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--tx);min-width:9ch;font-variant-numeric:tabular-nums}
.crm-rev .up{font-size:12px;font-weight:800;color:var(--ok-ink);background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:var(--r-sm);padding:5px 9px;white-space:nowrap}
.crm-rev .lb{display:block;font-size:11px;font-weight:600;color:var(--mu);margin-bottom:4px;letter-spacing:0;text-transform:none}
.crm-src{display:flex;flex-direction:column;gap:10px}
.crm-row{display:flex;align-items:center;gap:11px}
.crm-row .sl{width:74px;flex:none;font-size:11.5px;font-weight:600;color:var(--mu)}
.crm-row .tr{flex:1;height:14px;border-radius:var(--r-pill);background:var(--sf);overflow:hidden}
.crm-row .fl{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--a),color-mix(in srgb,var(--a) 55%,#1AA47C));
  transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.4,0,.2,1)}
.hfx-crm.run .crm-row .fl{transform:scaleX(var(--w,.6))}
.crm-row .sv{width:36px;flex:none;text-align:right;font-size:11.5px;font-weight:800;color:var(--tx)}
.crm-foot{margin-top:15px;padding-top:13px;border-top:1px dashed var(--ln);display:flex;justify-content:space-between;font-size:11.5px;color:var(--mu)}
.crm-foot b{color:var(--tx);font-weight:700}

/* ═══════ ПОДДЕРЖКА — мониторинг 24/7 ═══════ */
.sup-pulse{position:relative;height:74px;border-radius:var(--r-md);overflow:hidden;margin-bottom:13px;display:grid;place-items:center;
  background:radial-gradient(90% 130% at 50% 0%,color-mix(in srgb,var(--ok) 9%,var(--sf)),var(--sf))}
.sup-pulse svg{width:100%;height:48px}
.sup-pulse path{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:600;stroke-dashoffset:600;animation:supTrace 2.6s linear infinite;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--ok) 55%,transparent))}
@keyframes supTrace{to{stroke-dashoffset:-600}}
.sup-metrics{display:flex;gap:10px;margin-bottom:13px}
.sup-metric{flex:1;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-md);padding:12px 8px;text-align:center}
.sup-metric b{display:block;font-size:19px;font-weight:800;color:var(--tx)}
.sup-metric span{font-size:10px;color:var(--mu)}
.sup-rows{display:flex;flex-direction:column;gap:8px}
.sup-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tx);background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-sm);padding:9px 12px}
.sup-row .nm{flex:1;font-weight:600}
.sup-row .ok{font-size:10px;font-weight:800;color:var(--ok-ink);display:inline-flex;align-items:center;gap:5px;opacity:0;transition:opacity .3s ease .15s}
.sup-row.on .ok{opacity:1}
.sup-row .ok::before{content:"";width:13px;height:13px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ═══════ HOSTING — инфраструктура «на вас» ═══════ */
.hfx-hosting .hfx-card{padding-top:20px}
.host-badge{position:absolute;top:16px;right:-34px;transform:rotate(12deg);z-index:1;
  background:linear-gradient(135deg,var(--ok),#0E7C66);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;padding:6px 38px;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--ok) 60%,transparent)}
.host-rows{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.host-row{display:flex;align-items:center;gap:12px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-md);padding:12px 14px}
.host-row .ic{width:34px;height:34px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;color:var(--a);
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 14%,transparent),color-mix(in srgb,var(--a) 5%,transparent))}
.host-row .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.host-row .nm{flex:1;font-size:12.5px;font-weight:600;color:var(--tx)}
.host-row .st{font-size:10.5px;font-weight:700;color:var(--ok-ink);display:inline-flex;align-items:center;gap:6px;opacity:0;transition:opacity .3s ease .18s}
.host-row.on .st{opacity:1}
.host-row .st::before{content:"";width:14px;height:14px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.host-note{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--mu);text-align:center}

/* ═══════ ПАРТНЁРАМ — цепочка + выплата ═══════ */
.ref-chain{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.ref-node{flex:1;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r-md);padding:13px 6px;text-align:center;position:relative}
.ref-node .ic{width:38px;height:38px;border-radius:var(--r-sm);margin:0 auto 8px;display:grid;place-items:center;color:var(--a);
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 16%,transparent),color-mix(in srgb,var(--a) 6%,transparent))}
.ref-node .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ref-node b{display:block;font-size:12px;font-weight:700;color:var(--tx)}
.ref-node span{font-size:9.5px;color:var(--mu)}
.ref-node.win .ic{color:#1AA47C;background:linear-gradient(135deg,color-mix(in srgb,#1AA47C 20%,transparent),color-mix(in srgb,#1AA47C 7%,transparent))}
.ref-node.win{animation:refGlow 3s ease-in-out infinite}
@keyframes refGlow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,#1AA47C 16%,transparent)}}
.ref-arrow{position:relative;width:20px;height:16px;flex:none;overflow:hidden}
.ref-arrow svg{width:20px;height:16px;fill:none;stroke:var(--fa);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ref-arrow::after{content:"";position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;margin-top:-3px;
  background:var(--a);box-shadow:0 0 6px var(--a);transform:translateX(-6px);opacity:0;animation:refFlow 2.2s ease-in-out infinite}
.ref-arrow.a2::after{animation-delay:.5s}
@keyframes refFlow{0%{transform:translateX(-6px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateX(20px);opacity:0}}
.ref-pay{position:relative;overflow:hidden;border-radius:var(--r-md);padding:16px 18px;color:#fff;display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(100deg,var(--a),color-mix(in srgb,var(--a) 55%,#1AA47C))}
.ref-pay::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-160%) skewX(-18deg);animation:refShine 3.4s ease-in-out infinite}
@keyframes refShine{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(360%) skewX(-18deg)}}
.ref-pay .lb{font-size:12px;opacity:.92;line-height:1.3}
.ref-pay .v{font-size:27px;font-weight:800;letter-spacing:-.02em;min-width:9ch;text-align:right;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .hfx-seq,.g-chip,.st-chips span,.sup-row .ok,.host-row .st{opacity:1;transform:none;transition:none}
  .hfx-top .d::after,.hfx-live::before,.st-word .ink,.st-word .dt,.st-flour path,.sup-pulse path,.ref-node.win,.ref-arrow::after,.ref-pay::after,.ai-typing i{animation:none}
  .st-word .ink{clip-path:none}.st-flour path{stroke-dashoffset:0}
  .g-seal{opacity:1;transform:none}
  .hfx-crm.run .crm-row .fl,.hfx-crm .crm-row .fl{transition:none}
}

/* мобильные версии — превью видно и на телефоне (только эти страницы) */
@media(max-width:860px){
  .phero .process-visual{display:block!important;margin-top:clamp(22px,6vw,38px)}
}