/* ==========================================================================
   TAP — Design System
   Industrial B2B aesthetic: graphite + electric blue, engineered feel
   ========================================================================== */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Tokens --- */
:root {
  /* Foundation */
  --ink-900: #0B1220;
  --ink-800: #141C2E;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #4B5563;
  --ink-400: #6B7280;
  --ink-300: #9CA3AF;
  --ink-200: #D1D5DB;
  --ink-100: #E5E7EB;
  --ink-50:  #F3F4F6;
  --paper-50: #F7F8FA;
  --paper-00: #FFFFFF;

  /* Accent */
  --blue-900: #0C1E4F;
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-300: #93C5FD;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  /* Accent 2 — teal (decoration, live-indicators, brand-mark) */
  /* НЕ для CTA, НЕ для текста, НЕ для ссылок. ≤2-3% площади композиции. */
  --teal-500: #14B8A6;   /* основной teal — знак лого, live-точки */
  --teal-700: #0F766E;   /* hover/тёмный teal на светлом фоне */
  --teal-300: #5EEAD4;   /* светлая вариация */
  --teal-soft: rgba(20, 184, 166, 0.08);
  --teal-glow: rgba(20, 184, 166, 0.4);

  /* Semantic (for UI mockups only) */
  --ok:     #16A34A;
  --ok-bg:  #DCFCE7;
  --warn:   #F59E0B;
  --warn-bg:#FEF3C7;
  --err:    #DC2626;
  --err-bg: #FEE2E2;
  --info:   #0EA5E9;

  /* Typography */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-display: clamp(40px, 5vw, 64px);
  --fs-h1:      clamp(32px, 4vw, 48px);
  --fs-h2:      clamp(26px, 3vw, 40px);
  --fs-h3:      clamp(20px, 2vw, 26px);
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(11,18,32,.04);
  --sh-sm: 0 2px 8px rgba(11,18,32,.06), 0 1px 2px rgba(11,18,32,.04);
  --sh-md: 0 10px 30px rgba(11,18,32,.08), 0 2px 6px rgba(11,18,32,.05);
  --sh-lg: 0 24px 60px rgba(11,18,32,.14), 0 8px 20px rgba(11,18,32,.08);
  --sh-glow: 0 0 0 4px rgba(37,99,235,.15);

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;
  --s-24: 96px; --s-32: 128px;

  /* Container */
  --container: 1280px;
  --gutter: 24px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--paper-00);
  font-feature-settings: "ss01", "cv01", "cv02";
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--blue-600); color: #fff; }

/* --- Layout primitives --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 56px 0; }
.section--tight { padding: var(--s-10) 0; }

/* Чёткие разделители между однотипными соседними секциями */
.section + .section:not(.section--paper):not(.section--dark),
.section--paper + .section--paper {
  border-top: 1px solid var(--ink-100);
}
/* Соседство между светлыми секциями (любые комбинации section/section--paper)
   — сжимаем верхний padding, чтобы не накапливалось 80+80=160px пустоты.
   Когда соседствует section--dark, оставляем полный padding для визуальной паузы. */
.section:not(.section--dark) + .section:not(.section--dark) {
  padding-top: var(--s-12);
}
.section--dark {
  background: var(--ink-900);
  color: var(--ink-100);
  position: relative;
  overflow: hidden;
}
.section--paper { background: var(--paper-50); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--s-4);
  font-family: var(--font-mono);
}
.section--dark .eyebrow { color: var(--blue-300); }

/* --- Typography --- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { color: var(--ink-600); max-width: 64ch; }
.section--dark p { color: var(--ink-300); }
.lede { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-500); max-width: 60ch; }
.section--dark .lede { color: var(--ink-200); }

.mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.01em; }

/* --- Header / Nav --- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ink-100);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.brand {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.brand-mark svg {
  width: 100%; height: 100%; display: block;
}
.nav-links {
  display: flex; align-items: center; gap: var(--s-6); font-size: var(--fs-sm); font-weight: 500;
}
.nav-links a { color: var(--ink-600); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink-900); }
.nav-cta { display: flex; align-items: center; gap: var(--s-3); }

@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 500; font-size: var(--fs-sm);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--ink-900); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sh-sm);
}
.btn--primary:hover { background: var(--blue-700); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn--accent {
  background: var(--blue-600); color: #fff;
}
.btn--accent:hover { background: var(--blue-700); }
.btn--ghost {
  background: transparent; color: var(--ink-700); border: 1px solid var(--ink-200);
}
.btn--ghost:hover { background: var(--paper-50); border-color: var(--ink-300); }
.btn--lg { padding: 14px 22px; font-size: var(--fs-body); }

.section--dark .btn--ghost { color: var(--ink-100); border-color: rgba(255,255,255,.15); }
.section--dark .btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.22); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.45); }

.arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Hero --- */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink-900); color: var(--ink-100);
  padding: var(--s-12) 0 var(--s-16);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(37,99,235,.18), transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(20,184,166,.14), transparent 50%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-10); align-items: start;
}
.hero-inner > .hero-proof { grid-column: 1 / -1; align-self: end; margin-top: 0; }
/* Стек справа — центрируем по вертикали относительно текста (равномернее заполнение) */
.hero-inner > .fade-up.d-3 { align-self: center; }
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-12); }
  .hero-inner > .fade-up.d-3 { align-self: start; }
}
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: var(--s-6);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-xs); font-weight: 500; color: var(--ink-200);
  font-family: var(--font-mono); letter-spacing: -0.01em;
}
.hero-badge--1c {
  background: rgba(255,213,0,.08);
  border-color: rgba(255,213,0,.3);
  color: #FFE066;
}
.hero-badge-1c-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 16px;
  background: #FFD500; color: #000;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em;
  border-radius: 2px;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.25); }
.hero-badge-dot--reg { background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.3); }
/* Лента бейджей над hero: ТАП+реестр в строке, 1С под, с разделителем снизу */
.hero-badges-bar {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero-badges-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hero-badges-row + .hero-badges-row { margin-top: 8px; }
.hero h1 { color: #fff; margin-bottom: var(--s-6); font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; }
.hero-home-h1 { font-size: clamp(34px, 3.4vw, 52px) !important; line-height: 1.08; }
.hero-lede { color: var(--ink-200); max-width: 52ch; margin-bottom: var(--s-8); font-size: clamp(17px, 1.3vw, 20px); }
.hero-ctas { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-8); }
.hero .btn--primary { background: #fff; color: var(--ink-900); }
.hero .btn--primary:hover { background: var(--blue-100); color: var(--ink-900); }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  font-size: var(--fs-sm); color: var(--ink-300);
  padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.1);
}
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof b { color: #fff; font-weight: 600; }

/* --- Gantt mockup in hero --- */
.gantt-card {
  position: relative;
  background: #fff; color: var(--ink-900);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transform-origin: left center;
  max-width: 720px;
  margin-left: auto;
}
.gantt-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--ink-100); background: var(--paper-50);
}
.chrome-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.chrome-dot:nth-child(1) { background: #ff5f57; }
.chrome-dot:nth-child(2) { background: #febc2e; }
.chrome-dot:nth-child(3) { background: #28c840; }
.chrome-url {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
}
.gantt-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--ink-100);
}
.gantt-title { font-weight: 600; font-size: 14px; }
.gantt-meta { font-size: 12px; color: var(--ink-500); font-family: var(--font-mono); }
.gantt-body {
  display: grid; grid-template-columns: 140px 1fr; font-size: 12px;
}
.gantt-rows { border-right: 1px solid var(--ink-100); }
.gantt-row, .gantt-axis-cell {
  padding: 8px 14px; border-bottom: 1px solid var(--ink-100);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-chart { position: relative; background-image: linear-gradient(90deg, var(--ink-50) 1px, transparent 1px); background-size: calc(100% / 10) 100%; }
.gantt-chart-axis {
  display: grid; grid-template-columns: repeat(10, 1fr);
  border-bottom: 1px solid var(--ink-100); font-size: 10px; color: var(--ink-500);
  font-family: var(--font-mono);
}
.gantt-chart-axis > div { padding: 6px 0 6px 6px; border-left: 1px solid var(--ink-100); }
.gantt-chart-axis > div:first-child { border-left: 0; }
.gantt-chart-row { position: relative; height: 34px; border-bottom: 1px solid var(--ink-100); }
.gantt-bar {
  position: absolute; top: 6px; bottom: 6px;
  border-radius: 4px; padding: 0 8px;
  display: flex; align-items: center; font-size: 11px; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden;
}
/* Семантическая палитра: 5 цветов с понятным значением */
/* План — обычная задача (большинство) */
.gb-plan {
  background: linear-gradient(180deg, #3B82F6, #2563EB);
}
/* Сделано — уже выполненный сегмент (графит, спокойно) */
.gb-done {
  background: linear-gradient(180deg, #475569, #334155);
  color: #CBD5E1;
}
/* Сейчас — текущая операция (teal с лёгким glow) */
.gb-now {
  background: linear-gradient(180deg, #14B8A6, #0F9489);
  box-shadow: 0 0 0 1px rgba(20,184,166,0.4), 0 0 12px rgba(20,184,166,0.4);
  position: absolute; z-index: 2;
}
/* Срочно — приоритетный заказ (красный, привлекает внимание) */
.gb-urgent {
  background: linear-gradient(180deg, #DC2626, #B91C1C);
  font-weight: 600;
}
/* Наладка — переналадка/подготовка (янтарный, короткие сегменты) */
.gb-setup {
  background: linear-gradient(180deg, #F59E0B, #D97706);
  font-size: 10px;
}

.gantt-now {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--err);
  box-shadow: 0 0 0 4px rgba(220,38,38,.1);
}

/* --- Logos strip --- */
.logos-strip {
  padding: var(--s-12) 0;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}
.logos-title {
  text-align: center; font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: var(--s-6); font-family: var(--font-mono);
}
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--s-8) var(--s-10);
  align-items: center; justify-items: center;
}
.logo-item {
  font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-400); font-size: 15px;
  white-space: nowrap; opacity: .7; transition: opacity .2s, color .2s;
}
.logo-item:hover { color: var(--ink-800); opacity: 1; }
.logo-item--serif { font-family: Georgia, serif; font-style: italic; }
.logo-item--mono { font-family: var(--font-mono); font-weight: 500; }
.logo-item--cond { letter-spacing: 0.1em; text-transform: uppercase; font-size: 13px; }

/* --- Pain cards --- */
.pain-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .pain-grid { grid-template-columns: 1fr; } }
.pain {
  padding: var(--s-8);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  transition: all .2s var(--ease);
}
.pain:hover { border-color: var(--ink-300); box-shadow: var(--sh-md); transform: translateY(-2px); }
.pain-num {
  font-family: var(--font-mono); font-size: 12px; color: var(--blue-600); margin-bottom: 12px;
}
.pain h3 { margin-bottom: var(--s-3); font-size: 20px; }

/* --- Ladder (SCADA → MES → APS) --- */
.ladder {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  margin-top: var(--s-10); position: relative;
}
.ladder--2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
@media (max-width: 800px) { .ladder, .ladder--2 { grid-template-columns: 1fr; } }
.ladder-step {
  padding: var(--s-8); border-radius: var(--r-lg);
  background: var(--paper-00); border: 1px solid var(--ink-100);
  position: relative;
}
.ladder-step::after {
  content: '→'; position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  font-size: 24px; color: var(--ink-300); z-index: 2;
}
.ladder-step:last-child::after { display: none; }
@media (max-width: 800px) { .ladder-step::after { display: none; } }
.ladder-step-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400); margin-bottom: var(--s-2);
}
.ladder-step h3 {
  font-size: 26px; margin-bottom: var(--s-2);
}
.ladder-step-sub {
  font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-4);
}
.ladder-step-desc { font-size: var(--fs-sm); color: var(--ink-700); margin-bottom: var(--s-6); }
.section--dark .ladder-step { color: var(--ink-800); }
.section--dark .ladder-step h3 { color: var(--ink-900); }
.section--dark .ladder-step .ladder-step-desc { color: var(--ink-700); }
.ladder-link {
  font-weight: 600; font-size: var(--fs-sm); color: var(--blue-600);
  display: inline-flex; align-items: center; gap: 6px;
}
.ladder-link:hover { text-decoration: underline; }

/* --- Product cards --- */
.products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .products-grid { grid-template-columns: 1fr; } }
.product-card {
  background: var(--paper-00); border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  overflow: hidden; transition: all .2s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--blue-300); }
.product-visual {
  aspect-ratio: 16/10;
  background: var(--ink-900);
  position: relative; overflow: hidden;
}
.product-body { padding: var(--s-6); }
.product-card h3 { margin-bottom: var(--s-3); }
.product-card ul { list-style: none; margin: var(--s-4) 0; }
.product-card li {
  position: relative; padding-left: 22px; font-size: var(--fs-sm);
  color: var(--ink-700); margin-bottom: 8px;
}
.product-card li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 12px; height: 2px; background: var(--blue-600);
}

/* --- Tiny dashboard mockup (for SCADA card) --- */
.mini-dash {
  padding: 16px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; height: 100%;
  font-family: var(--font-mono);
}
.mini-tile {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mini-tile-num { font-size: 13px; color: #fff; font-weight: 600; }
.mini-tile-lbl { font-size: 9px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .1em; }
.mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.mini-dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.mini-dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,.15); }
.mini-dot--err { background: var(--err); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

/* --- Kiosk mockup --- */
.kiosk-mock {
  padding: 20px; height: 100%;
  display: flex; flex-direction: column; gap: 12px; color: #fff;
  background: linear-gradient(135deg, #141C2E, #0B1220);
}
.kiosk-hdr { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); text-transform: uppercase; letter-spacing: .1em; }
.kiosk-order { font-size: 11px; color: var(--ink-300); }
.kiosk-title { font-size: 17px; font-weight: 600; }
.kiosk-meta { display: flex; gap: 10px; font-size: 10px; color: var(--ink-400); font-family: var(--font-mono); }
.kiosk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.kiosk-btn {
  border-radius: 6px; padding: 12px; text-align: center; font-size: 12px; font-weight: 600;
}
.kiosk-btn--go { background: var(--ok); color: #fff; }
.kiosk-btn--stop { background: var(--err); color: #fff; }

/* --- Openness diagram --- */
.open-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .open-grid { grid-template-columns: 1fr; } }
.open-layer {
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.open-layer-n {
  font-family: var(--font-mono); font-size: 48px; font-weight: 700;
  background: linear-gradient(180deg, var(--blue-300), var(--blue-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
  margin-bottom: var(--s-4);
}
.open-layer h3 { color: #fff; margin-bottom: var(--s-3); font-size: 22px; }
.open-layer p { color: var(--ink-300); font-size: var(--fs-sm); }

/* --- Integrations grid --- */
.integ-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--ink-100); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); overflow: hidden;
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .integ-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .integ-grid { grid-template-columns: repeat(2, 1fr); } }
.integ-cell {
  background: #fff; padding: var(--s-6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: var(--fs-sm);
  text-align: center; color: var(--ink-700);
  transition: background .15s;
  min-height: 110px;
}
.integ-cell:hover { background: var(--paper-50); color: var(--ink-900); }
.integ-cell-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--blue-600); }
.integ-cell-dot--soft { background: var(--ink-300); }
.integ-cell-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
  padding: 3px 7px; border: 1px solid var(--ink-200); border-radius: 3px;
  margin-top: 2px;
}

/* --- Integrations · grouped pill layout --- */
.integ-groups {
  margin-top: var(--s-10);
  display: flex; flex-direction: column; gap: var(--s-8);
}
.integ-group {
  display: grid; grid-template-columns: 160px 1fr;
  gap: var(--s-6); align-items: start;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--ink-100);
}
.integ-group:first-child { border-top: none; padding-top: 0; }
.integ-group-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-600); font-weight: 600;
  padding-top: 12px;
}
.integ-group-list {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.integ-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: #fff; border: 1px solid var(--ink-100);
  border-radius: 999px;
  font-size: 16px; font-weight: 500; color: var(--ink-800);
  transition: border-color .15s, transform .15s, background .15s;
}
.integ-pill:hover {
  border-color: var(--blue-600); background: var(--blue-50);
  transform: translateY(-1px);
}
.integ-pill--soft {
  background: var(--paper-50); color: var(--ink-700);
  border-style: dashed;
}
.integ-pill--proto {
  background: var(--ink-900); color: #fff; border-color: var(--ink-900);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .03em;
}
.integ-pill--proto:hover { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.integ-pill-tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500);
  padding: 3px 7px; border: 1px solid var(--ink-200); border-radius: 3px;
  background: #fff;
}
.integ-pill--more {
  background: transparent; color: var(--ink-500);
  border-style: dashed; border-color: var(--ink-200);
  font-size: 13px; font-style: italic;
  cursor: default;
}
.integ-pill--more:hover {
  background: transparent; border-color: var(--ink-200);
  color: var(--ink-500);
  transform: none;
}

@media (max-width: 900px) {
  .integ-group { grid-template-columns: 1fr; gap: var(--s-3); }
  .integ-group-title { padding-top: 0; }
}

/* --- Industries plates --- */
.ind-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--ink-100); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); overflow: hidden;
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
.ind-cell {
  background: #fff; padding: var(--s-8) var(--s-6);
  transition: background .15s;
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-4);
  min-height: 150px;
}
.ind-cell:hover { background: var(--ink-900); color: #fff; }
.ind-cell:hover .ind-cell-arr { color: var(--blue-300); transform: translateX(4px); }
.ind-cell-icon {
  width: 32px; height: 32px; color: var(--blue-600);
}
.ind-cell:hover .ind-cell-icon { color: var(--blue-300); }
.ind-cell h4 { font-size: 17px; font-weight: 600; }
.ind-cell-arr { margin-top: auto; transition: all .15s; color: var(--ink-400); font-size: 20px; }

/* --- Metrics wall --- */
.metrics-wall {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .metrics-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .metrics-wall { grid-template-columns: repeat(2, 1fr); } }
.metric {
  padding: var(--s-8) var(--s-6);
  border-right: 1px solid rgba(255,255,255,.08);
}
.metric:last-child { border-right: 0; }
.metric-big {
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 700;
  background: linear-gradient(180deg, #fff, var(--ink-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: var(--s-3);
}
.metric-label { font-size: var(--fs-sm); color: var(--ink-300); margin-bottom: 6px; }
.metric-src { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }

/* --- Case cards --- */
.cases-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .cases-grid { grid-template-columns: 1fr; } }
.case-card {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .2s var(--ease);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.case-visual {
  aspect-ratio: 16/10; position: relative;
  background: var(--ink-900);
  overflow: hidden;
}
.case-body { padding: var(--s-6); flex: 1; display: flex; flex-direction: column; }
.case-client {
  font-size: var(--fs-xs); color: var(--ink-500); font-family: var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.case-metric {
  font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
  margin-bottom: var(--s-3);
}
.case-desc { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-6); flex: 1; }
.case-link { font-weight: 600; color: var(--blue-600); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.case-link:hover { text-decoration: underline; }

/* NDA-карточка кейса (заглушка-«раскрытие по запросу») */
.case-card--nda .case-visual::after {
  content: "ПОД NDA";
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .12em; color: rgba(255,255,255,.85);
  padding: 4px 8px; border: 1px solid rgba(255,255,255,.25);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.05);
}

/* --- Video block --- */
.video-wrap {
  margin-top: var(--s-10);
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-900);
  aspect-ratio: 16/9;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.video-play {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
  transition: transform .2s;
}
.video-wrap:hover .video-play { transform: scale(1.05); }
.video-meta {
  position: absolute; bottom: var(--s-6); left: var(--s-6);
  color: #fff; font-family: var(--font-mono); font-size: var(--fs-sm);
  padding: 6px 10px; background: rgba(0,0,0,.4); border-radius: 4px;
  backdrop-filter: blur(8px);
}

/* --- Compare table --- */
.compare-table {
  margin-top: var(--s-10); width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md); overflow: hidden;
}
.compare-table th, .compare-table td {
  padding: 18px 20px; text-align: left; font-size: 15px; line-height: 1.5;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: top;
}
.compare-table th {
  background: var(--ink-900); color: #fff; font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--font-mono);
  padding: 14px 20px;
}
.compare-table th:first-child {
  background: var(--paper-50); color: var(--ink-700);
}
.compare-table td:nth-child(2) {
  background: var(--blue-50);
  border-left: 3px solid var(--blue-600);
}
.compare-table td:nth-child(3) {
  border-left: 3px solid var(--ink-200);
}
.compare-table td:first-child {
  border-left: none;
}
.compare-table tr:last-child td { border-bottom: 0; }

/* Иконки оценок · перед текстом */
.compare-yes, .compare-no, .compare-partial {
  font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.compare-yes { color: var(--ok); }
.compare-no { color: var(--ink-500); font-weight: 500; }
.compare-partial { color: var(--warn); }
.compare-yes::before {
  content: "✓"; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok); color: #fff; font-size: 11px; font-weight: 700;
  margin-top: 2px;
}
.compare-no::before {
  content: "—"; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-200); color: var(--ink-600); font-size: 14px; font-weight: 700;
  margin-top: 2px;
}
.compare-partial::before {
  content: "~"; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--warn); color: #fff; font-size: 12px; font-weight: 700;
  margin-top: 2px;
}

/* Дисклеймер */
.compare-disclaimer {
  margin-top: var(--s-10);
  padding: var(--s-6) var(--s-8);
  background: var(--paper-50);
  border-left: 3px solid var(--ink-300);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px; line-height: 1.6;
  color: var(--ink-600);
}
.compare-disclaimer-title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-700); margin-bottom: var(--s-3);
}
.compare-disclaimer a { color: var(--blue-600); }

/* --- Resources --- */
.res-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .res-grid { grid-template-columns: 1fr; } }
.res-card {
  background: #fff; border: 1px solid var(--ink-100); border-radius: var(--r-md);
  padding: var(--s-6); transition: all .15s; display: flex; flex-direction: column;
}
.res-card:hover { border-color: var(--blue-300); box-shadow: var(--sh-sm); }
.res-kind {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--blue-600);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.res-card h4 { margin-bottom: var(--s-3); line-height: 1.3; }
.res-meta { font-size: var(--fs-sm); color: var(--ink-500); margin-top: auto; }

/* --- Final CTA --- */
.final-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .final-cta { grid-template-columns: 1fr; } }
.cta-card {
  padding: var(--s-10);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--ink-100);
}
.cta-card--dark {
  background: var(--ink-900); color: #fff;
  border-color: var(--ink-800);
  position: relative; overflow: hidden;
}
.cta-card--dark::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(37,99,235,.25), transparent 60%);
  pointer-events: none;
}
.cta-card h3 { margin-bottom: var(--s-3); position: relative; }
.cta-card p { margin-bottom: var(--s-6); position: relative; }
.cta-card--dark p { color: var(--ink-300); }
.cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.input {
  padding: 12px 14px; background: var(--paper-50);
  border: 1px solid var(--ink-100); border-radius: var(--r-sm);
  font-size: var(--fs-sm); transition: border-color .15s;
}
.cta-card--dark .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff; }
.cta-card--dark .input::placeholder { color: var(--ink-400); }
.input:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* --- Footer --- */
.footer {
  background: var(--ink-900); color: var(--ink-300);
  padding: var(--s-8) 0 var(--s-5);
  position: relative; overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.footer-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5);
  margin-bottom: var(--s-5);
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand-block {
  display: flex; flex-direction: column;
}
.footer-brand { margin-bottom: var(--s-2); color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.footer-tag { font-size: 12px; color: var(--ink-400); max-width: 30ch; line-height: 1.4; }
.footer-col-title {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-200); margin-bottom: var(--s-2); font-family: var(--font-mono);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.footer-col a { color: var(--ink-400); font-size: 12px; line-height: 1.25; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-4);
  font-size: var(--fs-xs); color: var(--ink-300); font-family: var(--font-mono);
  position: relative;
}
.footer-bottom a:hover { color: #fff; }
.footer-bottom::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--teal-500);
  border-radius: 1px;
}

/* --- Page intro (non-hero pages) --- */
.page-intro {
  padding: var(--s-20) 0 var(--s-16);
  background: var(--ink-900); color: #fff;
  position: relative; overflow: hidden;
}
.page-intro::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, #000 20%, transparent 70%);
}
.page-intro-inner { position: relative; z-index: 1; max-width: 900px; }
.breadcrumb {
  display: flex; gap: 8px; align-items: center;
  font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--ink-300);
  margin-bottom: var(--s-6); text-transform: uppercase; letter-spacing: .1em;
}
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: var(--ink-600); }
.page-intro h1 { color: #fff; margin-bottom: var(--s-4); }
.page-intro .lede { color: var(--ink-200); }

/* О ТАП — декор справа в hero */
.about-hero .container { position: relative; }
.about-hero .page-intro-inner { max-width: 680px; }
.about-hero-deco {
  position: absolute; right: 0; top: 20px;
  width: 540px; height: 460px; pointer-events: none;
  opacity: .92;
}
@media (max-width: 1280px) {
  .about-hero .page-intro-inner { max-width: 580px; }
  .about-hero-deco { width: 460px; height: 400px; right: 16px; }
}
@media (max-width: 1100px) {
  .about-hero .page-intro-inner { max-width: 100%; }
  .about-hero-deco { display: none; }
}

/* О ТАП — таймлайн */
.timeline {
  margin-top: var(--s-10);
  padding: var(--s-6) 0;
}
.timeline-svg { width: 100%; height: auto; display: block; }
@media (max-width: 800px) {
  .timeline-svg { min-width: 720px; }
  .timeline { overflow-x: auto; }
}

/* О ТАП — Venn компетенций */
.competence-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-12);
  align-items: center; margin-top: var(--s-10);
}
.competence-venn { width: 100%; max-width: 520px; }
.competence-venn svg { width: 100%; height: auto; display: block; }
.competence-text p { font-size: 17px; margin-bottom: var(--s-4); line-height: 1.55; }
.competence-text p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .competence-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .competence-venn { max-width: 420px; margin: 0 auto; }
}

/* --- Section heading pattern --- */
.sh { max-width: 800px; margin-bottom: var(--s-6); }
.sh h2 { margin-bottom: var(--s-3); }
.sh p { font-size: var(--fs-h4); color: var(--ink-600); max-width: 60ch; }

/* --- Two col (generic) --- */
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: start; }
@media (max-width: 900px) { .twocol { grid-template-columns: 1fr; gap: var(--s-8); } }

/* --- FAQ --- */
.faq {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--s-12);
}
.faq-item {
  border-bottom: 1px solid var(--ink-100);
  padding: var(--s-6) 0;
}
.faq-item h4 { font-size: 18px; margin-bottom: var(--s-3); }
.faq-item p { font-size: 15px; line-height: 1.55; color: var(--ink-700); }
@media (max-width: 900px) {
  .faq { grid-template-columns: 1fr; }
}

/* --- Feature grid (product page) --- */
.feat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
.feat-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .feat-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  padding: var(--s-6); background: var(--paper-00);
  border: 1px solid var(--ink-100); border-radius: var(--r-md);
}
.feat-num { font-family: var(--font-mono); font-size: 11px; color: var(--blue-600); margin-bottom: var(--s-3); }
.feat h4 { font-size: 17px; margin-bottom: var(--s-2); }
.feat p { font-size: var(--fs-sm); color: var(--ink-500); }

/* --- Screens gallery --- */
.screens {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .screens { grid-template-columns: 1fr; } }
.screen {
  background: var(--ink-900); border-radius: var(--r-lg);
  overflow: hidden; aspect-ratio: 4/3;
  position: relative;
  border: 1px solid var(--ink-100);
}
.screen-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-6); z-index: 2; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}
.screen-caption h4 { color: #fff; margin-bottom: 4px; }
.screen-caption p { color: var(--ink-200); font-size: var(--fs-sm); }

/* --- Dashboard mockup (bigger, for MES product visual) --- */
.dash-mock {
  padding: 20px; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #141C2E, #0B1220);
  color: #fff;
}
.dash-hdr {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-300);
}
.dash-tabs { display: flex; gap: 8px; }
.dash-tab {
  padding: 3px 8px; border-radius: 4px; font-size: 10px;
  background: rgba(255,255,255,.06); color: var(--ink-300);
}
.dash-tab.is-active { background: var(--blue-600); color: #fff; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; }
.dash-col { display: flex; flex-direction: column; gap: 6px; }
.dash-stat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 10px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.dash-stat-lbl { font-size: 10px; color: var(--ink-400); }
.dash-stat-val { font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.dash-stat-val--ok { color: var(--ok); }
.dash-stat-val--warn { color: var(--warn); }
.dash-chart {
  flex: 1; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 8px;
  position: relative;
}

/* --- Cost page --- */
.cost-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 900px) { .cost-grid { grid-template-columns: 1fr; } }
.cost-card {
  padding: var(--s-8); border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--ink-100);
  display: flex; flex-direction: column;
}
.cost-card--feat {
  background: var(--ink-900); color: #fff;
  border-color: var(--ink-800);
  position: relative;
}
.cost-card--feat::before {
  content: 'РЕКОМЕНДУЕМ'; position: absolute; top: -12px; right: 16px;
  background: var(--blue-600); color: #fff;
  font-size: 10px; font-family: var(--font-mono); letter-spacing: .1em;
  padding: 4px 10px; border-radius: 4px;
}
.cost-title { font-size: 14px; font-weight: 600; margin-bottom: var(--s-3); color: var(--blue-600); font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.cost-card--feat .cost-title { color: var(--blue-300); }
.cost-price { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--s-2); line-height: 1; }
.cost-note { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-6); }
.cost-card--feat .cost-note { color: var(--ink-300); }
.cost-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--s-8); flex: 1; }
.cost-feats li { position: relative; padding-left: 22px; font-size: var(--fs-sm); }
.cost-feats li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 2px;
  background: var(--blue-600);
}

/* --- About / Team --- */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-item { border-left: 2px solid var(--blue-600); padding-left: var(--s-4); }
.stat-big { font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.stat-lbl { font-size: var(--fs-sm); color: var(--ink-500); }

/* --- Case-detail --- */
.case-hero-stat {
  font-size: clamp(48px, 6vw, 88px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(180deg, #fff, var(--blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: var(--s-4);
}
.case-meta-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6);
  padding: var(--s-8) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-top: var(--s-10);
}
@media (max-width: 700px) { .case-meta-row { grid-template-columns: repeat(2, 1fr); } }
.case-meta-item .mono { font-size: 11px; color: var(--ink-400); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.case-meta-item-val { color: #fff; font-weight: 600; }

.metric-table {
  margin-top: var(--s-10); width: 100%; border-collapse: collapse;
}
.metric-table th, .metric-table td {
  padding: 16px; text-align: left; border-bottom: 1px solid var(--ink-100);
  font-size: var(--fs-body);
}
.metric-table th { font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }
.metric-table td:nth-child(4) { font-weight: 700; color: var(--blue-600); }

.quote-block {
  padding: var(--s-10); background: var(--paper-50);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--r-md);
  margin-top: var(--s-10);
}
.quote-text { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; margin-bottom: var(--s-4); color: var(--ink-900); font-weight: 500; }
.quote-author { font-size: var(--fs-sm); color: var(--ink-500); }
.quote-author b { color: var(--ink-900); font-weight: 600; }

/* --- Fade-in animation --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .7s var(--ease) both; }
.d-1 { animation-delay: .05s; }
.d-2 { animation-delay: .12s; }
.d-3 { animation-delay: .19s; }
.d-4 { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* === GATE-МОДАЛКА ДЛЯ ЛИД-МАГНИТОВ === */
.gate-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11, 18, 32, .72);
  backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: var(--s-6);
}
.gate-overlay.is-open { display: flex; }
.gate-modal {
  background: #fff; border-radius: var(--r-lg);
  max-width: 520px; width: 100%;
  max-height: calc(100vh - 80px); overflow-y: auto;
  padding: var(--s-10);
  position: relative;
  box-shadow: 0 20px 60px rgba(11, 18, 32, .35);
}
.gate-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--paper-50); border: none; cursor: pointer;
  font-size: 20px; color: var(--ink-700); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.gate-close:hover { background: var(--ink-100); }
.gate-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--blue-600); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.gate-modal h3 { font-size: 22px; margin-bottom: var(--s-2); line-height: 1.25; }
.gate-modal p.gate-lead { font-size: var(--fs-sm); color: var(--ink-500); margin-bottom: var(--s-6); }
.gate-form { display: flex; flex-direction: column; gap: var(--s-4); }
.gate-field { display: flex; flex-direction: column; gap: 6px; }
.gate-field label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--ink-700); letter-spacing: .08em; text-transform: uppercase;
}
.gate-field input {
  padding: 12px 14px; border: 1px solid var(--ink-200);
  border-radius: var(--r-sm); font-size: 15px; font-family: inherit;
  background: #fff; color: var(--ink-900);
  transition: border-color .15s;
}
.gate-field input:focus { outline: none; border-color: var(--blue-600); }
.gate-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--ink-600); line-height: 1.5;
  margin-top: var(--s-2);
}
.gate-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.gate-consent a { color: var(--blue-600); text-decoration: underline; }
.gate-submit {
  margin-top: var(--s-3);
  padding: 14px 20px; background: var(--blue-600); color: #fff;
  border: none; border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.gate-submit:hover { background: var(--blue-700); }
.gate-success { display: none; text-align: center; padding: var(--s-6) 0; }
.gate-success.is-shown { display: block; }
.gate-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(34, 197, 94, .12); color: #16A34A;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-4); font-size: 28px;
}
.gate-success h3 { margin-bottom: var(--s-2); }
.gate-success p { color: var(--ink-500); font-size: var(--fs-sm); }

/* Развилка по стадиям на главной */
.stage-fork {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4);
  margin-top: var(--s-10);
}
@media (max-width: 800px) { .stage-fork { grid-template-columns: 1fr; } }
.stage-card {
  display: flex; align-items: flex-start; gap: var(--s-6);
  padding: var(--s-8); border-radius: var(--r-lg);
  background: var(--paper-00); border: 1px solid var(--ink-100);
  transition: all .2s var(--ease);
  position: relative; text-decoration: none; color: inherit;
}
.stage-card:hover { border-color: var(--blue-600); transform: translateY(-2px); box-shadow: var(--sh-md); }
.stage-card-num {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0; width: 96px;
}
.stage-card-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--blue-600); letter-spacing: .12em; line-height: 1;
  text-transform: uppercase;
}
.stage-card-no {
  font-family: var(--font-mono); font-size: 32px; font-weight: 700;
  color: var(--blue-600); line-height: 1;
}
.stage-card-text { flex: 1; min-width: 0; }
.stage-card-text h3 { font-size: 18px; margin-bottom: 8px; line-height: 1.3; }
.stage-card-text p { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.stage-card-link {
  display: inline-block; margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--blue-600); letter-spacing: .05em;
}
.stage-card-link:hover {
  text-decoration: underline;
}
.stage-card:hover .stage-card-link { color: var(--blue-700); }
@media (max-width: 700px) {
  .stage-card { flex-direction: column; gap: var(--s-3); }
  .stage-card-num { flex-direction: row; align-items: baseline; width: auto; }
}

/* Тех-факты на продуктовых страницах */
.tech-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--ink-100); border: 1px solid var(--ink-100);
  border-radius: var(--r-md); overflow: hidden;
  margin-top: var(--s-10);
}
@media (max-width: 1000px) { .tech-facts { grid-template-columns: repeat(2, 1fr); } }
.tech-fact {
  background: #fff; padding: var(--s-6) var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.tech-fact-num {
  font-family: var(--font-mono); font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink-900);
}
.tech-fact-lbl { font-size: 13px; color: var(--ink-500); }
.section--dark .tech-facts { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.08); }
.section--dark .tech-fact { background: var(--ink-900); }
.section--dark .tech-fact-num { color: #fff; }
.section--dark .tech-fact-lbl { color: var(--ink-300); }

/* Список «директив» / возможностей с малым визуальным весом */
.list-detailed {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-8);
  margin-top: var(--s-6);
}
@media (max-width: 700px) { .list-detailed { grid-template-columns: 1fr; } }
.list-detailed > div {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-100);
  font-size: var(--fs-sm);
}
.list-detailed-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--blue-600);
  min-width: 56px; padding-top: 2px;
}

/* Methodology / steps */
.method-steps {
  display: flex; flex-direction: column; gap: var(--s-4);
  margin-top: var(--s-10);
}
.method-step {
  display: grid; grid-template-columns: 80px 1fr 80px; gap: var(--s-6);
  padding: var(--s-6); background: var(--paper-00);
  border: 1px solid var(--ink-100); border-radius: var(--r-md);
  align-items: start;
}
@media (max-width: 700px) {
  .method-step { grid-template-columns: 60px 1fr; }
  .method-step-icon { display: none; }
}
.method-step-num {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  color: var(--blue-600); line-height: 1;
}
.method-step h4 { font-size: 18px; margin-bottom: 8px; }
.method-step p { font-size: var(--fs-sm); color: var(--ink-600); margin-bottom: 6px; }
.method-step-meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-500);
  letter-spacing: .05em; text-transform: uppercase;
}
.method-step-icon {
  width: 80px; height: 80px;
  border-radius: var(--r-md);
  background: var(--ink-900);
  color: var(--teal-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: center;
}
.method-step-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* === SCADA — мнемосхема цеха === */
.scada-mneme {
  margin-top: var(--s-10);
  background: #0B1220;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  overflow-x: auto;
  border: 1px solid rgba(147,197,253,.12);
}
.scada-mneme svg { width: 100%; height: auto; display: block; min-width: 900px; }

/* === Кейс — схема архитектуры === */
.case-arch {
  margin-top: var(--s-8);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  overflow-x: auto;
}
.case-arch svg { width: 100%; height: auto; display: block; min-width: 720px; }

/* === Лид-магниты · сетка 2×2 === */
.magnets-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--s-6);
}
@media (max-width: 900px) {
  .magnets-grid { grid-template-columns: 1fr !important; }
}

/* === Документация · 8 документов с иконками === */
.docs-grid {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4) var(--s-8);
}
.docs-item {
  display: grid; grid-template-columns: 40px 1fr;
  gap: var(--s-5); align-items: start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--ink-100);
}
.docs-icon {
  width: 32px; height: 40px;
  color: var(--blue-600);
  flex-shrink: 0;
}
.docs-body { padding-top: 2px; }
.docs-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-600); letter-spacing: .12em;
  margin-bottom: 6px;
}
.docs-title {
  font-size: 17px; font-weight: 600;
  color: var(--ink-900); line-height: 1.35;
  margin-bottom: 4px;
}
.docs-desc {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.5;
}
@media (max-width: 900px) {
  .docs-grid { grid-template-columns: 1fr; }
}

/* === Эталонные диапазоны эффектов — горизонтальные шкалы === */
.range-board {
  margin-top: var(--s-10);
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.range-board-head {
  display: grid; grid-template-columns: 1.4fr 2fr 1.4fr;
  gap: var(--s-6);
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--ink-100);
}
.range-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500); letter-spacing: .08em;
}
.range-row {
  display: grid; grid-template-columns: 1.4fr 2fr 1.4fr;
  gap: var(--s-6); align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--ink-100);
}
.range-row:last-child { border-bottom: none; }
.range-label { font-size: 14px; line-height: 1.4; color: var(--ink-800); }
.range-bar {
  position: relative; height: 24px;
  background: var(--paper-50); border-radius: 4px;
  border: 1px solid var(--ink-100);
}
.range-bar-tick {
  position: absolute; top: 4px; bottom: 4px; width: 1px;
  background: var(--ink-200);
}
.range-bar-fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(37,99,235,.7), rgba(37,99,235,.95));
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  min-width: 14px;
}
.range-bar-fill--soft { background: linear-gradient(90deg, rgba(37,99,235,.5), rgba(37,99,235,.85)); }
.range-bar-val {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: #fff; letter-spacing: .03em;
  white-space: nowrap;
}
.range-bar-val--outside {
  position: absolute; left: calc(100% + 8px);
  color: var(--blue-700);
}
.range-source {
  font-size: 14px; color: var(--ink-600); line-height: 1.45;
}
@media (max-width: 900px) {
  .range-board-head, .range-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .range-board-head { display: none; }
}

/* === MES — псевдоэкран чертежа === */
.mes-blueprint {
  background: #0B1220; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 16px 40px rgba(11,18,32,.18);
}
.mes-blueprint-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #1F2937;
}
.mes-blueprint-dot { width: 10px; height: 10px; border-radius: 50%; }
.mes-blueprint-path {
  margin-left: 12px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-300); letter-spacing: .04em;
}
.mes-blueprint-svg { width: 100%; height: auto; display: block; }

/* === MINI-GANTT справа от 11 этапов === */
.method-cycle {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8); margin-top: var(--s-10);
  align-items: stretch;
}
.method-cycle .method-steps { margin-top: 0; }
.method-gantt-wrap {
  position: relative;
  height: 100%;
}
.method-gantt {
  position: sticky; top: 96px;
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.method-gantt-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--blue-600); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.method-gantt-svg { width: 100%; height: auto; display: block; }
.g-bar { transition: opacity .2s, filter .2s; }
.method-cycle.is-highlighted .g-bar { opacity: .25; }
.method-cycle.is-highlighted .g-bar.is-active { opacity: 1; filter: drop-shadow(0 0 4px rgba(37,99,235,.5)); }
.method-step { transition: border-color .2s, background .2s; }
.method-step:hover { border-color: var(--blue-300); background: var(--blue-50); }

@media (max-width: 1100px) {
  .method-cycle { grid-template-columns: 1fr; }
  .method-gantt { position: static; }
}


/* === MES · Сбор данных с ЧПУ-оборудования === */
.datasource-bus {
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
.datasource-bus-row {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.datasource-card {
  flex: 1 1 180px;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-sm);
}
.datasource-card-name {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--blue-700);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.datasource-card-meta {
  font-size: 12px; color: var(--ink-500);
  line-height: 1.4;
}

/* Мнемосхема цеха */
.shopfloor-card {
  margin-top: var(--s-6);
  padding: var(--s-6);
  background: var(--ink-900);
  border-radius: var(--r-md);
  color: var(--ink-100);
}
.shopfloor-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.shopfloor-title {
  font-size: 16px; font-weight: 600; color: #fff;
}
.shopfloor-time {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400); letter-spacing: .04em;
}
.shopfloor-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
@media (max-width: 800px) { .shopfloor-grid { grid-template-columns: 1fr; } }
.machine {
  padding: var(--s-4);
  border-radius: var(--r-sm);
  border-left: 3px solid;
  background: rgba(255,255,255,.04);
}
.machine-name {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--ink-400);
  margin-bottom: 6px;
}
.machine-state {
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.machine-op {
  font-size: 14px; color: #fff;
  margin-bottom: 4px;
}
.machine-prog {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-300);
}
.machine--run    { border-color: #16a34a; }
.machine--run    .machine-state { color: #4ade80; }
.machine--setup  { border-color: #f59e0b; }
.machine--setup  .machine-state { color: #fbbf24; }
.machine--idle   { border-color: #64748b; }
.machine--idle   .machine-state { color: #94a3b8; }
.machine--alarm  { border-color: #dc2626; }
.machine--alarm  .machine-state { color: #f87171; }

.shopfloor-legend {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: var(--s-5);
  font-size: 12px; color: var(--ink-400);
}
.legend-mark {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.legend-mark--run   { background: #16a34a; }
.legend-mark--setup { background: #f59e0b; }
.legend-mark--idle  { background: #64748b; }
.legend-mark--alarm { background: #dc2626; }

/* === Карточка сертификата 1С === */
.cert-card {
  background: linear-gradient(180deg, rgba(255,213,0,.08), rgba(255,213,0,.03));
  border: 1px solid rgba(255,213,0,.3);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  position: relative; overflow: hidden;
}
.cert-card::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,213,0,.1) 0%, transparent 70%);
}
.cert-card-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 36px;
  background: #FFD500; color: #000;
  font-family: var(--font-mono); font-weight: 700; font-size: 22px;
  letter-spacing: -0.04em;
  border-radius: 4px;
  margin-bottom: var(--s-3);
}
.cert-card-stamp {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: #FFE066; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.cert-card-line {
  width: 40px; height: 2px;
  background: #FFD500;
  margin-bottom: var(--s-4);
}
.cert-card-title {
  font-size: 22px; font-weight: 600; color: #fff;
  margin-bottom: 6px;
}
.cert-card-sub {
  font-size: 14px; color: var(--ink-300);
  margin-bottom: var(--s-6);
}
.cert-card-meta {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.08);
}
.cert-card-meta > div {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.cert-card-meta span {
  color: var(--ink-400);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.cert-card-meta b {
  color: #fff; font-weight: 500;
  font-family: var(--font-mono);
}

/* === Connector grid === */
.connector-grid {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.connector-card {
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
.connector-card-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-600); letter-spacing: .12em;
  margin-bottom: 8px;
}
.connector-card-arrow {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  background: var(--blue-50); color: var(--blue-700);
  padding: 4px 10px; border-radius: 3px;
  margin-bottom: var(--s-4);
}
.connector-card h3 {
  font-size: 18px; margin-bottom: var(--s-2);
}
.connector-card p {
  font-size: 14px; color: var(--ink-600); line-height: 1.5;
  max-width: none;
}
@media (max-width: 800px) {
  .connector-grid { grid-template-columns: 1fr; }
}

/* === Мифы — accordion === */
.myth-list {
  margin-top: var(--s-10);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.myth {
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  overflow: hidden;
}
.myth summary {
  cursor: pointer;
  padding: var(--s-5) var(--s-6);
  display: flex; align-items: baseline; gap: var(--s-4);
  list-style: none;
  position: relative;
  user-select: none;
}
.myth summary::-webkit-details-marker { display: none; }
.myth summary::after {
  content: '+'; position: absolute; right: var(--s-6); top: 50%;
  transform: translateY(-50%);
  font-size: 22px; color: var(--ink-500);
  font-weight: 300;
  transition: transform .2s;
}
.myth[open] summary::after { content: '−'; }
.myth-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-600); letter-spacing: .12em;
  flex-shrink: 0;
}
.myth-title {
  font-size: 17px; font-weight: 600; color: var(--ink-900);
  padding-right: 40px;
}
.myth-body {
  padding: 0 var(--s-6) var(--s-6);
  border-top: 1px solid var(--ink-100);
  padding-top: var(--s-5);
}
.myth-body p {
  font-size: 15px; color: var(--ink-700);
  margin-bottom: var(--s-4); max-width: 70ch;
}
.myth-body ul {
  margin-bottom: var(--s-4); padding-left: 20px;
}
.myth-body ul li {
  font-size: 15px; color: var(--ink-700);
  margin-bottom: 6px; line-height: 1.5;
}
.myth-body blockquote {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-00);
  border-left: 3px solid var(--blue-600);
  font-size: 15px; color: var(--ink-700);
  font-style: normal; line-height: 1.5;
}
.myth-body blockquote cite {
  display: block; margin-top: var(--s-2);
  font-size: 13px; color: var(--ink-500);
  font-style: normal;
}

/* === Команда (страница team.html — карточки экспертов с фото) === */
.hero--compact { padding: var(--s-12) 0 var(--s-12); }
.hero--compact .hero-text { max-width: 60ch; }
/* Сжать переход между hero--compact и следующей светлой секцией */
.hero--compact + .section:not(.section--dark) { padding-top: var(--s-8); }

.experts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-10);
}
@media (max-width: 900px) {
  .experts-grid { grid-template-columns: 1fr; }
}
.experts-card {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--s-6); align-items: start;
  height: 100%;
}
.experts-photo {
  width: 200px; height: 200px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  position: relative;
}
.experts-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.15);
}
/* Fallback с инициалами на teal-плашке — показывается если img не загрузилось */
.experts-photo--fallback {
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -0.02em;
}
.experts-name {
  font-size: 22px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.experts-role {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--blue-600); letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.experts-quote {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-50);
  border-left: 3px solid var(--blue-600);
  font-size: 15px; color: var(--ink-800);
  font-style: italic; line-height: 1.5;
  font-weight: 500;
}
.experts-bio {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.6; max-width: none;
}
@media (max-width: 600px) {
  .experts-card { grid-template-columns: 1fr; }
  .experts-photo { width: 100%; max-width: 280px; height: 280px; }
  .experts-photo--fallback { font-size: 80px; }
}

/* CTA-карточка в сетке экспертов (Карьера в ТАП) */
.experts-card--cta {
  background: var(--ink-900); color: #fff;
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--s-7);
  border-radius: var(--r-md);
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s var(--ease), background .2s;
}
.experts-card--cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(147,197,253,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top right, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 10%, transparent 70%);
}
.experts-card--cta:hover { background: var(--blue-900); transform: translateY(-2px); }
.experts-card--cta > * { position: relative; z-index: 1; }
.experts-card-cta-icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(147,197,253,.4); color: var(--blue-300);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-4);
}
.experts-card-cta-icon svg { width: 18px; height: 18px; }
.experts-card--cta .experts-name { color: #fff; }
.experts-card--cta .experts-role { color: var(--blue-300); }
.experts-card--cta .experts-bio { color: var(--ink-200); margin-bottom: var(--s-4); }
.experts-card-cta-link {
  margin-top: auto; display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: 600; color: var(--blue-300); letter-spacing: .05em;
}

/* === Статьи · листинг === */
.article-grid {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 800px) { .article-grid { grid-template-columns: 1fr; } }
.article-card {
  display: block;
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.article-card:hover {
  border-color: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,18,32,.06);
}
.article-card--featured {
  background: linear-gradient(180deg, var(--blue-50), var(--paper-00));
  border-color: var(--blue-600);
}
.article-meta {
  display: flex; gap: var(--s-3); align-items: baseline;
  margin-bottom: var(--s-4); flex-wrap: wrap;
}
.article-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); font-weight: 600;
  background: var(--blue-50); padding: 3px 10px; border-radius: 3px;
}
.article-tag--accent { background: var(--blue-600); color: #fff; }
.article-date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500); letter-spacing: .04em;
}
.article-card h3 {
  font-size: 19px; line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}
.article-card p {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.55; margin-bottom: var(--s-4);
  max-width: none;
}
.article-link {
  display: inline-block;
  font-size: 14px; font-weight: 600;
  color: var(--blue-600);
}
.article-link:hover {
  text-decoration: underline;
}

/* === Дзен-CTA === */
.dzen-cta {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--s-8); align-items: center;
  padding: var(--s-10);
  background: linear-gradient(135deg, #FFE066 0%, #FFD500 100%);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.dzen-cta::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.2) 0%, transparent 60%);
}
.dzen-cta-mark {
  width: 200px; height: 200px;
  background: #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.dzen-cta-mark span {
  font-family: var(--font-mono); font-size: 38px; font-weight: 700;
  color: #FFD500; letter-spacing: -0.04em;
}
.dzen-cta-body { position: relative; z-index: 1; max-width: 60ch; }
.dzen-cta-body h3 {
  font-size: 28px; line-height: 1.15;
  color: #000; margin-bottom: var(--s-4);
  letter-spacing: -0.02em;
}
.dzen-cta-body p {
  font-size: 15px; color: rgba(0,0,0,.75);
  line-height: 1.55; max-width: none;
  margin-bottom: var(--s-5);
}
.dzen-cta-body .btn--primary {
  background: #000; color: #FFD500;
  border-color: #000;
}
.dzen-cta-body .btn--primary:hover {
  background: #1a1a1a; color: #FFD500;
}
@media (max-width: 700px) {
  .dzen-cta { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); }
  .dzen-cta-mark { width: 120px; height: 120px; }
  .dzen-cta-mark span { font-size: 24px; }
}

/* === Полная страница статьи === */
.article-page {
  max-width: 760px; margin: 0 auto;
  padding-top: var(--s-12);
}
.article-back {
  display: inline-block;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-500); letter-spacing: .04em;
  margin-bottom: var(--s-6);
  text-decoration: none;
}
.article-back:hover { color: var(--blue-600); }
.article-header {
  margin-bottom: var(--s-10);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--ink-100);
}
.article-header .article-meta { margin-bottom: var(--s-5); }
.article-header h1 {
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  margin-bottom: var(--s-4);
}
.article-lede {
  font-size: 19px; line-height: 1.5;
  color: var(--ink-700);
  margin-bottom: 0;
  max-width: none;
}
.article-body {
  font-size: 17px; line-height: 1.7;
  color: var(--ink-800);
}
.article-body p {
  margin-bottom: var(--s-5);
  max-width: none;
}
.article-body h2 {
  font-size: 26px; line-height: 1.2;
  margin-top: var(--s-12); margin-bottom: var(--s-4);
  color: var(--ink-900);
}
.article-body h3 {
  font-size: 20px; line-height: 1.3;
  margin-top: var(--s-8); margin-bottom: var(--s-3);
  color: var(--ink-900);
}
.article-body ul, .article-body ol {
  margin-bottom: var(--s-5); padding-left: 24px;
}
.article-body li {
  margin-bottom: var(--s-2); line-height: 1.6;
}
.article-body blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--paper-50);
  border-left: 4px solid var(--blue-600);
  font-size: 17px; color: var(--ink-800);
  font-style: italic; line-height: 1.55;
}
.article-body blockquote cite {
  display: block; margin-top: var(--s-3);
  font-size: 14px; color: var(--ink-500);
  font-style: normal;
}
.article-body strong, .article-body b {
  color: var(--ink-900); font-weight: 600;
}
.article-body table {
  width: 100%; border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 14px;
}
.article-body table th, .article-body table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--ink-100);
}
.article-body table th {
  background: var(--paper-50);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-700);
}
.article-body figure {
  margin: var(--s-6) 0;
  text-align: center;
}
.article-body figcaption {
  margin-top: var(--s-2);
  font-size: 13px; color: var(--ink-500); font-style: italic;
}
.article-image {
  width: 100%; border-radius: var(--r-md);
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
}
.article-callout {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--blue-50);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: var(--r-md);
}
.article-callout-title {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-700); letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  margin-bottom: var(--s-2);
}
.article-callout p { margin-bottom: 0 !important; font-size: 15px; }

/* Конец статьи */
.article-end {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--ink-100);
}
.article-canonical {
  margin-top: var(--s-5);
  font-size: 13px; color: var(--ink-500);
  font-family: var(--font-mono);
}
.article-canonical a { color: var(--blue-600); }
.related-articles {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--ink-100);
}
.related-articles h3 {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 600;
  margin-bottom: var(--s-5);
}
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 800px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: block;
  padding: var(--s-5);
  background: var(--paper-50);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background .2s;
}
.related-card:hover { background: var(--ink-100); }
.related-card-title {
  font-size: 14px; font-weight: 600;
  color: var(--ink-900); line-height: 1.35;
}

/* === Цитаты экспертов на главной === */
.quotes-grid {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 900px) { .quotes-grid { grid-template-columns: 1fr; } }
.quote-card {
  margin: 0;
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.quote-card blockquote {
  margin: 0; padding: 0;
  font-size: 17px; line-height: 1.45;
  color: var(--ink-800); font-weight: 500;
  flex: 1;
  position: relative;
  padding-left: 24px;
}
.quote-card blockquote::before {
  content: '"'; position: absolute; left: 0; top: -8px;
  font-family: Georgia, serif;
  font-size: 48px; font-weight: 700;
  color: var(--blue-600); line-height: 1;
}
.quote-card figcaption {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-100);
}
.quote-card figcaption img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(.2);
  flex-shrink: 0;
}
.quote-card figcaption span {
  font-size: 13px; color: var(--ink-600); line-height: 1.35;
}
.quote-card figcaption b {
  display: block;
  color: var(--ink-900); font-weight: 600;
  margin-bottom: 2px;
}

/* === APS · Производительность в реальных проектах === */
.perf-grid {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 800px) { .perf-grid { grid-template-columns: 1fr; } }
.perf-card {
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
.perf-card-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); font-weight: 600;
  margin-bottom: var(--s-2);
}
.perf-card-title {
  font-size: 19px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-5);
  line-height: 1.3;
}
.perf-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.perf-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
  color: var(--ink-700);
}
.perf-table td:last-child {
  text-align: right;
  font-family: var(--font-mono);
}
.perf-table td b {
  color: var(--ink-900); font-weight: 600;
}
.perf-table-hl td {
  border-bottom: none;
  padding-top: var(--s-3);
  border-top: 2px solid var(--blue-600);
  color: var(--ink-900);
}
.perf-table-hl td b {
  color: var(--blue-700); font-size: 18px;
}

/* === VS card (тестовое сравнение) === */
.vs-card {
  margin-top: var(--s-8);
  padding: var(--s-10);
  background: var(--ink-900);
  border-radius: var(--r-lg);
  color: #fff;
  position: relative; overflow: hidden;
}
.vs-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-600), #16a34a);
}
.vs-card-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-300); font-weight: 600;
  margin-bottom: var(--s-6);
}
.vs-row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s-6);
}
@media (max-width: 700px) {
  .vs-row { grid-template-columns: 1fr; gap: var(--s-4); }
}
.vs-col {
  padding: var(--s-5);
  border-radius: var(--r-md);
  text-align: center;
}
.vs-col--us {
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.4);
}
.vs-col--them {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.vs-col-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-300);
  margin-bottom: var(--s-3);
}
.vs-col--us .vs-col-label { color: #4ade80; }
.vs-col-big {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700; line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
  color: #fff;
}
.vs-col-meta {
  font-size: 13px; color: var(--ink-300);
}
.vs-col-divider {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.vs-x {
  font-family: var(--font-mono);
  font-size: 38px; font-weight: 700;
  color: #4ade80; line-height: 1;
  letter-spacing: -0.04em;
}
.vs-x-meta {
  margin-top: 4px;
  font-size: 11px;
  font-family: var(--font-mono); letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.vs-foot {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px; color: var(--ink-200);
}
.vs-plus {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(22,163,74,.2);
  color: #4ade80;
  border-radius: 3px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  margin-right: var(--s-2);
}
.vs-quote {
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--blue-300);
  background: rgba(255,255,255,.04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 15px; color: var(--ink-100);
  font-style: italic; line-height: 1.5;
}
.vs-quote cite {
  display: block; margin-top: var(--s-3);
  font-size: 13px; color: var(--ink-400);
  font-style: normal;
}

/* === Дисциплина === */
.discipline-card {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: auto auto auto 1fr;
  align-items: center; gap: var(--s-6);
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
@media (max-width: 700px) {
  .discipline-card { grid-template-columns: auto auto auto; gap: var(--s-3); }
  .discipline-card-text { grid-column: 1 / -1; margin-top: var(--s-4); }
}
.discipline-card-num {
  text-align: center;
}
.discipline-card-num b {
  display: block;
  font-size: clamp(36px, 3vw, 52px);
  font-weight: 700;
  color: var(--ink-400);
  line-height: 1;
}
.discipline-card-num span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 4px; display: block;
}
.discipline-card-num--good b { color: #16a34a; }
.discipline-card-arrow {
  font-size: 28px;
  color: var(--ink-300);
  font-weight: 300;
}
.discipline-card-text h3 {
  font-size: 19px; margin-bottom: 6px;
  color: var(--ink-900);
}
.discipline-card-text p {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.5; margin: 0;
  max-width: none;
}

/* Featured case (ROI-кейс энергомаш) */
.case-card--featured {
  border: 2px solid var(--blue-600);
  box-shadow: 0 8px 32px rgba(37,99,235,.12);
}
.case-card--featured .case-visual::before {
  content: 'ROI-КЕЙС';
  position: absolute; top: 12px; right: 12px;
  background: var(--blue-600); color: #fff;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; font-weight: 700;
  padding: 4px 10px; border-radius: 3px;
  z-index: 2;
}

/* === SCADA · карточка реестровой записи === */
.reestr-card {
  margin-top: var(--s-10);
  display: grid; grid-template-columns: 120px 1fr;
  gap: var(--s-7); align-items: start;
  padding: var(--s-8);
  background: var(--paper-00);
  border: 1px solid var(--ink-200);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--r-md);
}
@media (max-width: 700px) {
  .reestr-card { grid-template-columns: 1fr; gap: var(--s-5); }
}
.reestr-card-mark {
  width: 100px; height: 100px;
  background: var(--blue-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 38px; font-weight: 700;
  letter-spacing: -0.04em;
  border-radius: var(--r-md);
}
.reestr-card-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); font-weight: 600;
  margin-bottom: var(--s-2);
}
.reestr-card-title {
  font-size: 26px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-5);
  letter-spacing: -0.015em;
}
.reestr-card-meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-100);
}
@media (max-width: 600px) {
  .reestr-card-meta { grid-template-columns: 1fr; }
}
.reestr-card-meta > div {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 14px;
}
.reestr-card-meta span {
  color: var(--ink-500);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
.reestr-card-meta b {
  color: var(--ink-900); font-weight: 500;
}

/* === SCADA · features grid === */
.scada-features {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
@media (max-width: 800px) { .scada-features { grid-template-columns: 1fr; } }
.scada-feature {
  padding: var(--s-7);
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
.scada-feature-num {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--blue-600); letter-spacing: .12em;
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.scada-feature h3 {
  font-size: 18px; margin-bottom: var(--s-2);
  color: var(--ink-900);
}
.scada-feature p {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.55; max-width: none;
  margin: 0;
}

/* ==========================================================================
   Teal accents — компоненты для декора, live-индикаторов, glow
   Правила: ≤2-3% площади композиции. НЕ для CTA, НЕ для текста, НЕ для ссылок.
   ========================================================================== */

/* Live-индикатор: пульсирующая точка для real-time данных */
.tap-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 8px var(--teal-glow), 0 0 16px var(--teal-glow);
  animation: tap-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes tap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Live-метка с подписью (LIVE · Линия №3) */
.tap-live-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-500);
  font-weight: 500;
}
.tap-live-label--on-light { color: var(--teal-700); }

/* Hero-glow: радиальное свечение в углу графитового hero */
.tap-glow {
  position: absolute;
  pointer-events: none;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  opacity: 0.5;
  filter: blur(40px);
  z-index: 0;
}

/* Иконка продукта в графитовой плашке (для "Линейка платформы") */
.tap-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--ink-900);
  color: var(--teal-500);
  flex-shrink: 0;
}
.tap-product-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Тонкая teal-полоска в футере (декоративный фирменный сигнал) */
.tap-teal-rule {
  height: 2px; width: 32px;
  background: var(--teal-500);
  border: none;
  border-radius: 1px;
  margin: 0 0 var(--s-4) 0;
  display: block;
}

/* Поток данных: бегущие точки на тёмном фоне */
.tap-flow-track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.tap-flow-track::before, .tap-flow-track::after {
  content: '';
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 6px var(--teal-500);
  animation: tap-flow 2.4s linear infinite;
}
.tap-flow-track::after { animation-delay: 1.2s; }
@keyframes tap-flow {
  0%   { left: -10px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Инфографика связки 1С ↔ ТАП APS — переиспользуемый компонент */
.tap-1c-flow {
  background: var(--ink-900);
  border-radius: var(--r-md);
  padding: var(--s-7);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.tap-1c-flow::before {
  content: ''; position: absolute; pointer-events: none;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal-glow) 0%, transparent 70%);
  opacity: 0.4; filter: blur(30px);
}
.tap-1c-flow__head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s-5);
  position: relative; z-index: 1;
}
.tap-1c-flow__chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  position: relative; z-index: 1;
}
.tap-1c-flow__node {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-3);
  text-align: center;
  min-height: 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.tap-1c-flow__node--accent {
  background: linear-gradient(180deg, rgba(20,184,166,0.12), rgba(20,184,166,0.04));
  border-color: rgba(20,184,166,0.3);
}
.tap-1c-flow__label {
  font-size: 13px; font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.tap-1c-flow__sub {
  font-size: 10px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tap-1c-flow__arrow {
  width: 28px; height: 4px;
  position: relative;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.tap-1c-flow__arrow::before {
  content: '';
  position: absolute;
  top: 50%; left: -10px; transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 6px var(--teal-500);
  animation: tap-flow 2.4s linear infinite;
}
.tap-1c-flow__caption {
  font-size: 12px; color: var(--ink-300);
  line-height: 1.5;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--s-4);
}
.tap-1c-flow__caption b { color: #fff; font-weight: 600; }
@media (max-width: 700px) {
  .tap-1c-flow__chain { grid-template-columns: 1fr; gap: var(--s-2); }
  .tap-1c-flow__arrow { width: 4px; height: 20px; margin: 0 auto; }
  .tap-1c-flow__arrow::before { left: 50%; top: -10px; transform: translateX(-50%); animation: tap-flow-vert 2.4s linear infinite; }
  @keyframes tap-flow-vert {
    0% { top: -10px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }
}

/* ==========================================================================
   Top-bar: анонс ближайшего вебинара (на всех страницах)
   Появляется над <header>. Закрытие на 14 дней через localStorage.
   ========================================================================== */
.tap-topbar {
  background: var(--ink-900);
  color: #fff;
  font-size: 13px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tap-topbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
}
.tap-topbar__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-500);
  font-weight: 500;
  flex-shrink: 0;
}
.tap-topbar__live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 6px var(--teal-glow), 0 0 12px var(--teal-glow);
  animation: tap-pulse 1.6s ease-in-out infinite;
}
.tap-topbar__date { font-weight: 600; color: #fff; }
.tap-topbar__sep { color: var(--ink-500); }
.tap-topbar__title { color: var(--ink-200); flex: 1; min-width: 200px; }
.tap-topbar__cta {
  color: #fff; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 1px;
}
.tap-topbar__cta:hover { color: var(--teal-500); border-color: var(--teal-500); }
.tap-topbar__close {
  background: none; border: 0; color: var(--ink-400);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color .15s, background .15s;
}
.tap-topbar__close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.tap-topbar__close svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .tap-topbar__inner { padding: 8px var(--gutter); }
  .tap-topbar__title { font-size: 12px; }
}

/* ==========================================================================
   Webinars page — карточки прошедших вебинаров и анонсов
   ========================================================================== */
.webinar-list {
  display: flex; flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-10);
}
.webinar-card {
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-7);
  transition: border-color .15s, transform .15s var(--ease);
}
.webinar-card:hover {
  border-color: var(--blue-300);
  transform: translateY(-1px);
}
.webinar-card__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.webinar-card__date {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--blue-600); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600;
}
.webinar-card__tags {
  display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.webinar-card__tag {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px;
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-xs);
  color: var(--ink-600);
  letter-spacing: 0.04em;
}
.webinar-card h3 {
  font-size: 22px; line-height: 1.3;
  margin-bottom: var(--s-3);
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.webinar-card__desc {
  font-size: 15px; color: var(--ink-600);
  line-height: 1.55;
  margin-bottom: var(--s-5);
  max-width: 75ch;
}
.webinar-card__speakers {
  display: flex; gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-100);
  margin-bottom: var(--s-5);
}
.webinar-speaker {
  display: flex; align-items: center; gap: var(--s-2);
}
.webinar-speaker__photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.webinar-speaker__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
}
.webinar-speaker__name {
  font-size: 13px; font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
}
.webinar-speaker__role {
  font-size: 11px; color: var(--ink-500);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.webinar-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--blue-600);
  font-size: 14px;
  text-decoration: none;
}
.webinar-card__cta:hover {
  color: var(--blue-700);
  text-decoration: underline;
}

/* Заглушка для будущих вебинаров */
.webinar-empty {
  background: linear-gradient(180deg, rgba(20,184,166,0.04), rgba(20,184,166,0.01));
  border: 1px dashed var(--teal-500);
  border-radius: var(--r-md);
  padding: var(--s-10);
  text-align: center;
}
.webinar-empty__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  margin-bottom: var(--s-4);
}
.webinar-empty__icon svg { width: 24px; height: 24px; }
.webinar-empty h3 {
  font-size: 22px; margin-bottom: var(--s-2);
}
.webinar-empty p {
  font-size: 15px; color: var(--ink-600);
  max-width: 50ch; margin: 0 auto var(--s-6);
}
.webinar-subscribe {
  display: flex; gap: var(--s-2);
  max-width: 480px; margin: 0 auto;
  flex-wrap: wrap;
}
.webinar-subscribe input[type="email"] {
  flex: 1; min-width: 200px;
  padding: 12px 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-size: 14px; font-family: var(--font-sans);
  background: #fff;
}
.webinar-subscribe input[type="email"]:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--sh-glow);
}

/* ==========================================================================
   Materials hub (articles.html → хаб)
   ========================================================================== */
.materials-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
  margin-bottom: var(--s-12);
}
@media (max-width: 900px) { .materials-hub { grid-template-columns: 1fr; } }
.materials-hub__card {
  background: var(--paper-00);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s var(--ease);
  display: flex; flex-direction: column;
}
.materials-hub__card:hover {
  border-color: var(--blue-300);
  transform: translateY(-1px);
}
.materials-hub__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.materials-hub__icon {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: var(--teal-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.materials-hub__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.materials-hub__card h3 {
  font-size: 18px;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.materials-hub__card p {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
  margin-bottom: var(--s-4);
  flex: 1;
}
.materials-hub__card-link {
  font-weight: 600;
  color: var(--blue-600);
  font-size: 14px;
}
.materials-hub__card-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Каскад карточек материалов (hero на articles.html и webinars.html)
   ========================================================================== */
.tap-cards-cascade {
  position: relative;
  width: 100%;
  height: 420px;
  perspective: 1200px;
}
.tap-cascade-card {
  position: absolute;
  background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: var(--s-5);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: transform .25s var(--ease);
}
.tap-cascade-card__tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-3);
  display: inline-block;
}
.tap-cascade-card__tag--blue { color: var(--blue-300); }
.tap-cascade-card__tag--teal { color: var(--teal-500); }
.tap-cascade-card__tag--ink  { color: var(--ink-400); }
.tap-cascade-card__title {
  font-size: 16px; font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.tap-cascade-card__date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-400);
}
.tap-cascade-card__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.tap-cascade-card__play::after {
  content: ''; width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 4px;
}

/* Позиции карточек в каскаде */
.tap-cascade-card--back2 {
  top: 0; left: 0;
  width: 65%; height: 200px;
  transform: rotate(-3deg);
  opacity: 0.5;
  z-index: 1;
}
.tap-cascade-card--back1 {
  bottom: 20px; left: 5%;
  width: 60%; height: 180px;
  transform: rotate(-1deg);
  opacity: 0.7;
  z-index: 2;
}
.tap-cascade-card--side {
  top: 30px; right: 0;
  width: 65%; height: 200px;
  transform: rotate(2deg);
  opacity: 0.85;
  z-index: 3;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-color: rgba(20,184,166,0.25);
}
.tap-cascade-card--front {
  bottom: 0; right: 8%;
  width: 65%; height: 220px;
  z-index: 4;
  background: linear-gradient(180deg, #1e3a8a, var(--ink-900));
  border-color: rgba(147,197,253,0.2);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(20,184,166,0.15);
}
.tap-cascade-card--front .tap-cascade-card__title {
  font-size: 19px;
}

/* Hero c графикой справа: layout 1fr 1fr, align по верху */
.hero-with-graphic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-10);
  align-items: start;
}
@media (max-width: 1100px) {
  .hero-with-graphic { grid-template-columns: 1fr; }
  .tap-cards-cascade { height: 360px; max-width: 520px; margin: 0 auto; }
}

/* ==========================================================================
   Анонс-баннер (вместо большой заглушки на webinars.html)
   ========================================================================== */
.tap-announce-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  background: linear-gradient(180deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02));
  border: 1px dashed var(--teal-500);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-8);
}
.tap-announce-banner__icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.tap-announce-banner__icon svg { width: 18px; height: 18px; }
.tap-announce-banner__text {
  display: flex; flex-direction: column; gap: 2px;
}
.tap-announce-banner__title {
  font-size: 15px; font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.tap-announce-banner__sub {
  font-size: 13px;
  color: var(--ink-600);
}
.tap-announce-banner__form {
  display: flex; gap: var(--s-2);
  flex-shrink: 0;
}
.tap-announce-banner__form input[type="email"] {
  width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-size: 13px; font-family: var(--font-sans);
  background: #fff;
}
.tap-announce-banner__form input[type="email"]:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: var(--sh-glow);
}
.tap-announce-banner__form button {
  padding: 10px 18px;
  font-size: 13px;
}
@media (max-width: 900px) {
  .tap-announce-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .tap-announce-banner__icon { margin: 0 auto; }
  .tap-announce-banner__form { width: 100%; }
  .tap-announce-banner__form input[type="email"] { flex: 1; width: auto; }
}

/* ==========================================================================
   Pricing corridors — графика hero на cost.html
   ========================================================================== */
.tap-corridors {
  background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: var(--s-7);
  position: relative;
}
.tap-corridors__head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s-5);
}
.tap-corridors__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tap-corridors__row:last-child { border-bottom: none; }
.tap-corridors__label {
  font-size: 13px; font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.tap-corridors__bar {
  position: relative;
  height: 28px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: visible;
}
.tap-corridors__fill {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(37,99,235,0.5), rgba(37,99,235,0.85));
  border-radius: 4px;
}
.tap-corridors__fill--accent {
  background: linear-gradient(90deg, rgba(20,184,166,0.4), rgba(20,184,166,0.85));
  box-shadow: 0 0 12px rgba(20,184,166,0.35);
}
.tap-corridors__from, .tap-corridors__to {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px;
  color: #fff; font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 2;
}
.tap-corridors__from { left: 8px; }
.tap-corridors__to { right: 8px; }
.tap-corridors__caption {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.5;
}
.tap-corridors__caption b { color: var(--blue-600); font-weight: 600; }

/* ==========================================================================
   Применение каскада карточек на team.html (для экспертов с фото)
   ========================================================================== */
.tap-cascade-card__photo {
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--s-3);
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
}
.tap-cascade-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.15);
}

/* === Teaser-карточка «Ещё кейсы по запросу» в сетке cases-grid === */
.case-card--teaser {
  background: transparent;
  border: 2px dashed var(--ink-200);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: var(--s-8);
  min-height: 380px;
  transition: all .2s var(--ease);
}
.case-card--teaser:hover {
  border-color: var(--blue-600);
  background: var(--blue-50);
  transform: translateY(-2px);
}
.case-card--teaser .case-teaser-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
  color: var(--ink-600);
  transition: all .2s var(--ease);
}
.case-card--teaser:hover .case-teaser-icon {
  background: var(--blue-600); color: #fff;
}
.case-card--teaser h4 {
  font-size: 18px; font-weight: 600;
  margin-bottom: var(--s-3);
  color: var(--ink-900);
  letter-spacing: -0.01em;
}
.case-card--teaser p {
  font-size: 14px; color: var(--ink-600);
  line-height: 1.5; max-width: 30ch;
  margin-bottom: var(--s-5);
}
.case-card--teaser .case-link {
  font-weight: 600; color: var(--blue-600);
  font-size: 14px;
}

/* ==========================================================================
   Стек платформы — динамичная инфографика hero index.html
   4 слоя: 1С:ERP / ТАП APS / ТАП MES / Цех (SCADA) с импульсами между ними
   ========================================================================== */
.tap-stack {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
  max-width: 480px;
  margin-left: auto;
}
.tap-stack__layer {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255,255,255,0.04), inset 0 0 0 1px rgba(255,255,255,0.03);
}
/* Внешние слои (ERP, SCADA) — приглушены, чтобы флагманы APS+MES читались ярче */
.tap-stack__layer:not(.tap-stack__layer--blue):not(.tap-stack__layer--accent) {
  opacity: 0.78;
  border-color: rgba(255,255,255,0.09);
}
.tap-stack__layer--accent {
  border-color: rgba(37,99,235,0.8);
  background: linear-gradient(180deg, rgba(37,99,235,0.16), var(--ink-800));
  box-shadow: 0 0 32px rgba(37,99,235,0.45), inset 0 0 0 1px rgba(37,99,235,0.5);
}
.tap-stack__layer--blue {
  border-color: rgba(37,99,235,0.8);
  background: linear-gradient(180deg, rgba(37,99,235,0.16), var(--ink-800));
  box-shadow: 0 0 30px rgba(37,99,235,0.45), inset 0 0 0 1px rgba(37,99,235,0.5);
}
.tap-stack__role {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 600;
}
.tap-stack__layer--accent .tap-stack__role { color: var(--blue-300); }
.tap-stack__layer--blue .tap-stack__role { color: var(--blue-300); }
.tap-stack__name {
  font-size: 16px; font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.tap-stack__sub {
  display: block;
  font-size: 11px; font-weight: 400;
  color: var(--ink-400);
  margin-top: 2px;
  letter-spacing: 0;
  font-family: var(--font-mono);
}
.tap-stack__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 8px rgba(20,184,166,0.6);
  animation: tapStackPulse 2s ease-in-out infinite;
}
.tap-stack__layer--blue .tap-stack__dot { background: var(--blue-400, #60A5FA); box-shadow: 0 0 8px rgba(96,165,250,0.6); }

@keyframes tapStackPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Линии-коннекторы между слоями с двусторонним обменом данными:
   - blue точка едет сверху вниз (план / команды)
   - teal точка едет снизу вверх (факт / телеметрия)
   - точки разнесены по горизонтали, чтобы не сливаться */
.tap-stack__connector {
  position: relative;
  height: 22px;
  display: flex; justify-content: center;
  pointer-events: none;
  /* Основная фоновая линия */
  background: linear-gradient(180deg, transparent 0%, rgba(147,197,253,0.18) 20%, rgba(147,197,253,0.18) 80%, transparent 100%);
  background-position: calc(50% - 5px) 0;
  background-size: 1px 100%;
  background-repeat: no-repeat;
}
/* Вторая линия для teal-канала справа */
.tap-stack__connector::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: calc(50% + 5px);
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(20,184,166,0.18) 20%, rgba(20,184,166,0.18) 80%, transparent 100%);
}
/* Blue-импульс — сверху вниз (план / команды) */
.tap-stack__connector::after {
  content: ''; position: absolute;
  left: calc(50% - 5px); transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--blue-500);
  box-shadow: 0 0 6px rgba(59,130,246,0.8);
  animation: tapStackImpulseDown 2.4s linear infinite;
}
.tap-stack__connector--delay::after { animation-delay: 0.8s; }
.tap-stack__connector--delay2::after { animation-delay: 1.6s; }

/* Teal-импульс снизу вверх (факт / телеметрия) — добавочный элемент */
.tap-stack__pulse-up {
  position: absolute;
  left: calc(50% + 5px); transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 6px rgba(20,184,166,0.8);
  animation: tapStackImpulseUp 2.4s linear infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}
.tap-stack__connector--delay .tap-stack__pulse-up { animation-delay: 2.0s; }
.tap-stack__connector--delay2 .tap-stack__pulse-up { animation-delay: 0.4s; }

@keyframes tapStackImpulseDown {
  0%   { top: -2px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 2px); opacity: 0; }
}
@keyframes tapStackImpulseUp {
  0%   { top: calc(100% - 2px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: -2px; opacity: 0; }
}

@media (max-width: 1100px) {
  .tap-stack { max-width: 100%; }
}

/* Бэйдж-ссылка (1С Совместимо! на index.html) */
.hero-badge--link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease), background .2s;
}
.hero-badge--link:hover {
  border-color: rgba(255,213,0,.55);
  background: rgba(255,213,0,.13);
  transform: translateY(-1px);
  text-decoration: none;
}

/* ==========================================================================
   Versus-таблица — графика hero на compare.html
   ========================================================================== */
.tap-vs {
  background: var(--ink-800);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  max-width: 520px;
  margin-left: auto;
}
.tap-vs__head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: var(--s-4);
}
.tap-vs__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: var(--s-2);
}
.tap-vs__row:last-child { border-bottom: none; }
.tap-vs__row--header {
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-2);
}
.tap-vs__row--header > div {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink-300);
  text-align: center;
  text-transform: uppercase;
}
.tap-vs__row--header > div:first-child {
  text-align: left; color: var(--ink-400);
}
.tap-vs__row--header .tap-vs__col-tap {
  color: var(--teal-500);
  text-shadow: 0 0 8px rgba(20,184,166,0.4);
}
.tap-vs__criterion {
  font-size: 13px;
  color: var(--ink-200);
  line-height: 1.4;
}
.tap-vs__cell {
  text-align: center;
  font-family: var(--font-mono); font-size: 13px;
}
.tap-vs__cell--yes { color: #fff; font-weight: 600; }
.tap-vs__cell--no  { color: var(--ink-500); }
.tap-vs__cell--partial { color: var(--ink-400); }
.tap-vs__col-tap.tap-vs__cell {
  background: rgba(20,184,166,0.1);
  color: var(--teal-500);
  border-radius: 4px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(20,184,166,0.25);
}
.tap-vs__caption {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.5;
}

/* ==========================================================================
   Hero-инфографика expertise.html — лестница 5 стадий выбора системы
   Декоративный визуал, aria-hidden. Палитра: графит + blue-300 акцент,
   teal — точка-индикатор финальной ступени (доля ≤2-3%, по правилу палитры).
   ========================================================================== */
.exp-ladder {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-width: 540px;
  margin-left: auto;
  isolation: isolate;
}
.exp-ladder__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 40% at 80% 90%, rgba(20,184,166,0.10), transparent 70%),
    radial-gradient(70% 60% at 20% 10%, rgba(37,99,235,0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.exp-ladder__step {
  position: absolute;
  width: 56%;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: baseline;
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.30);
}
.exp-ladder__num {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-500);
  line-height: 1;
}
.exp-ladder__label {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.exp-ladder__sub {
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.3;
  margin-top: 2px;
}
.exp-ladder__step--1 { left:  0%;  bottom:  0%; }
.exp-ladder__step--2 { left:  8%;  bottom: 19%; }
.exp-ladder__step--3 { left: 16%;  bottom: 38%; }
.exp-ladder__step--4 { left: 24%;  bottom: 57%; }
.exp-ladder__step--5 {
  left: 32%; bottom: 76%;
  border-color: rgba(147,197,253,0.45);
  background: rgba(30,58,138,0.40);
}
.exp-ladder__step--5 .exp-ladder__num { color: var(--blue-300); }
.exp-ladder__dot {
  position: absolute;
  top: 10px; right: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.18);
}

@media (max-width: 1100px) {
  .exp-ladder {
    max-width: 480px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .exp-ladder { aspect-ratio: 4 / 5; }
  .exp-ladder__step { width: 70%; padding: 10px 12px; }
  .exp-ladder__label { font-size: 13px; }
  .exp-ladder__sub { font-size: 10.5px; }
  .exp-ladder__num { font-size: 18px; }
}

/* ==========================================================================
   Hero-инфографика methodology.html — мини-Гантт укрупнённых фаз внедрения
   Анимация: последовательное заполнение полос + бегущий вертикальный курсор.
   Декоративный визуал, aria-hidden. Палитра: blue-палитра, teal — точка курсора (декор).
   ========================================================================== */
.method-gantt-hero {
  width: 100%;
  max-width: 540px;
  margin-left: auto;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: 18px 20px 14px;
  font-family: var(--font-mono);
  color: var(--ink-300);
}
.method-gantt-hero__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.method-gantt-hero__title { color: var(--ink-400); }
.method-gantt-hero__total { color: var(--blue-300); font-weight: 700; }
.method-gantt-hero__body {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}
.method-gantt-hero__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: center;
}
.method-gantt-hero__label {
  font-size: 10.5px;
  color: var(--ink-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.method-gantt-hero__track {
  position: relative;
  height: 10px;
  background: rgba(147,197,253,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.method-gantt-hero__bar {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--blue-500);
  border-radius: 3px;
  transform-origin: left center;
  animation: gantt-grow 1.4s ease-out both;
}
/* Позиции полос: левый отступ + ширина в % трека (имитация старта/длительности фазы) */
.method-gantt-hero__bar--1 { left:  0%; width: 18%; animation-delay: 0.10s; background: var(--blue-500); }
.method-gantt-hero__bar--2 { left: 14%; width: 14%; animation-delay: 0.30s; background: var(--blue-500); }
.method-gantt-hero__bar--3 { left: 22%; width: 28%; animation-delay: 0.50s; background: var(--blue-500); }
.method-gantt-hero__bar--4 { left: 42%; width: 22%; animation-delay: 0.70s; background: var(--blue-500); }
.method-gantt-hero__bar--5 { left: 56%; width: 18%; animation-delay: 0.90s; background: var(--blue-500); }
.method-gantt-hero__bar--6 { left: 72%; width: 26%; animation-delay: 1.10s; background: var(--blue-500); }
@keyframes gantt-grow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* Бегущий вертикальный курсор «текущая точка проекта» */
.method-gantt-hero__cursor {
  position: absolute;
  left: 110px;            /* старт после колонки лейблов (100px) + gap (10px) */
  top: -2px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--teal-500) 12%, var(--teal-500) 88%, transparent);
  opacity: 0.85;
  pointer-events: none;
  animation: gantt-cursor 9s ease-in-out 2.4s infinite;
  z-index: 2;
}
.method-gantt-hero__cursor::before {
  content: ''; position: absolute;
  left: -3px; top: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.18);
}
@keyframes gantt-cursor {
  0%   { left: 110px; }
  100% { left: calc(100% - 4px); }
}
.method-gantt-hero__axis {
  display: grid;
  grid-template-columns: 100px repeat(4, 1fr);
  gap: 10px;
  margin-top: 6px;
  font-size: 9.5px;
  color: var(--ink-500);
  letter-spacing: 0.05em;
}
.method-gantt-hero__axis span:first-child { visibility: hidden; }
.method-gantt-hero__axis span { text-align: right; }
.method-gantt-hero__axis span:nth-child(2) { text-align: left; }

@media (max-width: 1100px) {
  .method-gantt-hero { margin: 0 auto; }
}
@media (max-width: 600px) {
  .method-gantt-hero__row { grid-template-columns: 80px 1fr; }
  .method-gantt-hero__cursor { left: 90px; }
  @keyframes gantt-cursor {
    0%   { left: 90px; }
    100% { left: calc(100% - 4px); }
  }
}

/* ==========================================================================
   Hero-инфографика contacts.html — карта Ижевск ↔ Москва
   Анимация: пульсация точек + импульс по дуге + LIVE-индикатор.
   Декоративный визуал, aria-hidden. Палитра: blue (МСК), teal (Ижевск + LIVE — декор).
   ========================================================================== */
.contacts-map {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 5 / 4;
  margin-left: auto;
  isolation: isolate;
}
.contacts-map__svg {
  width: 100%; height: 100%;
  display: block;
}
.contacts-map__pin circle:nth-child(1) {
  transform-origin: center;
  animation: pin-pulse-outer 2.4s ease-in-out infinite;
}
.contacts-map__pin circle:nth-child(2) {
  transform-origin: center;
  animation: pin-pulse-inner 2.4s ease-in-out infinite;
}
.contacts-map__pin--msk circle:nth-child(1) { transform-box: fill-box; }
.contacts-map__pin--izh circle:nth-child(1) { transform-box: fill-box; animation-delay: 0.6s; }
.contacts-map__pin--izh circle:nth-child(2) { animation-delay: 0.6s; }
@keyframes pin-pulse-outer {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.20; transform: scale(1.35); }
}
@keyframes pin-pulse-inner {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.15); }
}
.contacts-map__label {
  position: absolute;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}
.contacts-map__tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-200);
  white-space: nowrap;
}
.contacts-map__tag--accent { color: #fff; }
.contacts-map__sub {
  font-size: 9.5px;
  color: var(--ink-400);
  margin-top: 2px;
  text-transform: none;
  letter-spacing: 0.02em;
}
/* Координаты меток считаны от точек на SVG (viewBox 540×432) */
.contacts-map__label--msk { left: 7%;  top: 60%; }
.contacts-map__label--izh { left: 70%; top: 32%; text-align: left; }
.contacts-map__live {
  position: absolute;
  top: 12px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
  pointer-events: none;
}
.contacts-map__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.20);
  animation: pin-pulse-inner 1.6s ease-in-out infinite;
}

@media (max-width: 1100px) {
  .contacts-map { margin: 0 auto; }
}
@media (max-width: 600px) {
  .contacts-map__tag { font-size: 10px; }
  .contacts-map__sub { font-size: 9px; }
  .contacts-map__live { font-size: 9px; padding: 4px 8px; }
}

/* ==========================================================================
   Партнёрские карточки — графитовая плашка с моно-инициалами вместо лого
   Используется на partners.html и в тизере-секции about.html.
   ========================================================================== */
.partner-logo {
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(147,197,253,0.12);
}
.partner-logo--filled {
  background: #fff;
  border-color: rgba(11,18,32,0.10);
  padding: 14px;
}
.partner-logo--filled .partner-logo__img {
  max-width: 88%;
  max-height: 72%;
  width: auto;
  height: auto;
}
.partner-logo__mono {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: -0.02em;
  color: #fff;
}
.partner-logo__img {
  width: auto !important;
  height: auto !important;
  max-width: 84%;
  max-height: 58%;
  object-fit: contain !important;
  filter: none !important;
}
@media (max-width: 900px) {
  .partner-logo__mono { font-size: 72px; }
}
/* Тизер партнёров на about.html — компактный ряд */
.partners-teaser {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin: var(--s-8) 0 var(--s-6);
}
.partners-teaser__item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 10px;
  padding: var(--s-5) var(--s-3);
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
}
.partners-teaser__logo {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  border: 1px solid rgba(147,197,253,0.12);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}
.partners-teaser__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
}
.partners-teaser__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.3;
}
@media (max-width: 700px) {
  .partners-teaser { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Стена заказчиков (Блок 2 промпта) — β-раскладка 2 открытые + 3 NDA в столбик.
   ========================================================================== */
.customers-section--gridded {
  padding-top: var(--s-12);
  padding-bottom: var(--s-12);
  position: relative;
}
.customers-section--gridded::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(11,18,32,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.sh--center { text-align: center; margin-bottom: var(--s-8); }

.customers-wall--split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.customers-wall__open {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.customers-wall__nda {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Открытая ячейка — крупная карточка */
.customer-cell--named {
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  border: 1px solid rgba(147,197,253,0.10);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 220px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.customer-cell--named:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}
.customer-cell__icon {
  width: 28px; height: 28px;
  color: var(--blue-300);
  margin-bottom: var(--s-4);
}
.customer-cell__body { flex: 1; }
.customer-cell__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.1;
}
.customer-cell__name--small {
  font-size: 17px;
  letter-spacing: 0;
  font-weight: 600;
}
.customer-cell__industry {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
  line-height: 1.3;
}
.customer-cell__cta {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.customer-cell--named:hover .customer-cell__cta { color: #fff; }

/* NDA-ячейка — горизонтальная, компактная */
.customer-cell--nda {
  background: linear-gradient(135deg, #0F1B2E, var(--ink-900));
  border: 1px solid rgba(147,197,253,0.08);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.customer-cell--nda.customer-cell--link:hover {
  border-color: var(--blue-500);
  transform: translateX(2px);
}
.customer-cell__nda-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-right: 14px;
  border-right: 1px solid rgba(147,197,253,0.08);
}
.customer-cell__nda-tag .customer-cell__lock {
  width: 18px; height: 18px;
  color: var(--ink-400);
}
.customer-cell__nda-tag span {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--ink-400);
}
.customer-cell__nda-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.customer-cell__fact {
  font-size: 12px;
  color: var(--ink-300);
  line-height: 1.4;
}
.customer-cell__cta--nda {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0;
  transition: opacity 0.2s;
}
.customer-cell--nda.customer-cell--link:hover .customer-cell__cta--nda {
  opacity: 1;
}

@media (max-width: 1000px) {
  .customers-wall--split { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .customers-wall__open { grid-template-columns: 1fr; }
  .customer-cell--named { min-height: 160px; }
}

/* ==========================================================================
   Отраслевая плитка 4×2 на главной (Блок 8 промпта).
   ========================================================================== */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.industry-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s-5);
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.industry-tile:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
  background: #fff;
}
.industry-tile__icon {
  width: 32px; height: 32px;
  color: var(--blue-600);
}
.industry-tile__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
}
.industry-tile__marker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: auto;
}
.industry-tile__marker--case { color: var(--blue-600); }

@media (max-width: 1000px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Контент отраслевых страниц (industries/*.html).
   ========================================================================== */
.industry-specifics, .industry-tasks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.industry-spec, .industry-task {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.industry-task {
  background: var(--paper-50);
  border-left: 3px solid var(--blue-500);
}
.industry-spec h3, .industry-task h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.industry-spec p, .industry-task p {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
}
@media (max-width: 700px) {
  .industry-specifics, .industry-tasks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Стек «Открытая платформа» на главной + страница platform.html.
   ========================================================================== */
.open-stack {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.open-stack__layer {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.open-stack__layer:hover {
  border-color: var(--blue-500);
  transform: translateX(4px);
}
.open-stack__layer--top    { margin-left: 0;  }
.open-stack__layer--mid    { margin-left: 32px; }
.open-stack__layer--bottom { margin-left: 64px; }
.open-stack__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600);
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.open-stack__name {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.2;
}
.open-stack__chips {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  text-align: right;
}
.open-stack__core {
  margin-top: 18px;
  padding: 14px var(--s-6);
  background: var(--ink-900);
  color: var(--ink-300);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: var(--r-md);
  margin-left: 96px;
}

@media (max-width: 700px) {
  .open-stack__layer { grid-template-columns: 1fr; padding: var(--s-4); }
  .open-stack__layer--top, .open-stack__layer--mid, .open-stack__layer--bottom { margin-left: 0; }
  .open-stack__chips { text-align: left; }
  .open-stack__core { margin-left: 0; }
}

/* ==========================================================================
   Слот видео-демо на главной (Блок 11 промпта).
   До появления настоящего видео — анимированный мокап трёх экранов.
   ========================================================================== */
.video-demo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.video-demo__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #060A14, var(--ink-900));
  border: 1px solid rgba(147,197,253,0.15);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.video-demo__screens {
  position: absolute;
  inset: var(--s-5);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.video-demo__screen {
  position: absolute;
  inset: 0;
  padding: var(--s-4);
  background: var(--ink-800);
  opacity: 0;
  animation: vd-cycle 12s ease-in-out infinite;
}
.video-demo__screen--gantt { animation-delay: 0s; background: #0F1B2E; }
.video-demo__screen--kiosk { animation-delay: 4s; background: #0E1A29; }
.video-demo__screen--dash  { animation-delay: 8s; background: #0D1828; }

@keyframes vd-cycle {
  0%, 4%   { opacity: 0; }
  6%, 30%  { opacity: 1; }
  33%, 100% { opacity: 0; }
}

/* Mock-Гантт: 6 полос на разных позициях */
.vd-mock-bar {
  position: absolute;
  height: 8%;
  background: var(--blue-500);
  border-radius: 2px;
  opacity: 0.85;
}
.vd-mock-bar--1 { left:  4%; top: 10%; width: 18%; background: var(--blue-400); }
.vd-mock-bar--2 { left: 14%; top: 22%; width: 24%; }
.vd-mock-bar--3 { left: 22%; top: 34%; width: 32%; }
.vd-mock-bar--4 { left: 38%; top: 46%; width: 28%; }
.vd-mock-bar--5 { left: 56%; top: 58%; width: 22%; background: var(--blue-300); }
.vd-mock-bar--6 { left: 70%; top: 70%; width: 26%; background: var(--blue-300); }

/* Mock-Киоск */
.vd-kiosk-head {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--blue-300);
}
.vd-kiosk-task {
  margin-top: 14px;
  font-size: 18px; font-weight: 600;
  color: #fff;
}
.vd-kiosk-row {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(147,197,253,0.06);
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink-300);
}
.vd-kiosk-val { color: #fff; font-weight: 600; }
.vd-kiosk-btn {
  margin-top: 18px;
  padding: 12px;
  background: var(--blue-600);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* Mock-Дашборд */
.vd-dash-num {
  font-family: var(--font-mono); font-size: 56px; font-weight: 700;
  color: #fff; line-height: 1;
}
.vd-dash-num span { color: var(--blue-400); }
.vd-dash-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 8px; margin-bottom: 22px;
}
.vd-dash-row {
  height: 8px;
  background: rgba(147,197,253,0.06);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.vd-dash-bar {
  height: 100%;
  background: var(--blue-500);
  border-radius: 2px;
}

/* LIVE-плашка и Play-overlay */
.video-demo__live {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-300);
}
.video-demo__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.20);
  animation: pin-pulse-inner 1.6s ease-in-out infinite;
}
.video-demo__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  color: #fff;
  opacity: 0.5;
  pointer-events: none;
}

/* Правая колонка */
.video-demo__copy h2 {
  margin-top: 12px; margin-bottom: 12px;
}
.video-demo__bullets {
  list-style: none; padding: 0;
  margin: var(--s-5) 0;
}
.video-demo__bullets li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.45;
}
.video-demo__bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue-600);
  font-weight: 700;
}
.video-demo__note {
  margin-top: var(--s-4);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .video-demo { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ==========================================================================
   Integrations.html — карточки систем, чипы протоколов.
   ========================================================================== */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.integration-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.2s, transform 0.2s;
}
.integration-card:hover { border-color: var(--blue-500); transform: translateY(-2px); }
.integration-card--ready { border-left: 3px solid var(--blue-500); }
.integration-card__name {
  font-size: 18px; font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.integration-card__status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 8px;
}
.integration-card__details {
  font-size: 13.5px;
  color: var(--ink-600);
  line-height: 1.5;
}

.protocols-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}
.protocol-chip {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  color: var(--ink-700);
}

@media (max-width: 900px) {
  .integrations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .integrations-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Кейс-страница cases/virial.html — результаты, развитие, гант проекта.
   ========================================================================== */
.case-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.case-result {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
}
.case-result--done {
  border-left: 3px solid var(--blue-500);
}
.case-result--partial {
  border-left: 3px solid var(--ink-300);
  background: var(--paper-50);
}
.case-result__status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 8px;
}
.case-result--partial .case-result__status {
  color: var(--ink-500);
}
.case-result h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.case-result p {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
}

.case-development {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
}
.case-development__col {
  background: var(--paper-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.case-development__col h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-4);
}
.case-development__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-development__col li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.5;
}
.case-development__col li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--blue-600);
  font-weight: 700;
}

/* Гант-схема плана-графика проекта */
.case-gantt {
  background: var(--ink-900);
  padding: var(--s-7) var(--s-6);
  border-radius: var(--r-md);
  border: 1px solid rgba(147,197,253,0.10);
}
.case-gantt__row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: 14px;
}
.case-gantt__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-300);
  letter-spacing: 0.02em;
  text-align: right;
}
.case-gantt__track {
  position: relative;
  height: 14px;
  background: rgba(147,197,253,0.06);
  border-radius: 2px;
}
.case-gantt__bar {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--blue-500);
  border-radius: 2px;
}
.case-gantt__axis {
  margin-top: var(--s-5);
  margin-left: 296px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (max-width: 900px) {
  .case-results, .case-development { grid-template-columns: 1fr; }
  .case-gantt__row { grid-template-columns: 1fr; gap: 6px; }
  .case-gantt__label { text-align: left; font-size: 11px; }
  .case-gantt__axis { margin-left: 0; font-size: 9.5px; }
}

/* ==========================================================================
   tap.html — двухколоночный hero с SVG-планшетом справа.
   ========================================================================== */
.page-intro--split { padding-bottom: var(--s-12); }
.page-intro-split {
  display: grid;
  grid-template-columns: 1fr 540px;
  gap: var(--s-8);
  align-items: center;
}
.tap-device-mockup {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.tap-device-mockup svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 1100px) {
  .page-intro-split { grid-template-columns: 1fr 420px; gap: var(--s-6); }
}
@media (max-width: 900px) {
  .page-intro-split { grid-template-columns: 1fr; }
  .tap-device-mockup { max-width: 480px; margin: 0 auto; }
}

/* ==========================================================================
   contacts.html — CTA-полоса быстрых каналов под hero.
   ========================================================================== */
.contacts-cta-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid rgba(147,197,253,0.10);
}
.contacts-cta-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(147,197,253,0.04);
  border: 1px solid rgba(147,197,253,0.12);
  border-radius: var(--r-md);
  text-decoration: none;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.contacts-cta-bar__btn:hover {
  background: rgba(37,99,235,0.10);
  border-color: var(--blue-500);
  transform: translateY(-2px);
}
.contacts-cta-bar__btn svg {
  width: 18px; height: 18px;
  color: var(--blue-300);
  flex-shrink: 0;
}
.contacts-cta-bar__btn:hover svg { color: var(--teal-500); }

@media (max-width: 700px) {
  .contacts-cta-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .contacts-cta-bar { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Кейс Дантистофф — диаграмма стека 1С:ERP + ELMA + ТАП APS, цитата
   ========================================================================== */
.case-stack-diagram {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6);
  background: rgba(11,18,32,0.4);
  border: 1px solid rgba(147,197,253,0.10);
  border-radius: var(--r-md);
  position: relative;
}
.case-stack-diagram__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.case-stack-node {
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.case-stack-node--aps {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2);
}
.case-stack-node__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--blue-300);
  margin-bottom: 8px;
}
.case-stack-node--aps .case-stack-node__role { color: var(--teal-500); }
.case-stack-node__name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.case-stack-node__desc {
  font-size: 12px;
  color: var(--ink-300);
  line-height: 1.4;
}
.case-stack-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
}
.case-stack-arrow__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
  text-align: center;
}
.case-stack-arrow__line {
  font-size: 22px;
  color: var(--blue-300);
  font-weight: 300;
}

.case-stack-diagram__back {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px dashed rgba(147,197,253,0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.case-stack-roles {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.case-stack-role {
  text-align: center;
  padding: var(--s-4);
}
.case-stack-role__icon {
  font-size: 24px;
  margin-bottom: 6px;
}
.case-stack-role__name {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 4px;
}
.case-stack-role__action {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-300);
}

/* Цитата заказчика */
.case-quote {
  margin: var(--s-10) auto 0;
  max-width: 800px;
  padding: var(--s-6) var(--s-8);
  background: #fff;
  border-left: 4px solid var(--blue-500);
  border-radius: var(--r-md);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink-900);
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .case-stack-diagram__row {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .case-stack-arrow {
    flex-direction: row;
    justify-content: center;
  }
  .case-stack-arrow__line {
    transform: rotate(90deg);
  }
  .case-stack-roles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Кейс Вертолётостроение (NDA) — flow-блок генетического алгоритма
   ========================================================================== */
.case-genetic-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-3);
  align-items: stretch;
}
.case-genetic-step {
  background: rgba(147,197,253,0.04);
  border: 1px solid rgba(147,197,253,0.12);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  position: relative;
}
.case-genetic-step__num {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-genetic-step__name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 14px 0 8px;
}
.case-genetic-step__desc {
  font-size: 12px;
  color: var(--ink-300);
  line-height: 1.4;
}
.case-genetic-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--blue-300);
}

@media (max-width: 900px) {
  .case-genetic-flow { grid-template-columns: 1fr; }
  .case-genetic-arrow { transform: rotate(90deg); }
}

/* ==========================================================================
   cases/dantistoff.html — mock-карточка результата в hero
   ========================================================================== */
.case-result-card {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.case-result-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px; height: 200px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.10), transparent 60%);
  pointer-events: none;
}
.case-result-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: var(--s-5);
  position: relative;
}
.case-result-card__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-500);
  font-weight: 700;
}
.case-result-card__live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.20);
  animation: dant-pulse 1.6s ease-in-out infinite;
}
@keyframes dant-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.case-result-card__period { color: var(--ink-400); }

.case-result-card__main {
  text-align: center;
  padding: var(--s-3) 0 var(--s-5);
  border-bottom: 1px dashed rgba(147,197,253,0.10);
  margin-bottom: var(--s-5);
  position: relative;
}
.case-result-card__big {
  font-family: var(--font-sans);
  font-size: 88px;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #fff;
  background: linear-gradient(135deg, #fff, #93C5FD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-result-card__pct {
  font-size: 56px;
  font-weight: 600;
  vertical-align: top;
  margin-left: 4px;
}
.case-result-card__big-label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-300);
  line-height: 1.4;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.case-result-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  position: relative;
}
.case-result-card__metric {
  text-align: center;
}
.case-result-card__metric-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.case-result-card__metric-unit {
  font-size: 14px;
  color: var(--blue-300);
  margin-left: 3px;
  font-weight: 500;
}
.case-result-card__metric-label {
  font-size: 11px;
  color: var(--ink-400);
  line-height: 1.35;
}

.case-result-card__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  text-align: center;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(147,197,253,0.08);
  position: relative;
}
.case-result-card__stack {
  color: var(--blue-300);
  font-weight: 600;
}
.case-result-card__sep { color: var(--ink-500); }

@media (max-width: 1100px) {
  .case-result-card__big { font-size: 68px; }
  .case-result-card__pct { font-size: 44px; }
}
@media (max-width: 700px) {
  .case-result-card__metrics { grid-template-columns: 1fr; }
  .case-result-card__metric { text-align: left; padding-left: var(--s-3); border-left: 2px solid rgba(147,197,253,0.18); }
}

/* ==========================================================================
   cases/helicopters-nda.html — SVG «До → После» оптимизации в hero
   ========================================================================== */
.case-ga-mockup {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.case-ga-mockup svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   privacy.html — карточка документа и оглавление
   ========================================================================== */
.privacy-doc-card {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--paper-50), #fff);
  border: 1px solid var(--ink-100);
  border-left: 4px solid var(--blue-500);
  border-radius: var(--r-md);
  padding: var(--s-8) var(--s-7);
  box-shadow: 0 4px 20px rgba(11,18,32,0.04);
}
.privacy-doc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.privacy-doc-card__status {
  color: var(--blue-600);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.privacy-doc-card__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20,184,166,0.18);
}
.privacy-doc-card__date { color: var(--ink-500); }
.privacy-doc-card__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-5);
  line-height: 1.3;
}
.privacy-doc-card__meta {
  margin-bottom: var(--s-6);
}
.privacy-doc-card__meta-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: 14px;
}
.privacy-doc-card__meta-row:last-child { border-bottom: none; }
.privacy-doc-card__meta-label {
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 2px;
}
.privacy-doc-card__meta-value {
  color: var(--ink-900);
  font-weight: 500;
}
.privacy-doc-card__btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}
.privacy-doc-card__hint {
  margin-top: var(--s-4);
  font-size: 12px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.privacy-toc {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-8);
}
.privacy-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
}
.privacy-toc__list li {
  counter-increment: toc-counter;
  padding: 12px 0 12px 50px;
  border-bottom: 1px dashed var(--ink-100);
  position: relative;
  color: var(--ink-700);
  font-size: 15px;
}
.privacy-toc__list li:last-child { border-bottom: none; }
.privacy-toc__list li::before {
  content: counter(toc-counter, decimal-leading-zero);
  position: absolute;
  left: 0; top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-600);
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .privacy-doc-card { padding: var(--s-6) var(--s-5); }
  .privacy-doc-card__meta-row { grid-template-columns: 1fr; gap: 4px; }
  .privacy-toc { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); }
}

/* ==========================================================================
   Чекбокс согласия на обработку ПДн в формах
   ========================================================================== */
.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: var(--ink-600);
  margin-top: 4px;
  line-height: 1.5;
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--blue-600);
  cursor: pointer;
}
.form-consent a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-color: rgba(37,99,235,0.30);
  text-underline-offset: 2px;
}
.form-consent a:hover {
  text-decoration-color: var(--blue-600);
}

/* Состояние disabled у кнопки отправки */
.form-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   AI-бейдж на карточке APS в hero-стеке — указывает на ИИ-страницу
   ========================================================================== */
.tap-stack__layer { position: relative; }
.tap-stack__ai-badge {
  position: absolute;
  top: 8px; right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--teal-500);
  background: rgba(11, 18, 32, 0.7);
  border: 1px solid var(--teal-500);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  text-transform: uppercase;
}
.tap-stack__ai-badge:hover {
  background: var(--teal-500);
  color: #0B1220;
  transform: translateY(-1px);
}

/* ==========================================================================
   ii.html — флагманская страница про ИИ
   ========================================================================== */

/* SVG-дирижёр в hero */
.ii-conductor {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.ii-conductor svg {
  width: 100%;
  height: auto;
  display: block;
}

/* «Почему сейчас» — 4 пункта */
.ii-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}
.ii-why {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.ii-why__num {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--teal-500);
  margin-bottom: 10px;
}
.ii-why h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.ii-why p { font-size: 14px; color: var(--ink-600); line-height: 1.55; }

/* Треугольник трёх целевых функций ГА */
.ii-ga-triangle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "left top right";
  gap: var(--s-4);
  max-width: 1100px;
  margin: 0 auto var(--s-10);
}
.ii-ga-triangle__cell {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-align: center;
  position: relative;
}
.ii-ga-triangle__cell--top {
  grid-area: top;
  border-top: 3px solid var(--blue-500);
}
.ii-ga-triangle__cell--left {
  grid-area: left;
  border-top: 3px solid var(--teal-500);
}
.ii-ga-triangle__cell--right {
  grid-area: right;
  border-top: 3px solid var(--blue-500);
}
.ii-ga-triangle__icon {
  font-size: 24px;
  margin-bottom: 10px;
}
.ii-ga-triangle__cell h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.ii-ga-triangle__cell p { font-size: 13px; color: var(--ink-600); line-height: 1.5; }

.ii-ga-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  max-width: 1100px;
  margin: 0 auto;
}
.ii-ga-feature {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink-100);
}
.ii-ga-feature h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.ii-ga-feature p { font-size: 13px; color: var(--ink-600); line-height: 1.5; }

/* Сравнение До/После */
.ii-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-5);
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.ii-compare__col {
  background: rgba(15,27,46,0.5);
  border: 1px solid rgba(147,197,253,0.10);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.ii-compare__col--after {
  border-color: rgba(20,184,166,0.30);
  background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(15,27,46,0.5));
}
.ii-compare__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--ink-400);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed rgba(147,197,253,0.10);
}
.ii-compare__head--accent { color: var(--teal-500); }
.ii-compare__metrics {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.ii-compare__metric {
  padding: var(--s-3) 0;
}
.ii-compare__num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ii-compare__metric--accent .ii-compare__num {
  color: var(--teal-500);
}
.ii-compare__pct {
  font-size: 22px;
  margin-left: 2px;
}
.ii-compare__label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-300);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ii-compare__delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-500);
  background: rgba(20,184,166,0.10);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.ii-compare__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-width: 140px;
}
.ii-compare__arrow-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent, rgba(20,184,166,0.50), transparent);
  min-height: 80px;
}
.ii-compare__arrow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--teal-500);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.ii-compare__arrow-icon {
  font-size: 22px;
  color: var(--teal-500);
}

/* Roadmap к тёмному цеху */
.ii-roadmap {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.ii-roadmap::before {
  content: '';
  position: absolute;
  left: 27px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--ink-200) 0%, var(--blue-500) 25%, var(--blue-500) 65%, var(--ink-200) 100%);
}
.ii-roadmap__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  position: relative;
}
.ii-roadmap__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink-200);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-500);
  position: relative;
  z-index: 1;
}
.ii-roadmap__step--current .ii-roadmap__num {
  border-color: var(--blue-500);
  color: var(--blue-600);
  background: #fff;
}
.ii-roadmap__step--future .ii-roadmap__num {
  border-color: var(--teal-500);
  border-style: dashed;
  color: var(--teal-500);
  background: rgba(20,184,166,0.06);
}
.ii-roadmap__body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.ii-roadmap__body p { font-size: 14px; color: var(--ink-600); line-height: 1.55; }
.ii-roadmap__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(37,99,235,0.10);
  color: var(--blue-600);
}
.ii-roadmap__tag--future {
  background: rgba(20,184,166,0.10);
  color: #0F766E;
}

/* Кейс-карточки на ii.html */
.ii-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 1100px;
  margin: 0 auto;
}
.ii-case-card {
  display: block;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
}
.ii-case-card:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}
.ii-case-card__industry {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 12px;
}
.ii-case-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 10px;
}
.ii-case-card p { font-size: 14px; color: var(--ink-600); line-height: 1.5; margin-bottom: var(--s-4); }
.ii-case-card__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
}
.ii-case-card__cta:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .ii-why-grid { grid-template-columns: 1fr; }
  .ii-ga-triangle {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "left" "right";
  }
  .ii-ga-features { grid-template-columns: 1fr; }
  .ii-compare {
    grid-template-columns: 1fr;
  }
  .ii-compare__arrow {
    flex-direction: row;
    min-width: 0;
    padding: var(--s-3) 0;
  }
  .ii-compare__arrow-line { display: none; }
  .ii-compare__arrow-icon { transform: rotate(90deg); }
  .ii-cases { grid-template-columns: 1fr; }
}

/* ==========================================================================
   index.html — секция «Интеллектуальное планирование» (ИИ-блок)
   ========================================================================== */
.ii-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.ii-home__text h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-4);
}
.ii-home__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-6);
}
.ii-home__list li {
  padding: 10px 0 10px 24px;
  position: relative;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.55;
  border-bottom: 1px solid var(--ink-100);
}
.ii-home__list li:last-child { border-bottom: none; }
.ii-home__list li::before {
  content: '→';
  position: absolute;
  left: 0; top: 10px;
  color: var(--teal-500);
  font-weight: 700;
}
.ii-home__list li strong {
  color: var(--ink-900);
  font-weight: 600;
}
.ii-home__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
  margin-bottom: var(--s-4);
}
.ii-home__num { text-align: center; }
.ii-home__num-val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--teal-500);
  line-height: 1;
  letter-spacing: -0.02em;
}
.ii-home__num-unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-500);
}
.ii-home__num-lbl {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-500);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ii-home__src {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-500);
  margin-bottom: var(--s-5);
}
.ii-home__viz {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.ii-home__viz svg { width: 100%; height: auto; display: block; }

@media (max-width: 1000px) {
  .ii-home { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ii-home__numbers { grid-template-columns: 1fr; gap: var(--s-3); }
  .ii-home__num-val { font-size: 22px; }
}

/* ==========================================================================
   articles.html — лид-магниты и единое модальное окно скачивания
   ========================================================================== */
.lead-magnets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 1100px;
  margin: 0 auto;
}
.lead-magnet {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s;
}
.lead-magnet:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
}
.lead-magnet__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s-4);
  text-align: left;
}
.lead-magnet__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-3);
  line-height: 1.3;
  text-align: left;
}
.lead-magnet__desc {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
  margin-bottom: var(--s-5);
  flex: 1;
  text-align: left;
}
.lead-magnet__btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue-600);
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  transition: color 0.2s;
}
.lead-magnet__btn:hover { color: var(--blue-700, #1D4ED8); text-decoration: underline; }
.lead-magnet__btn--link {
  text-decoration: none;
  display: inline-block;
}
.lead-magnet__btn--link:hover { text-decoration: underline; }
.lead-magnet__btn .arrow { display: inline-block; margin-left: 4px; }

@media (max-width: 700px) {
  .lead-magnets { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Лид-модалка — единое окно для всех скачиваний
   ========================================================================== */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lead-modal--open {
  opacity: 1;
  pointer-events: auto;
}
.lead-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.70);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.lead-modal__card {
  position: relative;
  background: #fff;
  border-radius: var(--r-md);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: var(--s-7);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: translateY(8px);
  transition: transform 0.25s ease;
}
.lead-modal--open .lead-modal__card {
  transform: translateY(0);
}
.lead-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: none;
  border: 1px solid var(--ink-100);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-500);
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.lead-modal__close:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}
.lead-modal__head {
  margin-bottom: var(--s-5);
  padding-right: var(--s-6);
}
.lead-modal__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 8px;
}
.lead-modal__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
  margin-bottom: 8px;
}
.lead-modal__desc {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.5;
  margin: 0;
}
.lead-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.lead-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lead-modal__field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700);
}
.lead-modal__optional {
  font-weight: 400;
  color: var(--ink-500);
}
.lead-modal__field input {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm, 6px);
  background: #fff;
  color: var(--ink-900);
  transition: border-color 0.2s;
}
.lead-modal__field input:focus {
  outline: none;
  border-color: var(--blue-500);
}
.lead-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-600);
  line-height: 1.5;
  margin-top: 4px;
  cursor: pointer;
}
.lead-modal__consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--blue-600);
  cursor: pointer;
}
.lead-modal__consent a {
  color: var(--blue-600);
  text-decoration: underline;
}
.blue-link:hover {
  text-decoration: underline;
}
.lead-modal__submit {
  margin-top: var(--s-3);
  padding: 12px 20px;
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: var(--r-sm, 6px);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lead-modal__submit:hover:not(:disabled) {
  background: var(--blue-700, #1D4ED8);
}
.lead-modal__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.lead-modal__hint {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
}

/* Success state */
.lead-modal__success {
  text-align: center;
  padding: var(--s-5) 0;
}
.lead-modal__success-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(20,184,166,0.12);
  color: var(--teal-500);
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-4);
}
.lead-modal__success h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.lead-modal__success p {
  font-size: 14px;
  color: var(--ink-600);
  margin: 0;
}

/* ==========================================================================
   roi.html — калькулятор окупаемости APS с лид-геном
   ========================================================================== */
.roi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.roi__form {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-7);
}
.roi__group {
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--ink-100);
}
.roi__group:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.roi__group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-5);
}
.roi__group-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--blue-600);
  background: rgba(37,99,235,0.08);
  padding: 4px 8px;
  border-radius: 3px;
}
.roi__group-head h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
}
.roi__field {
  margin-bottom: var(--s-3);
}
.roi__field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.roi__field input[type="text"],
.roi__field input[type="email"],
.roi__field input[type="number"],
.roi__field select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-900);
}
.roi__field input:focus,
.roi__field select:focus {
  outline: none;
  border-color: var(--blue-500);
}
.roi__field input[type="range"] {
  width: 100%;
  accent-color: var(--blue-600);
}
.roi__slider-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue-600);
}

/* Результат-область */
.roi__result {
  background: linear-gradient(135deg, var(--ink-900), #0F1B2E);
  border: 1px solid rgba(147,197,253,0.10);
  border-radius: var(--r-md);
  padding: var(--s-7);
  position: sticky;
  top: 100px;
  min-height: 500px;
}

/* Состояние 1: empty */
.roi__state--empty {
  text-align: center;
  padding: var(--s-5) 0;
}
.roi__lock-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(147,197,253,0.10);
  color: var(--ink-300);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--s-4);
}
.roi__lock-icon svg { width: 26px; height: 26px; }
.roi__state--empty h3 {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.roi__state--empty > p {
  font-size: 14px;
  color: var(--ink-300);
  line-height: 1.55;
  margin-bottom: var(--s-6);
}
.roi__progress {
  text-align: left;
  padding: var(--s-4);
  background: rgba(11,18,32,0.5);
  border-radius: 8px;
  border: 1px solid rgba(147,197,253,0.08);
}
.roi__progress-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-300);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.roi__progress-label span {
  color: var(--teal-500);
  font-weight: 700;
}
.roi__progress-bar {
  height: 4px;
  background: rgba(147,197,253,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.roi__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  transition: width 0.3s ease;
}

/* Состояние 2: gate */
.roi__state--gate {
  padding: var(--s-3) 0;
}
.roi__gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--teal-500);
  background: rgba(20,184,166,0.10);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: var(--s-4);
}
.roi__state--gate h3 {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.roi__state--gate > p {
  font-size: 14px;
  color: var(--ink-300);
  line-height: 1.55;
  margin-bottom: var(--s-5);
}
.roi__gate-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.roi__gate-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roi__gate-field label {
  font-size: 12px;
  color: var(--ink-300);
  font-weight: 500;
}
.roi__gate-field input {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  background: rgba(11,18,32,0.5);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 6px;
  color: #fff;
}
.roi__gate-field input:focus {
  outline: none;
  border-color: var(--blue-500);
}
.roi__gate-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--ink-300);
  line-height: 1.5;
  cursor: pointer;
}
.roi__gate-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 14px; height: 14px;
  flex-shrink: 0;
  accent-color: var(--blue-600);
}
.roi__gate-consent a {
  color: var(--blue-300);
  text-decoration: underline;
}
.roi__gate-submit {
  margin-top: var(--s-2);
  padding: 12px 20px;
  background: var(--blue-600);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.roi__gate-submit:hover:not(:disabled) {
  background: var(--blue-700, #1D4ED8);
}
.roi__gate-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Состояние 3: показ результата */
.roi__result-head {
  text-align: center;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px dashed rgba(147,197,253,0.10);
}
.roi__result-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--teal-500);
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 700;
}
.roi__result-big {
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #fff, #93C5FD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}
.roi__result-unit {
  font-size: 22px;
  margin-left: 6px;
  color: var(--blue-300);
  -webkit-text-fill-color: var(--blue-300);
}
.roi__result-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(147,197,253,0.08);
}
.roi__result-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.roi__result-lbl {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Декомпозиция */
.roi__decomp-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  font-weight: 600;
}
.roi__bar {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
}
.roi__bar-label {
  color: var(--ink-300);
}
.roi__bar-track {
  height: 6px;
  background: rgba(147,197,253,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.roi__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  border-radius: 3px;
  width: 0;
  transition: width 0.6s ease;
}
.roi__bar-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: right;
  min-width: 80px;
}

.roi__disclaimer {
  margin: var(--s-5) 0 var(--s-4);
  padding: var(--s-3);
  background: rgba(20,184,166,0.06);
  border-left: 3px solid var(--teal-500);
  font-size: 12px;
  color: var(--ink-300);
  line-height: 1.5;
  border-radius: 4px;
}
.roi__disclaimer strong { color: #fff; }

.roi__cta {
  display: block;
  text-align: center;
  margin-top: var(--s-4);
}

@media (max-width: 1000px) {
  .roi { grid-template-columns: 1fr; }
  .roi__result { position: static; }
  .roi__bar { grid-template-columns: 140px 1fr auto; font-size: 11px; }
}
@media (max-width: 600px) {
  .roi__bar { grid-template-columns: 1fr; gap: 4px; }
  .roi__bar-val { text-align: left; }
  .roi__result-secondary { grid-template-columns: 1fr; }
}

/* ==========================================================================
   roi.html — mock-карточка примера расчёта в hero (вариант E)
   Реальные цифры из публичного вебинара ТАП 10.04.2025.
   ========================================================================== */
.roi-example-card {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.roi-example-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(37,99,235,0.10), transparent 60%);
  pointer-events: none;
}

.roi-example-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
  position: relative;
}
.roi-example-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: var(--blue-300);
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.25);
  border-radius: 12px;
}
.roi-example-card__period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  letter-spacing: 0.04em;
}

.roi-example-card__title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
  position: relative;
}
.roi-example-card__sub {
  font-size: 13px;
  color: var(--ink-300);
  margin-bottom: var(--s-5);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  position: relative;
}

.roi-example-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-4);
  background: rgba(11,18,32,0.4);
  border: 1px solid rgba(147,197,253,0.08);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  position: relative;
}
.roi-example-card__metric {
  padding: 8px 4px;
}
.roi-example-card__metric--main {
  grid-column: span 2;
  text-align: center;
  padding: 12px 4px 14px;
  border-bottom: 1px dashed rgba(147,197,253,0.12);
  margin-bottom: 4px;
}
.roi-example-card__metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 4px;
}
.roi-example-card__metric-num {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.roi-example-card__metric--main .roi-example-card__metric-num {
  font-size: 44px;
  background: linear-gradient(135deg, #fff, #93C5FD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.roi-example-card__metric-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-300);
  -webkit-text-fill-color: var(--blue-300);
}
.roi-example-card__metric--main .roi-example-card__metric-unit {
  font-size: 22px;
}

.roi-example-card__source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  text-align: center;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(147,197,253,0.06);
  position: relative;
  margin-bottom: var(--s-3);
}
.roi-example-card__hint {
  font-size: 12px;
  color: var(--blue-300);
  text-align: center;
  font-weight: 500;
  position: relative;
}

@media (max-width: 1100px) {
  .roi-example-card__metric--main .roi-example-card__metric-num { font-size: 38px; }
}
@media (max-width: 700px) {
  .roi-example-card__metrics { grid-template-columns: 1fr; }
  .roi-example-card__metric--main { grid-column: span 1; }
}

/* ==========================================================================
   integrations.html — SVG-хаб интеграций (вариант A)
   Центральный блок ТАП + 8 узлов вокруг + двусторонние потоки.
   ========================================================================== */
.integrations-hub {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.integrations-hub svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   cost.html — тарифные карточки лицензирования (Малое vs Предприятие)
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
.pricing-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
.pricing-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.08);
}
.pricing-card--feat {
  border-color: var(--blue-500);
  border-width: 2px;
  background: linear-gradient(180deg, #fff 0%, rgba(37,99,235,0.02) 100%);
}
.pricing-card--enterprise {
  background: linear-gradient(135deg, #0F1B2E, #0B1220);
  border-color: rgba(147,197,253,0.18);
  color: #fff;
}
.pricing-card--enterprise:hover {
  border-color: rgba(147,197,253,0.40);
}

.pricing-card__tier {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--s-4);
  letter-spacing: -0.01em;
}
.pricing-card--enterprise .pricing-card__tier {
  color: #fff;
}

.pricing-card__sub {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
  margin-bottom: var(--s-5);
}
.pricing-card--enterprise .pricing-card__sub {
  color: var(--ink-300);
}

.pricing-card__limits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pricing-card__limits li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.5;
}
.pricing-card--enterprise .pricing-card__limits li {
  color: var(--ink-200);
}
.pricing-card__limits li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 2px;
  background: var(--blue-600);
}
.pricing-card--enterprise .pricing-card__limits li::before {
  background: var(--teal-500);
}

.pricing-card__price-block {
  background: var(--paper-50);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.pricing-card--enterprise .pricing-card__price-block {
  background: rgba(255,255,255,0.04);
}
.pricing-card__price-block--request {
  text-align: center;
  padding: var(--s-5);
}

.pricing-card__price-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--s-3);
}
.pricing-card--enterprise .pricing-card__price-label {
  color: var(--ink-400);
}

.pricing-card__price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink-100);
}
.pricing-card__price-row:last-child {
  border-bottom: none;
}
.pricing-card__price-name {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.4;
}
.pricing-card__price-value {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.pricing-card__price-onreq {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.pricing-card:not(.pricing-card--enterprise) .pricing-card__price-onreq {
  color: var(--ink-900);
}
.pricing-card__price-onreq-sub {
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.4;
}
.pricing-card--enterprise .pricing-card__price-onreq-sub {
  color: var(--ink-300);
}

.pricing-card__cta {
  margin-top: auto;
  justify-content: center;
}
.pricing-card--enterprise .pricing-card__cta {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.pricing-card--enterprise .pricing-card__cta:hover {
  background: rgba(255,255,255,0.14);
}

@media (max-width: 900px) {
  .pricing-grid, .pricing-grid--three {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   webinars/*.html — страницы отдельных вебинаров
   ========================================================================== */
.webinar-learn-block {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-7);
}
.section--paper .webinar-learn-block {
  background: #fff;
}
.webinar-learn-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.webinar-learn-list li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px dashed var(--ink-100);
  font-size: 15px;
  color: var(--ink-800);
  line-height: 1.5;
}
.webinar-learn-list li:last-child {
  border-bottom: none;
}
.webinar-learn-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(37,99,235,0.12);
  border: 2px solid var(--blue-500);
}
.webinar-learn-list--audience li::before {
  background: rgba(20,184,166,0.10);
  border-color: var(--teal-500);
}

.webinar-page-speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.webinar-page-speaker {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-align: left;
  transition: border-color 0.2s;
}
.webinar-page-speaker:hover {
  border-color: var(--blue-500);
}
.webinar-page-speaker__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-600);
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.webinar-page-speaker__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.webinar-page-speaker__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.webinar-page-speaker__role {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: var(--s-3);
  line-height: 1.4;
}
.webinar-speaker-bio {
  list-style: none;
  padding: 0;
  margin: 0;
}
.webinar-speaker-bio li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
  margin-bottom: 6px;
}
.webinar-speaker-bio li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--blue-500);
  font-weight: 700;
}

/* Кнопка «Смотреть запись» на карточке вебинара в списке */
.webinar-card__cta {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-100);
}
.webinar-card__watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
  transition: color 0.15s;
}
.webinar-card__watch:hover {
  color: var(--blue-700, #1D4ED8);
}
.webinar-card__watch .arrow {
  transition: transform 0.15s;
}
.webinar-card__watch:hover .arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   webinars/*.html — двухколоночный layout страницы вебинара
   ========================================================================== */
.webinar-layout {
  padding: var(--s-7) 0 var(--s-8);
}
.webinar-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-7);
  align-items: start;
}
.webinar-layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  min-width: 0;
}

/* Sticky-форма справа */
.webinar-layout__aside {
  position: sticky;
  top: 24px;
}

/* Тег hero */
.webinar-tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(37,99,235,0.18);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: 14px;
  color: var(--blue-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Блоки контента */
.webinar-block {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6) var(--s-7);
}
.webinar-block__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 var(--s-5) 0;
  letter-spacing: -0.01em;
}
.webinar-block__text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 var(--s-4) 0;
}
.webinar-block__text p:last-child {
  margin-bottom: 0;
}

/* Списки */
.webinar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.webinar-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-bottom: 1px dashed var(--ink-100);
  font-size: 15px;
  color: var(--ink-800);
  line-height: 1.5;
}
.webinar-list li:last-child {
  border-bottom: none;
}
.webinar-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(37,99,235,0.12);
  border: 2px solid var(--blue-500);
}
.webinar-list--audience li::before {
  background: rgba(20,184,166,0.10);
  border-color: var(--teal-500);
}

/* Карточки спикеров */
.webinar-speakers-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.webinar-speaker-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--paper-50);
  border-radius: var(--r-md);
  align-items: start;
}
.webinar-speaker-card__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-600);
  overflow: hidden;
  flex-shrink: 0;
}
.webinar-speaker-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.webinar-speaker-card__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.webinar-speaker-card__role {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: var(--s-3);
  line-height: 1.4;
}
.webinar-speaker-card__bio {
  list-style: none;
  padding: 0;
  margin: 0;
}
.webinar-speaker-card__bio li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
  margin-bottom: 4px;
}
.webinar-speaker-card__bio li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--blue-500);
  font-weight: 700;
}

/* ФОРМА */
.webinar-form-card {
  background: linear-gradient(135deg, #0F1B2E, #0B1220);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 16px 40px rgba(0,0,0,0.20);
}
.webinar-form-card__tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(20,184,166,0.12);
  border: 1px solid rgba(20,184,166,0.30);
  border-radius: 12px;
  color: var(--teal-500);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.webinar-form-card__title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--s-3) 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.webinar-form-card__sub {
  font-size: 14px;
  color: var(--ink-300);
  margin: 0 0 var(--s-5) 0;
  line-height: 1.5;
}

.webinar-form__field {
  margin-bottom: var(--s-3);
}
.webinar-form__field label {
  display: block;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.webinar-form__field label .required { color: var(--teal-500); }
.webinar-form__field label .optional {
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-500);
  font-weight: 400;
}
.webinar-form__field input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.webinar-form__field input::placeholder {
  color: var(--ink-500);
}
.webinar-form__field input:focus {
  outline: none;
  border-color: var(--blue-500);
  background: rgba(255,255,255,0.08);
}

/* Чекбокс согласия — на тёмном фоне */
.webinar-form-card .form-consent {
  color: var(--ink-300);
  margin: var(--s-3) 0;
}
.webinar-form-card .form-consent a {
  color: var(--blue-300);
  text-decoration-color: rgba(147,197,253,0.30);
}
.webinar-form-card .form-consent a:hover {
  text-decoration-color: var(--blue-300);
}

.webinar-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-3);
}
.webinar-form-card__hint {
  margin: var(--s-3) 0 0;
  font-size: 11px;
  color: var(--ink-500);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Success-блок */
.webinar-form-success, .webinar-form-error, .demo-form-success, .demo-form-error {
  text-align: center;
  padding: var(--s-5) 0;
}
.webinar-form-success__icon, .demo-form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(20,184,166,0.18);
  color: var(--teal-500);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-4);
}
.webinar-form-success h3 {
  font-size: 22px;
  color: #fff;
  margin: 0 0 var(--s-3) 0;
}
.webinar-form-success p {
  font-size: 14px;
  color: var(--ink-300);
  margin: 0;
  line-height: 1.5;
}

/* Ссылка-возврат */
.webinar-back-link {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-600);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}
.webinar-back-link:hover {
  color: var(--blue-700, #1D4ED8);
  transform: translateX(-3px);
}

/* АДАПТИВ — на узких экранах форма становится в обычный поток */
@media (max-width: 980px) {
  .webinar-layout__grid {
    grid-template-columns: 1fr;
  }
  .webinar-layout__aside {
    position: static;
    order: -1;  /* форма поднимается наверх на мобильном */
    margin-bottom: var(--s-5);
  }
}
@media (max-width: 640px) {
  .webinar-block {
    padding: var(--s-5);
  }
  .webinar-block__title {
    font-size: 22px;
  }
  .webinar-speaker-card {
    grid-template-columns: 48px 1fr;
  }
  .webinar-speaker-card__photo {
    width: 48px;
    height: 48px;
    font-size: 15px;
  }
}

/* ==========================================================================
   webinars/20250410-smart-algorithms.html — анимация Gantt-пересборки
   Цикл 8 секунд. Фазы:
   - 0–25%   (0–2.0с): ДО оптимизации
   - 25–40%  (2.0–3.2с): переход (ГА badge + движение баров)
   - 40–90%  (3.2–7.2с): ПОСЛЕ оптимизации + метрики появляются
   - 90–100% (7.2–8с): возврат к ДО
   ========================================================================== */

.webinar-hero-anim {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.ga-anim {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.ga-anim::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.08), transparent 60%);
  pointer-events: none;
}

/* Заголовки фаз — переключаются друг за другом */
.ga-anim__head {
  position: relative;
  height: 24px;
  margin-bottom: var(--s-4);
}
.ga-anim__phase {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  animation: gaPhaseSwap 8s ease-in-out infinite;
}
.ga-anim__phase--before { animation-delay: 0s; }
.ga-anim__phase--after { animation-delay: 4s; }

@keyframes gaPhaseSwap {
  0%, 25%   { opacity: 1; }
  30%, 35%  { opacity: 0; }
  40%, 90%  { opacity: 0; }  /* перерисованный кейс отдельно */
  100%      { opacity: 1; }
}
/* «До» виден 0–25%, fade-out 25–30%, скрыт до 90%, fade-in 90–100% */
.ga-anim__phase--before {
  animation: gaPhaseBefore 8s ease-in-out infinite;
}
@keyframes gaPhaseBefore {
  0%, 25%    { opacity: 1; }
  30%, 90%   { opacity: 0; }
  95%, 100%  { opacity: 1; }
}
.ga-anim__phase--after {
  animation: gaPhaseAfter 8s ease-in-out infinite;
}
@keyframes gaPhaseAfter {
  0%, 35%    { opacity: 0; }
  40%, 90%   { opacity: 1; }
  95%, 100%  { opacity: 0; }
}

.ga-anim__phase-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(148,163,184,0.18);
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 12px;
  color: #9CA3AF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  font-weight: 700;
}
.ga-anim__phase-tag--after {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.40);
  color: var(--teal-500);
}

/* Бейдж ГА — виден только в фазе перехода (25–40%) */
.ga-anim__badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 8px 16px;
  background: rgba(20,184,166,0.20);
  border: 1.5px solid var(--teal-500);
  border-radius: 20px;
  color: var(--teal-500);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  white-space: nowrap;
  opacity: 0;
  animation: gaBadge 8s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ga-anim__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.30);
  animation: gaBadgeDot 0.8s ease-in-out infinite;
}
@keyframes gaBadgeDot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.4); }
}
@keyframes gaBadge {
  0%, 20%    { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  25%, 38%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  42%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

/* Gantt SVG */
.ga-anim__gantt {
  width: 100%;
  height: auto;
  display: block;
}

/* БАРЫ — каждый имеет 2 позиции (до → после), переключаются через transform */
.ga-bar {
  transform-origin: center;
  transition: transform 0.8s cubic-bezier(.65,.05,.36,1);
}
/* В фазе "до" (0-25%) — translateX(0), исходная позиция в SVG = хаотичная */
/* В фазе "после" (40-90%) — translateX(...) — каждый бар смещается в свою плотную позицию */
/* Управление через animation, не transition — потому что transition не зацикливается */

/* Каждый бар: своя анимация со смещением. 
   Базовая позиция (исходный x в SVG) — это "до". 
   Цель — "после" — плотная упаковка слева, без зазоров. */

/* РМ-01: бары исходные x=60(w48), 180(w32), 260(w56) → плотно x=60(w48), 110(w32), 144(w56) */
.ga-bar--1 { animation: gaBar1 8s ease-in-out infinite; }
.ga-bar--2 { animation: gaBar2 8s ease-in-out infinite; }
.ga-bar--3 { animation: gaBar3 8s ease-in-out infinite; }
@keyframes gaBar1 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(0); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar2 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-70px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar3 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-116px); }
  100%      { transform: translateX(0); }
}

/* РМ-02: 70(w40), 200(w60), 320(w36) → 60(w40), 102(w60), 164(w36) */
.ga-bar--4 { animation: gaBar4 8s ease-in-out infinite; }
.ga-bar--5 { animation: gaBar5 8s ease-in-out infinite; }
.ga-bar--6 { animation: gaBar6 8s ease-in-out infinite; }
@keyframes gaBar4 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-10px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar5 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-98px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar6 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-156px); }
  100%      { transform: translateX(0); }
}

/* РМ-03: 80(w52), 240(w44), 340(w48) → 60(w52), 114(w44), 160(w48) */
.ga-bar--7 { animation: gaBar7 8s ease-in-out infinite; }
.ga-bar--8 { animation: gaBar8 8s ease-in-out infinite; }
.ga-bar--9 { animation: gaBar9 8s ease-in-out infinite; }
@keyframes gaBar7 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-20px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar8 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-126px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar9 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-180px); }
  100%      { transform: translateX(0); }
}

/* РМ-04: 60(w36), 180(w64), 300(w40) → 60(w36), 98(w64), 164(w40) */
.ga-bar--10 { animation: gaBar10 8s ease-in-out infinite; }
.ga-bar--11 { animation: gaBar11 8s ease-in-out infinite; }
.ga-bar--12 { animation: gaBar12 8s ease-in-out infinite; }
@keyframes gaBar10 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(0); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar11 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-82px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar12 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-136px); }
  100%      { transform: translateX(0); }
}

/* РМ-05: 70(w48), 220(w36), 320(w52) → 60(w48), 110(w36), 148(w52) */
.ga-bar--13 { animation: gaBar13 8s ease-in-out infinite; }
.ga-bar--14 { animation: gaBar14 8s ease-in-out infinite; }
.ga-bar--15 { animation: gaBar15 8s ease-in-out infinite; }
@keyframes gaBar13 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-10px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar14 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-110px); }
  100%      { transform: translateX(0); }
}
@keyframes gaBar15 {
  0%, 25%   { transform: translateX(0); }
  40%, 90%  { transform: translateX(-172px); }
  100%      { transform: translateX(0); }
}

/* Метрики целевых функций — появляются в фазе "ПОСЛЕ" */
.ga-anim__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed rgba(147,197,253,0.10);
  opacity: 0;
  animation: gaMetrics 8s ease-in-out infinite;
}
@keyframes gaMetrics {
  0%, 38%    { opacity: 0; transform: translateY(8px); }
  44%, 90%   { opacity: 1; transform: translateY(0); }
  95%, 100%  { opacity: 0; transform: translateY(8px); }
}
.ga-anim__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: rgba(11,18,32,0.4);
  border: 1px solid rgba(20,184,166,0.20);
  border-radius: 8px;
}
.ga-anim__metric-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-300);
  text-transform: uppercase;
}
.ga-anim__metric-arrow {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.ga-anim__metric-arrow--up { color: var(--teal-500); }
.ga-anim__metric-arrow--down { color: var(--teal-500); }

/* На узких экранах — скрываем анимацию, hero возвращается к одной колонке */
@media (max-width: 980px) {
  .webinar-hero-anim {
    display: none;
  }
}

/* Уважение к prefers-reduced-motion — статичное состояние "после" */
@media (prefers-reduced-motion: reduce) {
  .ga-bar,
  .ga-anim__phase,
  .ga-anim__badge,
  .ga-anim__metrics,
  .ga-anim__badge-dot {
    animation: none !important;
  }
  .ga-anim__phase--before { opacity: 0; }
  .ga-anim__phase--after { opacity: 1; }
  .ga-anim__metrics { opacity: 1; transform: none; }
  .ga-anim__badge { display: none; }
}

/* ==========================================================================
   webinars/20250917-ai-1c-erp.html — анимация эволюции популяции планов
   Цикл 8 сек. Фазы:
   - 0–25%   (0–2с): Поколение 1 — все 6 карточек появляются
   - 25–50%  (2–4с): Отбор — teal-обводки бегают, ГА-бейдж пульсирует
   - 50–75%  (4–6с): 3 слабые тускнеют, 3 сильные остаются
   - 75–100% (6–8с): Лучшее решение — одна карточка увеличена, fitness
   ========================================================================== */
.ev-anim {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.ev-anim::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.08), transparent 60%);
  pointer-events: none;
}

.ev-anim__head {
  position: relative;
  height: 24px;
  margin-bottom: var(--s-4);
}
.ev-anim__phase {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}
.ev-anim__phase--gen1 { animation: evPhase1 8s ease-in-out infinite; }
.ev-anim__phase--selection { animation: evPhase2 8s ease-in-out infinite; }
.ev-anim__phase--best { animation: evPhase3 8s ease-in-out infinite; }
@keyframes evPhase1 {
  0%, 25%   { opacity: 1; }
  30%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes evPhase2 {
  0%, 25%   { opacity: 0; }
  30%, 70%  { opacity: 1; }
  75%, 100% { opacity: 0; }
}
@keyframes evPhase3 {
  0%, 70%   { opacity: 0; }
  75%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}

.ev-anim__phase-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(148,163,184,0.18);
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 12px;
  color: #9CA3AF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  font-weight: 700;
}
.ev-anim__phase-tag--accent {
  background: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.40);
  color: var(--blue-300);
}
.ev-anim__phase-tag--after {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.40);
  color: var(--teal-500);
}

/* Бейдж ГА — пульсирует в середине во время отбора (25-70%) */
.ev-anim__badge {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  padding: 8px 16px;
  background: rgba(20,184,166,0.20);
  border: 1.5px solid var(--teal-500);
  border-radius: 20px;
  color: var(--teal-500);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  white-space: nowrap;
  opacity: 0;
  animation: evBadge 8s ease-in-out infinite;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
@keyframes evBadge {
  0%, 25%    { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  30%, 65%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%, 100%  { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

/* Сетка карточек 3×2 */
.ev-anim__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: var(--s-4);
}
.ev-card {
  background: rgba(11,18,32,0.5);
  border: 1.5px solid rgba(147,197,253,0.18);
  border-radius: 8px;
  padding: 10px 8px 8px;
  position: relative;
  transition: all 0.4s ease-in-out;
  opacity: 0;
}
.ev-card svg {
  width: 100%;
  height: auto;
  display: block;
}
.ev-card__label {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}

/* Появление карточек: одна за другой в фазе "Поколение 1" (0-20%) */
.ev-card--1 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0s; }
.ev-card--2 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0.15s; }
.ev-card--3 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0.30s; }
.ev-card--4 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0.45s; }
.ev-card--5 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0.60s; }
.ev-card--6 { animation: evCardAppear 8s ease-in-out infinite; animation-delay: 0.75s; }
@keyframes evCardAppear {
  0%       { opacity: 0; transform: translateY(8px); }
  8%, 70%  { opacity: 1; transform: translateY(0); }
  /* Слабые тускнеют 70-90%, сильные остаются */
  90%, 95% { opacity: 1; }
  100%     { opacity: 0; }
}
/* Карточки 1, 3, 5 — слабые: тускнеют в фазе "отбор" */
.ev-card--1, .ev-card--3, .ev-card--5 {
  animation: evWeakCard 8s ease-in-out infinite;
}
@keyframes evWeakCard {
  0%       { opacity: 0; transform: translateY(8px); }
  8%       { opacity: 1; transform: translateY(0); }
  /* до 50% — нормальные */
  50%      { opacity: 1; }
  /* 55-95% — затухают до 0.25 */
  60%, 95% { opacity: 0.25; transform: scale(0.95); }
  100%     { opacity: 0; transform: translateY(8px); }
}
/* Карточки 2, 4, 6 — сильные. Карточка 4 — финальный победитель */
.ev-card--2, .ev-card--6 {
  animation: evStrongCard 8s ease-in-out infinite;
}
@keyframes evStrongCard {
  0%       { opacity: 0; transform: translateY(8px); }
  8%       { opacity: 1; transform: translateY(0); }
  /* В фазе отбора пульсирующие teal-обводки */
  35%, 50% { border-color: rgba(20,184,166,0.60); }
  /* В финале — нормальные */
  75%, 95% { opacity: 1; border-color: rgba(20,184,166,0.30); }
  100%     { opacity: 0; transform: translateY(8px); }
}
.ev-card--4 {
  animation: evBestCard 8s ease-in-out infinite;
}
@keyframes evBestCard {
  0%       { opacity: 0; transform: translateY(8px) scale(1); }
  8%       { opacity: 1; transform: translateY(0) scale(1); }
  35%, 50% { border-color: rgba(20,184,166,0.60); }
  /* В фазе "Лучшее" — увеличивается */
  75%      { opacity: 1; transform: scale(1.08); border-color: var(--teal-500); box-shadow: 0 0 16px rgba(20,184,166,0.30); }
  92%      { opacity: 1; transform: scale(1.08); border-color: var(--teal-500); box-shadow: 0 0 16px rgba(20,184,166,0.30); }
  100%     { opacity: 0; transform: scale(1); }
}

.ev-anim__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(147,197,253,0.10);
  opacity: 0;
  animation: evFooter 8s ease-in-out infinite;
}
@keyframes evFooter {
  0%, 70%   { opacity: 0; }
  75%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
.ev-anim__footer-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  text-transform: uppercase;
}
.ev-anim__footer-stars {
  font-size: 14px;
  color: var(--teal-500);
  letter-spacing: 1px;
}

/* ==========================================================================
   webinars/20251210-roi-aps.html — анимация пересечения линий
   Цикл 8 сек. Фазы:
   - 0–30%   (0–2.4с): рисуется линия инвестиций (красная)
   - 30–60%  (2.4–4.8с): рисуется линия эффекта (teal)
   - 60–95%  (4.8–7.6с): пульсирует точка пересечения с подписью
   - 95–100%: пауза перед повтором
   ========================================================================== */
.roi-anim {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.roi-anim::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.08), transparent 60%);
  pointer-events: none;
}
.roi-anim__head {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-3);
}
.roi-anim__title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-sans);
}
.roi-anim__sub {
  font-size: 11px;
  color: var(--ink-400);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.roi-anim__chart {
  width: 100%;
  height: auto;
  display: block;
}

/* Рисование линии инвестиций (красной) — фаза 0-30% */
.roi-line--invest {
  /* Длина пути ≈ 469 (от 50,220 до 490,60) */
  stroke-dasharray: 510;
  stroke-dashoffset: 510;
  animation: roiDrawInvest 8s ease-in-out infinite;
}
@keyframes roiDrawInvest {
  0%      { stroke-dashoffset: 510; }
  30%     { stroke-dashoffset: 0; }
  95%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 510; }
}

/* Рисование линии эффекта (teal S-кривая) — фаза 30-60% */
.roi-line--effect {
  /* Длина S-кривой ≈ 540 */
  stroke-dasharray: 580;
  stroke-dashoffset: 580;
  animation: roiDrawEffect 8s ease-in-out infinite;
}
@keyframes roiDrawEffect {
  0%, 30% { stroke-dashoffset: 580; }
  60%     { stroke-dashoffset: 0; }
  95%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 580; }
}

/* Заполнение под эффектом */
.roi-area {
  animation: roiArea 8s ease-in-out infinite;
}
@keyframes roiArea {
  0%, 55%  { opacity: 0; }
  60%, 95% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Точка пересечения */
.roi-intersection {
  opacity: 0;
  animation: roiIntersection 8s ease-in-out infinite;
}
@keyframes roiIntersection {
  0%, 58%  { opacity: 0; }
  62%, 95% { opacity: 1; }
  100%     { opacity: 0; }
}
/* Свечение пульсирует */
.roi-intersection__glow {
  animation: roiGlow 1.4s ease-in-out infinite;
  transform-origin: 336px 116px;
  transform-box: fill-box;
}
@keyframes roiGlow {
  0%, 100% { r: 12; opacity: 0.6; }
  50%      { r: 20; opacity: 0.2; }
}

/* ==========================================================================
   webinars/20250617-tap-aps-1c-erp.html — двусторонний обмен 1С ↔ ТАП
   Цикл 8 сек. Фазы:
   - 0–35%   (0–2.8с): прямой обмен 1С → ТАП (blue-точки), подписи ЗАКАЗЫ/BOM/...
   - 35–55%  (2.8–4.4с): пауза — пульсация ТАП-блока, бейдж ОПТИМИЗАЦИЯ
   - 55–95%  (4.4–7.6с): обратный обмен ТАП → 1С (teal-точки), подписи ПЛАН/ГРАФИК/...
   - 95–100%: возврат к началу
   ========================================================================== */
.ex-anim {
  background: linear-gradient(135deg, rgba(15,27,46,0.85), rgba(11,18,32,0.95));
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.30);
}
.ex-anim::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.08), transparent 60%);
  pointer-events: none;
}
.ex-anim__head {
  position: relative;
  height: 24px;
  margin-bottom: var(--s-3);
}
.ex-anim__phase {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
}
.ex-anim__phase--forward { animation: exPhaseFwd 8s ease-in-out infinite; }
.ex-anim__phase--processing { animation: exPhaseProc 8s ease-in-out infinite; }
.ex-anim__phase--backward { animation: exPhaseBack 8s ease-in-out infinite; }
@keyframes exPhaseFwd {
  0%, 30%   { opacity: 1; }
  35%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes exPhaseProc {
  0%, 30%   { opacity: 0; }
  35%, 50%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes exPhaseBack {
  0%, 50%   { opacity: 0; }
  55%, 92%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

.ex-anim__phase-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,205,33,0.18);
  border: 1px solid rgba(255,205,33,0.30);
  border-radius: 12px;
  color: #FFCD21;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.ex-anim__phase-tag--accent {
  background: rgba(37,99,235,0.18);
  border-color: rgba(37,99,235,0.40);
  color: var(--blue-300);
}
.ex-anim__phase-tag--after {
  background: rgba(20,184,166,0.18);
  border-color: rgba(20,184,166,0.40);
  color: var(--teal-500);
}

.ex-anim__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Подписи прямого/обратного обмена */
.ex-labels {
  opacity: 0;
}
.ex-labels--forward { animation: exLabelsFwd 8s ease-in-out infinite; }
.ex-labels--backward { animation: exLabelsBack 8s ease-in-out infinite; }
@keyframes exLabelsFwd {
  0%, 30%   { opacity: 1; }
  35%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes exLabelsBack {
  0%, 50%   { opacity: 0; }
  55%, 92%  { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* Бегущие точки 1С → ТАП (140 → 380) */
.ex-dot--fwd-1, .ex-dot--fwd-2, .ex-dot--fwd-3, .ex-dot--fwd-4 {
  opacity: 0;
}
.ex-dot--fwd-1 { animation: exFwdMove 8s ease-in-out infinite; animation-delay: 0s; }
.ex-dot--fwd-2 { animation: exFwdMove 8s ease-in-out infinite; animation-delay: 0.2s; }
.ex-dot--fwd-3 { animation: exFwdMove 8s ease-in-out infinite; animation-delay: 0.4s; }
.ex-dot--fwd-4 { animation: exFwdMove 8s ease-in-out infinite; animation-delay: 0.6s; }
@keyframes exFwdMove {
  0%      { opacity: 0; transform: translateX(0); }
  3%      { opacity: 1; }
  25%     { opacity: 1; transform: translateX(240px); }
  28%     { opacity: 0; transform: translateX(240px); }
  100%    { opacity: 0; transform: translateX(0); }
}

/* Бегущие точки ТАП → 1С (380 → 140) */
.ex-dot--back-1, .ex-dot--back-2, .ex-dot--back-3, .ex-dot--back-4 {
  opacity: 0;
}
.ex-dot--back-1 { animation: exBackMove 8s ease-in-out infinite; animation-delay: 0s; }
.ex-dot--back-2 { animation: exBackMove 8s ease-in-out infinite; animation-delay: 0.2s; }
.ex-dot--back-3 { animation: exBackMove 8s ease-in-out infinite; animation-delay: 0.4s; }
.ex-dot--back-4 { animation: exBackMove 8s ease-in-out infinite; animation-delay: 0.6s; }
@keyframes exBackMove {
  0%, 55%  { opacity: 0; transform: translateX(0); }
  57%     { opacity: 1; }
  82%     { opacity: 1; transform: translateX(-240px); }
  85%     { opacity: 0; transform: translateX(-240px); }
  100%    { opacity: 0; transform: translateX(0); }
}

/* Пульсация ТАП-блока в фазе processing */
.ex-pulse {
  animation: exPulse 8s ease-in-out infinite;
  opacity: 0;
}
@keyframes exPulse {
  0%, 30%   { opacity: 0; transform: scale(1); transform-origin: 440px 140px; transform-box: fill-box; }
  35%, 50%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* Бейдж ОПТИМИЗАЦИЯ в processing */
.ex-anim__processing {
  opacity: 0;
  animation: exProcessing 8s ease-in-out infinite;
}
@keyframes exProcessing {
  0%, 30%   { opacity: 0; }
  35%, 50%  { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* Применяем общее правило reduced-motion для всех новых анимаций */
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-anim__phase, .ev-anim__badge, .ev-anim__footer,
  .roi-line--invest, .roi-line--effect, .roi-area, .roi-intersection, .roi-intersection__glow,
  .ex-anim__phase, .ex-labels, .ex-dot, .ex-pulse, .ex-anim__processing {
    animation: none !important;
  }
  .ev-card { opacity: 1; }
  .ev-anim__phase--best { opacity: 1; }
  .ev-anim__footer { opacity: 1; }
  .ev-anim__badge { display: none; }
  .roi-line--invest, .roi-line--effect { stroke-dashoffset: 0; }
  .roi-intersection { opacity: 1; }
  .ex-anim__phase--backward { opacity: 1; }
  .ex-labels--backward { opacity: 1; }
}

/* ==========================================================================
   index — стек: разделение «ваша система» (1С) и «платформа ТАП» (APS/MES)
   Правки 4 (C+D): внешний слой + рамка-группа + подпись коннектора
   ========================================================================== */

/* Внешний слой (1С:ERP) — приглушённый, пунктирная обводка = "не наш" */
.tap-stack__layer--external {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.22);
  box-shadow: none;
  opacity: 0.92;
}
.tap-stack__layer--external .tap-stack__role {
  color: var(--ink-500);
}
.tap-stack__layer--external .tap-stack__name {
  color: var(--ink-200);
}
/* Бейдж "внешняя" в правом углу слоя 1С */
.tap-stack__ext-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Группа-рамка вокруг ТАП-продуктов (APS + MES) */
.tap-stack__group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 26px var(--s-3) var(--s-3);
  border: 1px solid rgba(37,99,235,0.30);
  border-radius: calc(var(--r-md) + 4px);
  background: rgba(37,99,235,0.03);
}
.tap-stack__group-label {
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--ink-900, #0B1220);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue-300);
  font-weight: 700;
}

/* Подпись на коннекторе (модуль интеграции) */
.tap-stack__connector--labeled {
  position: relative;
  height: 34px;
}
.tap-stack__connector-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ink-900, #0B1220);
  padding: 2px 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  white-space: nowrap;
  border: 1px solid rgba(147,197,253,0.18);
  border-radius: 10px;
  z-index: 2;
}

/* AI-бейдж — уменьшенный (только "AI") */
.tap-stack__group .tap-stack__layer { background: var(--ink-800); }

/* index — приглашение на демо (заменило фейковый видео-блок) */
.demo-invite {
  max-width: 760px;
  text-align: left;
}
.demo-invite__bullets {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.demo-invite__bullets li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fs-md, 16px);
  color: var(--ink-700);
  line-height: 1.5;
}
.demo-invite__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 2px;
  background: var(--blue-600);
}

/* ==========================================================================
   platform.html → «Архитектура» (честная версия без обещаний открытости)
   ========================================================================== */
.arch-layers {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 760px;
  margin: 0 auto;
}
.arch-layer {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  position: relative;
}
.arch-layer--accent {
  border-color: rgba(37,99,235,0.30);
  background: linear-gradient(180deg, rgba(37,99,235,0.03), #fff);
}
.arch-layer--core {
  border-color: rgba(20,184,166,0.40);
  background: linear-gradient(180deg, rgba(20,184,166,0.05), #fff);
}
.arch-layer__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}
.arch-layer--accent .arch-layer__tag { color: var(--blue-600); }
.arch-layer--core .arch-layer__tag { color: var(--teal-700, #0F766E); }
.arch-layer__name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.arch-layer__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-600);
}

.arch-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.arch-benefit {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.arch-benefit__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}
.arch-benefit__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-600);
}
@media (max-width: 800px) {
  .arch-benefits { grid-template-columns: 1fr; }
}

/* index — мини-архитектура (заменила «открытую платформу») */
.arch-home {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
.arch-home__card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.arch-home__card--ext {
  background: var(--paper-50);
  border-style: dashed;
  border-color: var(--ink-200);
}
.arch-home__card--core { border-color: rgba(20,184,166,0.40); background: linear-gradient(180deg, rgba(20,184,166,0.05), #fff); }
.arch-home__card--mes { border-color: rgba(37,99,235,0.30); background: linear-gradient(180deg, rgba(37,99,235,0.03), #fff); }
.arch-home__tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 8px;
}
.arch-home__card--core .arch-home__tag { color: var(--teal-700, #0F766E); }
.arch-home__card--mes .arch-home__tag { color: var(--blue-600); }
.arch-home__name {
  font-family: var(--font-sans); font-size: 20px; font-weight: 600;
  color: var(--ink-900); margin-bottom: 8px;
}
.arch-home__desc {
  font-size: 14px; line-height: 1.55; color: var(--ink-600);
}
@media (max-width: 800px) {
  .arch-home { grid-template-columns: 1fr; }
}

/* ==========================================================================
   index — Gantt-пересборка в блоке ИИ (заменил статичное «до/после»)
   Цикл 8с: 0-25% хаос (До) → 25-40% переход (badge) → 40-90% плотно (После) → возврат
   ========================================================================== */
.ga-home {
  background: linear-gradient(135deg, rgba(15,27,46,0.92), rgba(11,18,32,0.96));
  border: 1px solid rgba(147,197,253,0.16);
  border-radius: var(--r-md);
  padding: var(--s-6);
  position: relative; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
}
.ga-home__head { position: relative; height: 22px; margin-bottom: var(--s-4); }
.ga-home__phase {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px; opacity: 0;
}
.ga-home__phase--before { background: rgba(148,163,184,0.18); color: #9CA3AF; animation: ghBefore 8s ease-in-out infinite; }
.ga-home__phase--after  { background: rgba(20,184,166,0.18); color: var(--teal-500); animation: ghAfter 8s ease-in-out infinite; }
@keyframes ghBefore { 0%,25%{opacity:1} 30%,90%{opacity:0} 95%,100%{opacity:1} }
@keyframes ghAfter  { 0%,35%{opacity:0} 40%,90%{opacity:1} 95%,100%{opacity:0} }

.ga-home__badge {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 18px;
  background: rgba(20,184,166,0.18); border: 1.5px solid var(--teal-500);
  color: var(--teal-500); font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; opacity: 0;
  animation: ghBadge 8s ease-in-out infinite;
}
.ga-home__badge-dot { width:6px; height:6px; border-radius:50%; background:var(--teal-500); animation: ghDot .8s ease-in-out infinite; }
@keyframes ghDot { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
@keyframes ghBadge {
  0%,20%{opacity:0; transform:translate(-50%,-50%) scale(.85)}
  25%,38%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  42%,100%{opacity:0; transform:translate(-50%,-50%) scale(.85)}
}
.ga-home__gantt { width: 100%; height: auto; display: block; }
.gh-bar rect { fill: url(#none); fill: #2563EB; }
.gh-bar { transform-origin: center; }
.gh-bar rect { fill: #2563EB; }
.gh-bar:nth-child(even) rect { fill: #3B82F6; }
/* движение баров: исходный x = "до" (хаос), смещение влево к "после" (плотно) */
.gh-bar--1 { animation: ghB1 8s ease-in-out infinite; }
.gh-bar--2 { animation: ghB2 8s ease-in-out infinite; }
.gh-bar--3 { animation: ghB3 8s ease-in-out infinite; }
.gh-bar--4 { animation: ghB4 8s ease-in-out infinite; }
.gh-bar--5 { animation: ghB5 8s ease-in-out infinite; }
.gh-bar--6 { animation: ghB6 8s ease-in-out infinite; }
.gh-bar--7 { animation: ghB7 8s ease-in-out infinite; }
.gh-bar--8 { animation: ghB8 8s ease-in-out infinite; }
.gh-bar--9 { animation: ghB9 8s ease-in-out infinite; }
.gh-bar--10 { animation: ghB10 8s ease-in-out infinite; }
.gh-bar--11 { animation: ghB11 8s ease-in-out infinite; }
.gh-bar--12 { animation: ghB12 8s ease-in-out infinite; }
.gh-bar--13 { animation: ghB13 8s ease-in-out infinite; }
.gh-bar--14 { animation: ghB14 8s ease-in-out infinite; }
.gh-bar--15 { animation: ghB15 8s ease-in-out infinite; }
/* x "до" → x "после" (плотно слева). dx = после - до */
@keyframes ghB1  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes ghB2  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-68px)}100%{transform:translateX(0)}}
@keyframes ghB3  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-112px)}100%{transform:translateX(0)}}
@keyframes ghB4  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-10px)}100%{transform:translateX(0)}}
@keyframes ghB5  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-94px)}100%{transform:translateX(0)}}
@keyframes ghB6  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-150px)}100%{transform:translateX(0)}}
@keyframes ghB7  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-20px)}100%{transform:translateX(0)}}
@keyframes ghB8  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-122px)}100%{transform:translateX(0)}}
@keyframes ghB9  {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-174px)}100%{transform:translateX(0)}}
@keyframes ghB10 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes ghB11 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-78px)}100%{transform:translateX(0)}}
@keyframes ghB12 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-148px)}100%{transform:translateX(0)}}
@keyframes ghB13 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-10px)}100%{transform:translateX(0)}}
@keyframes ghB14 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-104px)}100%{transform:translateX(0)}}
@keyframes ghB15 {0%,25%{transform:translateX(0)}40%,90%{transform:translateX(-158px)}100%{transform:translateX(0)}}
.gh-bar { transition: none; }
.gh-bar[class*="gh-bar--"] { animation-timing-function: cubic-bezier(.65,.05,.36,1); }

.ga-home__metrics {
  display: flex; gap: var(--s-4); justify-content: center;
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px dashed rgba(147,197,253,0.10);
  opacity: 0; animation: ghMetrics 8s ease-in-out infinite;
}
@keyframes ghMetrics { 0%,38%{opacity:0} 44%,90%{opacity:1} 95%,100%{opacity:0} }
.ga-home__metric {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-300);
  display: inline-flex; align-items: center; gap: 4px;
}
.ga-home__metric b { color: var(--teal-500); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .gh-bar, .ga-home__phase, .ga-home__badge, .ga-home__metrics, .ga-home__badge-dot { animation: none !important; }
  .ga-home__phase--after { opacity: 1; }
  .ga-home__metrics { opacity: 1; }
  .ga-home__badge { display: none; }
}

/* index — интеграции в две колонки (готовый модуль | под проект) */
.integ-cols {
  margin-top: var(--s-8);
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-10);
  align-items: start;
}
.integ-col .integ-group-title { margin-bottom: var(--s-4); }
.integ-col:first-child { padding-right: var(--s-8); border-right: 1px solid var(--ink-100); }
@media (max-width: 720px) {
  .integ-cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .integ-col:first-child { padding-right: 0; border-right: none; padding-bottom: var(--s-5); border-bottom: 1px solid var(--ink-100); }
}


/* ==========================================================================
   index — демо-блок: Gantt-плеер слева + текст справа (честная версия)
   ========================================================================== */
.demo-showcase {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: var(--s-10); align-items: center;
}
.demo-showcase__player {
  background: linear-gradient(135deg, #060A14, var(--ink-900));
  border: 1px solid rgba(147,197,253,0.15);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.demo-showcase__player::after {
  content:''; position:absolute; top:0; right:0; width:220px; height:220px;
  background: radial-gradient(circle at 80% 20%, rgba(20,184,166,0.07), transparent 60%);
  pointer-events:none;
}
.demo-showcase__head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(147,197,253,0.10);
}
.demo-showcase__title { font-size:13px; font-weight:600; color:#fff; }
.demo-showcase__live {
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-mono); font-size:10.5px; color: var(--teal-500); letter-spacing:.02em;
}
.demo-showcase__live-dot {
  width:7px; height:7px; border-radius:50%; background: var(--teal-500);
  animation: dsLive 2s ease-out infinite;
}
@keyframes dsLive {
  0%{box-shadow:0 0 0 0 rgba(20,184,166,.5)} 70%{box-shadow:0 0 0 7px rgba(20,184,166,0)} 100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}
}
.demo-showcase__grid { display:flex; flex-direction:column; gap:12px; }
.ds-row { display:grid; grid-template-columns: 84px 1fr; align-items:center; gap:12px; }
.ds-res { font-family: var(--font-mono); font-size:10.5px; color: var(--ink-400); text-align:right; white-space:nowrap; }
.ds-bars {
  display:flex; gap:6px; align-items:center; height:16px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(16.66% - 1px), rgba(147,197,253,0.06) calc(16.66% - 1px), rgba(147,197,253,0.06) 16.66%);
  border-radius:4px; padding:1px 0;
}
.dsb {
  display:block; height:14px; border-radius:3px; width: var(--w);
  background: linear-gradient(180deg,#3B82F6,#2563EB);
  transform-origin:left center; transform: scaleX(0);
  animation: dsGrow .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.dsb--1{animation-delay:.2s}.dsb--2{animation-delay:.3s}.dsb--3{animation-delay:.4s}
.dsb--4{animation-delay:.34s}.dsb--5{animation-delay:.44s}.dsb--6{animation-delay:.54s}
.dsb--7{animation-delay:.48s}.dsb--8{animation-delay:.58s}.dsb--9{animation-delay:.68s}
.dsb--10{animation-delay:.62s}.dsb--11{animation-delay:.72s}.dsb--12{animation-delay:.82s}
.dsb--13{animation-delay:.76s}.dsb--14{animation-delay:.86s}.dsb--15{animation-delay:.96s}
.dsb--2,.dsb--5,.dsb--8,.dsb--11,.dsb--14 { background: linear-gradient(180deg,#60A5FA,#3B82F6); opacity:.9; }
@keyframes dsGrow { to { transform: scaleX(1); } }
.demo-showcase__copy h2 { margin-bottom: var(--s-3); }
.demo-showcase__bullets {
  list-style:none; padding:0; margin: var(--s-5) 0;
  display:flex; flex-direction:column; gap:10px;
}
.demo-showcase__bullets li {
  position:relative; padding-left:26px; font-size:16px; color: var(--ink-700); line-height:1.5;
}
.demo-showcase__bullets li::before {
  content:''; position:absolute; left:0; top:9px; width:14px; height:2px; background: var(--blue-600);
}
@media (prefers-reduced-motion: reduce) {
  .dsb { animation:none; transform:scaleX(1); }
  .demo-showcase__live-dot { animation:none; }
}
@media (max-width: 900px) {
  .demo-showcase { grid-template-columns: 1fr; gap: var(--s-8); }
  .demo-showcase__player { order: 2; }
}

.demo-form-input {
  margin-bottom: var(--s-3);
  width: 100%;
}

.document-card {
  display: flex;
  padding: 20px;
  text-align: right;
  align-items: center;
}

.document-card:hover {
  border-color: var(--blue-500);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.08);
}

.document-card__img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  margin-right: 10px;
}