/* Диалог24 — тема «HR» (08.09.2026).
 *
 * Единый визуальный язык с bubnov-hr.ru: сигнальный красный #ed1c24, чёрный
 * #151515, бумажный фон #f4f4f1, прямые углы, крупная сжатая типографика,
 * границы вместо теней. Имена классов те же, что у theme-tech.css, — страницы
 * не знают, какая тема включена, поэтому PHP не правится.
 *
 * Прошлый дизайн: design-backups/2026-09-08-dizayn-do-perehoda-na-stil-bubnov-hr
 */
:root {
    /* Красный — основной */
    --blue-900: #0d0d0d;
    --blue-800: #151515;
    --blue-700: #c9151b;
    --blue:     #ed1c24;
    --brand:    #ed1c24;
    --blue-500: #ff2930;
    --blue-300: #f59a9e;
    --blue-200: #f8c4c6;
    --blue-100: #fde7e8;
    --blue-50:  #fdf3f3;
    --cyan:     #ed1c24;
    --cyan-50:  #fdf3f3;

    /* Сигнальный — только для «нужен человек» */
    --amber:     #b8860b;
    --amber-700: #7a5a08;
    --amber-100: #f7edd4;
    --amber-50:  #fbf6e9;

    --sage:     #2f7d5c;
    --sage-700: #1f5a41;
    --sage-50:  #eaf3ef;

    --red:      #ed1c24;
    --red-700:  #c9151b;
    --red-50:   #fdf3f3;

    /* Нейтральные — тёплый бумажный ряд */
    --ink:      #151515;
    --ink-2:    #3a3a38;
    --ink-3:    #6f706d;
    --ink-4:    #999a96;
    --line:     #d8d8d3;
    --line-2:   #e8e8e4;
    --paper:    #f4f4f1;
    --paper-2:  #eeeeea;
    --paper-3:  #e2e2dd;
    --white:    #FFFFFF;

    --radius:    0px;
    --radius-sm: 0px;
    --radius-lg: 0px;

    /* Границы вместо теней и свечения */
    --glow:      0 0 0 1px #d8d8d3;
    --glow-lg:   0 0 0 1px #cfcfca;
    --glow-blue: 0 0 0 3px rgba(237, 28, 36, .22);
    --glow-cyan: none;
    --lift:      var(--glow);
    --lift-sm:   0 0 0 1px #e2e2dd;
    --lift-ink:  var(--glow-lg);
    --soft:      var(--glow);
    --soft-lg:   var(--glow-lg);

    --maxw: 1260px;
    --sans:  Arial, Helvetica, sans-serif;
    --mono:  Arial, Helvetica, sans-serif;
    --serif: var(--sans);
    --font:  var(--sans);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    /* Инженерная сетка на фоне — держится очень слабой, чтобы читался текст, но
       страница не выглядела «просто белой». */
    background-image:
        linear-gradient(rgba(29, 78, 216, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29, 78, 216, .045) 1px, transparent 1px);
    background-size: 46px 46px, 46px 46px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; }
h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .5em; }
p  { margin: 0 0 1em; }
a  { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }
.serif { font-family: var(--sans); font-weight: 700; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 26px; }
.narrow { max-width: 780px; }

.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.tiny  { font-size: .8125rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono  { font-family: var(--mono); font-size: .92em; }
.strong { font-weight: 600; }
.amber-text { color: var(--amber-700); }
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}

/* Микрозаголовок — моно, разряженный, с включённым «индикатором» */
.kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 18px;
}
.kicker::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); box-shadow: var(--glow-cyan);
}
.kicker-amber { color: var(--amber-700); }
.kicker-amber::before { background: var(--amber); box-shadow: 0 0 14px rgba(255, 159, 28, .5); }

/* ------------------------------- Кнопки ------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit; font-weight: 600; font-size: .9375rem;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--white); color: var(--ink-2);
    transition: all .16s;
}
.btn:hover { border-color: var(--blue-300); color: var(--blue); box-shadow: var(--glow); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(180deg, var(--blue-500), var(--blue));
    border-color: var(--blue-700); color: var(--white);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 4px 14px rgba(29, 78, 216, .32);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--blue), var(--blue-700));
    border-color: var(--blue-700); color: var(--white);
    box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 22px rgba(29, 78, 216, .42);
}
.btn-ghost { background: transparent; }
.btn-soft { background: var(--blue-100); border-color: var(--blue-200); color: var(--blue-700); }
.btn-soft:hover { background: var(--blue-200); color: var(--blue-700); }
.btn-amber {
    background: linear-gradient(180deg, #FFB347, var(--amber));
    border-color: var(--amber-700); color: #3A2200;
    box-shadow: 0 4px 14px rgba(255, 159, 28, .34);
}
.btn-amber:hover { color: #3A2200; box-shadow: 0 6px 22px rgba(255, 159, 28, .45); }
.btn-danger { color: var(--red-700); border-color: #F3C9C9; }
.btn-danger:hover { background: var(--red-50); color: var(--red-700); border-color: var(--red); box-shadow: none; }
.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-sm { padding: 7px 14px; font-size: .8375rem; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-plain { border-color: transparent; background: transparent; }
.btn-plain:hover { background: var(--blue-50); border-color: var(--blue-100); box-shadow: none; }

/* ------------------------------- Формы -------------------------------- */

.field { margin-bottom: 18px; }
.label {
    display: block; margin-bottom: 7px;
    font-family: var(--mono); font-size: .75rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.hint { margin-top: 7px; font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }

.input, .textarea, .select {
    width: 100%; padding: 11px 14px;
    font: inherit; font-size: .9375rem; color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
    outline: none; border-color: var(--blue-500); box-shadow: var(--glow-blue);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.textarea { resize: vertical; min-height: 96px; line-height: 1.58; }
.select {
    appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231D4ED8' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.check input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--blue); flex: none; cursor: pointer; }
.check-text { font-size: .9375rem; }

.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile span {
    display: block; padding: 8px 15px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: .875rem; font-weight: 500; color: var(--ink-2);
    cursor: pointer; transition: all .15s; background: var(--white);
}
.tile span:hover { border-color: var(--blue-300); color: var(--blue); }
.tile input:checked + span {
    background: linear-gradient(180deg, var(--blue-500), var(--blue));
    border-color: var(--blue-700); color: var(--white); font-weight: 600;
    box-shadow: 0 3px 12px rgba(29, 78, 216, .3);
}
.tile input:focus-visible + span { box-shadow: var(--glow-blue); }

/* -------------------------------- Карточки ---------------------------- */

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}
.card-pad-lg { padding: 32px; }
.card-soft { background: var(--blue-50); border-color: var(--blue-100); }
.card-ink {
    background: linear-gradient(160deg, var(--blue-900), var(--blue-800));
    border-color: var(--blue-800); color: rgba(255,255,255,.84);
}
.card-ink h3, .card-ink .card-title { color: var(--white); }
.card-lift { box-shadow: var(--glow); }
.card-hover { transition: transform .18s, box-shadow .18s, border-color .18s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--glow-lg); border-color: var(--blue-200); }
.card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 5px; letter-spacing: -.01em; }

.card-icon {
    width: 52px; height: 52px; margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius);
}
.card-icon img { width: 32px; height: 32px; display: block; }

/* ------------------------ Реальные кейсы (лента) ----------------------- */

.case-strip {
    display: flex; gap: 18px; overflow-x: auto; margin: 0 -4px; padding: 4px 4px 14px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.case-strip::-webkit-scrollbar { height: 8px; }
.case-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
.case-card {
    flex: 0 0 auto; width: 300px; scroll-snap-align: start;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
}
.case-card img { width: 100%; display: block; border-bottom: 1px solid var(--line); }
.case-card-body { padding: 14px 16px 16px; }
.case-card-tag {
    display: inline-block; font-size: .75rem; font-weight: 700; color: var(--blue-700);
    background: var(--blue-100); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.case-card-cap { font-size: .8125rem; color: var(--ink-3); margin: 0; line-height: 1.45; }
.case-strip-wide .case-card { width: 340px; }
.case-strip-chat .case-card { width: 380px; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* -------------------------------- Бейджи ------------------------------ */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 4px;
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    line-height: 1.6; white-space: nowrap;
}
.badge-brand { background: var(--blue-100); color: var(--blue-700); }
.badge-amber { background: var(--amber-100); color: var(--amber-700); }
.badge-green { background: var(--sage-50);  color: var(--sage-700); }
.badge-red   { background: var(--red-50);   color: var(--red-700); }
.badge-gray  { background: var(--paper-3);  color: var(--ink-3); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot-green { background: var(--sage); box-shadow: 0 0 10px rgba(15, 185, 129, .55); }
.dot-amber { background: var(--amber); box-shadow: 0 0 10px rgba(255, 159, 28, .55); }
.dot-gray  { background: var(--ink-4); }
.dot-red   { background: var(--red); }
.dot-live  { position: relative; background: var(--cyan); box-shadow: var(--glow-cyan); }
.dot-live::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid var(--cyan); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ------------------------------ Уведомления --------------------------- */

.alert {
    padding: 13px 17px; border-radius: var(--radius-sm);
    font-size: .9375rem; margin-bottom: 18px; line-height: 1.5;
    border: 1px solid transparent; border-left-width: 3px;
}
.alert-error { background: var(--red-50);   color: var(--red-700);   border-color: #F5CFCF; border-left-color: var(--red); }
.alert-ok    { background: var(--sage-50);  color: var(--sage-700);  border-color: #C4EEDF; border-left-color: var(--sage); }
.alert-info  { background: var(--blue-50);  color: var(--blue-700);  border-color: var(--blue-200); border-left-color: var(--blue); }
.alert-warn  { background: var(--amber-50); color: var(--amber-700); border-color: var(--amber-100); border-left-color: var(--amber); }

/* -------------------------------- Таблицы ----------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th {
    text-align: left; padding: 10px 14px;
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-3); background: var(--blue-50); border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background: var(--blue-50); }
.table-wrap { overflow-x: auto; }

/* ------------------------------ Кабинет ------------------------------- */

.app { display: flex; min-height: 100vh; background: transparent; }

.side {
    width: 250px; flex: none;
    background: var(--white); border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.side-head { padding: 20px 20px 14px; }
.side-nav { padding: 6px 10px; flex: 1; overflow-y: auto; }
.side-foot { padding: 14px; border-top: 1px solid var(--line); }

.nav-group { margin-bottom: 14px; }
.nav-group-title {
    padding: 6px 12px; font-family: var(--mono); font-size: .625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4);
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--ink-2); font-size: .9375rem; font-weight: 500;
    transition: all .14s; border: 1px solid transparent;
}
.nav-item:hover { background: var(--blue-50); color: var(--blue); }
.nav-item.active {
    background: linear-gradient(90deg, var(--blue-100), var(--blue-50));
    border-color: var(--blue-200); color: var(--blue-700); font-weight: 600;
}
.nav-item svg { flex: none; width: 18px; height: 18px; opacity: .75; }
.nav-item.active svg { opacity: 1; }
.nav-count {
    margin-left: auto; padding: 1px 8px; border-radius: 4px;
    background: var(--paper-3); color: var(--ink-3);
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
}
.nav-item.active .nav-count { background: var(--blue); color: #fff; }
.nav-count-hot { background: var(--amber) !important; color: #3A2200 !important; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    padding: 0 28px; min-height: 62px;
    display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 20;
}
.page { padding: 28px; flex: 1; }
.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }

.stat {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden;
}
/* Тонкая светящаяся полоса сверху — «прибор», а не просто карточка */
.stat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--blue), transparent);
}
.stat-label {
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: 8px;
}
.stat-value { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.stat-note { font-size: .8125rem; color: var(--ink-4); margin-top: 5px; }

.meter { height: 5px; background: var(--paper-3); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.meter-fill {
    height: 100%; border-radius: 999px; transition: width .3s;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.meter-fill.warn { background: linear-gradient(90deg, #FFC46B, var(--amber)); }
.meter-fill.over { background: linear-gradient(90deg, #F58A8D, var(--red)); }

/* --------------------------------- Чат -------------------------------- */

.chat { display: flex; flex-direction: column; gap: 12px; }
.bubble {
    max-width: 76%; padding: 11px 15px;
    border-radius: 14px; font-size: .9375rem; line-height: 1.52;
    white-space: pre-wrap; word-wrap: break-word;
}
.bubble-in {
    background: var(--white); color: var(--ink);
    border: 1px solid var(--line); border-bottom-left-radius: 4px; align-self: flex-start;
}
.bubble-out {
    background: linear-gradient(160deg, var(--blue-500), var(--blue));
    color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end;
    box-shadow: 0 4px 14px rgba(29, 78, 216, .26);
}
.bubble-draft {
    background: var(--amber-50); color: var(--ink);
    border: 1px dashed var(--amber); border-bottom-right-radius: 4px; align-self: flex-end;
}
.bubble-meta { font-family: var(--mono); font-size: .6875rem; color: var(--ink-4); margin-top: 5px; letter-spacing: .03em; }
.msg { display: flex; flex-direction: column; max-width: 100%; }
.msg-in { align-items: flex-start; }
.msg-out { align-items: flex-end; }

.typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-300); animation: blink 1.3s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.dlg-list { display: flex; flex-direction: column; }
.dlg-item { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line-2); transition: background .13s; color: var(--ink); }
.dlg-item:hover { background: var(--blue-50); color: var(--ink); }
.dlg-item.active { background: var(--blue-100); box-shadow: inset 3px 0 0 var(--blue); }
.dlg-item.hot { box-shadow: inset 3px 0 0 var(--amber); }
.dlg-name { font-weight: 600; font-size: .9375rem; }
.dlg-last { font-size: .875rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------- Логотип ------------------------------ */

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark { width: 32px; height: 32px; flex: none; color: var(--blue); filter: drop-shadow(0 0 6px rgba(34, 199, 240, .45)); }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-word { font-size: 1.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.logo-24 { color: var(--cyan); }

/* ------------------------------- Лендинг ------------------------------ */

.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(244, 247, 254, .86);
    backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 30px; height: 68px; }
.nav-links { display: flex; gap: 24px; margin-left: 14px; }
.nav-links a { color: var(--ink-2); font-size: .9375rem; font-weight: 500; }
.nav-links a:hover { color: var(--blue); }

.nav-phone { color: var(--ink-2); font-size: .9375rem; font-weight: 600; margin-right: 4px; }
.nav-phone:hover { color: var(--blue); }
@media (max-width: 1300px) { .nav-phone { display: none; } }

.foot-phone {
    display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 14px;
    color: var(--ink-2); font-weight: 600; font-size: .9375rem;
}
.foot-phone:hover { color: var(--blue); }
.foot-phone svg { flex: none; opacity: .8; }

.hero { padding: 62px 0 54px; position: relative; overflow: hidden; }
/* Радиальное свечение за hero — «прибор включён» */
.hero::before {
    content: ''; position: absolute; top: -180px; right: -140px;
    width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(34, 199, 240, .16), rgba(29, 78, 216, .07) 45%, transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; position: relative; }
.hero h1 { margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero h1 .amber-text { font-style: normal; color: var(--amber-700); }
.hero-lead { font-size: 1.1875rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 30px; max-width: 33em; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font-family: var(--mono); font-size: .8125rem; color: var(--ink-3); margin-top: 18px; letter-spacing: .02em; }
.hero-art { width: 100%; height: auto; display: block; }

.factline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.factline-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.factline-cell { padding: 22px 26px; border-right: 1px solid var(--line-2); position: relative; }
.factline-cell:last-child { border-right: none; }
.factline-num {
    font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; margin-bottom: 6px;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.factline-cap { font-size: .8125rem; color: var(--ink-3); line-height: 1.45; }

.section { padding: 76px 0; }
.section-paper2 { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-ink {
    background: linear-gradient(165deg, var(--blue-900) 0%, var(--blue-800) 60%, #16327A 100%);
    color: rgba(255,255,255,.8); position: relative; overflow: hidden;
}
.section-ink::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px, 46px 46px;
}
.section-ink > * { position: relative; }
.section-ink h2, .section-ink h3 { color: var(--white); }
.section-ink .kicker { color: var(--cyan); }
.section-head { max-width: 720px; margin-bottom: 46px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }
.section-head p { font-size: 1.0625rem; color: var(--ink-3); margin: 0; }
.section-ink .section-head p { color: rgba(255,255,255,.68); }

/* Суточная шкала */
.daybar {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--white); overflow: hidden; box-shadow: var(--glow);
}
.daybar-scale { display: flex; height: 74px; position: relative; }
.daybar-hour { flex: 1; border-right: 1px solid var(--line-2); position: relative; }
.daybar-hour:last-child { border-right: none; }
.daybar-hour.night { background: linear-gradient(180deg, var(--blue-900), #16327A); }
.daybar-hour .pip {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: var(--pip-size, 8px); height: var(--pip-size, 8px); border-radius: 50%;
    top: calc(var(--pip-top, 8px) + var(--i) * var(--pip-gap, 11px));
}
.daybar-hour .pip.answered { background: var(--blue); box-shadow: 0 0 8px rgba(29, 78, 216, .5); }
.daybar-hour .pip.waiting  { background: var(--amber); box-shadow: 0 0 9px rgba(255, 159, 28, .75); }
.daybar-labels { display: flex; border-top: 1px solid var(--line); background: var(--blue-50); }
.daybar-labels div {
    flex: 1; padding: 7px 0; text-align: center;
    font-family: var(--mono); font-size: .625rem; color: var(--ink-3); font-weight: 600;
}
.daybar-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: .8125rem; color: var(--ink-3); }

/* Анатомия ответа */
.anatomy-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.anatomy-reply {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px; box-shadow: var(--glow); font-size: 1.0625rem; line-height: 1.7;
}
.fact { border-bottom: 2px solid var(--blue-300); padding-bottom: 1px; font-weight: 600; cursor: help; }
.fact-amber { border-bottom-color: var(--amber); }
.fact-sage  { border-bottom-color: var(--sage); }
.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li {
    display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line-2);
    font-size: .9375rem; align-items: flex-start;
}
.source-list li:last-child { border-bottom: none; }
.source-key {
    flex: none; width: 26px; height: 26px; border-radius: 5px;
    background: var(--blue-100); color: var(--blue-700);
    display: grid; place-items: center; font-family: var(--mono); font-size: .75rem; font-weight: 700;
}
.source-key.amber { background: var(--amber-100); color: var(--amber-700); }
.source-key.sage  { background: var(--sage-50);   color: var(--sage-700); }

.never-list { display: grid; }
.never-item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
.never-item:last-child { border-bottom: none; }
.never-mark {
    flex: none; width: 26px; height: 26px; border-radius: 5px;
    border: 1px solid var(--amber); color: var(--amber);
    display: grid; place-items: center; font-family: var(--mono); font-size: .875rem; margin-top: 2px;
    box-shadow: 0 0 12px rgba(255, 159, 28, .28);
}
.never-item h4 { color: var(--white); margin-bottom: 3px; }
.never-item p { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.66); }

.step { display: flex; gap: 20px; align-items: flex-start; }
.step-num {
    flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: 1rem; font-weight: 700;
    background: var(--blue-100); color: var(--blue-700); border: 1px solid var(--blue-200);
}
.illus { width: 100%; height: auto; display: block; border-radius: var(--radius); }

.price-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.price-card.popular { border-color: var(--blue); box-shadow: var(--glow-lg); }
.price-card.popular::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--blue));
}
.price-flag {
    position: absolute; top: 14px; right: 14px;
    background: var(--blue-100); color: var(--blue-700);
    padding: 3px 10px; border-radius: 4px;
    font-family: var(--mono); font-size: .625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
}
.price-val { font-size: 2.25rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 12px 0 3px; }
.price-per { font-size: .875rem; color: var(--ink-3); }
.price-feats { list-style: none; padding: 0; margin: 20px 0 24px; flex: 1; }
.price-feats li { position: relative; padding: 6px 0 6px 25px; font-size: .9375rem; color: var(--ink-2); }
.price-feats li::before {
    content: ''; position: absolute; left: 0; top: 12px; width: 14px; height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231D4ED8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.4 4.6 9 10 3.2'/%3E%3C/svg%3E") center no-repeat;
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    padding: 20px 42px 20px 0; cursor: pointer; position: relative;
    font-size: 1.0625rem; font-weight: 600; list-style: none; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 8px; top: 17px;
    font-family: var(--mono); font-size: 1.25rem; color: var(--blue); line-height: 1; transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 42px 22px 0; color: var(--ink-2); }
.faq-item .faq-body p:last-child { margin-bottom: 0; }

.cta-band {
    background: linear-gradient(150deg, var(--blue-900), var(--blue-700) 55%, var(--blue));
    color: #fff; border-radius: var(--radius-lg); padding: 56px 44px; text-align: center;
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 70% 10%, rgba(34, 199, 240, .3), transparent 55%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.78); font-size: 1.0625rem; max-width: 560px; margin: 0 auto 28px; }

.foot { background: var(--white); border-top: 1px solid var(--line); padding: 52px 0 26px; font-size: .9375rem; color: var(--ink-3); }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--blue); }
.foot h4 { color: var(--ink); font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 9px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; gap: 26px; margin-bottom: 36px; }
.foot-bottom { border-top: 1px solid var(--line-2); padding-top: 22px; font-size: .8125rem; color: var(--ink-4); }
/* Ссылки на документы в нижней строке: заметны, но не спорят с основным меню. */
.foot-legal a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.foot-legal a:hover { color: var(--ink-1); border-bottom-color: currentColor; }

/* --------------------------- Вход и регистрация ----------------------- */

.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.auth-form-side { display: flex; align-items: center; justify-content: center; padding: 44px 26px; background: var(--white); }
.auth-box { width: 100%; max-width: 420px; }
.auth-aside {
    background: linear-gradient(165deg, var(--blue-900), var(--blue-800) 55%, #16327A);
    color: rgba(255,255,255,.82);
    padding: 56px 48px; display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
}
.auth-aside::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 80% 15%, rgba(34, 199, 240, .26), transparent 55%),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 46px 46px;
}
.auth-aside > * { position: relative; }
.auth-aside h2 { color: var(--white); }
.auth-aside img { width: 100%; max-width: 430px; height: auto; margin: 0 auto 26px; display: block; border-radius: var(--radius); opacity: .95; }
.auth-aside ul { list-style: none; padding: 0; margin: 22px 0 0; }
.auth-aside li { position: relative; padding: 9px 0 9px 28px; }
.auth-aside li::before {
    content: ''; position: absolute; left: 0; top: 16px; width: 15px; height: 15px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2322C7F0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.4 4.6 9 10 3.2'/%3E%3C/svg%3E") center no-repeat;
}

/* --------------------------- Переключатель темы ----------------------- */

.theme-switch {
    /* Слева, а не справа: справа внизу теперь живёт кнопка чата, и две
       круглые плашки в одном углу наезжали друг на друга. Переключатель
       тем — наша служебная кнопка, чат важнее. */
    position: fixed; left: 16px; bottom: 16px; z-index: 200;
    display: flex; gap: 4px; padding: 5px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
    border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--glow-lg);
}
.theme-switch a {
    padding: 6px 13px; border-radius: 999px;
    font-family: var(--mono); font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.theme-switch a.on { background: var(--blue); color: #fff; }


/* Плашка пробного периода и кнопка тарифа в шапке кабинета. Плашка спокойная,
   кнопка заметная: сообщение — фон, действие — акцент. */
.trial-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--sage-50); color: var(--sage-700);
    font-size: .8125rem; font-weight: 600; text-decoration: none;
    border: 1px solid transparent;
}
.trial-pill:hover { border-color: var(--sage); }
.trial-pill.over { background: var(--amber-50); color: var(--amber-700); }
.trial-pill.over:hover { border-color: var(--amber); }
.trial-pill-short { display: none; }
.topbar-plan { flex: none; }

/* Зелёная галочка на экране «вы зарегистрированы» — пара к замку у закрытых
   разделов: одна форма, разный смысл. */
.ok-badge {
    display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
    border-radius: 50%; background: var(--sage-50); color: var(--sage-700);
}

/* Замок у закрытого раздела в меню и на его странице. Пункт не прячем: человек
   должен видеть, что в сервисе есть, и суметь попросить доступ. */
.nav-item.nav-locked { opacity: .62; }
.nav-item.nav-locked:hover { opacity: 1; }
.nav-lock { margin-left: auto; flex: none; opacity: .8; }
.lock-badge {
    display: inline-grid; place-items: center; width: 54px; height: 54px;
    border-radius: 50%; background: var(--paper-2); color: var(--brand);
}

/* Разделитель внутри карточки: там, где в одном блоке живут разные по смыслу
   действия (закрыть вход / ограничить функции), без него они читаются как одно. */
.hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* Служебный вход в админку — отдельная страница, а не клиентская форма входа:
   ни лендинга, ни регистрации, только карточка по центру экрана. */
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.admin-login-box { width: 100%; max-width: 380px; }

/* ------------------- Универсальность: ниши и сменное слово -------------------
   Строка со сменным словом в hero. Слова лежат в одной ячейке inline-grid,
   поэтому ширина держится по самому длинному («арендаторам») и строка не
   дёргается на каждом переключении. Анимация чистый CSS — скрипта нет. */
.rotor-line { font-size: 1.0625rem; color: var(--ink-2); margin: -14px 0 28px; }
.rotor { display: inline-grid; vertical-align: bottom; }
.rotor-word {
    grid-area: 1 / 1; white-space: nowrap; font-weight: 700; color: var(--brand);
    opacity: 0; animation: d24-rotor 13s infinite;
}
.rotor-word:nth-child(2) { animation-delay: 3.25s; }
.rotor-word:nth-child(3) { animation-delay: 6.5s; }
.rotor-word:nth-child(4) { animation-delay: 9.75s; }
@keyframes d24-rotor {
    0%              { opacity: 0; transform: translateY(.32em); }
    3%, 22%         { opacity: 1; transform: none; }
    25%, 100%       { opacity: 0; transform: translateY(-.28em); }
}
@media (prefers-reduced-motion: reduce) {
    .rotor-word { animation: none; }
    .rotor-word:first-child { opacity: 1; }
}

/* Карточки ниш: одинаковая рамка, разное только содержимое — в этом и мысль */
.niche-card {
    display: flex; flex-direction: column; gap: 12px;
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 22px 20px;
}
.niche-name {
    font-family: var(--mono); font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em; color: var(--brand);
}
.niche-slogan { font-size: 1.0625rem; line-height: 1.45; font-weight: 600; color: var(--ink); }
.niche-msg {
    font-size: .875rem; line-height: 1.5; color: var(--ink-2);
    background: var(--paper-2); border-left: 2px solid var(--amber);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px;
}
.niche-src { font-size: .8125rem; line-height: 1.5; color: var(--ink-3); margin-top: auto; }

/* Переключатель ниш в «Анатомии ответа» */
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.seg-btn {
    font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer;
    padding: 9px 18px; border-radius: 999px; color: var(--ink-2);
    background: var(--white); border: 1px solid var(--line); transition: .16s;
}
.seg-btn:hover { color: var(--brand); border-color: var(--brand); }
.seg-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* [hidden] слабее селектора по классу с display:grid — панель без !important
   осталась бы видимой (та же грабля, что была с .btn в мобильной вёрстке). */
.anatomy-pane[hidden] { display: none !important; }

.foot-tag {
    font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand); margin: -6px 0 10px;
}

/* Шестая ссылка в меню («Ниши») перестаёт помещаться раньше, чем ломается
   остальная сетка, поэтому меню прячется на 1080, а не на 1000. */
@media (max-width: 1080px) { .nav-links { display: none; } }

/* ------------------------------- Адаптив ------------------------------ */

@media (max-width: 1000px) {
    .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .grid-4, .factline-inner { grid-template-columns: repeat(2, 1fr); }
    .factline-cell:nth-child(2) { border-right: none; }
    .factline-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .auth { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .nav-links { display: none; }
    .anatomy-wrap { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 860px) {
    .grid-3 { grid-template-columns: 1fr; }
    .side {
        position: fixed; left: 0; top: 0; z-index: 100;
        transform: translateX(-100%); transition: transform .22s; box-shadow: var(--glow-lg);
    }
    .side.open { transform: none; }
    .page { padding: 18px; }
    .topbar { padding: 0 16px; }
}

@media (max-width: 620px) {
    .grid-2, .grid-4, .factline-inner { grid-template-columns: 1fr; }
    .factline-cell { border-right: none; border-bottom: 1px solid var(--line-2); }
    .section { padding: 52px 0; }
    .hero { padding: 38px 0 34px; }
    .cta-band { padding: 38px 22px; }
    .card-pad-lg { padding: 22px; }
    .bubble { max-width: 88%; }
}

.side-backdrop { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(11, 18, 32, .5); }
.side-backdrop.open { display: block; }
.burger { display: none; }
@media (max-width: 860px) { .burger { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* Свёрнутые блоки настроек. Страница агента разрослась до 49 полей, и обычный
   человек упирался в стену: техническое спрятано под заголовок-кнопку, на виду
   осталось только то, что обязательно заполнить. */
details.card > summary { list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary { position: relative; padding-right: 30px; }
details.card > summary::after {
    content: '';
    position: absolute; right: 4px; top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
    transition: transform .18s;
}
details.card[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.card > summary:hover::after { border-color: var(--brand); }
details.card:not([open]) { padding-bottom: 18px; }
details.card:not([open]) > summary { margin-bottom: 0 !important; }


/* ------------------------- Документы: оферта, политика -----------------
   Юридический текст читают иначе, чем продающий: длинными абзацами, с
   возвратами к нужному пункту. Отсюда узкая колонка, крупный межстрочный
   интервал и видимая нумерация — по номеру пункта на него можно сослаться
   в письме, и человек его найдёт. */
.legal { max-width: 44em; }
.legal h2 { font-size: 1.2rem; margin: 40px 0 14px; scroll-margin-top: 80px; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1rem; margin: 26px 0 10px; }
.legal p, .legal li { font-size: .95rem; line-height: 1.78; }
.legal ul, .legal ol { padding-left: 1.35em; margin: 12px 0; }
.legal li { margin-bottom: 8px; }
.clause { color: var(--ink-4); font-variant-numeric: tabular-nums; margin-right: .5em; }
.legal-toc { columns: 2; column-gap: 28px; font-size: .9rem; }
.legal-toc a { color: var(--ink-2); text-decoration: none; display: block; margin-bottom: 7px; break-inside: avoid; }
.legal-toc a:hover { color: var(--accent, var(--ink-1)); }
@media (max-width: 620px) { .legal-toc { columns: 1; } }


/* ------------------------------ Соцсети в подвале ---------------------- */
.social-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    font-size: .85rem; font-weight: 600; color: var(--ink-3); text-decoration: none;
}
.social-link svg { color: #0077FF; flex: none; }
.social-link:hover { color: var(--ink-1); }

.step-shot {
    width: 100%; max-width: 480px; height: auto; margin-top: 14px;
    border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.material-card {
    display: block; padding: 0; overflow: hidden; text-decoration: none;
    color: inherit; transition: transform .15s ease, box-shadow .15s ease;
}
.material-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }
.material-card picture, .material-card img { display: block; width: 100%; height: 160px; object-fit: cover; }
.material-body { padding: 18px 20px 20px; }
.material-anchor { display: inline-block; margin-top: 10px; font-size: .875rem; font-weight: 600; color: var(--brand); }

/* ======================================================================
   Слой характера: то, чем bubnov-hr.ru отличается от прежней темы.
   Идёт последним, поэтому перебивает правила выше без правки исходных.
   ====================================================================== */

/* Фон — ровная бумага, инженерной сетки больше нет */
body{background-image:none;background-color:var(--paper)}

/* Типографика: крупнее, плотнее, с сильным отрицательным трекингом */
h1,h2,h3{font-weight:850;letter-spacing:-.055em;line-height:.98}
h1{font-size:clamp(2.6rem,5.4vw,4.9rem);line-height:.93}
h2{font-size:clamp(1.9rem,3.6vw,3.1rem)}
h3{font-size:1.45rem;letter-spacing:-.035em;line-height:1.1}
h4{font-weight:800;letter-spacing:-.01em}
em{font-style:normal;color:var(--red)}

/* Микрозаголовок — как .kicker на HR-сайте: без «индикатора», красный, разрядка */
.kicker{font-family:var(--sans);font-weight:800;font-size:.75rem;letter-spacing:.13em;color:var(--red)}
.kicker::before,.kicker::after{display:none!important}
.kicker-amber{color:var(--amber-700)}

/* Кнопки — прямоугольные, жирные, с широким внутренним промежутком */
.btn{border-radius:0;font-weight:800;letter-spacing:0;gap:16px;box-shadow:none;
     transition:background .18s,color .18s,border-color .18s}
.btn-primary{background:var(--red);color:#fff;border:0}
.btn-primary:hover{background:#ff2930;box-shadow:none}
.btn-soft,.btn-plain{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn-soft:hover,.btn-plain:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-danger{background:var(--red);color:#fff;border:0}
.btn-lg{height:54px;padding:0 26px;font-size:.98rem}
.btn-sm{height:38px;padding:0 15px}

/* Карточки и плитки — рамка вместо тени, острые углы */
.card,.tile,.price-card,.dlg-item,.faq-item,.input,.field input,.field textarea,.field select,
.table,.auth-aside,.never-item,.source-list,.section-paper2{border-radius:0;box-shadow:none}
.card,.tile,.price-card{background:var(--white);border:1px solid var(--line)}
.card-hover:hover{box-shadow:none;border-color:var(--ink);transform:none}
.card-ink,.section-ink{background:var(--ink);color:#fff;border-color:#333}
.card-ink h1,.card-ink h2,.card-ink h3,.section-ink h1,.section-ink h2,.section-ink h3{color:#fff}

/* Поля ввода */
.input,.field input,.field textarea,.field select{border:1px solid #c8c8c4;background:#fafaf8}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{
    border-color:var(--red);outline:0;box-shadow:none}

/* Ссылки */
a{color:var(--red)}
a:hover{color:#c9151b}

/* Акцентные плашки-факты — плоские, без скруглений */
.fact{border-radius:0}
.fact-sage{background:var(--sage-50);color:var(--sage-700)}
.fact-amber{background:var(--amber-50);color:var(--amber-700)}

/* Шапка и подвал */
.nav,.site-header,header.nav{border-bottom:1px solid var(--line);background:rgba(244,244,241,.96);backdrop-filter:blur(12px)}
.nav-item,.nav-links a{font-weight:700}
.nav-item:hover,.nav-links a:hover{color:var(--red)}
.logo,.logo-24{font-weight:900;letter-spacing:-.04em}
.logo-mark{background:var(--red);color:#fff;border-radius:0}
.foot{background:#111;color:#fff;border-top:1px solid #333}
.foot a{color:#fff}
.foot a:hover{color:var(--red)}

/* Секции — щедрые отступы, разделители линиями */
.section{padding:96px 0}
.section-head{margin-bottom:52px}

/* Полоса призыва к действию */
.cta-band{background:var(--red);color:#fff;border-radius:0}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band .btn-primary{background:#fff;color:var(--red)}
.cta-band .btn-primary:hover{background:#151515;color:#fff}

/* Первый экран без иллюстрации: текст занимает всю ширину, как на bubnov-hr.ru */
.hero-grid{grid-template-columns:1fr;gap:0}
.hero{padding:96px 0 84px}
.hero h1{max-width:16ch}
.hero-lead{max-width:62ch;font-size:1.18rem;line-height:1.55}
.hero::before,.hero::after{display:none!important;content:none!important}

/* =====================================================================
   Формы заявок и хлебные крошки на публичных страницах. 09.09.2026

   Живут здесь, а не в theme-hr-landing.css, намеренно: landing-слой
   приходит целиком из пакета дизайна и переписывается при каждой
   выкладке, а эти правила нужны одиннадцати страницам на inc/page.php
   (Авитолог, Директолог, Боты, Контакты и остальные). В пакете
   red-landing от 09.09.2026 они пропали, и формы на этих страницах
   остались без оформления.
   ================================================================== */
/* Полоса заявки живёт в inc/leadform.php со своим <style> в теле страницы,
   поэтому её поля перебиваются селектором повышенной точности. */
.lead-form-fields input.input,
.lead-form-fields .btn { border-radius: 0; }
/* Inline CSS формы заявки загружается позже — повышенная специфичность здесь намеренная. */
.site-public .lead-form{margin:28px 0;padding:22px 28px;border:1px solid #323232;border-left:4px solid var(--public-red);border-radius:20px;background:#171717;color:#fff}
.site-public .lead-form-title{color:#fff}
.site-public .lead-form-sub{color:#aaa}
.site-public .lead-form-fields input.input{border-radius:999px;background:#fff;color:#111}
.site-public .lead-form-fields .btn{border-radius:999px}
.site-public .lead-form-ok{color:#5ee393}
.site-public .lead-form-err{color:#ff7184}
.site-page .hero .crumbs,.site-page .hero .crumbs a{color:#929292}
@media (max-width:760px) {
    .site-public .lead-form{padding:20px;border-radius:18px}
    .site-public .lead-form-fields{display:grid;width:100%}
    .site-public .lead-form-fields input.input,.site-public .lead-form-fields .btn{width:100%}
}
/* Телефон в шапке и подвале красного дизайна. Здесь, а не в landing-слое,
   по той же причине, что и формы выше: landing-слой приходит из пакета. */
.site-head .head-phone {
    color: #eaeaea; font-weight: 600; font-size: .9375rem;
    white-space: nowrap; text-decoration: none;
}
.site-head .head-phone:hover { color: #fff; }
@media (max-width: 1180px) { .site-head .head-phone { display: none; } }

.foot .foot__phone {
    display: inline-block; margin-top: 14px;
    color: #fff; font-weight: 700; font-size: 1.0625rem;
    white-space: nowrap; text-decoration: none;
}
.foot .foot__phone:hover { color: var(--public-red, #e8112d); }

/* Блок с реальным скриншотом переписки на главной. */
.site-public .real__grid {
    display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 34px;
}
.site-public .real__shot {
    width: 100%; max-width: 780px; height: auto; display: block;
    border: 1px solid #d9d9d9; border-radius: 18px;
}

/* =====================================================================
   Стыковка red-landing со старым слоем. 09.09.2026

   theme-hr.css грузится на всех публичных страницах и содержит правила
   прежнего дизайна: .nav — светлый липкий бар, .btn — белый фон. Новая
   шапка из inc/red-shell.php использует те же имена классов внутри
   .site-head, и старые правила её перекрашивали: меню уезжало на светлую
   плашку, кнопка «Открыть демо-диалог» становилась белой на белом.

   Разграничитель — .site-head: он есть только в новой обвязке. Прежние
   одиннадцать страниц на inc/page.php своей разметки не меняли.
   ================================================================== */
.site-public .site-head .nav {
    position: static; background: none; backdrop-filter: none; border-bottom: 0;
}
.site-public [class*="btn--"] { background: transparent; color: inherit; }
.site-public .site-head .nav a { white-space: nowrap; }

/* Кнопка формы заявки. В theme-hr-landing.css пакет сбрасывает фон у всех
   button внутри .site-public (селектор `.site-public button`, специфичность
   выше, чем у .btn-primary), и кнопка «Оставить заявку» становилась
   прозрачной — виден был только текст. */
.site-public .lead-form button.btn-primary {
    background: var(--red); color: #fff; border: 0;
}
.site-public .lead-form button.btn-primary:hover { background: #ff2930; }