* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Цвета из Figma */
    --blue-gradient-start: #94d4ff;
    --blue-gradient-end: #549ccd;
    --bg-white: #ffffff;
    
    /* Skeleton & Loading */
    --skeleton-base: #e8e8e8;
    --skeleton-shimmer: #f5f5f5;
    --skeleton-animation-duration: 2s;
    
    /* Telegram Theme Variables (будут переопределены Telegram Web App) */
    --tg-theme-bg-color: #ffffff;
    --tg-theme-text-color: #000000;
    --tg-theme-hint-color: #999999;
    --tg-theme-link-color: #549ccd;
    --tg-theme-button-color: #94d4ff;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #f1f1f1;
}

:root {
    /* Telegram WebApp viewport variables */
    --tg-viewport-height: 100vh;
    --tg-viewport-stable-height: 100vh;
    --tg-safe-area-inset-top: env(safe-area-inset-top, 0px);
    --tg-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --tg-safe-area-inset-left: env(safe-area-inset-left, 0px);
    --tg-safe-area-inset-right: env(safe-area-inset-right, 0px);
}

body {
    font-family: 'Roboto Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--tg-theme-bg-color, #f0f0f0);
    color: var(--tg-theme-text-color, #333);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Поддержка безопасной зоны для Telegram */
    padding-top: var(--tg-safe-area-inset-top);
    padding-bottom: var(--tg-safe-area-inset-bottom);
    padding-left: var(--tg-safe-area-inset-left);
    padding-right: var(--tg-safe-area-inset-right);
    position: relative;
    height: auto;
    /* Предотвращаем FOUC */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Показываем body после загрузки */
body.loaded {
    opacity: 1;
}

/* Дополнительные оптимизации для плавной загрузки */
body.loaded .main-container {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Telegram WebApp specific styles - правильный подход из barsa */
body.tg-webapp {
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    /* ВАЖНО: Устанавливаем фон из темы Telegram, чтобы избежать белой области */
    background-color: var(--tg-theme-bg-color, #ffffff) !important;
    /* Disable text selection for native app feel */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    /* Disable long-press context menu */
    -webkit-touch-callout: none !important;
    /* Prevent zoom */
    touch-action: pan-y !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Убеждаемся, что body не создает белую область внизу */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

/* Prevent zoom on double tap (но разрешаем прокрутку для main-wrapper) */
body.tg-webapp * {
    touch-action: manipulation !important;
}

/* Разрешаем прокрутку для main-wrapper */
body.tg-webapp .main-wrapper {
    touch-action: pan-y !important;
}

/* Allow text selection in inputs */
body.tg-webapp input,
body.tg-webapp textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    touch-action: auto !important;
}

/* Telegram WebApp styles - перенесены в секцию TELEGRAM WEB APP SPECIFIC FIXES */

/* Skeleton Loader Base Styles */
@keyframes skeleton-shimmer {
    0% {
        background-position-x: 200%;
    }
    100% {
        background-position-x: 0%;
    }
}

.skeleton-loader {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-base);
    /* Предотвращаем layout shift при удалении skeleton */
    contain: layout style paint;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.skeleton-loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        100deg,
        var(--skeleton-base),
        var(--skeleton-base) 40%,
        var(--skeleton-shimmer) 50%,
        var(--skeleton-base) 60%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer var(--skeleton-animation-duration) ease-in-out infinite;
    /* Убрали background-attachment: fixed - это может вызывать проблемы */
    will-change: background-position;
}

/* Плавное удаление skeleton loader */
.skeleton-loader:not(.skeleton-loader) {
    transition: opacity 0.3s ease;
}

/* Когда изображение загружено, плавно скрываем skeleton */
.skeleton-loader:has(img.loaded) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Улучшаем плавность для всех изображений в контейнерах */
.skeleton-loader img {
    /* Предотвращаем layout shift */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Loading States */
/* КРИТИЧНО: Исправляем проблемы с прыжками изображений */
img {
    /* Убираем opacity: 0 из базового состояния - это вызывает мигание */
    /* Вместо этого используем visibility для предотвращения layout shift */
    display: block;
    /* Фиксируем размеры для предотвращения layout shift */
    max-width: 100%;
    height: auto;
    /* GPU acceleration для плавной загрузки */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Убираем transition - будет использоваться animation */
    transition: none;
}

/* Lazy images - скрыты до загрузки */
img.lazy {
    opacity: 0;
    visibility: hidden;
    background: var(--skeleton-base);
    /* Предотвращаем layout shift */
    will-change: opacity;
}

/* Loaded images - плавное появление */
img.loaded {
    opacity: 1;
    visibility: visible;
    /* Убираем will-change после загрузки */
    will-change: auto;
}

/* Social icons should always be visible (not lazy loaded) */
.social-icon {
    opacity: 1 !important;
    /* Предотвращаем любые анимации на иконках */
    transition: none !important;
    animation: none !important;
}

/* ===== PREMIUM REVEAL ANIMATIONS ===== */
/* Современные премиальные анимации для топовых сайтов */

:root {
    /* Animation variables */
    --animation-duration: 0.8s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-delay: 0.1s;
    --stagger-delay: 0.1s;
}

/* Base animation states - элементы скрыты до анимации */
/* ВАЖНО: Fallback - элементы видимы по умолчанию, если JS не загрузился */
/* КРИТИЧНО: НЕ устанавливаем will-change здесь - это вызывает проблемы с производительностью */
/* will-change будет добавляться только перед анимацией через JS */
[data-animation],
.animate-fade-in,
.animate-slide-up,
.animate-slide-down,
.animate-slide-left,
.animate-slide-right,
.animate-scale,
.animate-blur,
.animate-rotate,
.animate-text-reveal {
    opacity: 1; /* Fallback: видимы по умолчанию */
    /* GPU acceleration для плавных анимаций */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    /* Изоляция анимаций для предотвращения reflow */
    contain: layout style paint;
    /* Оптимизация рендеринга текста */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Скрываем только после инициализации JS И после того как preloader скрыт */
/* КРИТИЧНО: Проверяем body.loaded чтобы не скрывать элементы которые уже показаны */
body.loaded.js-loaded [data-animation]:not(.is-animated):not(.is-animating-fadeIn):not(.is-animating-slideUp):not(.is-animating-slideDown):not(.is-animating-slideLeft):not(.is-animating-slideRight):not(.is-animating-scale):not(.is-animating-blur):not(.is-animating-rotate),
body.loaded.js-loaded .animate-fade-in:not(.is-animated):not(.is-animating-fadeIn),
body.loaded.js-loaded .animate-slide-up:not(.is-animated):not(.is-animating-slideUp),
body.loaded.js-loaded .animate-slide-down:not(.is-animated):not(.is-animating-slideDown),
body.loaded.js-loaded .animate-slide-left:not(.is-animated):not(.is-animating-slideLeft),
body.loaded.js-loaded .animate-slide-right:not(.is-animated):not(.is-animating-slideRight),
body.loaded.js-loaded .animate-scale:not(.is-animated):not(.is-animating-scale),
body.loaded.js-loaded .animate-blur:not(.is-animated):not(.is-animating-blur),
body.loaded.js-loaded .animate-rotate:not(.is-animated):not(.is-animating-rotate) {
    opacity: 0;
}

/* Fallback для старых браузеров - используем только js-loaded если body.loaded еще нет */
.js-loaded:not(body.loaded) [data-animation]:not(.is-animated):not(.is-animating-fadeIn):not(.is-animating-slideUp):not(.is-animating-slideDown):not(.is-animating-slideLeft):not(.is-animating-slideRight):not(.is-animating-scale):not(.is-animating-blur):not(.is-animating-rotate),
.js-loaded:not(body.loaded) .animate-fade-in:not(.is-animated):not(.is-animating-fadeIn),
.js-loaded:not(body.loaded) .animate-slide-up:not(.is-animated):not(.is-animating-slideUp),
.js-loaded:not(body.loaded) .animate-slide-down:not(.is-animated):not(.is-animating-slideDown),
.js-loaded:not(body.loaded) .animate-slide-left:not(.is-animated):not(.is-animating-slideLeft),
.js-loaded:not(body.loaded) .animate-slide-right:not(.is-animated):not(.is-animating-slideRight),
.js-loaded:not(body.loaded) .animate-scale:not(.is-animated):not(.is-animating-scale),
.js-loaded:not(body.loaded) .animate-blur:not(.is-animated):not(.is-animating-blur),
.js-loaded:not(body.loaded) .animate-rotate:not(.is-animated):not(.is-animating-rotate) {
    opacity: 0;
}

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in.is-animating-fadeIn,
[data-animation="fadeIn"].is-animating-fadeIn {
    /* Добавляем will-change только перед анимацией */
    will-change: opacity;
    animation: fadeIn var(--animation-duration) var(--animation-easing) forwards;
    /* Убираем transition чтобы избежать конфликтов */
    transition: none;
}

/* Баннер профиля исключен из анимаций для предотвращения конфликтов с позиционированием */

/* Slide Up Animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up.is-animating-slideUp,
[data-animation="slideUp"].is-animating-slideUp {
    /* Добавляем will-change только перед анимацией */
    will-change: opacity, transform;
    animation: slideUp var(--animation-duration) var(--animation-easing) forwards;
    /* Убираем transition чтобы избежать конфликтов */
    transition: none;
}

/* Slide Down Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down.is-animating-slideDown,
[data-animation="slideDown"].is-animating-slideDown {
    will-change: opacity, transform;
    animation: slideDown var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Slide Left Animation */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-left.is-animating-slideLeft,
[data-animation="slideLeft"].is-animating-slideLeft {
    will-change: opacity, transform;
    animation: slideLeft var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Slide Right Animation */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-right.is-animating-slideRight,
[data-animation="slideRight"].is-animating-slideRight {
    will-change: opacity, transform;
    animation: slideRight var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Scale Animation */
@keyframes scale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-scale.is-animating-scale,
[data-animation="scale"].is-animating-scale {
    will-change: opacity, transform;
    animation: scale var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Blur Animation */
@keyframes blur {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

.animate-blur.is-animating-blur,
[data-animation="blur"].is-animating-blur {
    will-change: opacity, filter;
    animation: blur var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Rotate Animation */
@keyframes rotate {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.animate-rotate.is-animating-rotate,
[data-animation="rotate"].is-animating-rotate {
    will-change: opacity, transform;
    animation: rotate var(--animation-duration) var(--animation-easing) forwards;
    transition: none;
}

/* Stagger Animation - для списков и галерей */
/* Fallback: элементы видимы по умолчанию */
.stagger-container {
    /* Изоляция для предотвращения reflow */
    contain: layout style paint;
}

.stagger-container > * {
    opacity: 1; /* Fallback */
    transform: translateY(0) translateZ(0); /* Fallback + GPU acceleration */
    /* Убираем transition из базового состояния - будет добавляться только при анимации */
    transition: none;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: auto; /* Будет устанавливаться только перед анимацией */
}

/* Скрываем только после инициализации JS И после того как preloader скрыт */
body.loaded.js-loaded .stagger-container > *:not(.is-animated):not(.is-animating-stagger) {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
}

/* Fallback для старых браузеров */
.js-loaded:not(body.loaded) .stagger-container > *:not(.is-animated):not(.is-animating-stagger) {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
}

.stagger-container > *.is-animating-stagger {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    /* Добавляем will-change только во время анимации */
    will-change: opacity, transform;
    transition: opacity var(--animation-duration) var(--animation-easing),
                transform var(--animation-duration) var(--animation-easing);
}

/* Убираем will-change после завершения анимации */
.stagger-container > *.is-animated {
    will-change: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Text Reveal Animation */
/* Fallback: текст видим по умолчанию */
.animate-text-reveal {
    /* Оптимизация рендеринга текста для предотвращения мигания */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Изоляция для предотвращения reflow */
    contain: layout style paint;
}

.animate-text-reveal span {
    opacity: 1; /* Fallback */
    display: inline-block;
    /* Используем transform для GPU acceleration вместо opacity transition */
    will-change: opacity;
    transition: opacity 0.6s var(--animation-easing);
    /* Предотвращаем мигание текста */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Скрываем только после инициализации JS И после того как preloader скрыт */
body.loaded.js-loaded .animate-text-reveal:not(.is-animated) span {
    opacity: 0;
}

/* Fallback для старых браузеров */
.js-loaded:not(body.loaded) .animate-text-reveal:not(.is-animated) span {
    opacity: 0;
}

.animate-text-reveal.is-animated span {
    opacity: 1;
    /* Убираем will-change после анимации */
    will-change: auto;
}

/* Parallax Animation */
.animate-parallax,
[data-parallax] {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* Number Counter Animation */
.animate-number-count {
    transition: opacity var(--animation-duration) var(--animation-easing);
}

/* Premium Hover Effects */
@keyframes hoverLift {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-8px) scale(1.02);
    }
}

@keyframes hoverGlow {
    0% {
        box-shadow: 0 4px 10px rgba(0, 85, 141, 0.1);
    }
    100% {
        box-shadow: 0 12px 30px rgba(0, 85, 141, 0.3);
    }
}

/* Enhanced Gallery Item Hover */
.gallery-item,
.public-gallery-item,
.education-gallery-item {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.4s ease;
    /* Убираем will-change из базового состояния - добавляем только при hover */
    will-change: auto;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Добавляем will-change только при hover */
.gallery-item:hover,
.public-gallery-item:hover,
.education-gallery-item:hover {
    will-change: transform, box-shadow;
}

.gallery-item:hover,
.public-gallery-item:hover,
.education-gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 32px rgba(0, 85, 141, 0.25);
    filter: brightness(1.05);
}

/* Premium Button Hover Effects */
.contact-button,
.speaker-slider__button,
.hero-slider__button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.contact-button::before,
.speaker-slider__button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    pointer-events: none;
}

.contact-button:hover::before,
.speaker-slider__button:hover::before {
    width: 300px;
    height: 300px;
}

.contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(84, 156, 205, 0.3);
}

.contact-button:active {
    transform: translateY(0);
    transition: transform 0.1s ease;
}

/* Premium Social Icons Hover */
.telegram-icon,
.vk-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.telegram-icon:hover,
.vk-icon:hover {
    transform: scale(1.15) rotate(5deg);
    opacity: 0.9;
}

.telegram-icon:active,
.vk-icon:active {
    transform: scale(1.1) rotate(3deg);
}

/* Premium Project Section Hover Effects */
.project-section {
    transition: transform 0.3s ease;
}

.project-section:hover {
    transform: translateY(-2px);
}

/* Premium Image Hover with Overlay */
.gallery-item,
.public-gallery-item,
.education-gallery-item {
    position: relative;
}

.gallery-item::after,
.public-gallery-item::after,
.education-gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 85, 141, 0) 0%, rgba(0, 85, 141, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: inherit;
}

.gallery-item:hover::after,
.public-gallery-item:hover::after,
.education-gallery-item:hover::after {
    opacity: 1;
}

/* Gradient Text Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.profile-status,
.contact-button::after {
    background-size: 200% auto;
    animation: gradientShift 3s ease infinite;
}

/* Premium Image Loading Animation */
/* ИСПРАВЛЕНО: Убрали transform: scale() чтобы предотвратить прыжки */
@keyframes imageLoad {
    from {
        opacity: 0;
        /* Убрали transform: scale(1.05) - это вызывало прыжки */
        filter: blur(4px) brightness(0.95);
    }
    to {
        opacity: 1;
        filter: blur(0) brightness(1);
    }
}

img.loaded {
    /* Используем более быструю анимацию без transform для предотвращения прыжков */
    animation: imageLoad 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* Убираем transition чтобы избежать конфликтов */
    transition: none;
}

/* Premium Profile Picture Animation */
.profile-picture {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: auto; /* Добавляем только при hover */
}

.profile-picture:hover {
    will-change: transform, box-shadow;
    transform: scale(1.03) rotate(1deg) translateZ(0); /* Уменьшили scale для меньших прыжков */
    box-shadow: 0 12px 30px rgba(0, 85, 141, 0.3);
}

/* Premium Banner Background Animation */
.profile-banner-bg,
.activity-banner-bg {
    transition: background 0.5s ease;
    position: relative;
    overflow: hidden;
}

.profile-banner-bg::before,
.activity-banner-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.profile-banner-bg:hover::before,
.activity-banner-bg:hover::before {
    left: 100%;
}

/* Section Number Animation */
.project-number-1,
.project-number-2,
.project-number-3,
.project-number-4,
.project-number-5,
.project-number-6,
.project-number-7 {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.4s ease;
    cursor: default;
}

.project-section:hover .project-number-1,
.project-section:hover .project-number-2,
.project-section:hover .project-number-3,
.project-section:hover .project-number-4,
.project-section:hover .project-number-5,
.project-section:hover .project-number-6,
.project-section:hover .project-number-7 {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 12px 30px rgba(0, 85, 141, 0.4);
    background: linear-gradient(135deg, #00558d 0%, #004470 100%);
}

/* Premium Title Hover Effects */
.project-title-1,
.project-title-2,
.project-title-3,
.project-title-4,
.project-title-5,
.project-title-6,
.project-title-7,
.activity-title {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.project-section:hover .project-title-1,
.project-section:hover .project-title-2,
.project-section:hover .project-title-3,
.project-section:hover .project-title-4,
.project-section:hover .project-title-5,
.project-section:hover .project-title-6,
.project-section:hover .project-title-7 {
    transform: translateX(4px);
    color: #004470;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Premium Slider Transitions */
.hero-slide,
.speaker-slide {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s ease;
    will-change: opacity, transform, filter;
}

.hero-slide.is-active,
.speaker-slide.is-active {
    transform: scale(1);
    filter: brightness(1);
    z-index: 2;
}

.hero-slide:not(.is-active),
.speaker-slide:not(.is-active) {
    transform: scale(0.98);
    filter: brightness(0.95);
    z-index: 1;
}

/* Premium Slider Image Zoom Effect */
.hero-slide.is-active .hero-image,
.speaker-slide.is-active img {
    /* ИСПРАВЛЕНО: Используем более плавную анимацию без резких изменений */
    animation: imageZoom 8s ease-in-out infinite alternate;
    /* GPU acceleration */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

@keyframes imageZoom {
    0% {
        transform: scale(1) translateZ(0);
    }
    100% {
        transform: scale(1.03) translateZ(0); /* Уменьшили scale с 1.05 до 1.03 для меньших прыжков */
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.3s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.3s !important;
    }
    
    [data-animation],
    .animate-fade-in,
    .animate-slide-up,
    .animate-slide-down,
    .animate-slide-left,
    .animate-slide-right,
    .animate-scale,
    .animate-blur,
    .animate-rotate {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    
    .animate-parallax,
    [data-parallax] {
        transform: none !important;
    }
}

/* После анимации убираем will-change для производительности и восстанавливаем transition */
.is-animated {
    will-change: auto !important;
    /* Восстанавливаем transition после завершения анимации для hover эффектов */
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.main-wrapper {
    width: 440px;
    height: auto !important; /* Высота устанавливается динамически через JS */
    min-height: auto !important;
    max-height: none !important;
    background-color: #ffffff;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    margin: 0 auto;
    transform-origin: top center;
    transform: scale(1);
    margin-bottom: 0;
    padding-bottom: 0;
    /* Плавное появление после загрузки */
    opacity: 0;
    transform: translateY(20px) scale(1);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Показываем wrapper после загрузки */
body.loaded .main-wrapper {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.main-container {
    position: relative;
    width: 440px;
    height: auto !important; /* Высота устанавливается динамически через JS */
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow: visible;
}

/* --- HERO SECTION --- */
/* Hero Image Container: x=0, y=0 (was 107), w=440, h=277 */
.hero-image-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 440px;
    height: 277px;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
    z-index: 20;
    background: var(--skeleton-base);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero Slider */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slider__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-slide.is-active {
    opacity: 1;
    position: relative;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-slider__controls {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Скрыты по умолчанию */
    justify-content: center;
    gap: 8px;
    z-index: 30;
}

/* Показываем кнопки только при hover на hero-секцию */
.hero-image-container:hover .hero-slider__controls {
    display: flex;
}

.hero-slider__button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.hero-slider__button:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 1);
}

/* --- PROFILE SECTION --- */

/* Profile Banner BG: x=0, y=233 (как было в коммитах) */
/* ВАЖНО: Баннер должен быть на фиксированной позиции 233px от верха main-container */
/* Это та же позиция что и у profile-picture (233px) - они должны быть на одном уровне */
/* Исключаем баннер из анимаций и parallax эффектов, которые могут влиять на позиционирование */
/* ПРОБЛЕМА БЫЛА: JavaScript функция fixBannerPosition() неправильно рассчитывала позицию */
/* учитывая parallax эффект hero, и устанавливала неправильную позицию 167px вместо 233px */
/* РЕШЕНИЕ: Баннер должен быть на фиксированной позиции 233px, независимо от parallax hero */
.profile-banner-bg {
    position: absolute;
    left: 0;
    top: 233px !important; /* Фиксированная позиция, как у profile-picture - НЕ МЕНЯТЬ! */
    width: 440px;
    height: 118px;
    background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
    border-radius: 0 0 10px 10px;
    z-index: 10;
    transform: none !important; /* Отключаем любые трансформации */
    will-change: auto !important; /* Отключаем оптимизацию для предотвращения конфликтов */
    /* ВАЖНО: Баннер НЕ должен реагировать на parallax эффект hero */
    /* Hero имеет parallax (data-parallax) и может смещаться через transform: translateY() */
    /* но баннер остается на фиксированной позиции 233px, как и другие элементы профиля */
}

/* Баннер профиля исключен из анимаций - позиционирование фиксировано */

/* Profile Picture: x=22, y=233 (как было в коммитах) */
.profile-picture {
    position: absolute;
    left: 22px;
    top: 233px;
    width: 123px;
    height: 129px;
    border-radius: 87px;
    border: 2px solid white;
    overflow: hidden;
    z-index: 30;
    background: var(--skeleton-base);
}

.profile-picture img {
    width: 100%;
    height: 155.84%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: -3.9%;
    left: 0;
}

/* Profile Name: x=157, y=283 (как было в коммитах) */
.profile-name {
    position: absolute;
    left: 157px;
    top: 283px;
    width: 224px;
    margin: 0;
    font-weight: 700;
    font-size: 26px;
    line-height: 23px;
    color: white;
    z-index: 30;
    white-space: normal; /* Разрешаем нормальные пробелы */
}

.name-line {
    display: block;
    white-space: normal; /* Разрешаем нормальные пробелы */
}

/* Profile Email: x=157, y=330 (как было в коммитах) */
.profile-email {
    position: absolute;
    left: 157px;
    top: 330px;
    width: 225px;
    font-weight: 500;
    font-size: 14px;
    color: white;
    z-index: 30;
}

/* Social Media Icons */
/* Telegram Icon: x=402, y=285 (как было в коммитах) */
.telegram-icon {
    position: absolute;
    left: 402px;
    top: 285px;
    width: 24px;
    height: 24px;
    z-index: 30;
    display: block;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.telegram-icon:hover {
    opacity: 0.8;
}

/* VK Icon: x=402, y=320 (как было в коммитах) */
.vk-icon {
    position: absolute;
    left: 402px;
    top: 320px;
    width: 24px;
    height: 24px;
    z-index: 30;
    display: block;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.vk-icon:hover {
    opacity: 0.8;
}

.social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Делаем иконки белыми */
    display: block;
    opacity: 1 !important; /* Явно показываем иконки */
    visibility: visible !important;
    transition: opacity 0.3s ease;
}

/* Profile Status: x=66, y=365 (как было в коммитах) */
.profile-status {
    position: absolute;
    left: 66px;
    top: 365px;
    width: 308px;
    margin: 0;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    z-index: 20;
    background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #549ccd;
}

/* Divider Line: x=0, y=387 (как было в коммитах) */
.divider-line {
    position: absolute;
    left: 0;
    top: 387px;
    width: 440px;
    height: 1px;
    background-color: #94d4ff;
    z-index: 20;
}

/* Contact Button: x=22, y=395 (как было в коммитах) */
/* Button Text: x=182, y=510 -> relative to button: x=160 (182-22), y=115 (510-395) */
/* ВАЖНО: По умолчанию кнопка ВИДНА - это нормальное поведение для обычного браузера */
/* JavaScript скроет её только если мы в Telegram И MainButton доступен */
.contact-button {
    position: absolute;
    left: 18px; /* Центрируем: (440-404)/2 = 18px */
    top: 395px;
    width: 404px;
    height: 36px;
    background: white;
    border: 1px solid #549ccd;
    border-radius: 10px;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: transparent;
    display: flex !important; /* По умолчанию видна - нормальное поведение, !important для переопределения */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    padding: 0;
}

/* Скрываем HTML кнопки в Telegram, так как используется MainButton */
.tg-hidden-button {
    display: none !important;
}

/* ВАЖНО: В обычном браузере (без класса tg-webapp) кнопка всегда видна */
body:not(.tg-webapp) .contact-button {
    display: flex !important;
}

.contact-button::after {
    content: "Связаться";
    background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* --- ACTIVITY SECTION --- */

/* Activity Banner BG: x=0, y=441 (как было в коммитах) */
.activity-banner-bg {
    position: absolute;
    left: 0;
    top: 441px;
    width: 440px;
    height: 133px;
    background: linear-gradient(to right, var(--blue-gradient-start), var(--blue-gradient-end));
    border-radius: 10px;
    z-index: 10;
}

/* Activity Title: x=19, y=445 (как было в коммитах) */
.activity-title {
    position: absolute;
    left: 19px;
    top: 445px;
    width: 373px;
    margin: 0;
    font-weight: 800;
    font-size: 22px;
    color: white;
    z-index: 20;
}

/* Activity Description: x=19, y=472 (как было в коммитах) */
.activity-description {
    position: absolute;
    left: 19px;
    top: 472px;
    width: 286px;
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: white;
    z-index: 20;
}

/* Activity Telegram: x=19, y=541 (как было в коммитах) */
.activity-telegram {
    position: absolute;
    left: 19px;
    top: 541px;
    width: 250px;
    margin: 0;
    font-weight: 400;
    font-size: 12px;
    color: white;
    z-index: 20;
}

/* Activity Overlay: x=0, y=539 (как было в коммитах) */
.activity-overlay {
    position: absolute;
    left: 0;
    top: 539px;
    width: 440px;
    height: 19px;
    background-color: rgba(0, 135, 225, 0.5);
    z-index: 15;
}

/* Activity Image: x=334, y=473 (как было в коммитах) */
.activity-image {
    position: absolute;
    left: 334px;
    top: 473px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 1px solid white;
    overflow: hidden;
    z-index: 20;
    background: var(--skeleton-base);
}

.activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- PROJECTS SECTION --- */

/* Section 1: Развитие сообществ */
/* Activity section ends at 574px (441 + 133), projects start there */
/* Number: x=0, y=22 (absolute: 574+22=596) */
.project-section-1 {
    position: absolute;
    left: 0;
    top: 574px;
    width: 440px;
}

.project-number-1 {
    position: absolute;
    left: 0;
    top: 22px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-1 {
    position: absolute;
    left: 58px;
    top: 29px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    z-index: 10;
}

.project-text-1 {
    position: absolute;
    left: 19px;
    top: 73px;
    width: 229px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    z-index: 10;
}

.text-highlight {
    color: #00558d;
}

.project-image-1 {
    position: absolute;
    left: 279px;
    top: 61px;
    width: 161px;
    height: 188px;
    border-radius: 30px 0 0 30px;
    overflow: hidden;
    z-index: 10;
    background: var(--skeleton-base);
}

.project-image-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-decoration-left {
    position: absolute;
    left: 0;
    top: 77px;
    width: 18px;
    height: 1px;
    background-color: #00558d;
    border-radius: 0 10px 10px 0;
    z-index: 10;
}

.project-decoration-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 1px;
    background-color: #00558d;
    border-radius: 0 10px 10px 0;
}

/* Section 2: Мироносицы 21 века */
/* Number: x=440 (right), y=277 (absolute: 574+277=851) */
.project-section-2 {
    position: absolute;
    left: 0;
    top: 574px;
    width: 440px;
}

.project-number-2 {
    position: absolute;
    right: 0;
    top: 277px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 30px 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-2 {
    position: absolute;
    left: 150px;
    top: 280px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    z-index: 10;
}

.project-text-2 {
    position: absolute;
    left: 157px;
    top: 328px;
    width: 261px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
    text-align: right;
    z-index: 10;
}

.project-text-2 p {
    margin: 0;
}

.project-image-2 {
    position: absolute;
    left: 0;
    top: 262px;
    width: 142px;
    height: 142px;
    border-radius: 0 30px 30px 0;
    overflow: hidden;
    z-index: 10;
    background: var(--skeleton-base);
}

.project-image-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-decoration-right {
    position: absolute;
    right: 0;
    top: 336px;
    width: 18px;
    height: 1px;
    background-color: #00558d;
    border-radius: 10px 0 0 10px;
    z-index: 10;
}

.project-decoration-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 3px;
    width: 15px;
    height: 1px;
    background-color: #00558d;
    border-radius: 10px 0 0 10px;
}

.project-section-3 {
    position: absolute;
    left: 0;
    top: 574px;
    width: 440px;
    height: 900px;
}

.project-number-3 {
    position: absolute;
    left: 0;
    top: 432px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-3 {
    position: absolute;
    left: 59px;
    top: 439px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    width: 323px;
    z-index: 10;
}

/* Speaker slider */
.speaker-slider {
    position: absolute;
    left: 41px;
    top: 494px; /* Позиция относительно project-section-3 */
    width: 359px;
    z-index: 10;
}

.speaker-slider__viewport {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    margin-bottom: 0;
}

.speaker-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.speaker-slide.is-active {
    opacity: 1;
    position: relative;
}

.speaker-slide img {
    width: 359px;
    height: 239px;
    object-fit: cover;
    border-radius: 30px;
    margin-bottom: 14px;
    display: block;
    background: var(--skeleton-base);
}

.speaker-slide__text {
    width: 100%;
    text-align: center;
}

.speaker-slide__title {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    margin: 0;
    line-height: 1.5;
    width: 285px;
    margin: 0 auto;
    text-align: center;
}
.speaker-slider__controls {
    position: absolute;
    left: 50%;
    top: 253px;
    transform: translateX(-50%);
    display: none; /* Скрыты по умолчанию */
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

/* Показываем кнопки только при hover на слайдер */
.speaker-slider:hover .speaker-slider__controls {
    display: flex;
}

.speaker-slider__button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #00558d;
    background: white;
    color: #00558d;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.speaker-slider__button:hover {
    background: #00558d;
    color: white;
}

/* --- SECTION 4: Опыт в молодежной политике --- */
.project-section-4 {
    position: absolute;
    left: 0;
    top: 1474px; /* 574 + 900 = 1474px */
    width: 440px;
    height: 956px;
    padding-bottom: 40px;
    z-index: 10;
}

.project-number-4 {
    position: absolute;
    left: 0;
    top: 22px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-4 {
    position: absolute;
    left: 58px;
    top: 29px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    width: 332px;
    z-index: 10;
}

.experience-content {
    position: absolute;
    left: 0;
    top: 82px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.experience-text {
    padding: 0 19px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
}

.experience-text p {
    margin: 0 0 16px 0;
}

.experience-text p:last-child {
    margin-bottom: 0;
}

.experience-text strong {
    font-weight: 700;
    color: #00558d;
}

.experience-text ul {
    margin: 12px 0;
    padding-left: 20px;
    list-style: none;
}

.experience-text ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.experience-text ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #00558d;
    font-weight: bold;
}

/* Gallery with masonry-style layout */
.experience-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 19px;
    margin-top: 8px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: var(--skeleton-base);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 85, 141, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Разные размеры для создания интересной компоновки */
.gallery-item-1 {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 160 / 107;
}

.gallery-item-2 {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 168 / 112;
}

.gallery-item-3 {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 187 / 125;
}

.gallery-item-4 {
    grid-column: 1;
    grid-row: 2 / 3;
    aspect-ratio: 201 / 124;
}

/* --- SECTION 5: Общественная деятельность --- */
.project-section-5 {
    position: absolute;
    left: 0;
    top: 2430px; /* 1474 + 956 = 2430px */
    width: 440px;
    height: 1690px; /* Увеличено на 90px */
    padding-bottom: 40px;
}

.project-number-5 {
    position: absolute;
    left: 0;
    top: 22px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-5 {
    position: absolute;
    left: 58px;
    top: 29px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    width: 320px;
    z-index: 10;
}

.public-activity-content {
    position: absolute;
    left: 0;
    top: 78px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.public-activity-text {
    padding: 0 19px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.public-activity-text p {
    margin: 0;
}

.public-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: var(--skeleton-base);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    margin: 8px 0;
}

.public-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 85, 141, 0.2);
}

.public-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Размеры изображений */
.public-gallery-item-1 {
    aspect-ratio: 296 / 197;
}

.public-gallery-item-2 {
    aspect-ratio: 303 / 202;
}

.public-gallery-item-3 {
    aspect-ratio: 298 / 199;
}

.public-gallery-item-4 {
    aspect-ratio: 298 / 180;
}

/* --- SECTION 6: Образование --- */
.project-section-6 {
    position: absolute;
    left: 0;
    top: 4120px; /* 2430 + 1690 = 4120px */
    width: 440px;
    height: 1100px; /* Увеличено с 956px до 1100px для размещения всего контента (текст + 2 изображения ~268px каждое) */
    padding-bottom: 60px; /* Отступ снизу */
    z-index: 10;
    overflow: visible; /* Разрешаем видимость элементов за границами */
}

.project-number-6 {
    position: absolute;
    left: 0;
    top: 22px;
    width: 54px;
    height: 40px;
    background-color: #00558d;
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 10;
}

.project-title-6 {
    position: absolute;
    left: 58px;
    top: 29px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    width: 147px;
    z-index: 10;
}

.education-content {
    position: absolute;
    left: 0;
    top: 78px;
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.education-text {
    padding: 0 19px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    width: 360px;
}

.education-text p {
    margin: 0 0 16px 0;
}

.education-text p:last-child {
    margin-bottom: 0;
}

.education-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 19px;
    margin-top: 16px;
}

.education-gallery-item {
    position: relative;
    overflow: hidden; /* Нужно для border-radius */
    border-radius: 30px;
    background: var(--skeleton-base);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.education-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 85, 141, 0.15);
}

.education-gallery-item img {
    width: 100%;
    height: auto; /* Автоматическая высота для сохранения пропорций */
    display: block;
    object-fit: contain; /* Показываем изображение полностью без обрезки */
    object-position: center;
}

/* --- SECTION 7: Мои ценности (Финальная секция) --- */
.project-section-7 {
    position: absolute;
    left: 0;
    top: 5280px; /* 4120 (section-6 top) + 1100 (section-6 height) + 60 (padding-bottom) = 5280px */
    width: 440px;
    height: 220px; /* Уменьшено: убрана кнопка "Связаться", уменьшена высота баннера */
    padding-bottom: 0;
    margin-bottom: 0;
    z-index: 20;
    /* Предотвращаем появление лишнего пространства после последней секции */
    overflow: visible;
}

.project-number-7 {
    position: absolute;
    left: 0;
    top: 22px;
    width: 54px;
    height: 40px;
    background: linear-gradient(135deg, #00558d 0%, #004470 100%);
    border-radius: 0 30px 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 40px;
    color: white;
    z-index: 20;
}

.project-title-7 {
    position: absolute;
    left: 58px;
    top: 29px;
    font-weight: 800;
    font-size: 22px;
    color: #00558d;
    margin: 0;
    width: 156px;
    z-index: 20;
}

.values-content {
    position: absolute;
    left: 0;
    top: 78px;
    width: 440px;
}

.values-text {
    position: absolute;
    left: 19px;
    top: 0;
    width: 360px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    margin: 0;
    z-index: 10;
}

.values-banner {
    position: relative;
    left: 0;
    top: 102px; /* 78 (content top) + 77 (текст) + 25 (отступ) = 180px от начала section, но относительно content это 102px */
    width: 440px;
    height: 120px; /* Уменьшено: убрана кнопка "Связаться", оставлен только текст и футер */
    background: linear-gradient(135deg, #00558d 0%, #004470 100%);
    padding: 0;
    margin-bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    /* Предотвращаем появление лишнего пространства */
    overflow: visible;
}

.values-collaboration {
    position: absolute;
    left: 50%;
    top: 18px; /* 162 - 144 = 18px от начала баннера */
    transform: translateX(-50%) translateZ(0); /* Центрирование + GPU acceleration */
    font-weight: 500;
    font-size: 18px;
    color: white;
    margin: 0;
    white-space: nowrap;
    z-index: 11;
    /* ВАЖНО: Сохраняем центрирование при анимации slideUp */
    /* Анимация должна комбинировать translateX(-50%) и translateY() */
    transform-origin: center center;
    /* Оптимизация рендеринга текста для предотвращения мигания */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Изоляция для предотвращения reflow */
    contain: layout style paint;
    /* Убираем transition из базового состояния */
    transition: none;
}

/* Исправляем анимацию slideUp для элементов с центрированием */
.values-collaboration.is-animating-slideUp {
    will-change: opacity, transform;
    animation: slideUpCentered var(--animation-duration) var(--animation-easing) forwards;
    transition: none; /* Убираем transition чтобы избежать конфликтов */
}

/* Специальная анимация для центрированных элементов */
@keyframes slideUpCentered {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(40px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0);
    }
}

/* Убираем will-change после завершения анимации */
.values-collaboration.is-animated {
    will-change: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.values-divider {
    position: absolute;
    left: 0;
    top: 40px; /* 40px от начала баннера */
    width: 440px;
    height: 1px;
    background-color: white;
    z-index: 11;
}

/* Кнопка "Связаться" удалена - используется Telegram MainButton */
.values-contact-button {
    display: none !important; /* Скрыта, так как используется Telegram MainButton */
}

.values-footer {
    position: absolute;
    left: 50%;
    top: 50px; /* Уменьшено: убрана кнопка, футер ближе к разделителю */
    transform: translateX(-50%) translateZ(0); /* Центрирование + GPU acceleration */
    font-weight: 500;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin: 0;
    z-index: 12;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    /* ВАЖНО: Сохраняем центрирование при анимации fadeIn */
    transform-origin: center center;
    /* Оптимизация рендеринга текста для предотвращения мигания */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* GPU acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Изоляция для предотвращения reflow */
    contain: layout style paint;
    /* Убираем transition из базового состояния */
    transition: none;
}

/* Исправляем анимацию fadeIn для элементов с центрированием */
.values-footer.is-animating-fadeIn {
    will-change: opacity;
    animation: fadeInCentered var(--animation-duration) var(--animation-easing) forwards;
    transition: none; /* Убираем transition чтобы избежать конфликтов */
}

/* Специальная анимация fadeIn для центрированных элементов */
@keyframes fadeInCentered {
    from {
        opacity: 0;
        transform: translateX(-50%) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateZ(0);
    }
}

/* Убираем will-change после завершения анимации */
.values-footer.is-animated {
    will-change: auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.values-footer-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

.values-footer-link:hover {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    text-decoration: underline;
}

.values-footer-link:active {
    opacity: 0.8;
}

/* ===== RESPONSIVE VIEWPORT SCALING ===== */
/* Pixel-perfect responsive design using transform: scale() method */
/* Base design: 440px width × 5500px height */
/* Optimized for all devices with smooth transitions and performance improvements */
/* Note: Кнопка "Связаться" в подвале удалена - используется Telegram MainButton */

/* Мобильные устройства - универсальный медиа-запрос для всех размеров до 440px */
@media screen and (max-width: 440px) {
    html {
        font-size: calc(100vw / 440 * 16px);
        overflow-x: hidden;
        width: 100%;
        /* Поддержка безопасной зоны для Telegram */
        /* Используем contentSafeAreaInset для учета шапки и подвала Telegram */
        padding-top: env(safe-area-inset-top);
        padding-bottom: 0; /* Убрано - используется contentSafeAreaInset через JS */
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body:not(.tg-webapp) {
        background-color: var(--tg-theme-bg-color, #ffffff) !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        position: relative !important;
        /* Поддержка безопасной зоны для Telegram */
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: 0 !important;
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    
    .main-wrapper {
        transform-origin: top center !important;
        width: 440px !important;
        height: auto !important;
        /* ВАЖНО: min-height: auto только для обычного браузера, НЕ для Telegram WebApp */
        /* Для Telegram WebApp min-height будет установлен через body.tg-webapp .main-wrapper */
        min-height: auto !important;
        max-height: none !important;
        box-shadow: none !important;
        margin: 0 auto !important;
        will-change: transform;
        position: relative !important;
        display: block !important;
        flex-shrink: 0 !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* ВАЖНО: Переопределяем min-height для Telegram WebApp в медиа-запросе */
    body.tg-webapp .main-wrapper {
        min-height: 100vh !important;
        height: 100vh !important;
    }
    
    /* В Telegram WebApp переопределяем стили для прокрутки */
    /* ВАЖНО: Ширина остается адаптивной (440px из медиа-запроса) */
    body.tg-webapp .main-wrapper {
        /* ВАЖНО: Используем height: 100vh для правильной работы прокрутки */
        /* Это создает контейнер высотой viewport, внутри которого прокручивается контент */
        height: 100vh !important;
        min-height: 100vh !important; /* Дополнительно для надежности */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        /* ВАЖНО: transform НЕ переопределяем - остается адаптивным */
        /* transform будет установлен через responsive.js для адаптивности */
        margin: 0 auto !important;
        will-change: transform !important; /* Для плавного масштабирования */
        padding-top: 0 !important; /* Убрано - Telegram header уже учитывает safe area сверху */
        padding-bottom: 0 !important; /* Убрано - MainButton находится поверх, не нужен padding на wrapper */
        padding-left: var(--tg-safe-area-inset-left) !important;
        padding-right: var(--tg-safe-area-inset-right) !important;
        /* КРИТИЧНО: Убеждаемся, что контейнер видим */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        /* ВАЖНО: Убеждаемся, что wrapper не создает белую область */
        background-color: #ffffff !important;
        /* Ширина остается 440px из медиа-запроса выше */
    }
    
    /* main-container сохраняет адаптивную ширину из медиа-запроса (440px) */
    
    .main-container {
        width: 440px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        position: relative !important;
    }
}

/* Планшеты и десктопы - оригинальный размер из Figma */
@media screen and (min-width: 441px) {
    body {
        background-color: #f0f0f0 !important;
    }
    
    .main-wrapper {
        transform: none !important;
        width: 440px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        transition: box-shadow 0.3s ease-out;
    }
    
    .main-container {
        width: 440px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* Medium tablets (441px - 768px) */
@media (min-width: 441px) and (max-width: 768px) {
    .main-wrapper {
        margin: 0 auto;
    }
}

/* Large tablets and small desktops (769px - 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    .main-wrapper {
        margin: 10px auto 0 auto; /* Убран нижний отступ */
    }
}

/* Large screens - keep original design with margin */
@media (min-width: 1200px) {
    .main-wrapper {
        margin: 20px auto 0 auto; /* Убран нижний отступ для устранения белого пространства */
    }
}

/* Extra large screens - add more margin */
@media (min-width: 1920px) {
    .main-wrapper {
        margin: 40px auto 0 auto; /* Убран нижний отступ */
    }
}

/* Landscape orientation on mobile - optimized scaling */
@media screen and (max-width: 440px) and (orientation: landscape) {
    .main-wrapper {
        transform: scale(calc(100vh / 5500 * 1.5)) !important;
        transform-origin: top center !important;
        width: 440px !important;
        height: 5500px !important; /* Уменьшено с 5660px */
        transition: transform 0.3s ease-out;
    }
}

/* Touch device optimizations - enhanced touch targets */
@media (hover: none) and (pointer: coarse) {
    /* Touch targets are automatically scaled with transform */
    .contact-button,
    .values-contact-button {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(84, 156, 205, 0.2);
        touch-action: manipulation;
        user-select: none;
    }
    
    .speaker-slider__button,
    .hero-slider__button {
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
        touch-action: manipulation;
        user-select: none;
    }
    
    /* Improve touch scrolling */
    .main-container {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent text selection on touch */
    .hero-slide,
    .speaker-slide {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* Mouse/pointer device optimizations */
@media (hover: hover) and (pointer: fine) {
    .contact-button:hover,
    .values-contact-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(84, 156, 205, 0.3);
    }
    
    .speaker-slider__button:hover,
    .hero-slider__button:hover {
        background: rgba(255, 255, 255, 0.5);
        transform: scale(1.05);
    }
}

/* Reduced motion preference - accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .skeleton-loader::before {
        animation: none !important;
    }
    
    img.lazy {
        transition: none !important;
    }
    
    .main-wrapper {
        transition: none !important;
    }
}

/* High-DPI displays optimization - better image rendering */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Better text rendering on high-DPI */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Dark mode support (if user prefers) */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
    }
    
    @media (min-width: 441px) {
        body {
            background-color: #0a0a0a;
        }
    }
}

/* Print styles - optimized for printing */
@media print {
    .main-wrapper {
        transform: none !important;
        height: auto !important;
        box-shadow: none !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .main-container {
        page-break-inside: avoid;
        height: auto !important;
    }
    
    .skeleton-loader::before {
        display: none !important;
    }
    
    /* Hide interactive elements */
    .contact-button,
    .values-contact-button,
    .speaker-slider__button,
    .hero-slider__button {
        display: none;
    }
    
    /* Ensure images print */
    img {
        opacity: 1 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Performance optimizations - объединено с основным медиа-запросом выше */

/* Container queries support (future-proof) */
@supports (container-type: inline-size) {
    .main-wrapper {
        container-type: inline-size;
    }
}

/* ===== TELEGRAM WEB APP SPECIFIC FIXES ===== */
/* Правильный подход из https://github.com/QB-Quardobot/barsa */
/* Используем body.tg-webapp с position: fixed и прокручиваемый main-wrapper */

/* Убираем псевдоэлементы, которые могут создавать лишнее пространство */
.main-wrapper::after,
.main-container::after,
.project-section-7::after,
.values-banner::after,
.values-content::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Telegram WebApp: body становится fixed контейнером */
/* ВАЖНО: Этот блок дублирует стили выше, но здесь мы убеждаемся, что фон правильный */
body.tg-webapp {
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: touch !important;
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    /* ВАЖНО: Фон должен совпадать с темой Telegram, чтобы не было белой области */
    background-color: var(--tg-theme-bg-color, #ffffff) !important;
    /* Убеждаемся, что body занимает весь viewport без белых областей */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

/* Telegram WebApp: main-wrapper становится прокручиваемым контейнером */
/* Контейнер имеет фиксированную высоту viewport, контент внутри прокручивается */
/* ВАЖНО: Сохраняем адаптивность - не переопределяем ширину */
body.tg-webapp .main-wrapper {
    /* Высота и прокрутка */
    /* ВАЖНО: Используем height: 100vh для создания прокручиваемого контейнера */
    /* Контент внутри будет прокручиваться, а wrapper останется фиксированной высоты */
    height: 100vh !important;
    min-height: 100vh !important; /* Дополнительно для надежности */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* Padding для safe area */
    /* ВАЖНО: padding-top НЕ применяем - Telegram header уже учитывает safe area сверху */
    /* ВАЖНО: padding-bottom НЕ применяем к wrapper - MainButton находится поверх контента */
    padding-top: 0 !important; /* Убрано - Telegram header уже учитывает safe area сверху */
    padding-bottom: 0 !important; /* Убрано - MainButton находится поверх, не нужен padding */
    padding-left: var(--tg-safe-area-inset-left) !important;
    padding-right: var(--tg-safe-area-inset-right) !important;
    /* ВАЖНО: transform НЕ переопределяем - остается адаптивным из debug-responsive.js */
    /* transform будет установлен через JavaScript для адаптивности */
    /* ВАЖНО: margin остается адаптивным (0 auto из медиа-запроса) - не переопределяем */
    /* margin: 0 auto !important; - НЕ устанавливаем, чтобы сохранить адаптивность */
    position: relative !important;
    /* ВАЖНО: min-height должен быть 100vh для правильной прокрутки, НЕ auto! */
    /* min-height: 100vh уже установлен выше, НЕ переопределяем на auto */
    max-height: none !important;
    /* Убираем box-sizing issues */
    box-sizing: border-box !important;
    /* Сохраняем видимость */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    /* ВАЖНО: Убеждаемся, что wrapper не создает белую область внизу */
    background-color: #ffffff !important;
    /* ШИРИНА НЕ ПЕРЕОПРЕДЕЛЯЕТСЯ - остается адаптивной из медиа-запросов */
}

/* Telegram WebApp: main-container имеет auto высоту - контент может быть выше viewport */
/* ВАЖНО: Сохраняем адаптивность - не переопределяем ширину */
/* КРИТИЧНО: Так как все элементы внутри имеют position: absolute, контейнер не может растягиваться автоматически */
/* Поэтому используем min-height для обеспечения минимальной высоты контента */
body.tg-webapp .main-container {
    /* ВАЖНО: height: auto не работает с абсолютно позиционированными элементами */
    /* Используем min-height для обеспечения минимальной высоты */
    height: auto !important;
    /* ВАЖНО: min-height должен быть достаточным для всего контента */
    /* Используем большое значение, чтобы покрыть весь контент (примерно 5500px) */
    /* JavaScript установит точное значение после загрузки */
    min-height: 5500px !important; /* Примерная высота всего контента */
    max-height: none !important;
    position: relative !important;
    /* Убираем все ограничения */
    box-sizing: border-box !important;
    /* ВАЖНО: НЕ используем padding-bottom, так как это создает видимую белую область */
    /* Вместо этого используем margin-bottom на последнем элементе */
    padding-bottom: 0 !important;
    /* Убеждаемся, что контейнер отображается */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* ШИРИНА НЕ ПЕРЕОПРЕДЕЛЯЕТСЯ - остается адаптивной из медиа-запросов */
}

/* ВАЖНО: Переопределяем min-height в конце файла для максимального приоритета */
body.tg-webapp .main-container {
    min-height: 5500px !important;
}

/* Telegram WebApp: Убираем белое пространство над MainButton */
/* MainButton уже учитывает safe area insets, поэтому не нужен дополнительный padding */
body.tg-webapp .main-container::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: -1 !important;
}

/* Убеждаемся, что последняя секция проекта имеет отступ снизу для MainButton */
/* Используем margin-bottom вместо padding-bottom на контейнере, чтобы избежать белой области */
body.tg-webapp .main-container .project-section-7 {
    margin-bottom: var(--tg-content-bottom-padding, calc(60px + env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: 0 !important;
}

/* Также применяем к последнему элементу контейнера на случай, если структура изменится */
body.tg-webapp .main-container > *:last-child {
    margin-bottom: var(--tg-content-bottom-padding, calc(60px + env(safe-area-inset-bottom, 0px))) !important;
    padding-bottom: 0 !important;
}

/* Telegram WebApp: Убираем белое пространство над MainButton */
/* MainButton уже учитывает safe area insets, поэтому не нужен дополнительный padding */
/* ВАЖНО: НЕ убираем margin-bottom у последней секции - он нужен для отступа от MainButton */
/* margin-bottom будет установлен через правило для последнего элемента выше */
body.tg-webapp .project-section-7 {
    padding-bottom: 0 !important;
    /* margin-bottom НЕ убираем - он устанавливается правилом для последнего элемента */
}

/* Убираем белое пространство, которое может появляться из-за высоты контейнера */
/* ВАЖНО: padding-bottom убран, используем margin-bottom на последнем элементе */
body.tg-webapp .main-container {
    margin-bottom: 0 !important;
    /* Убеждаемся, что контейнер не создает лишнее пространство с белым фоном */
    background: transparent !important;
}

/* ВАЖНО: Убираем белое пространство, которое может появляться из-за safe area insets */
/* MainButton в Telegram Web App уже учитывает safe area, поэтому не нужен padding-bottom */
body.tg-webapp .main-wrapper::after {
    display: none !important;
    content: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: -1 !important;
    position: static !important;
}

/* Убираем любые белые области с высоким z-index, которые могут перекрывать MainButton */
/* ВАЖНО: z-index должен быть низким, чтобы MainButton был поверх */
body.tg-webapp .main-wrapper {
    z-index: 1 !important;
    /* Убеждаемся, что wrapper не создает белую область внизу */
    background-clip: padding-box !important;
}

body.tg-webapp .main-container {
    z-index: 1 !important;
    /* Убеждаемся, что контейнер не создает белую область */
    background-clip: padding-box !important;
    /* КРИТИЧНО: Финальное переопределение min-height для обеспечения правильной высоты */
    /* Это должно быть в самом конце файла для максимального приоритета */
    min-height: 5500px !important;
    height: auto !important;
}

/* Убеждаемся, что MainButton всегда поверх контента (Telegram управляет этим, но на всякий случай) */
body.tg-webapp {
    z-index: 0 !important;
}

/* Дополнительная защита: убираем любые псевдоэлементы, которые могут создавать белую область */
body.tg-webapp .main-wrapper::before,
body.tg-webapp .main-container::before {
    display: none !important;
    content: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: -1 !important;
    position: static !important;
}