/* ===== HEADER FIX ===== */

.header-block-2 {
  background: #ffffff;
  border-bottom: 1px solid #e6edf5;
}

.header-block-2 .header-wrap {
  min-height: 72px;
}

.header-block-2 .header-logo-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 0 auto;
}

.header-block-2 .navbar-brand,
.header-block-2 a.navbar-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.header-block-2 .navbar-brand img,
.header-block-2 a.navbar-brand img,
.header-block-2 img.logo-img,
.header-block-2 .logo-image img,
.header-block-2 .site-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

.header-block-2 .t4-header-r {
  gap: 8px;
}

.header-block-2 .header-contacts {
  font-size: 12px;
  color: #334155;
}

.header-block-2 .header-contacts a {
  color: #2563eb;
  text-decoration: none;
}

.header-block-2 .header-contacts a:hover {
  text-decoration: underline;
}

.header-block-2 .btn.btn-sm,
.header-block-2 .header-cta-btn {
  border-radius: 10px;
}

@media (max-width: 991.98px) {
  .header-block-2 .header-wrap {
    min-height: 64px;
  }

  .header-block-2 .navbar-brand img,
  .header-block-2 a.navbar-brand img,
  .header-block-2 img.logo-img,
  .header-block-2 .logo-image img,
  .header-block-2 .site-logo img {
    max-height: 36px;
  }
}

/* ===== JanusTranslate universal module CSS ===== */

.jt,
.jt * {
  box-sizing: border-box;
}

.jt {
  --bg: #0b1220;
  --bg2: #0f1a30;
  --stroke: rgba(255, 255, 255, 0.12);
  --text: #e9eef8;
  --muted: rgba(233, 238, 248, 0.78);
  --muted2: rgba(233, 238, 248, 0.58);
  --brand: #4aa3ff;
  --brand2: #6ee7ff;
  --green1: #22c55e;
  --green2: #16a34a;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow2: 0 10px 24px rgba(0, 0, 0, 0.25);

  max-width: 100%;
  overflow-x: hidden;
  padding: 18px;
  border-radius: 24px;

  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.55;
  color: var(--text);

  background:
    radial-gradient(1200px 700px at 15% 10%, rgba(74, 163, 255, 0.22), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(110, 231, 255, 0.14), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(52, 211, 153, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.jt img {
  max-width: 100%;
  height: auto;
}

.jt a {
  color: inherit;
  text-decoration: none;
}

.jt a:hover {
  opacity: 0.96;
}

.jt .jt-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 14px;
}

.jt .jt-name,
.jt .jt-h1,
.jt h2,
.jt h3,
.jt b,
.jt strong {
  color: var(--text);
}

.jt .jt-sub,
.jt .jt-lead,
.jt p,
.jt li,
.jt .jt-reviewName,
.jt .jt-priceLeft small,
.jt .jt-inlineNote,
.jt .jt-sectionNote,
.jt .jt-packCpp,
.jt .jt-kpi,
.jt .jt-note small {
  color: var(--muted);
}

.jt .jt-sub,
.jt .jt-lead,
.jt .jt-priceLeft small,
.jt .jt-reviewText,
.jt .jt-forWhomCard span,
.jt .jt-uspItem span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.jt .jt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: var(--shadow2);
}

.jt .jt-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jt .jt-brand > div {
  min-width: 0;
}

.jt .jt-logo {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jt .jt-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.jt .jt-name {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.1;
  letter-spacing: -0.2px;
}

.jt .jt-sub {
  margin-top: 2px;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.jt .jt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
}

.jt .jt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition: 0.2s ease;
}

.jt .jt-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
}

.jt .jt-btnPrimary {
  border-color: rgba(74, 163, 255, 0.45);
  background: linear-gradient(135deg, rgba(74,163,255,0.95), rgba(110,231,255,0.85));
  color: #071022;
  box-shadow: 0 14px 30px rgba(74,163,255,0.25);
}

.jt .jt-btnGreen {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, var(--green1), var(--green2));
  color: #071022;
  box-shadow: 0 14px 30px rgba(34,197,94,0.24);
}

.jt .jt-hero {
  padding: 24px 0 6px;
  text-align: center;
}

.jt .jt-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}

.jt .jt-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  font-size: 0.92rem;
  color: var(--text);
}

.jt .jt-h1 {
  margin: 14px 0 10px;
  font-size: clamp(2.05rem, 4.8vw, 3.15rem);
  line-height: 1.05;
  font-weight: 950;
  letter-spacing: -0.6px;
}

.jt .jt-h1 span {
  color: #9bd2ff;
}

.jt .jt-lead {
  max-width: 920px;
  margin: 0 auto 14px;
  font-size: 1.07rem;
}

.jt .jt-resultStrip {
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 14px 20px;
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(6,182,212,0.10));
  text-align: center;
}

.jt .jt-resultStrip strong {
  display: block;
  margin-bottom: 4px;
  color: #8df0ba;
}

.jt .jt-resultStrip span {
  color: var(--muted);
}

.jt .jt-ctaRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 8px;
}

.jt .jt-usp {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 14px auto 0;
}

.jt .jt-uspItem {
  grid-column: span 4;
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  box-shadow: var(--shadow2);
  text-align: left;
}

.jt .jt-uspItem b {
  display: block;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

.jt .jt-uspItem span {
  display: block;
}

.jt .jt-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 16px auto 0;
}

.jt .jt-stat {
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  box-shadow: var(--shadow2);
  text-align: left;
}

.jt .jt-stat b {
  display: block;
  font-size: 1.45rem;
  letter-spacing: -0.3px;
}

.jt .jt-stat span {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}

.jt .jt-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--stroke);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  box-shadow: var(--shadow);
}

.jt .jt-section h2 {
  margin: 0 0 10px;
  font-size: 1.55rem;
  letter-spacing: -0.2px;
}

.jt .jt-section p {
  margin: 0 0 10px;
}

.jt .jt-section ul,
.jt .jt-section ol {
  margin: 8px 0 0;
  padding-left: 18px;
}

.jt .jt-section li {
  margin: 0 0 8px;
}

.jt .jt-sectionNote {
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--muted2);
}

.jt .jt-forWhomGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jt .jt-forWhomCard,
.jt .jt-review,
.jt .jt-step,
.jt .jt-pack {
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}

.jt .jt-fwIcon {
  margin-bottom: 8px;
  font-size: 1.6rem;
}

.jt .jt-forWhomCard b {
  display: block;
  margin-bottom: 5px;
  font-size: 0.95rem;
}

.jt .jt-forWhomCard span {
  font-size: 0.9rem;
}

.jt .jt-proofGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.jt .jt-stars {
  margin-bottom: 8px;
  color: #f59e0b;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.jt .jt-reviewText {
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
}

.jt .jt-reviewMeta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jt .jt-reviewAvatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.jt .jt-reviewName {
  font-size: 0.82rem;
}

.jt .jt-reviewName b {
  display: block;
  font-size: 0.86rem;
}

.jt .jt-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.jt .jt-stepNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border: 1px solid rgba(74,163,255,0.35);
  border-radius: 12px;
  background: rgba(74,163,255,0.18);
  color: var(--text);
  font-weight: 900;
}

.jt .jt-step p {
  margin: 0;
}

.jt .jt-step h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.jt .jt-calcWrap {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 16px;
  background: rgba(99,102,241,0.07);
}

.jt .jt-calcRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.jt .jt-calcField label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.jt .jt-calcField input,
.jt .jt-calcField select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 0.92rem;
  outline: none;
}

.jt .jt-calcField input::placeholder {
  color: var(--muted2);
}

.jt .jt-calcField input:focus,
.jt .jt-calcField select:focus {
  border-color: var(--brand);
}

.jt .jt-calcResult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 14px;
  background: rgba(16,185,129,0.08);
}

.jt .jt-calcNum {
  font-size: 1.5rem;
  font-weight: 800;
  color: #8df0ba;
}

.jt .jt-calcDisclaimer {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted2);
  text-align: center;
}

.jt .jt-pricingTwo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.jt .jt-priceList {
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

.jt .jt-priceList li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  flex-wrap: wrap;
}

.jt .jt-priceLeft {
  min-width: 0;
}

.jt .jt-priceLeft b {
  display: block;
}

.jt .jt-priceLeft small {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
}

.jt .jt-priceRight {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 900;
  color: var(--text);
}

.jt .jt-inlineNote {
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--muted);
}

.jt .jt-packGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.jt .jt-packTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.jt .jt-packTop h3 {
  margin: 0;
  font-size: 1.08rem;
}

.jt .jt-packPrice {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text);
}

.jt .jt-kpi {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  font-size: 0.9rem;
}

.jt .jt-kpi b {
  color: var(--text);
}

.jt .jt-packCpp {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted2);
}

.jt .jt-packBest {
  position: relative;
  border-color: rgba(74,163,255,0.45);
  background: rgba(74,163,255,0.08);
}

.jt .jt-packBestLabel {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.jt .jt-note {
  max-width: 980px;
  margin: 12px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(74,163,255,0.28);
  border-radius: var(--radius);
  background: rgba(74,163,255,0.08);
  color: var(--text);
  text-align: left;
}

.jt .jt-finalCta {
  margin-top: 18px;
  padding: 30px 24px;
  border: 1px solid rgba(99,102,241,0.25);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(6,182,212,0.08));
  text-align: center;
}

.jt .jt-finalCta h2 {
  margin: 0 0 8px;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
}

.jt .jt-finalCta p {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .jt .jt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jt .jt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jt .jt-uspItem { grid-column: span 6; }
  .jt .jt-packGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jt .jt-forWhomGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jt .jt-proofGrid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .jt .jt-top { flex-wrap: wrap; }
  .jt .jt-actions { width: 100%; }
  .jt .jt-actions .jt-btn { flex: 1; }
  .jt .jt-sub { max-width: 100%; white-space: normal; }
}

@media (max-width: 560px) {
  .jt { padding: 16px; border-radius: 20px; }
  .jt .jt-container { padding: 14px; }
  .jt .jt-pricingTwo { grid-template-columns: 1fr; }
  .jt .jt-usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jt .jt-uspItem { grid-column: auto; }
  .jt .jt-calcRow { grid-template-columns: 1fr; }
  .jt .jt-packGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .jt .jt-btn,
  .jt .jt-ctaRow .jt-btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .jt .jt-steps,
  .jt .jt-usp,
  .jt .jt-packGrid,
  .jt .jt-stats,
  .jt .jt-forWhomGrid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Design pass 2026-04-23 — Header dedup, Calculator contrast,
   typography rhythm. Appended after existing rules so it wins
   on cascade. Uses !important only where inline styles must
   be overridden. */

/* ---------- 0. KILL TOP GAP (без слома фона!) ----------
   Найден источник: t4 шаблон даёт .t4-main-body { padding: 3rem 0 }
   = 48px пустоты сверху и снизу секции до карточки .jt.
   Прижимаем верх до 0.5rem (8px) — лёгкий зазор, не пустыня. */
.t4-main-body { padding-top: .5rem !important; padding-bottom: 1rem !important; }

/* Article body wraps content in <p> (Sourcerer requirement) — обнуляем margin */
.com-content-article .article-body { padding-top: 0; }
.com-content-article .article-body > p:first-child,
.com-content-article .article-body > p { margin: 0 !important; padding: 0 !important; }

/* .jt сохраняет свой тёмный градиентный фон и radius, но без верхнего пуха */
.jt { padding-top: 18px !important; margin-top: 0 !important; }
.jt .jt-container { padding-top: 8px !important; max-width: 1100px; }
.jt .jt-hero { padding: 4px 0 12px !important; margin-top: 0 !important; }
.jt .jt-hero > :first-child { margin-top: 0 !important; }

/* ---------- 1. HEADER: hide duplicate top-bar inside article ----------
   Template header (Mod1) already shows logo "JanusTranslate" + CTA
   "Запустить бота". The hero's inline .jt-top duplicates this with a
   second logo, brand block and 2 buttons. Hiding it removes the
   stutter and lets the hero start with the value props (badges + h1). */
.jt .jt-top { display: none !important; }
.jt .jt-hero { padding-top: 8px; }


/* ---------- 2. CALCULATOR: contrast, hierarchy, spacing ---------- */

/* Outer wrapper — clearer panel */
.jt .jt-calcWrap {
  padding: 22px;
  border: 1px solid rgba(110, 231, 255, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(74, 163, 255, 0.04));
}

/* Field labels — readable, semi-uppercase */
.jt .jt-calcField label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(233, 238, 248, 0.78);
}

/* Inputs — visible background, comfortable size */
.jt .jt-calcField input,
.jt .jt-calcField select {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 11px;
}
.jt .jt-calcField input:hover,
.jt .jt-calcField select:hover {
  background: rgba(255, 255, 255, 0.13);
}
.jt .jt-calcField input:focus,
.jt .jt-calcField select:focus {
  border-color: #6ee7ff;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.18);
}
/* Native dropdown text on dark background */
.jt .jt-calcField select option {
  background: #0f1a30;
  color: #ffffff;
}

/* Result strip — grid with separator and bold numbers */
.jt .jt-calcResult {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  margin-top: 10px;
  border: 1px solid rgba(16, 185, 129, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(34, 197, 94, 0.03));
}

/* Override inline styles inside .jt-calcResult cells */
.jt .jt-calcResult > div {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  text-align: left !important;
}
/* Vertical divider between credits and EUR */
.jt .jt-calcResult > div:first-child {
  position: relative;
  padding-right: 18px;
}
.jt .jt-calcResult > div:first-child::after {
  content: '';
  position: absolute;
  top: 6px; bottom: 6px; right: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* Result labels — uppercase, contrast */
.jt .jt-calcResult > div > div:first-child {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(233, 238, 248, 0.72) !important;
  margin-bottom: 0 !important;
}

/* Credit number — keep mint, bump size and tighten line */
.jt .jt-calcResult .jt-calcNum {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.05;
  color: #8df0ba;
}

/* EUR number — make distinctly different from credits: white, smaller */
.jt #jt-calcEur {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.05;
  color: #ffffff !important;
}

/* CTA button — drop the inline margin-left:auto, grid positions it */
.jt .jt-calcResult > .jt-btn {
  margin-left: 0 !important;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 14px 22px;
}

/* Disclaimer — muted, smaller, with breathing room */
.jt .jt-calcDisclaimer {
  margin-top: 12px;
  font-size: 0.76rem;
  color: rgba(233, 238, 248, 0.55);
}

/* Calculator responsive */
@media (max-width: 760px) {
  .jt .jt-calcWrap { padding: 18px; }
  .jt .jt-calcResult {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 16px;
  }
  .jt .jt-calcResult > .jt-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .jt .jt-calcResult > div:first-child { padding-right: 14px; }
}
@media (max-width: 480px) {
  .jt .jt-calcResult { grid-template-columns: 1fr; }
  .jt .jt-calcResult > div:first-child { padding-right: 0; }
  .jt .jt-calcResult > div:first-child::after { display: none; }
}


/* ---------- 3. TYPOGRAPHY: clearer hierarchy across sections ---------- */

/* Section titles — bigger, tighter, white */
.jt .jt-section h2 {
  margin: 0 0 14px;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #ffffff;
  line-height: 1.2;
}
.jt .jt-section h3 { color: #ffffff; }
.jt .jt-section { margin-top: 28px; }

/* Section intro note */
.jt .jt-sectionNote {
  margin: -4px 0 16px;
  font-size: 0.95rem;
  color: rgba(233, 238, 248, 0.66);
}

/* Hero h1 — bigger and confident */
.jt .jt-h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin: 8px 0 14px;
  color: #ffffff;
}
.jt .jt-h1 span { color: #6ee7ff; }
.jt .jt-lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(233, 238, 248, 0.85);
  max-width: 720px;
}

/* Badges — tighter pill */
.jt .jt-badge {
  font-size: 0.83rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}


/* ---------- 4. BUTTONS: consistent weight and accent ---------- */
.jt .jt-btn {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 20px;
  border-radius: 12px;
  letter-spacing: 0.005em;
  transition: filter .15s ease, transform .05s ease;
}
.jt .jt-btn:hover { opacity: 1; filter: brightness(1.1); }
.jt .jt-btn:active { transform: translateY(1px); }
.jt .jt-btnPrimary {
  background: linear-gradient(135deg, #4aa3ff, #6366f1);
  color: #ffffff;
  border: 1px solid transparent;
}
.jt .jt-btnGreen {
  background: linear-gradient(135deg, #22c55e, #10b981);
  color: #ffffff;
  border: 1px solid transparent;
}


/* ---------- 5. PRICING ROWS: separation and price emphasis ---------- */
.jt .jt-priceList li {
  background: rgba(255, 255, 255, 0.05);
  padding: 14px 16px;
}
.jt .jt-priceRight {
  font-size: 1.05rem;
  font-weight: 800;
  color: #6ee7ff;
}

/* Pack cards — big readable price */
.jt .jt-pack { padding: 18px 16px; }
.jt .jt-packPrice {
  font-size: 1.45rem;
  color: #ffffff;
}


/* ---------- 6. PAIN BLOCK responsive — image to right on wide screens ---------- */
@media (min-width: 760px) {
  .jt-painSection > div > div {
    grid-template-columns: 1fr 1.1fr !important;
    gap: 28px !important;
  }
}


/* ---------- 7. FAQ: a touch more polish + match parent dark scheme ---------- */
.jt-faqSection {
  max-width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 22px !important;
}
.jt-faqSection h2 {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}


/* ---------- 8. MOBILE TIGHTENING ---------- */
@media (max-width: 760px) {
  .jt .jt-container { padding: 10px 12px 20px !important; }
  .jt .jt-section,
  .jt-faqSection { padding: 18px 14px !important; }
  .jt .jt-section { margin-top: 18px; }

  .jt .jt-h1 {
    font-size: clamp(1.6rem, 7.5vw, 2.1rem);
    line-height: 1.18;
  }
  /* Hero h1 has hard <br> — neutralise on narrow so text flows */
  .jt .jt-h1 br { display: none; }
  .jt .jt-h1 span { display: inline; color: #6ee7ff; }

  .jt .jt-section h2,
  .jt-faqSection h2 { font-size: 1.32rem !important; }

  .jt .jt-lead { font-size: 0.98rem; }
  .jt .jt-badge { font-size: 0.78rem; padding: 5px 10px; }

  /* Pain block — image first, text after on mobile, with cap */
  .jt-painSection > div { padding: 16px !important; }
  .jt-painSection > div > div { gap: 14px !important; }
  .jt-painSection h2 { font-size: 1.25rem !important; }
  .jt-painSection p { font-size: 0.94rem !important; }
  .jt-painSection img { max-width: 100%; }

  /* Pricing pack grid — already 2-col below 900px; force readable scale */
  .jt .jt-packPrice { font-size: 1.25rem; }
  .jt .jt-priceList li { padding: 12px 14px; flex-wrap: wrap; }

  /* Steps — single column on small phones for readability */
  .jt .jt-steps { gap: 10px; }
}

/* Sub-tablet: pricing 1-col so prices don't crunch */
@media (max-width: 540px) {
  .jt .jt-pricingTwo { gap: 10px; }
  .jt .jt-packGrid { grid-template-columns: 1fr !important; }
  .jt .jt-actions { width: 100%; }
  .jt .jt-actions .jt-btn { flex: 1 1 100%; text-align: center; }
}


/* ---------- 9. HEADER MOBILE FIX ----------
   На мобиле в шапке висели: лого (300×69) + «Запустить бота» + «Поддержка» +
   гамбургер. Это переполняло ширину и выезжало за экран. Прижимаем элементы. */

/* Контейнер шапки — без боковых паддингов на мобиле */
@media (max-width: 991.98px) {
  .header-block-2 .container-xxl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .header-block-2 .header-wrap {
    gap: 6px;
    flex-wrap: nowrap;
  }
  /* Уменьшаем большой лого на средних мобилах */
  .header-block-2 .logo-img,
  .header-block-2 a.navbar-brand img.logo-img {
    max-height: 32px !important;
    width: auto !important;
  }
  .header-block-2 .logo-img-sm {
    max-height: 32px !important;
    width: auto !important;
  }
  /* Кнопки в шапке — компактные */
  .header-block-2 .btn.btn-sm,
  .header-block-2 .header-cta-btn {
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    white-space: nowrap;
  }
  .header-block-2 .t4-offcanvas-toggle {
    padding: 6px 8px !important;
  }
  /* Не даём правой группе выезжать */
  .header-block-2 .t4-header-r {
    flex-wrap: nowrap;
    min-width: 0;
  }
}

/* На реально узких — прячем «Поддержку», оставляем CTA + гамбургер */
@media (max-width: 480px) {
  .header-block-2 .btn.btn-outline-primary.d-lg-none {
    display: none !important;
  }
  .header-block-2 .header-cta-btn {
    font-size: 0.74rem !important;
    padding: 5px 9px !important;
  }
  .header-block-2 .logo-img-sm {
    max-height: 28px !important;
  }
}

/* На самых узких (≤360px) — лого в иконку, CTA сократить до иконки тоже */
@media (max-width: 360px) {
  .header-block-2 .header-cta-btn { font-size: 0.7rem !important; padding: 4px 8px !important; }
}


/* ---------- 10. HEADER CLEANUP — убираем мусор из шапки ----------
   Контакты Telegram/Email строкой в шапке = «сайт-визитка из 2015».
   Дубли навигации «Главная» и «Конфиденциальность» избыточны.
   Оставляем: лого + единственный nav-пункт (Блог) + CTA. */

/* Скрыть Telegram + Email строку в шапке (она всё ещё доступна в футере) */
.header-block-2 .header-contacts { display: none !important; }

/* Скрыть «Главная» — повторение клика по лого */
.header-block-2 .t4-header-r a[href="/"][class*="btn-outline-primary"] { display: none !important; }

/* Скрыть «Конфиденциальность» — это футерный материал, не шапочный */
.header-block-2 .t4-header-r a[href="/privacy"][class*="btn-outline-primary"] { display: none !important; }

/* Оставшийся «Блог» — без правого отступа дубля и с нормальной кнопкой */
.header-block-2 .t4-header-r a[href="/blog"][class*="btn-outline-primary"] {
  margin-right: 12px !important;
}

/* === Blog index — modern Joomla 4 layout (rebuilt 2026-05-25) === */

/* Items container — responsive grid (compact density) */
.com-content-category-blog__items,
.blog .items-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}
.com-content-category-blog__items > *,
.blog .items-row > * { min-width: 0; }
@media (max-width: 600px) {
    .com-content-category-blog__items,
    .blog .items-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Card */
.com-content-category-blog__item,
.com-content-category-blog__item.blog-item,
.items-row .item,
.items-row > [class*="col-"] > .item {
    background: #fbf7ed !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin: 0 !important;
    box-shadow: 0 1px 4px rgba(27,22,18,0.06);
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
    border: 0;
}
.com-content-category-blog__item:hover,
.items-row .item:hover {
    box-shadow: 0 8px 20px rgba(27,22,18,0.12);
    transform: translateY(-2px);
}

/* System-unpublished wrapper — make it transparent */
.com-content-category-blog__item .system-unpublished {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

/* Hide empty intro and article-aside on LP pages */
.com-content-category-blog__item .item-intro:empty,
.com-content-category-blog__item .article-aside:empty {
    display: none;
}

/* Cover image figure — compact, 16:9 ratio (less tall) */
.com-content-category-blog__item figure.item-image,
.com-content-category-blog__item figure.pull-left.item-image,
.com-content-category-blog__item figure.pull-right.item-image,
.items-row figure.item-image {
    float: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: #f0e9d8;
    aspect-ratio: 16 / 9;
    box-shadow: none !important;
}
.com-content-category-blog__item figure.item-image img,
.items-row figure.item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    transition: transform .3s ease;
    box-shadow: none !important;
    margin: 0 !important;
}
.com-content-category-blog__item:hover figure.item-image img,
.items-row .item:hover figure.item-image img {
    transform: scale(1.03);
}

/* Title */
.com-content-category-blog__item .page-header,
.items-row .item .page-header {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.com-content-category-blog__item .page-header h2,
.items-row .item .page-header h2 {
    font-size: clamp(14px, 1.6vw, 15px);
    margin: 0 0 4px;
    line-height: 1.3;
    font-weight: 700;
    padding: 0;
    border: 0;
    /* Clamp to 3 lines max to keep cards uniform height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.com-content-category-blog__item .page-header h2 a,
.items-row .item .page-header h2 a {
    color: #1B1612 !important;
    text-decoration: none;
}
.com-content-category-blog__item .page-header h2 a:hover,
.items-row .item .page-header h2 a:hover {
    color: #d72638 !important;
    text-decoration: none;
}

/* Intro text (when present) — clamp to 2 lines */
.com-content-category-blog__item .item-intro,
.items-row .item .item-intro {
    color: #4a4339;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.com-content-category-blog__item .item-content,
.items-row .item .item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Masonry class — explicitly cancel any column-count it might apply */
.com-content-category-blog__items.masonry-2,
.com-content-category-blog__items.masonry-3,
.com-content-category-blog__items.masonry-4 {
    column-count: unset !important;
    columns: unset !important;
}

/* Pagination — center under grid */
.com-content-category-blog__navigation,
.pagination-wrap {
    margin-top: 24px;
}

/* === Blog header — match the main-page React header style === */
/* The main page has: text-link nav items + RU/EN inline + dark "Запустить бота" CTA.
   The blog uses Joomla T4 default with outline-button nav + red CTA. Restyle to match. */

/* Convert nav buttons to clean text links (like main page) */
.t4-header-r .btn.btn-outline-primary {
    background: transparent !important;
    border: 0 !important;
    color: #1B1612 !important;
    padding: 4px 10px !important;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    margin-right: 4px !important;
    box-shadow: none !important;
}
.t4-header-r .btn.btn-outline-primary:hover {
    color: #d72638 !important;
    background: transparent !important;
    text-decoration: none;
}

/* Active page link gets a subtle underline */
.t4-header-r .btn.btn-outline-primary[href*="/blog"]:hover,
body.com_content.view-category .t4-header-r .btn.btn-outline-primary[href="/blog"] {
    color: #d72638 !important;
}

/* Hide secondary buttons (Конфиденциальность, etc.) — keep only Главная/Блог */
.t4-header-r .btn.btn-outline-primary[href*="/privacy"],
.t4-header-r .btn.btn-outline-primary[href*="/terms"] {
    display: none !important;
}

/* "Запустить бота" CTA — change from red to dark to match main page */
.t4-header-r .header-cta-btn,
.t4-header-r .btn.btn-primary.header-cta-btn,
.t4-header-r .btn.btn-primary {
    background: #1B1612 !important;
    border-color: #1B1612 !important;
    color: #F6F1E8 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(27,22,18,0.18);
    transition: transform .15s, box-shadow .15s;
}
.t4-header-r .header-cta-btn:hover,
.t4-header-r .btn.btn-primary:hover {
    background: #2a2118 !important;
    color: #F6F1E8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27,22,18,0.28);
}

/* Mobile / smaller layout */
@media (max-width: 768px) {
    .t4-header-r .btn.btn-outline-primary { font-size: 13px; padding: 4px 8px !important; }
    .t4-header-r .header-cta-btn { font-size: 13px; padding: 6px 14px !important; }
}

/* === Hide the Joomla breadcrumb module at footer (duplicate of our top breadcrumb) === */
.com-content-article ~ * .mod-breadcrumbs,
body .mod-breadcrumbs:not(.jt-article-breadcrumb) {
    display: none !important;
}

/* === Kill all blinking/flashing animations in article body ===
   The inline article CSS uses:
   - `animation: jtPulse 2.4s infinite` on CTA buttons (endless box-shadow ripple)
   - `animation: jtFadeIn 0.9s ease-out` on .jt-hero / .jt-cover / .jt-stats WITHOUT
     `animation-fill-mode: forwards` — after the animation finishes the element falls back
     to the start frame (opacity:0) and any DOM mutation re-triggers the animation,
     producing a visible "flash → disappear" effect on the comparison hero block.
   Fix: cancel these animations entirely and pin the element at its final visible state. */
.jt-hero-cta,
.jt-cta-btn,
.com-content-article .jt-hero-cta,
.com-content-article .jt-cta-btn,
.jt-hero,
.jt-cover,
.jt-stats,
.com-content-article .jt-hero,
.com-content-article .jt-cover,
.com-content-article .jt-stats {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
/* Restore a subtle, calm hover affordance instead of constant pulsing */
.jt-hero-cta,
.jt-cta-btn {
    box-shadow: 0 4px 14px rgba(27,22,18,0.18);
}
.jt-hero-cta:hover,
.jt-cta-btn:hover {
    box-shadow: 0 6px 20px rgba(27,22,18,0.28);
    transform: translateY(-2px) !important;
}

/* === Twemoji — inline emoji SVGs render at text size, aligned with text === */
img.jt-emoji {
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.05em 0 0.1em !important;
    vertical-align: -0.1em !important;
    display: inline-block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: contain !important;
}

/* === Article images — uniform compact + centered ===
   Articles have 3 types of figures:
   1) .item-image (Joomla cover from image_intro/image_fulltext) — top of article
   2) .jt-cover (custom hero illustration SVG at start of article body)
   3) .jt-inline-fig (custom inline charts/diagrams scattered through the article)
   ALL of them should fit within the article body width (max ~700px) and be centered. */
.com-content-article figure.item-image,
.com-content-article .item-image,
.com-content-article figure.pull-none.item-image,
.com-content-article figure.pull-left.item-image,
.com-content-article figure.pull-right.item-image,
.com-content-article figure.jt-cover,
.com-content-article figure.jt-inline-fig {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto 24px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: transparent;
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 0 !important;
}
.com-content-article figure.item-image img,
.com-content-article .item-image img,
.com-content-article figure.jt-cover img,
.com-content-article figure.jt-inline-fig img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    /* No object-fit override — let natural sizing work (especially for SVG with width/height attrs) */
}
/* SVG-specific: ensure intrinsic ratio is respected */
.com-content-article figure.jt-inline-fig img[src$=".svg"],
.com-content-article figure.jt-cover img[src$=".svg"] {
    /* SVG files have viewBox/width/height — browser uses intrinsic ratio */
    aspect-ratio: attr(width) / attr(height);
}
.com-content-article figure.jt-inline-fig figcaption {
    text-align: center;
    font-size: 13px;
    color: #6f6657;
    margin-top: 8px;
    line-height: 1.4;
}
@media (max-width: 640px) {
    .com-content-article figure.item-image,
    .com-content-article .item-image,
    .com-content-article figure.jt-cover,
    .com-content-article figure.jt-inline-fig {
        max-width: 100% !important;
        border-radius: 10px !important;
    }
}

/* === Article-top breadcrumb (rendered by article template override) === */
.jt-article-breadcrumb {
    margin: 0 0 16px;
    padding: 0;
}
.jt-article-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: #6f6657;
}
.jt-article-breadcrumb li {
    display: inline-flex;
    align-items: center;
}
.jt-article-breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: 6px;
    color: #b7ad95;
}
.jt-article-breadcrumb a {
    color: #6f6657;
    text-decoration: none;
    transition: color .15s;
}
.jt-article-breadcrumb a:hover {
    color: #d72638;
    text-decoration: underline;
}
.jt-article-breadcrumb li[aria-current="page"] {
    color: #1B1612;
    font-weight: 500;
}

/* === Blog intro section (.category-desc) — compact === */
.com-content-category .category-desc,
.blog .category-desc {
    background: #fbf7ed;
    border-radius: 14px;
    padding: 24px 28px !important;
    margin: 0 0 24px;
    box-shadow: 0 2px 8px rgba(27,22,18,0.06);
}
.com-content-category .category-desc h1,
.com-content-category .category-desc h2,
.blog .category-desc h1,
.blog .category-desc h2 {
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 700;
}
.com-content-category .category-desc p,
.blog .category-desc p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 8px;
    color: #4a4339;
}
.com-content-category .category-desc p:last-child,
.blog .category-desc p:last-child { margin-bottom: 0; }

/* === "Еще материалы" (.items-more) — compact list === */
.com-content-category .items-more,
.blog .items-more {
    background: #fbf7ed;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 0 24px;
    box-shadow: 0 2px 8px rgba(27,22,18,0.06);
}
.com-content-category .items-more h3,
.blog .items-more h3 {
    font-size: 18px;
    margin: 0 0 12px;
    font-weight: 700;
    color: #1B1612;
}
.com-content-category .items-more ol,
.com-content-category .items-more ul,
.blog .items-more ol,
.blog .items-more ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.com-content-category .items-more li,
.blog .items-more li {
    padding: 8px 0;
    border-bottom: 1px solid #e8dfc8;
}
.com-content-category .items-more li:last-child,
.blog .items-more li:last-child { border-bottom: 0; }
.com-content-category .items-more li a,
.blog .items-more li a {
    color: #1B1612;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.com-content-category .items-more li a::before,
.blog .items-more li a::before {
    content: '→';
    color: #d72638;
    font-weight: 700;
}
.com-content-category .items-more li a:hover,
.blog .items-more li a:hover {
    color: #d72638;
    text-decoration: underline;
}

/* === Переключатель языков RU/EN === */
/* Base styles (applied to both inline + floating variants) */
.jt-lang-switch {
    display: inline-flex;
    gap: 2px;
    font-family: 'Inter', system-ui, sans-serif;
}
.jt-lang-switch a {
    text-decoration: none !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all .2s;
}
.jt-lang-switch a.active {
    pointer-events: none;
}

/* INLINE variant: lives inside .t4-header-r — looks like a small toggle pill */
.jt-lang-switch--inline {
    background: rgba(27,22,18,0.06);
    border-radius: 999px;
    padding: 3px;
    margin-right: 12px;
    align-items: center;
}
.jt-lang-switch--inline a {
    color: #1B1612 !important;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    opacity: 0.55;
}
.jt-lang-switch--inline a:hover {
    opacity: 1;
    background: rgba(27,22,18,0.08);
}
.jt-lang-switch--inline a.active {
    background: #1B1612;
    color: #F6F1E8 !important;
    opacity: 1;
}

/* FLOATING variant (fallback when no header): fixed top-right dark pill */
.jt-lang-switch--floating {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    gap: 4px;
    background: rgba(27,22,18,.85);
    border-radius: 24px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    backdrop-filter: blur(8px);
}
.jt-lang-switch--floating a {
    color: rgba(246,241,232,0.7) !important;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
}
.jt-lang-switch--floating a:hover,
.jt-lang-switch--floating a.active {
    background: #F6F1E8;
    color: #1B1612 !important;
}

@media (max-width: 768px) {
    /* On small screens, inline switcher gets compacter */
    .jt-lang-switch--inline { margin-right: 6px; }
    .jt-lang-switch--inline a { padding: 4px 8px; font-size: 11px; }

    .jt-lang-switch--floating {
        top: auto;
        bottom: 16px;
        right: 16px;
        font-size: 12px;
    }
    .jt-lang-switch--floating a { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .jt-lang-switch a { transition: none; }
}

/* Title статьи — стилизуем H1 (после override) */
.com-content-article > .page-header h1,
.item-page > .page-header h1 {
    font-size: clamp(26px, 5vw, 40px);
    line-height: 1.2;
    margin: 0 0 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1B1612;
}

/* Скрываем дублирующий H2 (старый) если ещё где-то остался */
.com-content-article .page-header h2.com-content-article__title {
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
}

/* (old v3 .jt-lang-switch block removed 2026-05-25 — superseded by inline+floating variants above) */

/* === EN-fallback list (когда на /blog#en нет видимых статей) === */
/* Span the full grid width — otherwise it occupies only 1 column of the auto-fill grid */
.com-content-category-blog__items .jt-en-fallback-list,
.blog .items-row .jt-en-fallback-list,
.jt-en-fallback-list {
    grid-column: 1 / -1 !important;
    width: 100%;
}

/* Card-style fallback (with covers) on /blog#en */
.jt-en-fallback-list--cards { background: transparent !important; padding: 0 !important; box-shadow: none !important; }
.jt-en-fallback-list--cards .jt-en-h2 { margin: 0 0 6px; }
.jt-en-fallback-list--cards .jt-en-sub { margin: 0 0 20px; }
.jt-en-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.jt-en-cards .jt-en-card {
    background: #fbf7ed;
    border-radius: 12px;
    padding: 12px;
    margin: 0;
    box-shadow: 0 1px 4px rgba(27,22,18,0.06);
    transition: box-shadow .2s ease, transform .2s ease;
    display: flex;
    flex-direction: column;
}
.jt-en-cards .jt-en-card:hover {
    box-shadow: 0 8px 20px rgba(27,22,18,0.12);
    transform: translateY(-2px);
}
.jt-en-cards .jt-en-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #f0e9d8;
    margin-bottom: 10px;
}
.jt-en-cards .jt-en-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.jt-en-cards .jt-en-card:hover .jt-en-card-img img { transform: scale(1.03); }
.jt-en-cards .jt-en-card-title {
    font-size: clamp(14px, 1.6vw, 15px);
    margin: 0 0 4px;
    line-height: 1.3;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jt-en-cards .jt-en-card-title a {
    color: #1B1612 !important;
    text-decoration: none;
}
.jt-en-cards .jt-en-card-title a:hover { color: #d72638 !important; }
.jt-en-cards .jt-en-card-intro {
    color: #4a4339;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .jt-en-cards { grid-template-columns: 1fr; gap: 12px; }
}
.jt-en-fallback-list {
    background: linear-gradient(135deg, #F6F1E8 0%, #fbf7ed 100%);
    border-radius: 16px;
    padding: 32px 28px;
    margin: 32px 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.jt-en-fallback-list .jt-en-h2 {
    font-size: clamp(22px, 4vw, 28px);
    font-weight: 800;
    margin: 0 0 12px;
    color: #1B1612;
    letter-spacing: -0.5px;
    border: 0;
    padding: 0;
}
.jt-en-fallback-list .jt-en-sub {
    color: #666;
    margin: 0 0 20px;
    font-size: 15px;
}
.jt-en-fallback-list .jt-en-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.jt-en-fallback-list .jt-en-list li {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #e8dfc8;
}
.jt-en-fallback-list .jt-en-list li:last-child { border-bottom: 0; }
.jt-en-fallback-list .jt-en-list li::before {
    content: "→";
    color: #1B1612;
    font-weight: 700;
    margin-right: 12px;
    display: inline-block;
    width: 16px;
}
.jt-en-fallback-list .jt-en-list a {
    color: #1B1612;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    transition: opacity 0.15s ease;
}
.jt-en-fallback-list .jt-en-list a:hover {
    opacity: 0.65;
    text-decoration: underline;
}