/* ============================================================
   OPERELLE — дизайн-система прототипа
   Токены соответствуют разделу 6 ТЗ для разработчиков
   ============================================================ */

:root{
  /* Основная шкала */
  --blue-50:#EEF3FC; --blue-100:#D6E2F7; --blue-300:#7FA3E0;
  --blue-500:#3A6BC4; --blue-600:#2E5AAC; --blue-700:#24488B; --blue-800:#1B3568;
  /* Акцент */
  --orange-400:#FF9A66; --orange-500:#FF7A45; --orange-600:#E85F2A;
  /* Нейтральные */
  --ink:#0B1220; --slate-700:#33415C; --slate-500:#64748B; --slate-400:#8A94A6;
  --slate-300:#CBD5E1; --slate-200:#E6EAF0; --slate-100:#EEF1F6; --slate-50:#F8FAFC;
  --white:#FFFFFF;
  /* Статусные */
  --success:#10B981; --warning:#F59E0B; --danger:#EF4444; --dev:#8B5CF6; --dev-bg:#EDE9FE;

  /* Отступы — база 4px */
  --s-2xs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px;
  --s-xl:40px; --s-2xl:64px; --s-3xl:96px;

  /* Радиусы */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* Тени */
  --sh-1:0 1px 2px rgba(11,18,32,.06);
  --sh-2:0 4px 12px rgba(11,18,32,.07);
  --sh-3:0 12px 32px rgba(11,18,32,.10);
  --sh-4:0 24px 64px rgba(11,18,32,.14);

  /* Движение */
  --d-fast:120ms; --d-base:180ms; --d-slow:320ms; --d-step:380ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  --container:1280px;
  --header-h:68px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Manrope','Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); color:var(--ink); background:var(--white);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- Типографика ---------- */
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.t-display{font-size:clamp(2.4rem,1.8rem+2.6vw,3.9rem)}
.t-h1{font-size:clamp(2rem,1.5rem+1.9vw,3rem)}
.t-h2{font-size:clamp(1.55rem,1.25rem+1.1vw,2.1rem)}
.t-h3{font-size:clamp(1.15rem,1.05rem+.45vw,1.45rem)}
.t-lead{font-size:clamp(1.05rem,1rem+.35vw,1.22rem);line-height:1.55;color:var(--slate-700)}
.t-body{font-size:1rem}
.t-sm{font-size:.875rem}
.t-xs{font-size:.8rem}
.t-cap{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--slate-400)}
.t-mono{font-family:var(--font-mono)}
.muted{color:var(--slate-500)}
.measure{max-width:68ch}
.center{text-align:center}
.center .measure{margin-inline:auto}

/* ---------- Раскладка ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-lg)}
.section{padding-block:var(--s-3xl)}
.section--tight{padding-block:var(--s-2xl)}
.section--dark{background:var(--ink);color:var(--white)}
.section--dark .muted,.section--dark .t-lead{color:#9FB2D4}
.section--tint{background:var(--blue-50)}
.section--soft{background:var(--slate-50)}
.stack>*+*{margin-top:var(--s-md)}
.grid{display:grid;gap:var(--s-lg)}
/* без этого grid-элементы не сжимаются ниже min-content и ломают вёрстку на узких экранах */
.grid>*,.hero__grid>*,.wizard__body>*,.cab>*{min-width:0}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:var(--s-sm);align-items:center;flex-wrap:wrap}
.row--between{justify-content:space-between}
.spacer{flex:1}

@media (max-width:1023px){ .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .section{padding-block:var(--s-xl)}
  :root{--s-3xl:56px;--s-2xl:40px}
}

.section-head{margin-bottom:var(--s-xl);max-width:60ch}
.section--dark .section-head .t-cap{color:var(--blue-300)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-xs);
  min-height:44px;padding:0 22px;border-radius:var(--r-md);
  font-weight:600;font-size:.94rem;white-space:nowrap;
  transition:background var(--d-base) var(--ease),transform var(--d-fast) var(--ease),
             box-shadow var(--d-base) var(--ease),color var(--d-base) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}
.btn--primary{background:var(--blue-600);color:#fff;box-shadow:var(--sh-2)}
.btn--primary:hover{background:var(--blue-700);box-shadow:var(--sh-3)}
.btn--accent{background:var(--orange-500);color:#fff;box-shadow:0 4px 14px rgba(255,122,69,.32)}
.btn--accent:hover{background:var(--orange-600)}
.btn--ghost{border:1.5px solid var(--blue-600);color:var(--blue-600)}
.btn--ghost:hover{background:var(--blue-50)}
.btn--onDark{border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.1)}
.btn--text{color:var(--blue-600);padding:0 4px;min-height:auto}
.btn--text:hover{color:var(--blue-700)}
.btn--lg{min-height:54px;padding:0 30px;font-size:1.02rem}
.btn--sm{min-height:36px;padding:0 14px;font-size:.85rem}
.btn--block{width:100%}
.btn[disabled]{background:var(--slate-300);color:#fff;cursor:not-allowed;box-shadow:none}
.btn[disabled]:hover{background:var(--slate-300)}

/* ---------- Бейджи и чипы ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-full);
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge--dev{background:var(--dev-bg);color:#7C3AED}
.badge--new{background:#DCFCE7;color:#15803D}
.badge--soon{background:var(--slate-100);color:var(--slate-500)}
.badge--accent{background:#FFEDE4;color:var(--orange-600)}
.badge--blue{background:var(--blue-50);color:var(--blue-600)}
.chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--blue-100);font-size:.82rem;color:var(--slate-700)}

/* ---------- Карточки ---------- */
.card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:var(--s-lg)}
.card--pad-sm{padding:var(--s-md)}
.card--hover{transition:transform var(--d-base) var(--ease),box-shadow var(--d-base) var(--ease),
  border-color var(--d-base) var(--ease);cursor:pointer}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-300)}
.card--hover:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}
.card--dark{background:#141F35;border-color:#22314F;color:#fff}
.icon-box{width:48px;height:48px;border-radius:var(--r-md);background:var(--blue-50);
  display:flex;align-items:center;justify-content:center;color:var(--blue-600);flex:none}
.icon-box--dark{background:rgba(255,255,255,.08);color:#9FB2D4}
.icon-box--accent{background:#FFEDE4;color:var(--orange-600)}

/* ---------- Шапка ---------- */
.header{position:sticky;top:0;z-index:100;height:var(--header-h);
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--slate-200)}
.header__in{height:100%;display:flex;align-items:center;gap:var(--s-lg)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;
  font-size:1.16rem;letter-spacing:-.03em}
.logo__mark{width:30px;height:30px;border-radius:9px;background:var(--blue-600);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.82rem}
.nav{display:flex;gap:2px;margin-left:var(--s-md)}
.nav a{padding:9px 11px;border-radius:var(--r-sm);font-size:.88rem;font-weight:500;color:var(--slate-700);white-space:nowrap;
  transition:background var(--d-base),color var(--d-base)}
.nav a:hover{background:var(--slate-100);color:var(--ink)}
.nav a.is-active{color:var(--blue-600);background:var(--blue-50);font-weight:600}
.lang{display:flex;gap:2px;background:var(--slate-100);border-radius:var(--r-sm);padding:3px}
.lang button{padding:5px 10px;border-radius:6px;font-size:.78rem;font-weight:600;color:var(--slate-500)}
.lang button.is-active{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm)}
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:flex}
  .header__in{gap:var(--s-sm)}
}
@media (max-width:900px){
  .header .lang{display:none}
  #cabBtn{display:none}
}
@media (max-width:560px){
  .header__in>.btn--accent{display:none}
  .logo{font-size:1.04rem}
}
.mobile-nav{position:fixed;inset:var(--header-h) 0 0;background:#fff;z-index:99;padding:var(--s-lg);
  overflow-y:auto;display:none}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block;padding:14px 12px;border-radius:var(--r-sm);font-weight:600;
  border-bottom:1px solid var(--slate-100)}

/* ---------- Хиро ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,104px);
  background:linear-gradient(168deg,#F7FAFF 0%,#EEF3FC 46%,#FFFFFF 100%)}
.hero::before{content:'';position:absolute;top:-180px;right:-120px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(46,90,172,.13),transparent 66%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-220px;left:-160px;width:520px;height:520px;
  background:radial-gradient(circle,rgba(255,122,69,.12),transparent 66%);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-2xl);align-items:center;
  position:relative;z-index:1}
@media (max-width:1023px){.hero__grid{grid-template-columns:1fr;gap:var(--s-xl)}}
.hero__stats{display:flex;gap:var(--s-xl);margin-top:var(--s-xl);flex-wrap:wrap}
.hero__stat b{display:block;font-family:var(--font-head);font-size:1.9rem;color:var(--blue-600);line-height:1}
.hero__stat span{font-size:.82rem;color:var(--slate-500)}

/* ---------- Мок-окно приложения ---------- */
.mock{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-4);background:#fff;
  border:1px solid var(--slate-200)}
.mock__bar{height:34px;background:var(--ink);display:flex;align-items:center;gap:6px;padding:0 13px}
.mock__dot{width:9px;height:9px;border-radius:50%;background:#33415C}
.mock__body{display:flex;min-height:280px}
.mock__side{width:132px;background:var(--ink);padding:var(--s-sm);flex:none}
.mock__side a,.mock__side div{display:block;padding:7px 9px;border-radius:6px;font-size:.72rem;
  color:#8FA6D4;margin-bottom:2px;cursor:pointer;transition:background var(--d-base)}
.mock__side .is-active{background:var(--blue-600);color:#fff;font-weight:600}
.mock__main{flex:1;padding:var(--s-md);background:var(--slate-50);min-width:0}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xs);margin-bottom:var(--s-sm)}
.kpi div{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-sm);padding:10px 12px}
.kpi span{font-size:.68rem;color:var(--slate-500);display:block}
.kpi b{font-family:var(--font-head);font-size:1.28rem;display:block;margin-top:2px}
.mock-grid{display:flex;flex-direction:column;gap:4px}
.mock-grid__row{display:flex;gap:4px}
.mock-grid__cell{flex:1;height:15px;border-radius:3px;background:var(--slate-100);transition:transform var(--d-fast)}
.mock-grid__cell--busy{background:var(--blue-600)}
.mock-grid__cell--hot{background:var(--orange-500)}
.mock-grid__cell:hover{transform:scaleY(1.35)}
@media (max-width:560px){
  .mock__side{width:96px}
  .mock__side a,.mock__side div{font-size:.66rem;padding:6px 7px}
  .kpi{gap:5px}
  .kpi div{padding:8px 9px}
  .kpi b{font-size:1.02rem}
  .kpi span{font-size:.62rem}
}

/* ---------- Шаги ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-lg);counter-reset:s}
.step{position:relative;padding-top:var(--s-lg)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:34px;height:34px;border-radius:10px;background:var(--blue-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;
  font-family:var(--font-head)}
.step h3{margin:22px 0 6px;font-size:1.05rem}
@media (max-width:767px){.steps{grid-template-columns:1fr}}

/* ---------- Отрасли ---------- */
.ind-card{display:flex;flex-direction:column;height:100%}
.ind-card__meta{margin-top:auto;padding-top:var(--s-md);display:flex;align-items:center;
  justify-content:space-between;font-size:.82rem}
.ind-group{margin-bottom:var(--s-xl)}
.ind-group__t{display:flex;align-items:center;gap:var(--s-sm);margin-bottom:var(--s-md)}
.ind-group__t::after{content:'';flex:1;height:1px;background:var(--slate-200)}

/* ---------- Конструктор ---------- */
.wizard{background:var(--slate-50);min-height:calc(100vh - var(--header-h))}
.wizard__bar{background:#fff;border-bottom:1px solid var(--slate-200);position:sticky;
  top:var(--header-h);z-index:50}
.wizard__steps{display:flex;gap:var(--s-xs);padding-block:var(--s-md)}
.wstep{flex:1;text-align:center;min-width:0}
.wstep__line{height:5px;border-radius:4px;background:var(--slate-200);transition:background var(--d-slow)}
.wstep.is-done .wstep__line,.wstep.is-current .wstep__line{background:var(--orange-500)}
.wstep__name{font-size:.75rem;margin-top:7px;color:var(--slate-400);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wstep.is-done .wstep__name,.wstep.is-current .wstep__name{color:var(--ink)}
.wizard__body{display:grid;grid-template-columns:1fr 320px;gap:var(--s-xl);padding-block:var(--s-xl);
  align-items:start}
@media (max-width:1023px){
  .wizard__body{grid-template-columns:1fr;padding-bottom:120px}
  .wizard__aside{position:fixed;left:0;right:0;bottom:0;z-index:60;border-radius:0;
    border-top:1px solid var(--slate-200);box-shadow:0 -8px 24px rgba(11,18,32,.1)}
  .wizard__aside .aside-hide{display:none}
}
.wizard__aside{position:sticky;top:calc(var(--header-h) + 90px);background:#fff;
  border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:var(--s-lg)}

.opt{display:flex;align-items:center;gap:var(--s-sm);padding:14px 16px;border-radius:var(--r-md);
  border:1.5px solid var(--slate-200);background:#fff;cursor:pointer;width:100%;text-align:left;
  transition:border-color var(--d-base),background var(--d-base),transform var(--d-fast)}
.opt:hover{border-color:var(--blue-300)}
.opt:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}
.opt.is-on{border-color:var(--blue-600);background:#F7FAFF}
.opt__box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--slate-300);flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;
  transition:background var(--d-fast),border-color var(--d-fast)}
.opt.is-on .opt__box{background:var(--blue-600);border-color:var(--blue-600)}
.opt__radio{border-radius:50%}
.opt.is-locked{background:#F7FAFF;border-color:var(--blue-100);cursor:default}
.opt.is-locked .opt__box{background:var(--blue-300);border-color:var(--blue-300)}
.opt.is-dev{border-style:dashed;border-color:#C4B5FD;background:#FBFAFF}
.opt.is-dev.is-on{background:#F5F3FF;border-color:var(--dev)}
.opt__t{font-weight:600;font-size:.95rem}
.opt__d{font-size:.8rem;color:var(--slate-500);margin-top:3px}
.opt__q{width:24px;height:24px;border-radius:50%;background:var(--slate-100);color:var(--slate-500);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;flex:none;font-weight:700}
.opt__q:hover{background:var(--blue-100);color:var(--blue-600)}

.field{margin-bottom:var(--s-md)}
.field label{display:block;font-size:.84rem;font-weight:600;color:var(--slate-700);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;
  border:1.5px solid var(--slate-200);border-radius:var(--r-md);background:#fff;
  transition:border-color var(--d-base),box-shadow var(--d-base)}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-600);
  box-shadow:0 0 0 3px rgba(46,90,172,.13)}
.field .hint{font-size:.76rem;color:var(--slate-500);margin-top:5px}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger)}
.field .err{font-size:.76rem;color:var(--danger);margin-top:5px;display:none}
.field.has-error .err{display:block}
.check-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--slate-700)}
.check-row input{width:19px;height:19px;margin-top:2px;flex:none;accent-color:var(--blue-600)}

.mod-group{margin-bottom:var(--s-lg)}
.mod-group__t{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--slate-500);margin-bottom:10px}
.core-box{background:#F7FAFF;border:1px solid var(--blue-100);border-radius:var(--r-md);
  padding:var(--s-md);margin-bottom:var(--s-lg)}

/* ---------- Генерация ---------- */
.genwrap{max-width:620px;margin:0 auto;padding-block:var(--s-3xl);text-align:center}
.gen-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--slate-200);
  border-radius:var(--r-md);background:#fff;margin-bottom:8px;text-align:left}
.gen-item__ic{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--slate-100);color:var(--slate-400);font-size:.72rem}
.gen-item.is-run .gen-item__ic{background:var(--blue-50);color:var(--blue-600);
  animation:pulse 1.2s infinite}
.gen-item.is-ok .gen-item__ic{background:#DCFCE7;color:var(--success)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.skel{background:linear-gradient(90deg,var(--slate-100) 25%,#F4F6FA 50%,var(--slate-100) 75%);
  background-size:200% 100%;animation:shine 1.4s linear infinite;border-radius:6px}
@keyframes shine{to{background-position:-200% 0}}

/* ---------- Просмотрщик ---------- */
.viewer{background:var(--slate-50);min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column}
.viewer__top{background:var(--ink);color:#fff;padding:13px 0}
.viewer__tabs{display:flex;gap:5px;flex-wrap:wrap}
.viewer__tabs button{padding:9px 16px;border-radius:var(--r-sm);font-size:.86rem;font-weight:600;
  background:#1B2537;color:#8FA6D4;transition:background var(--d-base),color var(--d-base)}
.viewer__tabs button.is-active{background:var(--blue-600);color:#fff}
.viewer__stage{flex:1;position:relative;padding:var(--s-lg) 0}
.wm{position:fixed;top:var(--header-h);left:0;right:0;bottom:82px;pointer-events:none;z-index:6;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.wm span{transform:rotate(-24deg);font-family:var(--font-head);font-weight:800;
  font-size:clamp(2rem,6vw,4.6rem);color:rgba(46,90,172,.09);letter-spacing:.1em;white-space:nowrap}
.viewer__bottom{background:#fff;border-top:1px solid var(--slate-200);padding:14px 0;
  position:sticky;bottom:0;z-index:20}
.doc{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);
  padding:clamp(20px,4vw,48px);max-width:820px;margin:0 auto;box-shadow:var(--sh-2)}
.doc h2{margin-bottom:var(--s-md)}
.doc table{width:100%;border-collapse:collapse;margin-block:var(--s-md);font-size:.88rem}
.doc th{background:var(--blue-600);color:#fff;text-align:left;padding:10px 12px;font-size:.78rem;
  letter-spacing:.03em}
.doc td{padding:10px 12px;border-bottom:1px solid var(--slate-100)}
.doc tr:last-child td{border-bottom:none}
.slide{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);
  aspect-ratio:16/9;padding:clamp(20px,4vw,44px);display:flex;flex-direction:column;
  justify-content:center;box-shadow:var(--sh-2);max-width:900px;margin:0 auto}
.slide--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.slide__n{position:absolute;bottom:16px;right:20px;font-size:.72rem;color:var(--slate-400)}
.slide-nav{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:var(--s-md)}
.slide-dot{width:9px;height:9px;border-radius:50%;background:var(--slate-300);cursor:pointer}
.slide-dot.is-on{background:var(--blue-600);width:26px;border-radius:5px}

/* демо-прототип внутри просмотрщика */
.proto{border:1px solid var(--slate-200);border-radius:var(--r-md);overflow:hidden;background:#fff;
  box-shadow:var(--sh-2);display:flex;min-height:520px}
.proto__side{width:212px;background:var(--ink);flex:none;padding:var(--s-md);overflow-y:auto}
.proto__brand{color:#fff;font-family:var(--font-head);font-weight:800;font-size:.95rem;
  margin-bottom:var(--s-md);display:flex;align-items:center;gap:8px}
.proto__nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:9px 11px;border-radius:var(--r-sm);color:#8FA6D4;font-size:.82rem;margin-bottom:2px;
  transition:background var(--d-base),color var(--d-base)}
.proto__nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.proto__nav button.is-active{background:var(--blue-600);color:#fff;font-weight:600}
.proto__main{flex:1;background:var(--slate-50);padding:var(--s-lg);overflow-x:auto;min-width:0}
.proto__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-md);
  gap:var(--s-sm);flex-wrap:wrap}
.ptable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--slate-200);font-size:.84rem}
.ptable th{background:var(--slate-100);text-align:left;padding:11px 13px;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--slate-500);font-weight:700}
.ptable td{padding:11px 13px;border-top:1px solid var(--slate-100)}
.ptable tbody tr{cursor:pointer;transition:background var(--d-fast)}
.ptable tbody tr:hover{background:var(--blue-50)}
.pill{display:inline-flex;padding:3px 10px;border-radius:var(--r-full);font-size:.72rem;font-weight:600}
.pill--ok{background:#DCFCE7;color:#15803D}
.pill--warn{background:#FEF3C7;color:#B45309}
.pill--info{background:var(--blue-50);color:var(--blue-600)}
.pill--gray{background:var(--slate-100);color:var(--slate-500)}
.pkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-sm);margin-bottom:var(--s-md)}
@media (max-width:767px){.pkpi{grid-template-columns:repeat(2,1fr)}.proto{flex-direction:column}
  .proto__side{width:100%}.proto__nav{display:flex;gap:4px;overflow-x:auto}
  .proto__nav button{white-space:nowrap;width:auto}}
.pcard{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-md);padding:var(--s-md)}
.bar{height:8px;border-radius:4px;background:var(--slate-100);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--blue-600);border-radius:4px}

/* ---------- Кабинет ---------- */
.cab{display:grid;grid-template-columns:236px 1fr;gap:var(--s-xl);align-items:start}
@media (max-width:1023px){.cab{grid-template-columns:1fr}}
.cab__nav{background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:var(--s-xs);
  position:sticky;top:calc(var(--header-h) + 20px)}
.cab__nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;
  border-radius:var(--r-sm);font-size:.9rem;color:var(--slate-700);transition:background var(--d-base)}
.cab__nav button:hover{background:var(--slate-100)}
.cab__nav button.is-active{background:var(--blue-50);color:var(--blue-600);font-weight:600}
@media (max-width:1023px){.cab__nav{position:static;display:flex;overflow-x:auto}
  .cab__nav button{white-space:nowrap;width:auto}}
.wallet{background:linear-gradient(135deg,var(--ink),#1D2B47);color:#fff;border-radius:var(--r-lg);
  padding:var(--s-lg);position:relative;overflow:hidden}
.wallet::after{content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,122,69,.28),transparent 68%)}
.wallet__sum{font-family:var(--font-head);font-size:2.5rem;line-height:1;margin:8px 0}
.tx{display:flex;align-items:center;gap:var(--s-sm);padding:13px 0;border-bottom:1px solid var(--slate-100)}
.tx:last-child{border-bottom:none}
.tx__ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.tx__ic--in{background:#DCFCE7;color:var(--success)}
.tx__ic--out{background:#FEE2E2;color:var(--danger)}
.tx__sum{margin-left:auto;font-weight:700;font-family:var(--font-mono);font-size:.9rem}

/* ---------- Модальные окна ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:var(--s-md)}
.modal.is-open{display:flex}
.modal__bg{position:absolute;inset:0;background:rgba(11,18,32,.55);backdrop-filter:blur(3px)}
.modal__box{position:relative;background:#fff;border-radius:var(--r-lg);max-width:480px;width:100%;
  padding:var(--s-lg);box-shadow:var(--sh-4);max-height:88vh;overflow-y:auto;
  animation:pop var(--d-slow) var(--ease)}
.modal__box--wide{max-width:680px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal__x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--slate-500)}
.modal__x:hover{background:var(--slate-100)}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-md);z-index:300;
  box-shadow:var(--sh-4);font-size:.88rem;opacity:0;transition:transform var(--d-slow) var(--ease),
  opacity var(--d-slow) var(--ease);pointer-events:none;max-width:90vw;text-align:center}
.toast.is-on{transform:translateX(-50%) translateY(0);opacity:1}

/* ---------- Прочее ---------- */
.footer{background:var(--ink);color:#9FB2D4;padding-block:var(--s-2xl) var(--s-lg)}
.footer a{color:#9FB2D4;font-size:.88rem;display:block;padding:5px 0}
.footer a:hover{color:#fff}
.footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.divider{height:1px;background:var(--slate-200);margin-block:var(--s-lg)}
.section--dark .divider{background:#22314F}
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity var(--d-slow) var(--ease),
  transform var(--d-slow) var(--ease)}
.tag-note{background:var(--blue-50);border-left:3px solid var(--blue-600);padding:13px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.86rem;color:var(--slate-700)}
.tag-warn{background:#FFF7ED;border-left:3px solid var(--orange-500);padding:13px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.86rem;color:var(--slate-700)}
.price{font-family:var(--font-head);font-size:2.1rem;font-weight:700;line-height:1.1}
.price__old{font-size:1.05rem;font-weight:600;color:var(--slate-400);text-decoration:line-through;
  margin-right:9px;vertical-align:middle}
.billing{display:inline-flex;gap:3px;background:var(--slate-100);border-radius:var(--r-md);padding:4px}
.billing button{padding:9px 18px;border-radius:var(--r-sm);font-size:.9rem;font-weight:600;
  color:var(--slate-500);display:inline-flex;align-items:center;transition:background var(--d-base)}
.billing button.is-active{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.price small{font-size:.9rem;font-weight:500;color:var(--slate-500)}
.tariff{display:flex;flex-direction:column;height:100%}
.tariff--hot{border-color:var(--blue-600);box-shadow:var(--sh-3);position:relative}
.tariff ul{list-style:none;margin-block:var(--s-md);flex:1}
.tariff li{padding:7px 0 7px 26px;position:relative;font-size:.9rem;color:var(--slate-700)}
.tariff li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--slate-200)}
.timeline__i{position:relative;padding-bottom:var(--s-lg)}
.timeline__i::before{content:'';position:absolute;left:-27px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--blue-600);border:3px solid #fff;box-shadow:0 0 0 2px var(--blue-100)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue-600);color:#fff;padding:12px 20px;z-index:400}
.skip:focus{left:10px;top:10px}

/* ---------- Брендирование клиента в прототипе ---------- */
.proto__brand{color:#fff;font-family:var(--font-head);font-weight:800;font-size:.95rem;
  margin-bottom:2px;display:flex;align-items:center;gap:9px;line-height:1.2}
.proto__mark{width:26px;height:26px;border-radius:8px;background:var(--blue-600);flex:none;
  display:inline-flex;align-items:center;justify-content:center;font-size:.66rem;letter-spacing:.02em}
.proto__name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.proto__powered{font-size:.62rem;color:#5C7099;margin:0 0 14px 35px;letter-spacing:.04em}
.pcard--link{cursor:pointer;transition:border-color var(--d-base),box-shadow var(--d-base),
  transform var(--d-fast)}
.pcard--link:hover{border-color:var(--blue-300);box-shadow:var(--sh-2);transform:translateY(-2px)}

/* ---------- Витрина сайта клиента ---------- */
.site{border:1px solid var(--slate-200);border-radius:var(--r-md);overflow:hidden;background:#fff}
.site__bar{height:32px;background:var(--slate-100);display:flex;align-items:center;gap:6px;
  padding:0 12px;border-bottom:1px solid var(--slate-200)}
.site__bar .mock__dot{background:var(--slate-300)}
.site__url{margin-left:10px;font-family:var(--font-mono);font-size:.68rem;color:var(--slate-500);
  background:#fff;border:1px solid var(--slate-200);border-radius:20px;padding:2px 12px}
.site__nav{display:flex;align-items:center;gap:4px;padding:10px 14px;border-bottom:1px solid var(--slate-100);
  flex-wrap:wrap}
.site__nav button{padding:6px 12px;border-radius:var(--r-sm);font-size:.78rem;color:var(--slate-500);
  transition:background var(--d-base),color var(--d-base)}
.site__nav button:hover{background:var(--slate-100);color:var(--ink)}
.site__nav button.is-active{background:var(--blue-50);color:var(--blue-600);font-weight:600}
.site__body{padding:14px;background:var(--slate-50)}
.site__hero{background:linear-gradient(140deg,var(--ink),#1D2B47);color:#fff;
  border-radius:var(--r-md);padding:22px}
.site__h1{font-family:var(--font-head);font-weight:700;font-size:1.35rem;margin:6px 0 8px;line-height:1.2}
.site__img{height:74px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--blue-100),var(--slate-100))}

/* ---------- Выбор страны и валюты ---------- */
.region{height:34px;padding:0 30px 0 11px;border:1px solid var(--slate-200);border-radius:var(--r-sm);
  background:var(--slate-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  font-size:.8rem;font-weight:600;color:var(--slate-700);cursor:pointer;appearance:none;max-width:190px}
.region:focus{outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(46,90,172,.13)}
/* на средних экранах прячем языковой переключатель, страна важнее — она задаёт валюту */
@media (max-width:1180px){ .header .lang{display:none} }

/* ---------- Поиск ---------- */
.search{position:relative;display:flex;align-items:center;gap:9px;flex:1;max-width:460px;
  border:1.5px solid var(--slate-200);border-radius:var(--r-md);padding:0 14px;background:#fff;
  color:var(--slate-400);transition:border-color var(--d-base),box-shadow var(--d-base)}
.search:focus-within{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(46,90,172,.13);
  color:var(--blue-600)}
.search input{flex:1;min-height:46px;border:none;outline:none;background:none;font-size:.95rem}
.search input::-webkit-search-cancel-button{cursor:pointer}

/* ---------- Компактная сетка выбора бизнеса ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:1279px){ .biz-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px){ .biz-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .biz-grid{grid-template-columns:1fr} }
.biz{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:14px 13px;border:1.5px solid var(--slate-200);border-radius:var(--r-md);background:#fff;
  text-align:left;cursor:pointer;min-height:118px;
  transition:border-color var(--d-base),background var(--d-base),transform var(--d-fast),
             box-shadow var(--d-base)}
.biz:hover{border-color:var(--blue-300);transform:translateY(-2px);box-shadow:var(--sh-2)}
.biz:focus-visible{outline:3px solid var(--orange-500);outline-offset:2px}
.biz.is-on{border-color:var(--blue-600);background:#F7FAFF;box-shadow:0 0 0 1px var(--blue-600) inset}
.biz__ic{width:36px;height:36px;border-radius:10px;background:var(--blue-50);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:5px;flex:none}
.biz.is-on .biz__ic{background:var(--blue-600);color:#fff}
.biz__t{font-weight:700;font-size:.9rem;line-height:1.25}
.biz__d{font-size:.74rem;color:var(--slate-500);line-height:1.35}
.biz__b{position:absolute;top:10px;right:10px;font-size:.6rem;padding:3px 7px}