/* Base variables and styles from your provided CSS */
:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 96.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 89.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --radius: 0.5rem;
    --green-100: hsl(145 75% 92.9%); /* Approximated from Tailwind green-100 */
    --green-600: hsl(145 63.4% 40.8%); /* Tailwind green-600 */
    --green-700: hsl(146 65.5% 36.1%); /* Tailwind green-700 */
    --slate-50: hsl(210 40% 98%);   /* Tailwind slate-50 */
    --slate-200: hsl(215 20.2% 65.1%); /* Tailwind slate-200 */
    --blue-50: hsl(210 100% 97.1%); /* Approximated */
    --text-green-100: hsl(145, 75%, 92.9%); /* For CTA text on green background */
}

 /*Dark mode variables (optional, can be activated with a class on body or media query)*/
.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
     /*... other dark mode variables ... */
 }

* {
    box-sizing: border-box;
    border-color: var(--border);
}
html {
  scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    margin: 0;
    line-height: 1.5;
}

/* Utility classes from Tailwind (simplified) */
.flex-container { display: flex; }
.min-h-screen { min-height: 100vh; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.sticky-top { position: sticky; top: 0; z-index: 40; }
.text-center { text-align: center; }
.mt-12 { margin-top: 3rem; } /* 48px */
.mr-2 { margin-right: 0.5rem; } /* 8px */
.bg-slate-50 { background-color: var(--slate-50); }

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

.grid { display: grid; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }

/* Icons */
.icon {
    display: inline-block;
    vertical-align: middle;
}
.icon-green { color: var(--green-600); }
.h-5 { height: 1.25rem; } /* 20px */
.w-5 { width: 1.25rem; }
.h-6 { height: 1.5rem; } /* 24px */
.w-6 { width: 1.5rem; }


/* Header */
.site-header {
    border-bottom: 1px solid var(--border);
    background-color: var(--background);
}
.header-container {
    height: 4rem; /* 64px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}
.logo-text {
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}
.main-nav {
    display: none; /* hidden on small screens */
    gap: 1.5rem; /* 24px */
}
@media (min-width: 768px) { /* md breakpoint */
    .main-nav { display: flex; }
}
.nav-link {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    text-decoration: none;
    color: var(--foreground);
}
.nav-link:hover { text-decoration: underline; }

.header-contact {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
}
.phone-link {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    text-decoration: none;
    color: var(--foreground);
    display: none; /* hidden on small screens */
}
@media (min-width: 768px) { /* md breakpoint */
    .phone-link { display: block; }
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* Default size */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    line-height: 1.25rem;
}
.button-primary {
    background-color: var(--green-600);
    color: var(--primary-foreground);
    border-color: var(--green-600);
}
.button-primary:hover { background-color: var(--green-700); border-color: var(--green-700); }

.button-outline {
    background-color: transparent;
    color: var(--primary); /* Or adjust based on context */
    border: 1px solid var(--border);
}
.button-outline:hover { background-color: var(--accent); }

.button-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem; /* 16px */
    text-decoration: none;
}
.button-full-width { width: 100%; }

/*!* Hero Section *!*/
/*.hero-section {*/
/*    background: linear-gradient(to right, var(--green-100), var(--blue-50));*/
/*    padding-top: 2rem; !* было 3rem *!*/
/*    padding-bottom: 2rem; !* было 3rem *!*/
/*}*/
/*@media (min-width: 768px) { !* md *!*/
/*    .hero-section {*/
/*        padding-top: 3.5rem; !* было 6rem *!*/
/*        padding-bottom: 3.5rem; !* было 6rem *!*/
/*    }*/
/*}*/
/*@media (min-width: 1024px) { !* lg *!*/
/*    .hero-section {*/
/*        padding-top: 3.5rem; !* было 8rem *!*/
/*        padding-bottom: 3.5rem; !* было 8rem *!*/
/*    }*/
/*}*/
/*.hero-container {*/
/*    display: grid;*/
/*    gap: 1rem; !* 32px *!*/
/*}*/
/*@media (min-width: 768px) { !* md *!*/
/*    .hero-container { grid-template-columns: 1fr 1fr; align-items: center; }*/
/*}*/
/*.hero-content {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 0.5rem; !* было 1.5rem (16px) *!*/
/*}*/
/*.hero-title {*/
/*    font-size: 1.625rem;*/
/*    font-weight: 700;*/
/*    letter-spacing: -0.025em;*/
/*    line-height: 1.2;*/
/*    margin: 0;*/
/*}*/

/*@media (min-width: 640px) { !* sm *!*/
/*    .hero-title {*/
/*        font-size: 2rem;   !* было 2.25rem (примерно 32px) *!*/
/*    }*/
/*}*/

/*@media (min-width: 768px) { !* md *!*/
/*    .hero-title {*/
/*        font-size: 2.5rem;  !* было 3rem (примерно 40px) *!*/
/*    }*/
/*}*/

/*@media (min-width: 1024px) { !* lg *!*/
/*    .hero-title {*/
/*        font-size: 3rem;    !* было 3.75rem (примерно 48px) *!*/
/*    }*/
/*}*/

/*.hero-subtitle {*/
/*    font-size: 1.125rem; !* 18px *!*/
/*    color: var(--muted-foreground);*/
/*}*/
/*@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } } !* md *!*/

/*.hero-buttons {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 1rem; !* 16px *!*/
/*}*/
/*@media (min-width: 640px) { !* sm *!*/
/*    .hero-buttons { flex-direction: row; }*/
/*}*/
/*.hero-features {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(2, 1fr);*/
/*    gap: 1rem; !* 16px *!*/
/*    margin: 1rem;*/
/*}*/
/*@media (min-width: 640px) { !* sm *!*/
/*    .hero-features { grid-template-columns: repeat(3, 1fr); }*/
/*}*/
/*.feature-item {*/
/*    !*display: flex;*!*/
/*    !*align-items: center;*!*/
/*    gap: 0.5rem; !* 8px *!*/
/*}*/
/*.feature-text { font-size: 0.875rem; !* 14px *! }*/
/* Hero Section */
.hero-section {
    background: linear-gradient(to right, var(--green-100), var(--blue-50));
    padding-top: 2rem; /* было 3rem */
    padding-bottom: 2rem; /* было 3rem */
}
@media (min-width: 768px) { /* md */
    .hero-section {
        padding-top: 3.5rem; /* было 6rem */
        padding-bottom: 3.5rem; /* было 6rem */
    }
}
@media (min-width: 1024px) { /* lg */
    .hero-section {
        padding-top: 3.5rem; /* было 8rem */
        padding-bottom: 3.5rem; /* было 8rem */
    }
}
.hero-container {
    display: grid;
    gap: 1rem; /* 32px */
}
@media (min-width: 768px) { /* md */
    .hero-container { grid-template-columns: 1fr 1fr; align-items: center; }
}
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* было 1.5rem (16px) */
}
.hero-title {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 640px) { /* sm */
    .hero-title {
        font-size: 2rem;   /* было 2.25rem (примерно 32px) */
    }
}

@media (min-width: 768px) { /* md */
    .hero-title {
        font-size: 2.5rem;  /* было 3rem (примерно 40px) */
    }
}

@media (min-width: 1024px) { /* lg */
    .hero-title {
        font-size: 3rem;    /* было 3.75rem (примерно 48px) */
    }
}

.hero-subtitle {
    font-size: 1.125rem; /* 18px */
    color: var(--muted-foreground);
}
@media (min-width: 768px) { .hero-subtitle { font-size: 1.25rem; } } /* md */

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
    margin-top: 0.5rem; /* Небольшой отступ от подзаголовка */
}
@media (min-width: 640px) { /* sm */
    .hero-buttons { flex-direction: row; }
}

/* Стили для блока "фич" */
.hero-features {
    display: grid;
    grid-template-columns: 1fr; /* Одна колонка по умолчанию для мобильных */
    gap: 1rem; /* 16px - отступ между элементами */
    margin-top: 1.5rem; /* Отступ сверху от кнопок */
    /* margin-left: 0; убираем если был margin: 1rem; */
    /* margin-right: 0; убираем если был margin: 1rem; */
    /* margin-bottom: 0; /* Можно убрать, если отступы управляются gap родителя */
}

/* Две колонки для экранов побольше мобильных */
@media (min-width: 480px) { /* Можете настроить эту точку останова */
    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Три колонки для планшетов и десктопов */
@media (min-width: 768px) { /* md */
    .hero-features {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 2rem; /* Можно увеличить отступ */
    }
}

.feature-item {
    display: flex;
    align-items: center; /* Вертикальное выравнивание иконки и текста */
    gap: 0.5rem; /* 8px - отступ между иконкой и текстом */
}

.feature-item svg {
    flex-shrink: 0; /* Иконка не будет сжиматься */
    /* width: 20px; /* Уже задано в HTML, но можно продублировать для надежности */
    /* height: 20px; /* Уже задано в HTML */
}

.feature-text {
    font-size: 0.875rem; /* 14px */
    line-height: 1.4; /* Для лучшей читаемости многострочного текста */
}
.feature-text__year{ display: flex; justify-content: center }

.hero-image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 28rem; /* max-w-md */
    overflow: hidden;
    border-radius: var(--radius);
    aspect-ratio: 1 / 1; /* aspect-square */
}
@media (max-width: 768px) {
    .hero-image-container {
        display: none;
    }
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* General Section Styling */
.section-padding {
    padding-top: 3rem; /* 48px */
    padding-bottom: 3rem;
}
@media (min-width: 768px) { /* md */
    .section-padding { padding-top: 6rem; padding-bottom: 6rem; }
}
.section-header {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.section-title {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    letter-spacing: -0.025em;
}
@media (min-width: 640px) { .section-title { font-size: 2.25rem; } } /* sm */
@media (min-width: 768px) { .section-title { font-size: 3rem; } } /* md */

.section-subtitle {
    margin-top: 1rem; /* 16px */
    color: var(--muted-foreground);
}

/* Advantages Section */
.advantages-grid {
    margin-top: 3rem; /* 48px */
    gap: 2rem; /* 32px */
}
@media (min-width: 640px) { /* sm */
    .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
    .advantages-grid { grid-template-columns: repeat(3, 1fr); }
}
.advantage-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    padding: 1.5rem; /* 24px */
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* shadow-sm */
}
.advantage-icon-wrapper {
    margin-bottom: 1rem; /* 16px */
    display: inline-flex;
    height: 3rem; /* 48px */
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: var(--green-100);
}
.advantage-title {
    margin-bottom: 0.5rem; /* 8px */
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}
.advantage-text { color: var(--muted-foreground); }

/* Products Section */
/*.products-grid {*/
/*    margin-top: 3rem; !* 48px *!*/
/*    gap: 2rem; !* 32px *!*/
/*}*/
/*@media (min-width: 640px) { !* sm *!*/
/*    .products-grid { grid-template-columns: repeat(2, 1fr); }*/
/*}*/
/*@media (min-width: 1024px) { !* lg *!*/
/*    .products-grid { grid-template-columns: repeat(3, 1fr); }*/
/*}*/

/*.products-grid { !* ... ваш код ... *! }*/
@media (min-width: 640px) { /* sm */
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Убедитесь, что .products-grid имеет display: grid; и align-items: stretch (по умолчанию) */
/* Если нет, добавьте: */
.products-grid {
    display: grid; /* Если это не задано классом .grid */
    /* align-items: stretch; */ /* Это значение по умолчанию, но можно добавить для ясности */
}

/*.product-card {*/
/*    overflow: hidden;*/
/*    border-radius: var(--radius);*/
/*    border: 1px solid var(--border);*/
/*    background-color: var(--card);*/
/*    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); !* shadow-sm *!*/
/*    transition: box-shadow 0.2s ease-in-out;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/
.product-card {
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* shadow-sm */
    transition: box-shadow 0.2s ease-in-out;
    /* === ДОБАВЛЯЕМ/ПРОВЕРЯЕМ ЭТИ СВОЙСТВА === */
    display: flex;
    flex-direction: column;
    margin: 1rem;
}
.product-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* hover:shadow-md */
}
.product-image-wrapper {
    aspect-ratio: 4 / 3;
    width: 100%;
    overflow: hidden;
}
.product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*.product-content {*/
/*    padding: 1.5rem; !* 24px *!*/
/*    display: flex; !* <<===== КЛЮЧЕВОЕ ИЗМЕНЕНИЕ *!*/
/*    flex-direction: column; !* Элементы внутри будут располагаться друг под другом *!*/
/*    flex-grow: 1;*/
/*}*/
.product-content {
    padding: 1.5rem; /* 24px */
    /* === ДОБАВЛЯЕМ/ПРОВЕРЯЕМ ЭТИ СВОЙСТВА === */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Заставляет этот блок занять все доступное пространство в карточке */
}
.product-title {
    margin-bottom: 0.5rem; /* 8px */
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    text-align: center;
}
/*.product-description {*/
/*    font-size: 0.875rem;*/
/*    color: var(--muted-foreground);*/
/*    line-height: 1.4;*/

/*    flex-grow: 1;*/
/*}*/
/*.product-tags {*/
/*    margin-bottom: 1rem; !* 16px *!*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 0.5rem; !* 8px *!*/
/*}*/
.product-description {
    margin-bottom: 1rem; /* 16px */
    font-size: 0.875rem; /* 14px */
    color: var(--muted-foreground);
    line-height: 1.5; /* Улучшил для читаемости */
    /* === ДОБАВЛЯЕМ ЭТО СВОЙСТВО === */
    flex-grow: 1; /* Описание будет растягиваться, отодвигая теги и футер вниз */
}

.product-tags {
    margin-bottom: 1rem; /* 16px Отступ до футера */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    flex-shrink: 0; /* Теги не должны сжиматься, если описание очень длинное */
    justify-content: center;
}
.tag {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px; /* rounded-full */
    border: 1px solid var(--border);
    padding-left: 0.625rem; /* px-2.5 */
    padding-right: 0.625rem;
    padding-top: 0.125rem; /* py-0.5 */
    padding-bottom: 0.125rem;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
}
/*.product-footer {*/
/*    display: flex;*/
/*    align-items: baseline;*/
/*    justify-content: space-between;*/
/*    margin-top: auto;*/
/*}*/
/*.product-price .current-price {*/
/*    font-size: 1.3rem; !* 24px *!*/
/*    font-weight: 700;*/
/*}*/
/*.product-price .old-price {*/
/*    margin-left: 0.5rem; !* 8px *!*/
/*    font-size: 0.875rem; !* 14px *!*/
/*    color: var(--muted-foreground);*/
/*    text-decoration: line-through;*/
/*}*/
.product-price {
    display: flex;
    flex-wrap: wrap;      /* Разрешает перенос */
    align-items: baseline; /* Выравнивание по базовой линии текста */
    /* gap: 0.25rem 0.5rem; */ /* Вертикальный и горизонтальный отступ между ценами */
                               /* Если у вас только два элемента (цена и старая цена),
                                  то достаточно горизонтального отступа, если они в одну строку.
                                  При переносе они и так будут на разных строках.
                                  Поэтому можно просто: */
    column-gap: 0.5rem;    /* Горизонтальный отступ */
    row-gap: 0.125rem;     /* Маленький вертикальный отступ, если старая цена перенеслась */
}

.current-price,
.old-price {
    white-space: nowrap; /* Предотвращаем внутренний перенос самой цены */
}

.current-price {
    font-size: 1.5rem;
    font-weight: 700;
}
@media (max-height: 768px) {
    .current-price { font-size: 1rem;}
}

.old-price {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    text-decoration: line-through;
    /* Можно добавить небольшой отступ слева, если current-price не имеет margin-right
       или если column-gap родителя не отрабатывает как нужно для первой строки */
    /* margin-left: 0.5rem;  - но лучше через gap родителя */
}

/*.product-footer {*/
/*    display: flex;*/
/*    align-items: center; !* Вертикальное выравнивание блока цен и кнопки *!*/
/*    justify-content: space-between;*/
/*    padding-top: 1rem;*/
/*    border-top: 1px solid var(--border);*/
/*    flex-shrink: 0;*/
/*    gap: 1rem; !* Отступ между блоком цен и кнопкой *!*/
/*}*/
.product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem; /* Отступ сверху от тегов или описания */
    border-top: 1px solid var(--border); /* Ваша черта */
    flex-shrink: 0; /* Футер не должен сжиматься */
    gap: 1rem;
    /* margin-top: auto; НЕ НУЖЕН, если .product-description имеет flex-grow: 1 */
}
.product-detail-button {
    flex-shrink: 0; /* Кнопка не должна сжиматься */
}


/* How It Works Section */
.how-it-works-grid {
    gap: 2rem; /* 32px */
}
@media (min-width: 768px) { /* md */
    .how-it-works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
    .how-it-works-grid { grid-template-columns: repeat(4, 1fr); }
}
.how-it-works-step { position: relative; }
.step-number-wrapper {
    margin-bottom: 1rem; /* 16px */
    display: flex;
    height: 4rem; /* 64px */
    width: 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    background-color: var(--green-100);
}

.step-number {
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
    color: var(--green-600);
}

.step-title {
    margin-bottom: 0.5rem; /* 8px */
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}
.step-description { color: var(--muted-foreground); }

/* Reviews Section */
.reviews-grid {
    margin-top: 3rem; /* 48px */
    gap: 2rem; /* 32px */
}
@media (min-width: 640px) { /* sm */
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
    .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
.review-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    padding: 1.5rem; /* 24px */
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* shadow-sm */
}
.review-author {
    display: flex;
    align-items: center;
    gap: 1rem; /* 16px */
}
.author-avatar {
    height: 3rem; /* 48px */
    width: 3rem;
    overflow: hidden;
    border-radius: 9999px; /* rounded-full */
    background-color: var(--slate-200);
}
.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-name { font-weight: 600; }
.author-location {
    font-size: 0.875rem; /* 14px */
    color: var(--muted-foreground);
}
.review-text {
    margin-top: 1rem; /* 16px */
    color: var(--muted-foreground);
}

/* FAQ Section - Accordion */
.faq-accordion {
    max-width: 48rem; /* max-w-3xl from original */
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem; /* 48px */
    width: 100%;
}
.accordion-item {
    border-bottom: 1px solid var(--border);
}
.accordion-item:first-child {
    border-top: 1px solid var(--border);
}
.accordion-trigger {
    background-color: transparent;
    border: none;
    width: 100%;
    padding: 1rem 0;
    text-align: left;
    font-size: 1rem; /* Adjust as needed */
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--foreground);
}
.accordion-trigger:hover { color: var(--accent-foreground); } /* Example hover */
.accordion-icon {
    transition: transform 0.2s ease-in-out;
    font-size: 1.25rem;
}
.accordion-item.open .accordion-icon { transform: rotate(45deg); }
.accordion-content {
    max-height: 0;
    overflow: hidden; /* Это важно для анимации max-height */
    transition: max-height 0.0s ease-out, padding 0.2s ease-out;
    color: var(--muted-foreground);
    /* background-color: transparent; !* или какой-то фон, если нужно */
}

.accordion-item.open .accordion-content {
    /* max-height устанавливается JavaScript */
    padding: 1rem; /* Убедитесь, что этот padding применяется */
}
.accordion-content p { margin-bottom: 0.5rem; }
.accordion-content p:last-child { margin-bottom: 0; }

/* Contact Section */
.contact-grid {
    margin-top: 3rem; /* 48px */
    gap: 2rem; /* 32px */
}
@media (min-width: 768px) { /* md */
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-form-card, .contact-info-card, .working-hours-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    padding: 1.5rem; /* 24px */
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); /* shadow-sm */
}
.contact-card-title {
    margin-bottom: 1rem; /* 16px */
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
}
.contact-form { display: flex; flex-direction: column; gap: 1rem; /* 16px */ }
.form-grid { display: grid; gap: 1rem; /* 16px */ }
@media (min-width: 640px) { /* sm */
    .form-grid { grid-template-columns: repeat(2, 1fr); }
}
.form-group { display: flex; flex-direction: column; gap: 0.5rem; /* 8px */ }
.form-label {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--foreground); /* Adjusted for better visibility */
}
.form-input, .form-textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
}
.form-input:focus, .form-textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--ring); /* Example focus */
}
.form-textarea { min-height: 120px; resize: vertical; }

.contact-info-container { display: flex; flex-direction: column; gap: 1.5rem; /* 24px */ }
.contact-details { display: flex; flex-direction: column; gap: 1rem; /* 16px */ }
/*.contact-item { display: flex; align-items: flex-start; gap: 1rem; !* 16px *! }*/
/*.contact-icon { margin-top: 0.25rem; !* mt-1 *! }*/
/*.contact-label { font-weight: 500; }*/
/*.contact-link {*/
/*    color: var(--muted-foreground);*/
/*    text-decoration: none;*/
/*}*/
.contact-item {
    display: flex;
    align-items: center; /* ИЗМЕНЕНИЕ: Попробуйте это для вертикального центрирования иконки относительно всего блока текста (метка + ссылка). Это часто выглядит хорошо. */
    /* Если align-items: center не даст нужного эффекта (например, иконка станет слишком низко, если ссылка переносится на несколько строк),
       можно вернуть align-items: flex-start; и точнее настроить margin-top для .contact-icon, чтобы выровнять по первой строке .contact-label. */
    gap: 1rem; /* существующий */
}

.contact-icon {
    margin-top: 0; /* ИЗМЕНЕНИЕ: Убираем или обнуляем верхний отступ, особенно если используется align-items: center. */
                   /* Если вернетесь к align-items: flex-start, возможно, понадобится небольшой margin-top (например, 0.1em или 2px) для точного выравнивания по тексту метки. */
    flex-shrink: 0; /* Добавлено: Чтобы иконка не сжималась, если текст рядом очень длинный. */
}

.contact-label {
    font-weight: 500; /* существующий */
    margin-top: 0;    /* ДОБАВЛЕНО: Убираем возможный стандартный верхний отступ параграфа. */
    margin-bottom: 0.25rem; /* ИЗМЕНЕНИЕ: Значительно уменьшаем нижний отступ (например, до 4px). Стандартный отступ параграфа ~1em (16px), что и создавало большой зазор. Можете поставить 0, если отступ не нужен совсем. */
    line-height: 1.4; /* Опционально: можно немного настроить высоту строки для лучшей визуальной гармонии с иконкой. */
}

.contact-link {
    color: var(--muted-foreground); /* существующий */
    text-decoration: none; /* существующий */
    line-height: 1.4; /* Опционально: можно синхронизировать с contact-label */
}
.contact-link:hover { text-decoration: underline; }
.contact-text {
    color: var(--muted-foreground);
    /*line-height: 1.4;*/
    margin: 0;
}

.working-hours-details { display: flex; flex-direction: column; gap: 0.5rem; /* 8px */ }
.working-hours-item { display: flex; justify-content: space-between; }

/* CTA Section */
.cta-section {
    background-color: var(--green-600);
    /*padding-top: 3rem; !* 48px *!*/
    /*padding-bottom: 3rem;*/
    margin: 0 0;
    padding: 0 0;
}
@media (min-width: 768px) { /* md */
    .cta-section { padding-top: 6rem; padding-bottom: 6rem; }
}
.cta-content {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}
.cta-title {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: white;
}
@media (min-width: 640px) { .cta-title { font-size: 2.25rem; } } /* sm */
@media (min-width: 768px) { .cta-title { font-size: 3rem; } } /* md */

.cta-subtitle {
    margin-top: 1rem; /* 16px */
    font-size: 1.125rem; /* 18px */
    color: var(--text-green-100); /* Adjusted to be lighter on green bg */
}
.cta-buttons {
    margin-top: 2rem; /* 32px */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16px */
}
@media (min-width: 640px) { /* sm */
    .cta-buttons { flex-direction: row; justify-content: center; }
}
.button-cta-primary {
    background-color: white;
    color: var(--green-600);
}
.button-cta-primary:hover { background-color: var(--green-100); }
.button-cta-outline {
    border-color: white;
    color: white;
}
.button-cta-outline:hover { background-color: var(--green-700); }


/* Footer */
.site-footer-main {
    border-top: 1px solid var(--border);
    /*background-color: var(--background);*/
    background: linear-gradient(to right, var(--green-100), var(--blue-50));
}
.footer-container-main {
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem;
}
@media (min-width: 768px) { /* md */
    .footer-container-main { padding-top: 3rem; padding-bottom: 3rem; }
}
.footer-grid {
    gap: 2rem; /* 32px */
}
@media (min-width: 768px) { /* md */
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* lg */
    .footer-grid { grid-template-columns: repeat(4, 1fr); }
}
.footer-col { margin-bottom: 1.5rem; } /* For stacking on small screens */
.footer-description {
    margin-top: 1rem; /* 16px */
    font-size: 0.875rem; /* 14px */
    color: var(--muted-foreground);
}
.footer-col-title {
    margin-bottom: 1rem; /* 16px */
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
}
.footer-links, .footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
}
.footer-link {
    font-size: 0.875rem; /* 14px */
    color: var(--muted-foreground);
    text-decoration: none;
}
.footer-link:hover {
    color: var(--foreground);
    text-decoration: underline;
}
.footer-contact-info .contact-item { gap: 0.5rem; /* 8px */ align-items: center;}
.contact-icon-small { margin-top: 0; /* Align better with text */ }
.footer-text-muted { color: var(--muted-foreground); font-size: 0.875rem; }

.footer-bottom {
    margin-top: 2rem; /* 32px */
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem; /* 16px */
}
@media (min-width: 640px) { /* sm */
    .footer-bottom { flex-direction: row; }
}
.copyright-text {
    font-size: 0.75rem; /* 12px */
    color: var(--muted-foreground);
}
.footer-legal-links { display: flex; gap: 1rem; /* 16px */ }
.footer-link-small {
    font-size: 0.75rem; /* 12px */
    color: var(--muted-foreground);
    text-decoration: none;
}
.footer-link-small:hover {
    color: var(--foreground);
    text-decoration: underline;
}

/* From @layer utilities */
.text-balance {
  text-wrap: balance;
}

.contact-form-card,
.contact-info-container {
    display: flex; /* Позволяет лучше управлять внутренним содержимым */
    flex-direction: column; /* Элементы внутри будут располагаться друг под другом */
    /* height: 100%; */ /* Это может помочь, если stretch грида не работает как ожидается,
                           но часто grid сам справляется. Пока можно не добавлять. */
}

/* Для правой колонки, чтобы ее содержимое (две карточки) лучше распределялось
   по высоте, если левая колонка (форма) окажется выше. */
.contact-info-container {
    justify-content: space-between; /* Распределяет пространство между .contact-info-card и .working-hours-card */
}
.form-textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--input);
    border-radius: var(--radius);
    background-color: var(--background);
    color: var(--foreground);
    font-size: 0.875rem;
    min-height: 50px;
    line-height: 50px;
    max-height: 130px; /* Такое у вас уже было, можно оставить или изменить */
    resize: vertical;
    width: 100%;
}

.flash-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.flash {
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 6px;
  color: #fff;
  font-weight: bold;
  animation: fadeout 5s forwards;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.flash-success { background-color: #4caf50; }   /* Зеленый */
.flash-info    { background-color: #2196f3; }   /* Синий */
.flash-warning { background-color: #ff9800; }   /* Оранжевый */
.flash-error   { background-color: #f44336; }   /* Красный */

@keyframes fadeout {
  0%   { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}

.g-grad {background: linear-gradient(to right, var(--green-100), var(--blue-50));}

/* --- Стили для модального окна --- */
.custom-modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное положение */
    z-index: 1050; /* Поверх других элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto; /* Вертикальная прокрутка, если контент не помещается */
    background-color: rgba(0, 0, 0, 0.65); /* Полупрозрачный фон */
    /* Для выравнивания .custom-modal-dialog по центру, если он не использует margin: auto */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    padding-top: 5vh; /* Отступ сверху для модального окна */
    padding-bottom: 5vh; /* Отступ снизу для прокрутки */
}

.custom-modal-dialog {
    position: relative;
    margin: auto; /* Выравнивание по центру */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 7px 20px rgba(0,0,0,.5);
    width: 90%;
    max-width: 600px; /* Максимальная ширина модального окна */
    animation-name: customModalFadeIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes customModalFadeIn {
    from {opacity: 0; transform: translateY(-40px) scale(0.95);}
    to {opacity: 1; transform: translateY(0) scale(1);}
}

.custom-modal-content {
    padding: 25px 35px; /* Внутренние отступы */
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    margin-bottom: 20px; /* Отступ после заголовка */
    border-bottom: 1px solid #e9ecef;
}

.custom-modal-title {
    margin: 0;
    font-size: 1.75rem; /* Размер заголовка */
    font-weight: 600; /* Жирность заголовка, соответствует .section-title */
    color: #333;
}

.custom-modal-close-button {
    font-size: 2rem; /* Размер крестика */
    font-weight: bold;
    color: #888;
    background: none;
    border: none;
    padding: 0 5px; /* Небольшие отступы для удобства нажатия */
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
}
.custom-modal-close-button:hover {
    color: #000;
    opacity: 1;
}

/* Стили для формы внутри модального окна */
/* Мы используем существующие классы .contact-form, .form-group и т.д. */
/* Если нужны специфичные отступы или стили для формы в модальном окне, можно добавить их тут */
/* Например: */
/*
.custom-modal-content .contact-form .form-group {
    margin-bottom: 1rem;
}
*/

/* Убедимся, что кнопка в модальном окне выглядит так же */
.custom-modal-content .contact-form .button-full-width {
    /* Стили уже должны наследоваться, но можно переопределить при необходимости */
}

/* Медиа-запросы для адаптивности модального окна (если нужно) */
@media (max-width: 768px) {
    .custom-modal-dialog {
        width: 95%;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    .custom-modal-content {
        padding: 20px 25px;
    }
    .custom-modal-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .custom-modal-content {
        padding: 15px 20px;
    }
     .custom-modal-title {
        font-size: 1.3rem;
    }
    .custom-modal-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    /* Если поля в form-grid слишком узкие на мобильных, можно их расположить в столбик */
    /*
    .custom-modal-content .form-grid {
        grid-template-columns: 1fr;
    }
    */
}