:root {
    /* Основная цветовая палитра (Dark only) */
    --bg-color: #0d0d0d;
    --text-color: #f0f0f0;
    --surface-color: #1e1e1e;
    --border-color: #333333;
    
    /* ЯРКИЙ АКВАМАРИН */
    --accent-color: #2afaee; 
    
    --accent-hover: #1ff0e0;
    --accent-text: #000000;
    --icon-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- SCROLL SNAP (Посекционный скролл) --- */
html {
    scroll-behavior: smooth; /* Плавность для якорных ссылок */
    scroll-snap-type: y mandatory; /* Включаем "прилипание" по вертикали */
    overflow-y: scroll;
}

/* 1-й слайд: Hero Section */
.hero-section {
    /* Жестко задаем высоту экрана, чтобы snap работал идеально */
    height: 100vh; 
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Точка прилипания - начало блока */
    scroll-snap-align: start; 
    scroll-snap-stop: always; /* Заставляет остановиться именно здесь */
}

/* 2-й слайд: Основной контент (Прайс) */
main {
    width: 100%;
    /* Точка прилипания - начало прайс-листа */
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding-top: 40px; /* Отступ, чтобы заголовок не прилипал к самому краю браузера */
}

/* Контейнер теперь просто обертка, убираем паддинги, которые мешают высоте */
.container {
    padding: 0 20px;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
}


/* --- NEW SCROLL INDICATOR (Arrows) --- */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 10;
    padding: 10px;
}

.arrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px; /* Расстояние между стрелками */
}

.arrow-wrap span {
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid var(--accent-color);
    border-right: 3px solid var(--accent-color);
    transform: rotate(45deg);
    animation: arrow-anim 2s infinite;
    opacity: 0;
    box-shadow: 2px 2px 5px rgba(42, 250, 238, 0.2); /* Легкое свечение */
}

/* Каскадная задержка анимации */
.arrow-wrap span:nth-child(1) {
    animation-delay: 0s;
}
.arrow-wrap span:nth-child(2) {
    animation-delay: 0.15s;
}
.arrow-wrap span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes arrow-anim {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* Адаптация для мобильных: чуть выше, чтобы не перекрывать UI браузера */
@media (max-width: 600px) {
    .scroll-indicator {
        bottom: 70px; 
    }
    
    /* На мобильных иногда 100vh ведет себя странно из-за адресной строки, 
       делаем min-height, но оставляем snap */
    .hero-section {
        min-height: 100vh;
        height: auto; 
        padding: 60px 0 100px 0; /* Доп. отступы, чтобы контент влез */
    }
}

/* --- Header --- */
header { 
    margin-bottom: 30px; 
    text-align: center; 
    width: 100%; 
}

h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    margin: 0 0 10px 0;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.brand-re { font-weight: 900; }
.brand-start { color: var(--accent-color); font-weight: 900; text-shadow: 0 0 20px rgba(42, 250, 238, 0.3); }
.brand-volok { font-weight: 200; opacity: 0.8; margin-left: 5px; }

.subtitle {
    font-size: 1.2rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 2px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* --- INFO DASHBOARD --- */
.info-dashboard {
    width: 100%;
    max-width: 900px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 40px auto; /* Чуть уменьшил отступ снизу */
    box-shadow: 0 10px 30px var(--shadow-color);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Тонкая акцентная линия слева */
.info-dashboard::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
}

.info-content {
    display: flex;
    gap: 40px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-color);
    transition: 0.3s;
}

/* Ссылка с адресом */
.address-item { cursor: pointer; }
.address-item:hover .info-icon-box {
    background: var(--accent-color);
    color: var(--accent-text);
    transform: scale(1.1);
}
.address-item:hover .info-text .value { color: var(--accent-color); }

.info-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    transition: all 0.3s ease;
}
.info-icon-box svg { width: 22px; height: 22px; fill: currentColor; }

.info-text { display: flex; flex-direction: column; }
.info-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.5;
    font-weight: 700;
}
.info-text .value {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 2px;
    transition: color 0.3s;
}

/* Соцсети в дашборде */
.info-socials {
    display: flex;
    gap: 12px;
    padding-left: 30px;
    border-left: 1px solid var(--border-color);
}

.dash-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: all 0.3s;
    border: 1px solid transparent;
}
.dash-social svg { width: 20px; height: 20px; fill: currentColor; }

.dash-social:hover { transform: translateY(-3px); }
.dash-social.wa:hover { background: #25D366; color: white; }
.dash-social.tg:hover { background: #229ED9; color: white; }
.dash-social.vk:hover { background: #0077FF; color: white; }

/* --- Services Grid (Filters) --- */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    /* margin-bottom удалил, теперь это контролирует hero-section */
    justify-content: center;
}

.service-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 20px 25px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    cursor: pointer;
    box-shadow: 0 4px 6px var(--shadow-color);
    user-select: none;
    flex: 1 1 200px;
    max-width: 300px;
}

.service-card .icon {
    filter: grayscale(100%) brightness(10);
    opacity: 0.3;
    transition: 0.3s;
    font-size: 1.3em;
}

.service-card:hover .icon,
.service-card.active-filter .icon { filter: none; opacity: 1; }

.service-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-color);
}

.service-card.active-filter {
    background: var(--accent-color);
    color: var(--accent-text);
    border-color: var(--accent-color);
    box-shadow: 0 0 20px rgba(42, 250, 238, 0.4);
}
.service-card.active-filter .icon { filter: none; opacity: 1; }

.scroll-indicator {
    margin-top: 30px;
    opacity: 0.5;
    font-size: 0.9rem;
    cursor: pointer;
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

/* --- Search & Table --- */
main { width: 100%; } /* Убедимся, что мейн занимает всю ширину */

.prices-section { width: 100%; margin-bottom: 70px; margin-top: 20px; }
.section-title { text-align: center; margin-bottom: 30px; font-size: 2rem; font-weight: 800; text-transform: uppercase; }

.search-wrapper { position: relative; max-width: 600px; margin: 0 auto 40px; }
#table-search {
    width: 100%; padding: 18px 25px; padding-right: 50px;
    border-radius: 50px; border: 1px solid var(--border-color);
    background: var(--surface-color); color: var(--text-color);
    font-size: 1.1rem; outline: none; box-sizing: border-box;
    transition: 0.3s;
}
#table-search:focus { border-color: var(--accent-color); box-shadow: 0 0 15px rgba(42, 250, 238, 0.2); }
.search-icon { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; opacity: 0.5; fill: var(--text-color); }

.table-container {
    background: var(--surface-color);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.price-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.price-table th {
    background: rgba(0,0,0,0.2);
    padding: 20px 30px; text-align: left;
    font-weight: 700; text-transform: uppercase; font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}
.text-right { text-align: right !important; }

.price-table td { padding: 18px 30px; border-bottom: 1px solid var(--border-color); }
.price-table tr:last-child td { border-bottom: none; }
.price-cell { text-align: right; font-weight: 700; color: var(--accent-color); white-space: nowrap; }

.category-header { background: var(--bg-color); pointer-events: none; }
.category-header td {
    padding: 12px 30px; font-size: 0.9rem; text-transform: uppercase;
    opacity: 0.6; letter-spacing: 1.5px; font-weight: 700;
}

.reset-link {
    background: var(--surface-color); border: 1px solid var(--accent-color); 
    color: var(--accent-color); border-radius: 30px;
    cursor: pointer; font-size: 0.9rem; font-weight: 600;
    padding: 10px 25px; transition: 0.3s;
}
.reset-link:hover { background: var(--accent-color); color: var(--accent-text); }

/* --- Footer --- */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 50px;
    padding-bottom: 100px; /* Большой отступ снизу, как просили */
    
    /* Точка прилипания для Scroll Snap (опционально, если нужно чтобы скролл останавливался на подвале) */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Специфичные настройки для dashboard, когда он в футере */
.site-footer .footer-dashboard {
    margin-bottom: 30px; /* Отступ от блока с адресом до кнопки телефона */
    background: transparent; /* Можно сделать прозрачным, чтобы отличался от верхнего */
    border: none;
    box-shadow: none;
    padding: 0;
}
.site-footer .footer-dashboard::before {
    display: none; /* Убираем полоску слева для футера, чтобы выглядело легче */
}

/* Старые стили для кнопки, теперь внутри footer */
.phone-btn {
    background-color: var(--accent-color); 
    color: var(--accent-text);
    text-decoration: none; 
    padding: 20px 60px; 
    border-radius: 60px;
    font-weight: 800; 
    font-size: 1.5rem; 
    transition: all 0.3s;
    box-shadow: 0 10px 25px rgba(42, 250, 238, 0.25); 
    display: inline-block;
}
.phone-btn:hover { 
    transform: scale(1.05); 
    box-shadow: 0 15px 35px rgba(42, 250, 238, 0.35); 
    background-color: var(--accent-hover); 
}

@media (max-width: 600px) {
    .site-footer .footer-dashboard {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .site-footer .info-content {
        align-items: center; /* Центрируем тексты на мобилке */
    }
    .site-footer .info-socials {
        border-top: none; /* Убираем черту */
        padding-top: 10px;
    }
}

/* --- Mobile --- */
@media (max-width: 800px) {
    .info-dashboard {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
        gap: 25px;
    }
    .info-dashboard::before { width: 100%; height: 3px; bottom: auto; }
    .info-content { flex-direction: column; gap: 20px; width: 100%; }
    .info-socials {
        width: 100%; padding-left: 0; border-left: none;
        border-top: 1px solid var(--border-color); padding-top: 20px;
        justify-content: center;
    }
    .dash-social { width: 45px; height: 45px; background: var(--bg-color); border: 1px solid var(--border-color); }
}

@media (max-width: 600px) {
    .container { padding-left: 15px; padding-right: 15px; }
    h1 { font-size: 3rem; flex-direction: column; gap: 0; }
    .services-grid { justify-content: stretch; }
    .service-card { padding: 15px; font-size: 0.95rem; flex: 1 1 45%; max-width: none; }
    .price-table th, .price-table td { padding: 15px; font-size: 0.9rem; }
    .category-header td { padding: 10px 15px; font-size: 0.8rem; }
    .phone-btn { width: 100%; text-align: center; box-sizing: border-box; padding: 18px 20px; font-size: 1.2rem; }
}

/* Animations */
.fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }