/* ==========================================================================
   public-site.css -- unified premium public-site design layer for SEObox.
   Loaded AFTER design-system.css/site.css. Does not touch cabinet (.app-*)
   or admin (.adm-*/.ad-*) classes -- those live in their own systems.
   ========================================================================== */

/* --pub-* tokens now defined in site.css :root / body.dark-theme -- see there. */
/* Public layer only applies outside cabinet/admin. */
body:not(.app-page-active):not(.admin-page-active){
  background:var(--pub-bg);
  color:var(--pub-text);
}
body:not(.app-page-active):not(.admin-page-active) *{
  scrollbar-color:var(--pub-border) transparent;
}

@media(prefers-reduced-motion:reduce){
  body:not(.app-page-active):not(.admin-page-active) *{
    animation-duration:0.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.001ms!important;
    scroll-behavior:auto!important;
  }
}

.pub-container{max-width:var(--pub-container);margin:0 auto;padding:0 24px}
@media(max-width:768px){.pub-container{padding:0 18px}}
@media(max-width:767px){
  .auth-anon,.auth-user .user-name,.auth-user .user-menu-btn{display:none!important}
  .pub-header-right{gap:6px}
  .lang-wrap .lang-menu{right:0;left:auto}
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.pub-header{
  position:sticky;top:0;z-index:80;
  height:var(--pub-header-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--pub-card) 82%, transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--pub-border);
}
.pub-header-inner{
  max-width:var(--pub-container);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;width:100%;gap:24px;
}
.pub-header-logo{display:flex;align-items:center;gap:9px;cursor:pointer;flex-shrink:0}
.pub-header-logo img{height:28px;display:block}
.pub-nav-center{display:flex;align-items:center;gap:4px}
.pub-nav-link{
  position:relative;padding:9px 14px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--pub-text);cursor:pointer;
  display:flex;align-items:center;gap:5px;
  outline:none;
}
.pub-nav-link:hover{background:var(--pub-bg);color:var(--pub-violet)}
.pub-nav-link:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.pub-icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--pub-border);
  background:var(--pub-card);color:var(--pub-muted);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.pub-icon-btn:hover{border-color:var(--pub-violet);color:var(--pub-violet)}
.pub-icon-btn:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.pub-btn{
  height:44px;padding:0 20px;border-radius:var(--pub-r-btn);
  font-size:14.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--pub-border);background:var(--pub-card);color:var(--pub-text);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease;
}
.pub-btn:hover{border-color:var(--pub-violet);color:var(--pub-violet)}
.pub-btn:active{transform:translateY(1px)}
.pub-btn:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-btn:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}
.pub-btn-primary{background:var(--pub-grad);color:#fff;border:none;box-shadow:0 8px 20px rgba(79,125,243,0.24)}
.pub-btn-primary:hover{filter:brightness(1.06);color:#fff;box-shadow:0 10px 26px rgba(79,125,243,0.32)}
.pub-btn-ghost{background:transparent;border-color:transparent;color:var(--pub-violet);height:auto;padding:4px 0}
.pub-btn-ghost:hover{background:transparent;text-decoration:underline}
.pub-btn-loading{position:relative;color:transparent!important;pointer-events:none}
.pub-btn-loading::after{
  content:'';position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;
  animation:pub-spin .7s linear infinite;
}
@keyframes pub-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   MEGA-MENU
   ========================================================================== */
.pub-nav-item{position:relative}
.pub-nav-link{
  position:relative;padding:9px 14px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--pub-text);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  outline:none;background:transparent;border:none;font-family:inherit;
}
.pub-nav-link:hover{background:var(--pub-bg);color:var(--pub-violet)}
.pub-nav-link:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-mega{
  position:absolute;top:calc(100% + 10px);left:0;transform:translateY(-6px);
  width:min(940px,calc(100vw - 32px));
  background:var(--pub-card);border:1px solid var(--pub-border);border-radius:18px;
  box-shadow:var(--pub-shadow-lg);
  padding:24px;
  display:flex;gap:22px;align-items:stretch;flex-wrap:wrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
  z-index:90;
}
.pub-nav-item:hover .pub-mega,.pub-mega:hover,.pub-nav-item.open .pub-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.pub-nav-item.force-closed .pub-mega{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.pub-mega-cols{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 18px;align-content:start}
.pub-mega-col-title{font-size:11px;font-weight:800;color:var(--pub-muted);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px 8px}
.pub-mega-item{
  display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:10px;
  color:var(--pub-text);cursor:pointer;outline:none;text-decoration:none;
}
.pub-mega-item:hover,.pub-mega-item:focus-visible{background:var(--pub-bg)}
.pub-mega-item:focus-visible{outline:2px solid var(--pub-violet);outline-offset:-2px}
.pub-mega-ic{width:32px;height:32px;border-radius:9px;background:var(--pub-bg);color:var(--pub-violet);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pub-mega-item b{display:block;font-size:13.5px;font-weight:700}
.pub-mega-item span{display:block;font-size:11.5px;color:var(--pub-muted);margin-top:1px;line-height:1.4}
.pub-mega-promo{
  width:200px;flex-shrink:0;border-left:1px solid var(--pub-border);padding-left:22px;
  display:flex;flex-direction:column;cursor:pointer;outline:none;border-radius:10px;
}
.pub-mega-promo:hover,.pub-mega-promo:focus-visible{background:var(--pub-bg)}
.pub-mega-promo:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-mega-promo-ic{width:38px;height:38px;border-radius:10px;background:var(--pub-grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.pub-mega-promo b{font-size:14px;font-weight:800;color:var(--pub-text);margin-bottom:5px}
.pub-mega-promo span{font-size:12px;color:var(--pub-muted);line-height:1.45;margin-bottom:10px}
.pub-mega-promo em{font-size:12.5px;font-weight:700;color:var(--pub-violet);font-style:normal;margin-top:auto}
.pub-mega-foot{width:100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--pub-border);text-align:center}
.pub-mega-foot a{font-size:13.5px;font-weight:700;color:var(--pub-violet);text-decoration:none}
.pub-mega-foot a:hover{text-decoration:underline}
.pub-mega-foot a:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px;border-radius:6px}
@media(max-width:1024px){.pub-mega{width:min(600px,calc(100vw - 32px));flex-direction:column}.pub-mega-promo{width:100%;border-left:none;border-top:1px solid var(--pub-border);padding-left:0;padding-top:16px;flex-direction:row;align-items:center;gap:14px}.pub-mega-promo-ic{margin-bottom:0}.pub-mega-promo b,.pub-mega-promo span{margin-bottom:0}.pub-mega-promo em{margin-top:0;margin-left:auto}.pub-mega-cols{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.pub-drawer-backdrop{
  position:fixed;inset:0;background:rgba(11,22,56,0.45);z-index:95;
  opacity:0;visibility:hidden;transition:opacity .2s;
}
.pub-drawer-backdrop.open{opacity:1;visibility:visible}
.pub-drawer{
  position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(360px,calc(100vw - 16px));
  background:var(--pub-card);z-index:96;
  transform:translateX(100%);transition:transform .22s ease;
  display:flex;flex-direction:column;
  box-shadow:-16px 0 40px rgba(11,22,56,0.15);
}
.pub-drawer.open{transform:translateX(0)}
.pub-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;flex-shrink:0;border-bottom:1px solid var(--pub-border)}
.pub-drawer-close{
  width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--pub-border);background:var(--pub-card);color:var(--pub-text);
  cursor:pointer;
}
.pub-drawer-close:hover{background:var(--pub-bg)}
.pub-drawer-close:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-drawer-body{flex:1;overflow-y:auto;padding:10px 16px}
.pub-drawer-footer{flex-shrink:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--pub-border)}
.pub-drawer-actions{display:flex;flex-direction:column;gap:10px}
.pub-drawer-link{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--pub-text);width:100%;text-align:left;background:transparent;border:none;font-family:inherit;cursor:pointer;text-decoration:none;box-sizing:border-box}
.pub-drawer-link:hover{background:var(--pub-bg)}
.pub-drawer-link:focus-visible{outline:2px solid var(--pub-violet);outline-offset:-2px}
.pub-drawer-group{margin-bottom:2px}
.pub-drawer-group-btn svg{transition:transform .2s}
.pub-drawer-group-btn.open svg{transform:rotate(180deg)}
.pub-drawer-sub{max-height:0;overflow:hidden;transition:max-height .25s ease;padding-left:10px}
.pub-drawer-cat-label{font-size:11px;font-weight:800;color:var(--pub-muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 12px 4px}
@media(max-width:390px){.pub-drawer{width:calc(100vw - 16px)}}

/* ==========================================================================
   GENERIC HOMEPAGE / PUBLIC PAGE COMPONENTS
   ========================================================================== */
.pub-section{padding:64px 0}
@media(max-width:768px){.pub-section{padding:44px 0}}
.pub-h1{font-size:clamp(30px,4.4vw,48px);font-weight:900;line-height:1.12;letter-spacing:-0.02em;color:var(--pub-text)}
.pub-h2{font-size:clamp(24px,3vw,34px);font-weight:900;line-height:1.2;letter-spacing:-0.015em;color:var(--pub-text);margin-bottom:10px}
.pub-sub{font-size:15.5px;color:var(--pub-muted);line-height:1.6}
.pub-badge{
  display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--pub-r-pill);
  background:linear-gradient(135deg,rgba(20,184,196,0.10),rgba(135,88,245,0.10));
  border:1px solid rgba(135,88,245,0.20);
  font-size:12.5px;font-weight:700;color:var(--pub-violet);
}
.pub-card{
  background:var(--pub-card);border:1px solid var(--pub-border);border-radius:var(--pub-r-card);
  box-shadow:var(--pub-shadow-sm);
}
.pub-head{margin-bottom:36px}
.pub-head.center{text-align:center;max-width:620px;margin-left:auto;margin-right:auto}

/* Section 2 -- goal cards */
.pub-goals{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pub-goal{
  padding:24px 20px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.pub-goal:hover{transform:translateY(-3px);box-shadow:var(--pub-shadow-md);border-color:var(--pub-violet)}
.pub-goal:focus-visible{outline:2px solid var(--pub-violet);outline-offset:2px}
.pub-goal-ic{width:42px;height:42px;border-radius:11px;background:var(--pub-grad);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.pub-goal h4{font-size:15.5px;font-weight:800;margin-bottom:5px;color:var(--pub-text)}
.pub-goal p{font-size:12.5px;color:var(--pub-muted);line-height:1.5;margin-bottom:8px}
.pub-goal-arrow{font-size:13px;font-weight:700;color:var(--pub-violet)}

/* Section 3 -- 3 steps with mini UI demo */
.pub-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pub-step-num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--pub-grad);color:#fff;font-weight:900;font-size:13px;margin-bottom:14px;
}
.pub-step h4{font-size:15.5px;font-weight:800;margin-bottom:6px;color:var(--pub-text)}
.pub-step p{font-size:12.5px;color:var(--pub-muted);line-height:1.5;margin-bottom:14px}
.pub-step-demo{
  background:var(--pub-bg);border:1px solid var(--pub-border);border-radius:12px;padding:14px;
}
.pub-step-demo-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px;color:var(--pub-muted)}
.pub-step-demo-row b{color:var(--pub-text);font-weight:700}
.pub-step-demo-dot{width:7px;height:7px;border-radius:50%;background:var(--pub-grad);flex-shrink:0}
.pub-step-demo-bar{height:6px;border-radius:4px;background:var(--pub-border);overflow:hidden;flex:1}
.pub-step-demo-bar i{display:block;height:100%;background:var(--pub-grad);border-radius:4px}

/* Section 4 -- 6 feature cards */
.pub-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pub-feature{padding:22px 20px}
.pub-feature-ic{width:38px;height:38px;border-radius:10px;background:var(--pub-bg);color:var(--pub-violet);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.pub-feature h4{font-size:14.5px;font-weight:800;margin-bottom:4px;color:var(--pub-text)}
.pub-feature p{font-size:12px;color:var(--pub-muted);line-height:1.5}

/* Section 5 -- dark cabinet demo (only large dark section) */
.pub-navy{background:#0A1224;padding:72px 0}
.pub-navy-inner{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.pub-navy-shot{border-radius:16px;overflow:hidden;border:1px solid rgba(243,246,252,0.10);box-shadow:0 24px 56px rgba(0,0,0,0.35)}
.pub-navy-shot img{display:block;width:100%;height:auto}
.pub-navy h2{color:#F3F6FC;font-size:clamp(24px,3vw,32px);font-weight:900;margin-bottom:14px}
.pub-navy p{color:#93A0C0;font-size:14.5px;line-height:1.6;margin-bottom:20px}
.pub-navy-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:4px}
.pub-navy-list li{display:flex;align-items:center;gap:9px;color:#E3E8F5;font-size:13.5px;padding:6px 0}
.pub-navy-list li svg{color:#2CD4E0;flex-shrink:0}

/* Section 6 -- audience */
.pub-aud{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pub-aud-card{padding:20px 18px;text-align:center}
.pub-aud-ic{width:38px;height:38px;border-radius:10px;background:var(--pub-bg);color:var(--pub-violet);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.pub-aud-card b{display:block;font-size:13.5px;color:var(--pub-text);margin-bottom:4px}
.pub-aud-card span{display:block;font-size:11.5px;color:var(--pub-muted);line-height:1.4}

/* Section 8 -- FAQ + CTA */
.pub-faq-cta{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}
.pub-faq-item{border-bottom:1px solid var(--pub-border);padding:14px 2px}
.pub-faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:14px;font-weight:700;color:var(--pub-text)}
.pub-faq-q svg{flex-shrink:0;transition:transform .15s;color:var(--pub-muted)}
.pub-faq-item.open .pub-faq-q svg{transform:rotate(180deg)}
.pub-faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease}
.pub-faq-item.open .pub-faq-a{max-height:200px}
.pub-faq-a p{font-size:13px;color:var(--pub-muted);line-height:1.6;padding:10px 2px 2px}
.pub-cta-card{
  background:var(--pub-grad);border-radius:20px;padding:36px 30px;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.pub-cta-card h3{font-size:22px;font-weight:900}
.pub-cta-card p{font-size:14px;opacity:0.92;line-height:1.5}
.pub-cta-card .pub-btn{background:#fff;color:var(--pub-violet);border:none}
.pub-cta-card .pub-btn:hover{filter:brightness(0.97);color:var(--pub-violet)}

@media(max-width:1024px){
  .pub-goals{grid-template-columns:1fr 1fr}
  .pub-features{grid-template-columns:1fr 1fr}
  .pub-aud{grid-template-columns:1fr 1fr}
  .pub-steps{grid-template-columns:1fr}
  .pub-navy-inner{grid-template-columns:1fr;gap:28px}
  .pub-faq-cta{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pub-goals{grid-template-columns:1fr}
  .pub-features{grid-template-columns:1fr}
  .pub-aud{grid-template-columns:1fr}
}

/* ==========================================================================
   .pub-footer-* -- новая система футера
   ========================================================================== */
.pub-footer{background:#07152B;padding:56px 0 0;color:#E3E8F5}
.pub-footer-inner{display:flex;flex-direction:column}
.pub-footer-main{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;padding-bottom:36px}
.pub-footer-brand p{font-size:13px;color:#93A0C0;margin:14px 0 14px;line-height:1.5}
.pub-footer-contacts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pub-footer-contacts a{display:flex;align-items:center;gap:8px;color:#93A0C0;font-size:12.5px;text-decoration:none}
.pub-footer-contacts a:hover{color:#fff}
.pub-footer-sug{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#E3E8F5;font-size:12.5px;font-weight:700;cursor:pointer}
.pub-footer-sug:hover{background:rgba(255,255,255,0.10)}
.pub-footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pub-footer-col h4{font-size:12px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em;margin:0 0 12px}
.pub-footer-col a{display:block;font-size:13px;color:#93A0C0;text-decoration:none;padding:5px 0}
.pub-footer-col a:hover{color:#fff}
.pub-footer-pay{padding:16px 0;border-top:1px solid rgba(255,255,255,0.10);font-size:12px;color:#7E8CAE}
.pub-footer-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:16px 0 24px;font-size:12.5px;color:#7E8CAE}
.pub-footer-legal{display:flex;gap:20px;flex-wrap:wrap}
.pub-footer-legal a{color:#93A0C0;text-decoration:none;cursor:pointer;font-size:12.5px}
.pub-footer-legal a:hover{color:#fff}
@media(max-width:900px){
  .pub-footer-main{grid-template-columns:1fr}
  .pub-footer-cols{grid-template-columns:1fr 1fr;row-gap:24px}
}
@media(max-width:560px){
  .pub-footer-cols{grid-template-columns:1fr 1fr}
  .pub-footer-bot{flex-direction:column;align-items:flex-start}
}

/* Скрытие центральной навигации на мобильных — размещено в конце файла
   намеренно: более раннее media-правило проигрывало безусловному
   .pub-nav-center{display:flex} по порядку каскада (это и вызывало то, что
   невидимый, но всё ещё flex-отображаемый блок перехватывал клики по
   кнопке темы на 390px). */
@media(max-width:767px){.pub-nav-center{display:none!important}}

/* ==========================================================================
   ШАПКА И ФУТЕР — приведение к утверждённому макету главной.
   Классы общие для всех публичных страниц, поэтому меняется только палитра,
   высота и плотность; структура и поведение не затрагиваются.
   ========================================================================== */
.pub-header{
  height:78px;
  background:#FFFFFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid #EAEDF4;
}
.pub-header-inner{gap:20px}
.pub-header-logo-text{font-size:21px;font-weight:800;letter-spacing:-0.02em;color:#101F3F}
.pub-header-logo img{height:26px}
.pub-nav-center{gap:12px}
.pub-nav-link{font-size:14.5px;font-weight:600;color:#5A6A8C;padding:9px 6px;border-radius:8px}
.pub-nav-link:hover{background:transparent;color:#5D74E8}
.pub-header-right .pub-btn{height:40px;padding:0 18px;font-size:14.5px;border-radius:9px;
  border-color:transparent;background:transparent;color:#3D4B66}
.pub-header-right .pub-btn:hover{color:#5D74E8;border-color:transparent}
.pub-header-right .pub-btn-primary{
  background:linear-gradient(120deg,#3B82F6,#7C4DF0);color:#fff;padding:0 20px;
  box-shadow:0 6px 16px rgba(59,130,246,0.24);
}
.pub-header-right .pub-btn-primary:hover{color:#fff}
.pub-icon-btn{width:34px;height:34px;border-radius:9px;border-color:#E7EAF2;color:#7A879F}
/* Кнопка темы видима по требованию п.2/п.5 (гость: тема, RU, Войти, CTA) */
/* Переключатель языка — текстовый "RU ▾", как на макете */
.pub-header .lang-wrap>.pub-icon-btn{border:none;background:transparent;color:#3D4B66;font-size:14.5px;font-weight:600}
.pub-header .lang-wrap>.pub-icon-btn:hover{color:#5D74E8}
.pub-header .lang-wrap>.pub-icon-btn .ic:first-child{display:none}

/* ---- футер ---- */
.pub-footer{background:#0A1930;padding:24px 0 0;color:#DCE4F2}
.pub-footer-main{grid-template-columns:1.35fr 1fr 1fr 1fr 1.15fr;gap:28px;padding-bottom:10px}
.pub-footer-brand .pub-header-logo-text{color:#F2F6FD;font-size:20px}
.pub-footer-brand p{font-size:12.5px;line-height:1.5;color:#8FA0BF;margin:8px 0 9px;max-width:250px}
.pub-footer-soc{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.pub-soc{
  width:28px;height:28px;border-radius:9px;background:#13294A;
  display:flex;align-items:center;justify-content:center;color:#C6D4EC;flex-shrink:0;
}
.pub-soc:hover{background:#1B3760;color:#fff}
.pub-soc .ic{width:16px;height:16px}
.pub-soc-tx{font-size:12px;font-weight:800;letter-spacing:-0.01em}
.pub-footer-contacts{gap:1px;margin-bottom:7px}
.pub-footer-contacts a{font-size:11px;line-height:1.4;color:#7E8FAE}
.pub-footer-sug{font-size:11.5px;padding:5px 11px;height:28px;margin:0}
.pub-footer-cols{display:contents}
.pub-footer-col h4{font-size:14px;font-weight:800;color:#F2F6FD;text-transform:none;letter-spacing:-0.01em;margin:0 0 9px}
.pub-footer-col a{font-size:12.5px;color:#8FA0BF;padding:3px 0;line-height:1.4}
.pub-footer-cols .pub-footer-col:first-child{column-count:2;column-gap:16px}
.pub-footer-cols .pub-footer-col:first-child h4{column-span:all}
.pub-footer-cols .pub-footer-col:first-child a{break-inside:avoid}
.pub-footer-bot{border-top:1px solid rgba(255,255,255,0.07);padding:9px 0 12px;font-size:12px;color:#7E8FAE;align-items:center}
.pub-footer-legal{gap:28px}
.pub-footer-legal a{font-size:12px;color:#8FA0BF}
.pub-footer-note{font-size:10.5px;color:#6C7C99}
@media(max-width:900px){
  .pub-footer-cols{display:grid}
  .pub-footer-main{grid-template-columns:1fr}
}

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА — система .ph-* (соответствие утверждённому макету).
   Полностью заменяет прежние .hp-* / .pub-home-* / .pub-goal-* блоки.
   Общие компоненты (шапка, мега-меню, drawer, футер) живут выше в этом файле.
   ========================================================================== */
:root{
  --pub-container:1400px;
  --ph-ink:#101F3F;
  --ph-ink-2:#16264A;
  --ph-mut:#6B7A94;
  --ph-line:#E7EAF2;
  --ph-vio:#7C5CF0;
  --ph-blue:#3B82F6;
  --ph-cyan:#22C7E8;
  --ph-grad:linear-gradient(120deg,#22C7E8 0%,#3B82F6 48%,#8B5CF6 100%);
  --ph-card-r:14px;
}

/* Секции главной перекрывают декоративные пятна body::before собственным фоном */
.ph-hero,.ph-sec,.ph-dark{position:relative;z-index:1}
.ph-sec{padding:40px 0 50px}
.ph-sec-goals{background:linear-gradient(180deg,#FBFBFE 0%,#FAFBFE 100%);margin-top:-1px}
.ph-sec-steps{background:#FFFFFF;padding:42px 0 33px}
.ph-sec-features{background:#F7F8FC;padding:40px 0 24px}
.ph-sec-aud{background:#F9FAFC;padding:35px 0 27px}
.ph-sec-formats{background:#F9FAFC;padding:27px 0 6px}
.ph-sec-faq{background:#FBFBFD;padding:38px 0 24px}

.ph-h2{
  font-size:34px;line-height:1.24;font-weight:800;letter-spacing:-0.015em;
  color:var(--ph-ink);text-align:center;margin:0 0 33px;
}
.ph-sec-aud .ph-h2,.ph-sec-formats .ph-h2{margin-bottom:22px}
.ph-sec-steps .ph-h2{margin-bottom:30px}
.ph-sec-features .ph-h2{margin-bottom:24px}
.ph-h3{font-size:23px;line-height:1.3;font-weight:800;color:var(--ph-ink);margin:0 0 16px}

.ph-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:54px;padding:0 34px;border-radius:11px;border:none;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;letter-spacing:-0.005em;
  transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
}
.ph-btn-primary{background:var(--ph-grad);color:#fff;box-shadow:0 10px 26px rgba(59,130,246,0.22)}
.ph-btn-primary:hover{filter:brightness(1.06)}
.ph-btn-primary:active{transform:translateY(1px)}
.ph-btn-white{background:#fff;color:#5B47C9}
.ph-btn-white:hover{filter:brightness(0.97)}
.ph-btn:focus-visible{outline:2px solid var(--ph-vio);outline-offset:3px}

.ph-textlink{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:15px;font-weight:600;color:#5D74E8;
}
.ph-textlink .ic{width:15px;height:15px}
.ph-textlink:hover{color:var(--ph-vio)}

.ph-ic-violet{color:#8B5CF6}
.ph-ic-blue{color:#3B82F6}
.ph-ic-cyan{color:#22B8E0}

/* ===================== HERO ===================== */
.ph-hero{padding:0;overflow:hidden;border-bottom:none;background:linear-gradient(180deg,#F7F8FC 0%,#F8F9FD 60%,#FBFBFE 100%)}
.ph-hero-in{display:grid;grid-template-columns:minmax(0,568px) minmax(0,1fr);gap:8px;align-items:start;min-height:750px}
.ph-hero-copy{padding-top:100px}
.ph-eyebrow{
  font-size:13.5px;font-weight:800;letter-spacing:0.11em;text-transform:uppercase;
  color:#6B5CE7;margin:0 0 26px;
}
.ph-hero-copy h1{
  font-size:45px;line-height:1.2;font-weight:800;letter-spacing:-0.026em;
  color:var(--ph-ink);margin:0 0 24px;
}
.ph-hero-sub{font-size:17px;line-height:1.85;color:#5C6B85;margin:0 0 44px;max-width:405px}
.ph-hero-cta{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-bottom:78px}
.ph-trust{list-style:none;display:flex;flex-wrap:wrap;gap:30px;margin:0;padding:0}
.ph-trust li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:#5C6B85}
.ph-trust li .ic{width:19px;height:19px;color:#7C7CE8;flex-shrink:0;stroke-width:1.7}

.ph-hero-visual{position:relative;height:750px;width:100%}
.ph-laptop-visual{display:flex;align-items:center;justify-content:flex-end;overflow:visible}
.ph-laptop-wrap{position:relative;width:min(116%,860px);margin-left:auto;margin-right:-48px;pointer-events:none}
.ph-laptop-wrap::before{content:"";position:absolute;inset:7% 8% 11% 15%;border-radius:50%;background:radial-gradient(circle at 47% 43%,rgba(255,255,255,.60) 0%,rgba(147,197,253,.18) 19%,rgba(125,211,252,.12) 34%,rgba(167,139,250,.10) 54%,rgba(255,255,255,0) 76%);filter:blur(12px)}
.ph-laptop-glow{position:absolute;inset:14% 12% 15% 18%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.72) 0%,rgba(191,219,254,.26) 18%,rgba(125,211,252,.14) 33%,rgba(167,139,250,.10) 54%,rgba(255,255,255,0) 72%);filter:blur(22px)}
.ph-laptop-img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 26px 46px rgba(88,90,226,.14))}

.ph-shot{position:absolute;overflow:hidden;border-radius:16px;background:#0C1A33}
.ph-shot-fit{transform-origin:top left}
.ph-shot-main{left:96px;top:44px;width:680px;height:508px;
  border:1px solid rgba(255,255,255,0.10);box-shadow:0 24px 54px rgba(11,22,56,0.28)}
.ph-shot-main .ph-shot-fit{width:900px;transform:scale(.7556)}
.ph-shot-main .sbd{height:673px}
.ph-shot-cal{left:0;top:344px;width:320px;height:264px;
  border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 44px rgba(11,22,56,0.32)}
.ph-shot-cal .ph-shot-fit{width:420px;transform:scale(.7619)}
.ph-shot-cal .sbcal{height:346px}
.ph-shot-ai{left:516px;top:318px;width:260px;height:314px;
  border:1px solid rgba(255,255,255,0.12);box-shadow:0 20px 44px rgba(11,22,56,0.32)}
.ph-shot-ai .ph-shot-fit{width:320px;transform:scale(.8125)}
.ph-shot-ai .sbai{height:387px}

/* ===================== ЧТО ВЫ ХОТИТЕ СДЕЛАТЬ ===================== */
.ph-goals{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.ph-goal{
  position:relative;text-align:left;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);
  padding:28px 26px 26px;min-height:287px;
  display:flex;flex-direction:column;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.ph-goal:hover{border-color:#CFD8F0;box-shadow:0 10px 26px rgba(16,31,63,0.07);transform:translateY(-2px)}
.ph-goal:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-goal-ic{width:46px;height:46px;stroke-width:1.5;margin-bottom:38px}
.ph-goal h3{font-size:17px;line-height:1.3;font-weight:800;color:var(--ph-ink);margin:0 0 14px}
.ph-goal p{font-size:14px;line-height:1.75;color:var(--ph-mut);margin:0}
.ph-goal-arrow{width:20px;height:20px;color:#6B6BE8;stroke-width:1.8;margin-top:auto;padding-top:2px}

/* ===================== ТРИ ШАГА ===================== */
.ph-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ph-step h3{font-size:17px;line-height:1.3;font-weight:800;color:var(--ph-ink);margin:0 0 14px}
.ph-step p{font-size:14px;line-height:1.75;color:var(--ph-mut);margin:0 0 26px}
.ph-step-card{background:#FCFCFE;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);padding:22px 20px;min-height:315px}
.ph-card-btn{cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease;width:100%;text-align:left;font-family:inherit}
.ph-card-btn:hover{border-color:#CFD8F0;box-shadow:0 10px 24px rgba(16,31,63,0.07)}
.ph-card-btn:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-step-card-t{display:block;font-size:15px;font-weight:800;color:var(--ph-ink);margin-bottom:18px}
.ph-pick{
  display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--ph-line);
  border-radius:11px;padding:11px 13px;margin-bottom:11px;font-size:13px;color:#3D4B66;font-weight:500;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.ph-pick:hover{border-color:#C7D2EE;box-shadow:0 4px 12px rgba(16,31,63,0.07)}
.ph-pick:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-pick-ic{width:23px;height:23px;border-radius:7px;background:#F3F5FD;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph-pick-ic .ic{width:13px;height:13px}
.ph-pick-ch{width:13px;height:13px;color:#A6B0C6;margin-left:auto;flex-shrink:0}
.ph-fakefield{display:block;width:100%;background:#fff;border:1px solid var(--ph-line);border-radius:10px;padding:13px 14px;font-size:13.5px;color:#3D4B66;margin-bottom:16px;font-family:inherit;outline:none;transition:border-color .14s ease}
.ph-fakefield::placeholder{color:#9BA6BC}
.ph-fakefield:focus{border-color:#A9B8E8}
.ph-fakebtn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border-radius:9px;background:linear-gradient(120deg,#4F5BE8,#7C4DF0);color:#fff;font-size:13px;font-weight:700;border:none;font-family:inherit;cursor:pointer;transition:filter .14s ease}
.ph-fakebtn:hover{filter:brightness(1.08)}
.ph-fakebtn:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-step-note{font-size:13px;font-weight:700;color:#3D4B66;margin:22px 0 12px}
.ph-tiles{display:flex;gap:11px}
.ph-tile{
  width:56px;height:56px;border-radius:12px;background:#fff;border:1px solid var(--ph-line);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
  font-family:inherit;cursor:pointer;padding:0;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
.ph-tile:hover{border-color:#C7D2EE;box-shadow:0 6px 16px rgba(16,31,63,0.09);transform:translateY(-1px)}
.ph-tile:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-tile-ya{color:#FC3F1D;font-size:19px}
.ph-tile-vk{color:#0077FF;font-size:14px}
.ph-tile-more{color:#98A2B8;font-size:17px;letter-spacing:1px}
.ph-prog{background:#fff;border:1px solid var(--ph-line);border-radius:12px;padding:18px 16px 8px}
.ph-prog-l{font-size:12.5px;color:var(--ph-mut)}
.ph-prog-v{font-size:34px;font-weight:800;color:var(--ph-ink);line-height:1.15;margin:6px 0 10px}
.ph-prog-v i{font-size:14px;font-weight:600;color:#9BA6BC;font-style:normal;margin-left:3px}
.ph-prog-d{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#2E9E6B;font-weight:600}
.ph-prog-d .ic{width:11px;height:11px}
.ph-prog-chart{display:block;width:100%;height:78px;margin-top:8px}

/* ===================== ВСЁ НЕОБХОДИМОЕ ДЛЯ РОСТА ===================== */
.ph-features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1210px;margin:0 auto}
.ph-feature{background:#FCFCFE;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);padding:24px 30px;min-height:190px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.ph-feature:hover{border-color:#CFD8F0;box-shadow:0 10px 26px rgba(16,31,63,0.07);transform:translateY(-2px)}
.ph-feature:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-feature-ic{width:34px;height:34px;stroke-width:1.5;margin-bottom:22px}
.ph-feature h3{font-size:17px;line-height:1.3;font-weight:800;color:var(--ph-ink);margin:0 0 12px}
.ph-feature p{font-size:14px;line-height:1.75;color:var(--ph-mut);margin:0}
.ph-features-more{text-align:center;margin-top:24px}

/* ===================== ТЁМНАЯ СЕКЦИЯ ===================== */
.ph-dark{background:#0B1B36;padding:29px 0 22px}
.ph-dark-in{display:grid;grid-template-columns:877px minmax(0,1fr);gap:62px;align-items:center}
.ph-dark-shot{width:877px;height:589px;overflow:hidden;border-radius:16px;background:#0C1A33;
  border:1px solid rgba(255,255,255,0.10);box-shadow:0 24px 56px rgba(0,0,0,0.34)}
.ph-dark-shot .ph-shot-fit{width:900px;transform:scale(.9744);transform-origin:top left}
.ph-dark-shot .sbd{height:605px}
.ph-dark-txt h2{font-size:37px;line-height:1.26;font-weight:800;letter-spacing:-0.02em;color:#F4F7FD;margin:0 0 34px}
.ph-dark-list{list-style:none;margin:0 0 44px;padding:0;display:flex;flex-direction:column;gap:24px}
.ph-dark-list li{display:flex;align-items:flex-start;gap:14px;color:#DDE5F4;font-size:16.5px;line-height:1.55}
.ph-dark-list li .ic{width:22px;height:22px;color:#5B8DEF;flex-shrink:0;margin-top:2px;stroke-width:1.7}

/* ===================== ТАРИФЫ НА ГЛАВНОЙ ===================== */
.ph-sec-plans{background:#F9FAFC;padding:27px 0 44px}
.ph-sec-plans .ph-h2{margin-bottom:6px}
.ph-plans-wrap{--pub-container:1400px}
.ph-plans-wrap .pricing-wide{padding-left:20px;padding-right:20px}

/* ===================== КОМУ ПОДХОДИТ ===================== */
.ph-aud{display:grid;grid-template-columns:repeat(4,1fr);gap:27px}
.ph-aud-card{background:#FCFCFE;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);padding:26px 24px;min-height:190px}
.ph-aud-ic{width:34px;height:34px;stroke-width:1.5;margin-bottom:24px}
.ph-aud-card b{display:block;font-size:16px;font-weight:800;color:var(--ph-ink);margin-bottom:12px}
.ph-aud-card span{display:block;font-size:14px;line-height:1.75;color:var(--ph-mut)}

/* ===================== ФОРМАТЫ ===================== */
.ph-formats{display:grid;grid-template-columns:repeat(4,1fr);gap:27px}
.ph-format{
  display:grid;grid-template-columns:34px 1fr;column-gap:16px;row-gap:16px;align-items:center;
  text-align:left;font-family:inherit;cursor:pointer;
  background:#FCFCFE;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);
  padding:24px 24px;min-height:151px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.ph-format:hover{border-color:#CFD8F0;box-shadow:0 10px 26px rgba(16,31,63,0.07);transform:translateY(-2px)}
.ph-format:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.ph-format-ic{width:30px;height:30px;stroke-width:1.5}
.ph-format b{font-size:16px;font-weight:800;color:var(--ph-ink)}
.ph-format-ar{width:20px;height:20px;color:#6B6BE8;stroke-width:1.8;align-self:start;margin-top:3px}
.ph-format span{font-size:14px;line-height:1.7;color:var(--ph-mut)}

/* ===================== FAQ + CTA ===================== */
.ph-faq-in{display:grid;grid-template-columns:minmax(0,656px) minmax(0,1fr);gap:58px;align-items:start}
.ph-faq-list{background:#fff;border:1px solid var(--ph-line);border-radius:var(--ph-card-r);overflow:hidden}
.ph-faq-list .faq-item{
  background:transparent;border:none;border-radius:0;margin:0;box-shadow:none;
  border-bottom:1px solid var(--ph-line);padding:0;cursor:pointer;transition:none;
}
.ph-faq-list .faq-item:last-child{border-bottom:none}
.ph-faq-list .faq-item.open{border-color:transparent;border-bottom-color:var(--ph-line)}
.ph-faq-list .faq-item.open:last-child{border-bottom-color:transparent}
.ph-faq-list .faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 22px;font-size:14px;font-weight:500;color:#3D4B66;
}
.ph-faq-list .faq-item.open .faq-toggle{color:#98A2B8}
.ph-faq-list .faq-toggle{width:16px;height:16px;color:#98A2B8;flex-shrink:0;transition:transform .18s ease}
.ph-faq-list .faq-item.open .faq-toggle{transform:rotate(180deg)}
.ph-faq-list .faq-a{max-height:0;overflow:hidden;transition:max-height .22s ease}
.ph-faq-list .faq-a-inner{padding:0 22px 18px;font-size:13.5px;line-height:1.7;color:var(--ph-mut)}
.ph-cta{
  background:var(--ph-grad);border-radius:18px;padding:40px 46px;color:#fff;
  display:flex;flex-direction:column;align-items:flex-start;min-height:310px;
}
.ph-cta h3{font-size:31px;line-height:1.28;font-weight:800;letter-spacing:-0.015em;margin:0 0 18px;color:#fff}
.ph-cta p{font-size:16px;line-height:1.65;margin:0 0 30px;color:rgba(255,255,255,0.92)}
.ph-cta .ph-btn{margin-top:auto}

/* ===================== АДАПТИВ ===================== */
@media(min-width:1200px) and (max-width:1439px){
  .ph-hero-in{grid-template-columns:minmax(0,470px) minmax(0,1fr)}
  .ph-laptop-wrap{width:min(112%,780px);margin-right:-30px}
  .ph-shot-main{left:24px}
  .ph-shot-ai{left:436px}
  .ph-dark-in{grid-template-columns:680px minmax(0,1fr);gap:44px}
  .ph-dark-shot{width:680px;height:529px}
  .ph-dark-shot .ph-shot-fit{transform:scale(.7556)}
}
@media(max-width:1199px){
  .ph-hero-in{grid-template-columns:1fr;gap:34px;min-height:0}
  .ph-hero-copy{padding-top:44px;padding-bottom:44px}
  .ph-hero-visual{display:none}
  .ph-goals,.ph-features,.ph-aud,.ph-formats{grid-template-columns:1fr 1fr}
  .ph-steps{grid-template-columns:1fr}
  .ph-dark-in{grid-template-columns:1fr;gap:32px}
  .ph-dark-shot{display:none}
  .ph-faq-in{grid-template-columns:1fr;gap:32px}
  .ph-goal{min-height:0}
  .ph-step-card{min-height:0}
}
@media(max-width:767px){
  .ph-sec,.ph-sec-steps,.ph-sec-features,.ph-sec-aud,.ph-sec-formats,.ph-sec-faq{padding:34px 0}
  .ph-h2{font-size:26px;margin-bottom:24px}
  .ph-hero-copy h1{font-size:32px}
  .ph-hero-sub{font-size:15.5px;margin-bottom:28px}
  .ph-hero-cta{gap:18px;margin-bottom:32px}
  .ph-trust{gap:14px}
  .ph-goals,.ph-features,.ph-aud,.ph-formats{grid-template-columns:1fr}
  .ph-cta{padding:30px 26px;min-height:0}
  .ph-cta h3{font-size:24px}
  .ph-dark-txt h2{font-size:27px}
}

/* ==========================================================================
   МОК-ПАНЕЛИ ИНТЕРФЕЙСА (вёрстка вместо скриншотов)
   ========================================================================== */
.sbd,.sbcal,.sbai{font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased}

/* --- Дашборд --- */
.sbd{width:900px;height:700px;display:grid;grid-template-columns:158px 1fr;background:#0C1A33;color:#E6EDFA;overflow:hidden}
.sbd-side{background:#0A1730;border-right:1px solid rgba(255,255,255,0.06);padding:16px 12px;display:flex;flex-direction:column}
.sbd-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:#F1F5FE;padding:2px 6px 18px}
.sbd-mark{width:19px;height:19px;border-radius:6px;background:linear-gradient(135deg,#22C7E8,#8B5CF6);flex-shrink:0}
.sbd-nav{display:flex;flex-direction:column;gap:2px}
.sbd-nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px;color:#93A4C4}
.sbd-nav-i i{width:14px;height:14px;border-radius:50%;border:1.2px solid #56698C;flex-shrink:0}
.sbd-nav-i.on{background:rgba(94,124,255,0.16);color:#EAF0FF}
.sbd-nav-i.on i{border-color:#7EA2FF}
.sbd-sup{margin-top:auto}
.sbd-main{padding:16px;display:flex;flex-direction:column;min-width:0}
.sbd-top{display:flex;align-items:center;gap:10px;height:36px;margin-bottom:12px}
.sbd-top b{font-size:19px;font-weight:800;color:#F1F5FE;margin-right:auto}
.sbd-pill{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:8px;
  background:#122444;border:1px solid rgba(255,255,255,0.08);font-size:11px;color:#A9B8D4}
.sbd-pill .ic{width:11px;height:11px}
.sbd-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:138px 236px minmax(0,1fr);gap:12px;min-height:0}
.sbd-card{background:#122444;border:1px solid rgba(255,255,255,0.07);border-radius:11px;padding:13px 14px;min-width:0}
.sbd-lbl{display:block;font-size:11px;color:#93A4C4;margin-bottom:8px}
.sbd-gauge{grid-column:1;grid-row:1/3;align-self:start;height:190px;display:flex;flex-direction:column;align-items:center}
.sbd-gauge .sbd-lbl{align-self:flex-start}
.sbd-gauge-svg{width:118px;height:86px;display:block}
.sbd-gauge-n{fill:#F3F7FF;font-size:30px;font-weight:800}
.sbd-gauge-s{fill:#93A4C4;font-size:11px}
.sbd-good{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#39C08A;margin-top:6px}
.sbd-good i{width:6px;height:6px;background:#39C08A;transform:rotate(45deg)}
.sbd-num{font-size:24px;font-weight:800;color:#F3F7FF;letter-spacing:-0.01em}
.sbd-num i{font-size:11px;font-weight:700;color:#39C08A;font-style:normal;margin-left:7px}
.sbd-spark{display:block;width:100%;height:34px;margin-top:10px}
.sbd-chart{grid-column:2/5;grid-row:2}
.sbd-chart-body{display:flex;gap:8px;height:140px}
.sbd-yax{display:flex;flex-direction:column;justify-content:space-between;font-size:9.5px;color:#7A8CAC;padding:2px 0 4px}
.sbd-chart-svg{flex:1;height:140px}
.sbd-xax{display:flex;justify-content:space-between;font-size:9.5px;color:#7A8CAC;padding:8px 0 0 30px}
.sbd-tbl{grid-column:1/3;grid-row:3}
.sbd-tr{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:6px;font-size:10.5px;color:#D3DEF2;padding:9px 0;border-top:1px solid rgba(255,255,255,0.05)}
.sbd-tr span:not(:first-child){text-align:right}
.sbd-th{color:#7A8CAC;border-top:none}
.sbd-don{grid-column:3/5;grid-row:3}
.sbd-don-body{display:flex;align-items:center;gap:16px}
.sbd-don-svg{width:92px;height:92px;flex-shrink:0}
.sbd-don-n{fill:#F3F7FF;font-size:15px;font-weight:800}
.sbd-don-s{fill:#7A8CAC;font-size:8px}
.sbd-leg{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.sbd-leg span{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#C6D3EA}
.sbd-leg i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sbd-leg b{margin-left:auto;color:#93A4C4;font-weight:600}

/* --- Календарь --- */
.sbcal{width:420px;height:360px;background:#0C1A33;padding:14px 15px;display:flex;flex-direction:column;color:#E6EDFA}
.sbcal-t{font-size:13px;font-weight:800;color:#F1F5FE;margin-bottom:11px}
.sbcal-bar{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.sbcal-nav,.sbcal-m{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;
  background:#122444;border:1px solid rgba(255,255,255,0.08);font-size:10.5px;color:#B7C4DD}
.sbcal-nav{padding:0 6px}
.sbcal-nav .ic,.sbcal-m .ic{width:10px;height:10px}
.sbcal-add{margin-left:auto;display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:7px;
  background:linear-gradient(120deg,#3B82F6,#8B5CF6);font-size:10.5px;font-weight:700;color:#fff}
.sbcal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:9.5px;color:#7A8CAC;margin-bottom:5px}
.sbcal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;gap:4px;flex:1}
.sbcal-c{background:#101F3C;border:1px solid rgba(255,255,255,0.05);border-radius:5px;padding:3px 4px;
  font-size:8.5px;color:#8496B5;display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
.sbcal-chip{display:block;font-style:normal;font-size:7.5px;font-weight:700;color:#fff;border-radius:3px;padding:2px 3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbcal-v{background:#7C4DF0}
.sbcal-b{background:#3B82F6}
.sbcal-cy{background:#17A9CC}

/* --- AI-панель --- */
.sbai{width:320px;height:420px;background:#0C1A33;padding:15px 15px 16px;display:flex;flex-direction:column;color:#E6EDFA}
.sbai-h{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.sbai-h b{font-size:13px;font-weight:800;color:#F1F5FE}
.sbai-h em{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.06em;color:#fff;
  background:#5B47C9;border-radius:4px;padding:3px 6px}
.sbai-x{width:12px;height:12px;color:#8496B5;margin-left:auto}
.sbai-s{font-size:10.5px;color:#93A4C4;margin-bottom:12px}
.sbai-list{display:flex;flex-direction:column;gap:9px}
.sbai-i{display:flex;align-items:flex-start;gap:10px;background:#122444;border:1px solid rgba(255,255,255,0.07);
  border-radius:9px;padding:10px 11px}
.sbai-i>.ic{width:13px;height:13px;color:#8FA8D8;flex-shrink:0;margin-top:2px}
.sbai-i b{display:block;font-size:11px;font-weight:700;color:#EAF0FC}
.sbai-i em{display:block;font-style:normal;font-size:9px;color:#8496B5;margin-top:2px;line-height:1.35}
.sbai-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;height:36px;border-radius:9px;
  background:linear-gradient(120deg,#3B82F6,#8B5CF6);font-size:12px;font-weight:700;color:#fff}
.sbai-btn .ic{width:12px;height:12px}

/* ==========================================================================
   КОНТРАСТ В СВЕТЛОЙ ТЕМЕ: body.light h2/h3 из site.css перекрашивает
   заголовки тёмной секции и CTA в rgb(15,23,42). Побеждаем специфичностью.
   ========================================================================== */
body.light #page-home .ph-dark-txt h2 {
  color: #F4F7FD;
}

body.light #page-home .ph-cta h3 {
  color: #FFFFFF;
}

/* ==========================================================================
   ТЁМНАЯ ТЕМА ГЛАВНОЙ И ПУБЛИЧНОЙ ОБОЛОЧКИ (body.dark-theme).
   Светлый вид задан фиксированными цветами выше; здесь — полный тёмный
   вариант. Возврат в светлую тему = снятие класса, каскад восстанавливается.
   ========================================================================== */
body.dark-theme{
  --pub-bg:#0B1220;--pub-card:#111A2E;--pub-border:#233252;
  --pub-text:#EAF0FB;--pub-muted:#93A2C0;
  --pub-shadow-sm:0 1px 3px rgba(0,0,0,0.4);
  --pub-shadow-md:0 8px 24px rgba(0,0,0,0.45);
  --pub-shadow-lg:0 20px 48px rgba(0,0,0,0.55);
  --ph-ink:#EAF0FB;--ph-ink-2:#DDE6F6;--ph-line:#243356;
  background:#0B1220;
}
/* --- шапка --- */
body.dark-theme .pub-header{background:#0D1526;border-bottom-color:#1E2C4A}
body.dark-theme .pub-header-logo-text{color:#F2F6FD}
body.dark-theme .pub-nav-link{color:#AEBBD6}
body.dark-theme .pub-nav-link:hover{color:#8FB0FF}
body.dark-theme .pub-header-right .pub-btn{color:#C7D2E8}
body.dark-theme .pub-header-right .pub-btn:hover{color:#8FB0FF}
body.dark-theme .pub-header .lang-wrap>.pub-icon-btn{color:#C7D2E8}
body.dark-theme .pub-icon-btn{border-color:#2A3A5E;color:#AEBBD6}
/* --- hero --- */
body.dark-theme .ph-hero{background:linear-gradient(180deg,#0B1220 0%,#0C1424 60%,#0D1526 100%)}
body.dark-theme .ph-hero-copy h1{color:#F2F6FD}
body.dark-theme .ph-hero-sub{color:#A6B3CE}
body.dark-theme .ph-trust li{color:#A6B3CE}
body.dark-theme .ph-eyebrow{color:#9D8CFF}
body.dark-theme .ph-textlink{color:#8FA6FF}
body.dark-theme .ph-textlink:hover{color:#B49CFF}
body.dark-theme .ph-shot{border-color:rgba(255,255,255,0.14)}
/* --- секции --- */
body.dark-theme .ph-sec-goals{background:#0C1424}
body.dark-theme .ph-sec-steps{background:#0B1220}
body.dark-theme .ph-sec-features{background:#0C1424}
body.dark-theme .ph-sec-aud{background:#0C1424}
body.dark-theme .ph-sec-plans{background:#0C1424}
body.dark-theme .ph-sec-faq{background:#0B1220}
body.dark-theme .ph-h2,body.dark-theme .ph-h3{color:#F2F6FD}
/* --- карточки --- */
body.dark-theme .ph-goal,
body.dark-theme .ph-feature,
body.dark-theme .ph-aud-card,
body.dark-theme .ph-step-card{background:#111A2E;border-color:#243356}
body.dark-theme .ph-goal:hover,
body.dark-theme .ph-feature:hover,
body.dark-theme .ph-card-btn:hover{border-color:#35507F;box-shadow:0 10px 26px rgba(0,0,0,0.4)}
body.dark-theme .ph-goal h3,body.dark-theme .ph-feature h3,
body.dark-theme .ph-step h3,body.dark-theme .ph-aud-card b,
body.dark-theme .ph-step-card-t,body.dark-theme .ph-step-note{color:#EAF0FB}
body.dark-theme .ph-goal p,body.dark-theme .ph-feature p,
body.dark-theme .ph-step p,body.dark-theme .ph-aud-card span{color:#93A2C0}
body.dark-theme .ph-pick{background:#0E1728;border-color:#243356;color:#C7D2E8}
body.dark-theme .ph-pick:hover{border-color:#35507F;box-shadow:0 4px 12px rgba(0,0,0,0.35)}
body.dark-theme .ph-pick-ic{background:#1A2742}
body.dark-theme .ph-fakefield{background:#0E1728;border-color:#243356;color:#C7D2E8}
body.dark-theme .ph-fakefield::placeholder{color:#5E6E90}
body.dark-theme .ph-tile{background:#0E1728;border-color:#243356}
body.dark-theme .ph-tile:hover{border-color:#35507F;box-shadow:0 6px 16px rgba(0,0,0,0.4)}
body.dark-theme .ph-tile-more{color:#7E8DAB}
body.dark-theme .ph-prog{background:#0E1728;border-color:#243356}
body.dark-theme .ph-prog-v{color:#F2F6FD}
/* --- faq --- */
body.dark-theme .ph-faq-list{background:#111A2E;border-color:#243356}
body.dark-theme .ph-faq-list .faq-item{border-bottom-color:#243356}
body.dark-theme .ph-faq-list .faq-q{color:#C7D2E8}
body.dark-theme .ph-faq-list .faq-a-inner{color:#93A2C0}
/* --- cookie (переменные site.css в тёмной ветке уже тёмные — фиксируем читаемость) --- */
body.dark-theme .cookie-banner{background:#111A2E;border-color:#243356}
/* мега-меню/дровер тянут цвета из --pub-* — уже переопределены выше */

/* ==========================================================================
   ЭТАП 3: promo-карточка меню, Google-кнопка, переключатель темы,
   декоративный фон главной, непрозрачный хедер, широкий футер.
   ========================================================================== */

/* ---- Хедер: полностью непрозрачный в обеих темах ---- */
.pub-header{
  background:#FFFFFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.dark-theme .pub-header{background:#0D1526}

/* ---- Футер: внутренняя сетка шире на 30% ---- */
.pub-footer .pub-container{max-width:1820px}

/* ---- Карточка AI Workflow в мега-меню ---- */
.pub-mega-promo{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:18px 18px 16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(145deg,#F2F5FF 0%,#F6F1FF 55%,#FDF3FB 100%);
  border:1px solid #E3E7F6;position:relative;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.pub-mega-promo::before{
  content:"";position:absolute;inset:auto -30px -46px auto;width:150px;height:150px;
  background:radial-gradient(circle,rgba(139,92,246,0.18),transparent 65%);
  pointer-events:none;
}
.pub-mega-promo:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(76,66,180,0.14);border-color:#CBB9F5}
.pub-mega-promo:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.mp-head{display:flex;align-items:center;gap:8px;width:100%}
.mp-ic{
  width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#22C7E8,#8B5CF6);color:#fff;flex-shrink:0;
}
.mp-ic .ic{width:18px;height:18px}
.mp-badge{
  margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#7C4DF0;
  background:rgba(124,77,240,0.12);border:1px solid rgba(124,77,240,0.28);
  border-radius:6px;padding:3px 7px;
}
.mp-title{font-size:15.5px;font-weight:800;color:#101F3F;line-height:1.2}
.mp-sub{font-size:12.5px;line-height:1.5;color:#64708B}
.mp-chain{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:2px}
.mp-node{
  font-style:normal;font-size:10.5px;font-weight:700;color:#4B5A78;
  background:#FFFFFF;border:1px solid #E0E5F2;border-radius:7px;padding:3px 8px;
}
.mp-n1{color:#0E8DA8;border-color:#BEE9F2;background:#F0FBFD}
.mp-n2{color:#6D3FE0;border-color:#DCCEF8;background:#F7F3FE}
.mp-n3{color:#C22F86;border-color:#F4C9E2;background:#FDF2F8}
.mp-arr{font-style:normal;font-size:11px;color:#A6B0C6}
.mp-cta{
  font-style:normal;display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:13px;font-weight:800;color:#5D5AE8;
}
.mp-cta .ic{width:13px;height:13px;transition:transform .16s ease}
.pub-mega-promo:hover .mp-cta .ic{transform:translateX(3px)}
body.dark-theme .pub-mega-promo{background:linear-gradient(145deg,#131C33 0%,#1A1830 60%,#221530 100%);border-color:#2C3A5E}
body.dark-theme .mp-title{color:#F2F6FD}
body.dark-theme .mp-sub{color:#93A2C0}
body.dark-theme .mp-node{background:#0E1728;border-color:#2C3A5E;color:#C7D2E8}
body.dark-theme .mp-n1{color:#4FD3EE;border-color:#155A6C;background:#0B2530}
body.dark-theme .mp-n2{color:#B79CFF;border-color:#4A3580;background:#1C1533}
body.dark-theme .mp-n3{color:#F17FC0;border-color:#6E2B52;background:#2A1322}

/* ---- Google-кнопка в модале входа ---- */
.btn-google{
  width:100%;height:52px;border-radius:13px;cursor:pointer;font-family:inherit;
  background:#FFFFFF;border:1px solid #DDE3EE;color:#26334D;
  font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:12px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-google:hover{border-color:#B9C4DC;box-shadow:0 4px 14px rgba(16,31,63,0.08);background:#FBFCFF}
.btn-google:active{background:#F4F6FC}
.btn-google:focus-visible{outline:2px solid var(--ph-vio);outline-offset:2px}
.btn-google svg{flex-shrink:0}
body.dark-theme .btn-google{background:#141E33;border-color:#2C3A5E;color:#E6EDFA}
body.dark-theme .btn-google:hover{background:#182440;border-color:#3A4C78}

/* ---- Переключатель темы кабинета ---- */
.theme-switch-row{
  display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;
  padding:11px 14px;border-radius:11px;font-size:14px;font-weight:600;color:var(--text,#E6EDFA);
}
.theme-switch-row:hover{background:rgba(139,92,246,0.08)}
.theme-switch-row:focus-visible{outline:2px solid #8B5CF6;outline-offset:2px}
.tsw-ic{width:20px;text-align:center;flex-shrink:0}
.tsw-lbl{flex:1}
.tsw-track{
  width:40px;height:22px;border-radius:999px;background:var(--border,#3A4258);
  position:relative;flex-shrink:0;transition:background .18s ease;
}
.tsw-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.35);transition:transform .18s ease;
}
.theme-switch-row[aria-checked="true"] .tsw-track{background:linear-gradient(120deg,#3B82F6,#8B5CF6)}
.theme-switch-row[aria-checked="true"] .tsw-knob{transform:translateX(18px)}

/* ---- Декоративный фон главной (лёгкие CSS-слои, без скриптов) ---- */
#page-home .ph-hero>*,#page-home .ph-sec>*,#page-home .ph-dark>*{position:relative;z-index:1}
.ph-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 380px at 8% 12%,rgba(34,199,232,0.10),transparent 62%),
    radial-gradient(620px 430px at 96% 78%,rgba(139,92,246,0.10),transparent 65%);
}
.ph-sec-goals::before{
  content:"";position:absolute;left:0;top:60px;width:260px;height:300px;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(93,116,232,0.20) 1.2px,transparent 1.3px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
}
.ph-sec-steps::before{
  content:"";position:absolute;right:-140px;top:-70px;width:460px;height:460px;z-index:0;pointer-events:none;
  background:conic-gradient(from 210deg,rgba(34,199,232,0.10),rgba(139,92,246,0.10),transparent 62%);
  border-radius:50%;filter:blur(2px);
}
.ph-sec-features::before{
  content:"";position:absolute;left:-160px;bottom:-120px;width:480px;height:480px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(59,130,246,0.10),transparent 62%);
}
.ph-sec-aud::before{
  content:"";position:absolute;right:0;top:30px;width:230px;height:260px;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(139,92,246,0.18) 1.2px,transparent 1.3px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent);
}
.ph-sec-faq::before{
  content:"";position:absolute;left:-120px;top:40%;width:380px;height:380px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(34,199,232,0.09),transparent 62%);
}
body.dark-theme .ph-hero::before{
  background:
    radial-gradient(560px 380px at 8% 12%,rgba(34,199,232,0.07),transparent 62%),
    radial-gradient(620px 430px at 96% 78%,rgba(139,92,246,0.09),transparent 65%);
}
body.dark-theme .ph-sec-goals::before{background-image:radial-gradient(circle,rgba(122,150,255,0.14) 1.2px,transparent 1.3px)}
body.dark-theme .ph-sec-aud::before{background-image:radial-gradient(circle,rgba(160,120,255,0.13) 1.2px,transparent 1.3px)}
@media(max-width:767px){
  .ph-sec-steps::before,.ph-sec-features::before,.ph-sec-faq::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .pub-mega-promo,.pub-mega-promo .mp-cta .ic,.tsw-knob,.tsw-track{transition:none}
}

/* Шапка обязана быть полностью непрозрачной: правило body.light nav из
   site.css (rgba .85) специфичнее одиночного класса — перебиваем адресно. */
body.light .pub-header,
body.light nav.pub-header{
  background:#FFFFFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.dark-theme .pub-header,
body.dark-theme nav.pub-header{
  background:#0D1526;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ==========================================================================
   ЭТАП 4: видимый декор (кривые Безье, ленты, волна-переход),
   тёмные тост/баннеры кабинета.
   ========================================================================== */
.ph-hero{overflow:hidden}
.ph-curve{
  position:absolute;z-index:0;pointer-events:none;width:620px;height:420px;
  opacity:0.55;
}
body.dark-theme .ph-curve{opacity:0.28}
.ph-curve-left{left:-40px;top:24px}
.ph-curve-right{right:-40px;bottom:16px}

/* диагональные полупрозрачные ленты: чередуем стороны */
.ph-sec-features::after{
  content:"";position:absolute;right:-120px;top:8%;width:560px;height:110px;z-index:0;pointer-events:none;
  transform:rotate(-13deg);border-radius:999px;
  background:linear-gradient(90deg,rgba(34,199,232,0.09),rgba(139,92,246,0.10));
}
.ph-sec-faq::after{
  content:"";position:absolute;left:-140px;bottom:14%;width:560px;height:110px;z-index:0;pointer-events:none;
  transform:rotate(11deg);border-radius:999px;
  background:linear-gradient(90deg,rgba(139,92,246,0.09),rgba(34,199,232,0.08));
}
.ph-sec-plans::before{
  content:"";position:absolute;right:-110px;top:-40px;width:480px;height:96px;z-index:0;pointer-events:none;
  transform:rotate(-9deg);border-radius:999px;
  background:linear-gradient(90deg,rgba(59,130,246,0.07),rgba(139,92,246,0.08));
}
body.dark-theme .ph-sec-features::after,
body.dark-theme .ph-sec-faq::after,
body.dark-theme .ph-sec-plans::before{opacity:0.5}
@media(max-width:1100px){.ph-curve{display:none}}
@media(max-width:767px){.ph-sec-features::after,.ph-sec-faq::after,.ph-sec-plans::before{display:none}}

/* ---- Уведомления и баннеры: читаемый текст в обеих темах ----
   Кабинет переключает тему через <html data-theme>, а .toast наследовал
   color:#fff при белом фоне body.light — текст «Добро пожаловать» пропадал. */
html[data-theme="light"] .toast,
body.light .toast{background:#FFFFFF;border-color:#E2E8F0;color:#0F172A}
html[data-theme="dark"] .toast,
body.dark-theme .toast{background:#131C33;border-color:#2A3A5E;color:#EAF0FB}
html[data-theme="light"] .wf-demo-banner{
  background:rgba(217,119,6,0.08);border:1px solid rgba(217,119,6,0.30);color:#92400E;
}
html[data-theme="light"] .wf-demo-banner b{color:#7C2D12}
html[data-theme="dark"] .wf-demo-banner,
body.dark-theme .wf-demo-banner{
  background:rgba(245,197,66,0.10);border:1px solid rgba(245,197,66,0.32);color:#F2D98C;
}
html[data-theme="dark"] .wf-demo-banner b,
body.dark-theme .wf-demo-banner b{color:#F7E3A4}

/* ==========================================================================
   ЭТАП 7: декоративные кривые вне потока, ровные промежутки между секциями,
   широкий компактный футер.
   ========================================================================== */

/* Правило `#page-home .ph-sec>*{position:relative}` перебивало position:absolute
   у декоративных SVG (ID сильнее класса) — кривые вставали В ПОТОК и давали
   пустые полосы по 420px. Возвращаем их в абсолютный слой адресно. */
#page-home .ph-sec>.ph-curve,
#page-home .ph-hero>.ph-curve,
.ph-curve{position:absolute!important;z-index:0}

/* Ровные промежутки между смысловыми блоками: ~72px на desktop */
#page-home .ph-sec{padding-top:36px;padding-bottom:36px}
#page-home .ph-sec-goals{padding-top:40px;padding-bottom:36px}
#page-home .ph-sec-plans{padding-top:36px;padding-bottom:44px}
@media(max-width:767px){
  #page-home .ph-sec{padding-top:24px;padding-bottom:24px}
  #page-home .ph-sec-goals{padding-top:26px;padding-bottom:24px}
  #page-home .ph-sec-plans{padding-top:26px;padding-bottom:28px}
}

/* ---- Футер: широкое содержимое, компактная высота ---- */
.pub-footer{padding:36px 0 0}
.pub-footer .pub-container{max-width:1600px;padding-left:40px;padding-right:40px}
/* Сохраняем принятую 5-колоночную раскладку (.pub-footer-cols{display:contents}),
   только растягиваем её по широкому контейнеру и ужимаем по высоте. */
.pub-footer-main{grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:40px;padding-bottom:14px}
.pub-footer-brand p{margin:10px 0 10px}
.pub-footer-col a{padding:4px 0}
@media(max-width:1100px){
  .pub-footer .pub-container{padding-left:20px;padding-right:20px}
  .pub-footer-main{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:560px){
  .pub-footer-main{grid-template-columns:1fr;gap:18px}
}

/* ==========================================================================
   Мобильная таблица «Сравнение тарифов».
   Колонки Pro и Business уходили за край без признака прокрутки. Добавлены
   индикатор прокрутки, закреплённая первая колонка и подпись.
   Правка v2: раньше при прокрутке до упора закреплённая колонка наезжала
   на Pro и значения читались как «…оритетная». Причина — суммарная ширина
   колонок тарифов была меньше свободного места справа от sticky-колонки,
   поэтому крайняя правая позиция прокрутки не «доводила» Pro до края.
   Теперь ширины заданы явно: sticky-колонка фиксирована, каждая колонка
   тарифа не уже 118px, а min-width таблицы считается из этих величин.
   ========================================================================== */
.pp-compare-wrap{
  position:relative;
  background:
    linear-gradient(to right,var(--card) 30%,rgba(0,0,0,0)) left center/48px 100% no-repeat local,
    linear-gradient(to left,var(--card) 30%,rgba(0,0,0,0)) right center/48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.32),rgba(0,0,0,0)) left center/16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.32),rgba(0,0,0,0)) right center/16px 100% no-repeat scroll;
  -webkit-overflow-scrolling:touch;
}
.pp-compare-hint{display:none}
@media(max-width:900px){
  /* Ширины подобраны так, чтобы в КРАЙНЕМ правом положении прокрутки две
     последние колонки целиком помещались в свободное место справа от
     закреплённой колонки: 2 × ширина колонки ≤ ширина контейнера − sticky.
     Иначе Pro всегда частично уезжал под закреплённую колонку. */
  .pp-compare{table-layout:fixed;min-width:588px;width:588px}
  .pp-compare th:first-child,.pp-compare td:first-child{
    width:140px;min-width:140px;max-width:140px;
    padding-left:12px;padding-right:12px;
  }
  .pp-compare th:not(:first-child),.pp-compare td:not(:first-child){
    width:112px;min-width:112px;
    padding-left:8px;padding-right:8px;
    white-space:normal;word-break:normal;overflow-wrap:break-word;
  }
  .pp-compare th:first-child{position:sticky;left:0;z-index:3;background:var(--bg2)}
  .pp-compare td:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
  /* Разделитель рисуем тенью, а не ::after: псевдоэлемент внутри sticky-ячейки
     не перекрывает соседнюю колонку и не съедает её ширину. */
  .pp-compare th:first-child,.pp-compare td:first-child{
    box-shadow:1px 0 0 0 var(--border);
  }
  .pp-compare-hint{
    display:block;font-size:12px;color:var(--muted);
    margin:0 0 8px;padding:0 2px;
  }
}

/* ==========================================================================
   Каталог инструментов.
   1) Две колонки вместо одной: 21 карточка в столбец растягивала мобильную
      страницу до 11 000 px.
   2) Диапазон правила расширен до 900px. В site.css одна колонка навязана
      дважды — @media(max-width:700px) и @media(max-width:768px), оба с
      !important, поэтому ровно на 768px сетка скачком возвращалась в одну
      колонку шириной 728px. Теперь на 767/768/769 px раскладка одинаковая.
   3) Карточка — вертикальный flex, ссылка прижата к низу: «Запустить в
      Workflow» переносится на две строки в одних карточках и не переносится
      в других, из-за чего стрелки стояли на разной высоте.
   Все правила адресные: только #page-tools, вёрстка других страниц не
   затрагивается.
   ========================================================================== */
@media(max-width:900px){
  #page-tools .feature-list{grid-template-columns:1fr 1fr!important;gap:12px}
  #page-tools .feature-item{
    display:flex;flex-direction:column;
    padding:16px 13px;
  }
  #page-tools .feature-item h3{font-size:14px;line-height:1.3}
  #page-tools .feature-item p{font-size:12px;line-height:1.4}
  #page-tools .feature-item .ic{width:20px;height:20px}
  /* Ссылка всегда внизу карточки — стрелки соседних карточек на одной линии */
  #page-tools .feature-item-link{margin-top:auto;padding-top:12px}
}
@media(max-width:400px){
  #page-tools .feature-list{gap:10px}
  #page-tools .feature-item{padding:14px 11px}
}

/* На 320px свободного места меньше: сжимаем закреплённую колонку и колонки
   тарифов, сохраняя то же условие (2 × 92 = 184 ≤ 296 − 104). */
@media(max-width:420px){
  .pp-compare{min-width:472px;width:472px}
  .pp-compare th:first-child,.pp-compare td:first-child{
    width:104px;min-width:104px;max-width:104px;
    padding-left:9px;padding-right:9px;font-size:12px;
  }
  .pp-compare th:not(:first-child),.pp-compare td:not(:first-child){
    width:92px;min-width:92px;padding-left:6px;padding-right:6px;font-size:12px;
  }
}

/* ==========================================================================
   Глоссарий (адресно, только #page-glossary).
   1) Блок «Зачем глоссарий»: у двух flex-элементов стоял inline min-width:280px,
      из-за чего на 320px колонки не сжимались до ширины родителя (222px) и
      восемь элементов уходили за экран — текст срезался (скрытое переполнение
      маскировалось overflow-x:clip у body).
   2) Счётчик результатов, кнопка сброса и пустое состояние поиска.
   ========================================================================== */
#page-glossary .gl-about-text,
#page-glossary .gl-about-stats{min-width:0}
#page-glossary .gl-about-row{min-width:0}
#page-glossary .gl-about-text h2,
#page-glossary .gl-about-text p{overflow-wrap:break-word}

@media(max-width:520px){
  /* На узких экранах уменьшаем внутренний отступ карточки, чтобы
     контентной ширины хватало счётчикам и длинным словам. */
  #page-glossary .gl-about-card{padding:22px 16px!important;border-radius:18px!important}
  #page-glossary .gl-about-row{gap:18px!important}
  #page-glossary .gl-about-stats{grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%}
  #page-glossary .gl-about-stats>div{padding:14px 10px!important}
  #page-glossary .gl-about-text h2{font-size:22px!important}
}

/* ---- счётчик результатов и сброс ---- */
#page-glossary .gl-count-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
#page-glossary .gl-count{font-size:13px;font-weight:700;color:var(--muted)}
#page-glossary .gl-reset{
  font-size:13px;font-weight:700;color:var(--pub-violet,#8758F5);
  background:transparent;border:1px solid var(--border);border-radius:10px;
  padding:8px 14px;cursor:pointer;transition:.2s;
}
#page-glossary .gl-reset:hover{background:rgba(139,92,246,.10);border-color:rgba(139,92,246,.45)}
#page-glossary .gl-reset[hidden]{display:none}

/* ---- пустое состояние поиска ---- */
#page-glossary .gl-empty{
  max-width:900px;margin:0 auto;padding:40px 24px;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:18px;
}
#page-glossary .gl-empty[hidden]{display:none}
#page-glossary .gl-empty-ic{font-size:34px;line-height:1;margin-bottom:12px}
#page-glossary .gl-empty-title{display:block;font-size:18px;font-weight:900;color:var(--text);margin-bottom:6px}
#page-glossary .gl-empty-sub{font-size:14px;color:var(--muted);margin:0 0 18px}
#page-glossary .gl-empty-btn{
  font-size:14px;font-weight:800;color:#fff;background:var(--pub-grad,linear-gradient(135deg,#14B8C4,#4F7DF3 50%,#8758F5));
  border:none;border-radius:12px;padding:12px 22px;cursor:pointer;
}
#page-glossary .gl-empty-btn:hover{filter:brightness(1.06)}

/* ==========================================================================
   ЕДИНЫЕ КОМПОНЕНТЫ И КОНТРАСТ (WCAG AA) — один слой, без дублей.

   Корневая причина всех дефектов: в site.css цвета компонентов заданы
   константами под тёмную тему (#fff, #cbd5e1, #94a3b8). После появления
   светлой темы те же правила дают 1:1. Ниже — исправление самих компонентов
   через переменные тем; правила без префикса страницы, поэтому действуют
   везде, где компонент используется (публичные страницы, кабинет, админка).

   Токены контраста:
     --tx-strong  основной текст      (≥7:1 к фону карточки)
     --tx-muted   вторичный текст     (≥4.5:1)
     --tx-onDark  текст на тёмном фоне футера/градиентов (≥4.5:1)
     --bd-strong  границы и элементы UI (≥3:1)
   ========================================================================== */
:root{
  --bd-strong:#9FB0C9;
  /* Основной градиент действий: средняя точка #3478F6 давала белому 4.07:1 */
}
body.dark-theme{
  --bd-strong:#5A6B87;
}

/* ---------- 1. ЕДИНЫЙ FAQ (главная, внутренние страницы, «О компании») ---------- */
.sb-faq-item{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;margin-bottom:10px;transition:border-color .25s;
}
.sb-faq-item:hover{border-color:rgba(139,92,246,.45)}
.sb-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:16px 22px;margin:0;border:0;background:transparent;text-align:left;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.45;color:var(--tx-strong);
}
.sb-faq-q:focus-visible{outline:2px solid var(--link-acc);outline-offset:-2px;border-radius:12px}
.sb-faq-chev{flex:none;color:var(--tx-muted);transition:transform .25s}
.sb-faq-item.open .sb-faq-chev{transform:rotate(180deg)}
/* Анимация через grid-template-rows: 0fr → 1fr.
   Прежний max-height:600px требовал измерения scrollHeight и давал рывок в
   начале и в конце (браузер анимировал до фиксированной величины, а не до
   реальной высоты). Grid анимирует фактическую высоту содержимого без
   принудительного reflow. */
.sb-faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s ease,padding .2s ease;
  padding:0 22px;
}
.sb-faq-a>*{min-height:0;overflow:hidden}
.sb-faq-item.open .sb-faq-a{grid-template-rows:1fr;padding:0 22px 18px}
@media(prefers-reduced-motion:reduce){
  .sb-faq-a{transition:none}
  .sb-faq-chev{transition:none}
}
.sb-faq-a-inner{font-size:14px;line-height:1.65;color:var(--tx-muted)}
@media(max-width:520px){
  .sb-faq-q{padding:14px 16px;font-size:14px}
  .sb-faq-a,.sb-faq-item.open .sb-faq-a{padding-left:16px;padding-right:16px;padding-bottom:14px}
}

/* ---------- 2. SEO-блок внизу страниц ---------- */
.wf-seo-content h2{color:var(--tx-strong)}
.wf-seo-content h3{color:var(--link-acc)}
.wf-seo-content p,.wf-seo-content li,.wf-seo-list li{color:var(--tx-muted)}
.wf-seo-content b,.wf-seo-list li b{color:var(--tx-strong)}
.wf-seo-cta{color:var(--tx-strong)!important}

/* ---------- 3. Карточки и текстовые блоки «О компании» и аналоги ---------- */
.mf-body h4,.sec-card h4,.pn-card h4,.about-card h4,.ws-panel h3{color:var(--tx-strong)}
.mf-body p,.sec-card p,.pn-card p,.about-card p,.ws-panel-sub{color:var(--tx-muted)}
.sup-num{color:var(--tx-strong)}
.sup-lbl{color:var(--tx-muted)}
.rm-list li{color:var(--tx-muted)}
.rm-list li b,.rm-list li strong{color:var(--tx-strong)}
.ws-empty{color:var(--tx-muted)}

/* ---------- 4. Кнопка «наверх» ---------- */
.back-top{color:var(--tx-strong);border-color:var(--bd-strong)}
body:not(.dark-theme) .back-top{background:#FFFFFF;box-shadow:0 4px 14px rgba(16,26,48,.14)}
.back-top:hover{color:#fff}
.back-top:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}

/* ---------- 5. Чипы фильтров ---------- */
.ws-chip{color:var(--tx-muted);border-color:var(--bd-strong)}
/* Специфичность: body:not(.dark-theme) .ws-chip (0,2,1) перебивала
   .ws-chip.active (0,2,0) — активный чип терял градиент и становился
   белым текстом на белом фоне. Исключаем активный из правила фона. */
body:not(.dark-theme) .ws-chip:not(.active){background:#FFFFFF}
.ws-chip:hover{border-color:rgba(139,92,246,.55)}
.ws-chip:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}
.ws-chip.active,div.ws-chip.active,button.ws-chip.active,
body:not(.dark-theme) .ws-chip.active{
  background:var(--action-gradient)!important;
  color:#fff!important;border-color:transparent;
}

/* ---------- 6. CTA-градиент: проверен по всей площади, не по середине.
   Светлый край #14B8C4 давал белому 2.6:1, затемнённый #0E8E98 — 3.93:1.
   Берём диапазон, где самый светлый край даёт ≥4.5:1 для обычного текста. ---------- */
.ph-cta,#page-home .ph-cta,.ph-faq-in .ph-cta{
  background:var(--action-gradient)!important;color:#fff;
}
.ph-cta h3,.ph-cta p,.ph-cta a{color:#fff}
.ph-btn-white{background:#fff;color:#3E2A9E}
.ph-btn-white:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 7. Футер: фон #0A1930 в ОБЕИХ темах, поэтому текст всегда светлый ---------- */
.pub-footer-note,
body:not(.dark-theme) .pub-footer-note,
body.dark-theme .pub-footer-note{color:var(--tx-onDark)}
.pub-footer-col a,.pub-footer-legal a,.pub-footer-contacts a,.pub-footer-brand p{color:var(--tx-onDark)}
.pub-footer-col a:hover,.pub-footer-legal a:hover,.pub-footer-contacts a:hover{color:#fff}
.pub-footer-col a:visited,.pub-footer-legal a:visited{color:var(--tx-onDark)}
.pub-footer-col a:focus-visible,.pub-footer-legal a:focus-visible,
.pub-footer-contacts a:focus-visible,.pub-soc:focus-visible{
  outline:2px solid #9FC6FF;outline-offset:2px;border-radius:6px;
}
.pub-footer-col a:active,.pub-footer-legal a:active{color:#EAF1FF}

/* ---------- 8. Cookie-баннер ---------- */
.cookie-text a{color:var(--link-acc)}
.cookie-text a:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- 9. Модальное окно поддержки ---------- */
.sug-modal{background:var(--card);border:1px solid var(--bd-strong);color:var(--tx-strong)}
.sug-modal h3,.sug-modal h4{color:var(--tx-strong)}
.sug-note,.sug-modal p,.sug-modal label{color:var(--tx-muted)}
.sug-modal input,.sug-modal textarea{
  background:var(--bg2);border:1px solid var(--bd-strong);color:var(--tx-strong);
}
.sug-modal input::placeholder,.sug-modal textarea::placeholder{color:var(--tx-muted);opacity:1}
.sug-modal input:focus-visible,.sug-modal textarea:focus-visible,
.sug-x:focus-visible,.sug-send:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}
/* inline-цвет #5FE3DC давал 1.55:1 на светлом фоне модалки */
.sug-modal a,#sugOverlay a,.sug-modal a[style]{color:var(--link-acc)!important}
.sug-modal a:hover,#sugOverlay a:hover{text-decoration:underline}
.sug-x{color:var(--tx-strong);border:1px solid var(--bd-strong)}
body:not(.dark-theme) .sug-x{background:#F4F6FB}

/* ---------- 10. Disabled-состояния — по типам компонентов, не одним правилом.
   Внутренний стандарт SEObox: неактивный элемент остаётся различимым —
   текст ≥4.5:1, граница ≥3:1, форма компонента сохраняется. ---------- */
/* primary */
.btn-lg[disabled],.ws-btn[disabled],.sug-send[disabled],#modalSubmit[disabled]{
  background:var(--bg2)!important;background-image:none!important;
  color:var(--tx-muted)!important;border:1px solid var(--bd-strong)!important;
  box-shadow:none!important;opacity:1;cursor:not-allowed;
}
/* secondary / outline */
.btn-ghost[disabled],.btn-outline[disabled],.pub-btn-ghost[disabled]{
  background:transparent;color:var(--tx-muted);border:1px dashed var(--bd-strong);
  opacity:1;cursor:not-allowed;
}
/* icon button */
.icon-btn[disabled],.ws-icon-btn[disabled],button.ic-btn[disabled]{
  color:var(--tx-muted);border:1px solid var(--bd-strong);background:var(--bg2);
  opacity:1;cursor:not-allowed;
}
/* filter chip */
.ws-chip[disabled],.ws-chip.disabled,.ws-chip[aria-disabled="true"]{
  color:var(--tx-muted);background:var(--bg2);border:1px dashed var(--bd-strong);
  opacity:1;cursor:not-allowed;
}
/* поля форм */
input[disabled],textarea[disabled],select[disabled]{
  color:var(--tx-muted);background:var(--bg2);border:1px solid var(--bd-strong);
  opacity:1;cursor:not-allowed;
}
/* loading */
.is-loading,button.loading{cursor:progress;opacity:1}

/* ==========================================================================
   СИСТЕМНАЯ КОРРЕКЦИЯ ПАЛИТРЫ
   Полный обход видимого текста (3840 элементов) показал: нарушения дают не
   отдельные страницы, а несколько констант палитры, используемых как цвет
   текста. Правим сами токены — тогда исправление расходится на все
   компоненты сразу, без списка селекторов по страницам.
   ========================================================================== */

/* --- 1. Фирменные градиенты. Светлый край #16BED4 давал белому 2.02:1.
   Сдвигаем края в тёмную часть тех же оттенков: белый текст на любой точке
   градиента получает ≥4.5:1, узнаваемый переход бирюза→синий→фиолет цел. --- */


/* --- 2. Приглушённый текст. #667085 (4.09:1) и #7C8BA6 в светлой теме,
   #94A3B8 на светлых подложках — все ниже порога. --- */



/* --- 3. Акцентный фиолет как ЦВЕТ ТЕКСТА. #A78BFA на светлой лаванде даёт
   1.97:1, #8B5CF6 — 3.5:1. Для заливок и границ оттенок не трогаем, меняем
   только там, где он работает текстом. --- */

.section-badge,.about-eyebrow,.wf-ex-card-tag,.tpl-label,
.ph-textlink,.feature-item-link,.ws-chip.active span,
.pfi-q,.afi-q{color:var(--link-acc)}
body:not(.dark-theme) .section-badge,
body:not(.dark-theme) .about-eyebrow,
body:not(.dark-theme) .wf-ex-card-tag,
body:not(.dark-theme) .tpl-label,
body:not(.dark-theme) .ph-textlink,
body:not(.dark-theme) .feature-item-link{color:#5B2FC4}
body.dark-theme .section-badge,
body.dark-theme .about-eyebrow,
body.dark-theme .wf-ex-card-tag,
body.dark-theme .tpl-label,
body.dark-theme .ph-textlink,
body.dark-theme .feature-item-link{color:#C9B6FF}

/* --- 4. Статусные цвета как текст: зелёный #22C55E (2.08:1), бирюзовый
   #5FE3DC (1.42:1), синий #0077FF (4.13:1) --- */


.ph-prog-d,.ph-tile-vk,.ph-tile-more{color:var(--tx-muted)}
body:not(.dark-theme) b[style*="5FE3DC"],
body:not(.dark-theme) b[style*="22C55E"],
body:not(.dark-theme) b[style*="22c55e"]{color:#0F5D3E!important}

/* --- 5. Подписи и мелкий текст, наследующие светлые оттенки --- */
.wf-stat-lbl,.ph-prog-l,.pp-feat-no,.sbai-note,small{color:var(--tx-muted)}
.wf-stat-val{color:var(--tx-strong)}

/* --- 6. Белый текст на светлых карточках (остатки констант site.css).
   Заголовки и подписи наследуют цвет темы. --- */
.pp-card h4,.pp-card h3,.sec-card h4,.mf-body h4,.pn-card h4,
.about-card h4,.vs-card h4,.wf-card h4{color:var(--tx-strong)}
.pp-card p,.sec-card p,.mf-body p,.pn-card p,.about-card p{color:var(--tx-muted)}
body:not(.dark-theme) .pp-feat,body:not(.dark-theme) .pp-feat-yes{color:var(--tx-muted)}

/* --- 7. Кнопки с жёсткими светлыми градиентами (значения вне переменных) --- */
.ph-btn-primary,.pp-cta,.vs-go,.wf-go,.sbai-btn,.cookie-accept,.modal-submit,.sbcal-add{
  background-image:var(--action-gradient)!important;
  background-color:#4F46E5!important;color:var(--text-on-action)!important;
}
.sbcal-chip.sbcal-cy,.sbcal-chip.sbcal-b{background-color:#0A6E77!important;color:#fff!important}

/* ==========================================================================
   ГРАНИЦЫ И ИНТЕРАКТИВНЫЕ КОМПОНЕНТЫ (порог 3:1)
   --border: #E3E8F2 давал 1.17:1 к белой карточке. Для декоративных
   разделителей это приемлемо, для границ полей, кнопок и карточек FAQ — нет.
   Вводим отдельный токен и применяем его к элементам интерфейса.
   ========================================================================== */



input,textarea,select,
.ws-input,.modal-input,.sug-modal input,.sug-modal textarea,
#glossSearch,#supportModal .modal-input{
  border:1px solid var(--bd-ui)!important;
  color:var(--tx-strong);
}
input::placeholder,textarea::placeholder,
.modal-input::placeholder,#glossSearch::placeholder{color:var(--tx-muted)!important;opacity:1}
input:focus-visible,textarea:focus-visible,select:focus-visible,
.ws-input:focus-visible,.modal-input:focus-visible,#glossSearch:focus-visible{
  outline:2px solid var(--link-acc);outline-offset:1px;border-color:var(--bd-ui-strong)!important;
}
input[disabled],textarea[disabled],select[disabled]{
  border:1px dashed var(--bd-ui)!important;color:var(--tx-muted);background:var(--bg2);opacity:1;
}
.sb-faq-item{border:1px solid var(--bd-ui)}
.sb-faq-item:hover{border-color:var(--bd-ui-strong)}
.back-top{border:1px solid var(--bd-ui)!important}
.ws-chip{border:1px solid var(--bd-ui)!important}
.ws-chip[disabled],.ws-chip.disabled,.ws-chip[aria-disabled="true"]{border:1px dashed var(--bd-ui-strong)!important}
.sug-modal,#supportModal .modal,.modal{border:1px solid var(--bd-ui)!important}

/* ==========================================================================
   РЕАЛЬНОЕ ОКНО ПОДДЕРЖКИ (#supportModal .modal), а не только .sug-modal
   ========================================================================== */
#supportModal .modal{background:var(--card);color:var(--tx-strong)}
#supportModal .modal-title{color:var(--tx-strong)}
#supportModal .modal-sub,#supportModal label,#supportModal .modal-note{color:var(--tx-muted)}
#supportModal .modal-input{background:var(--bg2);color:var(--tx-strong)}
#supportModal .modal-input::placeholder{color:var(--tx-muted);opacity:1}
#supportModal a,#supportModal .modal a{color:var(--link-acc)!important}
#supportModal a:hover{text-decoration:underline}
#supportModal .modal-close{color:var(--tx-strong);border:1px solid var(--bd-ui)}
#supportModal .modal-close:focus-visible,#supportModal a:focus-visible{
  outline:2px solid var(--link-acc);outline-offset:2px;
}
#supportModal .modal-submit[disabled]{
  background-image:none!important;background:var(--bg2)!important;
  color:var(--tx-muted)!important;border:1px solid var(--bd-ui)!important;cursor:not-allowed;
}

/* ==========================================================================
   ДЛИННЫЕ ЗАГОЛОВКИ И BREADCRUMBS: /privacy на 320px обрезался
   (span.grad уходил к x=355 при viewport 320). Правило компонентное —
   действует на всех страницах с таким же заголовком.
   ========================================================================== */
.page-hero h1,.page-hero .grad,.page-hero span.grad,
.page-hero h2,.hero-title,.pub-crumbs{
  overflow-wrap:anywhere;word-break:normal;hyphens:auto;max-width:100%;
}
.pub-crumbs,.breadcrumbs,.page-crumbs{display:flex;flex-wrap:wrap;gap:6px 8px;max-width:100%}
.pub-crumbs a,.pub-crumbs span,.breadcrumbs a,.breadcrumbs span{
  min-width:0;overflow-wrap:anywhere;color:var(--tx-muted);
}
.pub-crumbs a,.breadcrumbs a{color:var(--link-acc)}
@media(max-width:520px){
  .page-hero h1{font-size:26px;line-height:1.22}
  .page-hero{padding-left:16px;padding-right:16px}
}

/* --- Токены объявлены в site.css не только в :root, но и в более
   специфичном селекторе темы, поэтому перекрываем с тем же весом. --- */


/* Мелкие подписи и вторичный текст компонентов */
.vs-note,.vs-hint,.ws-hint,.ph-note,.crumb-cur,
.page-hero p,.hero-sub,.ws-panel-sub{color:var(--tx-muted)}

/* --- Финальная доводка до порогов AA --- */
/* #6B7A94 давал 4.24–4.34:1 — приглушённый текст делаем на тон темнее */

/* акцент на светлой лаванде: #6D3BEA → 4.40:1, нужен темнее */

/* границы UI: 2.81–2.87:1 при пороге 3:1 */


/* остаточные светлые оттенки в подписях и иконках */
/* .ph-hero i убран: иконка лежит на ТЁМНОЙ подложке, приглушённый цвет там
   давал 2.02:1. Красим только элементы на светлом фоне. */
.ph-fakefield,.ph-fake-ph,.ph-mini,.ph-cap,.ph-sub2{color:var(--tx-muted)}
/* подписи целей и шкала прогресса на главной */
/* Правило в home.css специфичнее — перекрываем с тем же весом и явно. */
.ph-goal p,.ph-goal-desc,.ph-goal .ph-goal-d,
#page-home .ph-goal p,#page-home .ph-goals p{color:var(--tx-muted)!important}
.ph-prog-v i,.ph-prog-v small{color:var(--tx-muted)}
/* заголовки гарантий в тарифах */
.pp-guarantee h4,.pp-guarantee p{color:var(--tx-strong)}
.pp-guarantee p{color:var(--tx-muted)}
/* границы полей: 2.99:1 при пороге 3:1 */

/* белый текст на белых карточках: последние заголовки без классов */
body:not(.dark-theme) .page .card h4,
body:not(.dark-theme) .page [class*="card"] h4,
body:not(.dark-theme) .page [class*="card"] > div > h4{color:var(--tx-strong)}

/* Главная использует собственный набор токенов (--ph-*). Приводим их к тем же
   порогам, что и общие: --ph-mut давал 4.24–4.34:1. */



/* ==========================================================================
   Страницы «Для кого» (/for-whom) и «Как работает» (/how-it-works)
   ========================================================================== */
.fw-sec,.hiw-sec{padding:44px 0}
.fw-hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.fw-btn-2{
  display:inline-flex;align-items:center;gap:8px;padding:16px 28px;border-radius:14px;
  background:var(--card);color:var(--tx-strong);border:1px solid var(--bd-ui);
  font-size:15px;font-weight:800;cursor:pointer;transition:.2s;
}
.fw-btn-2:hover{border-color:var(--bd-ui-strong)}
.fw-btn-2:focus-visible,.fw-card-cta:focus-visible,.fw-role:focus-visible,
.fw-role-tool:focus-visible,.hiw-run:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}

.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fw-card{
  display:flex;flex-direction:column;gap:12px;padding:22px;
  background:var(--card);border:1px solid var(--bd-ui);border-radius:18px;
}
.fw-card-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:rgba(109,59,234,.10);color:var(--link-acc)}
.fw-card-t{font-size:16px;font-weight:900;color:var(--tx-strong);margin:0}
.fw-dl{margin:0;display:grid;gap:8px}
.fw-dl dt{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-muted)}
.fw-dl dd{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx-muted)}
.fw-tag{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--bd-ui);font-size:12px;font-weight:700;color:var(--tx-strong)}
.fw-card-cta{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;
  background:var(--bg2);border:1px solid var(--bd-ui);color:var(--tx-strong);
  font-size:13.5px;font-weight:800;cursor:pointer;transition:.2s;
}
.fw-card-cta:hover{border-color:var(--bd-ui-strong)}

.fw-roles{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px}
.fw-role{padding:11px 18px;border-radius:12px;background:var(--card);border:1px solid var(--bd-ui);
  color:var(--tx-muted);font-size:14px;font-weight:800;cursor:pointer;transition:.2s}
.fw-role.active{background:linear-gradient(135deg,#6D3BEA,#2456C8);color:#fff;border-color:transparent}
.fw-role-panel{max-width:860px;margin:0 auto;padding:22px;background:var(--card);
  border:1px solid var(--bd-ui);border-radius:18px}
.fw-role-lead{margin:0 0 14px;font-size:14px;color:var(--tx-muted)}
.fw-role-tools{display:flex;flex-wrap:wrap;gap:10px}
.fw-role-tool{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--bd-ui);color:var(--tx-strong);
  font-size:13.5px;font-weight:800;cursor:pointer;transition:.2s}
.fw-role-tool:hover{border-color:var(--bd-ui-strong)}

.fw-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fw-case{padding:20px;background:var(--card);border:1px solid var(--bd-ui);border-radius:16px}
.fw-case-ic{font-size:24px;line-height:1;margin-bottom:10px}
.fw-case-t{margin:0 0 6px;font-size:15px;font-weight:900;color:var(--tx-strong)}
.fw-case-d{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx-muted)}

.fw-compare-wrap{overflow-x:auto;max-width:900px;margin:0 auto}
.fw-compare{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--bd-ui);border-radius:16px;overflow:hidden}
.fw-compare th,.fw-compare td{padding:14px 16px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--border)}
.fw-compare th{background:var(--bg2);color:var(--tx-strong);font-weight:800}
.fw-compare td{color:var(--tx-muted)}
.fw-compare td:first-child{color:var(--tx-strong);font-weight:700}

.fw-trust{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto}
.fw-trust-card{padding:20px;background:var(--card);border:1px solid var(--bd-ui);border-radius:16px}
.fw-trust-card h3{margin:0 0 8px;font-size:15px;font-weight:900;color:var(--tx-strong)}
.fw-trust-card p{margin:0;font-size:13.5px;line-height:1.6;color:var(--tx-muted)}

.fw-final-card{max-width:760px;margin:0 auto;padding:34px 26px;text-align:center;
  background:var(--card);border:1px solid var(--bd-ui);border-radius:22px}
.fw-final-card h2{margin:0 0 10px;font-size:24px;font-weight:900;color:var(--tx-strong)}
.fw-final-card p{margin:0 0 18px;font-size:15px;color:var(--tx-muted)}

.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hiw-step{padding:20px;background:var(--card);border:1px solid var(--bd-ui);border-radius:16px}
.hiw-step-num{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(135deg,#6D3BEA,#2456C8);color:#fff;font-weight:900;font-size:14px;margin-bottom:10px}
.hiw-step-t{margin:0 0 6px;font-size:15px;font-weight:900;color:var(--tx-strong)}
.hiw-step-d{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx-muted)}

.hiw-demo{max-width:760px;margin:0 auto;padding:24px;background:var(--card);
  border:1px solid var(--bd-ui);border-radius:18px}
.hiw-demo-lbl{display:block;font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--tx-muted);margin-bottom:8px}
.hiw-demo-input{width:100%;padding:13px 15px;border-radius:12px;background:var(--bg2);
  color:var(--tx-strong);font-size:14px;margin-bottom:8px}
.hiw-hint{margin:0 0 14px;font-size:12.5px;color:var(--tx-muted)}
.hiw-demo-tools{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.hiw-chk{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:11px;
  background:var(--bg2);border:1px solid var(--bd-ui);font-size:13.5px;font-weight:700;
  color:var(--tx-strong);cursor:pointer}
.hiw-chk input{width:16px;height:16px;accent-color:#6D3BEA;cursor:pointer}
.hiw-run{width:100%;justify-content:center}
.hiw-run.is-loading{cursor:progress}
.hiw-out{margin-top:16px}
.hiw-empty,.hiw-loading{margin:0;font-size:13.5px;color:var(--tx-muted)}
.hiw-result{display:grid;gap:12px}
.hiw-result-t{margin:0;font-size:15px;font-weight:900;color:var(--tx-strong)}
.hiw-result-i{padding:14px;background:var(--bg2);border:1px solid var(--bd-ui);border-radius:12px}
.hiw-result-i b{display:block;font-size:13.5px;color:var(--tx-strong);margin-bottom:4px}
.hiw-result-i p{margin:0;font-size:13px;line-height:1.55;color:var(--tx-muted)}

.hiw-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.hiw-chain-i{padding:9px 15px;border-radius:11px;background:var(--card);
  border:1px solid var(--bd-ui);font-size:13.5px;font-weight:800;color:var(--tx-strong);white-space:nowrap}
.hiw-chain-a{color:var(--tx-muted);font-weight:900}
.hiw-chain-d{max-width:720px;margin:0 auto 18px;text-align:center;font-size:14px;
  line-height:1.65;color:var(--tx-muted)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1100px){
  .fw-grid,.fw-cases,.hiw-steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .fw-sec,.hiw-sec{padding:30px 0}
  .fw-grid,.fw-cases,.hiw-steps,.fw-trust{grid-template-columns:1fr}
  .fw-hero-cta{flex-direction:column}
  .fw-hero-cta .btn-lg,.fw-hero-cta .fw-btn-2{width:100%;justify-content:center}
  .fw-final-card{padding:26px 18px}
  .fw-final-card h2{font-size:20px}
}

/* ==========================================================================
   V4: РАЗДЕЛЕНИЕ ТОКЕНОВ ГРАДИЕНТОВ И ГРАНИЦ

   Один градиент нельзя использовать и как фон кнопки, и как заливку текста:
   для фона нужен тёмный (белый текст поверх), для заливки текста на светлой
   странице — тоже тёмный, а в тёмной теме — наоборот светлый. Поэтому вводим
   раздельные токены.
   ========================================================================== */
:root{
  /* фон действий — под белым текстом */
  /* заливка заголовков: светлая тема — тёмный градиент на светлом фоне */
  /* границы: декоративные разделители отдельно от функциональных */
}
body.dark-theme{
  /* тёмная тема — светлый градиент на тёмном фоне */
}

/* Заливка заголовков: раньше бралась из --grad (фон кнопок) и давала
   1.05–2.41:1. Теперь отдельный токен по теме. */
.grad,span.grad,.page-hero .grad,.page-hero span.grad,
.wf-stat-val,.about-story h2 span,.section-title span,
[style*="-webkit-background-clip:text"],
[style*="-webkit-text-fill-color:transparent"]{
  background:var(--heading-gradient)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}

/* Функциональные границы интерфейса — только у интерактивных компонентов
   и карточек-кнопок. Декоративные разделители (--bd-decor) не трогаем. */
.ph-goal,.ph-pick,.ph-tile,.ws-back,.pp-card,
.pub-icon-btn,.theme-toggle-btn,#burgerBtn,.pub-drawer-close,
.pub-btn,.btn-outline,.btn-ghost,.pub-btn-ghost,
.wf-card,.vs-card,.sec-card,.mf-card,.pn-card,.tool-card,.feature-item{
  border-color:var(--bd-ui)!important;
}
.ph-goal:hover,.ph-pick:hover,.ph-tile:hover,.ws-back:hover,
.pub-icon-btn:hover,.theme-toggle-btn:hover,#burgerBtn:hover{
  border-color:var(--bd-ui-strong)!important;
}

/* Светло-фиолетовые подписи и иконки на лавандовых подложках (1.09–1.10:1) */
.wf-badge i,.wf-chip i,.wf-step i,
.page .wf-ex-card i,.page .wf-node i{color:var(--tx-strong)}

/* --- V4: точечные источники, найденные полным аудитом --- */

/* CTA «Начать бесплатно» в шапке и мобильном меню: фон #3B82F6 давал
   белому 3.68:1, а участок #14B8C4 — 2.42:1. Переводим на action-токен. */
.pub-btn-primary,.pub-btn.pub-btn-primary,
.mob-drawer .pub-btn-primary,.pub-drawer .pub-btn-primary{
  background:var(--action-gradient)!important;
  background-image:var(--action-gradient)!important;
  color:var(--text-on-action)!important;border-color:transparent!important;
}
.pub-btn-primary[disabled]{
  background:var(--bg2)!important;background-image:none!important;
  color:var(--tx-muted)!important;border:1px solid var(--bd-ui)!important;
}

/* Цветные бейджи категорий: белый текст на светлых заливках
   (#A78BFA 2.72:1, #EC4899 3.53:1, #3B82F6 3.68:1). */
.gl-cat,.article-cat,.blog-cat,.cat-badge,
[style*="background:#A78BFA"],[style*="background:#EC4899"],[style*="background:#3B82F6"]{
  background:#3E2A9E!important;color:#fff!important;
}

/* Счётчики и акценты: #8B5CF6 давал 3.50:1 в тёмной и 4.23:1 в светлой */
#wfCount,#glossCount b,.wf-count,.count-accent{color:var(--tx-strong)!important}

/* Границы disabled-кнопок: приглушённая рамка давала 1.91–2.17:1 */
.btn-lg[disabled],.btn-lg.disabled,
.ws-btn[disabled],.ws-btn.disabled,
button[disabled],.pub-btn[disabled]{
  border-color:var(--bd-ui-strong)!important;
}

/* Кнопка в футере лежит на тёмном фоне в обеих темах */
.pub-footer-sug{border-color:#6B7F9E!important;color:var(--tx-onDark)!important}

/* Градиентная заливка в тёмной теме на тёмной карточке (1.96:1) */
body.dark-theme .about-story .v,
body.dark-theme .v{background:var(--heading-gradient)!important;
  -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}

/* --- V4: страницы, не входившие в прежнюю выборку (/app, /tool, /platform) --- */

/* Кнопки без класса: рамка бралась из декоративного --border (1.17–1.34:1) */
.page button,.page a.btn,.modal button,#supportModal button,
.btn-google,#googleAuthBtn{border-color:var(--bd-ui)}
.page button:hover,.btn-google:hover{border-color:var(--bd-ui-strong)}

/* Сплошное правило .page button,.page a{color:inherit} было ошибкой:
   оно обнулило белый текст .ph-btn-white и дало 1.00:1. Красим адресно. */
.page .accent,.page .accent-link,.tool-cta,.ws-link{color:var(--link-acc)}
body:not(.dark-theme) .tool-note b{color:#0A6E77}

/* Тёплые подложки уведомлений: белый и светлый текст на #EA9723/#DEA11C */
.warn-box,.notice-warn,[style*="background:#EA9723"],[style*="background:#DEA11C"],
[style*="background:#F59E0B"],[style*="background:#FFFAF3"]{color:var(--tx-strong)}
.warn-box b,.notice-warn b{color:#5A3A02}
body.dark-theme .warn-box,body.dark-theme .notice-warn{color:var(--tx-strong)}

/* ==========================================================================
   V4: кабинет, админка и страницы инструментов.
   Правила адресные — по собственным классам этих экранов, без сплошных
   селекторов (прошлая попытка `.page button{color:inherit}` обнулила белый
   текст .ph-btn-white).
   ========================================================================== */

/* --- DEV-панель быстрого входа. Раньше цвета были заданы инлайново
   (#FBBF24 на светлой подложке 1.61:1, #A78BFA на янтарном 1.16:1,
   #5FE3DC 1.47:1). Теперь компонентные классы и токены. --- */
.dev-login-box{
  margin-top:16px;padding:14px;border:1px dashed var(--bd-ui-strong);
  border-radius:12px;background:var(--bg2);
}
.dev-login-title{
  font-size:11px;font-weight:800;color:var(--tx-strong);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;text-align:center;
}
.dev-login-row{display:flex;gap:8px}
.dev-login-btn{
  flex:1;padding:10px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;
  background:var(--card);color:var(--tx-strong);border:1px solid var(--bd-ui);
}
.dev-login-btn:hover{border-color:var(--bd-ui-strong)}
.dev-login-btn:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}
body:not(.dark-theme) .dev-login-owner{background:#F1ECFD;border-color:#7A63C9}
body:not(.dark-theme) .dev-login-user{background:#E6F6F5;border-color:#2E7F7B}
body.dark-theme .dev-login-owner{background:rgba(139,92,246,.14);border-color:#8B7BD8}
body.dark-theme .dev-login-user{background:rgba(10,186,181,.14);border-color:#3FA9A3}

/* --- Модальное окно входа: ссылки и disabled-кнопка --- */
.modal a,.modal-foot a,.modal .modal-note a{color:var(--link-acc)!important}
body.dark-theme .modal a,body.dark-theme .modal-foot a{color:#C9B6FF!important}
.modal-submit[disabled],.modal-submit.disabled{
  border-color:var(--bd-ui-strong)!important;color:var(--tx-muted)!important;
  background:var(--bg2)!important;background-image:none!important;
}
.btn-google,#googleAuthBtn{border-color:var(--bd-ui)!important}

/* --- Админ-кнопка: белый текст на бирюзовом (1.81–2.05:1) --- */
.ad-btn-primary,button.ad-btn.ad-btn-primary{
  background:var(--action-gradient)!important;background-image:var(--action-gradient)!important;
  color:var(--text-on-action)!important;border-color:transparent!important;
}

/* --- Кнопки страниц инструментов и кабинета без собственного класса --- */
.ws-panel button,.tool-panel button,.app-main button,.ad-shell button{
  border-color:var(--bd-ui);
}
.ws-panel button:hover,.app-main button:hover{border-color:var(--bd-ui-strong)}

/* --- Градиентные заголовки юридических страниц в тёмной теме (2.03:1):
   заливка бралась из тёмного action-градиента. --- */
body.dark-theme #page-privacy h2,body.dark-theme #page-terms h2,
body.dark-theme #page-privacy h2 span,body.dark-theme #page-terms h2 span{
  background:var(--heading-gradient)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}

/* --- Последние границы: кнопки страниц инструментов вне .ws-panel и
   disabled-кнопка модалки (2.28–2.78:1 при пороге 3:1). --- */
#page-tool button,#page-platform button,#page-vision button,#page-audit button{
  border-color:var(--bd-ui);
}
/* Граница disabled-кнопки модалки: --bd-ui-strong давал 2.25:1 (light) и
   2.82:1 (dark) при пороге 3:1. Для disabled берём отдельный, более
   контрастный оттенок — элемент остаётся явно неактивным, но различимым. */


.modal-submit[disabled],.modal-submit.disabled,
#modalSubmit[disabled],#modalSubmit.disabled,
button[disabled],button.disabled,
.btn-lg[disabled],.ws-btn[disabled],.pub-btn[disabled]{
  border:1px solid var(--bd-disabled)!important;
}

/* --- Featured-карточка AI Workflow в мобильном drawer --- */
.drawer-promo{
  display:block;margin:12px 0 14px;padding:14px 16px;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,rgba(10,110,119,.10),rgba(91,47,196,.10));
  border:1px solid var(--bd-ui);
}
.drawer-promo:focus-visible{outline:2px solid var(--link-acc);outline-offset:2px}
.drawer-promo-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.drawer-promo-badge{
  font-size:10px;font-weight:900;letter-spacing:.06em;padding:3px 7px;border-radius:6px;
  background:var(--action-gradient);color:var(--text-on-action);
}
.drawer-promo-title{font-size:15px;font-weight:900;color:var(--tx-strong)}
.drawer-promo-sub{font-size:12.5px;color:var(--tx-muted);margin-bottom:8px}
.drawer-promo-chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.drawer-promo-chain span{
  font-size:11px;font-weight:700;color:var(--tx-strong);
  background:var(--card);border:1px solid var(--bd-ui);border-radius:7px;padding:3px 7px;
}
.drawer-promo-chain i{font-style:normal;color:var(--tx-muted);font-size:11px}
.drawer-promo-cta{display:inline-block;font-size:13px;font-weight:800;color:var(--link-acc)}

/* --- Изображения статей блога: стабильные пропорции, без CLS --- */
.blog-cover,.article-cover-img,.article-inline-img{
  display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:14px;
}
.article-inline-fig{margin:26px 0}
.article-inline-fig figcaption{
  margin-top:8px;font-size:13px;color:var(--tx-muted);text-align:center;
}

/* ==========================================================================
   ТОКЕНЫ ТЕМ — ЕДИНОЕ МЕСТО ОБЪЯВЛЕНИЯ

   Раньше эти переменные переопределялись до семи раз в разных местах файла
   (следствие итеративных правок): значение приходилось искать по всему CSS,
   а любая новая правка рисковала перебить предыдущую. Теперь все токены
   объявлены ровно в двух блоках — светлая и тёмная тема. Значения совпадают
   с прежними вычисленными, поэтому внешний вид не меняется.

   Назначение:
     --tx-strong / --tx-muted   основной и вторичный текст
     --tx-onDark                текст на тёмных подложках (футер, градиенты)
     --bd-ui / --bd-ui-strong   границы элементов интерфейса (≥3:1)
     --bd-disabled              граница неактивных элементов
     --bd-decor                 декоративные разделители (порог не применяется)
     --link-acc                 акцент ссылок и активных состояний
     --action-gradient          фон кнопок действия (под белым текстом)
     --text-on-action           текст на кнопке действия
     --heading-gradient         заливка градиентных заголовков (по теме)
   ========================================================================== */
:root,body:not(.dark-theme),html body:not(.dark-theme){
  --tx-strong:#1B2437;
  --tx-muted:#48546B;
  --tx-onDark:#C8D4E8;
  --bd-ui:#79899F;
  --bd-ui-strong:#55678C;
  --bd-disabled:#6C7C96;
  --bd-decor:var(--border);
  --link-acc:#5A2CC0;
  --muted:#48546B;
  --muted2:#5F6C82;
  --ph-mut:#48546B;
  --ph-mut2:#48546B;
  --violet:#5B2FC4;
  --green:#0F7A4F;
  --cyan:#0A6E77;
  --text-on-action:#FFFFFF;
  --action-gradient:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --heading-gradient:linear-gradient(135deg,#0A6E77,#243F9E 55%,#5B2FC4);
  --grad:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --grad2:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --grad3:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --action-gradient-hover:linear-gradient(135deg,#C026D3 0%,#7C3AED 52%,#4F46E5 100%);
  --action-gradient-active:linear-gradient(135deg,#6D28D9 0%,#4338CA 52%,#1D4ED8 100%);
  --action-shadow:0 6px 18px rgba(99,60,220,.28);
  --action-shadow-hover:0 10px 26px rgba(147,51,234,.34);
}
body.dark-theme,html body.dark-theme{
  --tx-strong:#F7F9FF;
  --tx-muted:#A8B5CC;
  --tx-onDark:#C8D4E8;
  --bd-ui:#78899F;
  --bd-ui-strong:#9AACC7;
  --bd-disabled:#A6B6D0;
  --bd-decor:var(--border);
  --link-acc:#B9A2FF;
  --muted:#A8B5CC;
  --muted2:#9AA8C0;
  --ph-mut:#A8B5CC;
  --ph-mut2:#A8B5CC;
  --violet:#A78BFA;
  --green:#43D18E;
  --cyan:#5FE3DC;
  --text-on-action:#FFFFFF;
  --action-gradient:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --heading-gradient:linear-gradient(135deg,#7FE3F0,#9EC2FF 55%,#D6C4FF);
  --grad:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --grad2:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --grad3:linear-gradient(135deg,#7C3AED 0%,#4F46E5 52%,#2563EB 100%);
  --action-gradient-hover:linear-gradient(135deg,#C026D3 0%,#7C3AED 52%,#4F46E5 100%);
  --action-gradient-active:linear-gradient(135deg,#6D28D9 0%,#4338CA 52%,#1D4ED8 100%);
  --action-shadow:0 6px 18px rgba(99,60,220,.28);
  --action-shadow-hover:0 10px 26px rgba(147,51,234,.34);
}

/* --- Мелкие цели в тексте юридических страниц: ссылки внутри абзацев были
   15–20px по высоте, что ниже комфортного минимума для касания.
   Увеличиваем область нажатия, не меняя вид текста. --- */
#page-privacy a,#page-terms a,
#page-privacy .pub-crumbs a,#page-terms .pub-crumbs a{
  display:inline-block;padding:4px 2px;line-height:1.5;
}
#page-privacy .pub-crumbs,#page-terms .pub-crumbs{align-items:center}
#page-privacy a:focus-visible,#page-terms a:focus-visible{
  outline:2px solid var(--link-acc);outline-offset:2px;border-radius:4px;
}

/* Заголовки карточек гарантий переведены с H4 на H3 (уровнем ниже H2 секции),
   визуальный размер сохраняем прежним. */
.pp-guarantee .ppg-title{font-size:16px;font-weight:800;color:var(--tx-strong);margin:10px 0 6px}

/* ==========================================================================
   ЕДИНОЕ ОФОРМЛЕНИЕ КНОПОК ДЕЙСТВИЯ — все страницы сайта

   Прежний градиент (тёмный бирюзово-синий) выбирался ради контраста и выглядел
   тяжело. Новая палитра светлее и ярче — фиолетовый → индиго → синий, при
   наведении смещается в фуксию. Каждая точка обоих градиентов проверена
   численно: базовый ≥5.17:1, hover ≥4.71:1, active ≥6.7:1 для белого текста
   (порог AA — 4.5:1), поэтому читаемость не пострадала.
   ========================================================================== */
.pub-btn-primary,.btn-lg,.ws-btn,.modal-submit,#modalSubmit,.sug-send,
.pp-cta,.vs-go,.wf-go,.sbai-btn,.cookie-accept,.ad-btn-primary,
.gl-empty-btn,.ph-btn-primary,.sbcal-add,.hiw-run,.fw-cta,
button.btn-primary,a.btn-primary,.btn-grad,.pub-btn.pub-btn-primary{
  background-image:var(--action-gradient)!important;
  background-color:#4F46E5!important;
  color:var(--text-on-action)!important;
  border-color:transparent!important;
  box-shadow:var(--action-shadow);
  transition:background-image .28s ease,box-shadow .28s ease,transform .18s ease,filter .2s ease;
}
/* Наведение: другой градиент + лёгкий подъём и более мягкая тень */
.pub-btn-primary:hover,.btn-lg:hover,.ws-btn:hover,.modal-submit:hover,#modalSubmit:hover,
.sug-send:hover,.pp-cta:hover,.vs-go:hover,.wf-go:hover,.sbai-btn:hover,.cookie-accept:hover,
.ad-btn-primary:hover,.gl-empty-btn:hover,.ph-btn-primary:hover,.sbcal-add:hover,
.hiw-run:hover,.fw-cta:hover,button.btn-primary:hover,a.btn-primary:hover,
.btn-grad:hover,.pub-btn.pub-btn-primary:hover{
  background-image:var(--action-gradient-hover)!important;
  box-shadow:var(--action-shadow-hover);
  transform:translateY(-1px);
}
/* Нажатие: градиент глубже, подъём снимается */
.pub-btn-primary:active,.btn-lg:active,.ws-btn:active,.modal-submit:active,#modalSubmit:active,
.sug-send:active,.pp-cta:active,.vs-go:active,.wf-go:active,.sbai-btn:active,.cookie-accept:active,
.ad-btn-primary:active,.gl-empty-btn:active,.ph-btn-primary:active,.sbcal-add:active,
.hiw-run:active,.fw-cta:active,button.btn-primary:active,a.btn-primary:active,
.btn-grad:active,.pub-btn.pub-btn-primary:active{
  background-image:var(--action-gradient-active)!important;
  transform:translateY(0);
  box-shadow:var(--action-shadow);
}
.pub-btn-primary:focus-visible,.btn-lg:focus-visible,.ws-btn:focus-visible,
.modal-submit:focus-visible,#modalSubmit:focus-visible,.ph-btn-primary:focus-visible,
.pp-cta:focus-visible,.gl-empty-btn:focus-visible{
  outline:2px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 4px rgba(124,58,237,.45),var(--action-shadow-hover);
}
/* Неактивные кнопки градиент не получают — состояние должно читаться однозначно */
.pub-btn-primary[disabled],.btn-lg[disabled],.ws-btn[disabled],.modal-submit[disabled],
#modalSubmit[disabled],.pp-cta[disabled],.ph-btn-primary[disabled],.gl-empty-btn[disabled]{
  background-image:none!important;background-color:var(--bg2)!important;
  color:var(--tx-muted)!important;border:1px solid var(--bd-disabled)!important;
  box-shadow:none!important;transform:none!important;
}
/* Белая кнопка на цветной подложке остаётся белой */
.ph-btn-white,.ph-cta .ph-btn-white{
  background-image:none!important;background:#fff!important;color:#3E2A9E!important;
  box-shadow:0 6px 18px rgba(16,26,48,.18);
}
.ph-btn-white:hover{background:#F4F1FF!important;transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
  .pub-btn-primary,.btn-lg,.ws-btn,.modal-submit,#modalSubmit,.pp-cta,.ph-btn-primary,
  .gl-empty-btn,.sug-send,.ad-btn-primary{transition:none}
  .pub-btn-primary:hover,.btn-lg:hover,.ws-btn:hover,.modal-submit:hover,#modalSubmit:hover,
  .pp-cta:hover,.ph-btn-primary:hover,.gl-empty-btn:hover{transform:none}
}

/* ==========================================================================
   13. ЕДИНЫЙ HOVER В БЛОКЕ «НАЧНИТЕ РАБОТУ ЗА ТРИ ШАГА»

   Варианты задач, поле подключения сайта и кнопки подключения аккаунтов —
   настоящие интерактивные элементы, но подсветки не имели. Даём тот же
   эффект, что у остальных карточек сайта: лёгкий подъём, мягкая тень и
   акцентная граница. Размеры и раскладка не меняются — сдвигается только
   сам элемент, соседи остаются на месте.
   ========================================================================== */
.ph-goal,.ph-pick,.ph-tile,.ph-fakefield,.ph-fakebtn,.ph-acc,.ph-acc-btn,.ph-more{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  will-change:transform;
}
@media(hover:hover){                      /* на тач-экранах состояние не залипает */
  .ph-goal:hover,.ph-pick:hover,.ph-tile:hover,
  .ph-fakefield:hover,.ph-fakebtn:hover,.ph-acc:hover,.ph-acc-btn:hover,.ph-more:hover{
    transform:translateY(-3px);
    border-color:rgba(124,58,237,.45)!important;
    box-shadow:0 12px 26px rgba(79,70,229,.16);
  }
}
.ph-goal:focus-visible,.ph-pick:focus-visible,.ph-tile:focus-visible,
.ph-fakefield:focus-visible,.ph-fakebtn:focus-visible,.ph-acc:focus-visible,
.ph-acc-btn:focus-visible,.ph-more:focus-visible{
  transform:translateY(-3px);
  border-color:var(--link-acc)!important;
  box-shadow:0 12px 26px rgba(79,70,229,.16);
  outline:2px solid var(--link-acc);outline-offset:2px;
}
.ph-goal:active,.ph-pick:active,.ph-tile:active,.ph-fakebtn:active,.ph-acc:active{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){
  .ph-goal,.ph-pick,.ph-tile,.ph-fakefield,.ph-fakebtn,.ph-acc,.ph-acc-btn,.ph-more{transition:none}
  .ph-goal:hover,.ph-pick:hover,.ph-tile:hover{transform:none}
}

/* ==========================================================================
   14. ДЕМОНСТРАЦИОННЫЙ МАКЕТ В ПЕРВОМ ЭКРАНЕ — СТАТИЧНАЯ ИЛЛЮСТРАЦИЯ

   Справа в hero нарисован макет кабинета. Он не должен вести себя как
   интерфейс: ни наведения, ни нажатия, ни фокуса, ни курсора-руки.
   Настоящие кнопки первого экрана (в .ph-hero-copy) продолжают работать.
   ========================================================================== */
/* Правило строго ограничено первым экраном: такие же классы используются и
   в интерактивном блоке «три шага», который реагировать обязан. */
.ph-hero .ph-hero-visual,.ph-hero .ph-shot,.ph-hero .sbd{
  pointer-events:none;user-select:none;
}
.ph-hero .ph-hero-visual *,.ph-hero .ph-shot *,.ph-hero .sbd *{
  pointer-events:none!important;cursor:default!important;
}
.ph-hero .ph-shot *:hover,.ph-hero .sbd *:hover,
.ph-hero .ph-shot *:active,.ph-hero .sbd *:active,
.ph-hero .ph-shot *:focus,.ph-hero .sbd *:focus{
  transform:none!important;box-shadow:none!important;filter:none!important;outline:none!important;
}

/* ==========================================================================
   2. СВОЙ ЦВЕТ У КАЖДОГО ТАРИФА — светлые оттенки, без тёмной базы
   Каждая пара проверена численно: белый текст ≥4.6:1 в любой точке градиента.
   ========================================================================== */
#homePlansWrap .pp-card:nth-child(1) .pp-cta,
#page-pricing .pp-card:nth-child(1) .pp-cta{
  background-image:linear-gradient(135deg,#4F46E5 0%,#2563EB 100%)!important;background-color:#2563EB!important;
}
#homePlansWrap .pp-card:nth-child(2) .pp-cta,
#page-pricing .pp-card:nth-child(2) .pp-cta{
  background-image:linear-gradient(135deg,#0F766E 0%,#0369A1 100%)!important;background-color:#0E7490!important;
}
#homePlansWrap .pp-card:nth-child(3) .pp-cta,
#page-pricing .pp-card:nth-child(3) .pp-cta{
  background-image:linear-gradient(135deg,#7C3AED 0%,#6D28D9 100%)!important;background-color:#7C3AED!important;
}
#homePlansWrap .pp-card:nth-child(4) .pp-cta,
#page-pricing .pp-card:nth-child(4) .pp-cta{
  background-image:linear-gradient(135deg,#DB2777 0%,#BE185D 100%)!important;background-color:#DB2777!important;
}
/* Наведение: тот же оттенок, но светлее — тариф остаётся узнаваемым */
#page-pricing .pp-card:nth-child(1) .pp-cta:hover,#homePlansWrap .pp-card:nth-child(1) .pp-cta:hover{
  background-image:linear-gradient(135deg,#6366F1 0%,#3B82F6 100%)!important;filter:saturate(1.1);
}
#page-pricing .pp-card:nth-child(2) .pp-cta:hover,#homePlansWrap .pp-card:nth-child(2) .pp-cta:hover{
  background-image:linear-gradient(135deg,#0D9488 0%,#0284C7 100%)!important;filter:saturate(1.1);
}
#page-pricing .pp-card:nth-child(3) .pp-cta:hover,#homePlansWrap .pp-card:nth-child(3) .pp-cta:hover{
  background-image:linear-gradient(135deg,#8B5CF6 0%,#7C3AED 100%)!important;filter:saturate(1.1);
}
#page-pricing .pp-card:nth-child(4) .pp-cta:hover,#homePlansWrap .pp-card:nth-child(4) .pp-cta:hover{
  background-image:linear-gradient(135deg,#EC4899 0%,#DB2777 100%)!important;filter:saturate(1.1);
}

/* ==========================================================================
   3. ОФОРМЛЕНИЕ СТРАНИЦ «КАК РАБОТАЕТ» И «ДЛЯ КОГО»
   Обе страницы были собраны из простых карточек с одинаковой рамкой —
   на фоне главной выглядели черновиком. Приводим к тому же языку:
   мягкая подложка секций, воздух между блоками, карточки с наведением,
   акцентные иконки и заметные номера шагов.
   ========================================================================== */

/* --- ритм секций как на главной --- */
#page-how-it-works .hiw-sec,#page-for-whom .fw-sec{padding:56px 0}
#page-how-it-works .hiw-sec:nth-of-type(even),
#page-for-whom .fw-sec:nth-of-type(even){background:var(--bg2)}
#page-how-it-works .section-head,#page-for-whom .section-head{
  text-align:center;max-width:720px;margin:0 auto 34px;
}
#page-how-it-works .section-title,#page-for-whom .section-title{
  font-size:34px;line-height:1.18;font-weight:900;letter-spacing:-.02em;color:var(--tx-strong);
}
#page-how-it-works .section-head p,#page-for-whom .section-head p{
  margin-top:12px;font-size:16px;line-height:1.6;color:var(--tx-muted);
}
@media(max-width:640px){
  #page-how-it-works .hiw-sec,#page-for-whom .fw-sec{padding:38px 0}
  #page-how-it-works .section-title,#page-for-whom .section-title{font-size:26px}
}

/* --- бейдж секции: светлая тема, читаемый --- */
#page-how-it-works .section-badge,#page-for-whom .section-badge{
  background:rgba(124,58,237,.12)!important;border:1px solid rgba(124,58,237,.28)!important;
  color:var(--link-acc)!important;letter-spacing:.14em;
}
body.dark-theme #page-how-it-works .section-badge,
body.dark-theme #page-for-whom .section-badge{
  background:rgba(139,92,246,.18)!important;color:#C9B6FF!important;
}

/* --- карточки: как .ph-feature на главной --- */
#page-for-whom .fw-card,#page-for-whom .fw-case,#page-how-it-works .hiw-step{
  background:var(--card);border:1px solid var(--bd-decor);border-radius:20px;padding:26px 24px;
  box-shadow:0 1px 2px rgba(16,26,48,.04);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#page-for-whom .fw-card:hover,#page-for-whom .fw-case:hover,#page-how-it-works .hiw-step:hover{
  border-color:rgba(124,58,237,.45);
  box-shadow:0 14px 34px rgba(79,70,229,.14);
  transform:translateY(-3px);
}
body.dark-theme #page-for-whom .fw-card,
body.dark-theme #page-for-whom .fw-case,
body.dark-theme #page-how-it-works .hiw-step{box-shadow:none}

/* --- иконка карточки в цветном круге --- */
#page-for-whom .fw-card-ic,#page-for-whom .fw-case-ic{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:14px;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(37,99,235,.14));
  color:var(--link-acc);
}
#page-for-whom .fw-card-t,#page-for-whom .fw-case-t{
  font-size:18px;font-weight:900;color:var(--tx-strong);margin-bottom:8px;letter-spacing:-.01em;
}
#page-for-whom .fw-card p,#page-for-whom .fw-case-d,#page-how-it-works .hiw-step-d{
  font-size:14.5px;line-height:1.62;color:var(--tx-muted);
}

/* --- теги «болей» --- */
#page-for-whom .fw-tag{
  display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--tx-muted);
  background:var(--bg2);border:1px solid var(--bd-decor);
}
#page-for-whom .fw-card:hover .fw-tag{border-color:rgba(124,58,237,.35)}
#page-for-whom .fw-card-cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:14px;font-weight:800;color:var(--link-acc);
}

/* --- шаги: крупный градиентный номер --- */
#page-how-it-works .hiw-step{position:relative;padding-top:30px}
#page-how-it-works .hiw-step-num{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;margin-bottom:14px;
  background:var(--action-gradient);color:#fff;
  font-size:18px;font-weight:900;box-shadow:var(--action-shadow);
}
#page-how-it-works .hiw-step-t{
  font-size:18px;font-weight:900;color:var(--tx-strong);margin-bottom:8px;letter-spacing:-.01em;
}
/* соединительная линия между шагами — как последовательность на главной */
@media(min-width:900px){
  #page-how-it-works .hiw-steps{position:relative}
  #page-how-it-works .hiw-steps::before{
    content:"";position:absolute;left:0;right:0;top:52px;height:2px;
    background:linear-gradient(90deg,rgba(124,58,237,.28),rgba(37,99,235,.28));z-index:0;
  }
  #page-how-it-works .hiw-step{position:relative;z-index:1}
}

/* --- hero обеих страниц: воздух и акцент --- */
#page-how-it-works .page-hero,#page-for-whom .page-hero{padding-bottom:8px}
#page-how-it-works .page-hero h1,#page-for-whom .page-hero h1{
  font-size:44px;line-height:1.1;letter-spacing:-.025em;
}
@media(max-width:640px){
  #page-how-it-works .page-hero h1,#page-for-whom .page-hero h1{font-size:30px}
}
#page-how-it-works .fw-hero-cta,#page-for-whom .fw-hero-cta{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;
}
#page-how-it-works .fw-btn-2,#page-for-whom .fw-btn-2{
  background:transparent;color:var(--tx-strong);
  border:1px solid var(--bd-ui);border-radius:14px;padding:14px 22px;
  font-size:15px;font-weight:800;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
#page-how-it-works .fw-btn-2:hover,#page-for-whom .fw-btn-2:hover{
  border-color:var(--link-acc);background:rgba(124,58,237,.06);
}

/* Таблица сравнения на странице «Для кого» шире 320 px — даём ей
   горизонтальную прокрутку внутри контейнера, как таблице тарифов,
   чтобы строки не выходили за экран. */
#page-for-whom .fw-compare-wrap,
#page-for-whom .fw-compare{max-width:100%}
@media(max-width:900px){
  #page-for-whom .fw-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #page-for-whom .fw-compare{min-width:520px}
}

/* ==========================================================================
   Мегаменю «Возможности»: три колонки + большая иллюстрированная карточка.
   Карточка тянется на всю высоту колонок, внутри — схема «мозг с
   соединёнными иконками». Цепочки «Запрос → SEO → …» и ссылки
   «Запустить Workflow» в ней больше нет: вся карточка кликабельна.
   ========================================================================== */
.pub-mega-promo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:22px 20px;border-radius:18px;
  background:linear-gradient(160deg,rgba(124,58,237,.10),rgba(37,99,235,.08));
  border:1px solid var(--bd-ui);cursor:pointer;align-self:stretch;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.pub-mega-promo:hover{
  border-color:rgba(124,58,237,.5);box-shadow:0 14px 30px rgba(79,70,229,.16);transform:translateY(-2px);
}
.pub-mega-promo:focus-visible{outline:2px solid var(--link-acc);outline-offset:3px}
.mp-art{width:100%;max-width:290px;margin:0 auto 4px}
.mp-brain{width:100%;height:auto;display:block}
.pub-mega-promo .mp-title{font-size:17px;font-weight:900;color:var(--tx-strong);letter-spacing:-.01em}
.pub-mega-promo .mp-sub{font-size:13.5px;line-height:1.5;color:var(--tx-muted);max-width:230px}
body.dark-theme .pub-mega-promo{
  background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(59,130,246,.10));
}
/* Колонки: шесть пунктов, одинаковая высота с карточкой */
.pub-mega-cols{align-items:start}
.pub-mega-col-title{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-muted);margin-bottom:10px}
@media(max-width:1100px){
  .mp-art{max-width:230px}
  .pub-mega-promo{padding:18px 16px}
}

/* Мозг в мобильном drawer — та же иллюстрация, компактнее */
.drawer-promo .mp-art{max-width:210px;margin:0 auto 6px}
.drawer-promo .mp-brain{width:100%;height:auto;display:block}

/* Метки инструментов: ограничение по тарифу, отключение, стадия.
   Карточка остаётся видимой — человек должен понимать, что именно
   ему недоступно и почему. */
.tool-lock,.tool-beta{
  display:inline-block; margin-left:8px; padding:2px 8px;
  border-radius:20px; font-size:11.5px; font-weight:700; vertical-align:middle;
}
.tool-lock{ background:rgba(245,158,11,0.16); color:#b45309; }
.tool-beta{ background:rgba(148,163,184,0.18); color:#64748b; }
.feature-item.tool-unavailable{ opacity:.62; }

/* ============================================================
   HERO: интерактивный particle globe
   Сфера действительно рисуется точками в canvas. Курсор действует как
   мягкий магнит: ближайшие частицы вытягиваются к нему и затем пружинно
   возвращаются на поверхность сферы.
   ============================================================ */
.sbg-stage{
  position:relative;
  width:min(100%,760px);
  aspect-ratio:1/1;
  margin-inline:auto;
  perspective:1400px;
  --mx:0;
  --my:0;
  isolation:isolate;
  overflow:visible;
  cursor:default;
}
.sbg-layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate3d(
    calc(var(--mx) * var(--d,0) * 1px),
    calc(var(--my) * var(--d,0) * 1px),0);
  will-change:transform;
  transition:transform .65s cubic-bezier(.2,.72,.2,1);
  pointer-events:none;
}
.sbg-glow{z-index:0}
.sbg-glow::before{
  content:'';
  position:absolute;
  width:86%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(37,99,235,.085) 0%,
    rgba(99,102,241,.065) 34%,
    rgba(168,85,247,.045) 52%,
    rgba(59,130,246,.018) 66%,
    transparent 76%);
  filter:blur(34px);
  animation:sbgBreathe 8.5s ease-in-out infinite;
}
@keyframes sbgBreathe{0%,100%{opacity:.72;transform:scale(.98)}50%{opacity:1;transform:scale(1.045)}}
.sbg-globe-layer{z-index:2}
.sbg-canvas{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  filter:drop-shadow(0 18px 38px rgba(79,70,229,.09));
  transform:scale(1.045);
  transform-origin:center;
}
.sbg-cursor-glow{
  position:absolute;
  left:50%;top:50%;
  width:92px;height:92px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.72);
  background:radial-gradient(circle,rgba(255,255,255,.88) 0%,rgba(96,165,250,.18) 27%,rgba(139,92,246,.10) 46%,transparent 72%);
  box-shadow:0 0 34px rgba(96,165,250,.22),0 0 72px rgba(139,92,246,.12);
  opacity:0;
  transition:opacity .24s ease,transform .3s ease;
  will-change:left,top,opacity,transform;
  pointer-events:none;
}
.sbg-stage.is-magnetic .sbg-cursor-glow{opacity:.75;transform:translate(-50%,-50%) scale(1)}
.sbg-orbits{z-index:1}
.sbg-orbit{
  position:absolute;
  left:50%;top:50%;
  width:80%;
  aspect-ratio:1.85/1;
  border:1px solid rgba(96,165,250,.18);
  border-radius:50%;
  transform-origin:center;
  filter:drop-shadow(0 0 9px rgba(99,102,241,.10));
}
.sbg-orbit-1{transform:translate(-50%,-50%) rotate(-17deg);animation:sbgOrbit1 19s ease-in-out infinite}
.sbg-orbit-2{width:92%;border-color:rgba(168,85,247,.15);transform:translate(-50%,-50%) rotate(32deg);animation:sbgOrbit2 25s ease-in-out infinite}
.sbg-orbit-3{width:68%;border-style:dashed;border-color:rgba(59,130,246,.12);transform:translate(-50%,-50%) rotate(76deg);animation:sbgOrbit3 31s linear infinite}
@keyframes sbgOrbit1{50%{transform:translate(-50%,-50%) rotate(-11deg) scale(1.025)}}
@keyframes sbgOrbit2{50%{transform:translate(-50%,-50%) rotate(39deg) scale(.98)}}
@keyframes sbgOrbit3{to{transform:translate(-50%,-50%) rotate(436deg)}}
.sbg-particles{z-index:3}
.sbg-p{
  position:absolute;
  width:3px;height:3px;border-radius:50%;
  background:#60a5fa;
  box-shadow:0 0 8px rgba(96,165,250,.62);
  animation:sbgFloat var(--t,8s) ease-in-out infinite;
  animation-delay:var(--dl,0s);
}
.sbg-p:nth-child(3n){background:#a855f7;box-shadow:0 0 9px rgba(168,85,247,.58)}
.sbg-p:nth-child(4n){width:2px;height:2px;opacity:.55}
@keyframes sbgFloat{0%,100%{transform:translate3d(0,0,0) scale(.85);opacity:.25}50%{transform:translate3d(7px,-13px,0) scale(1.35);opacity:.8}}
.sbg-sheen{z-index:4}
.sbg-sheen::before{
  content:'';
  position:absolute;
  width:54%;height:42%;
  left:24%;top:12%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.34),transparent 72%);
  filter:blur(24px);
  opacity:.20;
}
@media(max-width:1100px){.sbg-stage{width:min(100%,620px)}}
@media(max-width:900px){.sbg-stage{width:min(92vw,520px)}}
@media(max-width:560px){.sbg-stage{width:min(94vw,400px)}.sbg-orbit-2{display:none}.sbg-cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){
  .sbg-layer{transition:none!important;transform:none!important}
  .sbg-glow::before,.sbg-orbit,.sbg-p{animation:none!important}
}

/* ============================================================
   Секция превью кабинета (тёмный premium dashboard)
   ============================================================ */
.ph-preview{display:none!important;}
.ph-preview-head{ text-align:center; max-width:720px; margin:0 auto 40px; }
.ph-preview-head h2{ color:#f8fafc; margin:12px 0 10px; }
.ph-preview-sub{ color:#94a3b8; font-size:16px; line-height:1.6; }

.sbp-frame{
  max-width:1080px; margin:0 auto; border-radius:18px; overflow:hidden;
  background:#0f172a; border:1px solid rgba(148,163,184,.18);
  box-shadow:0 40px 90px rgba(2,6,23,.62);
}
.sbp-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 16px; background:#111c33;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.sbp-dot{ width:10px; height:10px; border-radius:50%; background:rgba(148,163,184,.34); }
.sbp-url{ margin-left:14px; font-size:12px; color:#64748b; }

.sbp-body{ display:grid; grid-template-columns:190px 1fr; min-height:420px; }
.sbp-side{ padding:18px 12px; border-right:1px solid rgba(148,163,184,.12); background:#0d1526; }
.sbp-brand{ display:flex; align-items:center; gap:9px; font-weight:700; color:#e2e8f0; font-size:14px; margin:0 8px 18px; }
.sbp-mark{ width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#8b5cf6,#3b82f6); }
.sbp-nav{ display:flex; flex-direction:column; gap:3px; }
.sbp-nav-i{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px; font-size:13px; color:#94a3b8;
}
.sbp-nav-i i{ width:15px; height:15px; border-radius:5px; background:rgba(148,163,184,.26); flex:none; }
.sbp-nav-i.on{ background:rgba(139,92,246,.16); color:#e9d5ff; }
.sbp-nav-i.on i{ background:linear-gradient(135deg,#a78bfa,#6d28d9); }

.sbp-main{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.sbp-top{ display:flex; align-items:center; justify-content:space-between; }
.sbp-top b{ color:#f1f5f9; font-size:16px; }
.sbp-chip{
  font-size:12px; color:#cbd5e1; padding:5px 11px; border-radius:20px;
  background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.18);
}

.sbp-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sbp-kpi{
  padding:14px; border-radius:13px; background:#131f38;
  border:1px solid rgba(148,163,184,.14);
  display:flex; flex-direction:column; gap:5px;
}
.sbp-kpi em{ font-style:normal; font-size:11.5px; color:#8195b0; }
.sbp-kpi b{ font-size:22px; color:#f8fafc; font-weight:700; letter-spacing:-.5px; }
.sbp-up{ font-size:12px; color:#34d399; font-weight:600; }
.sbp-dn{ font-size:12px; color:#f87171; font-weight:600; }

.sbp-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:12px; }
.sbp-card{
  padding:14px; border-radius:13px; background:#131f38;
  border:1px solid rgba(148,163,184,.14);
}
.sbp-card-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sbp-card-h b{ font-size:13.5px; color:#e2e8f0; }
.sbp-card-h span{ font-size:11.5px; color:#64748b; }
.sbp-svg{ width:100%; height:110px; display:block; }

.sbp-tasks{ display:flex; flex-direction:column; gap:9px; }
.sbp-task{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:#cbd5e1; }
.sbp-task i{ width:9px; height:9px; border-radius:50%; flex:none; }
.sbp-t-done{ background:#34d399; }
.sbp-t-run{ background:#a78bfa; box-shadow:0 0 0 4px rgba(167,139,250,.16); }
.sbp-t-wait{ background:rgba(148,163,184,.4); }

.sbp-table .sbp-row{
  display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:9px 0; border-top:1px solid rgba(148,163,184,.1); font-size:12.5px; color:#cbd5e1;
}
.sbp-table .sbp-row b{ color:#f1f5f9; }

@media (max-width:900px){
  .sbp-body{ grid-template-columns:1fr; }
  .sbp-side{ display:none; }
  .sbp-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .sbp-kpis{ grid-template-columns:1fr; }
  .sbp-main{ padding:16px; }
}

/* ===== HERO FINAL 2026-09-08: reference-match polish ===== */
.pub-header-logo-text{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pub-ai-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 5px;border-radius:5px;
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 58%,#22c7e8 100%);
  color:#fff;font-size:11px;font-weight:900;line-height:1;letter-spacing:-.02em;
  box-shadow:0 3px 10px rgba(79,70,229,.18)
}

/* Hero и следующая секция теперь визуально являются одним непрерывным полотном. */
.ph-hero{
  border-bottom:0!important;
  background:linear-gradient(180deg,#fbfdff 0%,#f9fbff 58%,#fbfbfe 100%)!important
}
.ph-sec-goals{
  margin-top:-1px!important;
  border-top:0!important;
  background:linear-gradient(180deg,#fbfbfe 0%,#fafbfe 100%)!important
}
.ph-hero::before{
  background:
    radial-gradient(500px 330px at 8% 12%,rgba(34,199,232,.035),transparent 66%),
    radial-gradient(600px 400px at 91% 22%,rgba(96,165,250,.050),transparent 68%),
    radial-gradient(460px 320px at 98% 76%,rgba(139,92,246,.025),transparent 72%)!important
}
body.dark-theme .ph-hero::before{
  background:
    radial-gradient(520px 350px at 8% 12%,rgba(34,199,232,.045),transparent 66%),
    radial-gradient(620px 420px at 91% 22%,rgba(96,165,250,.055),transparent 68%)!important
}

/* Глобус крупнее, но фон вокруг него заметно тише, как в согласованном mockup. */
.sbg-stage{width:min(112%,800px);margin-left:-1.5%;margin-right:auto}
.sbg-glow::before{
  width:72%!important;
  background:radial-gradient(circle,rgba(125,211,252,.060) 0%,rgba(96,165,250,.040) 42%,rgba(139,92,246,.022) 60%,transparent 74%)!important;
  filter:blur(16px)!important;
  opacity:.44
}
.sbg-sheen::before{opacity:.08!important;filter:blur(16px)!important}
.sbg-orbit{border-color:rgba(59,130,246,.18)!important;filter:drop-shadow(0 0 4px rgba(59,130,246,.05))!important}
.sbg-orbit-2{border-color:rgba(139,92,246,.13)!important}
.sbg-orbit-3{border-color:rgba(59,130,246,.11)!important}
.sbg-p{width:2px;height:2px;opacity:.42;box-shadow:0 0 6px rgba(96,165,250,.34)}
.sbg-p:nth-child(3n){box-shadow:0 0 7px rgba(168,85,247,.30)}
.sbg-canvas{filter:drop-shadow(0 16px 30px rgba(37,99,235,.10));transform:scale(1.018)}

/* Три trust-пункта получают отдельные фирменные акценты, а не один цвет. */
.ph-trust li:nth-child(1) .ic{color:#0ea5e9!important}
.ph-trust li:nth-child(2) .ic{color:#7c3aed!important}
.ph-trust li:nth-child(3) .ic{color:#4f46e5!important}

@media(max-width:1100px){.sbg-stage{width:min(108%,680px);margin-left:-2%}}
@media(max-width:900px){.sbg-stage{width:min(92vw,540px);margin-inline:auto}}

/* Variant 2 globe: cleaner perimeter, no loose particle cloud. */
.sbg-particles{opacity:.18!important}

/* ============================================================
   HERO: рендер ноутбука с карточками
   Картинка с альфа-каналом (36% пикселей прозрачны), поэтому
   ни маски, ни подгонки фона не нужны — она ложится на любой
   фон и в любой теме. Карточки-уведомления входят в сам файл.
   ============================================================ */
.ph-laptop-visual{
  display:flex; align-items:center; justify-content:center;
  height:auto; overflow:visible;
}
.ph-laptop-wrap{
  position:relative; width:100%; max-width:760px;
  margin-inline:auto; pointer-events:none;
}
.ph-laptop-img{
  display:block; width:100%; height:auto;
  /* Мягкая тень под корпусом: у рендера собственной тени нет,
     без неё ноутбук висит в воздухе. */
  /* Тень несёт основную нагрузку: свечение только слегка
     подкрашивает воздух вокруг. */
  filter:drop-shadow(0 26px 40px rgba(43,38,92,.20)) drop-shadow(0 6px 14px rgba(43,38,92,.10));
}

@media (max-width:1200px){
  .ph-laptop-wrap{ max-width:620px; }
}
@media (max-width:960px){
  /* На узких экранах правая колонка скрыта — правило из базовых
     стилей; здесь только снимаем лишний отступ. */
  .ph-laptop-wrap{ max-width:100%; }
}

/* ============================================================
   HERO: свечение за ноутбуком
   Три размытых пятна разного размера и оттенка. Лежат ПОД
   картинкой (z-index), поэтому не спорят с её собственными
   тенями и не съедают контраст экрана. Дышат медленно и
   вразнобой — синхронная пульсация читалась бы как мигание.
   ============================================================ */
.ph-laptop-wrap{ isolation:isolate; }
.ph-laptop-img{ position:relative; z-index:1; }

.ph-laptop-wrap::before,
.ph-laptop-wrap::after,
.ph-laptop-glow{
  content:''; position:absolute; border-radius:50%;
  z-index:0; pointer-events:none;
}
/* Основное пятно — крупное, тёплый фиолетовый, по центру корпуса */
.ph-laptop-wrap::before{
  /* Крупнее самой картинки и смещено за её края: под корпусом
     свечение не видно — ноутбук непрозрачный. */
  width:96%; aspect-ratio:1/.88;
  left:2%; top:2%;
  background:radial-gradient(circle, rgba(139,92,246,.16) 0%, rgba(139,92,246,.07) 42%, transparent 68%);
  filter:blur(48px);
  animation:phGlowA 13s ease-in-out infinite;
}
/* Второе — синеватое, смещено вправо-вниз, добавляет глубину */
.ph-laptop-wrap::after{
  width:72%; aspect-ratio:1/.86;
  right:-14%; top:26%;
  background:radial-gradient(circle, rgba(91,124,250,0) 0%, rgba(91,124,250,0) 44%, transparent 72%);
  filter:blur(52px);
  animation:phGlowB 17s ease-in-out infinite;
}
/* Третье — маленькое и яркое, слева сверху: подсвечивает
   карточку «Запросов в ТОП-10» */
.ph-laptop-glow{
  width:46%; aspect-ratio:1;
  left:-12%; top:-4%;
  background:radial-gradient(circle, rgba(167,139,250,.13) 0%, transparent 62%);
  filter:blur(36px);
  animation:phGlowA 11s ease-in-out infinite reverse;
}
@keyframes phGlowA{
  0%,100%{ transform:translate3d(0,0,0) scale(1);      opacity:.85; }
  50%    { transform:translate3d(-2%,2%,0) scale(1.07); opacity:1;   }
}
@keyframes phGlowB{
  0%,100%{ transform:translate3d(0,0,0) scale(1);      opacity:.7;  }
  50%    { transform:translate3d(3%,-2%,0) scale(1.10); opacity:.95; }
}

/* В тёмной теме свечение заметнее — на светлом фоне оно
   тонет, на тёмном наоборот легко пережечь. */
[data-theme="dark"] .ph-laptop-wrap::before{
  background:radial-gradient(circle, rgba(139,92,246,.40) 0%, rgba(139,92,246,.17) 46%, transparent 72%);
}
[data-theme="dark"] .ph-laptop-wrap::after{
  background:radial-gradient(circle, rgba(91,124,250,.30) 0%, rgba(91,124,250,.12) 50%, transparent 74%);
}

@media (max-width:960px){
  /* Узкие экраны: пятна мельче, иначе заливают всю секцию */
  .ph-laptop-wrap::before{ width:86%; left:7%; filter:blur(34px); }
  .ph-laptop-wrap::after{ width:60%; filter:blur(38px); }
  .ph-laptop-glow{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ph-laptop-wrap::before,.ph-laptop-wrap::after,.ph-laptop-glow{ animation:none; }
}

/* ============================================================
   Секция «Знакомо?»
   Горизонтальные строки вместо колонок: описание ситуации —
   это две-три строки текста, в узкой карточке они дробятся
   и читаются хуже.
   ============================================================ */
.ph-sec-pain{ background:linear-gradient(180deg,#F7F6FE 0%,#F4F2FD 100%); }
[data-theme="dark"] .ph-sec-pain{ background:linear-gradient(180deg,#0C1424 0%,#0D1526 100%); }

.pn-head{ text-align:center; max-width:620px; margin:0 auto 40px; }
.pn-head h2{ margin:0 0 14px; }
.pn-head p{ color:var(--pub-muted,#6b7280); font-size:15px; line-height:1.65; margin:0; }
[data-theme="dark"] .pn-head p{ color:#94a3b8; }

.pn-list{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }

.pn-row{
  display:grid; grid-template-columns:auto auto 1fr; align-items:center;
  gap:22px; padding:22px 26px;
  background:#fff; border-radius:16px;
  border:1px solid rgba(124,92,252,.10);
  transition:border-color .25s ease, transform .25s ease;
}
.pn-row:hover{ border-color:rgba(124,92,252,.34); transform:translateX(4px); }
[data-theme="dark"] .pn-row{ background:#131f38; border-color:rgba(148,163,184,.16); }

/* Номер задаёт порядок чтения и заменяет буллит */
.pn-num{
  font-size:14px; font-weight:700; letter-spacing:.04em;
  color:#C4B5FD; min-width:26px;
}
[data-theme="dark"] .pn-num{ color:#6d5bb8; }

.pn-ico{
  width:56px; height:56px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:#F3F0FE; border-radius:14px;
}
.pn-ico svg{ width:32px; height:32px; }
[data-theme="dark"] .pn-ico{ background:rgba(124,92,252,.14); }

.pn-body h3{
  font-size:17px; line-height:1.35; font-weight:700; margin:0 0 6px;
  color:var(--pub-ink,#131a2e);
}
[data-theme="dark"] .pn-body h3{ color:#f1f5f9; }
.pn-body p{
  font-size:14px; line-height:1.62; margin:0;
  color:var(--pub-muted,#6b7280);
}
[data-theme="dark"] .pn-body p{ color:#94a3b8; }

@media (max-width:760px){
  /* Номер уводим наверх, иконка и текст встают в строку —
     иначе на узком экране три колонки сжимают текст в столбик. */
  .pn-row{ grid-template-columns:auto 1fr; gap:16px; padding:20px; }
  .pn-num{ grid-column:1 / -1; }
  .pn-body h3{ font-size:16px; }
}
@media (max-width:420px){
  .pn-ico{ width:46px; height:46px; }
  .pn-ico svg{ width:26px; height:26px; }
}
@media (prefers-reduced-motion:reduce){
  .pn-row{ transition:none; }
  .pn-row:hover{ transform:none; }
}