/* ===== STUDIO // О СТУДИИ: продающий блок =====
   Дополняет .studio-h/.studio-d/.card/.cttl/.cdesc/.studio-cta/.studio-contact
   из screens.css. Всё в теме (CSS-vars + color-mix), mobile-first.
   Подключение этого файла добавит основной разработчик. */

/* ── Секция: дыхание между блоками + разделитель ── */
.studio-sec{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

/* kicker-заголовок секции (как cd-h, но крупнее по воздуху) */
.studio-sh{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent-soft);
  border-left:2px solid var(--bordeaux);
  padding-left:11px;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* лид-подзаголовок секции */
.studio-lead{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:16px;
  line-height:1.45;
  color:var(--bone);
  opacity:.92;
  padding:0 4px;
  margin-bottom:14px;
}

/* ── Буллеты «Что мы делаем» ── */
.studio-bullets{display:flex;flex-direction:column;gap:11px;padding:2px 4px 0}
.studio-bullet{display:flex;align-items:flex-start;gap:10px}
.studio-dot{
  flex:0 0 auto;
  font-size:10px;
  line-height:1.5;
  color:var(--neon);
  text-shadow:0 0 8px color-mix(in srgb, var(--neon) 50%, transparent);
  margin-top:1px;
}
.studio-bt{
  font-size:13px;
  line-height:1.55;
  color:var(--neon-soft);
  opacity:.92;
}

/* ── Оффер-карточки: чуть больше воздуха для текстового контента ── */
.studio-offer{align-items:flex-start;min-height:auto;padding:15px 16px}
.studio-offer .cttl{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.3;
  color:var(--bone);
}

/* ── Шаги «Как это работает» (нумерованные) ── */
.step{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:13px 14px;
  margin-bottom:10px;
  border:1px solid var(--line);
  background:rgba(12,9,12,.4);
}
.step-n{
  flex:0 0 auto;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:26px;
  line-height:1;
  color:var(--accent);
  text-shadow:0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
  min-width:34px;
}
.step-body{flex:1;min-width:0}
.step-ttl{
  font-family:'Manrope','JetBrains Mono',sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.01em;
  color:var(--bone);
}
.step-d{
  font-size:12px;
  line-height:1.5;
  color:var(--neon-soft);
  opacity:.85;
  margin-top:5px;
}

/* ── Сравнение «Агент vs Бот» (2 колонки) ── */
.studio-vs{display:flex;gap:10px;padding:2px 0 0}
.vs-col{
  flex:1;
  min-width:0;
  padding:13px 12px;
  border:1px solid var(--line);
  background:rgba(8,8,10,.4);
}
.vs-bot{
  border-color:color-mix(in srgb, var(--muted) 50%, var(--line));
  background:rgba(8,8,10,.5);
}
.vs-agent{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--bordeaux) 18%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--neon) 12%, transparent);
}
.vs-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:.12em;
  line-height:1.3;
  text-transform:uppercase;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 90%, transparent);
}
.vs-bot .vs-tag{color:var(--muted)}
.vs-agent .vs-tag{color:var(--bone)}
.vs-item{display:flex;align-items:flex-start;gap:8px;margin-top:7px}
.vs-mk{
  flex:0 0 auto;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  line-height:1.45;
}
.vs-bot .vs-mk{color:var(--muted)}
.vs-agent .vs-mk{
  color:var(--neon);
  text-shadow:0 0 8px color-mix(in srgb, var(--neon) 50%, transparent);
}
.vs-tx{font-size:12px;line-height:1.45}
.vs-bot .vs-tx{color:var(--muted)}
.vs-agent .vs-tx{color:var(--neon-soft);opacity:.95}

/* ── CTA: отступ от сравнения + безопасный низ для скролла ── */
#ctaBtn{margin-top:24px}
.studio-contact{padding-bottom:calc(20px + var(--safe-b))}