/* =====================================================================
   ПОТОК.КОНТРОЛЛЕР — стиль лендинга
   Дизайн-токены: точно из dems-frontend (AppTheme.light, DM Sans)
   ===================================================================== */

:root {
  /* Background layers (из animated_background.dart) */
  --bg-top: #F5EEF8;
  --bg-mid: #F8F4F0;
  --bg-bot: #F5F2EE;

  --bg-card: #FFFFFF;
  --bg-secondary: #F4F6F6;
  --bg-tertiary: #F5F5F0;

  --bg-dark: #0F172A;
  --bg-dark-2: #1E293B;

  /* Text (из equipment_autofill_dialog._textPrimary) */
  --text-primary: #1A1A1A;
  --text-secondary: #6B6A68;
  --text-muted: #B1ADA1;
  --text-slate: #1E293B;
  --text-slate-2: #64748B;
  --text-on-dark: #F4F6F6;

  /* Accents */
  --accent: #3B82F6;
  --accent-2: #415BE7;
  --accent-3: #6C86FF;
  --accent-indigo: #4F46E5;
  --accent-info: #8D82F3;

  --success: #16A34A;
  --success-soft: #ECFDF5;
  --success-mid: #5ED7B2;
  --warning: #D97706;
  --warning-soft: #FEF3C7;
  --warning-mid: #E09A62;
  --error: #BF505C;
  --error-soft: #FFEEF1;
  --error-mid: #F43F5E;

  /* Status dots (DEMS palette) */
  --st-created: #64B5F6;
  --st-running: #4DB6AC;
  --st-running-alt: #81C784;
  --st-setup: #FFB74D;
  --st-warning: #FF8A65;
  --st-alarm: #E57373;
  --st-stopped: #BDBDBD;
  --st-done: #81C784;

  /* Borders (из autofill._border) */
  --border: #E5E3DC;
  --border-2: #E2E8F0;
  --border-3: #E7E8EA;
  --border-soft: rgba(176,183,195,.15);

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(13,17,23,.03);
  --sh-sm: 0 2px 6px rgba(13,17,23,.04);
  --sh-md: 0 6px 16px rgba(13,17,23,.05), 0 1px 4px rgba(13,17,23,.03);
  --sh-lg: 0 15px 40px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.04);
  --sh-xl: 0 40px 60px rgba(0,0,0,.08), 0 16px 30px rgba(0,0,0,.06);
  --sh-card: 0 10px 25px rgba(13,17,23,.07), 0 1px 4px rgba(13,17,23,.03);
  --sh-glow: 0 20px 45px -8px rgba(65,91,231,.35);
  --sh-ai: 0 15px 40px rgba(65,91,231,.18);

  /* Radii (AppRadii) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* Gradient */
  --grad-ai: linear-gradient(135deg, #415BE7 0%, #6C86FF 100%);
  --grad-soft: linear-gradient(135deg, #F5EEF8 0%, #F8F4F0 50%, #F5F2EE 100%);

  /* Durations */
  --d-fast: 120ms;
  --d-norm: 220ms;
  --d-slow: 350ms;
  --d-page: 500ms;

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.42,0,.58,1);

  --container: 1200px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-top);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Слоистый фон как в приложении (animated_background.dart) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-bot) 100%);
}

.bg-spots {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: float 20s ease-in-out infinite;
}
/* 5 пятен как в приложении */
.spot-1 { /* розовое */
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(244,143,177,.45) 0%, transparent 70%);
  top: -180px; left: -120px;
}
.spot-2 { /* фиолетовое */
  width: 580px; height: 580px;
  background: radial-gradient(circle, rgba(206,147,216,.40) 0%, transparent 70%);
  top: -80px; right: -100px;
  animation-delay: -5s;
}
.spot-3 { /* голубое */
  width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(129,212,250,.30) 0%, transparent 70%);
  top: 35%; right: -140px;
  animation-delay: -10s;
}
.spot-4 { /* персиковое */
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,171,145,.24) 0%, transparent 70%);
  bottom: -80px; left: 10%;
  animation-delay: -7s;
}
.spot-5 { /* лиловое */
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(179,157,219,.30) 0%, transparent 70%);
  top: 55%; left: 30%;
  animation-delay: -13s;
}
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.06); }
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
p { margin: 0; }
strong { font-weight: 700; }

/* ---------- Dot grid pattern (из autofill) ---------- */
.dot-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.08) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  padding: 0 24px;
  margin: 0 auto;
  width: 100%;
}
.section { padding: 120px 0; position: relative; }
/* section--alt больше не создаёт оверлей — фон страницы сквозной */
.section--alt { position: relative; }
.section--dark {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: var(--text-on-dark);
  position: relative;
  overflow: hidden;
}
.section--dark::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 120%; height: 140%;
  background: radial-gradient(circle at 30% 20%, rgba(65,91,231,.25) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(141,130,243,.18) 0%, transparent 50%);
  pointer-events: none;
}
.section--dark h2 { color: #fff; }
.section--dark .section-header p { color: rgba(255,255,255,.7); }

.section-header {
  max-width: 820px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-header h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.035em;
}
.section-header p {
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 7px 14px;
  background: rgba(65,91,231,.10);
  border-radius: var(--r-full);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent-2);
  border-radius: 50%;
}
.eyebrow--light {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
.eyebrow--light::before { background: rgba(255,255,255,.9); }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 16px; left: 0; right: 0;
  z-index: 100;
  transition: all var(--d-norm) var(--ease-out);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 10px 10px 22px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-full);
  box-shadow: var(--sh-md);
  max-width: calc(var(--container) - 16px);
}
.nav.is-scrolled .nav-inner {
  background: rgba(255,255,255,.9);
  box-shadow: var(--sh-lg);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.015em;
}
.nav-logo em { font-style: normal; font-weight: 500; color: var(--text-secondary); }
.nav-logo img { border-radius: 6px; width: 28px; height: 28px; }
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}
.nav-links a { transition: color var(--d-fast); }
.nav-links a:hover { color: var(--text-primary); }

/* ---------- Buttons — pill (999px) везде, как и все бейджи на странице ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all var(--d-norm) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  line-height: 1;
}
.btn-sm  { padding: 10px 18px; font-size: 13px; }
.btn-lg  { padding: 17px 30px; font-size: 15px; }

/* PRIMARY — чёрная */
.btn-primary {
  background: var(--text-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(26,26,26,.15);
}
.btn-primary:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(26,26,26,.25);
}
.btn-primary:active { transform: translateY(0); }

/* SECONDARY — белая */
.btn-secondary {
  background: #fff;
  color: var(--text-primary);
  border-color: rgba(176,183,195,.35);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.btn-secondary:hover {
  border-color: var(--text-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.btn-secondary:active { transform: translateY(0); }

/* ---------- HERO ---------- */
.hero {
  padding: 150px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.25fr;
  gap: 50px;
  align-items: center;
}
.hero-left { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-full);
  backdrop-filter: blur(12px);
  margin-bottom: 28px;
  box-shadow: var(--sh-sm);
}
.pulse {
  width: 8px; height: 8px;
  background: var(--success-mid);
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success-mid);
  opacity: .4;
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.8); opacity: .5; }
  100% { transform: scale(2.4); opacity: 0; }
}

.hero-title {
  font-size: clamp(38px, 5.8vw, 72px);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -0.038em;
  margin-bottom: 24px;
}
.hero-title .never {
  font-style: normal;
  font-weight: 800;
  background: linear-gradient(135deg, #14171B 0%, #415BE7 55%, #8D82F3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-text {
  background: linear-gradient(135deg, #415BE7 0%, #8D82F3 50%, #E09A62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #415BE7;
  background: rgba(65,91,231,.08);
  border: 1px solid rgba(65,91,231,.18);
  padding: 8px 14px;
  border-radius: 999px;
  margin: 14px 0 20px;
  max-width: 560px;
  line-height: 1.5;
}
.hero-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 0 36px;
}
.hero-lead a {
  color: #14171B;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(65,91,231,.35);
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.hero-lead a:hover {
  color: #415BE7;
  text-decoration-color: #415BE7;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 580px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--r-full);
  backdrop-filter: blur(12px);
  transition: all var(--d-norm);
}
.chip:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.chip-dot {
  width: 7px; height: 7px;
  background: var(--c);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent);
}

/* ============ HERO RIGHT — Multiple screens mock-up ============ */
.hero-right {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 640px;
}
.hero-visual {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640px;
  max-width: 720px;
}

/* Главный планшет — основной dashboard экран */
.tablet {
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%) perspective(1400px) rotateY(-10deg) rotateX(4deg);
  width: 72%;
  aspect-ratio: 0.78 / 1;
  background: linear-gradient(145deg, #F8F4F0 0%, #F5EEF8 100%);
  border-radius: 28px;
  padding: 14px;
  box-shadow:
    0 40px 80px -20px rgba(65,91,231,.3),
    0 20px 40px rgba(0,0,0,.08),
    inset 0 2px 0 rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.8);
  z-index: 2;
  transition: transform var(--d-slow) var(--ease-out);
  animation: float-tablet 6s ease-in-out infinite;
}
.hero-visual:hover .tablet {
  transform: translateY(-50%) perspective(1400px) rotateY(0deg) rotateX(0deg);
}
@keyframes float-tablet {
  0%, 100% { transform: translateY(-50%) perspective(1400px) rotateY(-10deg) rotateX(4deg); }
  50% { transform: translateY(calc(-50% - 8px)) perspective(1400px) rotateY(-10deg) rotateX(4deg); }
}

/* Вторичный экран — AI чат (слева сверху) */
.screen-chat {
  position: absolute;
  top: 2%;
  left: 0;
  width: 42%;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 30px 60px -12px rgba(65,91,231,.25), 0 15px 30px rgba(0,0,0,.08);
  z-index: 3;
  transform: perspective(1200px) rotateY(8deg) rotateX(-2deg) rotateZ(-2deg);
  transition: transform var(--d-slow) var(--ease-out);
  animation: float-chat 7s ease-in-out infinite 1s;
}
.hero-visual:hover .screen-chat {
  transform: perspective(1200px) rotateY(4deg) rotateX(0deg) rotateZ(-1deg) translateY(-6px);
}
@keyframes float-chat {
  0%, 100% { transform: perspective(1200px) rotateY(8deg) rotateX(-2deg) rotateZ(-2deg); }
  50% { transform: perspective(1200px) rotateY(8deg) rotateX(-2deg) rotateZ(-2deg) translateY(-12px); }
}
.sc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 10px;
}
.sc-header__ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #2A2A2A 0%, #0D0D0D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.sc-header__ava::before {
  content: '';
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(108,134,255,.4) 0%, transparent 55%);
  animation: aiGlow 3s ease-in-out infinite;
}
.sc-header__ava svg { width: 16px; height: 16px; position: relative; z-index: 1; }
.sc-header__info { min-width: 0; flex: 1; }
.sc-header__info h6 {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 1px;
}
.sc-header__info span {
  font-size: 10px;
  color: var(--success);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sc-header__info span::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px rgba(22,163,74,.25);
}
.sc-msgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sc-msg {
  max-width: 85%;
  padding: 9px 12px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 14px;
}
.sc-msg--me {
  align-self: flex-end;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  border-bottom-right-radius: 4px;
  font-weight: 500;
  box-shadow: 0 6px 14px rgba(65,91,231,.2);
}
.sc-msg--ai {
  align-self: flex-start;
  background: rgba(246,246,246,.9);
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,.04);
  border-bottom-left-radius: 4px;
  animation: msg-in .6s var(--ease-out) both .4s;
}
.sc-msg--ai b { color: var(--accent-2); font-weight: 700; }
.sc-thinking {
  align-self: flex-start;
  display: inline-flex;
  gap: 3px;
  padding: 10px 12px;
  background: rgba(246,246,246,.8);
  border-radius: 14px 14px 14px 4px;
  border: 1px solid rgba(0,0,0,.04);
  animation: msg-in .5s var(--ease-out) both 1s;
}
.sc-thinking span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.sc-thinking span:nth-child(2) { animation-delay: .15s; }
.sc-thinking span:nth-child(3) { animation-delay: .3s; }

/* Третий экран — карточка станка (снизу-слева) */
.screen-machine {
  position: absolute;
  bottom: 3%;
  left: 5%;
  width: 40%;
  background: #fff;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.18), 0 15px 30px rgba(0,0,0,.08);
  z-index: 3;
  transform: perspective(1200px) rotateY(6deg) rotateZ(2deg);
  transition: transform var(--d-slow) var(--ease-out);
  animation: float-machine 8s ease-in-out infinite 2s;
}
.hero-visual:hover .screen-machine {
  transform: perspective(1200px) rotateY(3deg) rotateZ(1deg) translateY(-6px);
}
@keyframes float-machine {
  0%, 100% { transform: perspective(1200px) rotateY(6deg) rotateZ(2deg); }
  50% { transform: perspective(1200px) rotateY(6deg) rotateZ(2deg) translateY(-10px); }
}
.sm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sm-ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(65,91,231,.3);
}
.sm-ico svg { width: 18px; height: 18px; }
.sm-head__title { min-width: 0; flex: 1; }
.sm-head__title h6 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.sm-head__title span {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sm-head__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(77,182,172,.15);
  color: #2a8179;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.sm-head__status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #4DB6AC;
  box-shadow: 0 0 0 2.5px rgba(77,182,172,.3);
}
.sm-ring {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.sm-ring__svg {
  width: 64px; height: 64px;
  position: relative;
  flex-shrink: 0;
}
.sm-ring__svg svg { transform: rotate(-90deg); }
.sm-ring__arc {
  stroke-dasharray: 0 189;
  animation: ring-fill 2s var(--ease-out) forwards;
}
@keyframes ring-fill { to { stroke-dasharray: 174 189; } }
.sm-ring__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--success);
  letter-spacing: -0.02em;
}
.sm-ring__text { min-width: 0; flex: 1; }
.sm-ring__text h5 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 3px;
}
.sm-ring__text p {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.35;
}
.sm-params { display: flex; flex-direction: column; gap: 6px; }
.sm-param {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  padding: 6px 10px;
  background: rgba(246,246,246,.7);
  border-radius: 8px;
}
.sm-param span { color: var(--text-secondary); font-weight: 500; }
.sm-param b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-param b.ok { color: var(--success); }
.sm-param b.warn { color: var(--warning); }

.tablet-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #FAF6F3 0%, #F5EEF8 100%);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.tablet-screen::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .6;
  pointer-events: none;
}
.tablet-screen > * { position: relative; }

/* Top bar */
.t-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  backdrop-filter: blur(12px);
}
.t-topbar__dot {
  width: 7px; height: 7px;
  background: #16A34A;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
}
.t-topbar__title { color: var(--text-primary); }
.t-topbar__sub { color: var(--text-secondary); margin-left: auto; font-weight: 500; }

/* Hero greeting */
.t-hello {
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  backdrop-filter: blur(8px);
}
.t-hello__robot {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: radial-gradient(circle at 30% 25%, #2A2A2A 0%, #0D0D0D 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
  padding: 4px;
  position: relative;
  overflow: hidden;
}
.t-hello__robot::before {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 180%;
  background: radial-gradient(circle, rgba(108,134,255,.35) 0%, transparent 50%);
  pointer-events: none;
  animation: aiGlow 3s ease-in-out infinite;
}
@keyframes aiGlow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.t-hello__robot svg { position: relative; z-index: 1; }
.t-hello__robot svg { width: 100%; height: 100%; }
.t-hello__text { min-width: 0; flex: 1; }
.t-hello__text h5 {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 1px;
  color: var(--text-primary);
}
.t-hello__text p {
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Mini cards grid */
.t-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.t-cards--3 { grid-template-columns: 1.1fr .9fr 1fr; }
.t-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 10px 11px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  backdrop-filter: blur(8px);
}
.t-card__label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.t-card__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.t-card__value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;
}
.t-card__value em {
  font-style: normal;
  font-size: .5em;
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: 2px;
}
.t-card__value b { color: var(--success); font-weight: 800; }

/* Sparkline */
.t-spark {
  width: 56px; height: 24px;
  flex-shrink: 0;
}
.t-spark__line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: spark-draw 1.8s var(--ease-out) forwards;
}
@keyframes spark-draw { to { stroke-dashoffset: 0; } }

/* Trend arrow */
.t-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}
.t-trend svg { width: 11px; height: 11px; }
.t-trend--up { background: rgba(22,163,74,.12); color: var(--success); }
.t-trend--down { background: rgba(191,80,92,.12); color: var(--error); }

/* Mini kanban bars */
.t-kanban {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 42px;
}
.t-kanban b {
  display: block;
  height: 4px;
  width: var(--w);
  background: var(--c);
  border-radius: 999px;
  animation: fill-bar 1.4s var(--ease-out) forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes fill-bar { to { transform: scaleX(1); } }

/* Schedule Gantt */
.t-schedule {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 9px 11px 11px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.t-schedule__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.t-schedule__head span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.t-schedule__head b {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(65,91,231,.1);
  padding: 2px 8px;
  border-radius: 999px;
}
.t-schedule__track {
  position: relative;
  display: flex;
  height: 22px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0,0,0,.05);
}
.t-seg {
  position: relative;
  height: 100%;
  width: var(--w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(0,0,0,.5);
  animation: seg-in .8s var(--ease-out) both;
  overflow: hidden;
}
@keyframes seg-in {
  from { opacity: 0; transform: scaleX(.3); transform-origin: left; }
  to { opacity: 1; transform: none; }
}
.t-seg--done {
  background: linear-gradient(135deg, rgba(77,182,172,.4), rgba(77,182,172,.7));
  color: #fff;
  animation-delay: 0ms;
}
.t-seg--active {
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  animation-delay: 150ms;
}
.t-seg--plan {
  background: rgba(224,154,98,.35);
  color: rgba(0,0,0,.55);
  animation-delay: 300ms;
}
.t-seg--night {
  background: rgba(141,130,243,.25);
  color: rgba(0,0,0,.55);
  animation-delay: 450ms;
}
.t-seg__pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: seg-shimmer 2s ease-in-out infinite;
}
@keyframes seg-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.t-schedule__now {
  position: absolute;
  left: 60%;
  top: -3px; bottom: -3px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--text-primary), 0 0 8px rgba(0,0,0,.2);
  border-radius: 2px;
}
.t-schedule__now::before {
  content: '';
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  background: var(--text-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

/* Machines grid */
.t-machines {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 9px 11px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.t-machines__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.t-machines__head span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.t-machines__head b {
  font-size: 10px;
  color: var(--text-primary);
  font-weight: 700;
  background: rgba(77,182,172,.15);
  color: #2a8179;
  padding: 2px 8px;
  border-radius: 999px;
}
.t-machines__grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}
.t-dot {
  aspect-ratio: 1;
  border-radius: 3px;
  animation: dot-in .4s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
.t-dot--run { background: #4DB6AC; }
.t-dot--idle { background: #BDBDBD; }
.t-dot--setup { background: #FFB74D; }
.t-dot--alarm {
  background: #E57373;
  animation: dot-in .4s var(--ease-out) both, alarm-pulse 1.6s ease-in-out infinite 1s;
}
@keyframes dot-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes alarm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,115,115,.55); }
  50% { box-shadow: 0 0 0 4px rgba(229,115,115,0); }
}

/* Bottom row — AI decisions + compact activity */
.t-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.t-decisions {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 12px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.t-decisions::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 140%; height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(108,134,255,.4) 0%, transparent 50%);
  pointer-events: none;
  animation: ai-glow 4s ease-in-out infinite;
}
@keyframes ai-glow {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.t-decisions > * { position: relative; }
.t-decisions__ico {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(65,91,231,.4);
}
.t-decisions__ico svg { width: 14px; height: 14px; }
.t-decisions b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.t-decisions em {
  font-style: normal;
  font-size: 9.5px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}

/* Compact activity pill */
.t-activity {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(65,91,231,.08);
  border: 1px solid rgba(65,91,231,.18);
  border-radius: 14px;
  font-size: 11px;
  backdrop-filter: blur(8px);
}
.t-activity--compact {
  justify-content: center;
  gap: 8px;
  font-size: 10.5px;
  border-radius: 12px;
}
.t-activity__cat {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.t-activity__cat svg { width: 12px; height: 12px; }
.t-activity__name { font-weight: 700; color: var(--text-primary); }
.t-activity__args { color: var(--text-secondary); font-weight: 500; }
.t-activity__dots {
  display: inline-flex;
  gap: 2px;
}
.t-activity__dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #415BE7;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.t-activity__dots span:nth-child(2) { animation-delay: .15s; }
.t-activity__dots span:nth-child(3) { animation-delay: .3s; }

/* Floating pills around tablet */
.hero-float {
  position: absolute;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  animation: hover-y 5s ease-in-out infinite;
}
.hero-float--1 {
  top: 4%; left: -8%;
  animation-delay: 0s;
}
.hero-float--2 {
  top: 38%; right: -12%;
  animation-delay: -1.5s;
}
.hero-float--3 {
  bottom: 8%; left: -6%;
  animation-delay: -3s;
}
@keyframes hover-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-float__ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-float__ico svg { width: 15px; height: 15px; }
.hero-float__text { font-weight: 700; color: var(--text-primary); white-space: nowrap; font-size: 12.5px; }
.hero-float__sub { display: block; color: var(--text-secondary); font-size: 10.5px; font-weight: 500; margin-top: 1px; white-space: nowrap; }

/* ---------- METRICS strip ---------- */
.metrics {
  padding: 70px 0;
  position: relative;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-2xl);
  padding: 32px 24px;
  backdrop-filter: blur(16px);
  box-shadow: var(--sh-card);
}
.metric { text-align: center; padding: 16px; }
.metric-value {
  font-size: clamp(40px, 4.5vw, 58px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--accent-2);
  line-height: 1;
  margin-bottom: 6px;
}
.metric-value em { font-style: normal; font-size: .55em; color: var(--accent-2); }
.metric-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ---------- PROBLEM cards ---------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pain-card {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(20,23,27,.05);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: transform var(--d-norm) var(--ease-out), box-shadow var(--d-norm) var(--ease-out), border-color var(--d-norm) var(--ease-out);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  position: relative;
  display: flex;
  flex-direction: column;
}
.pain-card::before {
  content: '';
  position: absolute;
  left: 0; top: 26px;
  width: 3px;
  height: 28px;
  border-radius: 0 3px 3px 0;
  background: var(--pc);
  opacity: .6;
  transition: opacity var(--d-norm) var(--ease-out), height var(--d-norm) var(--ease-out);
}
.pain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(20,23,27,.14);
  border-color: color-mix(in srgb, var(--pc) 22%, transparent);
}
.pain-card:hover::before {
  opacity: 1;
  height: 40px;
}
.pain-num {
  display: block;
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pc);
  opacity: .7;
  margin-bottom: 14px;
}
.pain-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  color: var(--pc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform var(--d-norm) var(--ease-out), background var(--d-norm) var(--ease-out);
}
.pain-ico svg { width: 20px; height: 20px; }
.pain-card:hover .pain-ico {
  transform: scale(1.08) rotate(-4deg);
  background: color-mix(in srgb, var(--pc) 20%, transparent);
}
.pain-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
  color: #14171B;
  line-height: 1.3;
}
.pain-card > p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.pain-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,23,27,.07);
  font-size: 12.5px;
  line-height: 1.5;
  color: #727782;
  font-style: italic;
}
.pain-note svg {
  width: 14px;
  height: 14px;
  color: var(--pc);
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .85;
}

.callout {
  margin-top: 56px;
  padding: 32px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  border-radius: var(--r-xl);
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(65,91,231,.25) 0%, transparent 50%);
  pointer-events: none;
}
.callout > * { position: relative; }
.callout strong { color: #FFB74D; }
.callout--soft {
  background: rgba(255,255,255,.7);
  color: #2C3038;
  border: 1px solid rgba(20,23,27,.06);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px -20px rgba(20,23,27,.1);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.callout--soft::before {
  background: radial-gradient(circle at 30% 50%, rgba(65,91,231,.1) 0%, transparent 55%);
}
.callout--soft strong { color: #415BE7; }

/* ---------- SOLUTION cards ---------- */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.solution-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: transform var(--d-norm) var(--ease-out), box-shadow var(--d-norm) var(--ease-out), border-color var(--d-norm) var(--ease-out);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}
.solution-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tint);
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}
.solution-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint) 18%, transparent), transparent 70%);
  pointer-events: none;
  opacity: .55;
}
.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--tint) 35%, transparent);
}
.solution-card:hover::before { transform: scaleX(1); }

.solution-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.solution-num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--tint);
  padding: 6px 12px;
  background: color-mix(in srgb, var(--tint) 12%, transparent);
  border-radius: var(--r-sm);
  text-transform: uppercase;
}
.solution-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--d-norm) var(--ease-out), background var(--d-norm) var(--ease-out);
}
.solution-ico svg { width: 22px; height: 22px; }
.solution-card:hover .solution-ico {
  transform: scale(1.08) rotate(-4deg);
  background: color-mix(in srgb, var(--tint) 22%, transparent);
}

.solution-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.solution-card > p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.62;
  flex: 1;
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
}
.solution-card > p b {
  color: var(--text-primary);
  font-weight: 700;
}

.solution-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(20,23,27,.06);
  position: relative;
  z-index: 1;
}
.solution-chip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint) 18%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- AI HELPERS (по ролям) ---------- */
.ai-helpers-section { background: linear-gradient(180deg, transparent 0%, rgba(65,91,231,.03) 100%); }
.ai-helpers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ai-helper {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.05);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ai-helper::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hc);
  transform: scaleX(.3);
  transform-origin: left;
  transition: transform var(--d-slow) var(--ease-out);
}
.ai-helper:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px rgba(20,23,27,.12);
  border-color: color-mix(in srgb, var(--hc) 30%, transparent);
}
.ai-helper:hover::before { transform: scaleX(1); }
.ai-helper__ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--hc) 12%, transparent);
  color: var(--hc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ai-helper__ico svg { width: 22px; height: 22px; }
.ai-helper__role {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hc);
  background: color-mix(in srgb, var(--hc) 10%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.ai-helper h3 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #14171B;
  margin: 0 0 14px;
  line-height: 1.3;
}
.ai-helper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-helper li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #3A3F4A;
}
.ai-helper li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hc);
  opacity: .6;
}
@media (max-width: 1024px) {
  .ai-helpers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ai-helpers-grid { grid-template-columns: 1fr; }
  .ai-helper { padding: 22px 20px; }
}

@media (max-width: 1024px) {
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .solution-grid { grid-template-columns: 1fr; gap: 14px; }
  .solution-card { padding: 22px 20px; }
  .solution-card h3 { font-size: 20px; }
}

.roi-strip {
  margin-top: 40px;
  padding: 28px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  backdrop-filter: blur(12px);
}
.roi-strip > div { display: flex; flex-direction: column; gap: 4px; }
.roi-strip strong { font-weight: 600; font-size: 14px; color: var(--text-secondary); }
.roi-strip em { font-style: normal; font-size: 22px; font-weight: 700; color: var(--accent-2); }

/* ---------- EQUIPMENT types ---------- */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.equip-card {
  --c: #3B82F6;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  transition: all var(--d-norm) var(--ease-out);
}
.equip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
.eq-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.eq-ico svg { width: 24px; height: 24px; }
.equip-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.equip-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.equip-card p b {
  color: var(--text-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* ---------- PROTOCOLS STRIP ---------- */
.proto-strip {
  margin-top: 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: var(--r-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.proto-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(65,91,231,.25) 0%, transparent 55%);
  pointer-events: none;
}
.proto-strip > * { position: relative; }
.proto-strip__label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  flex-shrink: 0;
}
.proto-strip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.proto-tag {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  transition: all var(--d-norm);
}
.proto-tag:hover {
  background: rgba(65,91,231,.25);
  border-color: rgba(65,91,231,.5);
}

.note { margin-top: 28px; text-align: center; color: var(--text-secondary); font-size: 15px; }
.note b { color: var(--text-primary); font-weight: 700; }

/* ---------- SPLIT layouts ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.split-text h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.split-text p {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-list li { padding-left: 32px; position: relative; font-size: 15px; }
.check-list li b { display: block; color: var(--text-primary); font-weight: 600; }
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--success-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.big-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
.big-stat > div {
  padding: 18px;
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-md);
  backdrop-filter: blur(8px);
}
.big-stat span {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1;
}
.big-stat em { font-style: normal; font-size: 13px; color: var(--text-secondary); }

/* ---------- AUTOFILL — before/after compact compare ---------- */
.af-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 22px;
}
.af-compare__col {
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(20,23,27,.06);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
}
.af-compare__col--was {
  background: rgba(244,63,94,.04);
  border-color: rgba(244,63,94,.14);
}
.af-compare__col--now {
  background: rgba(22,163,74,.05);
  border-color: rgba(22,163,74,.18);
}
.af-compare__lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.af-compare__col--was .af-compare__lbl { color: #BE123C; }
.af-compare__col--now .af-compare__lbl { color: #15803D; }
.af-compare__lbl span {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.af-compare__col--was .af-compare__lbl span { background: rgba(244,63,94,.12); color: #BE123C; }
.af-compare__col--now .af-compare__lbl span { background: rgba(22,163,74,.15); color: #15803D; }
.af-compare__col p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #2C3038;
}
@media (max-width: 1024px) {
  .af-compare { grid-template-columns: 1fr; }
}

/* ---------- AUTOFILL DIALOG replica ---------- */
.autofill-dialog {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  transform: perspective(1200px) rotateY(-3deg) rotateX(2deg);
  transition: transform var(--d-slow) var(--ease-out);
}
.autofill-dialog:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0);
}
.af-header {
  position: relative;
  padding: 20px 22px;
  background: linear-gradient(135deg, #F5F5F0 0%, #F8F4F0 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
}
.af-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.08) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  opacity: .4;
}
.af-header > * { position: relative; }
.af-header__robot {
  width: 44px; height: 44px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  box-shadow: var(--sh-xs);
  flex-shrink: 0;
}
.af-header__title h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.af-header__title span {
  font-size: 12px;
  color: var(--text-secondary);
}
.af-header__step {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--text-primary);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
}
.af-body {
  padding: 24px;
  background: #fff;
}
.af-steps { display: flex; flex-direction: column; gap: 14px; }
.af-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  transition: all var(--d-norm);
}
.af-step--done {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: var(--success-soft);
}
.af-step--active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(26,26,26,.05);
}
.af-step__circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.af-step--done .af-step__circle {
  background: var(--success);
  color: #fff;
}
.af-step--active .af-step__circle {
  background: var(--text-primary);
  color: #fff;
}
.af-step__body { flex: 1; min-width: 0; }
.af-step__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.af-step__sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.af-step__pill {
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.af-step--done .af-step__pill {
  background: var(--success);
  color: #fff;
}
.af-step--active .af-step__pill {
  background: var(--text-primary);
  color: #fff;
}
.af-step__progress {
  margin-top: 10px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--r-full);
  overflow: hidden;
}
.af-step__progress b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  animation: progress-fill 2.2s ease-out infinite;
}
@keyframes progress-fill {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* ========= HERO COMPACT CNC DASHBOARD (inside .tablet) ========= */

/* AI-Мастер hello card */
.hcc-ai-hello {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(13,17,23,.05);
  position: relative;
  overflow: hidden;
}
.hcc-ai-hello::before {
  content: '';
  position: absolute;
  top: -30%; right: -20%;
  width: 50%; height: 160%;
  background: radial-gradient(circle, rgba(108,134,255,.14) 0%, transparent 60%);
  pointer-events: none;
  animation: ai-glow-hello 3s ease-in-out infinite;
}
@keyframes ai-glow-hello {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.hcc-ai-hello > * { position: relative; }
.hcc-ai-hello__robot {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: radial-gradient(circle at 30% 25%, #2A2A2A 0%, #0D0D0D 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
  padding: 3px;
  position: relative;
  overflow: hidden;
}
.hcc-ai-hello__robot::before {
  content: '';
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(108,134,255,.4) 0%, transparent 55%);
  animation: ai-glow-hello 3s ease-in-out infinite;
}
.hcc-ai-hello__robot svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.hcc-ai-hello__text { flex: 1; min-width: 0; }
.hcc-ai-hello__text h5 {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.hcc-ai-hello__text p {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.3;
}
.hcc-ai-hello__text p b {
  color: var(--accent-2);
  font-weight: 700;
}
.hcc-ai-hello__pulse {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.hcc-ai-hello__pulse span {
  width: 2px; height: 6px;
  background: var(--accent-2);
  border-radius: 1px;
  animation: ai-pulse-bar 1.2s ease-in-out infinite;
}
.hcc-ai-hello__pulse span:nth-child(2) { animation-delay: .15s; height: 9px; }
.hcc-ai-hello__pulse span:nth-child(3) { animation-delay: .3s; height: 4px; }
@keyframes ai-pulse-bar {
  0%, 100% { opacity: .4; transform: scaleY(.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

.hcc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.hcc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(13,17,23,.04);
}
.hcc-stat svg {
  width: 14px; height: 14px;
  color: var(--c);
  margin-bottom: 2px;
}
.hcc-stat b {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.hcc-stat span {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-secondary);
}

.hcc-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hcc-card {
  --c: #5ED7B2;
  position: relative;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(13,17,23,.05);
  overflow: hidden;
  transition: all var(--d-norm);
}
.hcc-card--error { --c: #F43F5E; }
.hcc-card--idle { --c: #E09A62; }

.hcc-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.hcc-card__title { min-width: 0; flex: 1; }
.hcc-card__title b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.hcc-card__model {
  display: block;
  font-size: 9px;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hcc-card__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--c);
  flex-shrink: 0;
}
.hcc-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c);
}
.hcc-card--error .hcc-card__dot {
  animation: hcc-pulse 1.6s ease-in-out infinite;
}
@keyframes hcc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 0%, transparent); }
}

.hcc-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* Health bar (10 segments + num) */
.hcc-card__bars {
  display: inline-flex;
  align-items: center;
  gap: 1.5px;
}
.hcc-card__bars b {
  width: 2px; height: 9px;
  border-radius: 1px;
  background: rgba(0,0,0,.06);
  display: inline-block;
}
.hcc-card__bars-num {
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

/* 3 mini gauges */
.hcc-card__gauges {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hcc-g {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hcc-g__ring {
  position: relative;
  width: 30px; height: 30px;
}
.hcc-g__ring svg {
  width: 100%; height: 100%;
}
.hcc-g__ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hcc-g__count {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hcc-g em {
  font-style: normal;
  font-size: 8px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}

.hcc-card__alarm {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: rgba(244,63,94,.08);
  border: 1px solid rgba(244,63,94,.2);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #F43F5E;
  animation: alarm-pulse 1.2s ease-in-out infinite;
}
.hcc-card__alarm svg { width: 11px; height: 11px; }

/* AI-Мастер автоматическое действие (светлая карточка) */
.hcc-ai-action {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(65,91,231,.18);
  border-left: 3px solid var(--accent-2);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(65,91,231,.08);
}
.hcc-ai-action__ico {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(65,91,231,.35);
}
.hcc-ai-action__ico svg { width: 12px; height: 12px; }
.hcc-ai-action__body { flex: 1; min-width: 0; }
.hcc-ai-action__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.hcc-ai-action__tag {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.hcc-ai-action__time {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  color: var(--success);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: rgba(22,163,74,.1);
  border-radius: 999px;
}
.hcc-ai-action__pulse {
  width: 5px; height: 5px;
  background: var(--success);
  border-radius: 50%;
  animation: hcc-pulse-small 1.6s ease-in-out infinite;
}
@keyframes hcc-pulse-small {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
  50% { box-shadow: 0 0 0 4px rgba(22,163,74,0); }
}
.hcc-ai-action__body p {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}
.hcc-ai-action__body p b {
  color: var(--accent-2);
  font-weight: 700;
}

/* ========= MONITORING DASHBOARD — реплика CNC Dashboard (dems-frontend) ========= */
.dash {
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 24px;
  box-shadow:
    0 30px 70px -20px rgba(13,17,23,.18),
    0 12px 24px rgba(13,17,23,.06);
  overflow: hidden;
  position: relative;
  padding: 20px;
}

/* ---------- Tabs (как в приложении) ---------- */
.dash-tabs {
  display: flex;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 14px;
}
.dash-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(0,0,0,.02);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--d-fast);
}
.dash-tab-pill:hover { background: rgba(0,0,0,.04); }
.dash-tab-pill svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.dash-tab-pill--active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.06);
}
.dash-tab-pill--active svg { color: var(--accent-2); }
.dash-tab-close {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 0;
  margin-left: 2px;
  cursor: pointer;
  transition: color var(--d-fast);
}
.dash-tab-close:hover { color: var(--text-primary); }

/* ---------- Actions row ---------- */
.dash-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.dash-btn-add,
.dash-btn-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--d-fast);
}
.dash-btn-add svg,
.dash-btn-search svg { width: 14px; height: 14px; }
.dash-btn-add:hover,
.dash-btn-search:hover {
  border-color: var(--text-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.dash-btn-search { padding: 8px; width: 36px; justify-content: center; }

/* ---------- 5 stat-карточек ---------- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.dash-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(176,183,195,.14);
  box-shadow:
    0 3px 12px rgba(var(--c-rgb, 59,130,246),.04),
    0 1px 4px rgba(13,17,23,.04);
  transition: all var(--d-norm);
}
.dash-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(13,17,23,.08); }
.dash-stat__ico {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, transparent), color-mix(in srgb, var(--c) 4%, transparent));
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-stat__ico svg { width: 16px; height: 16px; }
.dash-stat__num {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dash-stat__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ---------- Заголовок локации ---------- */
.dash-location {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(13,17,23,.04);
  margin-bottom: 16px;
}
.dash-location__ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.04));
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-location__ico svg { width: 15px; height: 15px; }
.dash-location__body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.dash-location__body b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.dash-location__count {
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-2);
  background: rgba(59,130,246,.08);
  border-radius: 999px;
}
.dash-location__stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-lchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
}
.dash-lchip svg { width: 10px; height: 10px; }
.dash-lchip--run { background: rgba(94,215,178,.1); color: #2a8179; }
.dash-lchip--idle { background: rgba(224,154,98,.1); color: #A0612D; }
.dash-lchip--err { background: rgba(244,63,94,.1); color: #BF505C; }

/* ---------- Split: cards + detail ---------- */
.dash-split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 14px;
  align-items: start;
}

/* ============ Машинная карточка (реплика _MachineCard) ============ */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mcard {
  --c: #5ED7B2;
  position: relative;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 20px;
  box-shadow:
    0 2px 10px rgba(13,17,23,.05),
    0 1px 4px rgba(13,17,23,.02);
  overflow: hidden;
  transition: all var(--d-norm) var(--ease-out);
  animation: mcard-in .5s var(--ease-out) both;
  animation-delay: var(--d, 0ms);
}
@keyframes mcard-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mcard:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c) 18%, transparent);
  box-shadow:
    0 16px 30px color-mix(in srgb, var(--c) 10%, transparent),
    0 8px 16px rgba(13,17,23,.06);
}
.mcard--error { --c: #F43F5E; }
.mcard--idle { --c: #E09A62; }
.mcard--work { --c: #5ED7B2; }

/* Декоративная орбита в углу */
.mcard-orb {
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 4%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.mcard:hover .mcard-orb {
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 10%, transparent) 0%, transparent 70%);
}

/* Header */
.mcard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
}
.mcard-head__main { min-width: 0; flex: 1; }
.mcard-head__main b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard-model {
  display: block;
  font-size: 10px;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  letter-spacing: -0.005em;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard-head__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}
.mcard-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--c);
}
.mcard-status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c);
}
.mcard--error .mcard-status__dot {
  animation: status-pulse 1.6s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 0%, transparent); }
}

/* Health bar (10 сегментов) */
.mcard-health {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mcard-health svg {
  width: 11px; height: 11px;
}
.mcard-health__bars {
  display: inline-flex;
  gap: 1.5px;
}
.mcard-health__bars b {
  width: 3px; height: 10px;
  border-radius: 1px;
  background: rgba(0,0,0,.06);
  display: inline-block;
}
.mcard-health__num {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 3 gauges */
.mcard-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.mcard-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gauge-ring {
  position: relative;
  width: 44px; height: 44px;
}
.gauge-ring svg {
  width: 100%; height: 100%;
}
.gauge-arc {
  transition: stroke-dasharray 1s var(--ease-out);
}
.gauge-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gauge-label {
  font-size: 9px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
}
.gauge-count {
  width: 44px; height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.gauge-count svg { width: 14px; height: 14px; }
.gauge-count span {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Orders list */
.mcard-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mcard-items li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 6px;
  align-items: flex-start;
  padding: 6px 8px;
  background: rgba(244,246,246,.5);
  border-radius: 10px;
}
.mcard-it__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  background: #5ED7B2;
}
.mcard-it__dot--pause { background: #E09A62; }
.mcard-it__dot--pending { background: var(--text-secondary); }
.mcard-it__body { min-width: 0; }
.mcard-it__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.mcard-it__id {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mcard-it__cnt {
  font-size: 9px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mcard-it__stage {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: color-mix(in srgb, var(--text-secondary) 60%, transparent);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alarm badge */
.mcard-alarm {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: linear-gradient(135deg, rgba(244,63,94,.08), rgba(244,63,94,.03));
  border: 1px solid rgba(244,63,94,.2);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  color: #F43F5E;
  animation: alarm-pulse 1.2s ease-in-out infinite;
}
.mcard-alarm svg { width: 12px; height: 12px; }
@keyframes alarm-pulse {
  0%, 100% { opacity: 1; border-color: rgba(244,63,94,.2); }
  50% { opacity: 0.7; border-color: rgba(244,63,94,.1); }
}

/* ============ Detail panel (MachineMonitoringTab) ============ */
.dd-panel {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 100px;
  box-shadow: 0 2px 8px rgba(13,17,23,.04);
  border: 1px solid rgba(176,183,195,.12);
}

/* Breadcrumb */
.dd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-wrap: wrap;
}
.dd-back {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.dd-back svg { width: 14px; height: 14px; }
.dd-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
}
.dd-tab svg { width: 12px; height: 12px; }
.dd-tab--active {
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(0,0,0,.04);
}
.dd-chevron {
  width: 12px; height: 12px;
  color: color-mix(in srgb, var(--text-secondary) 40%, transparent);
  flex-shrink: 0;
}

/* Block sections */
.dd-block {
  margin-bottom: 14px;
}
.dd-block:last-child { margin-bottom: 0; }
.dd-block__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}
.dd-block__label svg {
  width: 13px; height: 13px;
  opacity: .7;
}

/* Status block */
.dd-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(94,215,178,.08);
  border-radius: 10px;
  margin-bottom: 8px;
}
.dd-status__ico {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(94,215,178,.2);
  color: #2a8179;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dd-status__ico svg { width: 14px; height: 14px; }
.dd-status b {
  color: #2a8179;
  font-weight: 600;
  font-size: 13px;
  flex: 1;
}
.dd-status__net {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2a8179;
  background: rgba(94,215,178,.15);
  border: 1px solid rgba(94,215,178,.3);
  border-radius: 999px;
}

/* KV rows */
.dd-kv { display: flex; flex-direction: column; }
.dd-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.04);
  font-size: 12px;
}
.dd-kv__row:last-child { border-bottom: 0; }
.dd-kv__row span {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 11px;
}
.dd-kv__row b {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-kv__row b.mono { font-family: 'JetBrains Mono', 'Monaco', monospace; font-size: 11px; }

/* 4 компактных времени */
.dd-times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.dd-time {
  display: flex;
  flex-direction: column;
}
.dd-time span {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.dd-time b {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* 4-grid блока состояния системы */
.dd-grid4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.dd-mini {
  padding: 8px 10px;
  background: rgba(0,0,0,.02);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dd-mini span {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.dd-mini b {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}
.dd-mini b.ok { color: #2a8179; }
.dd-mini b.err { color: #F43F5E; }

/* Chart */
.dd-chart {
  background: linear-gradient(180deg, #FAFAFB, #fff);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 10px;
  padding: 10px;
  position: relative;
}
.dd-chart svg {
  width: 100%;
  height: 80px;
  display: block;
}
.dd-chart__line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: dd-draw 2.4s var(--ease-out) forwards;
}
@keyframes dd-draw { to { stroke-dashoffset: 0; } }
.dd-chart__legend {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 10px;
  color: var(--text-secondary);
}
.dd-chart__legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dd-chart__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Axes */
.dd-axes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dd-axis {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 10px;
}
.dd-axis__label {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.dd-axis__label svg { width: 14px; height: 14px; }
.dd-axis__body { flex: 1; min-width: 0; }
.dd-axis__title {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  display: block;
  line-height: 1.2;
}
.dd-axis__val {
  font-size: 11px;
  color: var(--text-secondary);
  display: block;
  margin-top: 1px;
  line-height: 1.2;
}
.dd-axis__val b {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dd-axis__val b.mono { font-family: 'JetBrains Mono', 'Monaco', monospace; }
.dd-axis__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  width: 70px;
}
.dd-axis__bar span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.dd-axis__bar::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 3px;
  order: 2;
  position: relative;
}
.dd-axis__bar b {
  display: block;
  height: 4px;
  width: var(--w);
  background: var(--c);
  border-radius: 3px;
  order: 2;
  position: absolute;
  transform-origin: left;
  animation: bar-fill 1.4s var(--ease-out) forwards;
  transform: scaleX(0);
}
@keyframes bar-fill { to { transform: scaleX(1); } }
.dd-axis__bar {
  position: relative;
}
.dd-axis__bar b {
  position: relative;
}

/* Subheader для списка параметров *//* Subheader для списка параметров */
.section-subheader {
  text-align: center;
  margin: 80px auto 36px;
  max-width: 600px;
}
.section-subheader h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.section-subheader p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Parameters grid */
.params-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.params-card {
  --c: #3B82F6;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  transition: all var(--d-norm) var(--ease-out);
}
.params-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
.params-ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.params-ico svg { width: 22px; height: 22px; }
.params-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.params-card ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.params-card li {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  padding-left: 14px;
  position: relative;
}
.params-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px; height: 5px;
  background: var(--c);
  border-radius: 50%;
}

/* ========= PREDICTIVE SECTION (dark, reimagined) ========= */
.pred-section { overflow: hidden; }

/* Блок "источники вокруг AI ядра" */
.pred-brain {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 56px;
  margin-top: 24px;
}
.pred-brain__label-top {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  padding: 6px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
}

.pred-brain__row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  width: 100%;
}

.pred-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(8px);
  transition: all var(--d-norm);
  cursor: default;
}
.pred-chip:hover {
  background: color-mix(in srgb, var(--c) 14%, rgba(255,255,255,.06));
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 15%, transparent);
}
.pred-chip__ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pred-chip__ico svg { width: 14px; height: 14px; }

/* Центральная сцена с ядром + SVG-линиями */
.pred-brain__stage {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pred-brain__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pred-brain__core {
  position: relative;
  z-index: 2;
  width: 180px; height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pred-brain__pulse {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(65,91,231,.25);
  animation: pred-pulse 4s ease-out infinite;
}
.pred-brain__pulse--1 { animation-delay: 0s; }
.pred-brain__pulse--2 { animation-delay: 1.3s; }
.pred-brain__pulse--3 { animation-delay: 2.6s; }
@keyframes pred-pulse {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 0; border-color: rgba(65,91,231,.5); }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-color: rgba(94,215,178,.2); }
}
.pred-brain__nucleus {
  position: relative;
  z-index: 3;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #1E293B 0%, #0F172A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 60px rgba(65,91,231,.5),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08);
  padding: 26px;
  animation: pred-core-breath 3s ease-in-out infinite;
}
@keyframes pred-core-breath {
  0%, 100% { box-shadow: 0 0 60px rgba(65,91,231,.5), 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.08); }
  50% { box-shadow: 0 0 90px rgba(65,91,231,.7), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1); }
}
.pred-brain__nucleus svg { width: 100%; height: 100%; }
.pred-brain__label {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 8px 16px;
  background: rgba(65,91,231,.15);
  border: 1px solid rgba(65,91,231,.3);
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  z-index: 4;
}
.pred-brain__label b {
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  margin-right: 8px;
}
.pred-brain__label span {
  font-size: 11px;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

/* 3 фазы цикла: Детекция → Действие → Верификация */
.pred-phases {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 48px;
}
.pred-phase {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 22px 20px;
  transition: all var(--d-norm);
}
.pred-phase:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(65,91,231,.35);
  transform: translateY(-3px);
}
.pred-phase__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pred-phase__ico svg { width: 22px; height: 22px; }
.pred-phase__ico--detect { background: rgba(94,215,178,.14); color: #5ED7B2; }
.pred-phase__ico--act { background: rgba(65,91,231,.18); color: #6C86FF; }
.pred-phase__ico--verify { background: rgba(94,215,178,.14); color: #5ED7B2; }
.pred-phase__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 6px;
}
.pred-phase h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.pred-phase ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pred-phase li {
  padding-left: 14px;
  position: relative;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}
.pred-phase li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(65,91,231,.6);
}
.pred-phase-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.3);
  font-size: 20px;
  font-weight: 200;
}

/* Реальный кейс */
.pred-case {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 48px;
}
.pred-case__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
  gap: 8px;
}
.pred-case__tag {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9fb6ff;
}
.pred-case__status {
  font-size: 12px;
  font-weight: 700;
  color: #5ED7B2;
  padding: 4px 12px;
  background: rgba(94,215,178,.12);
  border-radius: 999px;
}
.pred-case__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: step;
  position: relative;
}
.pred-case__steps li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  padding-left: 14px;
}
.pred-case__steps li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  bottom: -14px;
  width: 1px;
  background: rgba(255,255,255,.1);
}
.pred-case__steps li:last-child::before { display: none; }
.pred-case__steps li::after {
  content: '';
  position: absolute;
  left: -4px; top: 4px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(65,91,231,.6);
  box-shadow: 0 0 0 2px rgba(65,91,231,.2);
}
.pred-step__time {
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  padding-top: 2px;
}
.pred-step__body {
  min-width: 0;
}
.pred-step__phase {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  border-radius: 999px;
  margin-bottom: 6px;
}
.pred-step__body p {
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
  margin: 0;
}
.pred-step__body p b {
  color: #fff;
  font-weight: 700;
}

/* Stats bar */
.pred-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.pred-stat {
  padding: 24px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  text-align: center;
  transition: all var(--d-norm);
}
.pred-stat:hover {
  background: rgba(65,91,231,.1);
  border-color: rgba(65,91,231,.3);
}
.pred-stat b {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #fff 0%, #9fb6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pred-stat span {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  line-height: 1.4;
}

/* ========= TOIR SECTION — реплика модуля ТОиР из dems-frontend ========= */

/* 4 stat-карточки эффективности */
.toir-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}
.toir-stat {
  padding: 22px 20px;
  background: #fff;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 14px;
  box-shadow:
    0 3px 12px color-mix(in srgb, var(--c) 8%, transparent),
    0 1px 4px rgba(13,17,23,.04);
  text-align: center;
  transition: all var(--d-norm);
}
.toir-stat:hover { transform: translateY(-3px); box-shadow: 0 10px 25px color-mix(in srgb, var(--c) 15%, transparent); }
.toir-stat__val {
  font-size: 34px;
  font-weight: 800;
  color: var(--c);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.toir-stat__val em {
  font-style: normal;
  font-size: .55em;
  font-weight: 700;
  margin-left: 2px;
}
.toir-stat__lbl {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- KANBAN DOSKA ---------- */
.kanban {
  background: #fff;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 24px;
  padding: 18px 18px 20px;
  box-shadow:
    0 30px 70px -20px rgba(13,17,23,.14),
    0 10px 20px rgba(13,17,23,.05);
  margin-bottom: 40px;
  overflow: hidden;
}
.kanban__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.kanban__head-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kanban__head-title b {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.kanban__count {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 999px;
}
.kanban__head-filters {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.kanban__filter {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--d-fast);
}
.kanban__filter:hover { background: rgba(0,0,0,.04); color: var(--text-primary); }
.kanban__filter--active {
  background: var(--text-primary);
  color: #fff;
}
.kanban__add {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--text-primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--d-fast);
}
.kanban__add svg { width: 14px; height: 14px; }
.kanban__add:hover { background: #000; }

/* Колонки */
.kanban__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  overflow-x: auto;
}
.kanban-col {
  padding: 4px 10px;
  border-right: 1px dashed rgba(0,0,0,.08);
  min-width: 200px;
}
.kanban-col:last-child { border-right: 0; }
.kanban-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 12px;
}
.kanban-col__bar {
  width: 3px; height: 14px;
  border-radius: 2px;
}
.kanban-col__head b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  flex: 1;
}
.kanban-col__count {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kanban-col__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Карточка заявки */
.kcard {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow:
    0 1px 3px rgba(13,17,23,.04),
    0 4px 8px rgba(13,17,23,.04);
  transition: all var(--d-norm);
  opacity: 0;
  transform: translateY(8px);
  animation: kcard-in .5s var(--ease-out) forwards;
  animation-delay: var(--d, 0ms);
  cursor: pointer;
}
@keyframes kcard-in { to { opacity: 1; transform: none; } }
.kcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(13,17,23,.08), 0 2px 6px rgba(13,17,23,.04);
  border-color: rgba(65,91,231,.25);
}
.kcard--overdue {
  border-color: rgba(217,45,32,.35);
  background: linear-gradient(180deg, #fff 0%, rgba(217,45,32,.02) 100%);
  animation: kcard-in .5s var(--ease-out) forwards, kcard-overdue-pulse 2s ease-in-out infinite 1s;
}
@keyframes kcard-overdue-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(13,17,23,.04), 0 4px 8px rgba(217,45,32,.1); }
  50% { box-shadow: 0 1px 3px rgba(13,17,23,.04), 0 8px 20px rgba(217,45,32,.25); }
}
.kcard--done { opacity: .75; }

.kcard__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  letter-spacing: -0.01em;
}
.kcard__sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 4px;
}
.kcard__sub svg { width: 14px; height: 14px; opacity: .7; }
.kcard__tag {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 6px;
  margin-top: 6px;
}
.kcard__tag--urgent {
  background: #FDE8E8;
  color: #F04438;
}
.kcard__tag--done {
  background: rgba(3,152,85,.12);
  color: #039855;
}
.kcard__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.kcard__avatars {
  display: inline-flex;
  align-items: center;
}
.kcard__ava {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-left: -14px;
  position: relative;
  z-index: calc(10 - var(--i, 0));
}
.kcard__ava:first-child { margin-left: 0; }
.kcard__ava--more {
  background: #E5E3DC !important;
  color: var(--text-primary);
}
.kcard__noassign {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
}
.kcard__date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.kcard__date svg { width: 14px; height: 14px; }
.kcard__date--overdue {
  color: #D92D20;
  font-weight: 700;
}

/* ========= TOIR DETAIL (без split — только карточка заявки) ========= */
.toir-detail {
  margin-bottom: 40px;
}

/* ========= Ticket Dialog (точная реплика work_order_dialog) ========= */
/* Радиусы из AppRadii: xs=6, sm=10, md=14, lg=20 */
.toir-ticket {
  background: #FFFFFF;
  border: 1px solid rgba(176,183,195,.1);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15), 0 8px 20px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Header (work_order_header) — padding vertical 12, border-bottom border@0.1 */
.toir-ticket__head {
  padding: 12px 0;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(176,183,195,.1);
}
.toir-ticket__head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 18px;
}
.toir-ticket__num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 2px;
}
.toir-ticket__sub {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
/* Close icon-button (AppIconButton style) */
.toir-ticket__close {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--d-fast);
  flex-shrink: 0;
}
.toir-ticket__close:hover { background: rgba(0,0,0,.04); }
.toir-ticket__close svg { width: 18px; height: 18px; }

/* Actions row — margin top 10, padding left 18 right 16, Wrap spacing 8×6 */
.toir-ticket__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 10px;
  padding: 0 16px 0 18px;
}
/* AppButton secondary size small: padding ~8×14, radius md (14), border, white bg */
.tt-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid rgba(176,183,195,.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all var(--d-fast);
}
.tt-action svg { width: 13px; height: 13px; }
.tt-action:hover { border-color: var(--text-primary); background: rgba(0,0,0,.02); }
/* В коде: foregroundColor = цвет по смыслу. Secondary кнопка просто меняет цвет ИКОНКИ/ТЕКСТА */
.tt-action--done { color: #10B981; }
.tt-action--pause { color: #F59E0B; }
.tt-action--assign { color: #8B5CF6; }
.tt-action--play { color: #F59E0B; }
.tt-action--cancel { color: #EF4444; }

/* Body: sidebar 220 + content */
.toir-ticket__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 400px;
}

/* ========== Sidebar ========== */
/* bg #F0F7FE @ 0.3, border-right border@0.08 */
.toir-ticket__side {
  background: rgba(240,247,254,.3);
  border-right: 1px solid rgba(176,183,195,.08);
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
}

/* Quick Info (padding horizontal 16) */
.tt-quick {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Quick info card: padding 14×10, radius md (14), border border@0.1, shadow black@0.04 */
.tt-quick__row {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid rgba(176,183,195,.1);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.tt-quick__dot {
  width: 8px; height: 8px;
  background: var(--c);
  border-radius: 50%;
  flex-shrink: 0;
}
.tt-quick__lbl {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 10px;
}
.tt-quick__val {
  font-size: 13px;
  font-weight: 600;
  margin-left: auto;
}

/* Divider: SizedBox 24 + padding horizontal 20 + 1px + SizedBox 24 */
.tt-divider {
  margin: 24px 20px;
  height: 1px;
  background: rgba(176,183,195,.1);
}

/* Navigation items: outer padding 12×3, inner padding 16×14, radius md (14) */
.tt-nav-list {
  display: flex;
  flex-direction: column;
}
.tt-nav {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin: 3px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 14px;
  cursor: pointer;
  transition: background var(--d-fast);
  position: relative;
}
.tt-nav svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-right: 12px;
}
.tt-nav:hover { background: rgba(0,0,0,.03); }
/* Active: bg #F5F3EE, text primaryText, w600 + dot 6×6 right */
.tt-nav--active {
  background: #F5F3EE;
  color: var(--text-primary);
  font-weight: 600;
}
.tt-nav--active svg { color: var(--text-primary); }
/* ИЗ БЭЙДЖА em — только в Kanban-карточках, а в nav их нет */
.tt-nav em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 8px;
}
.tt-nav--active em { color: var(--text-primary); }
/* Индикатор-точка справа */
.tt-nav__dot {
  width: 7px; height: 7px;
  background: var(--error);
  border-radius: 50%;
  margin-left: auto;
  animation: tt-nav-dot 1.4s ease-in-out infinite;
}
@keyframes tt-nav-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.5); }
  50% { box-shadow: 0 0 0 4px rgba(244,63,94,0); }
}
.tt-nav__indicator {
  margin-left: auto;
  width: 6px; height: 6px;
  background: var(--text-primary);
  border-radius: 50%;
}

/* ========== Content ========== */
/* Padding 24 как в checklist_tab */
.toir-ticket__content {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.toir-ticket__tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toir-ticket__tab-title > span:first-child {
  font-size: 11px;
  font-weight: 700;
  color: rgba(114,119,130,.6);
  letter-spacing: 1px;
}
.toir-ticket__progress {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}
.toir-ticket__progress b { color: #10B981; font-weight: 700; }

/* ========== Checklist ========== */
/* Step card: margin-bottom 12, padding 16, radius md (14) */
.toir-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toir-check__item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(176,183,195,.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
  transition: all var(--d-norm);
}
/* Completed/failed/skipped: border 1.5px cited statusColor@0.3 */
.toir-check__item--done {
  border: 1.5px solid rgba(16,185,129,.3);
}
.toir-check__item--running {
  border: 1.5px solid rgba(245,158,11,.3);
  animation: tt-running 2s ease-in-out infinite;
}
@keyframes tt-running {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.15); }
  50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}

/* Step indicator 36×36, radius sm (10), bg color@0.12, border color@0.25 */
.toir-check__circle {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(59,130,246,.9);
  flex-shrink: 0;
}
.toir-check__circle svg { width: 18px; height: 18px; }
.toir-check__item--done .toir-check__circle {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.25);
  color: #10B981;
}
.toir-check__item--running .toir-check__circle {
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.25);
  color: #F59E0B;
}

.toir-check__body { min-width: 0; }
.toir-check__body b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}
.toir-check__item--done .toir-check__body b {
  color: var(--text-secondary);
  text-decoration: line-through;
}
.toir-check__result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.toir-check__result em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.toir-check__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 6px;
}
.toir-check__chip--ok { background: rgba(16,185,129,.12); color: #0F9874; }
.toir-check__chip--run { background: rgba(245,158,11,.12); color: #B45309; }
.toir-check__chip--wait { background: rgba(100,116,139,.1); color: #64748B; }

.toir-check__dots {
  display: inline-flex;
  gap: 3px;
}
.toir-check__dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: tt-dots 1.2s ease-in-out infinite;
}
.toir-check__dots span:nth-child(2) { animation-delay: .15s; }
.toir-check__dots span:nth-child(3) { animation-delay: .3s; }
@keyframes tt-dots {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1); }
}

/* Action buttons (padding 8, icon 22px) */
.toir-check__acts {
  display: inline-flex;
  gap: 2px;
  flex-shrink: 0;
}
.toir-check__act {
  width: 38px; height: 38px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--d-fast);
}
.toir-check__act svg { width: 22px; height: 22px; opacity: .3; transition: opacity var(--d-fast); }
.toir-check__act:hover svg { opacity: 1; }
.toir-check__act--ok { color: #10B981; }
.toir-check__act--ok:hover { background: rgba(16,185,129,.08); }
.toir-check__act--fail { color: #EF4444; }
.toir-check__act--fail:hover { background: rgba(239,68,68,.08); }
.toir-check__act--skip { color: var(--text-secondary); }
.toir-check__act--skip:hover { background: rgba(0,0,0,.04); }

/* ========== Materials (work_order_materials_tab style) ========== */
.toir-mat {
  margin-top: 4px;
}
.toir-mat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(114,119,130,.5);
  letter-spacing: 0.8px;
}
.toir-mat__count {
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* Material card: padding 16, radius md (14), border success@0.3 (reserved), shadow black@0.03 */
.toir-mat__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
/* Icon 48×48, radius sm (10), bg secondaryText@0.06 */
.toir-mat__ico {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(114,119,130,.06);
  color: rgba(114,119,130,.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toir-mat__ico svg { width: 24px; height: 24px; }
.toir-mat__info { flex: 1; min-width: 0; }
.toir-mat__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.toir-mat__title b {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Reserve badge: padding 8×2, radius xs (6), bg success@0.1 */
.toir-mat__reserve {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #10B981;
  background: rgba(16,185,129,.1);
  border-radius: 6px;
}
.toir-mat__info em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-secondary);
}
.toir-mat__meta {
  display: inline-block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
/* Quantity container: padding 16×8, radius xs (6), bg secondaryText@0.05 */
.toir-mat__qty {
  padding: 8px 16px;
  background: rgba(114,119,130,.05);
  border-radius: 6px;
  text-align: center;
  flex-shrink: 0;
}
.toir-mat__qty b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.toir-mat__qty span {
  display: inline;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 4px;
}
/* Cost: 80px width, 14px w600 accentPrimary */
.toir-mat__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-align: right;
  min-width: 80px;
  flex-shrink: 0;
}

/* ========= PHONE mockup АРМ ремонтника ========= */
.toir-phone-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.toir-phone-label {
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.toir-phone {
  width: 280px;
  background: #1A1A1A;
  border-radius: 36px;
  padding: 10px 10px 14px;
  box-shadow: 0 30px 60px -15px rgba(0,0,0,.4), 0 15px 30px rgba(0,0,0,.15);
  position: relative;
}
.toir-phone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 6px;
  background: #0D0D0D;
  border-radius: 4px;
}
.toir-phone__screen {
  background: #fff;
  border-radius: 26px;
  padding: 28px 14px 16px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.toir-phone__home {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 3px;
  background: rgba(255,255,255,.25);
  border-radius: 2px;
}
.toir-phone__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding: 0 4px;
}
.toir-phone__bars {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.toir-phone__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}
.toir-phone__head b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.toir-phone__head em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.toir-phone__ava {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
}
.toir-phone__filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}
.toir-phone__fchip {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0,0,0,.04);
  border-radius: 999px;
  white-space: nowrap;
}
.toir-phone__fchip--active {
  background: var(--text-primary);
  color: #fff;
}
.toir-phone__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.tp-ticket {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.tp-ticket--urgent {
  border-color: rgba(217,45,32,.3);
  background: linear-gradient(180deg, #fff, rgba(217,45,32,.03));
}
.tp-ticket--running {
  border-color: rgba(245,158,11,.25);
}
.tp-ticket__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.tp-ticket__pri {
  font-size: 10px;
  font-weight: 700;
  color: #D92D20;
  padding: 2px 8px;
  background: rgba(217,45,32,.1);
  border-radius: 999px;
}
.tp-ticket__pri--run {
  color: #B45309;
  background: rgba(245,158,11,.12);
}
.tp-ticket__pri--plan {
  color: var(--accent-2);
  background: rgba(65,91,231,.1);
}
.tp-ticket__time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}
.tp-ticket b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.01em;
}
.tp-ticket p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.tp-ticket__bar {
  height: 3px;
  background: rgba(0,0,0,.06);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.tp-ticket__bar b {
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, #F59E0B, #E09A62);
  border-radius: 2px;
  animation: bar-fill-toir 1.4s var(--ease-out) forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes bar-fill-toir { to { transform: scaleX(1); } }
.toir-phone__fab {
  position: absolute;
  bottom: 26px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--text-primary);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.3);
}
.toir-phone__fab svg { width: 18px; height: 18px; }

/* ========= Triggers ========= */
.toir-triggers {
  background: #fff;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(13,17,23,.05);
  margin-bottom: 40px;
}
.toir-triggers__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  flex-wrap: wrap;
}
.toir-triggers__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 3px 10px;
  background: rgba(65,91,231,.1);
  border-radius: 999px;
  margin-bottom: 6px;
}
.toir-triggers__head > div:first-child b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.toir-triggers__head > div:first-child em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.toir-triggers__head > div:first-child em b {
  display: inline;
  color: var(--accent-2);
  font-weight: 700;
  font-size: inherit;
}
.toir-triggers__next {
  text-align: right;
}
.toir-triggers__next span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 3px;
}
.toir-triggers__next b {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.toir-triggers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.toir-trig {
  padding: 16px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 14px;
  transition: all var(--d-norm);
}
.toir-trig--active {
  background: linear-gradient(135deg, rgba(224,154,98,.06), rgba(224,154,98,.02));
  border-color: rgba(224,154,98,.3);
  box-shadow: 0 6px 16px rgba(224,154,98,.12);
}
.toir-trig__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.toir-trig__ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toir-trig__ico svg { width: 16px; height: 16px; }
.toir-trig__head > div { flex: 1; }
.toir-trig__head b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.toir-trig__head em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.toir-trig__pct {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.toir-trig__bar {
  height: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.toir-trig__bar b {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--c);
  border-radius: 3px;
  animation: bar-fill-toir 1.6s var(--ease-out) forwards;
  transform-origin: left;
  transform: scaleX(0);
}
.toir-trig__foot {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
}
.toir-trig__foot b {
  color: var(--text-primary);
  font-weight: 700;
}

/* ========= AI chat по заявке ========= */
.toir-ai {
  background: #fff;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 6px 18px rgba(13,17,23,.05);
  margin-bottom: 40px;
}
.toir-ai__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  flex-wrap: wrap;
}
.toir-ai__ava {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, #2A2A2A 0%, #0D0D0D 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.toir-ai__ava::before {
  content: '';
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(108,134,255,.3) 0%, transparent 55%);
  animation: ai-glow-hello 3s ease-in-out infinite;
}
.toir-ai__ava svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.toir-ai__info { flex: 1; min-width: 0; }
.toir-ai__info b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.toir-ai__info span {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.toir-ai__sources {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.toir-ai__sources span {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(0,0,0,.04);
  border-radius: 999px;
}

.toir-ai__chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toir-ai__msg {
  max-width: 85%;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 14px;
}
.toir-ai__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  font-weight: 500;
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 14px rgba(65,91,231,.2);
}
.toir-ai__msg--ai {
  align-self: flex-start;
  background: rgba(246,246,246,.8);
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,.04);
  border-bottom-left-radius: 4px;
}
.toir-ai__msg--ai b { color: var(--accent-2); font-weight: 700; }

.toir-ai__activity {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text-primary);
  max-width: 85%;
  margin-left: 0;
}
.toir-ai__cat {
  width: 20px; height: 20px;
  background: rgba(22,163,74,.12);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.toir-ai__activity > span:nth-child(2) {
  color: var(--text-secondary);
  font-weight: 500;
}
.toir-ai__done {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--success);
  padding: 1px 8px;
  background: rgba(22,163,74,.1);
  border-radius: 999px;
}

/* ========= Features grid ========= */
.toir-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.toir-feat {
  --c: #3B82F6;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  transition: all var(--d-norm);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
}
.toir-feat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--c) 14%, transparent);
}
.toir-feat__ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.toir-feat__ico svg { width: 20px; height: 20px; }
.toir-feat h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.toir-feat p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ========= AI CHAT — точная реплика AiChatPage (full-screen) ========= */
.chat-section { position: relative; }

/* Tokens */
.aic {
  --aic-text-primary: #1A1A1A;
  --aic-text-body:    #3D3929;
  --aic-text-sec:     #6B6A68;
  --aic-text-muted:   #B1ADA1;
  --aic-accent:       #1A1A1A;
  --aic-accent-light: #EDEDED;
  --aic-border:       rgba(229,227,220,.55);
  --aic-border-solid: #E5E3DC;
  --aic-dots:         #D5D5D5;
  --aic-surface:      #FFFFFF;
  --aic-link:         #1A1A1A;

  position: relative;
  background: var(--aic-surface);
  border: 1px solid var(--aic-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px 2px rgba(0,0,0,.04), 0 1px 6px 0 rgba(0,0,0,.02);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  min-height: 640px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dotted background */
.aic__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--aic-dots) 1.2px, transparent 1.5px);
  background-size: 24px 24px;
  z-index: 0;
}

/* Top-bar */
.aic__topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
}
.aic__hbtn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--aic-border-solid);
  color: var(--aic-text-sec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  padding: 0;
}
.aic__hbtn:hover { background: #FAF9F6; }
.aic__hbtn svg { width: 15px; height: 15px; }
.aic__title {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--aic-text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Message list */
.aic__list {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px 40px;
  overflow: hidden;
}
.aic__list-inner {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* User message — white card, no gradient */
.aic-user {
  align-self: flex-end;
  max-width: 540px;
  margin: 20px 0 4px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--aic-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px 2px rgba(0,0,0,.04), 0 1px 6px 0 rgba(0,0,0,.02);
  font-size: 15px;
  line-height: 1.55;
  color: var(--aic-text-body);
  animation: aic-in .5s var(--ease-out) both;
}

/* AI message — NO bubble, just text next to avatar */
.aic-ai {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0 4px;
  animation: aic-in .5s var(--ease-out) both;
}
.aic-ai__ava {
  width: 26px; height: 26px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 7px;
  background: var(--aic-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aic-ai__ava svg { width: 14px; height: 14px; }
.aic-ai__body { flex: 1; min-width: 0; }
.aic-ai__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--aic-text-body);
  margin: 0 0 8px;
}
.aic-ai__body p:last-child { margin-bottom: 0; }
.aic-ai__body strong { font-weight: 600; color: var(--aic-text-primary); }
.aic-ai__body a {
  color: var(--aic-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 500;
}
.aic-ai__body ol {
  margin: 10px 0;
  padding-left: 22px;
  counter-reset: aic-ol;
  list-style: none;
}
.aic-ai__body ol li {
  counter-increment: aic-ol;
  position: relative;
  font-size: 15px;
  line-height: 1.6;
  color: var(--aic-text-body);
  margin-bottom: 4px;
}
.aic-ai__body ol li::before {
  content: counter(aic-ol) ".";
  position: absolute;
  left: -22px;
  color: var(--aic-text-primary);
  font-weight: 600;
}

/* Actions row — 4 outline icons */
.aic-actions {
  display: flex;
  gap: 2px;
  padding: 2px 0 10px 40px;
}
.aic-act {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--aic-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  padding: 0;
}
.aic-act:hover { background: rgba(26,26,26,.05); color: var(--aic-text-primary); }
.aic-act--on { background: var(--aic-accent-light); color: var(--aic-text-primary); }
.aic-act svg { width: 14px; height: 14px; }

/* Pixel robot (walks above composer) */
.aic-robot {
  position: absolute;
  left: 50%;
  bottom: 180px;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 48px));
  height: 36px;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.aic-robot__sprite {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 36px; height: 36px;
  animation: aic-robot-walk 18s ease-in-out infinite, aic-robot-bounce .55s ease-in-out infinite;
}
.aic-robot__sprite svg {
  width: 100%; height: 100%;
  shape-rendering: crispEdges;
  display: block;
}
.aic-robot__eye {
  animation: aic-robot-blink 4.2s infinite;
}
@keyframes aic-robot-walk {
  0%   { left: 10%; }
  48%  { left: 80%; }
  50%  { left: 80%; transform: translateX(0) scaleX(-1); }
  98%  { left: 10%; transform: translateX(0) scaleX(-1); }
  100% { left: 10%; transform: translateX(0) scaleX(1); }
}
@keyframes aic-robot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes aic-robot-blink {
  0%, 92%, 100% { opacity: 1; }
  94%, 97% { opacity: 0; }
}

/* Composer */
.aic__composer {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  max-width: 760px;
  width: calc(100% - 48px);
  padding: 12px 0 0;
}
.aic__composer-card {
  background: #fff;
  border: 1px solid var(--aic-border);
  border-radius: 20px;
  box-shadow: 0 4px 20px 2px rgba(0,0,0,.04), 0 1px 6px 0 rgba(0,0,0,.02);
  display: flex;
  flex-direction: column;
}
.aic__input {
  padding: 18px 20px 8px;
  min-height: 80px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--aic-text-body);
}
.aic__hint { color: var(--aic-text-muted); font-size: 16px; }
.aic__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px 12px;
}

/* Think-pill */
.aic__think {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--aic-border-solid);
  color: var(--aic-text-sec);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms ease;
}
.aic__think svg { width: 14px; height: 14px; }
.aic__think--on {
  background: var(--aic-accent);
  border-color: var(--aic-accent);
  color: #fff;
}

/* Send button */
.aic__send {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--aic-accent);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
  padding: 0;
}
.aic__send:hover { transform: translateY(-1px); }
.aic__send svg { width: 16px; height: 16px; }

/* Disclaimer */
.aic__disclaimer {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 8px 0 14px;
  text-align: center;
  font-size: 11px;
  color: var(--aic-text-muted);
}

/* Animations */
@keyframes aic-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 1024px) {
  .aic { min-height: 580px; max-width: 100%; }
  .aic-robot { bottom: 172px; }
}
@media (max-width: 640px) {
  .aic { min-height: 520px; border-radius: 16px; }
  .aic__list { padding: 0 14px 30px; }
  .aic__composer { width: calc(100% - 24px); }
  .aic-robot { bottom: 168px; width: calc(100% - 24px); }
  .aic__title { display: none; }
  .aic-actions { padding-left: 40px; }
  .aic-user { font-size: 14px; padding: 12px 16px; }
  .aic-ai__body p, .aic-ai__body ol li { font-size: 14px; }
}

/* ========================================================
   AI-МАСТЕР ЦЕХА — dashboard + cycle + capabilities + tools
   ======================================================== */

.aim .section-header { margin-bottom: 30px; }
.aim .section-header--sub { margin-top: 60px; margin-bottom: 24px; }
.aim .section-header--sub h3 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #14171B;
  margin: 0;
}
.aim .section-lede {
  max-width: 820px;
  margin: 10px auto 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4A4F5A;
  text-align: center;
}
.aim .section-header--sub .section-lede { text-align: center; }

@keyframes rotate { to { transform: rotate(360deg); } }

/* ---------- Dashboard ---------- */
.aim-dash {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 28px;
  box-shadow: 0 30px 80px -30px rgba(20,23,27,.15), 0 10px 30px -10px rgba(20,23,27,.06);
  padding: 28px;
  overflow: hidden;
  position: relative;
}
.aim-dash::before {
  content: '';
  position: absolute;
  inset: -80px -80px auto auto;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(65,91,231,.1), transparent 70%);
  pointer-events: none;
}

.aim-dash__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.aim-dash__status {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aim-dash__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #5ED7B2;
  box-shadow: 0 0 0 4px rgba(94,215,178,.25);
  animation: aim-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes aim-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,215,178,.45); }
  50%      { box-shadow: 0 0 0 10px rgba(94,215,178,0); }
}
.aim-dash__status b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #14171B;
  letter-spacing: -0.01em;
}
.aim-dash__status em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #727782;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.aim-dash__chips {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.aim-chipline {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(65,91,231,.08);
  color: #415BE7;
  border: 1px solid rgba(65,91,231,.15);
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  letter-spacing: 0.02em;
}
.aim-chipline--live {
  background: rgba(94,215,178,.12);
  color: #0A9B6A;
  border-color: rgba(94,215,178,.3);
  text-transform: uppercase;
  position: relative;
  padding-left: 20px;
}
.aim-chipline--live::before {
  content: '';
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0A9B6A;
  animation: aim-pulse-sm 1.5s ease-in-out infinite;
}
@keyframes aim-pulse-sm {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* KPI grid */
.aim-dash__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.aim-kpi {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.aim-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -10px rgba(20,23,27,.12);
}
.aim-kpi svg {
  width: 22px; height: 22px;
  color: var(--c);
  flex-shrink: 0;
  padding: 10px;
  box-sizing: content-box;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border-radius: 12px;
}
.aim-kpi b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: #14171B;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.aim-kpi em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #727782;
  margin-top: 4px;
}

/* Two-column grid */
.aim-dash__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 18px;
}

/* Decision feed */
.aim-feed {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 18px;
  padding: 20px 20px 8px;
}
.aim-feed__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,23,27,.06);
  margin-bottom: 10px;
}
.aim-feed__head b {
  font-size: 14px;
  font-weight: 700;
  color: #14171B;
}
.aim-feed__head span {
  font-size: 11px;
  color: #727782;
  font-weight: 500;
}
.aim-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.aim-feed__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(20,23,27,.06);
  animation: aim-fade-in .5s ease both;
}
.aim-feed__item:last-child { border-bottom: 0; }
.aim-feed__time {
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #727782;
  padding-top: 3px;
}
.aim-feed__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.aim-feed__dot--ok    { background: #5ED7B2; box-shadow: 0 0 0 3px rgba(94,215,178,.2); }
.aim-feed__dot--info  { background: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.aim-feed__dot--warn  { background: #E09A62; box-shadow: 0 0 0 3px rgba(224,154,98,.2); }
.aim-feed__dot--alert { background: #F43F5E; box-shadow: 0 0 0 3px rgba(244,63,94,.2); animation: aim-pulse-sm 1.5s infinite; }
.aim-feed__body b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #14171B;
  line-height: 1.35;
}
.aim-feed__body em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #4A4F5A;
  margin-top: 4px;
  line-height: 1.5;
}
.aim-feed__body em strong { font-weight: 700; color: #14171B; }
.aim-feed__body a { color: #415BE7; text-decoration: none; font-weight: 600; }
.aim-feed__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.aim-feed__tools span {
  font-size: 11px;
  font-weight: 600;
  color: #415BE7;
  background: rgba(65,91,231,.06);
  border: 1px solid rgba(65,91,231,.12);
  padding: 4px 10px;
  border-radius: 999px;
}
@keyframes aim-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ShopFloorState */
.aim-state {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aim-state__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(20,23,27,.06);
}
.aim-state__head b {
  font-size: 14px;
  font-weight: 700;
  color: #14171B;
  font-family: 'JetBrains Mono', 'Monaco', monospace;
}
.aim-state__head span {
  font-size: 11px;
  color: #727782;
}
.aim-state__row { display: flex; flex-direction: column; gap: 8px; }
.aim-state__lbl {
  font-size: 12px;
  font-weight: 600;
  color: #727782;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.aim-state__bars {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(20,23,27,.04);
}
.aim-state__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w);
  background: var(--c);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: width .8s ease;
}
.aim-state__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aim-state__legend em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  color: #4A4F5A;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.aim-state__legend em span {
  width: 8px; height: 8px;
  border-radius: 2px;
}
.aim-state__note {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(65,91,231,.04);
  border: 1px solid rgba(65,91,231,.1);
  border-radius: 10px;
  font-size: 12px;
  color: #4A4F5A;
  line-height: 1.5;
  margin-top: auto;
}
.aim-state__note svg {
  width: 15px; height: 15px;
  color: #415BE7;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- LOOP (4 steps) ---------- */
.aim-loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 50px;
}
.aim-loop__step {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
  transition: transform 180ms ease;
}
.aim-loop__step:hover { transform: translateY(-2px); }
.aim-loop__num {
  position: absolute;
  top: -14px; left: 20px;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--grad-ai);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 8px 20px -5px rgba(65,91,231,.4);
}
.aim-loop__step h4 {
  margin: 10px 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
}
.aim-loop__step p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4A4F5A;
}
.aim-loop__step p code {
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 12px;
  background: rgba(65,91,231,.08);
  color: #415BE7;
  padding: 1px 6px;
  border-radius: 4px;
}
.aim-loop__arrow {
  align-self: center;
  font-size: 22px;
  font-weight: 700;
  color: #415BE7;
  opacity: .4;
}

/* ---------- CAPABILITIES 6 cards ---------- */
.aim-caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.aim-cap {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 20px;
  padding: 26px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.aim-cap:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(20,23,27,.15);
  border-color: rgba(65,91,231,.2);
}
.aim-cap__ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.aim-cap__ico svg { width: 22px; height: 22px; }
.aim-cap h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
}
.aim-cap p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #4A4F5A;
}
.aim-cap__stat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #415BE7;
  background: rgba(65,91,231,.08);
  padding: 5px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- DETECT 3 cards ---------- */
.aim-detect {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.aim-detect__card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 20px;
  padding: 24px;
  position: relative;
}
.aim-detect__tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  color: #415BE7;
  background: rgba(65,91,231,.1);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.aim-detect__card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
}
.aim-detect__card p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #4A4F5A;
}
.aim-detect__src {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(20,23,27,.03);
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 10px;
}
.aim-detect__src svg {
  width: 14px; height: 14px;
  color: #415BE7;
  flex-shrink: 0;
}
.aim-detect__src code {
  font-family: 'JetBrains Mono', 'Monaco', monospace;
  font-size: 11.5px;
  color: #14171B;
  font-weight: 600;
  line-height: 1.4;
}

/* ---------- TOOLS grid ---------- */
.aim-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.aim-tools__group {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: 16px;
  padding: 18px 20px;
}
.aim-tools__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20,23,27,.06);
  margin-bottom: 10px;
}
.aim-tools__head b {
  font-size: 14px;
  font-weight: 800;
  color: #14171B;
}
.aim-tools__head span {
  font-size: 11px;
  font-weight: 700;
  color: #415BE7;
  background: rgba(65,91,231,.1);
  padding: 3px 9px;
  border-radius: 999px;
}
.aim-tools__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.aim-tools__group li {
  font-size: 13.5px;
  color: #2C3038;
  padding: 6px 0;
  position: relative;
  padding-left: 18px;
  line-height: 1.4;
}
.aim-tools__group li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #415BE7;
  opacity: .5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .aim-dash__kpis { grid-template-columns: repeat(2, 1fr); }
  .aim-dash__grid { grid-template-columns: 1fr; }
  .aim-loop {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
  }
  .aim-loop__arrow { display: none; }
  .aim-caps, .aim-detect, .aim-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .aim-dash { padding: 18px; border-radius: 20px; }
  .aim-dash__kpis { grid-template-columns: 1fr 1fr; }
  .aim-kpi b { font-size: 22px; }
  .aim-loop { grid-template-columns: 1fr; }
  .aim-caps, .aim-detect, .aim-tools { grid-template-columns: 1fr; }
  .aim .section-header--sub h3 { font-size: 22px; }
}

/* ---------- feature cards ---------- */
.dual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .dual-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dual-grid { grid-template-columns: 1fr; }
}
.feat-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl);
  padding: 34px 30px;
  transition: all var(--d-norm) var(--ease-out);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
}
.feat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.feat-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(65,91,231,.1);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-radius: var(--r-full);
  margin-bottom: 14px;
}
.feat-card h3 { font-size: 22px; margin-bottom: 10px; letter-spacing: -0.02em; }
.feat-card > p { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
.ticks { display: flex; flex-direction: column; gap: 10px; }
.ticks li {
  padding-left: 28px;
  position: relative;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(65,91,231,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23415BE7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Planning cards ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.plan-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: all var(--d-norm);
  backdrop-filter: blur(12px);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.plan-card h3 { font-size: 18px; margin-bottom: 10px; letter-spacing: -0.015em; }
.plan-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

/* ---------- ROLE cards (Польза по ролям) ---------- */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1280px) {
  .roles-grid { grid-template-columns: repeat(3, 1fr); }
}
.role-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.role-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: color-mix(in srgb, var(--rc) 40%, transparent);
}
.role-card__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rc) 12%, transparent);
  color: var(--rc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.role-card__ico svg { width: 22px; height: 22px; }
.role-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}
.role-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-card li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #3A3F4A;
}
.role-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--rc);
  opacity: .75;
}

@media (max-width: 1024px) {
  .roles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .roles-grid { grid-template-columns: 1fr; }
  .role-card { padding: 22px 20px; }
}

/* ---------- ПРОЗРАЧНОЕ ПРОИЗВОДСТВО ---------- */
.transp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.transp-card {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--sh-sm);
  position: relative;
  display: flex;
  flex-direction: column;
}
.transp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(20,23,27,.12);
  border-color: color-mix(in srgb, var(--tc) 24%, transparent);
}
.transp-card__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  color: var(--tc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.transp-card__ico svg { width: 22px; height: 22px; }
.transp-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 10px;
}
.transp-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #3A3F4A;
  margin: 0;
}
.transp-footnote {
  margin-top: 32px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1024px) {
  .transp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .transp-grid { grid-template-columns: 1fr; }
}

/* ---------- ИНДУСТРИЯ 4.0 ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
.ind-fact {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,.85) 100%);
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--sh-sm);
}
.ind-fact::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 16%, transparent), transparent 70%);
  pointer-events: none;
  opacity: .6;
}
.ind-fact:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(20,23,27,.12);
}
.ind-fact__num {
  position: relative;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fc);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ind-fact__lbl {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc);
  background: color-mix(in srgb, var(--fc) 10%, transparent);
  padding: 3px 10px;
  border-radius: 999px;
}
.ind-fact h3 {
  position: relative;
  font-size: 18px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 10px;
}
.ind-fact p {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: #3A3F4A;
  margin: 0;
}

.ind-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, rgba(65,91,231,.08) 0%, rgba(125,99,243,.06) 100%);
  border: 1px solid rgba(65,91,231,.15);
  border-radius: var(--r-xl);
  padding: 28px 32px;
  margin-top: 12px;
}
.ind-cta__ico {
  width: 64px; height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  background: #FFFFFF;
  color: #415BE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(65,91,231,.25);
}
.ind-cta__ico svg { width: 28px; height: 28px; }
.ind-cta__body h3 {
  font-size: 20px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.ind-cta__body p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #3A3F4A;
  margin: 0;
}
.ind-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #14171B;
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
  box-shadow: 0 10px 24px -10px rgba(20,23,27,.5);
}
.ind-cta__btn svg { width: 18px; height: 18px; transition: transform 180ms ease; }
.ind-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(20,23,27,.55);
  background: #1F2428;
}
.ind-cta__btn:hover svg { transform: translateX(3px); }

/* ---------- ЦЕНА ---------- */
.pricing-section { background: linear-gradient(180deg, transparent 0%, rgba(65,91,231,.03) 100%); }

.price-main {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.price-main__card {
  position: relative;
  max-width: 720px;
  width: 100%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid rgba(65,91,231,.15);
  border-radius: 24px;
  padding: 40px 48px;
  box-shadow: 0 30px 80px -30px rgba(65,91,231,.2), 0 10px 30px -10px rgba(20,23,27,.06);
  overflow: hidden;
}
.price-main__card::before {
  content: '';
  position: absolute;
  inset: -80px -80px auto auto;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(65,91,231,.12), transparent 70%);
  pointer-events: none;
}
.price-main__badge {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #415BE7 0%, #6C86FF 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(65,91,231,.5);
}
.price-main__amount {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed rgba(20,23,27,.1);
}
.price-main__from {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
}
.price-main__value {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #14171B 0%, #415BE7 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.price-main__unit {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}
.price-main__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.price-main__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2C3038;
}
.price-main__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(65,91,231,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23415BE7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

.price-flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.price-opt {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--sh-sm);
}
.price-opt:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(20,23,27,.14);
  border-color: rgba(65,91,231,.25);
}
.price-opt--highlight {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(65,91,231,.04) 100%);
  border-color: rgba(65,91,231,.25);
}
.price-opt__tag {
  position: absolute;
  top: -10px;
  right: 20px;
  padding: 4px 12px;
  background: #415BE7;
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px -6px rgba(65,91,231,.45);
}
.price-opt__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pc) 12%, transparent);
  color: var(--pc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.price-opt__ico svg { width: 20px; height: 20px; }
.price-opt h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #14171B;
}
.price-opt p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.price-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #14171B 0%, #1F2329 100%);
  border-radius: 22px;
  padding: 32px 36px;
  color: #fff;
  box-shadow: 0 30px 60px -20px rgba(20,23,27,.35);
}
.price-cta__body { flex: 1; }
.price-cta__body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #fff;
}
.price-cta__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.72);
}
.price-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: #fff;
  color: #14171B;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.price-cta__btn svg { width: 18px; height: 18px; transition: transform 180ms ease; }
.price-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -10px rgba(0,0,0,.35);
}
.price-cta__btn:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
  .price-flex { grid-template-columns: 1fr; }
  .price-main__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .price-main__card { padding: 28px 22px; }
  .price-main__value { font-size: 54px; }
  .price-main__badge { position: static; display: inline-block; margin-bottom: 16px; }
  .price-cta { flex-direction: column; text-align: center; padding: 26px 22px; }
  .price-cta__btn { width: 100%; justify-content: center; }
}

@media (max-width: 1024px) {
  .ind-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ind-grid { grid-template-columns: 1fr; }
  .ind-cta { flex-direction: column; text-align: center; padding: 22px; }
  .ind-fact__num { font-size: 36px; }
}

/* ---------- INTEGRATIONS ---------- */
.integr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.integr {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: 30px 22px;
  text-align: center;
  transition: all var(--d-norm);
  backdrop-filter: blur(12px);
}
.integr:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.integr-logo {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  border-radius: var(--r-md);
  letter-spacing: -0.02em;
}
.integr-logo--1c { background: #FFD93D; color: #14171B; }
.integr-logo--sap { background: #0FAAFF; color: #fff; }
.integr-logo--b24 { background: #2FC6F6; color: #fff; }
.integr-logo--api { background: var(--text-primary); color: #5ED7B2; font-family: 'JetBrains Mono', monospace; font-size: 22px; }
.integr h4 { font-size: 16px; margin-bottom: 8px; letter-spacing: -0.015em; }
.integr p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- INTEGRATIONS v2 (tech + categories) ---------- */
.int-tech {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.int-tech__item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--sh-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.int-tech__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(20,23,27,.12);
}
.int-tech__ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(65,91,231,.12), rgba(108,134,255,.08));
  color: #415BE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.int-tech__ico svg { width: 18px; height: 18px; }
.int-tech__item b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.int-tech__item span {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.int-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.int-cat {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.int-cat:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -18px rgba(20,23,27,.14);
  border-color: color-mix(in srgb, var(--ic) 24%, transparent);
}
.int-cat__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.int-cat__ico {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ic) 14%, transparent);
  color: var(--ic);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.int-cat__ico svg { width: 20px; height: 20px; }
.int-cat h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #14171B;
  line-height: 1.3;
}
.int-cat p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.int-cat__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(20,23,27,.05);
}
.int-cat__tags span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1px;
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 16%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.int-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: linear-gradient(135deg, rgba(65,91,231,.08) 0%, rgba(125,99,243,.05) 100%);
  border: 1px solid rgba(65,91,231,.15);
  border-radius: var(--r-lg);
}
.int-foot__ico {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #FFFFFF;
  color: #415BE7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(65,91,231,.2);
}
.int-foot__ico svg { width: 22px; height: 22px; }
.int-foot__body b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #14171B;
  letter-spacing: -0.015em;
  margin-bottom: 2px;
}
.int-foot__body span {
  display: block;
  font-size: 13.5px;
  color: #3A3F4A;
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .int-tech { grid-template-columns: repeat(2, 1fr); }
  .int-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .int-tech { grid-template-columns: 1fr; }
  .int-cats { grid-template-columns: 1fr; }
  .int-foot { flex-direction: column; text-align: center; padding: 20px; }
}

/* ---------- Before / After ---------- */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ba-col { border-radius: var(--r-xl); padding: 36px 30px; }
.ba-col--was {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
}
.ba-col--now {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ba-col--now::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(65,91,231,.2) 0%, transparent 50%);
  pointer-events: none;
}
.ba-col--now > * { position: relative; }
.ba-col h3 {
  font-size: 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.02em;
}
.ba-col--now h3 { color: #fff; }
.ba-col--was h3 span, .ba-col--now h3 span {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.ba-col--was h3 span { background: var(--error-soft); color: var(--error); }
.ba-col--now h3 span { background: var(--success-mid); color: #0D1117; }
.ba-col ul { display: flex; flex-direction: column; gap: 10px; }
.ba-col--was ul li {
  padding: 13px 16px;
  background: rgba(229,227,220,.4);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 14px;
}
.ba-col--now ul li {
  padding: 13px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  font-size: 14px;
  color: #fff;
}

/* ---------- CASES ---------- */
.case {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: var(--r-xl);
  padding: 40px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  transition: all var(--d-norm);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
}
.case:hover { box-shadow: var(--sh-lg); }
.case-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--accent-2);
  background: rgba(65,91,231,.1);
  padding: 5px 12px;
  border-radius: var(--r-full);
  margin-bottom: 14px;
}
.case-left h3 { font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 14px; }
.case-left p { font-size: 15px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }
.case-foot { font-size: 14px; }
.case-foot strong { color: var(--accent-2); font-weight: 600; }
.case-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.case-stat {
  background: rgba(229,227,220,.35);
  border-radius: var(--r-md);
  padding: 18px;
  text-align: center;
  transition: all var(--d-norm);
}
.case-stat:hover {
  background: rgba(65,91,231,.08);
  transform: scale(1.03);
}
.case-stat b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 6px;
}
.case-stat span { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }

/* ---------- PLATFORM ---------- */
.plat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.plat-card {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  padding: 30px 22px;
  text-align: center;
  transition: all var(--d-norm);
  backdrop-filter: blur(12px);
}
.plat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plat-ico {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(65,91,231,.1);
  border-radius: var(--r-md);
}
.plat-card h4 { font-size: 17px; margin-bottom: 8px; letter-spacing: -0.015em; }
.plat-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ========= BOT CONSTRUCTOR — реплика страницы логина dems-frontend ========= */
.bot-frame {
  position: relative;
  background: #F8F8F8;
  border-radius: 24px;
  box-shadow:
    0 20px 50px -10px rgba(0,0,0,.1),
    0 8px 16px rgba(0,0,0,.04);
  overflow: hidden;
  margin-bottom: 48px;
  height: 720px;
}
.bot-frame__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Use-cases grid */
.bot-usecases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bu-card {
  --c: #3B82F6;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 26px 24px;
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-sm);
  transition: all var(--d-norm) var(--ease-out);
}
.bu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
}
.bu-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.bu-ico svg { width: 22px; height: 22px; }
.bu-card h4 {
  font-size: 17px;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.bu-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ========= ARMs SECTION — одно приложение, разные роли ========= */
.arms-section { }

/* Platform strip */
.arms-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.arms-plat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid rgba(176,183,195,.14);
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(13,17,23,.04);
  transition: all var(--d-norm);
}
.arms-plat:hover {
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.25);
  box-shadow: 0 8px 20px rgba(59,130,246,.12);
}
.arms-plat__ico {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,130,246,.1), rgba(59,130,246,.03));
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arms-plat__ico svg { width: 22px; height: 22px; }
.arms-plat b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.arms-plat span {
  display: block;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-top: 2px;
}

.arms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

/* Унифицированный arm-block — одинаковый вид для обеих ролей */
.arm-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 28px;
  border-radius: 24px;
  background: #FFFFFF;
  border: 1px solid rgba(176,183,195,.14);
  box-shadow: 0 10px 30px rgba(13,17,23,.06);
}

/* Role tag — единственное отличие между ролями (цветная точка) */
.arm-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
}
.arm-role__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
  animation: role-dot-pulse 2s ease-in-out infinite;
}
@keyframes role-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 0%, transparent); }
}
.arm-role__tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* Info block под телефоном */
.arm-info {
  width: 100%;
  text-align: center;
}
.arm-info h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.arm-info > p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Chips — фичи в мини-пилюлях */
.arm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.arm-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
  border-radius: 999px;
  transition: all var(--d-fast);
}
.arm-chip:hover {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  transform: translateY(-1px);
}

/* Phone wrap (центрирование телефона) */
.arm-phone-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone mockup */
.arm-phone {
  width: 300px;
  background: #1A1A1A;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,.35), 0 15px 30px rgba(0,0,0,.15);
  position: relative;
}
.arm-phone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 6px;
  background: #0D0D0D;
  border-radius: 4px;
  z-index: 10;
}
.arm-phone__home {
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 120px; height: 4px;
  background: rgba(255,255,255,.35);
  border-radius: 3px;
  z-index: 10;
}
.arm-phone__screen {
  background: #FAFAFB;
  border-radius: 30px;
  height: 560px;
  position: relative;
  overflow: hidden;
  padding: 34px 14px 20px;
}

/* Анимация смены сцен — 45 сек, 9 сцен по 5 сек */
@keyframes arm-scene-cycle {
  0%, 9.5%    { opacity: 1; transform: translateX(0); }
  11.1%, 100% { opacity: 0; transform: translateX(-18px); pointer-events: none; }
}

.arm-scene {
  position: absolute;
  inset: 34px 14px 60px; /* +40px снизу под tab-bar */
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: arm-scene-cycle 45s cubic-bezier(.4,0,.2,1) infinite;
  overflow: hidden;
}
.arm-scene--op1 { animation-delay: 0s; }
.arm-scene--op2 { animation-delay: -40s; }
.arm-scene--op3 { animation-delay: -35s; }
.arm-scene--op4 { animation-delay: -30s; }
.arm-scene--op5 { animation-delay: -25s; }
.arm-scene--op6 { animation-delay: -20s; }
.arm-scene--op7 { animation-delay: -15s; }
.arm-scene--op8 { animation-delay: -10s; }
.arm-scene--op9 { animation-delay: -5s; }

.arm-scene--rep1 { animation-delay: 0s; }
.arm-scene--rep2 { animation-delay: -40s; }
.arm-scene--rep3 { animation-delay: -35s; }
.arm-scene--rep4 { animation-delay: -30s; }
.arm-scene--rep5 { animation-delay: -25s; }
.arm-scene--rep6 { animation-delay: -20s; }
.arm-scene--rep7 { animation-delay: -15s; }
.arm-scene--rep8 { animation-delay: -10s; }
.arm-scene--rep9 { animation-delay: -5s; }

/* Bottom tab-bar (статичный во всех сценах) */
.s-tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 1fr 1fr 52px 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 0;
  z-index: 5;
}
.s-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(107,114,128,.75);
  font-size: 9px;
  font-weight: 600;
  width: 100%;
}
.s-tab svg { width: 18px; height: 18px; }
.s-tab--active { color: #3B82F6; }
.s-tabbar--orange .s-tab--active { color: #F59E0B; }
.s-tab--fab {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #6C86FF);
  color: #fff;
  margin-top: -20px;
  box-shadow: 0 6px 14px rgba(59,130,246,.4);
  justify-self: center;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.s-tab--fab span { font-size: 22px; font-weight: 300; line-height: 1; }
.s-tab--fab-orange { background: linear-gradient(135deg, #F59E0B, #E09A62); box-shadow: 0 6px 14px rgba(245,158,11,.4); }

/* Sub title в top */
.s-top .s-sub {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: auto;
}

/* ===== Общие элементы сцен ===== */
.s-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.s-top > div:first-child { flex: 1; }
.s-top b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.s-top em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-top: 1px;
}
.s-back {
  font-size: 18px;
  color: var(--text-secondary);
  cursor: pointer;
}
.s-badge {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--arm-c);
  border-radius: 999px;
}
.s-ava {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #415BE7, #6C86FF);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.s-pill {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  color: var(--text-secondary);
  white-space: nowrap;
}
.s-pill--blue { background: rgba(59,130,246,.12); color: #3B82F6; }
.s-pill--red { background: rgba(239,68,68,.12); color: #EF4444; }
.s-pill--orange { background: rgba(245,158,11,.14); color: #B45309; }
.s-pill--green { background: rgba(16,185,129,.14); color: #10B981; }
.s-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: auto;
}

.s-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.s-card {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  position: relative;
}
.s-card--highlight {
  border-color: var(--arm-c);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--arm-c) 20%, transparent);
}
.s-card--rep-over {
  border-left: 3px solid #EF4444;
  background: linear-gradient(180deg, #fff, rgba(239,68,68,.03));
}
.s-card--rep-run {
  border-left: 3px solid #F59E0B;
}
.s-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.s-card b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
}
.s-card p {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 2px;
}
.s-card__meta {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Tap-индикатор (имитация нажатия пальцем) */
.s-tap {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(59,130,246,.25);
  transform: translate(-50%, -50%);
  animation: tap-pulse 1.2s ease-out infinite;
  pointer-events: none;
  z-index: 5;
}
.arm-block--rep .s-tap { background: rgba(245,158,11,.25); }
@keyframes tap-pulse {
  0%   { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* ===== Сцены оператора ===== */
.s-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 4px 0 2px;
}
.s-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}
.s-detail__row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 3px 0;
}
.s-detail__row span { color: var(--text-secondary); }
.s-detail__row b { color: var(--text-primary); font-weight: 600; }

.s-stages {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.s-stage {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: rgba(0,0,0,.08);
}
.s-stage--done { background: #10B981; }
.s-stage--active { background: linear-gradient(90deg, #3B82F6, #6C86FF); animation: stage-pulse 1.4s ease-in-out infinite; }
@keyframes stage-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

.s-big-btn {
  padding: 14px 16px;
  background: var(--arm-c);
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--arm-c) 30%, transparent);
  animation: big-btn-pulse 1.6s ease-in-out infinite;
}
.s-big-btn svg { width: 16px; height: 16px; }
.s-big-btn--start { background: #10B981; box-shadow: 0 6px 16px rgba(16,185,129,.4); }
@keyframes big-btn-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 6px 16px color-mix(in srgb, var(--arm-c) 30%, transparent); }
  50% { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--arm-c) 45%, transparent); }
}

.s-session-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 10px;
  position: relative;
}
.s-session__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10B981;
  animation: ssd 1.2s ease-in-out infinite;
}
@keyframes ssd {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}
.s-session-banner > div { flex: 1; }
.s-session-banner b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #0F9874;
}
.s-session-banner em {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #10B981;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.s-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s-progress__bar {
  height: 6px;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
  overflow: hidden;
}
.s-progress__bar b {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  background: linear-gradient(90deg, #3B82F6, #6C86FF);
  border-radius: 3px;
  transform-origin: left;
  animation: bar-grow-arm 2s ease-out forwards;
  transform: scaleX(0);
}
@keyframes bar-grow-arm { to { transform: scaleX(1); } }
.s-progress__lbl {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.s-actions-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  margin-top: auto;
}
.s-ab {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.s-ab--pause {
  background: rgba(245,158,11,.12);
  color: #B45309;
}
.s-ab--done {
  background: #10B981;
  color: #fff;
  animation: big-btn-pulse 1.6s ease-in-out infinite;
  --arm-c: #10B981;
}

/* Диалог-завершения с клавиатурой */
.s-dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.s-sheet {
  position: absolute;
  bottom: 140px;
  left: 8px; right: 8px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  animation: sheet-in 0.5s cubic-bezier(.22,.61,.36,1);
}
@keyframes sheet-in {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.s-sheet__handle {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,.15);
  margin: 0 auto 6px;
}
.s-sheet__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.s-field { display: flex; flex-direction: column; gap: 3px; }
.s-field label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.s-input {
  padding: 8px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.s-input--mb { font-weight: 500; color: var(--text-secondary); font-size: 11.5px; }

.s-kb {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  background: #D1D5DB;
  padding: 10px 6px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.s-kb__row {
  display: flex;
  gap: 3px;
  justify-content: center;
}
.s-kb__row span {
  flex: 1;
  max-width: 26px;
  height: 28px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Результат */
.s-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 0 4px;
}
.s-done__ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(16,185,129,.35);
  animation: done-pop .5s cubic-bezier(.22,1.46,.36,1);
}
@keyframes done-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.s-done__ico--green { background: #10B981; }
.s-done__ico svg { width: 26px; height: 26px; }
.s-done b { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-top: 8px; }
.s-done em { font-style: normal; font-size: 11px; color: var(--text-secondary); }

.s-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.s-result__card {
  padding: 10px 6px;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: 10px;
  text-align: center;
}
.s-result__card b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--c);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.s-result__card span {
  display: block;
  font-size: 9.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.s-next {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: auto;
  padding: 10px;
  background: rgba(0,0,0,.03);
  border-radius: 10px;
}
.s-next b { color: var(--accent-2); font-weight: 600; font-family: 'JetBrains Mono', monospace; }

/* Инциденты */
.s-inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.s-inc-item {
  padding: 12px 10px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
}
.s-inc-item--tap {
  border-color: var(--c);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 30%, transparent);
}
.s-inc__ico { font-size: 20px; }
.s-inc-item b { font-size: 10px; font-weight: 700; color: var(--text-primary); }

.s-inc-head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 8px;
}
.s-inc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}
.s-inc-row__dot { width: 8px; height: 8px; border-radius: 50%; }
.s-inc-row b { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.s-inc-row em { font-style: normal; display: block; font-size: 10px; color: var(--text-secondary); margin-top: 1px; }

/* ===== Сцены ремонтника ===== */
.r-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
}
.r-tabs span {
  flex: 1;
  padding: 6px 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 6px;
  white-space: nowrap;
}
.r-tabs--active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.r-check-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.r-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-primary);
  position: relative;
}
.r-check--done {
  border-color: rgba(16,185,129,.3);
  background: rgba(16,185,129,.04);
}
.r-check--done > span:last-child { color: var(--text-secondary); text-decoration: line-through; }
.r-check--running {
  border-color: rgba(245,158,11,.3);
  background: rgba(245,158,11,.05);
  animation: big-btn-pulse 1.8s ease-in-out infinite;
  --arm-c: #F59E0B;
}
.r-check__box {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(59,130,246,.9);
  flex-shrink: 0;
}
.r-check--done .r-check__box {
  background: #10B981;
  border-color: #10B981;
  color: #fff;
}
.r-check--done .r-check__box svg { width: 14px; height: 14px; }
.r-check--running .r-check__box {
  background: #F59E0B;
  border-color: #F59E0B;
  color: #fff;
}
.r-dots {
  display: inline-flex;
  gap: 2px;
}
.r-dots span {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  animation: tt-dots 1s ease-in-out infinite;
}
.r-dots span:nth-child(2) { animation-delay: .15s; }
.r-dots span:nth-child(3) { animation-delay: .3s; }

.r-timer {
  padding: 10px 12px;
  background: rgba(0,0,0,.04);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
  margin-top: auto;
  text-align: center;
}
.r-timer--active {
  background: rgba(245,158,11,.12);
  color: #B45309;
}

/* Materials */
.r-mat { display: flex; flex-direction: column; gap: 8px; }
.r-mat__card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(16,185,129,.3);
  border-radius: 10px;
}
.r-mat__ico { font-size: 22px; flex-shrink: 0; }
.r-mat__card > div:nth-child(2) { flex: 1; min-width: 0; }
.r-mat__card b { display: block; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.r-mat__card em { font-style: normal; display: block; font-size: 10.5px; color: var(--text-secondary); margin-top: 1px; }
.r-mat__pill {
  padding: 2px 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16,185,129,.12);
  border-radius: 999px;
  white-space: nowrap;
}
.r-mat__btn {
  margin-top: 6px;
  padding: 12px;
  background: #F59E0B;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  animation: big-btn-pulse 1.6s ease-in-out infinite;
  --arm-c: #F59E0B;
}

/* Верификация */
.r-verify {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}
.r-verify__row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 3px 0;
}
.r-verify__row span { color: var(--text-secondary); }
.r-verify__row b { color: var(--text-primary); font-weight: 700; }
.r-verify__row b.ok { color: #10B981; }
.r-verify__ok {
  padding: 8px 12px;
  background: rgba(16,185,129,.14);
  color: #0F9874;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}

/* ===== Сцена 7: Быстрые команды ===== */
.s-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.s-quick {
  padding: 12px 10px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c, #3B82F6) 20%, transparent);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: all var(--d-norm);
}
.s-quick--red { --c: #EF4444; background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02)); }
.s-quick--orange { --c: #F59E0B; background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,.02)); }
.s-quick--purple { --c: #8B5CF6; background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(139,92,246,.02)); }
.s-quick--blue { --c: #3B82F6; background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.02)); }
.s-quick--teal { --c: #14B8A6; background: linear-gradient(135deg, rgba(20,184,166,.08), rgba(20,184,166,.02)); }
.s-quick--gray { --c: #6B7280; background: linear-gradient(135deg, rgba(107,114,128,.08), rgba(107,114,128,.02)); }
.s-quick__ico {
  font-size: 20px;
  margin-bottom: 4px;
}
.s-quick b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--c);
  line-height: 1.2;
}
.s-quick em {
  display: block;
  font-style: normal;
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ===== Сцена 8: Простой с причинами ===== */
.s-downtime-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}
.s-dt__circle {
  position: relative;
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-dt__circle svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.s-dt__circle span {
  font-size: 13px;
  font-weight: 800;
  color: #F59E0B;
  font-variant-numeric: tabular-nums;
}
.s-downtime-timer em {
  font-style: normal;
  font-size: 10px;
  color: #B45309;
  font-weight: 600;
}
.s-dt__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}
.s-dt-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s-dt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  font-size: 11.5px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
}
.s-dt-item--active {
  border-color: #EF4444;
  background: rgba(239,68,68,.05);
  color: #EF4444;
  font-weight: 700;
}
.s-dt__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.s-dt__chk {
  margin-left: auto;
  color: #EF4444;
  font-weight: 800;
}
.s-dt-item > span:nth-child(2) { flex: 1; text-align: left; }

/* ===== Сцена 9: Timeline смены ===== */
.s-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-left: 4px;
}
.s-tl-item {
  display: grid;
  grid-template-columns: 36px 14px 1fr;
  gap: 6px;
  align-items: flex-start;
  position: relative;
}
.s-tl-item::after {
  content: '';
  position: absolute;
  left: 42px; top: 18px;
  bottom: -8px;
  width: 2px;
  background: rgba(0,0,0,.06);
}
.s-tl-item:last-child::after { display: none; }
.s-tl__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  padding-top: 2px;
}
.s-tl__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 3px;
  position: relative;
  z-index: 2;
  background: var(--c, #3B82F6);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c, #3B82F6);
}
.s-tl-item--green { --c: #10B981; }
.s-tl-item--blue { --c: #3B82F6; }
.s-tl-item--orange { --c: #F59E0B; }
.s-tl-item--red { --c: #EF4444; }
.s-tl__body b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}
.s-tl__body em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
  display: block;
  line-height: 1.3;
}

/* ===== Сцена 7 rep: AI-диагност ===== */
.r-ai-badge {
  font-size: 10px;
  font-weight: 700;
  color: #10B981;
  padding: 2px 8px;
  background: rgba(16,185,129,.12);
  border-radius: 999px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.r-ai-sources {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.r-ai-sources span {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 8px;
  background: rgba(0,0,0,.04);
  border-radius: 999px;
  white-space: nowrap;
}
.r-ai-chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow: hidden;
}
.r-ai-msg {
  max-width: 88%;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 12px;
}
.r-ai-msg--me {
  align-self: flex-end;
  background: linear-gradient(135deg, #F59E0B, #E09A62);
  color: #fff;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.r-ai-msg--ai {
  align-self: flex-start;
  background: rgba(0,0,0,.04);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.r-ai-msg--ai b { color: #B45309; font-weight: 700; }
.r-ai-activity {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 9.5px;
  color: var(--text-secondary);
  background: rgba(0,0,0,.03);
  border-radius: 8px;
}
.r-ai-cat { font-size: 11px; }
.r-ai-done {
  margin-left: auto;
  color: #10B981;
  font-weight: 800;
  padding: 0 6px;
  background: rgba(16,185,129,.1);
  border-radius: 999px;
}
.r-ai-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 3px;
  padding: 8px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 12px 12px 12px 4px;
}
.r-ai-typing span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #F59E0B;
  animation: tt-dots 1.2s ease-in-out infinite;
}
.r-ai-typing span:nth-child(2) { animation-delay: .15s; }
.r-ai-typing span:nth-child(3) { animation-delay: .3s; }
.r-ai-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F1F5F9;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: auto;
}
.r-ai-input > span:first-child { flex: 1; }
.r-ai-send {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #F59E0B;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

/* ===== Сцена 8 rep: Фото-отчёт ===== */
.r-photo-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
}
.r-photo-tab {
  flex: 1;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 6px;
}
.r-photo-tab--active {
  background: #fff;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.r-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.r-photo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.r-photo__img {
  aspect-ratio: 1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.r-photo__badge {
  position: absolute;
  top: 6px; left: 6px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.6);
  border-radius: 999px;
}
.r-photo__badge--red { background: #EF4444; }
.r-photo em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.r-photo-btn {
  padding: 11px;
  background: #F59E0B;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  animation: big-btn-pulse 1.6s ease-in-out infinite;
  --arm-c: #F59E0B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
}
.r-photo-cam {
  position: absolute;
  left: 0; right: 0;
  bottom: 50px;
  height: 100px;
  background: rgba(0,0,0,.85);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.r-photo-cam__shutter {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #F59E0B;
  box-shadow: 0 0 0 3px rgba(245,158,11,.4);
  animation: shutter 1s ease-out;
}
@keyframes shutter {
  0% { transform: scale(1); }
  50% { transform: scale(.85); }
  100% { transform: scale(1); }
}

/* ===== Сцена 9 rep: Склад ===== */
.r-stock-sub {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: auto;
}
.r-stock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F1F5F9;
  border-radius: 999px;
  font-size: 12px;
}
.r-stock-q {
  color: var(--text-primary);
  font-weight: 500;
}
.r-stock-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.r-stock-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}
.r-stock-item--active {
  border-color: #F59E0B;
  background: rgba(245,158,11,.04);
  box-shadow: 0 3px 10px rgba(245,158,11,.12);
}
.r-stock-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.r-stock-info b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
}
.r-stock-info em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 1px;
  display: block;
}
.r-stock-qty {
  text-align: center;
  padding: 4px 10px;
  background: rgba(16,185,129,.1);
  border-radius: 8px;
}
.r-stock-qty b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #10B981;
  line-height: 1;
}
.r-stock-qty span {
  font-size: 9px;
  color: #10B981;
}
.r-stock-qty--out {
  background: rgba(239,68,68,.1);
}
.r-stock-qty--out b, .r-stock-qty--out span { color: #EF4444; }

/* arms-cta — акцент про экономию на железе */
.arms-cta {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.arms-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(16,185,129,.2) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(65,91,231,.18) 0%, transparent 50%);
  pointer-events: none;
  animation: ai-action-glow 6s ease-in-out infinite;
}
.arms-cta > * { position: relative; }
.arms-cta__ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981, #5ED7B2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(16,185,129,.35);
}
.arms-cta__ico svg { width: 22px; height: 22px; }
.arms-cta > div:last-child { flex: 1; }
.arms-cta b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.arms-cta p {
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  margin: 0;
}
@keyframes ai-action-glow {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}

@media (max-width: 1024px) {
  .bot-usecases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bot-frame { height: 560px; }
}
@media (max-width: 640px) {
  .bot-usecases { grid-template-columns: 1fr; }
  .bot-frame { height: 480px; border-radius: 18px; }
}

/* ---------- CTA ---------- */
.cta { padding: 120px 0; position: relative; }
.cta-inner {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #2D3748 100%);
  border-radius: var(--r-2xl);
  padding: 80px 60px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content: '';
  position: absolute;
  top: -50%; left: -20%;
  width: 140%; height: 200%;
  background: radial-gradient(circle at 50% 30%, rgba(65,91,231,.35) 0%, transparent 50%);
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  color: #fff;
}
.cta-inner p {
  font-size: 17px;
  color: rgba(255,255,255,.8);
  max-width: 620px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.cta-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 960px;
  margin: 0 auto 32px;
}
@media (max-width: 1024px) {
  .cta-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cta-links { grid-template-columns: 1fr; }
}
.cta-link {
  padding: 22px 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  transition: all var(--d-norm);
  text-align: left;
}
.cta-link:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(65,91,231,.4);
  transform: translateY(-2px);
}
.cta-link__lbl {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.cta-link__val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; }
.cta-link--static {
  cursor: default;
}
.cta-link--static:hover {
  transform: none;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.cta-link--static .cta-link__val {
  font-size: 15px;
  font-weight: 600;
}
.cta-foot { font-size: 14px; color: rgba(255,255,255,.6); }
.cta-foot b { color: var(--success-mid); }

/* ---------- FAQ ---------- */
.faq-section { background: linear-gradient(180deg, transparent 0%, rgba(65,91,231,.03) 100%); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.06);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  box-shadow: var(--sh-sm);
}
.faq-item[open] {
  border-color: rgba(65,91,231,.25);
  box-shadow: 0 14px 32px -14px rgba(65,91,231,.18);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 700;
  color: #14171B;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '';
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(65,91,231,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23415BE7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/12px no-repeat;
  transition: transform 200ms ease, background-color 200ms ease;
}
.faq-item[open] .faq-q { color: #415BE7; }
.faq-item[open] .faq-q::after { transform: rotate(-180deg); }
.faq-q:hover { color: #415BE7; }
.faq-a {
  padding: 0 22px 18px;
  animation: faq-open 200ms ease both;
}
.faq-a p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #2C3038;
}
.faq-a p b { color: #14171B; font-weight: 700; }
.faq-a a {
  color: #415BE7;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(65,91,231,.35);
  text-underline-offset: 3px;
}
.faq-a a:hover { text-decoration-color: #415BE7; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
  .faq-q { font-size: 15px; padding: 16px 18px; }
  .faq-a { padding: 0 18px 16px; }
}

/* ---------- FOOTER ---------- */
.footer {
  padding: 64px 0 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.85) 100%);
  border-top: 1px solid rgba(20,23,27,.06);
  backdrop-filter: blur(10px);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(20,23,27,.06);
  margin-bottom: 22px;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col li,
.footer-col li a {
  font-size: 14px;
  color: #3A3F4A;
  text-decoration: none;
  line-height: 1.5;
  transition: color 160ms ease;
}
.footer-col li a:hover { color: #415BE7; }
.footer-contacts li { color: var(--text-secondary); }
.footer-contacts a { color: #14171B; font-weight: 600; }

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 18px;
  color: #14171B;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.footer-brand img { border-radius: 8px; }
.footer-brand em {
  font-style: normal;
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 15px;
}
.footer-about {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
  max-width: 360px;
}
.footer-about b { color: #14171B; font-weight: 700; }
.footer-social {
  display: flex;
  gap: 8px;
}
.footer-social__link {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(20,23,27,.08);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.footer-social__link svg { width: 16px; height: 16px; }
.footer-social__link:hover {
  transform: translateY(-2px);
  border-color: rgba(65,91,231,.35);
  color: #415BE7;
  background: rgba(65,91,231,.04);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-meta { font-size: 12.5px; color: var(--text-muted, var(--text-secondary)); }
.footer-legal a {
  font-size: 12.5px;
  color: var(--text-secondary);
  text-decoration: none;
}
.footer-legal a:hover { color: #415BE7; text-decoration: underline; }

@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }
.reveal:nth-child(4) { transition-delay: 240ms; }
.reveal:nth-child(5) { transition-delay: 320ms; }
.reveal:nth-child(6) { transition-delay: 400ms; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-visual { max-width: 440px; }
  .hero-float--1 { left: -4%; }
  .hero-float--2 { right: -4%; }
  .hero-float--3 { left: -2%; }
}

@media (max-width: 1024px) {
  .section { padding: 80px 0; }
  .pain-grid, .mono-grid, .plan-grid, .integr-grid, .plat-grid, .equip-grid, .params-grid, .toir-features { grid-template-columns: repeat(2, 1fr); }
  .arms-grid { grid-template-columns: 1fr; }
  .arms-platforms { grid-template-columns: repeat(2, 1fr); }
  .arm-block { padding: 24px; }
  .toir-stats { grid-template-columns: repeat(2, 1fr); }
  .kanban__cols { grid-template-columns: repeat(3, minmax(200px, 1fr)); overflow-x: auto; }
  .toir-detail { grid-template-columns: 1fr; }
  .toir-triggers__grid { grid-template-columns: 1fr; }
  .pred-brain { grid-template-columns: 1fr; gap: 24px; }
  .pred-phases { grid-template-columns: 1fr; }
  .pred-phase-arrow { display: none; }
  .pred-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-body { grid-template-columns: 1fr; }
  .dash-floor { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
  .dash-metrics { grid-template-columns: repeat(2, 1fr); }
  .solution-grid, .split, .dual-grid, .ba-grid, .case { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .flow { grid-template-columns: 1fr; }
  .flow-arrow { display: none; }
  .case { padding: 32px; gap: 28px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .roi-strip { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .aim-chip { transform: translate(-50%, -50%) rotate(var(--a)) translateX(140px) rotate(calc(var(--a) * -1)); font-size: 11px; padding: 7px 10px; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero { padding: 120px 0 40px; }
  .section { padding: 60px 0; }
  .section-header { margin-bottom: 40px; }
  .pain-grid, .mono-grid, .plan-grid, .integr-grid, .plat-grid, .equip-grid, .metrics-grid, .params-grid, .toir-features { grid-template-columns: 1fr; }
  .arms-platforms { grid-template-columns: 1fr; }
  .arm-block { padding: 20px; }
  .arm-phone { width: 280px; }
  .arm-phone__screen { height: 540px; }
  .arm-scene { inset: 34px 14px 20px; }
  .arms-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .toir-stats { grid-template-columns: 1fr; }
  .kanban__cols { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .toir-phone { width: 260px; }
  .toir-ticket__body { grid-template-columns: 1fr; }
  .toir-ticket__side { flex-direction: row; overflow-x: auto; padding: 10px; }
  .tt-nav em { display: none; }
  .pred-stats { grid-template-columns: 1fr; }
  .pred-case__steps li { grid-template-columns: 70px 1fr; gap: 12px; }
  .dash-floor__grid { grid-template-columns: repeat(3, 1fr); }
  .dash-metrics { grid-template-columns: 1fr; }
  .dash-topbar__tabs { display: none; }
  .proto-strip { padding: 24px; flex-direction: column; align-items: flex-start; }
  .cta-inner { padding: 48px 24px; }
  .cta-links { grid-template-columns: 1fr; }
  .case { padding: 24px; }
  .case-right { grid-template-columns: 1fr 1fr; }
  .aim-cycle { max-width: 300px; }
  .aim-chip { transform: translate(-50%, -50%) rotate(var(--a)) translateX(120px) rotate(calc(var(--a) * -1)); font-size: 10px; padding: 6px 8px; }
  .aim-cycle__core { width: 110px; height: 110px; }
  .aim-cycle__num { font-size: 22px; }
  .nav-inner { padding: 8px 8px 8px 14px; }
  .nav-logo span { display: none; }
  .hero-title { font-size: 40px; }
  .hero-visual { max-width: 340px; }
  .hero-float { padding: 8px 12px; font-size: 11px; }
  .hero-float__text { font-size: 11.5px; }
  .hero-float__sub { font-size: 10px; }
  .hero-float--1 { left: 2%; top: 2%; }
  .hero-float--2 { right: 2%; top: 38%; }
  .hero-float--3 { left: 2%; bottom: 4%; }
  .tablet { border-radius: 24px; padding: 14px; }
  .tablet-screen { padding: 12px; gap: 8px; border-radius: 16px; }
  .t-card__value { font-size: 18px; }
  .af-header__title h4 { font-size: 14px; }
  .chat-mock { padding: 20px; }
  .ai-activity { margin-left: 0; }
  .chat-thinking { margin-left: 0; }
}

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