/* --- Глобальные Переменные и Стили --- */

:root {

    --primary-color: #1a3a3a; /* Темно-сине-зеленый (Деловой) */

    --secondary-color: #34b7eb; /* Ваш синий для акцентов */

    --accent-color: #FF6B00; /* Оранжевый для CTA */

    --accent-color-light: #ff8533;

    --light-bg: #f4f7f6; /* Светло-серый фон */

    --white-bg: #ffffff;

    --dark-text: #2c3e50;

    --light-text: #ffffff;

    --grey-text: #7f8c8d;

    --border-light: #e0e0e0;

    --hero-bg-color: var(--light-bg); /* Новый фон для Hero */

    --section-bg-darker: #eaf6fa; 

    --success-color: #28a745;

    --error-color: #dc3545;

}



body {

    font-family: 'Montserrat', sans-serif;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    color: var(--dark-text);

    line-height: 1.6;

    background-color: var(--white-bg);

}



h1, h2, h3, h4, h5, h6 {

    font-weight: 700;

    color: var(--primary-color);

    margin-top: 0;

}

p { margin-bottom: 1em; color: #555; }

a { text-decoration: none; color: var(--secondary-color); transition: color 0.3s ease; }

a:hover { color: #2a9ecf; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }

.hidden { display: none !important; }

.mt-40 { margin-top: 40px; }



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

.btn {

    padding: 12px 28px;

    border-radius: 8px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

    text-align: center;

    display: inline-block;

    font-size: 16px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.1);

    letter-spacing: 0.5px;

}

.btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0,0,0,0.15);

}

.btn-primary { /* Основная (Синий) */

    background-color: var(--secondary-color);

    color: white;

}

.btn-primary:hover { background-color: #2a9ecf; }

.btn-secondary { /* Акцентная (Оранжевый) */

    background-color: var(--accent-color);

    color: white;

}

.btn-secondary:hover { background-color: #e65c00; }



/* --- Header --- */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 5%;

    background-color: var(--white-bg);

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    position: sticky;

    top: 0;

    z-index: 100;

}

.header-left { display: flex; flex-direction: column; align-items: flex-start; }

.site-title {

    font-size: 2.5em; /* Увеличено */

    margin: 0;

    color: var(--primary-color);

    font-weight: 800;

}

.tagline { font-size: 0.9em; color: var(--grey-text); margin-top: 0; margin-bottom: 0; }

.header-right { display: flex; align-items: center; gap: 20px; }

.language-switcher { display: flex; gap: 8px; }

.language-switcher span {

    color: var(--grey-text);

    font-size: 0.9em;

    padding: 5px 8px;

    border-radius: 5px;

    transition: background-color 0.3s ease, color 0.3s ease;

    cursor: pointer;

    font-weight: 600;

}

.language-switcher span:hover { background-color: #ecf0f1; color: var(--dark-text); }

.language-switcher .active { background-color: var(--primary-color); color: var(--light-text); }

.header-logo { height: 45px; width: auto; }



/* --- Hero Section (New Style) --- */

.hero-section.new-hero {

    background-color: var(--hero-bg-color); /* Светло-серый фон */

    padding: 100px 5%;

    text-align: center;

    color: var(--dark-text);

    border-bottom: 1px solid var(--border-light);

}

.hero-content h2 {

    font-size: 3.2em;

    margin-bottom: 20px;

    line-height: 1.2;

    font-weight: 800;

    color: var(--primary-color);

}

.hero-content p {

    font-size: 1.3em;

    max-width: 750px;

    margin: 0 auto 40px auto;

    color: #555;

}



/* --- Заголовки Секций --- */

.section-title {

    text-align: center;

    font-size: 2.8em;

    font-weight: 800;

    color: var(--primary-color);

    margin-bottom: 60px;

    position: relative;

}

.section-title::after {

    content: ''; display: block; width: 60px; height: 4px;

    background-color: var(--secondary-color); /* Синий акцент */

    margin: 20px auto 0 auto; border-radius: 2px;

}



/* --- Benefits Section (Why Choose Us) --- */

.benefits-section { padding: 90px 5%; text-align: center; background-color: var(--white-bg); }

.benefits-section h3.section-title { color: var(--primary-color); }

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }

.benefit-item {

    background-color: var(--white-bg);

    padding: 35px;

    border-radius: 12px;

    box-shadow: 0 5px 25px rgba(26, 58, 58, 0.07); /* Тень основного цвета */

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-top: 4px solid var(--secondary-color);

}

.benefit-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(26, 58, 58, 0.1); }

.benefit-item .icon { font-size: 40px; color: var(--secondary-color); margin-bottom: 20px; }

.benefit-item h4 { font-size: 1.4em; margin-bottom: 10px; color: var(--primary-color); }

.benefit-item p { font-size: 0.95em; color: #555; }



/* --- Post-Reno Section --- */

.post-reno-section { padding: 90px 0; background-color: var(--light-bg); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }

.reno-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 25px; }

.reno-content h3 { font-size: 1.8em; font-weight: 700; color: var(--primary-color); margin-top: 0; margin-bottom: 15px; }

.reno-content p { font-size: 1.1em; margin-bottom: 30px; color: #444; }

.reno-content ul { list-style: none; padding-left: 0; margin-bottom: 30px; }

.reno-content li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 1.05em; font-weight: 600; }

.reno-content li i { color: var(--primary-color); position: absolute; left: 0; top: 4px; font-size: 18px; } /* Зеленая галочка */

.reno-image-placeholder {

    height: 400px; background-color: #ccc; border-radius: 10px; position: relative;

    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    /* *** ИЗМЕНЕНИЕ: Загрузка из файла *** */

    background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('reno-image.jpg');

    background-size: cover; background-position: center;

}

/* Удалены надписи "ДО/ПОСЛЕ" */

.reno-image-placeholder::before { content: ''; }

.reno-image-placeholder::after { content: ''; }





/* --- Calculator Section (Цифровой вид) --- */

.calculator-section { padding: 90px 0; background-color: var(--white-bg); border-top: 1px solid var(--border-light); }

.calculator-wrapper {

    display: grid; grid-template-columns: 2fr 1fr; gap: 40px; background-color: var(--white-bg);

    padding: 40px; border-radius: 15px; box-shadow: 0 10px 40px rgba(26, 58, 58, 0.08);

    border: 1px solid var(--border-light); max-width: 1200px; margin: 0 auto; padding: 40px 25px;

}

.calculator-form h3 { font-size: 1.5em; color: var(--primary-color); margin-top: 0; margin-bottom: 20px; border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; }

.form-group { display: flex; flex-direction: column; }

.form-group label { font-size: 0.95em; font-weight: 600; margin-bottom: 8px; color: var(--dark-text); }

.form-group select, .form-group input[type="number"], .form-group input[type="range"] {

    padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-family: 'Montserrat', sans-serif;

    font-size: 1em; background-color: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.form-group select:focus, .form-group input[type="number"]:focus, .form-group input[type="range"]:focus {

    border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(52, 183, 235, 0.2); outline: none;

}

.styled-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #ddd; border-radius: 5px; outline: none; cursor: pointer; }

.styled-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--secondary-color); border-radius: 50%; cursor: pointer; border: 3px solid var(--white-bg); box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.styled-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--secondary-color); border-radius: 50%; cursor: pointer; border: 3px solid var(--white-bg); box-shadow: 0 0 5px rgba(0,0,0,0.2); }

.slider-group { display: flex; align-items: center; gap: 15px; }

.slider-group #sq-meters-output { font-weight: 700; font-size: 1.1em; color: var(--primary-color); width: 60px; text-align: right; }

.extras-group { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 1em; cursor: pointer; }

.checkbox-label input { width: 18px; height: 18px; accent-color: var(--primary-color); }

.styled-number-input { width: 80px; text-align: center; }



.calculator-result {

    background-color: var(--primary-color); color: var(--light-text); border-radius: 10px; padding: 35px;

    text-align: center; display: flex; flex-direction: column; justify-content: center;

}

.calculator-result .eco-badge { font-size: 0.9em; font-weight: 600; color: var(--light-text); background-color: rgba(255, 255, 255, 0.1); padding: 8px 12px; border-radius: 20px; margin-bottom: 25px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); }

.calculator-result p { font-size: 1.1em; font-weight: 600; margin: 0 0 10px 0; color: rgba(255, 255, 255, 0.9); }

.calculator-result .final-price {

    font-size: 3.5em; font-weight: 800; color: var(--light-text); line-height: 1.1; margin-bottom: 5px;

    border-bottom: 2px solid var(--accent-orange);

    display: inline-block; padding-bottom: 10px; margin-bottom: 10px;

}

.calculator-result .price-unit { font-size: 1.1em; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 30px; }

.calculator-result .btn { width: 100%; }



/* --- Subscription Section --- */

.subscription-section { padding: 90px 0; background: var(--light-bg); color: var(--dark-text); border-top: 1px solid var(--border-light); }

.subscription-section .section-title { color: var(--primary-color); }

.subscription-section .section-subtitle { text-align: center; font-size: 1.2em; color: var(--grey-text); margin-top: -40px; margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; }

.subscription-section .section-title::after { background-color: var(--secondary-color); }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 25px; }

.pricing-card { background-color: #fff; border: 1px solid var(--border-light); border-radius: 15px; padding: 35px; display: flex; flex-direction: column; transition: all 0.3s ease; color: var(--dark-text); box-shadow: 0 8px 30px rgba(26, 58, 58, 0.05); }

.pricing-card:hover { transform: translateY(-8px); box-shadow: 0 15px 45px rgba(26, 58, 58, 0.1); border-color: var(--secondary-color); }

.pricing-card.popular { border-color: var(--secondary-color); border-width: 3px; position: relative; }

.popular-badge { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: white; padding: 6px 18px; border-radius: 25px; font-size: 0.9em; font-weight: 700; box-shadow: 0 3px 10px rgba(52, 183, 235, 0.4); }

.pricing-card h3 { font-size: 1.6em; font-weight: 700; color: var(--primary-color); margin-top: 0; }

.pricing-card .price { font-size: 2.8em; font-weight: 800; color: var(--dark-text); margin: 15px 0 10px 0; line-height: 1; }

.pricing-card .price span { font-size: 0.6em; font-weight: 500; color: var(--grey-text); }

.pricing-card ul { list-style: none; padding-left: 0; margin: 25px 0; flex-grow: 1; }

.pricing-card li { margin-bottom: 12px; font-size: 1em; position: relative; padding-left: 28px; color: #444; }

.pricing-card li::before { content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--primary-green); position: absolute; left: 0; top: 3px; font-size: 16px; }

.pricing-card .btn { margin-top: auto; }



/* --- Reviews Section --- */

.reviews-section { padding: 90px 0; background-color: #fff; border-top: 1px solid var(--border-light); }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; padding: 0 25px; }

.review-card { background-color: var(--light-bg); border-radius: 10px; padding: 30px; box-shadow: 0 5px 20px rgba(26, 58, 58, 0.05); border-left: 4px solid var(--secondary-color); }

.review-card .stars { font-size: 1.1em; color: var(--accent-color); margin-bottom: 15px; letter-spacing: 2px; }

.review-card .review-text { font-size: 1em; font-style: italic; color: var(--dark-text); margin-bottom: 20px; line-height: 1.7; }

.review-card .review-author { font-size: 1em; font-weight: 700; color: var(--primary-color); }

.review-card .review-author span { font-size: 0.9em; font-weight: 400; color: var(--grey-text); display: block; }



/* --- FAQ Section --- */

.faq-section { padding: 90px 0; background-color: var(--light-bg); border-top: 1px solid var(--border-light); }

.faq-container { max-width: 800px; margin: 0 auto; padding: 0 25px; }

.faq-item details { background: var(--white-bg); border-radius: 8px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(26, 58, 58, 0.03); border: 1px solid var(--border-light); }

.faq-item summary { font-size: 1.1em; font-weight: 600; color: var(--dark-text); padding: 20px; cursor: pointer; list-style: none; position: relative; transition: color 0.3s ease; }

.faq-item summary::after { content: '+'; font-family: 'Montserrat', sans-serif; font-size: 1.5em; font-weight: 600; color: var(--secondary-color); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease, color 0.2s ease; }

.faq-item details[open] summary { color: var(--primary-color); }

.faq-item details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--accent-color); }

.faq-item .faq-answer { padding: 0 20px 20px 20px; font-size: 1em; color: #555; }



/* --- Contact Section --- */

.contact-section { padding: 90px 0; background-color: var(--white-bg); border-top: 1px solid var(--border-light); }

.contact-form { max-width: 700px; margin: 0 auto; background-color: var(--white-bg); padding: 45px; border-radius: 15px; box-shadow: 0 12px 40px rgba(26, 58, 58, 0.08); border: 1px solid var(--light-bg); padding: 40px 25px; }

.form-group { margin-bottom: 25px; }

.form-group label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 1em; color: var(--primary-color); }

.form-group input, .form-group textarea {

    width: 95%; /* Исправлено для padding */

    padding: 14px 12px; border: 1px solid #ccc; border-radius: 6px; 

    font-family: 'Montserrat', sans-serif; font-size: 1em; 

    transition: border-color 0.3s ease, box-shadow 0.3s ease;

}

.form-group input:focus, .form-group textarea:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 3px rgba(52, 183, 235, 0.2); outline: none; }

.form-group textarea { min-height: 140px; resize: vertical; }



/* Сообщения об успехе/ошибке */

.form-success {

    background-color: var(--primary-green); /* Используем зеленый из v7 */

    color: var(--light-text);

    padding: 15px;

    border-radius: 8px;

    text-align: center;

    font-weight: 600;

    margin-top: 20px;

}

.form-error {

    background-color: var(--error-color);

    color: var(--light-text);

    padding: 15px;

    border-radius: 8px;

    text-align: center;

    font-weight: 600;

    margin-top: 20px;

}

.form-success p, .form-error p { color: var(--light-text); }





/* --- Footer --- */

footer { background-color: var(--primary-color); color: #bdc3c7; text-align: center; padding: 40px 5%; font-size: 0.9em; }



/* --- Responsive adjustments --- */

@media (max-width: 992px) {

    .hero-content h2 { font-size: 2.5em; }

    .pricing-grid, .reviews-grid { grid-template-columns: 1fr 1fr; }

    .reno-grid { grid-template-columns: 1fr; }

    .calculator-wrapper { grid-template-columns: 1fr; }

}

@media (max-width: 768px) {

    .header { flex-direction: column; align-items: center; gap: 15px; padding: 15px 3%; }

    .header-left { align-items: center; } /* Центрируем логотип и слоган на мобильных */

    .header-right { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 15px; width: 100%; }

    .site-title { font-size: 2em; text-align: center; }

    .tagline { text-align: center; }

    .hero-content h2 { font-size: 2.2em; }

    .hero-content p { font-size: 1.1em; }

    .benefits-grid, .pricing-grid, .reviews-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }

    .extras-group { grid-template-columns: 1fr; }

    .contact-form { padding: 30px 20px; }

    .reno-grid { gap: 30px; }

    .reno-image-placeholder { height: 300px; }

    .calculator-wrapper { gap: 30px; padding: 30px 20px; }

    .reviews-grid { grid-template-columns: 1fr; }

}

@media (max-width: 480px) {

    .container { padding: 0 15px; }

    .hero-content h2 { font-size: 2em; }

    .section-title { font-size: 1.8em; }

    .pricing-card .price { font-size: 2.5em; }

    .calculator-wrapper { padding: 25px 15px; }

    .header-right { gap: 10px; }

    .header-right .btn { width: 100%; margin: 5px 0 0 0; }

    .header-logo { display: none; }

    .form-group input, .form-group textarea { width: 90%; } /* Fix input width */

    .extras-group { grid-template-columns: 1fr; }

}