/* CSS файл с поддержкой CSS Nesting — вложенность */
/* --- 1. VARIABLES --- */
:root {
    /* Color Palette */
    --color-bg: hsl(60, 27%, 94%);
    --color-bg-alt: #3E5B45; /* #538761; */
    --color-surface: #ffffff;
    --color-text: #514a39;
    --color-text-muted: #3c382b;
    --color-border: #538761;
    --color-accent: #3E5B45;
    --color-accent-light: hsl(0, 0%, 100%);
    --color-accent-dark: hsl(149, 55%, 15%);
    --color-dark-border: #03212b;
    --color-footer-text: rgba(255, 255, 255, 0.75);

    /* Typography */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Font Sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-md: 1.125rem; /* 18px */
    --text-lg: 1.375rem; /* 22px */
    --text-xl: 1.75rem; /* 28px */
    --text-2xl: 2.25rem; /* 36px */
    --text-3xl: 3rem; /* 48px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --lh-base: 1.75;
    --lh-heading: 1.25;

    /* Spacing System */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;

    /* Layout & Components */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transition: 0.2s ease-in-out;
    --container-width: 1300px;

    /* Responsive Spacing Defaults (Desktop) */
    --container-padding: 2.5rem;
    --section-padding: 5rem; /* 100px */
    --grid-gap: 3.75rem; /* 60px */

    @media (max-width: 768px) {
        --container-padding: 1rem;
        --section-padding: 1.5rem;
        --grid-gap: 2rem;
    }
}

/* --- 2. GLOBAL RESET & TYPOGRAPHY --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--lh-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

/* Блокируем клики по ссылкам, кнопкам и триггерам на фоне, пока поп-ап открыт */
body:has(.modal-popover:popover-open)
:is(a, button, [popovertarget], .slide-zoom-trigger, .dot):not(
    .modal-popover *
) {
    pointer-events: none;
}

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
    font-weight: var(--font-bold);
    line-height: var(--lh-heading);
    color: var(--color-text);
}

h1,
.h1 {
    font-size: var(--text-3xl);
}

h2,
.h2 {
    font-size: var(--text-2xl);
}

h3,
.h3 {
    font-size: var(--text-xl);
}

p {
    line-height: var(--lh-base);
    color: var(--color-text-muted);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Typography Utilities */
.section-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-10);
    color: var(--color-text);

    @media (max-width: 768px) {
        font-size: var(--text-xl);
        margin-bottom: var(--sp-8);
    }
}

/* --- 3. UI COMPONENTS (Buttons, etc) --- */
.button,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 13px var(--sp-8);
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: 2px solid transparent;
    border-radius: var(--radius);
    background-color: var(--color-accent);
    color: var(--color-surface);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
    white-space: nowrap;

    &:hover {
        background-color: var(--color-accent-dark);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    &:active {
        transform: translateY(0);
    }

    &.button--outline {
        background-color: transparent;
        border-color: var(--color-accent);
        color: var(--color-accent);

        &:hover {
            background-color: var(--color-accent-light);
            border-color: var(--color-accent-dark);
            color: var(--color-accent-dark);
        }
    }

    &.button--sm {
        font-size: var(--text-sm);
        padding: 9px var(--sp-5);
    }
}

/* Модальное окно (Popover API) */
.modal-popover {
    padding: var(--sp-8);
    max-width: 600px;
    border: none;
    border-radius: 16px;
    background-color: var(--color-surface);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    color: var(--color-text);
    margin: auto;

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        /* Перехватывает клик, предотвращая его прохождение к ссылкам на фоне */
        pointer-events: auto;
    }

    h3 {
        margin-bottom: var(--sp-4);
        color: var(--color-accent-dark);
        font-size: 1.25rem;
    }

    &:popover-open {
        animation: fadeIn 0.3s ease-out;
    }

    @media (max-width: 768px) {
        max-width: 90%;
    }
}

.modal-popover__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}

/* Кнопка закрытия (крестик) */
.close-popover {
    position: absolute;
    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;
    padding: 5px;

    background: none;
    border: 1px solid black;
    border-radius: 50%;

    cursor: pointer;
    color: var(--color-text-muted);

    display: flex;
    align-items: center;
    justify-content: center;

    @media (max-width: 768px) {
        width: 32px;
        height: 32px;
        padding: 5px;
    }
}

/* Модификатор для поп-апа с изображением */
.modal-popover--image {
    padding: 6px;
    width: max-content; /* Контейнер сжимается точно под ширину картинки */
    max-width: 90vw; /* Но не шире 90% экрана */
    background-color: var(--color-surface);

    @media (max-width: 768px) {
        padding: 6px;
        max-width: 95vw;
    }

    /* Настройка самого изображения */
    .modal-popover__img {
        display: block;
        max-height: 90vh; /* Ограничиваем высоту, чтобы картинка помещалась на экран */
        max-width: 100%; /* Защита от выхода за границы поп-апа по ширине */
        width: auto;
        height: auto;
        border-radius: 8px;
    }

    /* Кнопка закрытия */
    .close-popover {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Полупрозрачный круглый фон */
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 50%;
        color: #333;
        font-size: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 10;
        transition:
            background-color 0.2s,
            transform 0.1s;

        &:hover {
            background-color: #fff;
        }

        &:active {
            transform: scale(0.95);
        }

        @media (max-width: 768px) {
            top: 12px;
            right: 12px;
            width: 40px;
            height: 40px;
        }
    }
}

/* Анимация появления поп-апа */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ГЛАВНЫЙ КОНТЕЙНЕР */
.carousel-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6, 24px);
    width: 100%;
    margin-inline: auto;
    /* Чтобы кнопки не вылезали за пределы */
    overflow: hidden;
}

/* ЛЕНТА */
.carousel-track {
    display: flex;
    gap: var(--sp-4, 16px);
    margin: 0;
    padding: 0;
    list-style: none;

    /* Нативная физика скролла */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* Плавный скролл при клике на кнопки */
    scrollbar-width: none; /* Firefox */
}
.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* СЛАЙД */
.carousel-slide {
    position: relative;
    flex: 0 0 100%; /* Слайд занимает 100% ширины контейнера */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center; /* Центрируем сканы разной ширины */
    background-color: var(--color-surface, #f5f5f5);
    border-radius: var(--radius-lg, 12px);
    padding: var(--sp-4, 16px);
}

/* ИЗОБРАЖЕНИЕ (Документы) */

.carousel-slide img {
    display: block;
    /*border: 1px solid var(--color-border);
    border-radius: var(--radius);*/
    margin-inline: auto; /* ХАК: автоматически центрирует блок по горизонтали */
    margin-block: calc(var(--sp-4, 16px) * -1);
    max-width: 100%;
    height: 400px;
    object-fit: contain;
    /*box-shadow: var(--shadow-sm);*/
}

/* КНОПКИ (Одни на всю карусель) */
.carousel-wrapper .control-btn {
    position: absolute;
    /* Центрируем по вертикали относительно картинок, минус половина высоты кнопки */
    top: calc(50% - 24px);
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.carousel-wrapper .control-btn:hover:not(:disabled) {
    background-color: var(--color-accent, #007bff);
    color: #fff;
}

.carousel-wrapper .control-btn:disabled {
    opacity: 0;
    pointer-events: none;
}

.carousel-wrapper .control-btn.prev {
    left: 8px;
}
.carousel-wrapper .control-btn.next {
    right: 8px;
}

/* ПАГИНАЦИЯ */
.carousel-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}

.carousel-pagination .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ccc;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-pagination .dot.active {
    background-color: var(--color-accent, #007bff);
    transform: scale(1.3);
}

/* ДОПОЛНЕНИЕ: Кнопка-обертка для картинки в слайде */
.slide-zoom-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in; /* Курсор-лупа подсказывает, что картинку можно увеличить */
    border-radius: var(--radius-lg, 12px);
    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

/* Легкий эффект при наведении на скан в карусели */
.slide-zoom-trigger:hover {
    transform: scale(1.02);
    filter: brightness(0.95);
}

/* Чтобы фокус с клавиатуры выглядел красиво */
.slide-zoom-trigger:focus-visible {
    outline: 2px solid var(--color-accent, #007bff);
    outline-offset: 2px;
}

/* На мобильных прячем боковые стрелки, оставляем только свайп и точки */
@media (max-width: 768px) {
    .carousel-wrapper .control-btn {
        display: none;
    }
    .carousel-slide img {
        height: 300px; /* Уменьшаем высоту для мобильных */
    }
}

/* --- ?. LAYOUT SYSTEM (Prepared for 2 columns) --- */
.two-col {
    padding: var(--section-padding) var(--container-padding);
    background-color: var(--color-bg);

    /* Контейнер-ограничитель + контекст для Container Queries */
    .two-col__container {
        max-width: var(--container-width);
        margin: 0 auto;
        container-type: inline-size;
        container-name: two-col;
    }

    /* Сетка: mobile-first через Container Queries */
    .two-col__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--grid-gap);

        @container two-col (min-width: 768px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* Колонка */
    .two-col__col {
        background-color: var(--color-surface);
        /*border: 1px solid var(--color-border);*/
        /*border-radius: var(--radius);*/
        padding: var(--sp-6);
        box-shadow: var(--shadow-sm);
        transition: box-shadow var(--transition);

        /* :has() #1 — колонка с изображением получает
           «бесшовную» раскладку без класса-модификатора */
        &:has(.two-col__media) {
            padding-block-start: 0;
            overflow: hidden;
        }

        /* :has() #2 — подсветка при фокусе на ссылке внутри колонки */
        &:has(a:focus-visible) {
            border-color: var(--color-accent);
            box-shadow: var(--shadow);
        }

        &:hover {
            box-shadow: var(--shadow);
        }
    }

    /* Изображение: осознанное переопределение глобального
       img { max-width: 100% } — картинка выходит за padding */
    .two-col__media {
        width: calc(100% + var(--sp-6) * 2);
        max-width: none;
        margin-inline: calc(var(--sp-6) * -1);
        object-fit: cover;
    }
}

/* --- 5. BLOCK SPECIFIC STYLES --- */

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);

    .header__container {
        max-width: var(--container-width);
        margin: 0 auto;
        padding: var(--sp-4) var(--sp-6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-6);

        @media (max-width: 768px) {
            flex-wrap: wrap;
            gap: var(--sp-3);
        }
    }

    .header__logo-text {
        font-size: var(--text-md);
        font-weight: var(--font-bold);
        color: var(--color-text);

        &:hover {
            color: var(--color-accent);
        }
    }

    .header__nav {
        display: flex;
        gap: var(--sp-8);
        flex: 1;
        justify-content: center;

        @media (max-width: 768px) {
            display: none;
        }
    }

    .header__nav-link {
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--color-text-muted);

        &:hover {
            color: var(--color-accent);
        }

        @media (max-width: 768px) {
            white-space: nowrap;
        }
    }
}

/* Hero Section */
.hero {
    background-color: var(--color-bg);
    padding-top: 1rem;
    padding-bottom: var(--section-padding);
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);

    @media (max-width: 768px) {
        padding-bottom: 1.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero__container {
        max-width: var(--container-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: var(--sp-16);

        @media (max-width: 768px) {
            flex-direction: column;
            gap: var(--sp-8);
            text-align: center;
        }
    }

    .hero__avatar {
        width: 100%;
        max-width: 500px;
        max-height: 650px;
        object-fit: contain;
        border-radius: 5%;
        background-color: var(--color-accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 2px solid var(--color-dark-border);

        @media (max-width: 768px) {
            width: 85%;
            max-width: 320px;
        }
    }

    .hero__avatar-img {
        width: 100%;
        height: auto;
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .hero__eyebrow {
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-accent);
        margin-top: var(--sp-4);

        @media (max-width: 768px) {
            margin: 0 auto;
        }
    }

    .hero__title {
        font-size: var(--text-3xl);
        color: var(--color-text);

        @media (max-width: 768px) {
            font-size: var(--text-2xl);
        }
    }

    .hero__text {
        font-size: var(--text-md);
        color: var(--color-text-muted);
        max-width: 540px;

        @media (max-width: 768px) {
            max-width: 100%;
            font-size: var(--text-base);
        }
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-3);
        margin-top: var(--sp-2);

        @media (max-width: 768px) {
            justify-content: center;
        }
    }
}

/* About Section (Обо мне & Образование) */
.about {
    padding: var(--section-padding) var(--container-padding);
    background-color: var(--color-surface);

    .about__container {
        max-width: var(--container-width);
        margin: 0 auto;
    }

    .about__body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: start;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: var(--sp-10);
        }
    }

    .about__text {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .about__education {
        max-width: 768px;
        display: flex;
        flex-direction: column;
        gap: var(--sp-8);

        @media (max-width: 768px) {
            max-width: 100%;
        }
    }
}

.approaches {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.approach-badge {
    display: inline-block;
    padding: var(--sp-1) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: 0.05em;
    border-radius: 999px;
    background-color: var(--color-accent-light);
    color: var(--color-accent-dark);
    border: 1.5px solid var(--color-accent);

    &:hover {
        cursor: pointer;
        background-color: var(--color-accent);
        color: white;
    }
    /* Стили для кнопок-бейджей (сбрасываем стандартные стили кнопок) */
    &.as-button {
        cursor: pointer;
        font-family: inherit;
        transition: all 0.2s ease;
    }
}

.education__trigger-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: block;
    width: 100%;
}

/* Education */
.education__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
    align-items: center;

    .about__education {
        max-width: 100%;
    }

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: var(--sp-10);
    }
}

.education__img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);

    @media (max-width: 768px) {
        display: block;
        width: 95%;
        max-width: 400px;
        max-height: 100%;
        margin: 0 auto;
    }
}

.education__images {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-self: start;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;

    @media (max-width: 768px) {
        width: 100%;
        justify-content: center;
    }
}

.edu-block__title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: var(--sp-4);
}

.edu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.edu-list__item {
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;

    /* Маркер списка — точка слева */
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.6em;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--color-accent);
    }
}

.edu-list__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    margin-top: 6px;
}

/* Кнопка-триггер под обычный пункт списка */
.edu-list__trigger {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    line-height: inherit;
    width: 100%;
    outline: none;
    transition:
        color 0.2s ease,
        text-decoration 0.2s ease;

    &:hover,
    &:focus-visible {
        color: var(--color-accent);
        text-decoration: underline;
        text-decoration-skip-ink: auto;
    }
}

/* Areas Section (Tags / Направления) */
.areas {
    padding: var(--section-padding) var(--container-padding);
    background-color: var(--color-bg);
}

.areas__container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.areas__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);

    @media (max-width: 768px) {
        justify-content: center;
    }
}

.area-tag {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    border-radius: 999px;
    transition:
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition);
    cursor: default;

    &:hover {
        border-color: var(--color-accent);
        background-color: var(--color-accent-light);
        color: var(--color-accent-dark);
    }
}

.areas__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-border);
}

/* Services Section */
.services {
    padding: var(--section-padding) var(--container-padding);
    background-color: var(--color-surface);
}

.services__container {
    max-width: var(--container-width);
    margin: 0 auto;
}

.service-card {
    background-color: var(--color-bg-alt);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-10);

    @media (max-width: 768px) {
        flex-direction: column;
        padding: var(--sp-6);
    }

    .service-card__body {
        flex: 1;
    }

    .service-card__header {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        margin-bottom: var(--sp-6);
    }

    .service-card__title {
        font-size: var(--text-xl);
        color: var(--color-bg);
    }

    .service-card__badge {
        font-size: var(--text-xs);
        font-weight: var(--font-bold);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        padding: 3px var(--sp-3);
        border-radius: 999px;
        background-color: var(--color-accent-light);
        color: var(--color-accent-dark);
        border: 1.5px solid var(--color-accent);
    }

    .service-card__details {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }

    .service-card__detail {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        font-size: var(--text-base);
        color: var(--color-bg);
    }

    .service-card__icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        color: var(--color-bg);
    }

    .service-card__actions {
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        justify-content: center;
        align-items: stretch;
        align-content: center;
        flex-shrink: 0;
        min-width: 0;

        @media (max-width: 768px) {
            flex-direction: row;
            flex-wrap: wrap;
            width: 100%;
        }

        .button {
            background-color: var(--color-surface);
            color: var(--color-accent);

            &:hover {
                color: var(--color-accent-dark);
                transform: translateY(-2px);
            }
        }

        .button--outline {
            background-color: transparent;
            border-color: var(--color-accent-light);
            color: var(--color-surface);

            &:hover {
                background-color: var(--color-accent-dark);
                border-color: var(--color-surface);
                color: var(--color-surface);
                transform: translateY(-2px);
            }
        }
    }
}

/* Contact Section */
.contact {
    padding: var(--section-padding) var(--container-padding);
    background-color: var(--color-bg);

    .section-title {
        text-align: center;
    }

    .contact__container {
        max-width: var(--container-width);
        margin: 0 auto;
    }

    .contact__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-8);
        align-items: center;
        justify-items: center;
        width: 100%;

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            flex-direction: column;
            gap: var(--sp-8);
            justify-items: center;
        }
    }

    .contact__messengers {
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        min-width: 0;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }

    .contact__note {
        font-size: var(--text-md);
        color: var(--color-text-muted);
        margin-bottom: var(--sp-2);
    }

    .contact__btn {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        padding: var(--sp-5) var(--sp-6);
        font-size: var(--text-md);
        font-weight: var(--font-semibold);
        color: var(--color-text);
        background-color: var(--color-surface);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius);
        transition: all var(--transition);
        width: 100%;

        @media (max-width: 768px) {
            max-width: 100%;
            margin: 0 auto;
        }

        &:hover {
            border-color: var(--color-accent);
            background-color: var(--color-accent-light);
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }
    }

    .contact__btn-icon {
        width: 32px;
        height: 32px;
        color: var(--color-accent);
        flex-shrink: 0;
    }

    .contact__qr {
        width: 100%;
        min-width: 0;

        @media (max-width: 768px) {
            display: none;
        }
    }
}

.qr-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--sp-4);
    justify-content: flex-start;
    width: 100%;
}

.qr-image {
    flex: 1;
    width: 100%;
    max-width: 280px;
    min-width: 0;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--sp-2);
}

.qr-placeholder {
    width: 180px;
    height: 180px;
    background-color: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-5);
}

.qr-placeholder__icon {
    width: 100px;
    height: 100px;
    color: var(--color-text-muted);
}

.qr-placeholder__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-medium);
}

/* Footer */
.footer {
    padding: var(--sp-6) var(--container-padding);
    background-color: var(--color-text);
    color: var(--color-footer-text);
    text-align: center;
}

.footer__container {
    max-width: 1100px;
    margin: 0 auto;
}

.footer__text {
    font-size: var(--text-sm);
    color: var(--color-footer-text);
}