/* Основные стили остаются прежними */
:root {
    --gradient-color-1: #c3e4ff;
    --gradient-color-2: #6ec3f4;
    --gradient-color-3: #eae2ff;
    --gradient-color-4: #b9beff;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#gradient-canvas {
    width: 100%;
    height: 100%;
    position: fixed; /* Изменено на fixed для стабильности на мобильных */
    top: 0;
    left: 0;
    z-index: -1;
    --gradient-color-1: #c3e4ff;
    --gradient-color-2: #6ec3f4;
    --gradient-color-3: #eae2ff;
    --gradient-color-4: #b9beff;
    background-color: #c3e4ff; /* Резервный цвет, пока грузится JS */
}

/* Изменения для контента */
.content-wrapper {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    /* На мобильных центрируем вертикально, а не прижимаем к низу */
    align-items: center; 
    padding: 0 20px; /* Отступы по бокам, чтобы текст не касался краев */
    pointer-events: none;
    box-sizing: border-box;
}

.welcome-text {
    color: #4a4a4a;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    /* Используем адаптивный размер: 8% от ширины экрана, но не более 2.5rem */
    font-size: clamp(1.5rem, 8vw, 2.5rem); 
    font-weight: 300;
    text-align: center; /* Центрируем текст внутри строки */
    opacity: 0;
    animation: fadeIn 2s ease-out forwards;
}

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