/**
 * template-components.css
 * Компоненты шаблона ДельтаБезопасность
 * Содержит: Hero, Contact Bar, Benefits, Cards, Tables, CTA, FAQ, etc.
 */

/* ========== HERO SECTION ========== */
.main_slider_wrp {
    background: url(https://deltabez.ru/images/3582926_sb_Moment.jpg) 50% 0/cover;
    min-height: 670px; color: #fff; display: flex; align-items: center;
    position: relative; padding-bottom: 50px; overflow: hidden;
}
.main_slider_bg_decor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0,0,0,0.6); }
.main_slider { position: relative; z-index: 5; width: 100%; }
.main_slide_ttl { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 25px; padding-top: 60px; }
.main_slide_subttl { text-align: center; font-size: 18px; margin: 24px auto 0; opacity: 0.9; color: #fff; max-width: 980px; }
.main_slide_check_form_wrp { width: 750px; max-width: 100%; margin: 0 auto 20px; }
.main_slide_check_form_wrp .ttl { font-size: 12px; text-transform: uppercase; padding-left: 15px; margin-bottom: 10px; color: rgba(255,255,255,0.7); }
.main_slide_check_form { position: relative; }
.main_slide_check_form input[type=text] { width: 100%; height: 62px; color: #fff; padding: 0 70px 0 25px; border: 2px solid #6f6f6f; background: rgba(0,0,0,0.4); font-size: 22px; }
.main_slide_check_form input[type=text]::placeholder { color: rgba(255,255,255,0.5); }
.main_slide_check_form button { background: transparent; border: none; position: absolute; right: 15px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); cursor: pointer; }
.main_slide_check_form button img { width: 30px; height: 30px; }
.form-hint { text-align: center; font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 10px; }

/* CTA BUTTONS IN HERO */
.hero-buttons { text-align: center; margin-top: 20px; }
.hero-buttons .btn { display: inline-block; padding: 12px 30px; margin: 0 10px; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 13px; transition: all 0.3s; }
.hero-buttons .btn-primary { background: #b12413; color: #fff; }
.hero-buttons .btn-primary:hover { background: #c32815; }
.hero-buttons .btn-secondary { background: #fff; color: #b12413; }
.hero-buttons .btn-secondary:hover { background: #f5f5f5; }

/* HERO DESCRIPTION */
.hero-description {
    text-align: center;
    max-width: 700px;
    margin: 25px auto 0;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.6;
}

/* ============================================================
   HERO BENEFITS - Quick teasers (2 under H1, 2 under buttons)
   ============================================================
   LAYOUT:
   - .hero-benefits-top: 2 items centered under H1
   - .hero-benefits-bottom: 2 items centered under buttons

   STRUCTURE:
   H1
   [benefit 1]  [benefit 2]     <-- hero-benefits-top
   [Search Form]
   [Button 1] [Button 2]
   [benefit 3]  [benefit 4]     <-- hero-benefits-bottom
   [Description]
   ============================================================ */
.hero-benefits-top,
.hero-benefits-bottom {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 12px auto;
    flex-wrap: wrap;
}
.hero-benefits-top .benefit-item,
.hero-benefits-bottom .benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.95);
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.25);
    padding: 6px 14px 6px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}
.hero-benefits-top .benefit-item:hover,
.hero-benefits-bottom .benefit-item:hover {
    background: rgba(177, 36, 19, 0.5);
    transform: translateY(-1px);
}
.hero-benefits-top .benefit-item .svgicon,
.hero-benefits-bottom .benefit-item .svgicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.hero-benefits-top .benefit-item .svgicon::before,
.hero-benefits-bottom .benefit-item .svgicon::before {
    filter: brightness(0) invert(1);
}

/* ========== CONTACT BAR (sticky, shows on scroll) ========== */
.contact-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    padding: 8px 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}
.contact-bar.visible { transform: translateY(0); }
.contact-bar .main_wrp { display: flex; justify-content: space-between; align-items: center; }
.contact-bar-logo { flex-shrink: 0; margin-right: 20px; }
.contact-bar-logo img { height: 32px; width: auto; }
.contact-bar-left { display: flex; gap: 20px; align-items: center; }
.contact-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #b12413;
    text-decoration: none;
    font-size: 16px;
    font-weight: 800;
    transition: all 0.3s;
}
.contact-phone:hover { color: #c32815; }
.contact-phone .svgicon { width: 20px; height: 20px; }
.contact-phone:hover .svgicon { animation: phoneShake 0.5s ease-in-out infinite; }
@keyframes phoneShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-15deg); }
    40% { transform: rotate(15deg); }
    60% { transform: rotate(-10deg); }
    80% { transform: rotate(10deg); }
}
.contact-messengers { display: flex; gap: 8px; padding-left: 15px; border-left: 1px solid #e0e0e0; }
.messenger-link {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.messenger-link.whatsapp { background: #25D366; }
.messenger-link.telegram { background: #0088cc; }
.messenger-link.max { background: linear-gradient(135deg, #4cf, #53e, #93d); }
.messenger-link:hover { transform: scale(1.15); }
.messenger-link .svgicon { width: 16px; height: 16px; }
.messenger-link .svgicon::before { filter: brightness(0) invert(1); }
.contact-email {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #50545c;
    text-decoration: none;
    font-size: 14px;
    padding-left: 15px;
    border-left: 1px solid #e0e0e0;
    transition: color 0.3s;
}
.contact-email:hover { color: #b12413; }
.contact-email .svgicon { width: 18px; height: 18px; }
.contact-bar-right { display: flex; align-items: center; gap: 10px; }
.callback-inline-form { display: flex; align-items: center; gap: 8px; }
.callback-inline-form input[type="tel"] {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    width: 140px;
    transition: border-color 0.3s;
}
.callback-inline-form input[type="tel"]:focus { border-color: #b12413; outline: none; }
.callback-inline-form input[type="tel"]::placeholder { color: #999; }
.contact-cta-btn {
    background: #b12413;
    color: #fff;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.contact-cta-btn:hover { background: #c32815; transform: translateY(-1px); }
.contact-cta-btn .svgicon { width: 16px; height: 16px; }
.contact-cta-btn .svgicon::before { filter: brightness(0) invert(1); }

/* Callback modal */
.callback-modal {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.callback-modal.active { display: flex; }
.callback-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    position: relative;
}
.callback-modal-close {
    position: absolute;
    top: 15px; right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #50545c;
}
.callback-modal h3 { color: #121426; margin-bottom: 20px; font-size: 20px; }
.callback-modal input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 14px;
}
.callback-modal input:focus { border-color: #b12413; outline: none; }
.callback-modal button {
    width: 100%;
    padding: 12px;
    background: #b12413;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
}
.callback-modal button:hover { background: #c32815; }

/* ========== ABOUT SECTION (benefits) ========== */
.about_wrp { background: #eee; padding: 40px 0; }
.block_title { text-align: center; color: #121426; position: relative; margin-bottom: 30px; }
.block_title .ttl { font-weight: 700; font-size: 32px; margin: 0 0 10px; line-height: 1em; text-transform: uppercase; }
.block_title .sub_ttl { font-size: 22px; }
.block_title::before { content: ""; display: block; margin: 0 auto 10px; width: 2px; height: 70px; background: #b12413; }
.block_title::after { content: ""; display: block; margin: 10px auto 0; width: 2px; height: 30px; background: #b12413; }

/* BENEFITS GRID - 6 cards */
.benefits-grid { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px 0; }
.benefit-item { width: calc(33.333% - 20px); margin-bottom: 30px; text-align: center; padding: 30px 20px; background: #fff; transition: .3s; }
.benefit-item:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.benefit-item .icon { width: 60px; height: 60px; margin: 0 auto 20px; background: #b12413; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; }
.benefit-item .icon::before { content: ""; position: absolute; }
/* CSS Icons using clip-path */
.benefit-item .icon-search::before { width: 24px; height: 24px; background: #fff; clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }
.benefit-item .icon-shield::before { width: 22px; height: 26px; background: #fff; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.benefit-item .icon-check::before { width: 20px; height: 16px; background: #fff; clip-path: polygon(0% 50%, 30% 80%, 100% 10%, 80% 0%, 30% 60%, 20% 40%); }
.benefit-item .icon-users::before { width: 24px; height: 20px; background: #fff; clip-path: circle(30% at 30% 35%), circle(30% at 70% 35%), ellipse(60% 40% at 50% 90%); }
.benefit-item .icon-clock::before { width: 20px; height: 20px; background: #fff; border-radius: 50%; border: 3px solid #fff; }
.benefit-item .icon-document::before { width: 18px; height: 24px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 85%, 70% 100%, 0 100%); }
.benefit-item h4 { color: #121426; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.benefit-item p { color: #50545c; font-size: 13px; }

/* ========== LANDING INTRO ========== */
.landing-intro { font-size: 16px; line-height: 1.8; color: #50545c; margin-bottom: 15px; }

/* ========== CONTENT SECTIONS ========== */
.content_wrp { background: #fff; padding: 40px 0; }
.article-content { max-width: 1160px; margin: 0 auto; }

/* ========== LAYOUT BLOCKS v2 ========== */

/* INFO CARDS - 2 columns with 4 variants */
.info-cards { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 25px 0; }
.info-card { width: calc(50% - 15px); margin-bottom: 20px; padding: 20px; background: #f9f9f9; }
.info-card h4 { color: #121426; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.info-card ul { margin: 0 0 0 15px; padding: 0; }
.info-card li { margin-bottom: 5px; font-size: 14px; }

/* STRUCTURE BLOCKS - 3 columns grid (for financial analysis landing) */
.structure-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0; }
.structure-block { padding: 25px; background: #fff; border-left: 4px solid #b12413; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.structure-block h4 { color: #121426; font-size: 16px; font-weight: 700; margin-bottom: 15px; }
.structure-block ul { margin: 0 0 0 15px; padding: 0; }
.structure-block li { margin-bottom: 6px; font-size: 14px; }

/* RELATED CHECKS GRID */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0; }
.related-item { background: #fff; padding: 20px; text-align: center; border: 1px solid #ddd; transition: all 0.3s; }
.related-item:hover { border-color: #b12413; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.related-item h4 { color: #121426; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.related-item p { color: #50545c; font-size: 14px; line-height: 1.5; margin: 0; }
.related-item a { color: #b12413; }

/* INFO CARD VARIANTS - Brand Red Palette */
.info-card.primary {
    background: linear-gradient(135deg, rgba(177, 36, 19, 0.08) 0%, rgba(177, 36, 19, 0.03) 100%);
}
.info-card.primary li { list-style-type: disc; }
.info-card.primary li::marker { color: #b12413; }

.info-card.secondary {
    border-left-color: #6b1818;
    background: linear-gradient(135deg, rgba(107, 24, 24, 0.08) 0%, rgba(107, 24, 24, 0.03) 100%);
}
.info-card.secondary li { list-style-type: circle; }
.info-card.secondary li::marker { color: #6b1818; }

.info-card.success {
    border-left-color: #8b2020;
    background: linear-gradient(135deg, rgba(139, 32, 32, 0.08) 0%, rgba(139, 32, 32, 0.03) 100%);
}
.info-card.success ul { margin-left: 0; list-style: none; }
.info-card.success li { position: relative; padding-left: 20px; list-style: none; }
.info-card.success li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 6px; height: 10px; border: solid #8b2020;
    border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.info-card.warning {
    border-left: 4px solid #9a2820;
    background: linear-gradient(135deg, rgba(154, 40, 32, 0.08) 0%, rgba(154, 40, 32, 0.03) 100%);
}
.info-card.warning li { list-style-type: square; }
.info-card.warning li::marker { color: #9a2820; }

/* STEPS BLOCK - 4 columns */
.steps-block { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px 0; }
.step-item { width: calc(25% - 15px); text-align: center; padding: 25px 15px; background: #f5f5f5; margin-bottom: 15px; }
.step-item .num { width: 40px; height: 40px; background: #b12413; color: #fff; font-size: 20px; font-weight: 700; line-height: 40px; border-radius: 50%; margin: 0 auto 15px; }
.step-item .title { color: #121426; font-weight: 700; margin-bottom: 8px; font-size: 14px; }
.step-item .desc { color: #50545c; font-size: 12px; }

/* METHODS LIST */
.methods-list { margin: 25px 0; }
.method-item {
    background: #f9f9f9;
    padding: 25px 120px 25px 70px;
    margin-bottom: 20px;
    border-left: 4px solid #b12413;
    position: relative;
    border-radius: 0 8px 8px 0;
    transition: box-shadow 0.2s ease;
}
.method-item:hover { box-shadow: 0 4px 15px rgba(177, 36, 19, 0.15); }
.method-item h4 { color: #121426; font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.method-item p { margin-bottom: 10px; color: #50545c; }

.method-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: #b12413;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.method-icon .svgicon { width: 20px; height: 20px; }
.method-icon .svgicon::before { filter: brightness(0) invert(1); }

.method-badge {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #b12413;
    color: #fff;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Method Item Variants */
.method-item.inn {
    border-left-color: #b12413;
    background: linear-gradient(135deg, #fdf6f5 0%, #fff 50%, #fdf6f5 100%);
}
.method-item.inn .method-icon { background: #b12413; }
.method-item.inn .method-badge { background: #b12413; }

.method-item.name {
    border-left-color: #6b1818;
    background: linear-gradient(135deg, #f5e8e6 0%, #fff 50%, #f5e8e6 100%);
}
.method-item.name .method-icon { background: #6b1818; }
.method-item.name .method-badge { background: #6b1818; }

.method-item.ogrn {
    border-left-color: #8b2020;
    background: linear-gradient(135deg, #f8ece8 0%, #fff 50%, #f8ece8 100%);
}
.method-item.ogrn .method-icon { background: #8b2020; }
.method-item.ogrn .method-badge { background: #8b2020; }

/* HIGHLIGHT BOXES - Brand Red Palette with SVG Icons */
.highlight-box {
    background: linear-gradient(135deg, #fff5f0 0%, #fff 50%, #fff5f0 100%);
    border-left: 4px solid #ff6b35;
    padding: 20px 25px 20px 55px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1);
    position: relative;
}
.highlight-box strong { color: #c44d1a; }
.highlight-box .box-icon { position: absolute; left: 18px; top: 22px; width: 24px; height: 24px; }
.highlight-box .box-icon .svgicon { width: 24px; height: 24px; }

.danger-box {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 50%, #fef2f2 100%);
    border-left: 4px solid #b12413;
    padding: 20px 25px 20px 55px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(177, 36, 19, 0.1);
    position: relative;
}
.danger-box strong { color: #b12413; }
.danger-box .box-icon { position: absolute; left: 18px; top: 22px; width: 24px; height: 24px; }
.danger-box .box-icon .svgicon { width: 24px; height: 24px; }

.success-box {
    background: linear-gradient(135deg, #f8f5f5 0%, #fff 50%, #f8f5f5 100%);
    border-left: 4px solid #8b2020;
    padding: 20px 25px 20px 55px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(139, 32, 32, 0.1);
    position: relative;
}
.success-box strong { color: #8b2020; }
.success-box .box-icon { position: absolute; left: 18px; top: 22px; width: 24px; height: 24px; }
.success-box .box-icon .svgicon { width: 24px; height: 24px; }

.info-box {
    background: linear-gradient(135deg, #f5f0f0 0%, #fff 50%, #f5f0f0 100%);
    border-left: 4px solid #6b1818;
    padding: 20px 25px 20px 55px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 8px rgba(107, 24, 24, 0.1);
    position: relative;
}
.info-box strong { color: #6b1818; }
.info-box .box-icon { position: absolute; left: 18px; top: 22px; width: 24px; height: 24px; }
.info-box .box-icon .svgicon { width: 24px; height: 24px; }

/* ========== DATA TABLE ========== */
.data-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.data-table th, .data-table td { padding: 12px 15px; text-align: left; border: 1px solid #ddd; }
.data-table th { background: #f5f5f5; font-weight: 700; color: #121426; }
.data-table tr:nth-child(even) { background: #fafafa; }

/* ========== COMPARISON GRID ========== */
.comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0; }
.comparison-item { background: #f9f9f9; padding: 20px; text-align: center; border-radius: 8px; }
.comparison-item.featured { background: #b12413; color: #fff; }
.comparison-item h4 { font-size: 16px; margin-bottom: 10px; }
.comparison-item .price { font-size: 24px; font-weight: 700; margin-bottom: 10px; }

/* ========== STATS GRID ========== */
.stats-grid { display: flex; justify-content: space-around; margin: 30px 0; text-align: center; }
.stat-item { padding: 20px; }
.stat-item .num { font-size: 36px; font-weight: 700; color: #b12413; }
.stat-item .label { font-size: 14px; color: #50545c; }

/* ========== NEW BLOCKS IN v3 ========== */

/* CTA BOX - red gradient with white button */
.cta-box { background: linear-gradient(135deg, #b12413 0%, #d63027 100%); color: #fff; padding: 40px; text-align: center; margin: 30px 0; border-radius: 8px; }
.cta-box h3 { color: #fff; font-size: 24px; margin-bottom: 15px; }
.cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 20px; }
.cta-box .cta-btn { display: inline-block; padding: 15px 40px; background: #fff; color: #b12413; font-weight: 700; text-transform: uppercase; text-decoration: none; transition: all 0.3s; border-radius: 4px; }
.cta-box .cta-btn:hover { background: #f0f0f0; transform: translateY(-2px); }

/* ADVANTAGES GRID - cards with circular icons */
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 30px 0; }
.advantage-item { text-align: center; padding: 30px 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.advantage-icon { width: 60px; height: 60px; margin: 0 auto 20px; background: #b12413; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; }
.advantage-item h3 { color: #121426; font-size: 18px; margin-bottom: 10px; }
.advantage-item p { color: #50545c; font-size: 14px; line-height: 1.5; }

/* BENEFITS GRID V2 - 6 cards with SVG icons */
.benefits-grid-v2 { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 30px -10px; }
.benefit-card-v2 { width: calc(33.333% - 20px); margin: 0 10px 20px; background: #f9f9f9; border-left: 3px solid #b12413; padding: 20px; box-sizing: border-box; }
.benefit-icon-v2 { width: 32px; height: 32px; margin-bottom: 12px; }
.benefit-icon-v2 svg { width: 100%; height: 100%; }
.benefit-icon-v2 .svgicon { width: 32px; height: 32px; }
.benefit-card-v2 h4 { color: #121426; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.benefit-card-v2 p { color: #50545c; font-size: 14px; line-height: 1.5; margin: 0; }

/* ============================================================
   TABLE SYSTEM - Unified 3-Type Classification
   ============================================================ */
.table-primary, .table-danger, .table-info,
.comparison-table, .risk-table, .data-table, .criteria-table {
    width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 14px;
}
.table-primary th, .table-primary td,
.table-danger th, .table-danger td,
.table-info th, .table-info td,
.comparison-table th, .comparison-table td,
.risk-table th, .risk-table td,
.data-table th, .data-table td,
.criteria-table th, .criteria-table td {
    padding: 15px; text-align: left; border-bottom: 1px solid #ddd;
}

/* TABLE PRIMARY: Black header - for comparisons, feature lists */
.table-primary thead th, .comparison-table thead th, .criteria-table thead th {
    background: #121426; color: #fff; font-weight: 700;
}
.table-primary tbody tr:nth-child(even), .comparison-table tbody tr:nth-child(even), .criteria-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}
.table-primary tbody tr:hover, .comparison-table tbody tr:hover, .criteria-table tbody tr:hover {
    background: #f0f0f0;
}

/* TABLE DANGER: Red header - for risks, warnings, negative data */
.table-danger thead th, .risk-table thead th {
    background: #b12413; color: #fff; font-weight: 700;
}
.table-danger tbody tr:hover, .risk-table tbody tr:hover { background: #fafafa; }
.table-danger td:first-child, .risk-table td:first-child { font-weight: 700; color: #121426; }

/* TABLE INFO: Gray header - for neutral specs, reference data */
.table-info thead th, .data-table thead th {
    background: #f5f5f5; font-weight: 700; color: #121426;
    border-top: 1px solid #ddd; border-bottom: 2px solid #ddd;
}
.table-info tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: #fafafa; }
.table-info td, .data-table td { border: 1px solid #ddd; }

/* UTILITY CLASSES FOR TABLE CELLS */
.winner { color: #28a745; font-weight: 700; }
.loser { color: #dc3545; }
.neutral { color: #50545c; }
.highlight { background: #fff3cd; }

/* KEY INSIGHT - red gradient, white text */
.key-insight { background: linear-gradient(135deg, #b12413 0%, #d4362a 100%); color: #fff; padding: 25px 30px; margin: 25px 0; border-radius: 8px; }
.key-insight h4 { color: #fff; margin-bottom: 10px; font-size: 18px; }
.key-insight p { color: #fff; margin: 0; font-size: 15px; line-height: 1.6; }
.key-insight ul { margin: 10px 0 0 20px; }
.key-insight li { color: #fff; margin-bottom: 5px; }

/* RISK BLOCKS AND SCENARIOS */
.risk-block { background: #fff; padding: 30px; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.risk-block h3 { color: #b12413; font-size: 18px; margin-bottom: 15px; }
.risk-block p { font-size: 14px; line-height: 1.7; margin-bottom: 15px; color: #50545c; }

.risk-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.risk-scenarios.two-per-row { grid-template-columns: repeat(2, 1fr); }
.risk-scenarios.two-per-row { margin-bottom: 28px; }
.risk-scenario { background: #fff; padding: 25px; border-top: 3px solid #b12413; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.risk-scenario h4 { color: #121426; font-size: 15px; margin-bottom: 12px; }
.risk-scenario p { font-size: 13px; line-height: 1.6; color: #50545c; }

/* RISK MATRIX - simplified styles like arbitrazhnye-dela.html */
.risk-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 25px 0; }
.risk-item { padding: 20px; border-radius: 8px; text-align: center; }
.risk-item.low { background: #d4edda; }
.risk-item.medium { background: #fff3cd; }
.risk-item.high { background: #ffe8d6; }
.risk-item.very-high { background: #f8d7da; }
.risk-item h4 { margin-bottom: 10px; color: #121426; font-size: 16px; font-weight: 700; }
.risk-item p { font-size: 13px; color: #50545c; line-height: 1.5; margin: 0; }

/* DATA TYPES - 3 cards */
.data-types { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0; }
.data-type-card { flex: 1; min-width: 280px; background: #f9f9f9; padding: 25px; border-radius: 5px; }
.data-type-card h4 { color: #b12413; font-size: 18px; margin-bottom: 15px; }
.data-type-card ul { list-style: none; padding: 0; margin: 0; }
.data-type-card li { padding: 8px 0; border-bottom: 1px dashed #ddd; color: #50545c; }
.data-type-card li:last-child { border-bottom: none; }
.data-type-card a { color: #0b56b4; }

/* TOC BLOCK - Table of Contents */
.toc-block { background: #f9f9f9; padding: 25px 30px; margin-bottom: 30px; border-left: 4px solid #b12413; }
.toc-block h4 { color: #121426; font-size: 18px; margin-bottom: 15px; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list li { margin-bottom: 8px; }
.toc-list a { color: #0b56b4; text-decoration: none; font-size: 15px; }
.toc-list a:hover { text-decoration: underline; }
.toc-list .toc-l2 { padding-left: 20px; font-size: 14px; }

/* CONTENT LAYOUT WITH SIDEBAR - TOC on left */
.content-layout { display: flex; gap: 20px; align-items: flex-start; }
.toc-sidebar {
    width: 220px; flex-shrink: 0; position: sticky; top: 80px;
    max-height: calc(100vh - 100px); overflow-y: auto;
    margin-left: 0;
}
.toc-sidebar .toc-block {
    background: #f9f9f9; padding: 12px; margin-bottom: 0;
    border-left: 4px solid #b12413; border-radius: 0 4px 4px 0;
}
.toc-sidebar .toc-block h4 {
    color: #121426; font-size: 14px; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid #ddd;
}
.toc-sidebar .toc-list { list-style: none; padding: 0; margin: 0; }
.toc-sidebar .toc-list li { margin-bottom: 4px; }
.toc-sidebar .toc-list a {
    color: #50545c; text-decoration: none; font-size: 13px;
    display: block; padding: 4px 6px; border-radius: 3px; transition: all 0.2s;
}
.toc-sidebar .toc-list a:hover {
    background: #fff; color: #b12413; text-decoration: none;
}
.toc-sidebar .toc-list .toc-l2 { padding-left: 12px; font-size: 12px; }
.content-main { flex: 1; min-width: 0; }

/* ========== FAQ ========== */
.faq-block { margin: 30px 0; }
.faq-item { border: 1px solid #ddd; margin-bottom: 10px; }
.faq-question { background: #f5f5f5; padding: 15px 40px 15px 20px; cursor: pointer; font-weight: 700; color: #121426; position: relative; }
.faq-question:hover { background: #eee; }
.faq-question::after { content: "+"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #b12413; }
.faq-item.active .faq-question::after { content: "−"; }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s; color: #50545c; }
.faq-item.active .faq-answer { padding: 15px 20px; max-height: 500px; }
.faq-answer p { margin: 0; }

/* ========== LINKS BLOCK ========== */
.links-block { margin: 20px 0; }
.links-block .links-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.links-block a { display: inline-block; padding: 8px 15px; background: #f0f0f0; color: #50545c; text-decoration: none; font-size: 13px; transition: all 0.3s; }
.links-block a:hover { background: #b12413; color: #fff; }

/* ========== ICON DEMO GRID ========== */
.icon-demo-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    margin: 30px 0 50px;
}
.icon-demo-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.icon-demo-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: scale(1.05);
}
.icon-demo-item .svgicon { width: 32px; height: 32px; }
.icon-name {
    font-size: 10px;
    color: #888;
    margin-top: 8px;
    word-break: break-all;
    line-height: 1.2;
}

/* ============================================================
   TYPOGRAPHY DEMO SECTION
   ============================================================ */
.typography-demo { margin: 40px 0; }

/* Typography sample variants with different backgrounds */
.typography-sample {
    margin-bottom: 25px;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #b12413;
    transition: box-shadow 0.3s ease;
}
.typography-sample:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
/* Background variants for typography */
.typography-sample.bg-white { background: #fff; border: 1px solid #eee; }
.typography-sample.bg-light { background: #fafafa; }
.typography-sample.bg-gray { background: #f5f5f5; }
.typography-sample.bg-gradient {
    background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}
.typography-sample.bg-brand {
    background: linear-gradient(135deg, #fdf6f5 0%, #fff 50%, #fdf6f5 100%);
    border-left-color: #b12413;
}

.typography-label {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background: #121426;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.typography-sample p { line-height: 1.7; margin: 0; }

/* ============================================================
   STYLED LISTS SYSTEM
   ============================================================
   3 list variants:
   1. .list-arrow - Arrow markers (brand color)
   2. .list-check - Checkmark markers (green)
   3. .list-icons - Custom SVG icons from library
   ============================================================ */

/* Base styled list */
.styled-list { list-style: none; padding: 0; margin: 15px 0; }
.styled-list li {
    padding: 10px 0 10px 28px;
    position: relative;
    border-bottom: 1px dashed #eee;
    line-height: 1.6;
}
.styled-list li:last-child { border-bottom: none; }

/* List with arrow markers */
.styled-list.list-arrow li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #b12413;
    border-bottom: 2px solid #b12413;
    transform: rotate(-45deg);
}
.styled-list.list-arrow li:hover::before {
    transform: rotate(-45deg) translateX(3px);
}

/* List with checkmark markers */
.styled-list.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 14px;
    border: solid #28a745;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* List with numbers (styled) */
.styled-list.list-numbered { counter-reset: list-counter; }
.styled-list.list-numbered li {
    padding-left: 35px;
    counter-increment: list-counter;
}
.styled-list.list-numbered li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 8px;
    width: 22px;
    height: 22px;
    background: #b12413;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
}

/* List with SVG icons */
.styled-list-with-icons { list-style: none; padding: 0; margin: 15px 0; }
.styled-list-with-icons li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px dashed #e0e0e0;
}
.styled-list-with-icons li:last-child { border-bottom: none; }
.styled-list-with-icons .svgicon { width: 18px; height: 18px; flex-shrink: 0; }
.styled-list-with-icons .svgicon.green::before { filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(98%) contrast(90%); }
.styled-list-with-icons .svgicon.orange::before { filter: invert(73%) sepia(94%) saturate(1256%) hue-rotate(357deg) brightness(101%) contrast(101%); }
.styled-list-with-icons .svgicon.red::before { filter: invert(18%) sepia(94%) saturate(7469%) hue-rotate(354deg) brightness(97%) contrast(88%); }

/* ============================================================
   INFO GRADIENT BLOCK
   ============================================================ */
.info-gradient-box {
    background: linear-gradient(135deg, #3a1a1a 0%, #6b2418 40%, #8b2820 100%);
    color: #fff;
    padding: 30px 35px;
    margin: 30px 0;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(177, 36, 19, 0.25);
}
.info-gradient-box::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}
.info-gradient-box h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.info-gradient-box h4 .svgicon { width: 24px; height: 24px; }
.info-gradient-box h4 .svgicon::before { filter: brightness(0) invert(1); }
.info-gradient-box p {
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    margin: 0;
}
.info-gradient-box ul {
    margin: 15px 0 0 0;
    padding: 0;
    list-style: none;
}
.info-gradient-box li {
    padding: 8px 0 8px 25px;
    position: relative;
    color: rgba(255,255,255,0.9);
}
.info-gradient-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* ========== ADVANTAGES GRID UPDATE - SVG Icons ========== */
.advantage-icon-svg { width: 60px; height: 60px; margin: 0 auto 20px; background: #b12413; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.advantage-icon-svg .svgicon { width: 28px; height: 28px; }
.advantage-icon-svg .svgicon::before { filter: brightness(0) invert(1); }

/* ========== ICON DEMO GRID - Showcase all 40 icons ========== */
.icon-demo-section { margin: 40px 0; }
.icon-demo-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-top: 25px;
}
.icon-demo-item {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    padding: 15px 10px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}
.icon-demo-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(177, 36, 19, 0.15);
    border-color: #b12413;
    background: #fff;
}
.icon-demo-item .svgicon { width: 32px; height: 32px; margin-bottom: 8px; }
.icon-demo-item .icon-name {
    font-size: 9px;
    color: #888;
    font-family: monospace;
    word-break: break-all;
    line-height: 1.3;
}
.icon-demo-category {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 700;
    color: #121426;
    margin: 20px 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #b12413;
}