/* Раздел «Чет элга» — единый дизайн с главной (style.css).
   Используем те же токены: var(--color-*), var(--space-*), var(--radius),
   var(--shadow-card), var(--fs-*) и брендовый градиент #667eea→#764ba2.
   Кнопки .btn-primary/.btn-secondary наследуются из style.css. */

.nav-cta {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 980px;
    background: var(--color-primary);
    color: #fff !important;
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
}
.nav-cta:hover { background: var(--color-primary-dark); }

/* Ссылка на кабинет в навбаре раздела (показывается вошедшему пользователю) */
.nav-cabinet-link {
    display: inline-block;
    color: var(--color-text);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
}
.nav-cabinet-link:hover { background: #f5f5f7; }

/* Переключатель языка — как .lang-switch button на главной */
.lang-switch a {
    display: inline-block;
    background: none;
    color: #6e6e73;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 7px;
    border-radius: 6px;
    text-decoration: none;
}
.lang-switch a:hover { background: #f5f5f7; color: #1d1d1f; }
.lang-switch a.active { background: var(--color-primary); color: #fff; }

.ce-main { color: var(--color-text); }
.ce-main h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.003em;
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}
.ce-section { padding: var(--space-7) 0; }
.ce-para { font-size: var(--fs-lg); line-height: 1.6; color: var(--color-text); margin: 0 0 var(--space-4); }

.ce-breadcrumb { background: var(--color-bg); font-size: var(--fs-sm); padding: var(--space-2) 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.ce-breadcrumb a { color: var(--color-primary); text-decoration: none; }
.ce-breadcrumb span { color: var(--color-text-muted); margin: 0 6px; }

/* Hero — как .hero на главной */
.ce-hero { background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%); padding: var(--space-8) 0; }
.ce-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-7); align-items: center; }
.ce-hero-text h1 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.003em; margin: 0 0 var(--space-4); color: var(--color-text); }
.ce-hero-lead { font-size: var(--fs-xl); line-height: 1.45; color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.ce-hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ce-hero-cta .btn-primary, .ce-hero-cta .btn-secondary { text-decoration: none; }
.ce-socialproof { margin: var(--space-4) 0 0; color: #2e7d4f; font-weight: 600; font-size: var(--fs-base); }

/* Score gauge */
.ce-score { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-card); }
.ce-score-title { font-weight: 600; color: var(--color-text); }
.ce-score-meter { height: 26px; background: #eceef6; border-radius: 980px; overflow: hidden; margin: var(--space-3) 0 var(--space-1); }
.ce-score-fill { height: 100%; background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); border-radius: 980px; display: flex; align-items: center; justify-content: flex-end; transition: width .5s ease; min-width: 44px; }
.ce-score-pct { color: #fff; font-weight: 600; padding-right: 10px; font-size: var(--fs-sm); }
.ce-score-sub { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-3); }
.ce-score-locks { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-2); }
.ce-score-locks li { display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg); border: 1px dashed rgba(102,126,234,.4); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--fs-base); }
.ce-lock-delta { font-weight: 700; color: var(--color-primary); }
.ce-lock-text { color: var(--color-text); }
.ce-score-unlock { display: inline-block; font-weight: 600; color: var(--color-primary); text-decoration: none; margin-bottom: var(--space-2); }
.ce-score-note { font-size: var(--fs-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
/* Праздничный пульс гейджа после генерации ИИ (вау-связка с P2) */
@keyframes ce-bump { 0%, 100% { box-shadow: var(--shadow-card); } 35% { box-shadow: 0 0 0 4px rgba(102,126,234,.28), var(--shadow-card); } }
.ce-score-bump { animation: ce-bump .7s ease; }
@media (prefers-reduced-motion: reduce) { .ce-score-bump { animation: none; } }

/* Карточки направлений и требований — как .seo-feature */
.ce-dest-grid, .ce-req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.ce-dest-card, .ce-req-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: var(--space-5) var(--space-4); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.ce-dest-card { display: flex; flex-direction: column; gap: var(--space-1); }
.ce-dest-card:hover, .ce-req-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ce-dest-flag, .ce-req-icon { font-size: 2rem; }
.ce-dest-name { font-weight: 600; color: var(--color-text); font-size: var(--fs-lg); }
.ce-dest-lead { font-size: var(--fs-base); color: var(--color-text-muted); line-height: 1.55; }
.ce-req-card h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--fs-lg); font-weight: 600; color: var(--color-text); }
.ce-req-card p { margin: 0; color: var(--color-text-muted); line-height: 1.6; font-size: var(--fs-base); }

/* Шаги */
.ce-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.ce-steps li { display: flex; gap: var(--space-4); align-items: flex-start; }
.ce-step-num { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.ce-steps h3 { margin: 4px 0; font-size: var(--fs-lg); font-weight: 600; color: var(--color-text); }
.ce-steps p { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* Оффер / тарифы — секция как .seo-section */
.ce-offer { background: var(--color-bg); border: 1px solid rgba(0,0,0,.05); border-radius: var(--radius); padding: var(--space-7); margin: var(--space-6) auto; }
.ce-offer-sub { color: var(--color-text-muted); margin: 0 0 var(--space-5); font-size: var(--fs-lg); }
.ce-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.ce-tier { position: relative; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-direction: column; }
.ce-tier h3 { margin: 0 0 var(--space-2); color: var(--color-text); font-size: var(--fs-lg); font-weight: 600; }
.ce-tier p { color: var(--color-text-muted); line-height: 1.6; flex: 1; font-size: var(--fs-base); }
.ce-tier .btn-primary, .ce-tier .btn-secondary { text-decoration: none; margin-top: var(--space-4); }
.ce-tier-best { border: 2px solid var(--color-primary); box-shadow: var(--shadow-card); }
.ce-badge { position: absolute; top: -12px; left: var(--space-5); background: var(--color-primary); color: #fff; padding: 4px 12px; border-radius: 980px; font-size: var(--fs-sm); font-weight: 600; }
.ce-price { font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-2); }
.ce-amount { font-size: 30px; }
.ce-old { text-decoration: line-through; color: var(--color-text-muted); font-size: var(--fs-base); font-weight: 600; margin-right: var(--space-2); }
.ce-offer-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--fs-base); }
.ce-offer-meta span { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.ce-urgency { color: #b9531b; }
.ce-guarantee { color: #2e7d4f; }

/* Форма заявки — брендовый градиент как .seo-cta */
.ce-lead { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: var(--radius); }
.ce-lead-box { max-width: 640px; }
.ce-lead h2 { color: #fff; }
.ce-lead-sub { color: rgba(255,255,255,.9); margin: 0 0 var(--space-5); }
.ce-lead-form { display: grid; gap: var(--space-3); }
.ce-field label { display: block; font-size: var(--fs-sm); margin-bottom: 6px; color: rgba(255,255,255,.9); }
.ce-field input, .ce-field select, .ce-field textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.4); background: #fff; font-size: var(--fs-base); box-sizing: border-box; font-family: inherit; }
.ce-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ce-consent { font-size: var(--fs-sm); color: rgba(255,255,255,.9); display: flex; gap: var(--space-2); align-items: flex-start; }
.ce-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ce-lead-submit { justify-self: start; }
.ce-lead-result { font-weight: 600; min-height: 1.2em; margin: var(--space-1) 0 0; }
.ce-lead-result.ok { color: #c9ffe4; }
.ce-lead-result.err { color: #ffd4d4; }

/* FAQ */
.ce-faq-item { border-bottom: 1px solid rgba(0,0,0,.06); padding: var(--space-3) 0; }
.ce-faq-item summary { font-weight: 600; cursor: pointer; color: var(--color-text); }
.ce-faq-item p { color: var(--color-text-muted); line-height: 1.6; margin: var(--space-3) 0 0; }

/* Гейдж и воронка внутри конструктора (index.php) */
.ce-score-mount:empty { display: none; }
.ce-score-top { margin: 0 0 var(--space-5); }
.ce-score-rail { margin: 0 0 var(--space-4); }
/* ПК (≥1100px): гейдж живёт в sticky-рейле у превью; верхний (мобильный) скрыт.
   На мобильном правый рейл скрыт (preview-pane), поэтому показываем верхний. */
@media (min-width: 1100px) {
    .ce-score-top { display: none; }
}
.ce-funnel-tip { background: rgba(102,126,234,.08); border: 1px solid rgba(102,126,234,.25); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); color: var(--color-text); font-weight: 600; }

@media (max-width: 820px) {
    .ce-hero-grid { grid-template-columns: 1fr; }
    .ce-field-row { grid-template-columns: 1fr; }
    .ce-hero-text h1 { font-size: 30px; }
    .ce-offer { padding: var(--space-5); }
}