/* Лендинг конструктора сайтов /konstruktor (референс — главная reactbits.dev).
   «Экраны» с эффектами (сцена первого экрана, демо, финальный блок) тёмные в обеих темах:
   это витрина сайта, а не часть страницы. Остальное на токенах b2b.css. */

.bld_page {
  --bld-screen: #0b0c0b;
  --bld-screen-2: #121412;
  --bld-win: rgba(17, 19, 17, 0.78);
  --bld-win-edge: rgba(255, 255, 255, 0.09);
  --bld-win-hi: rgba(255, 255, 255, 0.05);
  --bld-on: #f3f4f2;
  --bld-on-muted: rgba(243, 244, 242, 0.6);
  --bld-on-faint: rgba(243, 244, 242, 0.38);
  --bld-pri: #69e584;
  --bld-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bld_ico { width: 22px; height: 22px; flex: none; }
.bld_ico_sm { width: 15px; height: 15px; flex: none; }
.bld_ico_xs { width: 13px; height: 13px; }

/* ── Первый экран ─────────────────────────────────────────── */
.bld_hero { padding: 120px 0 72px; }
.bld_pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px; border-radius: 12px;
  background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge);
  color: var(--primary); font-size: 13px; font-weight: 600; line-height: 20px;
  transition: background-color var(--b2b-t-in) ease;
}
.bld_pill:hover { background: var(--b2b-card-hover); color: var(--primary); }
.bld_pill span { padding: 2px 8px; border-radius: 8px; background: var(--primary); color: var(--web-wash); font-size: 12px; }
.bld_pill .bld_ico_sm { transition: translate var(--b2b-t-in) var(--b2b-ease-out); }
.bld_pill:hover .bld_ico_sm { translate: 3px 0; }
.bld_title {
  margin: 28px 0 0; max-width: 17ch;
  font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -0.035em;
  text-indent: -0.04em; text-wrap: balance;
}
.bld_hero_row { display: grid; gap: 20px; margin-top: 28px; align-items: end; }
.bld_hero_lead { margin: 0; max-width: 46ch; color: var(--secondary); font-size: 16px; line-height: var(--b2b-lh); }
.bld_hero .svc_actions { margin: 0; }
@media (min-width: 992px) {
  .bld_hero { padding-top: 140px; }
  .bld_hero_row { grid-template-columns: auto minmax(0, 1fr); gap: 40px; }
  .bld_hero .svc_actions { flex-wrap: nowrap; }
  .bld_hero_lead { text-align: right; justify-self: end; font-size: 17px; line-height: 28px; }
}

/* Сцена: живой фон, демо-сайт и окна мини-редактора поверх. */
.bld_stage {
  position: relative; margin-top: 40px; overflow: hidden; isolation: isolate;
  border-radius: var(--b2b-radius); background: var(--bld-screen);
  box-shadow: inset 0 0 0 1px var(--bld-win-edge);
  color: var(--bld-on);
  display: grid; gap: 14px; padding: 16px;
}
.bld_stage_fx, .bld_demo_fx, .bld_final_fx { position: absolute; inset: 0; z-index: -1; }
.bld_stage_fx > *, .bld_demo_fx > *, .bld_final_fx > * { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }
/* Под живым эффектом — его кадр (img/builder): его видно до загрузки, на телефонах и при reduced motion. */
.bld_stage_fx, .bld_demo_fx[style], .bld_final_fx { background-position: center; background-size: cover; background-repeat: no-repeat; }
.bld_stage_fx { transition: opacity 0.5s ease; }
.bld_stage_fx.is_swapping { opacity: 0; }
/* Пока эффект не загрузился (или выключен: телефон, reduced motion) — мягкое свечение цветом пресета. */
.bld_stage::before, .bld_final_card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 70% at 30% 20%, color-mix(in srgb, var(--bld-pri) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 85% 90%, color-mix(in srgb, var(--bld-pri-2, var(--bld-pri)) 16%, transparent), transparent 70%);
}

.bld_site { position: relative; padding: 8px 8px 24px; min-height: 320px; display: flex; flex-direction: column; }
/* Затемнение под текстом демо-сайта: яркий эффект не должен съедать заголовок. */
.bld_site::before {
  content: ""; position: absolute; inset: -16px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 12, 11, 0.35), transparent 30%), linear-gradient(20deg, rgba(11, 12, 11, 0.82) 8%, rgba(11, 12, 11, 0.35) 45%, transparent 70%);
}
.bld_site_bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.bld_site_logo { font-family: var(--primary-font); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.bld_site_menu { display: none; gap: 22px; color: var(--bld-on-muted); }
.bld_site_hero { margin-top: auto; padding-top: 56px; max-width: 30ch; }
.bld_site_kicker { margin: 0 0 10px; color: var(--bld-pri); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.bld_site_title {
  margin: 0; font-family: var(--primary-font); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; color: #fff;
  text-wrap: balance; min-height: 2.16em;
}
.bld_site_text { margin: 14px 0 0; color: var(--bld-on-muted); font-size: 15px; line-height: 23px; max-width: 40ch; }
.bld_site_btn {
  display: inline-block; margin-top: 22px; padding: 11px 20px; border-radius: 12px;
  background: var(--bld-pri); color: #0b0c0b; font-size: 14px; font-weight: 700;
  transition: background-color 0.3s ease;
}
.bld_site [data-bld-bind].is_flash { animation: bld-flash 0.9s ease; }
@keyframes bld-flash { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 24px var(--bld-pri); } 100% { text-shadow: 0 0 0 transparent; } }

/* Окна поверх сцены. */
.bld_win {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--bld-win); box-shadow: inset 0 0 0 1px var(--bld-win-edge), 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font-size: 13px; color: var(--bld-on);
}
.bld_win_head {
  padding: 9px 14px; text-align: center; color: var(--bld-on-faint); font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--bld-win-edge);
}
.bld_win_body { padding: 12px 14px 14px; }
.bld_cmd { margin: 0; font-family: var(--bld-mono); font-size: 12.5px; line-height: 20px; color: var(--bld-on); min-height: 20px; }
.bld_cmd > span:first-child { color: var(--bld-on-faint); }
.bld_cmd i { display: inline-block; width: 7px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--bld-pri); animation: bld-caret 1s steps(1) infinite; }
@keyframes bld-caret { 50% { opacity: 0; } }
.bld_cmd_ok { margin: 4px 0 0; font-family: var(--bld-mono); font-size: 12.5px; line-height: 20px; color: var(--bld-pri); opacity: 0; transition: opacity 0.3s ease; }
.bld_cmd_ok.is_on { opacity: 1; }
.bld_chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bld_chip {
  padding: 6px 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07); color: var(--bld-on); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background-color var(--b2b-t-out) ease;
}
.bld_chip:hover { background: rgba(255, 255, 255, 0.13); }
.bld_chip:disabled { opacity: 0.5; cursor: progress; }

.bld_tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--bld-win-edge); }
.bld_tab {
  flex: 1; padding: 6px 8px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--bld-on-muted); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background-color var(--b2b-t-out) ease, color var(--b2b-t-out) ease;
}
.bld_tab:hover { color: var(--bld-on); }
.bld_tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.09); color: var(--bld-on); }
.bld_tabpanel { padding: 6px; }
.bld_tabpanel[hidden] { display: none; }
.bld_presets { display: grid; gap: 2px; }
.bld_preset {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 9px 10px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: transparent; color: var(--bld-on); font: inherit;
  transition: background-color var(--b2b-t-out) ease;
}
.bld_preset:hover { background: rgba(255, 255, 255, 0.05); }
.bld_preset[aria-checked="true"] { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px var(--bld-win-edge); }
.bld_preset b { font-size: 13.5px; font-weight: 600; }
.bld_preset small { color: var(--bld-on-faint); font-family: var(--bld-mono); font-size: 11px; }
.bld_dots { display: flex; }
.bld_dots i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #151715; }
.bld_dots i + i { margin-left: -5px; }
.bld_dots i:last-child { background: #f3f4f2; }
.bld_field { display: grid; gap: 5px; padding: 6px 6px 8px; }
.bld_field span { color: var(--bld-on-faint); font-size: 11.5px; font-weight: 600; }
.bld_field input {
  width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--bld-win-edge);
  color: var(--bld-on); font: inherit; font-size: 13.5px; outline: none;
  transition: box-shadow var(--b2b-t-out) ease;
}
.bld_field input:focus { box-shadow: inset 0 0 0 1.5px var(--bld-pri); }
.bld_hint { margin: 6px 6px 10px; color: var(--bld-on-faint); font-size: 12px; }
.bld_swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 6px 10px; }
.bld_swatch {
  width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: transform var(--b2b-t-out) ease, box-shadow var(--b2b-t-out) ease;
}
.bld_swatch:hover { transform: scale(1.08); }
.bld_swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #151715, 0 0 0 4px var(--sw); }
.bld_win_foot {
  display: flex; align-items: center; gap: 6px; padding: 10px 16px;
  border-top: 1px solid var(--bld-win-edge); color: var(--bld-on-muted); font-size: 12.5px; font-weight: 600;
}
.bld_win_foot:hover { color: var(--bld-on); }
.bld_page .bld_stage :is(button, a, input):focus-visible { outline: 2px solid var(--bld-pri); outline-offset: 2px; }

@media (min-width: 768px) {
  .bld_stage { padding: 28px; }
  .bld_site_menu { display: inline-flex; }
}
@media (min-width: 1100px) {
  .bld_stage { display: block; min-height: 640px; padding: 0; }
  .bld_site { position: absolute; inset: 0; padding: 30px 36px 44px; min-height: 0; }
  .bld_site_hero { max-width: 34ch; padding-top: 0; }
  .bld_stage { min-height: 660px; }
  .bld_win_ai { position: absolute; top: 92px; right: 452px; width: 320px; }
  .bld_win_panel { position: absolute; right: 36px; bottom: 36px; width: 380px; }
}

/* ── Что внутри ─────────────────────────────────────────── */
.bld_h2 { margin-bottom: 36px; }
.bld_bento { display: grid; gap: 16px; }
.bld_bento > *, .bld_demos > *, .bld_card_media { min-width: 0; }
.bld_card {
  display: flex; flex-direction: column; padding: 6px 6px 22px; border-radius: 20px;
  background: var(--b2b-card); box-shadow: var(--b2b-card-shadow), inset 0 0 0 1px var(--b2b-edge);
  transition: background-color var(--b2b-t-in) ease;
}
.bld_card:hover { background: var(--b2b-card-hover); }
.bld_card h3 { margin: 18px 16px 0; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; }
.bld_card p { margin: 8px 16px 0; color: var(--secondary); font-size: 14px; line-height: var(--b2b-lh-sm); }
.bld_card_media {
  position: relative; height: 172px; border-radius: 15px; overflow: hidden;
  background: color-mix(in srgb, var(--web-wash) 70%, #000); box-shadow: inset 0 0 0 1px var(--b2b-edge);
  color: var(--primary);
}
body.light-theme .bld_card_media { background: #f3f4f6; }
@media (min-width: 768px) { .bld_bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .bld_bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bld_card { grid-column: span 4; }
  .bld_card_w2 { grid-column: span 5; }
  .bld_card:nth-child(2), .bld_card:nth-child(4) { grid-column: span 3; }
  .bld_card:nth-child(3) { grid-column: span 4; }
  .bld_card:nth-child(5) { grid-column: span 5; }
  .bld_card:nth-child(6) { grid-column: span 4; }
}

/* Бегущие строки с типами блоков. */
.bld_marquee { display: flex; flex-direction: column; justify-content: center; gap: 12px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.bld_marquee_row { overflow: hidden; }
.bld_marquee_track { display: flex; gap: 8px; width: max-content; animation: bld-marquee 46s linear infinite; }
.bld_marquee_rev .bld_marquee_track { animation-direction: reverse; animation-duration: 52s; }
.bld_marquee_track span {
  padding: 7px 13px; border-radius: 10px; white-space: nowrap; font-size: 13px; font-weight: 600;
  background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge); color: var(--secondary);
}
@keyframes bld-marquee { to { transform: translateX(calc(-50% - 4px)); } }

.bld_kinds { display: grid; align-content: center; gap: 6px; padding: 12px 14px; }
.bld_kinds span {
  display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px;
  background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge); min-width: 0;
}
.bld_kinds .bld_ico { width: 18px; height: 18px; color: var(--accent); }
.bld_kinds b { min-width: 22px; font-family: var(--primary-font); font-size: 14px; line-height: 20px; }
.bld_kinds small { color: var(--secondary); font-size: 12.5px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bld_pick { display: grid; place-content: center; justify-items: center; gap: 14px; }
.bld_pick_box {
  position: relative; padding: 8px 14px; font-family: var(--primary-font); font-size: 20px; font-weight: 700;
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: 2px;
}
.bld_pick_box i { position: absolute; width: 7px; height: 7px; background: var(--web-wash); border: 1.5px solid var(--accent); }
.bld_pick_box i:nth-child(1) { left: -6px; top: -6px; }
.bld_pick_box i:nth-child(2) { right: -6px; top: -6px; }
.bld_pick_box i:nth-child(3) { left: -6px; bottom: -6px; }
.bld_pick_box i:nth-child(4) { right: -6px; bottom: -6px; }
.bld_pick_bar { display: flex; gap: 2px; padding: 4px; border-radius: 10px; background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge), 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.bld_pick_bar b { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 6px; border-radius: 7px; font-size: 13px; }
.bld_pick_bar .bld_pick_ai { background: var(--accent); color: var(--web-wash); }
body.light-theme .bld_pick_bar .bld_pick_ai { color: #fff; }

.bld_rows { display: grid; align-content: center; gap: 4px; padding: 12px; }
.bld_rows span {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px;
  font-size: 12.5px; color: var(--secondary); white-space: nowrap; overflow: hidden;
}
.bld_rows span i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; flex: none; }
.bld_rows span em { margin-left: auto; font-style: normal; font-size: 11.5px; opacity: 0.7; }
.bld_rows span.is_on { background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge); color: var(--primary); }
.bld_rows span.is_on i { background: var(--accent); opacity: 1; }

.bld_term { display: flex; flex-direction: column; gap: 6px; padding: 10px; font-family: var(--bld-mono); font-size: 12px; }
.bld_term_head { display: flex; align-items: center; gap: 5px; color: var(--secondary); font-family: var(--primary-font); font-size: 11.5px; }
.bld_term_head i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 25%, transparent); }
.bld_term_head i:last-of-type { margin-right: 6px; }
.bld_term_cmd { padding: 8px 10px; border-radius: 9px; background: var(--b2b-card); box-shadow: inset 0 0 0 1px var(--b2b-edge); }
.bld_term_line { padding: 0 10px; color: var(--secondary); }
.bld_term_line em { display: inline-block; width: 20px; font-style: normal; opacity: 0.45; }

.bld_score { padding: 16px 18px; }
.bld_score small { color: var(--secondary); font-size: 12px; }
.bld_score b { display: block; margin-top: 2px; font-family: var(--primary-font); font-size: 46px; line-height: 1; letter-spacing: -0.04em; color: var(--primary); opacity: 0.85; }
.bld_score svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; color: var(--accent); }

/* ── Эффекты в деле ─────────────────────────────────────── */
.bld_demos { display: grid; gap: 16px; }
.bld_demo { margin: 0; padding: 6px 6px 0; border-radius: 20px; background: var(--b2b-card); box-shadow: var(--b2b-card-shadow), inset 0 0 0 1px var(--b2b-edge); }
.bld_demo_fx {
  position: relative; z-index: 0; height: 240px; border-radius: 15px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 80% at 50% 50%, rgba(105, 229, 132, 0.12), transparent 70%), var(--bld-screen);
}
.bld_demo_fx > * { z-index: 0; }
.bld_demo_text {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-family: var(--primary-font); font-weight: 700; font-size: clamp(34px, 4vw, 54px); letter-spacing: -0.035em; color: var(--bld-on);
}
.bld_demo_text > * { position: static !important; width: auto !important; height: auto !important; line-height: 1.3 !important; padding: 0.08em 0; }
.bld_demo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 16px; }
.bld_demo figcaption b { font-size: 14.5px; }
.bld_demo figcaption span { color: var(--secondary); font-size: 12.5px; }
@media (min-width: 768px) {
  .bld_demos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bld_demo { grid-column: span 3; }
  .bld_demo_wide { grid-column: span 3; }
  .bld_demo:nth-child(n + 3) { grid-column: span 2; }
  .bld_demo_fx { height: 300px; }
  .bld_demo:nth-child(n + 3) .bld_demo_fx { height: 220px; }
}
@media (min-width: 1100px) {
  .bld_demo_wide { grid-column: span 4; }
  .bld_demo:nth-child(2) { grid-column: span 2; }
}

/* ── Бриф → сайт ────────────────────────────────────────── */
.bld_how { display: grid; gap: 40px; align-items: center; }
.bld_how_text .cs_btn { margin-top: 28px; }
.bld_how_art { position: relative; display: grid; gap: 14px; }
.bld_win_static { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bld-screen-2); }
.bld_brief .bld_win_body, .bld_variants .bld_win_body { display: grid; gap: 4px; padding: 8px; }
.bld_brief span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; font-size: 13px; }
.bld_brief span:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.bld_brief em, .bld_variants em { font-style: normal; color: var(--bld-on-faint); font-size: 11.5px; }
.bld_variants span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.bld_variants span.is_on { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px var(--bld-win-edge); }
.bld_variants i { width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, var(--a) 0 38%, var(--b) 38%); }
.bld_variants b { font-size: 13.5px; }
@media (min-width: 992px) {
  .bld_how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bld_how_art { min-height: 400px; }
  .bld_brief { position: absolute; top: 0; left: 0; width: 62%; }
  .bld_variants { position: absolute; right: 0; bottom: 0; width: 56%; }
}

/* ── Сайт, домен, хостинг ───────────────────────────────── */
.bld_stackgrid { display: grid; gap: 40px; }
.bld_stackgrid .cs_btn { margin-top: 28px; }
.bld_stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bld_stack li {
  display: flex; gap: 16px; padding: 18px 20px; border-radius: 16px;
  background: var(--b2b-card); box-shadow: var(--b2b-card-shadow), inset 0 0 0 1px var(--b2b-edge);
}
.bld_stack .bld_ico { color: var(--accent); margin-top: 1px; }
.bld_stack h3 { margin: 0; font-size: 15.5px; line-height: 22px; }
.bld_stack h3 a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 25%, transparent); text-underline-offset: 4px; }
.bld_stack h3 a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.bld_stack p { margin: 4px 0 0; color: var(--secondary); font-size: 14px; line-height: var(--b2b-lh-sm); }
@media (min-width: 992px) { .bld_stackgrid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* ── Финал ──────────────────────────────────────────────── */
.bld_final { padding: 24px 0 72px; }
.bld_final_card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--b2b-radius);
  background: var(--bld-screen); box-shadow: inset 0 0 0 1px var(--bld-win-edge);
  padding: 72px 20px; text-align: center; color: var(--bld-on);
}
.bld_final_card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 35%, rgba(11, 12, 11, 0.55), transparent 75%); }
.bld_final_body { position: relative; }
.bld_final .b2b_h2 { margin: 0 auto; color: #fff; max-width: 18ch; }
.bld_final .b2b_lead { margin: 14px auto 0; color: var(--bld-on-muted); max-width: 52ch; }
.bld_final .svc_actions { justify-content: center; margin-top: 28px; }
@media (min-width: 992px) { .bld_final_card { padding: 120px 40px; } }

/* Кнопки на тёмных экранах в светлой теме остаются светлыми. */
body.light-theme .bld_final .cs_btn.cs_style_1:not(.cs_type_1) { background: #fff; color: #111; }
body.light-theme .bld_final .cs_btn.cs_style_1.cs_type_1 { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .bld_marquee_track, .bld_cmd i { animation: none; }
}

/* ── Ключевые кнопки «ИИ» ───────────────────────────────────
   Рамка — конический градиент под непрозрачной заливкой (padding-box поверх border-box).
   Градиент рамки всё время вращается с одной скоростью: смена скорости на наведении дёргает угол (угол — @property, иначе статичная рамка). */
@property --bld-spin { syntax: "<angle>"; inherits: false; initial-value: 135deg; }
.bld_ai_btn {
  --bld-ai-bg: #121826;
  --bld-ai-fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px; border: 2px solid transparent; border-radius: 15px;
  background:
    linear-gradient(var(--bld-ai-bg), var(--bld-ai-bg)) padding-box,
    conic-gradient(from var(--bld-spin), #00f2fe, #4facfe, #00ff87, #69e584, #00f2fe) border-box;
  color: var(--bld-ai-fg); font-family: var(--primary-font); font-size: 16px; font-weight: 600; line-height: 22px;
  white-space: nowrap; cursor: pointer;
  animation: bld-spin 3s linear infinite;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bld_ai_btn:hover { color: var(--bld-ai-fg); }
.bld_ai_btn:active { transform: translateY(1px); }
@keyframes bld-spin { from { --bld-spin: 135deg; } to { --bld-spin: 495deg; } }
.bld_ai_ico { width: 20px; height: 20px; flex: none; fill: url(#bld_spark_grad); transition: transform 0.5s var(--b2b-ease-out); }
.bld_ai_btn:hover .bld_ai_ico { transform: rotate(90deg); }
.bld_page .bld_ai_btn:focus-visible { outline: 2px solid #4facfe; outline-offset: 3px; border-radius: 15px; }
body.light-theme .bld_page .bld_ai_btn:not(.bld_final .bld_ai_btn) { --bld-ai-bg: #fff; --bld-ai-fg: #111; }
.svc_plan > .bld_ai_btn:first-of-type { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .bld_ai_btn, .bld_ai_btn:hover { animation: none; }
  .bld_ai_btn:hover .bld_ai_ico { transform: none; }
}

/* ── Витрина «Сделано на CasperLab» ─────────────────────── */
.bld_showcase { display: grid; gap: 16px; }
.bld_showcase > * { min-width: 0; }
.bld_show {
  display: flex; flex-direction: column; padding: 6px; border-radius: 20px; color: var(--primary);
  background: var(--b2b-card); box-shadow: var(--b2b-card-shadow), inset 0 0 0 1px var(--b2b-edge);
  transition: background-color var(--b2b-t-in) ease;
}
.bld_show:hover { background: var(--b2b-card-hover); color: var(--primary); }
.bld_show_media { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 15px; overflow: hidden; background: var(--bld-screen); }
.bld_show_bar {
  position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  background: rgba(17, 19, 17, 0.86); color: var(--bld-on-faint); font-size: 11px;
}
.bld_show_bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.bld_show_bar em { margin-left: 8px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld_show_media img { position: absolute; inset: 26px 0 0; width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: top; transition: transform 0.6s var(--b2b-ease-out); }
.bld_show:hover .bld_show_media img { transform: scale(1.03); }
.bld_show_ph {
  position: absolute; inset: 26px 0 0; display: grid; place-items: center; padding: 20px; text-align: center;
  font-family: var(--primary-font); font-weight: 700; font-size: 22px; color: var(--bld-on);
  background: radial-gradient(70% 80% at 30% 20%, rgba(105, 229, 132, 0.22), transparent 70%), var(--bld-screen);
}
.bld_show_cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 12px; }
.bld_show_cap > span { display: grid; gap: 2px; min-width: 0; }
.bld_show_cap b { font-size: 15px; line-height: 20px; }
.bld_show_cap small { color: var(--secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld_show_cap .bld_ico_sm { color: var(--secondary); transition: translate var(--b2b-t-in) var(--b2b-ease-out); }
.bld_show:hover .bld_show_cap .bld_ico_sm { translate: 2px -2px; color: var(--accent); }
@media (min-width: 768px) { .bld_showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bld_showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); } }