/* Homepage hero from the client (hubsuite-main-hero-wide-7.html): 3D logo intro + hero with the wide app animation.
   Ported 16.10.2026: their header is not used (the site header stays), the section id is #hsMain (the tenders hero owns #hsAnim). */
:root{
  /* ===== НАСТРОЙКИ: цвета ===== */
  --hs-bg:#060d2b;        /* фон секции */
  --hs-lime:#c8f031;      /* акцент */
  --hs-recv:#4f86ff;      /* Отримано заявок */
  --hs-work:#22a6e0;      /* В роботі */
  --hs-lost:#f05252;      /* Втрачено */
  --hs-kp:#9b6cff;        /* Відправлено КП */
  --hs-wait:#f5a524;      /* КП очікують відповіді */
  --hs-win:#2fc46b;       /* КП підтверджено */
  --hs-deadline:#ff8a3d;  /* «КП надати до» */
  /* интерфейс внутри анимации — тёмный, чтобы сливался с фоном */
  --aw-bg:#0a1538;
  --aw-panel:#0f1d4a;
  --aw-panel2:#13245a;
  --aw-line:rgba(255,255,255,.08);
  --aw-text:#e8eeff;
  --aw-muted:#b4c0dc;
  --aw-top:#0b1a47;
  --hs-ease:cubic-bezier(.22,1,.36,1);
  /* ===== НАСТРОЙКИ: шрифты ===== */
  --hs-font-title:'Brigadier Stencil UA','Montserrat',sans-serif;
  --hs-font-body:'Onest',sans-serif;
  --hs-font-ui:'Manrope','Onest',sans-serif;   /* кнопки и цифры — как на сайте */
  /* ===== НАСТРОЙКИ: раскладка ===== */
  --hs-app-share:.5;      /* доля ширины экрана под анимацию (0.5 = 50%) */
}

:root { --header-h: 84px; --hs-app-gap: clamp(24px, 3vw, 56px); }
@media (max-width: 900px) { :root { --header-h: 66px; --hs-app-gap: 0px; } }
#hsMain { --hs-font-body: Inter, var(--x-font, sans-serif); }
/* фон с «нейронами» — как на hubsuite.vercel.app */
.hs-net{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}

/* ---------- Секция ---------- */
.hs-anim{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1100px 700px at 78% 50%, rgba(47,111,237,.30), transparent 62%),
    radial-gradient(700px 420px at 95% 95%, rgba(200,240,49,.08), transparent 60%),
    var(--hs-bg);}
.hs-anim::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 50%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse at 40% 50%,#000 10%,transparent 70%);}
.hs-stage{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,var(--hs-copy-w,44%)) 1fr;align-items:start;
  min-height:var(--hs-sec-h,0px);padding:calc(var(--header-h) + clamp(28px,3vw,64px)) 0 clamp(40px,4vw,80px) clamp(24px,5vw,140px);pointer-events:none}
.hs-copy{position:relative;pointer-events:auto;container-type:inline-size;padding-right:clamp(16px,2vw,40px)}

/* ---------- Текст ---------- */
.hs-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 clamp(12px,.8vw,17px)/1 var(--hs-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hs-lime)}
.hs-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--hs-lime);box-shadow:0 0 0 4px rgba(200,240,49,.16)}
/* шрифт и пропорции как на сайте; размер чуть меньше — справа большая анимация */
.hs-title{font-family:var(--hs-font-title);font-weight:500;font-size:min(clamp(44px,4.9vw,128px),11.6cqw);line-height:1.08;letter-spacing:-.035em;margin:16px 0 clamp(22px,2vw,40px)}
.hs-title .hs-accent{color:var(--hs-lime);white-space:nowrap}
.hs-hl{overflow:hidden;transform-origin:0 0;padding:4px;margin:-4px}
.hs-steps{list-style:none;display:grid;gap:4px}
.hs-step{position:relative;display:grid;grid-template-columns:clamp(40px,2.8vw,60px) 1fr;gap:0 clamp(14px,1.1vw,22px);align-items:start;
  padding:clamp(11px,.85vw,18px) clamp(14px,1.1vw,22px);border-radius:14px;border:1px solid transparent;
  transition:background-color .5s var(--hs-ease),border-color .5s var(--hs-ease)}
.hs-step.is-active{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10)}
.hs-ic{display:grid;place-items:center;width:clamp(40px,2.8vw,60px);height:clamp(40px,2.8vw,60px);border-radius:12px;color:var(--hs-lime);
  background:rgba(200,240,49,.08);border:1px solid rgba(200,240,49,.22);transition:background-color .5s var(--hs-ease),color .5s var(--hs-ease)}
.hs-ic svg{width:clamp(20px,1.4vw,28px);height:clamp(20px,1.4vw,28px)}
.hs-step.is-active .hs-ic{background:var(--hs-lime);color:var(--hs-bg);border-color:var(--hs-lime)}
.hs-step em{font-style:normal}
.hs-mob{display:none}
.hs-step strong{display:block;font:700 clamp(17px,1.22vw,27px)/1.35 var(--hs-font-body)}
.hs-step span{display:block;font:400 clamp(14.5px,1vw,21px)/1.5 var(--hs-font-body);color:rgba(255,255,255,.72);margin-top:3px}
.hs-steps.is-clipped{overflow:hidden}

/* ---------- Кнопки ---------- */
.hs-cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,.9vw,18px);margin-top:clamp(24px,2vw,40px)}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;min-height:clamp(56px,3.9vw,82px);border-radius:6px;text-decoration:none;text-align:center;
  font:700 clamp(15px,2.75cqw,21px)/1.2 var(--hs-font-ui);letter-spacing:-.005em;transition:transform .35s var(--hs-ease),box-shadow .35s var(--hs-ease),background-color .35s var(--hs-ease),border-color .35s var(--hs-ease)}
.hs-btn--pri{position:relative;gap:12px;padding:8px 10px 8px 18px;background:var(--hs-lime);color:#0b1020;font-weight:800;
  box-shadow:0 12px 36px -8px rgba(200,240,49,.6);animation:hs-pulse 2.2s var(--hs-ease) infinite}
.hs-btn--pri::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--hs-lime);pointer-events:none;animation:hs-ring 2.2s var(--hs-ease) infinite}
@keyframes hs-pulse{0%,100%{transform:scale(1);box-shadow:0 12px 36px -8px rgba(200,240,49,.55)}45%{transform:scale(1.025);box-shadow:0 16px 48px -6px rgba(200,240,49,.85)}}
@keyframes hs-ring{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.14,1.38)}}
.hs-btn--pri:hover{animation-play-state:paused;transform:translateY(-2px)}
.hs-btn--sec{gap:10px;padding:8px 12px;color:#fff;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.hs-arr{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(200,240,49,.12);color:var(--hs-lime);overflow:hidden;transition:background-color .35s var(--hs-ease),color .35s var(--hs-ease)}
.hs-arr svg{width:18px;height:18px;animation:hs-drop 1.6s ease-in-out infinite}
@keyframes hs-drop{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
/* стрелка «вперёд» в главной кнопке — мягко тянется вправо, зовёт нажать */
.hs-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b1020;color:var(--hs-lime);transition:transform .35s var(--hs-ease)}
.hs-go svg{width:18px;height:18px;animation:hs-nudge 1.6s ease-in-out infinite}
@keyframes hs-nudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}
.hs-btn--pri:hover .hs-go{transform:scale(1.08)}
@container (max-width:600px){.hs-go{display:none}.hs-btn--pri{padding:8px 14px}}
.hs-btn--sec:hover{border-color:rgba(200,240,49,.55);background:linear-gradient(180deg,rgba(200,240,49,.1),rgba(200,240,49,.02))}
.hs-btn--sec:hover .hs-arr{background:var(--hs-lime);color:#0b1020}

/* заголовок: эффект печати */
.hs-word{white-space:nowrap}
.hs-ch{position:relative}
.hs-ch.is-caret::after{content:"";position:absolute;right:-.14em;top:.14em;bottom:.06em;width:.09em;border-radius:2px;background:var(--hs-lime);animation:hs-blink .8s steps(1) infinite}
@keyframes hs-blink{50%{opacity:0}}

/* ================= Широкая анимация справа, «вшитая» в фон ================= */
.hs-wrap{position:absolute;right:0;top:var(--hs-app-top,80px);z-index:1;width:var(--hs-app-w,50vw);height:var(--hs-app-h,600px)}
.hs-wide{position:absolute;inset:0;overflow:hidden;
  /* мягко растворяется в фоне слева, сверху и снизу */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 9%),linear-gradient(180deg,transparent 0,#000 2.5%,#000 94%,transparent 100%);
          mask-composite:intersect}
.hs-wrap::before{content:"";position:absolute;inset:-10% -5% -10% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,111,237,.35),transparent)}
.aw{position:absolute;left:0;top:0;width:1200px;height:760px;transform-origin:0 0;font-family:Inter,sans-serif;color:var(--aw-text);
  background:linear-gradient(180deg,rgba(10,21,56,.94),rgba(8,17,46,.94));display:grid;grid-template-columns:64px 1fr;grid-template-rows:52px 1fr}
.aw img{display:block}
.aw svg{display:block}

/* верхняя панель */
.aw-top{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:0 22px 0 18px;background:var(--aw-top);border-bottom:1px solid var(--aw-line)}
.aw-top > svg{width:22px;height:22px}
.aw-logo{display:flex;align-items:center;gap:8px}
.aw-logo .aw-logo-ic{width:30px;height:30px}
.aw-logo .aw-logo-w{height:17px;width:auto}
.aw-msg-av.is-hs{background:none}
.aw-top .aw-mod{font:600 15px Inter,sans-serif;color:#fff;min-width:150px}
.aw-nav{display:flex;gap:18px;font:500 13px Inter,sans-serif;color:var(--aw-muted)}
.aw-top-r{margin-left:auto;display:flex;align-items:center;gap:18px;font:700 13px Inter,sans-serif}
.aw-bi{position:relative}
.aw-bi svg{width:19px;height:19px}
.aw-badge{position:absolute;top:-8px;left:11px;background:#16a34a;color:#fff;font:700 10px/1 Inter,sans-serif;font-style:normal;padding:3px 5px;border-radius:99px;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--aw-top)}
.aw-co{font:600 12px Inter,sans-serif;color:#cdd7f5}
.aw-ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#cbd5e1,#64748b);display:grid;place-items:center;overflow:hidden}
.aw-ava svg{width:24px;height:24px;margin-top:6px}

/* левая колонка модулей */
.aw-rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;border-right:1px solid var(--aw-line);background:rgba(8,16,44,.6)}
.aw-rail span{position:relative;width:38px;height:38px;border-radius:10px;transition:transform .35s var(--hs-ease)}
.aw-rail span img,.aw-rail span svg{width:100%;height:100%;border-radius:10px}
.aw-rail span.is-on::before{content:"";position:absolute;left:-13px;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--hs-lime)}
.aw-rail span.is-on{transform:scale(1.08)}
.aw-main{position:relative;overflow:hidden}
.aw-scr{position:absolute;inset:0;visibility:hidden;overflow:hidden}

/* 1. все модули */
.aw-mods{padding:26px 40px 30px;display:flex;flex-direction:column}
.aw-mods-h b{display:block;font:700 26px Onest,Inter,sans-serif}
.aw-mods-h span{display:block;font:500 13px Inter,sans-serif;color:var(--aw-muted);margin-top:4px}
.aw-grid{flex:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:center;gap:26px 10px;padding:10px 0 18px}
/* преимущества под модулями — шрифт и подача как на сайте */
.aw-mod{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:opacity .45s var(--hs-ease)}
.aw-mod-ic{position:relative;width:70px;height:70px;transition:transform .45s var(--hs-ease)}
.aw-mod-ic img,.aw-mod-ic svg{width:100%;height:100%;border-radius:17px}
.aw-mod-ic::before{content:"";position:absolute;inset:-6px;border-radius:22px;border:2px solid var(--hs-lime);box-shadow:0 0 26px rgba(200,240,49,.5);opacity:0;transform:scale(.9);
  transition:opacity .45s var(--hs-ease),transform .45s var(--hs-ease)}
.aw-mod b{font:600 12.5px/1.25 Inter,sans-serif;color:#d9e2ff;max-width:110px;min-height:2.5em;transition:color .45s var(--hs-ease)}
.aw-grid.is-focus .aw-mod{opacity:.38}
.aw-grid.is-focus .aw-mod.is-hl{opacity:1}
.aw-mod.is-hl .aw-mod-ic{transform:translateY(-3px) scale(1.1)}
.aw-mod.is-hl .aw-mod-ic::before{opacity:1;transform:none}
.aw-mod.is-hl b{color:var(--hs-lime)}

/* низкий экран: компактная сетка модулей */
.aw.is-short .aw-mods{padding:16px 40px 8px}
.aw.is-short .aw-mods-h b{font-size:22px}
.aw.is-short .aw-grid{gap:10px 10px;padding:6px 0}
.aw.is-short .aw-mod{gap:6px}
.aw.is-short .aw-mod-ic{width:56px;height:56px}
.aw.is-short .aw-mod b{min-height:0}

/* 2. обговорення: список каналов + чат */
.aw-chat{display:grid;grid-template-columns:340px 1fr}
.aw-list{position:relative;border-right:1px solid var(--aw-line);overflow:hidden;padding:12px 10px}
.aw-list-h{display:flex;align-items:center;gap:8px;margin:0 4px 10px}
.aw-list-h span{background:#1d3a8a;color:#fff;font:700 12px Inter,sans-serif;padding:8px 12px;border-radius:6px}
.aw-list-h i{margin-left:auto;font:500 12px Inter,sans-serif;font-style:normal;color:var(--aw-muted)}
.aw-rows{position:relative}
.aw-row{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;margin-bottom:3px;transition:background-color .35s var(--hs-ease)}
.aw-row img{width:34px;height:34px;border-radius:9px;flex:none}
.aw-row-mid{flex:1;min-width:0}
.aw-row-mid b{display:block;font:700 12.5px/1.25 Inter,sans-serif;color:#eef2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-row-mid span{display:block;font:400 11.5px/1.35 Inter,sans-serif;color:var(--aw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.aw-row-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.aw-row-r i{font:500 10.5px Inter,sans-serif;font-style:normal;color:var(--aw-muted)}
.aw-cnt{background:#16a34a;color:#fff;font:700 10.5px/1 Inter,sans-serif;padding:4px 7px;border-radius:99px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.aw-row.is-on{background:rgba(200,240,49,.09);box-shadow:inset 3px 0 0 var(--hs-lime)}
.aw-pane{position:relative;display:flex;flex-direction:column;overflow:hidden}
.aw-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;color:var(--aw-muted);font:500 14px Inter,sans-serif}
.aw-empty svg{width:54px;height:54px;opacity:.5}
.aw-conv{position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden}
.aw-pane-h{flex:none;display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--aw-line)}
.aw-pane-h img{width:36px;height:36px;border-radius:10px}
.aw-pane-h b{font:800 15px Inter,sans-serif}
.aw-pane-h span{font:500 12px Inter,sans-serif;color:var(--aw-muted);padding-left:12px;border-left:1px solid var(--aw-line)}
.aw-msgs{position:relative;flex:1;overflow:hidden}
.aw-msgs-in{padding:16px 22px;display:flex;flex-direction:column;gap:14px}
.aw-msg{display:grid;grid-template-columns:36px 1fr;gap:12px}
.aw-msg-av{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font:700 15px Inter,sans-serif;color:#fff;background:#14b8a6;overflow:hidden}
.aw-msg-av img{width:100%;height:100%}
.aw-msg-n{font:700 12.5px Inter,sans-serif}
.aw-msg-n i{font:400 11px Inter,sans-serif;font-style:normal;color:var(--aw-muted);margin-left:6px}
.aw-at{display:inline-block;margin-top:6px;font:600 12px Inter,sans-serif;color:#8fb4ff;background:rgba(79,134,255,.14);padding:4px 9px;border-radius:6px}
.aw-files{display:flex;gap:10px;margin-top:8px}
.aw-file{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--aw-line);border-radius:8px;background:rgba(255,255,255,.03)}
.aw-file svg{width:24px;height:30px}
.aw-file b{display:block;font:600 12px Inter,sans-serif}
.aw-file small{display:block;font:400 10.5px Inter,sans-serif;color:var(--aw-muted)}
.aw-typing{display:none;gap:5px;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:10px;width:max-content;margin-top:6px}
.aw-typing i{width:7px;height:7px;border-radius:50%;background:var(--aw-muted);animation:aw-dot 1s infinite ease-in-out}
.aw-typing i:nth-child(2){animation-delay:.15s}.aw-typing i:nth-child(3){animation-delay:.3s}
@keyframes aw-dot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.aw-ai{margin-top:6px;padding:14px 16px;border-radius:12px;background:linear-gradient(160deg,rgba(20,184,166,.12),rgba(20,184,166,.04));border:1px solid rgba(20,184,166,.25)}
.aw-ai-st{display:flex;align-items:center;gap:9px;font:700 13px Inter,sans-serif}
.aw-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(45,212,191,.25);border-top-color:#2dd4bf;animation:aw-rot .8s linear infinite;flex:none}
@keyframes aw-rot{to{transform:rotate(360deg)}}
.aw-ai-st.is-done .aw-spin{animation:none;border-color:#22c55e;background:#22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.aw-prog{height:5px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 5px}
.aw-prog i{display:block;height:100%;background:#2dd4bf;transform:scaleX(0);transform-origin:left center}
.aw-prog-t{display:flex;justify-content:space-between;font:500 11px Inter,sans-serif;color:var(--aw-muted);font-variant-numeric:tabular-nums}
.aw-chk{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:10px}
.aw-chk li{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;opacity:.35;transition:opacity .35s var(--hs-ease),background-color .35s var(--hs-ease)}
.aw-chk li.is-ok,.aw-chk li.is-warn{opacity:1}
.aw-chk li.is-warn{background:rgba(240,82,82,.14)}
.aw-st{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);flex:none;display:grid;place-items:center;margin-top:1px;transition:background-color .3s,border-color .3s}
.aw-st svg{position:absolute;width:10px;height:10px;opacity:0;transition:opacity .2s}
.aw-chk li.is-ok .aw-st{background:#22c55e;border-color:#22c55e}
.aw-chk li.is-warn .aw-st{background:#ef4444;border-color:#ef4444}
.aw-chk li.is-ok .ok,.aw-chk li.is-warn .warn{opacity:1}
.aw-chk b{display:block;font:700 12.5px/1.3 Inter,sans-serif}
.aw-chk small{display:block;font:400 11px/1.35 Inter,sans-serif;color:var(--aw-muted)}
.aw-chk li.is-warn small{color:#ff9a9a;font-weight:600}
.aw-more{height:0;overflow:hidden}
.aw-res{display:grid;grid-template-columns:260px 1fr;gap:12px;margin-top:12px}
.aw-score{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:rgba(255,255,255,.05);border-radius:10px}
.aw-score small{display:block;font:700 9.5px/1.3 Inter,sans-serif;letter-spacing:.1em;color:var(--aw-muted);text-transform:uppercase}
.aw-score div > span{display:block;font:500 11px Inter,sans-serif;color:#cdd7f5;margin-top:4px}
.aw-score b{font:800 30px/1 Montserrat,sans-serif;color:#4ade80;font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-alert{padding:12px 14px;border-radius:10px;background:rgba(240,82,82,.12);border:1px solid rgba(240,82,82,.35);border-left:3px solid #ef4444}
.aw-alert b{display:flex;align-items:center;gap:7px;font:800 13px Inter,sans-serif;color:#ff8a8a}
.aw-alert b svg{width:16px;height:16px}
.aw-alert p{font:400 12px/1.45 Inter,sans-serif;color:#ffd0d0;margin-top:4px}
.aw-input{flex:none;display:flex;align-items:center;gap:12px;margin:0 22px 16px;padding:0 16px;height:44px;border-radius:10px;border:1px solid var(--aw-line);color:var(--aw-muted);font:400 13px Inter,sans-serif}
.aw-input svg{margin-left:auto;width:20px;height:20px}

/* 3. панель дашбордов */
.aw-dash{padding:26px 34px}
.aw-h{display:flex;align-items:center;gap:14px}
.aw-h b{font:700 24px Onest,Inter,sans-serif}
.aw-h .aw-new{margin-left:auto;border:1.5px solid rgba(255,255,255,.3);font:700 13px Inter,sans-serif;padding:8px 16px;border-radius:6px}
.aw-dgrid{display:grid;grid-template-columns:1fr 1.45fr;gap:22px;margin-top:22px}
.aw-dcard{background:var(--aw-panel);border:1px solid var(--aw-line);border-radius:16px;padding:18px 18px 10px}
.aw-dsec{position:relative;font:800 19px Inter,sans-serif;text-align:center;padding:2px 0 12px;margin-bottom:14px}
.aw-dsec::after,.aw-dsec i{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aw-line)}
.aw-dsec i{height:3px;bottom:-.5px;background:linear-gradient(90deg,#a3cf12,var(--hs-lime));transform:scaleX(0);z-index:1;border-radius:2px}
.aw-dlist{display:grid;gap:9px}
.aw-dcard--r .aw-dlist{grid-template-columns:1fr 1fr}
.aw-ditem{display:flex;align-items:center;gap:12px;height:60px;padding:0 14px;border-radius:10px;background:var(--aw-panel2);border:1px solid transparent;
  transition:background-color .4s var(--hs-ease),border-color .4s var(--hs-ease),box-shadow .4s var(--hs-ease)}
.aw-ditem svg{width:36px;height:36px;flex:none}
.aw-ditem b{font:700 13.5px/1.25 Inter,sans-serif}
.aw-ditem.is-acc{background:rgba(200,240,49,.08);border-color:rgba(200,240,49,.6);box-shadow:inset 4px 0 0 var(--hs-lime)}

/* 4. аналитика продаж */
.aw-sales{padding:22px 30px;display:flex;flex-direction:column}
.aw-sales .aw-h small{font:500 12px Inter,sans-serif;color:var(--aw-muted)}
.aw-pill{margin-left:auto;font:600 11.5px Inter,sans-serif;color:var(--hs-lime);border:1px solid var(--hs-lime);border-radius:99px;padding:7px 12px;background:rgba(200,240,49,.08)}
.aw-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:18px}
.aw-tile{position:relative;padding:14px 14px 12px;border-radius:12px;background:var(--aw-panel);border:1px solid var(--aw-line);overflow:hidden;
  transition:border-color .4s var(--hs-ease),background-color .4s var(--hs-ease),box-shadow .4s var(--hs-ease)}
.aw-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left center}
.aw-tile.is-bar::after{transform:scaleX(1);transition:transform .6s var(--hs-ease)}
.aw-tile-l{display:flex;align-items:center;gap:7px;font:600 11.5px/1.25 Inter,sans-serif;color:#c3cdf0;min-height:2.5em}
.aw-tile-l i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.aw-tile b{display:block;font:800 34px/1.05 Montserrat,sans-serif;color:var(--c);margin-top:6px;font-variant-numeric:tabular-nums}
.aw-tile b small{font:700 9px Inter,sans-serif;letter-spacing:.1em;color:var(--aw-muted);margin-left:5px;text-transform:uppercase}
.aw-tile > span{display:block;font:700 12.5px Inter,sans-serif;margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.aw-tile > span small{font:500 10px Inter,sans-serif;color:var(--aw-muted)}
.aw-tile.is-hover{background:var(--aw-panel2)}
.aw-tile.is-sel{border-color:var(--c);background:var(--aw-panel2);box-shadow:0 0 0 1px var(--c),0 14px 30px -14px var(--c)}
.aw-bottom{flex:1;min-height:0;display:grid;grid-template-columns:1fr 360px;gap:14px;margin-top:14px}
.aw-panel{position:relative;background:var(--aw-panel);border:1px solid var(--aw-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .5s var(--hs-ease),border-color .5s var(--hs-ease)}
.aw-panel-h{flex:none;display:flex;align-items:baseline;gap:10px;padding:14px 18px 10px}
.aw-panel-h b{font:700 10.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hs-lime)}
.aw-panel-h span{font:400 11.5px Inter,sans-serif;color:var(--aw-muted)}
.aw-det{position:relative;flex:1;overflow:hidden}
.aw-det-in{padding:0 14px 14px}
.aw-det-empty{display:grid;place-items:center;height:100%;color:var(--aw-muted);font:500 13px Inter,sans-serif}
.aw-dept{padding:9px 12px;font:700 9.5px/1 Inter,sans-serif;letter-spacing:.12em;color:var(--aw-muted);text-transform:uppercase;background:rgba(255,255,255,.04);border-radius:6px;margin:6px 0 4px}
.aw-mg{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;transition:background-color .3s}
.aw-mg.is-hover{background:rgba(255,255,255,.06)}
.aw-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 13px Inter,sans-serif;flex:none}
.aw-mg-mid{flex:1;min-width:0}
.aw-mg-mid b{display:block;font:700 13px Inter,sans-serif}
.aw-mg-mid span{display:block;font:700 12px Inter,sans-serif;color:#cdd7f5;margin-top:2px;font-variant-numeric:tabular-nums}
.aw-mg-mid span small{font:500 10px Inter,sans-serif;color:var(--aw-muted)}
.aw-mg-c{text-align:right}
.aw-mg-c b{display:block;font:800 22px/1 Montserrat,sans-serif;color:var(--c);font-variant-numeric:tabular-nums}
.aw-mg-c small{font:700 8px Inter,sans-serif;letter-spacing:.1em;color:var(--aw-muted);text-transform:uppercase}
.aw-mg-body{height:0;overflow:hidden}
.aw-deals{margin:2px 6px 8px 54px;border-left:2px solid var(--c);border-radius:0 8px 8px 0;background:rgba(255,255,255,.03);transition:border-color .4s var(--hs-ease)}
.aw-td{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:9px 12px}
.aw-td + .aw-td{border-top:1px solid var(--aw-line)}
.aw-td-id{font:700 12px Inter,sans-serif;color:#9fbcff;text-decoration:underline dashed;text-underline-offset:3px}
.aw-td-sum{font:700 12px Inter,sans-serif;text-align:right;font-variant-numeric:tabular-nums}
.aw-td-sum small{font:500 10px Inter,sans-serif;color:var(--aw-muted)}
.aw-td-name{grid-column:1/-1;font:400 11px/1.4 Inter,sans-serif;color:var(--aw-muted)}
.aw-td-id,.aw-td-sum,.aw-td-name{transition:opacity .4s var(--hs-ease)}
.aw-dl{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:4px}
.aw-dl-pill{position:relative;z-index:0;font:600 11px Inter,sans-serif;color:var(--hs-deadline);transform-origin:left center}
.aw-dl-pill::before{content:"";position:absolute;inset:-4px -7px;z-index:-1;border-radius:7px;background:rgba(255,138,61,.16);box-shadow:0 0 0 1px rgba(255,138,61,.45);opacity:0;transform:scale(.9);transition:opacity .4s var(--hs-ease),transform .4s var(--hs-ease)}
.aw-dl-badge{font:700 10px/1 Inter,sans-serif;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.08);color:#cdd7f5;opacity:0}
.aw-dl-badge.is-urgent{background:rgba(240,82,82,.2);color:#ff9a9a}
.aw-deals.is-focus{border-left-color:var(--hs-deadline)}
.aw-deals.is-focus .aw-td-id,.aw-deals.is-focus .aw-td-sum,.aw-deals.is-focus .aw-td-name{opacity:.35}
.aw-deals.is-focus .aw-dl-pill::before{opacity:1;transform:none}
/* конверсия */
.aw-panel.is-glow{border-color:rgba(200,240,49,.5);box-shadow:0 0 0 1px rgba(200,240,49,.35),0 20px 50px -20px rgba(200,240,49,.4)}
.aw-cv{padding:4px 18px 18px;display:flex;flex-direction:column;gap:16px}
.aw-panel--cv .aw-cv{flex:1;justify-content:space-between}
.aw-cv-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.aw-pct{font:800 28px/1 Montserrat,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.aw-pct small{font:600 10.5px Inter,sans-serif;color:rgba(255,255,255,.75);margin-left:5px}
.aw-pbar{height:5px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden;margin:9px 0 6px}
.aw-pbar i{display:block;height:100%;transform-origin:left center}
.aw-cv-sub{font:500 11px Inter,sans-serif;color:var(--aw-muted)}
.aw-cv-tot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--aw-line)}
.aw-cv-tot b{display:block;font:800 40px/1 Montserrat,sans-serif;color:var(--hs-lime);font-variant-numeric:tabular-nums}
.aw-cv-tot div > span{display:block;font:500 11px/1.4 Inter,sans-serif;color:var(--aw-muted);margin-top:6px}
.aw-chart{width:100%;height:auto;overflow:visible}

/* ---------- Преимущества: отдельные карточки под анимацией, видны всегда ---------- */
.hs-feats{position:absolute;z-index:3;left:var(--hs-f-left,50%);top:var(--hs-f-top,0);width:var(--hs-f-w,45%);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,.8vw,16px);container-type:inline-size}
.hs-feat{position:relative;overflow:hidden;padding:clamp(12px,1vw,20px) clamp(14px,1.05vw,22px) clamp(13px,1vw,20px);border-radius:16px;
  background:linear-gradient(165deg,rgba(28,44,108,.88),rgba(10,18,52,.92));
  border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 44px -26px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .5s var(--hs-ease),box-shadow .5s var(--hs-ease),transform .5s var(--hs-ease)}
/* лаймовая линия сверху — «прорисовывается» при появлении */
.hs-feat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--hs-lime),rgba(200,240,49,0));transform:scaleX(var(--ln,0));transform-origin:left center}
/* мягкое свечение в углу */
.hs-feat::after{content:"";position:absolute;right:-30%;top:-60%;width:80%;height:120%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,240,49,.16),transparent);opacity:0;transition:opacity .6s var(--hs-ease)}
.hs-feat-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hs-feat-ic{display:grid;place-items:center;width:clamp(32px,2.2vw,42px);height:clamp(32px,2.2vw,42px);border-radius:11px;flex:none;
  color:var(--hs-lime);background:rgba(200,240,49,.1);border:1px solid rgba(200,240,49,.25);transition:background-color .5s var(--hs-ease),color .5s var(--hs-ease)}
.hs-feat-ic svg{width:55%;height:55%}
.hs-feat-v{font:800 clamp(26px,2.15vw,44px)/1 var(--hs-font-ui);letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 0%,#dff79a 55%,var(--hs-lime) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-feat-v svg{display:block;width:clamp(26px,2vw,40px);height:clamp(26px,2vw,40px);color:var(--hs-lime)}
.hs-feat strong{display:block;font:700 clamp(13px,.86vw,16.5px)/1.3 var(--hs-font-ui);color:#fff;margin-top:clamp(10px,.8vw,16px)}
.hs-feat p{font:400 clamp(11.5px,.72vw,13.5px)/1.5 Inter,sans-serif;color:#9aa8d4;margin-top:5px}
/* карточка, которая сейчас «про то, что на экране» */
.hs-feat.is-on{border-color:rgba(200,240,49,.55);box-shadow:0 0 0 1px rgba(200,240,49,.25),0 22px 44px -22px rgba(200,240,49,.35);transform:translateY(-4px)}
.hs-feat.is-on::after{opacity:1}
.hs-feat.is-on .hs-feat-ic{background:var(--hs-lime);color:#0b1020}
@container (max-width:760px){.hs-feat p{display:none}}
/* компактные карточки в один ряд — как пункты под заголовком: иконка слева, справа значение и подпись */
.hs-feat{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(10px,.8vw,14px);align-items:center;padding:clamp(10px,.75vw,14px) clamp(12px,.9vw,18px)!important;border-radius:14px}
.hs-feat-top{display:contents}
.hs-feat-ic{grid-row:1 / 3;width:clamp(38px,2.5vw,50px)!important;height:clamp(38px,2.5vw,50px)!important;border-radius:12px}
.hs-feat-v{grid-column:2;justify-self:start;font-size:clamp(20px,1.45vw,30px)!important;line-height:1!important}
.hs-feat-v svg{width:clamp(20px,1.4vw,28px)!important;height:clamp(20px,1.4vw,28px)!important}
.hs-feat strong{grid-column:2;margin-top:3px!important;font-size:clamp(12.5px,.78vw,15.5px)!important;line-height:1.25!important}
.hs-feat p{display:none!important}
.hs-feat.is-on{transform:translateY(-3px)}
/* мало места по высоте — карточки компактные, без описаний */
.hs-feats.is-compact .hs-feat p{display:none}

/* курсор */
.hs-cursor{position:absolute;left:0;top:0;z-index:10;width:26px;height:26px;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.hs-ripple{position:absolute;left:0;top:0;z-index:9;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:2px solid var(--hs-lime);background:rgba(200,240,49,.25);opacity:0;pointer-events:none}

/* ---------- Адаптив ---------- */
@media (max-width:1100px){
  :root{--hs-app-share:.46}
}
@media (max-width:900px){
  .hs-dsk{display:none}.hs-mob{display:inline}
  .hs-steps{gap:0;overflow:hidden;padding-bottom:2px}
  .hs-step{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(100%);
    transition:transform .6s var(--hs-ease),opacity .5s var(--hs-ease),visibility .6s,background-color .5s,border-color .5s}
  .hs-step.is-prev{transform:translateY(-100%)}
  .hs-step.is-active{opacity:1;visibility:visible;transform:none}
  .hs-step{padding:10px 12px}
}
/* ================= МОБИЛЬНАЯ ВЕРСИЯ: интерфейс приложения под телефон ================= */
.hs-mwrap{display:none}
.hs-peek{display:none}
.hs-touch{position:absolute;left:0;top:0;z-index:11;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(6,13,43,.5)}
.hs-mripple{position:absolute;left:0;top:0;z-index:10;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--hs-lime);background:rgba(200,240,49,.25);opacity:0;pointer-events:none}
.hs-mbox{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 91%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 91%,transparent 100%)}
.mp{position:absolute;left:0;top:0;width:390px;height:600px;transform-origin:0 0;display:flex;flex-direction:column;font-family:Inter,sans-serif;color:var(--aw-text);
  background:linear-gradient(180deg,rgba(11,24,62,.9),rgba(8,17,46,.94));border-top:1px solid rgba(255,255,255,.06)}
.mp img,.mp svg{display:block}
.mp-top{display:none!important;flex:none;align-items:center;gap:10px;height:54px;padding:0 14px;background:var(--aw-top);border-bottom:1px solid var(--aw-line)}
.mp-burger svg{width:22px;height:22px}
.mp-logo-ic{width:26px;height:26px}
.mp-logo-w{height:15px;width:auto}
.mp-top-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.mp-bi{position:relative}
.mp-bi svg{width:21px;height:21px}
.mp-badge{position:absolute;top:-8px;left:12px;background:#16a34a;color:#fff;font:700 10px/1 Inter,sans-serif;font-style:normal;padding:3px 5px;border-radius:99px;box-shadow:0 0 0 2px var(--aw-top);font-variant-numeric:tabular-nums}
.mp-ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#cbd5e1,#64748b);display:grid;place-items:center;overflow:hidden}
.mp-ava svg{width:24px;height:24px;margin-top:6px}
.mp-main{position:relative;flex:1;min-height:0;overflow:hidden}
.mp-scr{position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden;overflow:hidden}
.mp-h{flex:none;padding:12px 14px 8px}
.mp-h b{display:block;font:700 20px/1.2 Onest,Inter,sans-serif}
.mp-h span{display:block;font:500 12.5px Inter,sans-serif;color:var(--aw-muted);margin-top:3px}
.mp-h--row{display:flex;align-items:center;gap:10px}
.mp-h--row b{flex:1}
.mp-chip{font:700 12px Inter,sans-serif!important;color:#fff!important;background:#1d3a8a;padding:8px 12px;border-radius:8px;margin:0!important}
.mp-pill{font:600 11px Inter,sans-serif!important;color:var(--hs-lime)!important;border:1px solid var(--hs-lime);border-radius:99px;padding:6px 10px;margin:0!important;white-space:nowrap}
/* 1. модули */
.mp-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));align-content:start;gap:14px 4px;padding:4px 10px 12px;overflow:hidden}
.mp-mod{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:opacity .45s var(--hs-ease)}
.mp-mod-ic{position:relative;width:56px;height:56px;transition:transform .45s var(--hs-ease)}
.mp-mod-ic img,.mp-mod-ic svg{width:100%;height:100%;border-radius:16px}
.mp-mod-ic::before{content:"";position:absolute;inset:-6px;border-radius:21px;border:2px solid var(--hs-lime);box-shadow:0 0 24px rgba(200,240,49,.55);opacity:0;transform:scale(.9);transition:opacity .45s var(--hs-ease),transform .45s var(--hs-ease)}
.mp-mod b{font:600 12px/1.2 Inter,sans-serif;color:#d9e2ff;max-width:92px;transition:color .45s var(--hs-ease)}
.mp-grid.is-focus .mp-mod{opacity:.38}
.mp-grid.is-focus .mp-mod.is-hl{opacity:1}
.mp-mod.is-hl .mp-mod-ic{transform:translateY(-3px) scale(1.1)}
.mp-mod.is-hl .mp-mod-ic::before{opacity:1;transform:none}
.mp-mod.is-hl b{color:var(--hs-lime)}
/* 2. чаты */
.mp-list{position:relative;flex:1;overflow:hidden;padding:2px 10px}
.mp-row{position:relative;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);margin-bottom:7px}
.mp-row img{width:42px;height:42px;border-radius:11px;flex:none}
.mp-row-mid{flex:1;min-width:0}
.mp-row-mid b{display:block;font:700 13.5px/1.25 Inter,sans-serif;color:#eef2ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-row-mid span{display:block;font:400 12.5px/1.35 Inter,sans-serif;color:var(--aw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.mp-row-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.mp-row-r i{font:500 11px Inter,sans-serif;font-style:normal;color:var(--aw-muted)}
.mp-cnt{background:#16a34a;color:#fff;font:700 11px/1 Inter,sans-serif;padding:4px 7px;border-radius:99px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.mp-row.is-on{background:rgba(200,240,49,.1);border-color:rgba(200,240,49,.45)}
/* 3. AI-чат */
.mp-chh{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--aw-line)}
.mp-burger--chh{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06)}
.mp-burger--chh svg{width:18px;height:18px}
.mp-chh img{width:38px;height:38px}
.mp-chh b{display:block;font:800 15px Inter,sans-serif}
.mp-chh small{display:block;font:600 11.5px Inter,sans-serif;color:var(--hs-lime);margin-top:2px}
.mp-msgs{position:relative;flex:1;overflow:hidden}
.mp-msgs-in{padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}
.mp-msg{max-width:94%;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.06)}
.mp-msg-n{font:700 12px Inter,sans-serif;color:#b9a4ff;margin-bottom:4px}
.mp-msg p{font:400 14px/1.4 Inter,sans-serif;color:#e8eeff}
.mp-msg p em{font-style:normal;font-weight:700;color:#8fb4ff}
.mp-files{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.mp-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--aw-line);border-radius:10px;background:rgba(255,255,255,.03)}
.mp-file svg{width:22px;height:28px}
.mp-file b{display:block;font:600 12.5px Inter,sans-serif}
.mp-file small{display:block;font:400 11px Inter,sans-serif;color:var(--aw-muted)}
.mp-ai-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mp-ai-h img{width:24px;height:24px}
.mp-ai-h b{font:700 12.5px Inter,sans-serif;color:var(--hs-lime)}
.mp-ai-h i{margin-left:auto;font:500 10.5px Inter,sans-serif;font-style:normal;color:var(--aw-muted)}
.mp-typing{display:none;gap:5px;padding:8px 2px}
.mp-typing i{width:7px;height:7px;border-radius:50%;background:var(--aw-muted);animation:aw-dot 1s infinite ease-in-out}
.mp-typing i:nth-child(2){animation-delay:.15s}.mp-typing i:nth-child(3){animation-delay:.3s}
.mp-msg--ai{max-width:100%;background:linear-gradient(160deg,rgba(20,184,166,.13),rgba(20,184,166,.04));border:1px solid rgba(20,184,166,.25)}
.mp-chk{list-style:none;display:grid;gap:3px;margin-top:9px}
.mp-chk li{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:9px;opacity:.35;transition:opacity .35s var(--hs-ease),background-color .35s var(--hs-ease)}
.mp-chk li.is-ok,.mp-chk li.is-warn{opacity:1}
.mp-chk li.is-warn{background:rgba(240,82,82,.15)}
.mp-chk b{display:block;font:700 13px/1.3 Inter,sans-serif}
.mp-chk small{display:block;font:400 11.5px/1.35 Inter,sans-serif;color:var(--aw-muted)}
.mp-chk li.is-warn small{color:#ff9a9a;font-weight:600}
.mp-chk li.is-ok .aw-st{background:#22c55e;border-color:#22c55e}
.mp-chk li.is-warn .aw-st{background:#ef4444;border-color:#ef4444}
.mp-chk li.is-ok .ok,.mp-chk li.is-warn .warn{opacity:1}
.mp-score{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:12px 14px;background:rgba(255,255,255,.06);border-radius:12px}
.mp-score small{display:block;font:700 9.5px/1.3 Inter,sans-serif;letter-spacing:.1em;color:var(--aw-muted);text-transform:uppercase}
.mp-score div > span{display:block;font:500 11.5px Inter,sans-serif;color:#cdd7f5;margin-top:4px}
.mp-score b{font:800 30px/1 Montserrat,sans-serif;color:#4ade80;font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-alert{margin-top:10px;padding:12px 14px;border-radius:12px;background:rgba(240,82,82,.13);border:1px solid rgba(240,82,82,.38);border-left:3px solid #ef4444}
.mp-alert b{display:flex;align-items:center;gap:7px;font:800 13.5px Inter,sans-serif;color:#ff8a8a}
.mp-alert b svg{width:16px;height:16px}
.mp-alert p{font:400 12.5px/1.45 Inter,sans-serif;color:#ffd0d0;margin-top:4px}
/* меню-шторка */
.mp-drw{position:absolute;inset:0;z-index:10;visibility:hidden}
.mp-drw-bg{position:absolute;inset:0;background:rgba(3,8,26,.6)}
.mp-drw-p{position:absolute;left:0;top:0;bottom:0;width:78%;max-width:320px;background:#0d1a45;border-right:1px solid var(--aw-line);box-shadow:12px 0 30px rgba(0,0,0,.4);overflow:hidden}
.mp-drw-l{padding:8px 0}
.mp-drw-r{display:flex;align-items:center;gap:14px;padding:8px 16px;font:600 15px Inter,sans-serif;color:#dbe3ff;transition:background-color .35s var(--hs-ease)}
.mp-drw-r img,.mp-drw-r svg{width:38px;height:38px;border-radius:10px;flex:none}
.mp-drw-r.is-on{background:rgba(200,240,49,.12);box-shadow:inset 3px 0 0 var(--hs-lime)}
/* 4. дашборды и общая лента */
.mp-feedv{position:relative;flex:1;overflow:hidden}
.mp-feed{padding:2px 12px 18px}
.mp-sec{position:relative;font:800 17px Inter,sans-serif;padding:8px 4px 10px;margin:6px 0 10px}
.mp-sec::after,.mp-sec i{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--aw-line)}
.mp-sec i{height:3px;bottom:-.5px;background:linear-gradient(90deg,#a3cf12,var(--hs-lime));transform:scaleX(0);transform-origin:left center;z-index:1;border-radius:2px}
.mp-di{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid transparent;margin-bottom:8px;
  transition:background-color .4s var(--hs-ease),border-color .4s var(--hs-ease),box-shadow .4s var(--hs-ease)}
.mp-di svg{width:36px;height:36px;flex:none}
.mp-di b{font:700 14px/1.25 Inter,sans-serif}
.mp-di.is-acc{background:rgba(200,240,49,.09);border-color:rgba(200,240,49,.6);box-shadow:inset 4px 0 0 var(--hs-lime)}
/* 5. аналитика продаж */
.mp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.mp-tile{position:relative;overflow:hidden;padding:13px 13px 12px;border-radius:14px;background:var(--aw-panel);border:1px solid var(--aw-line);transition:border-color .4s var(--hs-ease),box-shadow .4s var(--hs-ease),background-color .4s var(--hs-ease)}
.mp-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--hs-ease)}
.mp-tile.is-bar::after{transform:scaleX(1)}
.mp-tile-l{display:flex;align-items:center;gap:7px;font:600 12px/1.25 Inter,sans-serif;color:#c3cdf0;min-height:2.5em}
.mp-tile-l i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.mp-tile b{display:block;font:800 32px/1.05 Montserrat,sans-serif;color:var(--c);margin-top:4px;font-variant-numeric:tabular-nums}
.mp-tile b small{font:700 9px Inter,sans-serif;letter-spacing:.1em;color:var(--aw-muted);margin-left:5px;text-transform:uppercase}
.mp-tile > span{display:block;font:700 12.5px Inter,sans-serif;margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-tile > span small{font:500 10px Inter,sans-serif;color:var(--aw-muted)}
.mp-tile.is-sel{border-color:var(--c);background:var(--aw-panel2);box-shadow:0 0 0 1px var(--c),0 14px 30px -14px var(--c)}
.mp-cv{margin-top:14px;padding:16px;border-radius:16px;background:var(--aw-panel);border:1px solid var(--aw-line);transition:border-color .5s var(--hs-ease),box-shadow .5s var(--hs-ease)}
.mp-cv.is-glow{border-color:rgba(200,240,49,.55);box-shadow:0 0 0 1px rgba(200,240,49,.3),0 20px 50px -20px rgba(200,240,49,.45)}
.mp-cv h4{font:700 10.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hs-lime)}
.mp-cv-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.mp-cv-tot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--aw-line)}
.mp-cv-tot b{display:block;font:800 40px/1 Montserrat,sans-serif;color:var(--hs-lime);font-variant-numeric:tabular-nums}
.mp-cv-tot div > span{display:block;font:500 11px/1.4 Inter,sans-serif;color:var(--aw-muted);margin-top:6px}
.mp-cv .aw-chart{width:52%;max-width:200px}
/* нижняя шторка деталей */
.mp-sheet{position:absolute;left:0;right:0;bottom:0;height:82%;z-index:6;display:flex;flex-direction:column;background:#0f1d4c;border-radius:22px 22px 0 0;border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -24px 50px rgba(0,0,0,.5);visibility:hidden}
.mp-handle{display:block;width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin:9px auto 4px}
.mp-sheet-h{flex:none;display:flex;align-items:baseline;gap:10px;padding:6px 16px 10px;border-bottom:1px solid var(--aw-line)}
.mp-sheet-h b{font:800 16px Inter,sans-serif}
.mp-sheet-h span{margin-left:auto;font:800 22px Montserrat,sans-serif;color:var(--c)}
.mp-sheet-v{position:relative;flex:1;overflow:hidden}
.mp-sheet-in{padding:8px 10px 18px}
.mp-sheet .aw-deals{margin-left:48px}

@media (max-width:900px){
  .hs-stage{display:flex;flex-direction:column;align-items:stretch;height:100vh;height:100svh;min-height:540px;max-height:1100px;padding:calc(var(--header-h) + 10px) 0 calc(10px + env(safe-area-inset-bottom));gap:10px}
  .hs-copy{display:contents}
  .hs-hl{order:1;flex:none;padding:0 16px;overflow:hidden}
  /* «язычок»: когда заголовок спрятан — тап или свайп вниз возвращает его */
  .hs-peek{order:1;display:flex;align-self:center;align-items:center;gap:8px;height:0;margin:-6px 0;padding:0 14px;overflow:hidden;opacity:0;border:0;cursor:pointer;
    border-radius:99px;background:rgba(200,240,49,.08);box-shadow:inset 0 0 0 1px rgba(200,240,49,.3);color:var(--hs-lime);font:600 11.5px/1 var(--hs-font-body);letter-spacing:.12em;text-transform:uppercase;pointer-events:auto}
  .hs-peek svg{width:14px;height:14px;animation:hs-drop 1.6s ease-in-out infinite}

  .hs-title{font-size:clamp(28px,9.2vw,54px);margin:8px 0 0}
  .hs-eyebrow{font-size:11px}
  /* широкий «телефон»: верх и бока — корпус с островком, низ растворяется в фоне */
  .hs-mwrap{order:3;display:block;position:relative;flex:1 1 auto;min-height:170px;margin:0 9px;--bz:7px;--r:42px;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 99%);mask-image:linear-gradient(180deg,#000 0,#000 74%,transparent 99%)}
  .hs-mwrap::before{content:"";position:absolute;left:3px;right:3px;top:0;bottom:0;border-radius:var(--r) var(--r) 0 0;
    background:linear-gradient(180deg,#3a4466 0%,#1a2242 18%,#111a38 60%,#0d1531 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28)}
  .hs-mbox{inset:var(--bz) calc(var(--bz) + 3px) 0;border-radius:calc(var(--r) - var(--bz)) calc(var(--r) - var(--bz)) 0 0;
    background:#0a1433;-webkit-mask-image:none;mask-image:none;--sb:30px}
  .hs-mbox .mp{top:var(--sb)}
  .hs-msb{position:absolute;left:0;right:0;top:0;height:30px;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;
    font:600 13px/1 Inter,sans-serif;color:#fff;letter-spacing:.01em;background:linear-gradient(180deg,rgba(10,20,51,1),rgba(10,20,51,.85))}
  .hs-msb span{display:flex;gap:5px;align-items:center}
  .hs-msb svg{display:block;height:11px;width:auto}
  .hs-mis{position:absolute;left:50%;top:calc(var(--bz) + 6px);z-index:4;width:92px;height:25px;margin-left:-46px;border-radius:99px;background:#02040c;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  .hs-mis::after{content:"";position:absolute;right:10px;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3d7a,#060a1a 70%)}
  .hs-mbtn{position:absolute;z-index:1;width:3px;border-radius:2px;background:linear-gradient(90deg,#4a5579,#252e50)}
  .hs-mbtn--l1{left:0;top:76px;height:22px}.hs-mbtn--l2{left:0;top:110px;height:40px}.hs-mbtn--r{right:0;top:100px;height:56px}
  .hs-steps{order:2;flex:none;margin:0 16px}
  /* компактный пункт под заголовком */
  .hs-step{grid-template-columns:36px 1fr!important;gap:0 12px!important;padding:11px 13px 12px!important;align-items:center;align-self:start}
  /* пункты под заголовком — карточки в стиле «01 Єдина база даних» */
  .hs-step,.hs-step.is-active{border-radius:16px;overflow:hidden;
    background:radial-gradient(70% 120% at 100% 0,rgba(200,240,49,.10),transparent 60%),linear-gradient(165deg,rgba(28,44,108,.88),rgba(10,18,52,.92));
    border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .hs-step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--hs-lime),rgba(200,240,49,0))}
  /* полоска «до следующего пункта» — только когда пункты листаются по одному */
  .hs-step::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,rgba(200,240,49,.55),var(--hs-lime));
    box-shadow:0 0 10px rgba(200,240,49,.55);transform:scaleX(var(--pg,0));transform-origin:left center}
  .hs-steps.is-list .hs-step::after{display:none}
  .hs-ic{width:36px!important;height:36px!important;border-radius:11px}
  .hs-ic svg{width:17px!important;height:17px!important}
  .hs-step strong{font-size:15px!important;line-height:1.3!important}
  .hs-step span{font-size:13px!important;line-height:1.4!important;margin-top:1px!important}
  .hs-cta{order:4;flex:none;margin:0 16px;grid-template-columns:1fr;gap:8px}
  .hs-btn{min-height:52px;font-size:16px}
  .hs-btn--sec{min-height:42px;font-size:14.5px}
  .hs-wrap{display:none!important}
  .hs-feats{position:relative;left:auto;top:auto;width:auto;margin:20px 16px 56px;grid-template-columns:1fr 1fr}
  .hs-feats .hs-feat p{display:block}
}
/* очень низкие экраны: убираем подпись-пункт, кнопки и анимация важнее */
/* совсем низкий экран — пункт прячем, заголовок, анимация и кнопки важнее */
@media (max-width:900px) and (max-height:600px){.hs-steps{display:none}}
@media (max-width:900px){
  /* вступление: все пункты списком под заголовком */
  .hs-steps.is-list{gap:6px}
  .hs-steps.is-list .hs-step{grid-area:auto!important;transition:none!important;transform:none}
  .hs-stage.is-intro .hs-mwrap{min-height:0}
}
@media (max-width:900px) and (max-height:680px){.hs-title{font-size:clamp(26px,8vw,40px)}}

@media (prefers-reduced-motion:reduce){.hs-btn--pri,.hs-btn--pri::after,.hs-arr svg,.hs-go svg{animation:none}.hs-btn--pri::after{display:none}}
/* ================= ИНТРО: 3D-логотип перед стартом сайта ================= */
#hsIntro{position:fixed;inset:0;z-index:9999;cursor:pointer;touch-action:none}
#hsIntro .hsi-bg{position:absolute;inset:0;background:#E9EEF6 radial-gradient(ellipse 60% 55% at 50% 46%,#FFFFFF 0%,#E9EEF6 72%)}
.hdr__brand{position:relative}
.hsi-hdr{position:absolute;display:block;pointer-events:none}
#hsIntroC{position:absolute;left:0;top:0;width:100%;height:100%;display:block;will-change:transform,opacity}
html.hsi-lock,html.hsi-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){#hsIntro{display:none}}

/* site integration */
.hero.hs-anim { display: block; padding-bottom: 0; align-items: initial; overflow: hidden; }


/* ===== 16.10: the hero in the site design ===== */
/* the whole first screen is centered on the screen under the header */
@media (min-width: 901px) {
  #hsMain .hs-stage { min-height: max(100svh, var(--hs-sec-h, 0px)); align-content: center; padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; }
}
/* the site buttons */
#hsMain .hs-cta { display: flex; flex-wrap: wrap; gap: 12px; }
#hsMain .hs-cta .btn, #hsMain .hs-cta .btn-box { pointer-events: auto; }
@media (max-width: 900px) { #hsMain .hs-cta { flex-direction: column; } #hsMain .hs-cta > * { width: 100%; justify-content: space-between; } #hsMain .hs-cta .btn { justify-content: center; } }
/* the four facts like the site cells: stencil number, short label, a lime line on the current one */
#hsMain .hs-feat { display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 20px !important; border-radius: 4px !important;
  background: rgb(150 180 255 / .035); border: 1px solid rgb(150 180 255 / .12); box-shadow: none; transform: none !important; }
#hsMain .hs-feat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #ccff00; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--hs-ease); }
#hsMain .hs-feat::after { display: none; }
#hsMain .hs-feat-ic { display: none !important; }
#hsMain .hs-feat-v { font: 400 clamp(26px, 2vw, 40px)/1 'Brigadier Stencil UA', var(--hs-font-title) !important; letter-spacing: 0; color: #fff; }
#hsMain .hs-feat-v svg { width: clamp(24px, 1.8vw, 34px) !important; height: clamp(24px, 1.8vw, 34px) !important; color: #fff; }
#hsMain .hs-feat strong { margin-top: 0 !important; font: 500 clamp(12.5px, .8vw, 15px)/1.35 var(--hs-font-body) !important; color: #9aa6c4; }
#hsMain .hs-feat.is-on { border-color: rgb(204 255 0 / .35); background: rgb(204 255 0 / .05); box-shadow: none; }
#hsMain .hs-feat.is-on::before { transform: scaleX(1); }
#hsMain .hs-feat.is-on .hs-feat-v, #hsMain .hs-feat.is-on .hs-feat-v svg { color: #ccff00; }
#hsMain .hs-feat.is-on strong { color: #fff; }
/* intro in the brand colors: the dark theme gets a dark navy stage, the light one the site background */
#hsIntro .hsi-bg { background: #f4f6fb radial-gradient(ellipse 60% 55% at 50% 46%, #ffffff 0%, #f4f6fb 72%); }
html:not([data-theme="light"]) #hsIntro .hsi-bg { background: #081025 radial-gradient(ellipse 60% 55% at 50% 46%, #12245a 0%, #0b1f4f 38%, #081025 78%); }

/* ===== 16.10: phones - the phone like in the site demo (status bar, island, home bar), more air ===== */
@media (max-width: 900px) {
  #hsMain .hs-stage { gap: 18px; padding-top: calc(var(--header-h) + 22px); padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  #hsMain .hs-hl:not(#_) { padding: 0 20px; }
  #hsMain .hs-steps:not(#_), #hsMain .hs-cta:not(#_) { margin-left: 20px; margin-right: 20px; }
  #hsMain .hs-title { margin-top: 12px; }
  #hsMain .hs-cta { gap: 10px; }
  /* a full size phone as in the client file: the bottom goes into the shadow behind the buttons */
  #hsMain .hs-mwrap { margin: 0 18px -72px; position: relative; z-index: 1; --bz: 9px; --r: 48px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%); }
  #hsMain .hs-mwrap::before { left: 0; right: 0; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(150deg, #262f55, #0a0f24 60%); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14); }
  #hsMain .hs-mbox { inset: var(--bz) var(--bz) 0; border-radius: calc(var(--r) - var(--bz)) calc(var(--r) - var(--bz)) 0 0; --sb: 54px; --hb: 0px; }
  #hsMain .hs-cta { position: relative; z-index: 3; }
  /* status bar: iPhone proportions with air around the island */
  #hsMain .hs-msb { height: 54px; padding: 8px 32px 0 40px; font: 600 16.5px/1 Geist, var(--hs-font-body); letter-spacing: -.01em; background: #0a1433; }
  #hsMain .hs-msb span { gap: 7px; }
  #hsMain .hs-msb svg { height: 12px; fill: #fff; }
  #hsMain .hs-msb svg.bat { height: 13px; }
  #hsMain .hs-mis { top: calc(var(--bz) + 12px); width: 106px; height: 31px; margin-left: -53px; background: #000; box-shadow: none; }
  #hsMain .hs-mis::after { display: none; }
  #hsMain .hs-mhome { display: none; }
  #hsMain .hs-mbtn--l1, #hsMain .hs-mbtn--l2 { left: -3px; } #hsMain .hs-mbtn--r { right: -3px; }
}

/* 17.10: a gap between the app window and the right edge; the facts list without the default list indent */
@media (min-width: 901px) {
  #hsMain .hs-wrap { right: var(--hs-app-gap); }
  #hsMain .hs-wide { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%); }
}
#hsMain .hs-feats, #hsMain .hs-steps { padding: 0; list-style: none; }
#hsMain .hs-mwrap { will-change: transform, opacity; }
/* 17.10: room above the first row of apps on the phone, so the lime ring of a lit app is not cut by the screen title */
.mp-grid { padding-top: 14px; }

/* ===== 17.10: light theme of the heroes (the app window itself stays dark, like the product) ===== */
[data-theme="light"] #hsMain.hs-anim { color: #0b1f4f;
  background: radial-gradient(1100px 700px at 78% 50%, rgb(42 92 200 / .13), transparent 62%), radial-gradient(700px 420px at 95% 95%, rgb(204 255 0 / .16), transparent 60%), #f4f6fb; }
[data-theme="light"] #hsMain.hs-anim::before { background-image: linear-gradient(rgb(11 31 79 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(11 31 79 / .06) 1px, transparent 1px); }
[data-theme="light"] #hsMain .hs-eyebrow { color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-eyebrow i { background: #ccff00; box-shadow: 0 0 0 1.5px #0b1f4f, 0 0 0 5px rgb(11 31 79 / .08); }
[data-theme="light"] #hsMain .hs-title { color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-title .hs-accent { color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-ch.is-caret::after { background: #0b1f4f; }
[data-theme="light"] #hsMain .hs-step.is-active { background: #fff; border-color: rgb(11 31 79 / .1); box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 18px 36px -24px rgb(11 31 79 / .35); }
[data-theme="light"] #hsMain .hs-step strong { color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-step span { color: #4a5878; }
[data-theme="light"] #hsMain .hs-ic { color: #0b1f4f; background: rgb(11 31 79 / .05); border-color: rgb(11 31 79 / .12); }
[data-theme="light"] #hsMain .hs-step.is-active .hs-ic { color: #ccff00; background: #0b1f4f; border-color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-feat { background: #fff; border-color: rgb(11 31 79 / .1); box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 18px 36px -26px rgb(11 31 79 / .3); }
[data-theme="light"] #hsMain .hs-feat::before { background: #0b1f4f; }
[data-theme="light"] #hsMain .hs-feat-v, [data-theme="light"] #hsMain .hs-feat-v svg { color: #0b1f4f; }
[data-theme="light"] #hsMain .hs-feat strong { color: #4a5878; }
[data-theme="light"] #hsMain .hs-feat.is-on { border-color: rgb(11 31 79 / .35); background: #fff; box-shadow: 0 18px 36px -22px rgb(11 31 79 / .35); }
[data-theme="light"] #hsMain .hs-feat.is-on .hs-feat-v, [data-theme="light"] #hsMain .hs-feat.is-on .hs-feat-v svg, [data-theme="light"] #hsMain .hs-feat.is-on strong { color: #0b1f4f; }
/* the app: a dark window with rounded corners and a soft shadow instead of melting into a dark stage */
@media (min-width: 901px) {
  [data-theme="light"] #hsMain .hs-wide:not(#_) { -webkit-mask-image: none; mask-image: none; border-radius: 14px; box-shadow: 0 0 0 1px rgb(11 31 79 / .12), 0 50px 90px -40px rgb(11 31 79 / .55); }
  [data-theme="light"] #hsMain .hs-wrap::before { background: radial-gradient(closest-side, rgb(42 92 200 / .18), transparent); }
}
@media (max-width: 900px) {
  [data-theme="light"] #hsMain .hs-step:not(#_), [data-theme="light"] #hsMain .hs-step.is-active:not(#_) { background: #fff; border-color: rgb(11 31 79 / .1); box-shadow: 0 14px 30px -22px rgb(11 31 79 / .35); }
  [data-theme="light"] #hsMain .hs-step::before { background: linear-gradient(90deg, #0b1f4f, rgb(11 31 79 / 0)); }
  [data-theme="light"] #hsMain .hs-step::after { background: linear-gradient(90deg, rgb(11 31 79 / .5), #0b1f4f); box-shadow: none; }
  [data-theme="light"] #hsMain .hs-peek { color: #0b1f4f; background: #fff; box-shadow: inset 0 0 0 1px rgb(11 31 79 / .15); }
  [data-theme="light"] #hsMain .hs-mwrap::before { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14), 0 30px 60px -30px rgb(11 31 79 / .6); }
}

/* ===== 18.10: the hero in one scale with the sections ===== */
@media (min-width: 901px) {
  /* a little smaller than before; the sides stay as tight as they were */
  #hsMain .hs-title { font-size: min(clamp(40px, 4.3vw, 112px), 10.6cqw); margin-bottom: clamp(18px, 1.7vw, 32px); }
  #hsMain .hs-step { grid-template-columns: clamp(36px, 2.5vw, 52px) 1fr; padding: clamp(10px, .75vw, 15px) clamp(12px, 1vw, 19px); }
  #hsMain .hs-ic { width: clamp(36px, 2.5vw, 52px); height: clamp(36px, 2.5vw, 52px); }
  #hsMain .hs-ic svg { width: clamp(18px, 1.25vw, 24px); height: clamp(18px, 1.25vw, 24px); }
  #hsMain .hs-step strong { font-size: clamp(15.5px, 1.08vw, 23px); }
  #hsMain .hs-step span { font-size: clamp(13.5px, .9vw, 18px); }
  #hsMain .hs-cta { margin-top: clamp(20px, 1.7vw, 34px); }
}
/* the background melts into the page: same base colour, the grid and the glow fade out to the bottom */
#hsMain.hs-anim { background: radial-gradient(1100px 700px at 78% 45%, rgb(47 111 237 / .24), transparent 62%), radial-gradient(700px 420px at 95% 90%, rgb(200 240 49 / .06), transparent 60%), var(--bg); }
#hsMain.hs-anim::before { -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000 10%, transparent 70%), linear-gradient(#000 60%, transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse at 40% 45%, #000 10%, transparent 70%), linear-gradient(#000 60%, transparent); mask-composite: intersect; }
#hsMain.hs-anim::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
[data-theme="light"] #hsMain.hs-anim { background: radial-gradient(1100px 700px at 78% 45%, rgb(42 92 200 / .11), transparent 62%), radial-gradient(700px 420px at 95% 90%, rgb(204 255 0 / .14), transparent 60%), var(--bg); }

/* the four facts: an icon on the left, the number in plain bold (the stencil font stays for the title only) */
#hsMain .hs-feat { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; }
#hsMain .hs-feat-ic { display: grid !important; grid-row: 1; width: clamp(38px, 2.6vw, 48px) !important; height: clamp(38px, 2.6vw, 48px) !important; border-radius: 0; color: #ccff00; background: linear-gradient(145deg, #12224a, #070f24); border: 1px solid rgb(204 255 0 / .35); box-shadow: 0 0 18px -6px rgb(204 255 0 / .35); }
#hsMain .hs-feat-ic svg { width: 52%; height: 52%; }
#hsMain .hs-feat-v { grid-column: 2; justify-self: start; font: 700 clamp(22px, 1.6vw, 32px)/1 Geist, var(--hs-font-body) !important; letter-spacing: -.03em; }
#hsMain .hs-feat strong { grid-column: 1 / -1; }
#hsMain .hs-feat.is-on .hs-feat-ic { background: #ccff00; color: #0b1020; border-color: #ccff00; }
[data-theme="light"] #hsMain .hs-feat-ic { color: #0b1f4f; background: #fff; border-color: rgb(11 31 79 / .15); box-shadow: none; }
[data-theme="light"] #hsMain .hs-feat.is-on .hs-feat-ic { background: #0b1f4f; color: #ccff00; border-color: #0b1f4f; }
@media (max-width: 900px) {
  #hsMain .hs-feat { column-gap: 12px; }
  #hsMain .hs-feat p { grid-column: 1 / -1; }
}

/* ===== 18.10: the app window picked by the client: it only sinks into the background (soft edges, no frame,
   no contour and no coloured glow behind it) ===== */
@media (min-width: 901px) {
  #hsMain .hs-wrap::before { display: none; }
  [data-theme="light"] #hsMain .hs-wide:not(#_) { border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%), linear-gradient(180deg, transparent 0, #000 2.5%, #000 94%, transparent 100%); mask-composite: intersect; }
}

/* ===== 18.10 (2): the hero blocks in the card look of the sections: soft corners, glass, round icons,
   and the current step / fact gets the gradient border the cards get on hover ===== */
#hsMain .hs-step, #hsMain .hs-feat {
  --bd1: rgb(255 255 255 / 0); --bd2: rgb(255 255 255 / 0);
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / var(--gl, 0)), rgb(255 255 255 / calc(var(--gl, 0) / 4)) 60%) padding-box,
    linear-gradient(rgb(6 13 43 / var(--base, 0)), rgb(6 13 43 / var(--base, 0))) padding-box,
    linear-gradient(135deg, var(--bd1), var(--bd2) 45%, var(--bd2) 60%, var(--bd1)) border-box !important;
  box-shadow: none !important;
  transition: --bd1 .5s var(--hs-ease), --bd2 .5s var(--hs-ease), --gl .5s var(--hs-ease), transform .5s var(--hs-ease);
}
@property --gl { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --base { syntax: "<number>"; inherits: false; initial-value: 0; }
#hsMain .hs-step:not(#_), #hsMain .hs-feat:not(#_) { border-radius: 20px !important; }
#hsMain .hs-step.is-active, #hsMain .hs-feat.is-on { --gl: .05; --bd1: #ccff00; --bd2: rgb(204 255 0 / .1); }
#hsMain .hs-feat { --gl: .03; --base: .66; --bd1: rgb(255 255 255 / .08); --bd2: rgb(255 255 255 / .08); }
#hsMain .hs-feat::before, #hsMain .hs-feat::after { display: none !important; }
/* round icons, filled with lime on the current block */
#hsMain .hs-ic:not(#_), #hsMain .hs-feat-ic:not(#_) { border-radius: 50% !important; }
#hsMain .hs-ic, #hsMain .hs-feat-ic { color: #ccff00; background: linear-gradient(145deg, #12224a, #070f24) !important; border: 1px solid rgb(204 255 0 / .35) !important; box-shadow: 0 0 18px -6px rgb(204 255 0 / .35);
  transition: background .5s var(--hs-ease), color .5s var(--hs-ease), border-color .5s var(--hs-ease), box-shadow .5s var(--hs-ease); }
#hsMain .hs-step.is-active .hs-ic, #hsMain .hs-feat.is-on .hs-feat-ic { color: #0b1020; background: #ccff00 !important; border-color: #ccff00 !important; box-shadow: 0 10px 22px -12px rgb(204 255 0 / .8); }
#hsMain .hs-feat.is-on { translate: 0 -3px; }
/* light theme: white cards with a soft shadow, navy accents */
[data-theme="light"] #hsMain .hs-step, [data-theme="light"] #hsMain .hs-feat { --bd1: rgb(11 31 79 / 0); --bd2: rgb(11 31 79 / 0); }
[data-theme="light"] #hsMain .hs-feat { --bd1: rgb(11 31 79 / .09); --bd2: rgb(11 31 79 / .09); }
[data-theme="light"] #hsMain .hs-step.is-active, [data-theme="light"] #hsMain .hs-feat { background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--bd1), var(--bd2) 45%, var(--bd2) 60%, var(--bd1)) border-box !important;
  box-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 22px 44px -30px rgb(11 31 79 / .3) !important; }
[data-theme="light"] #hsMain .hs-step.is-active, [data-theme="light"] #hsMain .hs-feat.is-on { --bd1: #1d3a85; --bd2: rgb(29 58 133 / .12); }
[data-theme="light"] #hsMain .hs-ic, [data-theme="light"] #hsMain .hs-feat-ic { color: #0b1f4f; background: #fff !important; border-color: rgb(11 31 79 / .15) !important; box-shadow: none; }
[data-theme="light"] #hsMain .hs-step.is-active .hs-ic, [data-theme="light"] #hsMain .hs-feat.is-on .hs-feat-ic { color: #fff; background: #1d3a85 !important; border-color: #1d3a85 !important; box-shadow: 0 10px 22px -12px rgb(29 58 133 / .8); }

/* ===== 18.10 (3): the hero is one piece with the page ===== */
/* no background of its own, and in the dark theme the page tokens too: .on-navy gave the hero a lighter navy
   (also inside its blocks); the network canvas stays */
html:not([data-theme="light"]) #hsMain.on-navy { --bg-rgb: 8 16 37; --bg: #081025; --raised: #0a1530; --elevated: #0e1c3d; --text-2: #b4c0dc; --subtle: #8796b7; --muted: #7181a2;
  --line: rgb(150 180 255 / .1); --line-2: rgb(150 180 255 / .14); --line-3: rgb(150 180 255 / .2); --panel: rgb(150 180 255 / .035); }
#hsMain.hs-anim:not(#_), [data-theme="light"] #hsMain.hs-anim:not(#_) { background: transparent; }
#hsMain.hs-anim::before, #hsMain.hs-anim::after { display: none; }

/* height: the first screen is centred in the screen height only. It used to be centred in a height the hero script
   measured from the already centred text, so every smaller window added air on top and never gave it back.
   The section itself is at least as tall as the app window needs */
@media (min-width: 901px) {
  #hsMain .hs-stage:not(#_) { min-height: 100svh; }
  #hsMain.hs-anim:not(#_) { min-height: var(--hs-sec-h, 0px); }
}

/* the blocks are the site cards: one tone on a solid base (the gradient border never shows through), a thin edge,
   the accent border on the current one. Hover: the light under the cursor, the border lit where the cursor is
   and a tilt (js/main.js sets --mx / --my and "rotate"); a press on click */
#hsMain { --hc-glass: rgb(255 255 255 / .035); --hc-base: #081025; --hc-edge: rgb(255 255 255 / .08); --hc-acc: #ccff00; --hc-acc2: rgb(204 255 0 / .1); --hc-spot: rgb(204 255 0 / .09); --hc-shadow: 0 22px 44px -30px rgb(0 0 0 / .6); }
[data-theme="light"] #hsMain { --hc-glass: #fff; --hc-base: #fff; --hc-edge: rgb(11 31 79 / .09); --hc-acc: #1d3a85; --hc-acc2: rgb(29 58 133 / .12); --hc-spot: rgb(29 58 133 / .06); --hc-shadow: 0 1px 2px rgb(11 31 79 / .04), 0 22px 44px -30px rgb(11 31 79 / .3); }
#hsMain .hs-step, #hsMain .hs-feat { --bd1: var(--hc-edge); --bd2: var(--hc-edge); }
#hsMain .hs-step.is-active, #hsMain .hs-feat.is-on { --bd1: var(--hc-acc); --bd2: var(--hc-acc2); }
html #hsMain :is(.hs-step, .hs-feat):not(#_) {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--hc-glass), var(--hc-glass)) padding-box, linear-gradient(var(--hc-base), var(--hc-base)) padding-box,
    linear-gradient(135deg, var(--bd1), var(--bd2) 45%, var(--bd2) 60%, var(--bd1)) border-box !important;
  box-shadow: var(--hc-shadow) !important;
  transition: --bd1 .45s var(--hs-ease), --bd2 .45s var(--hs-ease), rotate .5s var(--hs-ease), scale .2s var(--hs-ease), translate .5s var(--hs-ease), opacity .5s var(--hs-ease);
}
/* the steps that are not current stay plain text until the cursor is on them */
html #hsMain .hs-step:not(.is-active):not(.is-hov):not(#_) { background: transparent !important; box-shadow: none !important; }
html #hsMain :is(.hs-step, .hs-feat).is-hov:not(#_) { background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), var(--hc-spot), transparent 72%) padding-box,
    linear-gradient(var(--hc-glass), var(--hc-glass)) padding-box, linear-gradient(var(--hc-base), var(--hc-base)) padding-box,
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--hc-acc), var(--hc-acc2) 45%, transparent 72%) border-box,
    linear-gradient(var(--hc-edge), var(--hc-edge)) border-box !important;
  box-shadow: var(--hc-shadow) !important; }
html #hsMain :is(.hs-step, .hs-feat).is-hov { transition: --bd1 .45s var(--hs-ease), --bd2 .45s var(--hs-ease), rotate .15s ease-out, scale .2s var(--hs-ease), translate .5s var(--hs-ease), opacity .5s var(--hs-ease); }
#hsMain .hs-steps, #hsMain .hs-feats { perspective: 900px; }
#hsMain :is(.hs-step, .hs-feat):active { scale: .98; }
/* icons: one flat tone, filled with the accent on the current block and under the cursor */
html:not([data-theme="light"]) #hsMain :is(.hs-ic, .hs-feat-ic) { background: rgb(255 255 255 / .05) !important; box-shadow: none; }
#hsMain .hs-step.is-hov .hs-ic, #hsMain .hs-feat.is-hov .hs-feat-ic { color: #0b1020; background: #ccff00 !important; border-color: #ccff00 !important; box-shadow: none; }
[data-theme="light"] #hsMain .hs-step.is-hov .hs-ic, [data-theme="light"] #hsMain .hs-feat.is-hov .hs-feat-ic { color: #fff; background: #1d3a85 !important; border-color: #1d3a85 !important; }
@media (prefers-reduced-motion: reduce) { #hsMain :is(.hs-step, .hs-feat):not(#_) { rotate: none !important; } }

/* ===== 18.10 (4): the hero blocks behave exactly like the section cards (blocks.css):
   - the facts: the card tone, no outline in the dark theme;
   - the steps: see-through until the cursor is on them, then the card tone; the current step only fills its icon (no outline);
   - hover on both: the small light under the cursor, the border lit where the cursor is, a tilt (js/main.js), the icon fills;
   - a press on click (a click on a step also moves the app window to that step, js/hs-app.js) ===== */
html:not([data-theme="light"]) #hsMain { --hc-edge: transparent; }
#hsMain .hs-step.is-active, #hsMain .hs-feat.is-on { --bd1: var(--hc-edge); --bd2: var(--hc-edge); }
@media (min-width: 901px) {
  #hsMain .hs-steps { max-width: 600px; }
  #hsMain .hs-step { cursor: pointer; }
  html #hsMain .hs-step:not(.is-hov):not(#_):not(#_) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
}
html #hsMain :is(.hs-step, .hs-feat).is-hov:not(#_) { background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), var(--hc-spot), transparent 72%) padding-box,
    linear-gradient(var(--hc-glass), var(--hc-glass)) padding-box, linear-gradient(var(--hc-base), var(--hc-base)) padding-box,
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--hc-acc), var(--hc-acc2) 45%, transparent 72%) border-box,
    linear-gradient(var(--hc-edge), var(--hc-edge)) border-box !important; }

/* ===== 18.10 (5): the app in the demo windows follows the site theme: a light app in the light theme
   (white panels, navy text, the brand blue instead of lime for the current state); the dark theme stays as it was.
   The phone version (.mp) has its light theme in the block (6) below ===== */
[data-theme="light"] .aw {
  --aw-bg: #f6f8fc; --aw-panel: #fff; --aw-panel2: #f0f3f9; --aw-line: rgba(11,31,79,.1); --aw-text: #13213f; --aw-muted: #405172; --aw-top: #fff;
  --hs-lime: #2a5cc8;
  background: #f6f8fc;
}
[data-theme="light"] .aw-top .aw-mod { color: var(--aw-text); }
[data-theme="light"] .aw-top svg [fill="#fff"], [data-theme="light"] .aw-top svg[fill="#fff"] { fill: var(--aw-text); }
[data-theme="light"] .aw-top svg [stroke="#fff"], [data-theme="light"] .aw-top svg[stroke="#fff"] { stroke: var(--aw-text); }
[data-theme="light"] .aw-logo-w { filter: brightness(0) invert(13%) sepia(60%) saturate(2400%) hue-rotate(215deg); }
[data-theme="light"] .aw-co { color: var(--aw-muted); }
[data-theme="light"] .aw-rail { background: #eef2f9; }
[data-theme="light"] .aw-mod b { color: var(--aw-text); }
[data-theme="light"] .aw-mod-ic::before { box-shadow: 0 0 26px rgba(42,92,200,.35); }
[data-theme="light"] .aw-row-mid b { color: var(--aw-text); }
[data-theme="light"] .aw-row.is-on { background: rgba(42,92,200,.08); }
[data-theme="light"] .aw-at { color: #2a5cc8; background: rgba(42,92,200,.1); }
[data-theme="light"] .aw-file { background: rgba(11,31,79,.03); }
[data-theme="light"] .aw-typing { background: rgba(11,31,79,.06); }
[data-theme="light"] .aw-ai { background: rgba(20,184,166,.07); border-color: rgba(20,184,166,.3); }
[data-theme="light"] .aw-prog { background: rgba(11,31,79,.08); }
[data-theme="light"] .aw-st { border-color: rgba(11,31,79,.25); }
[data-theme="light"] .aw-chk li.is-warn small { color: #c9302c; }
[data-theme="light"] .aw-score { background: rgba(11,31,79,.04); }
[data-theme="light"] .aw-score div > span { color: var(--aw-muted); }
[data-theme="light"] .aw-score b { color: #16a34a; }
[data-theme="light"] .aw-alert { background: rgba(240,82,82,.07); }
[data-theme="light"] .aw-alert b { color: #c9302c; }
[data-theme="light"] .aw-alert p { color: #7a2b2b; }
[data-theme="light"] .aw-h .aw-new { border-color: rgba(11,31,79,.3); }
[data-theme="light"] .aw-ditem.is-acc { background: rgba(42,92,200,.07); border-color: rgba(42,92,200,.5); }
[data-theme="light"] .aw-dsec i { background: linear-gradient(90deg, #4f86ff, #2a5cc8); }
[data-theme="light"] .aw-pill { background: rgba(42,92,200,.07); }
[data-theme="light"] .aw-tile-l { color: var(--aw-muted); }
[data-theme="light"] .aw-tile.is-sel { box-shadow: 0 0 0 1px var(--c), 0 14px 30px -18px var(--c); }
[data-theme="light"] .aw-dept { background: rgba(11,31,79,.04); }
[data-theme="light"] .aw-mg.is-hover { background: rgba(11,31,79,.05); }
[data-theme="light"] .aw-mg-mid span { color: #3b4a6b; }
[data-theme="light"] .aw-deals { background: rgba(11,31,79,.03); }
[data-theme="light"] .aw-td-id { color: #2a5cc8; }
[data-theme="light"] .aw-dl-badge { background: rgba(11,31,79,.07); color: var(--aw-muted); }
[data-theme="light"] .aw-dl-badge.is-urgent { background: rgba(240,82,82,.12); color: #c9302c; }
[data-theme="light"] .aw-panel.is-glow { border-color: rgba(42,92,200,.45); box-shadow: 0 0 0 1px rgba(42,92,200,.3), 0 20px 50px -24px rgba(42,92,200,.35); }
[data-theme="light"] .aw-pct small { color: var(--aw-muted); }
[data-theme="light"] .aw-pbar { background: rgba(11,31,79,.08); }
[data-theme="light"] .aw [stroke="#c8f031"] { stroke: #2a5cc8; }
[data-theme="light"] .aw [fill="#c8f031"] { fill: #2a5cc8; }
[data-theme="light"] .aw-panel, [data-theme="light"] .aw-tile, [data-theme="light"] .aw-dcard { box-shadow: 0 1px 2px rgba(11,31,79,.04); }

/* ===== 18.10 (6): the phone version of the app (.mp: the hero on phones and the phone screen in the devices section)
   follows the site theme too; the conversion line that is white in the dark app turns navy in the light one ===== */
[data-theme="light"] .mp {
  --aw-bg: #f6f8fc; --aw-panel: #fff; --aw-panel2: #f0f3f9; --aw-line: rgba(11,31,79,.1); --aw-text: #13213f; --aw-muted: #405172; --aw-top: #fff;
  --hs-lime: #2a5cc8;
  background: #f6f8fc; border-top-color: rgba(11,31,79,.06);
}
[data-theme="light"] #hsMain .hs-mbox { background: #f6f8fc; }
[data-theme="light"] #hsMain .hs-msb { background: #f6f8fc; color: #13213f; }
[data-theme="light"] #hsMain .hs-msb svg { fill: #13213f; }
[data-theme="light"] .mp-mod b { color: var(--aw-text); }
[data-theme="light"] .mp-mod-ic::before { box-shadow: 0 0 24px rgba(42,92,200,.35); }
[data-theme="light"] .mp-row { background: #fff; border-color: #e3e7ee; }
[data-theme="light"] .mp-row-mid b { color: var(--aw-text); }
[data-theme="light"] .mp-row.is-on { background: rgba(42,92,200,.08); border-color: rgba(42,92,200,.4); }
[data-theme="light"] .mp-burger--chh { background: rgba(11,31,79,.06); }
[data-theme="light"] .mp-msg { background: #fff; box-shadow: inset 0 0 0 1px #e3e7ee; }
[data-theme="light"] .mp-msg-n { color: #6d4fd6; }
[data-theme="light"] .mp-msg p { color: var(--aw-text); }
[data-theme="light"] .mp-msg p em { color: #2a5cc8; }
[data-theme="light"] .mp-file { background: rgba(11,31,79,.03); }
[data-theme="light"] .mp-msg--ai { background: rgba(20,184,166,.07); box-shadow: none; }
[data-theme="light"] .mp-chk li.is-warn small { color: #c9302c; }
[data-theme="light"] .mp-score { background: rgba(11,31,79,.04); }
[data-theme="light"] .mp-score div > span { color: var(--aw-muted); }
[data-theme="light"] .mp-score b { color: #16a34a; }
[data-theme="light"] .mp-alert { background: rgba(240,82,82,.07); }
[data-theme="light"] .mp-alert b { color: #c9302c; }
[data-theme="light"] .mp-alert p { color: #7a2b2b; }
[data-theme="light"] .mp-drw-bg { background: rgba(11,31,79,.25); }
[data-theme="light"] .mp-drw-p { background: #fff; box-shadow: 12px 0 30px rgba(11,31,79,.15); }
[data-theme="light"] .mp-drw-r { color: var(--aw-text); }
[data-theme="light"] .mp-drw-r.is-on { background: rgba(42,92,200,.08); }
[data-theme="light"] .mp-sec i { background: linear-gradient(90deg, #4f86ff, #2a5cc8); }
[data-theme="light"] .mp-di { background: #fff; border-color: #e3e7ee; }
[data-theme="light"] .mp-di.is-acc { background: rgba(42,92,200,.07); border-color: rgba(42,92,200,.5); }
[data-theme="light"] .mp-tile-l { color: var(--aw-muted); }
[data-theme="light"] .mp-cv.is-glow { border-color: rgba(42,92,200,.45); box-shadow: 0 0 0 1px rgba(42,92,200,.3), 0 20px 50px -24px rgba(42,92,200,.35); }
[data-theme="light"] .mp-sheet { background: #fff; border-top-color: rgba(11,31,79,.1); box-shadow: 0 -24px 50px rgba(11,31,79,.18); }
[data-theme="light"] .mp-handle { background: rgba(11,31,79,.2); }
[data-theme="light"] :is(.aw, .mp) .aw-pct[style*="#ffffff"] { color: var(--aw-text) !important; }
[data-theme="light"] :is(.aw, .mp) .aw-pbar i[style*="#ffffff"] { background: #13213f !important; }

/* ===== 18.10 (7): the first screen sits a little higher, closer to the header (about 20px) ===== */
@media (min-width: 901px) {
  #hsMain .hs-stage:not(#_) { padding-top: calc(var(--header-h) + 4px); padding-bottom: 60px; }
}

/* ===== 19.10.2026: the hero on phones in the design of the desktop one (the animation itself is unchanged):
   - the current step: a soft outlined row like on the desktop (no lime line on top, no filled card), the thin line
     of the time to the next step stays inside it;
   - the app: shown in the phone (22.10.2026; it sank into the page from 19.10 to 22.10) ===== */
@media (max-width: 900px) {
  html #hsMain .hs-step:not(#_):not(#_), html #hsMain .hs-step.is-active:not(#_):not(#_) {
    background: transparent !important; box-shadow: none !important; border: 1px solid rgb(204 255 0 / .45) !important; border-radius: 20px !important; overflow: hidden;
  }
  [data-theme="light"] #hsMain .hs-step:not(#_):not(#_), [data-theme="light"] #hsMain .hs-step.is-active:not(#_):not(#_) { border-color: rgb(29 58 133 / .35) !important; }
  html #hsMain .hs-step:not(#_)::before { display: none !important; }
  html #hsMain .hs-step:not(#_)::after { left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px; box-shadow: none; background: var(--hc-acc, #ccff00); opacity: .8; }
  /* the list at the start (all steps at once): plain rows, only the current one outlined */
  html #hsMain .hs-steps.is-list .hs-step:not(.is-active):not(#_):not(#_) { border-color: transparent !important; }

  /* 22.10.2026: the app is shown in the phone again (body, island, status bar); it no longer sinks into the page */
  html #hsMain .hs-cta:not(#_) { margin-top: 2px; }
}

/* ===== 21.10.2026: the hero steps have a background again, a frosted see-through one (the network shows through
   blurred), not a plain white card. The edge is a thin ring (::before); the lit part of the edge under the cursor is a
   second ring (::after) that fades in and out, so leaving a step never flashes the whole outline ===== */
@media (min-width: 901px) {
  #hsMain { --st-bg: rgb(255 255 255 / .04); --st-edge: rgb(255 255 255 / .07); --st-sh: none; }
  [data-theme="light"] #hsMain { --st-bg: rgb(255 255 255 / .5); --st-edge: rgb(11 31 79 / .08); --st-sh: 0 1px 2px rgb(11 31 79 / .03), 0 18px 40px -30px rgb(11 31 79 / .28); }
  #hsMain .hs-steps:not(#_) { gap: 8px; }
  html #hsMain .hs-step:not(#_):not(#_):not(#_), html #hsMain .hs-step.is-hov:not(#_):not(#_):not(#_) {
    border-color: transparent !important; box-shadow: var(--st-sh) !important;
    background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), var(--st-spot, transparent), transparent 72%) padding-box, linear-gradient(var(--st-bg), var(--st-bg)) padding-box !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  }
  html #hsMain .hs-step.is-hov:not(#_):not(#_):not(#_) { --st-spot: var(--hc-spot); }
  html #hsMain .hs-step:not(#_)::before, html #hsMain .hs-step:not(#_)::after {
    content: ""; position: absolute; inset: -1px; z-index: 0; padding: 1px; border-radius: inherit; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  html #hsMain .hs-step:not(#_)::before { background: var(--st-edge); }
  html #hsMain .hs-step:not(#_)::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), var(--hc-acc), var(--hc-acc2) 45%, transparent 72%); opacity: 0; transition: opacity .45s var(--hs-ease); }
  html #hsMain .hs-step.is-hov:not(#_)::after { opacity: 1; }
}

/* ===== 22.10.2026: the hero steps on phones get the same frosted see-through background and thin edge as on the
   desktop (they had only a lime outline on a transparent ground); the thin line of the time to the next step stays ===== */
@media (max-width: 900px) {
  #hsMain { --st-bg: rgb(255 255 255 / .045); --st-edge: rgb(255 255 255 / .09); }
  [data-theme="light"] #hsMain { --st-bg: rgb(255 255 255 / .6); --st-edge: rgb(11 31 79 / .09); }
  html #hsMain .hs-step:not(#_):not(#_):not(#_), html #hsMain .hs-step.is-active:not(#_):not(#_):not(#_) {
    background: var(--st-bg) !important; border: 1px solid var(--st-edge) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  }
  [data-theme="light"] #hsMain .hs-step:not(#_):not(#_):not(#_) { box-shadow: 0 1px 2px rgb(11 31 79 / .03), 0 18px 40px -30px rgb(11 31 79 / .28) !important; }
  html #hsMain .hs-steps.is-list .hs-step:not(.is-active):not(#_):not(#_):not(#_) { border-color: var(--st-edge) !important; }
}

/* 23.10.2026: a title part that never breaks (/ai/: «з AI»). Wide screens: the line break goes, the words wrap by width
   («Не змагайтеся / з AI у швидкості»); the phone keeps it with a touch smaller type (8vw instead of 9.2vw):
   «Не змагайтеся з AI / у швидкості» */
.hs-title .hs-nw { white-space: nowrap; }
@media (min-width: 901px) { .hs-title .hs-nw ~ br { display: none; } }
@media (max-width: 900px) { .hs-title:has(.hs-nw) { font-size: clamp(26px, 8vw, 48px); } }

/* 23.10.2026: the steps stay hidden until the hero script starts (js/hs-app.js adds .hs-on), so the page never shows them
   for a moment in their resting place before the intro list rises */
#hsMain:not(.hs-on) .hs-steps { visibility: hidden; }

/* 23.10.2026: the four facts under the app window on narrow desktops (901-1359px, a card is 98-150px wide): a smaller icon,
   the number next to it in smaller type, tighter padding, the line under them wraps inside the card */
@media (min-width: 901px) and (max-width: 1359px) {
  #hsMain .hs-feat:not(#_) { column-gap: 8px; row-gap: 8px; padding: 12px 12px 13px !important; }
  #hsMain .hs-feat-ic:not(#_) { width: 30px !important; height: 30px !important; }
  #hsMain .hs-feat-v:not(#_) { font-size: clamp(17px, 1.6vw, 22px) !important; }
  #hsMain .hs-feat-v svg:not(#_) { width: 18px !important; height: 18px !important; }
  #hsMain .hs-feat strong:not(#_) { font-size: 12px !important; line-height: 1.3 !important; overflow-wrap: anywhere; hyphens: auto; }
}

/* 23.10.2026: when the steps do not fit the screen height the list is cut only at its top and bottom (it scrolls),
   not at the sides: a leaning or lit step is no longer cut off at its right edge */
#hsMain .hs-steps.is-clipped:not(#_) { overflow: visible; clip-path: inset(-4px -60px); }
/* touch screens: no press shrink of the steps and the facts (the cursor effects are for the mouse only) */
@media (hover: none) { #hsMain :is(.hs-step, .hs-feat):active:not(#_) { scale: none; } }