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

body {
    background-color: #368AFF;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }
.nav-item {
    text-decoration: none;
    display: block;
}




/* I. СЕКЦИЯ : СИНЯЯ */
.section-1 {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* I.I подсекция : выбор планеты */
.subsection-1-1 { width: 100%; }



/* I.I / 0. лого контейнер */
#kosmolab-logo-desktop {
    position: relative;
    width: 100%;
    height: 20vw;
    overflow: hidden;
    flex-shrink: 0;
}

/* I.I / 0.1 картинка внутри десктопного лого */
#kosmolab-logo-desktop img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top left;
    display: block;
}





/* I.I / 1. область под лого космолаб */
.workspace-wrapper {
    position: relative;
    width: 100vw;
    height: 60vw;
    display: flex;
    justify-content: center;
}

/* I.I / 1.1 крулая обводка планет */
.circle-layer {
    position: absolute;
    width: 55vw;
    z-index: 1;
    margin-left: 7vw;
}
.circle-layer img {
    width: 100%;
    height: auto;
    display: block;
}


/* I.I / 1.2 планеты */
.planet-layer {
    position: absolute;
    width: 55vw;
    z-index: 2;
    margin-left: 7vw;
    top: 25%;
    transform: translateY(-25%);
    pointer-events: none;
}
.planet-img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.planet-img.active { opacity: 1; }



/* I.I / правый сайдбар */
.sidebar-left {
    position: absolute;
    left: 2vw;
    top: 20vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 1.5vw; 
}

/* I.I / 2. сообщения */
.message-box {
    background-color: #4891FF;
    border-radius: 1.5vw; 
    width: 21vw; 
    padding: 1.5vw;
}
.message-content {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

/* I.I / 2.1 основной текст соо */
.message-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    line-height: 1.3;
    text-transform: uppercase;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* I.I / 2.2 перегородка */
.divider {
    width: 50%;
    height: 0.09vw;
}

/* I.I / 2.3 футер текст соо */
.message-footer {
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    line-height: 1.3;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* I.I / 2.4 цвет элементов */
.variant-black { color: #000000; }
.variant-black .divider { background-color: #000000; }

.variant-white { color: #FFFFFF; }
.variant-white .divider { background-color: #FFFFFF; }




/* I.I / 3. перегородка между соо и кнопками */
.sidebar-divider {
    width: 21vw;
    height: 0.09vw;
    background-color: #FFFFFF;
    margin: 4.5vw 0;
}



/* I.I / 4. кнопочки */
.planet-switcher {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.planet-btn {
    width: 21vw;
    padding: 2vw 0;
    border: none;
    border-radius: 1.5vw;

    font-family: 'Roboto Mono', monospace;
    font-weight: 400; 
    font-size: 1.6vw;
    text-transform: uppercase;
    
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    color: #76ADFF; 

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* I.I / 4.0 состояние : активная (вжатая) */
.planet-btn.active {
    background-color: #8FC2FF;
    color: #FFFFFF;
    box-shadow: 
        inset  0.15vw  0.15vw 0.3vw #6092CE, 
        inset -0.15vw -0.15vw 0.3vw #A9D4F9;
}

/* I.I / 4.0 состояние : неактивная (выпуклая) */
.planet-btn {
    background-color: #4891FF;
    box-shadow: 
        -0.2vw -0.2vw 0.3vw #4BAAFF, 
         0.15vw  0.15vw 0.4vw #116BE7;
}

/* I.I / 4.0 ховер для текста неактивной кнопочки */
.planet-btn:not(.active):hover {
    color: #FFFFFFCC;
}



/* I.I / правый сайдбар */
.sidebar-right {
    position: absolute;
    right: 2vw;
    top: 20vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

/* I.I / 6. навигация */
.nav-box {
    border: 0.09vw solid #87BBFF;
    border-radius: 1.5vw;
    width: 13vw;
    padding: 1.5vw 1vw;
    display: flex;
    justify-content: center;
}
.nav-content {
    display: flex;
    flex-direction: column;
    gap: 1vw; 
    align-items: center;
    text-align: center;
    width: 100%;
}
.nav-item {
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    line-height: 1.3;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}

/* I.I / 6.0 цвета текстов */
.title-black { color: #000000; }
.active-white { color: #FFFFFF; }
.inactive-blue { color: #87BBFF; }
.selected-display { color: #FFFFFF; }

/* I.I / 6.0 перегородки */
.nav-divider {
    width: 90%;
    height: 0.09vw;
    background-color: #87BBFF;
}

/* I.I / 6.1 превьюшка планеты */
.nav-planet-preview {
    position: relative;
    width: 9vw;
    height: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-preview-img {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.nav-preview-img.active { opacity: 1; }



/* I.I / 7. граф */
.graph-container {
    width: 13vw;
    height: 30vw; 
    overflow: hidden;
    border-radius: 1.5vw;
    background-color: #4891FF;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.graph-video {
    width: 32vw; 
    object-fit: cover;
    border-radius: 3vw;
    transform: rotate(90deg);
    position: absolute;
}





/* I.II / 0. слайдер */
.subsection-1-2 {
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
    overflow: visible;
    padding: 1.5vw 0 2vw;
}

/* I.II / 0.1 canvas liquid слой */
.slider-metaballs-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: block;

    filter: url('#goo');
    background: transparent;
}

/* I.II / 1. обертка слайдеров */
.sliders-wrapper {
    width: 95vw;
    display: flex;
    flex-direction: column;
    gap: 2.2vw;
    position: relative;
    z-index: 3;
}

/* I.II / 2. заголовки */
.slider-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.6vw;
    color: #FFFFFF;
    text-transform: uppercase;
    width: 12vw;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* I.II / 2.1 маленькие подписи */
.slider-texts {
    position: absolute;
    width: 100%;
    top: -0.3vw;
    display: flex;
    justify-content: space-between;
    pointer-events: none;

    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 0.9vw;
    color: #2661B2;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* I.II / 3. строки с ползунками */
.slider-row {
    display: flex;
    align-items: center;
    gap: 4vw;
    position: relative;
}

.slider-control {
    flex-grow: 1;
    position: relative;
}

/* I.II / 3.1. контейнер строки */
.slider-track-container {
    position: relative;
    width: 100%;
    height: 5vw;
    display: flex;
    align-items: center;
}

/* I.II / 3.2. черная линия */
.slider-line {
    position: absolute;
    width: 100%;
    height: 0.09vw;
    background-color: #000000;
    z-index: 1;
}

/* I.II / 3.3 — ползунок */
.slider-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 20vw;
    z-index: 4;
    cursor: pointer;
    touch-action: none;
    
    transition: left 0s ease-out; 
}
.slider-thumb.is-animating {
    transition: left 0.4s ease-out;
}

/* I.II / 3.3.1. синяя точка */
.blue-dot {
    width: 2.5vw;
    height: 2.5vw;
    background-color: #368AFF;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

/* I.II / 3.3.2. черные точки */
.black-dot {
    width: 1vw;
    height: 1vw;
    background-color: #000000;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

/* I.II / 3.3.3. белый кружок */
.white-halo {
    width: 7vw;
    height: 7vw;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}










/* II. СЕКЦИЯ : ВНЕШНИЕ ПАРАМЕТРЫ */
.section-2 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 7vw 0 6vw;
    background-color: #368AFF; 
}

.section-2-content {
    width: 95vw;
    background-color: #FFF1DD;
    border-radius: 2vw;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 3vw;
}




/* II.I подсекция : цвет */
.subsection-2-1 {
    width: 100%;
    min-height: 42vw;
    padding: 3.5vw 3.5vw 0;
    position: relative;
}



/* II.I / 0. рамка & заголовок */
.outer-params-frame {
    position: relative;
    width: 100%;
}

/* II.I / 0.1 заголовок */
.orange-section-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;

    margin: 0;
    padding: 0 2.2vw;
    background-color: #FFF1DD;
    color: #FF6D2A;

    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 1.6vw;
    line-height: 1;
    text-transform: uppercase;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* II.I / 0.2 контейнер рамки */
.param-frame-container {
    position: relative;
    width: 100%;
    min-height: 37vw;

    padding: 0 0 0 4.5vw;
}

/* II.I / 0.2.1 svg рамка */
.frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    
    object-fit: fill;
    display: block;
    pointer-events: none;
    z-index: 1;
}

/* II.I / 0.2.2 лэйаут внутри рамки */
.color-layout {
    --color-gap: 4vw;

    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--color-gap);
}



/* II.I / 1. левый сайдбар */
.color-sidebar {
    width: max-content;
    padding-top: 4vw;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

/* II.I / 1.0 название цвета + hex */
.color-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    margin-bottom: 8vw;
}
.color-hex,
.color-name {
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    font-size: 1.6vw;
    line-height: 1;
    text-transform: uppercase;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.color-hex { color: #000000; }
.color-name { color: #FF6D2A; }



/* II.I / 2. цвета rgb */
.rgb-stack {
    display: flex;
    flex-direction: column;
    gap: 1.8vw;
}
.rgb-box {
    width: 7vw;
    min-height: 4vw;
    padding: 1.35vw 1.8vw;
    background-color: #FFE6C9;
    border-radius: 1.5vw;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2vw;
}

.rgb-letter,
.rgb-value {
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    line-height: 1.3;
    text-transform: uppercase;
    color: #000000;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/* II.I / 3. контейнер перегородки и слайдера */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: var(--color-gap);
    padding-top: 3.8vw;
}

/* II.I / 3.1. перегородка */
.color-v-divider {
    width: 0.09vw;
    height: 29vw;
    background-color: #FF6D2A;
    flex-shrink: 0;
}

/* II.I / 3.2. контейнер слайдера */
.color-slider-track {
    position: relative;
    width: 8vw;
    height: 29vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* II.I / 3.2.1. цветные плашки */
.color-pill {
    width: 4vw;
    height: 13vw;
    border-radius: 4vw;
    flex-shrink: 0;
}
.pill-blue { background-color: #368AFF; }
.pill-orange { background-color: #FF6D2A; }



/* II.I / 3.2.2. линия + точки */
.color-slider-line-wrapper {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* II.I / 3.2.3. линия */
.color-slider-line {
    position: absolute;
    left: 50%;
    top: 2vw;
    bottom: 2vw;
    width: 0.09vw;
    background-color: #000000;
    transform: translateX(-50%);
}

/* II.I / 3.2.4. контейнер точек */
.color-slider-thumb-group {
    position: absolute;
    inset: 0;
}

/* II.I / 3.2.5. смол крайние точки */
.small-edge-dot {
    position: absolute;
    left: 50%;
    width: 1vw;
    height: 1vw;
    background-color: #000000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.small-edge-dot.top { top: 2vw; }
.small-edge-dot.bottom { top: calc(100% - 2vw); }

/* II.I / 3.2.6. биг бегунок */
.main-color-thumb {
    position: absolute;
    left: 50%;
    top: calc(100% - 2vw);
    width: 2.4vw;
    height: 2.4vw;
    background-color: #000000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    cursor: grab;
    touch-action: none;
}
.main-color-thumb.is-dragging { cursor: grabbing; }
.main-color-thumb:focus-visible {
    outline: 0.14vw solid #000000;
    outline-offset: 0.25vw;
}

/* перемещение слайдера */
.main-color-thumb { transition: top 0s ease-out; }
.main-color-thumb.is-animating { transition: top 0.4s ease-out; }




/* II.I / 4. биг цветной кружочек */
.color-preview-center {
    position: absolute; 
    
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 30vw; 
    height: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* II.I / 4.1. обертка свг */
.planet-guide-wrapper {
    position: absolute;
    width: 28vw;
    height: 28vw;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.planet-guide-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* II.I / 4.2. биг кружок */
.main-planet-sphere {
    width: 23vw;
    height: 23vw;
    background-color: #FF6D2A; 
    border-radius: 50%;
    position: relative;
    z-index: 1;
}




/* II.I / 5. правый сайдбар */
.color-info-sidebar {
    width: 21vw;
    margin-left: 32vw;
    padding-top: 3.8vw;
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

/* II.I / 5.1 соо инструкция */
.message-box.color-msg {
    background-color: #FFE6C9;
    width: 100%;
    border-radius: 1.5vw;
    padding: 1.5vw;
}
.color-msg .message-text { color: #000000; }
.color-divider { background-color: #FF6D2A; }
.color-msg .message-footer { color: #000000; }
.color-msg .footer-label { color: #FF6D2A;  }

/* II.I / 5.1 блок hsb */
.hsb-status-row {
    background-color: #FFE6C9;
    border-radius: 1.5vw;
    padding: 1.5vw 1.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hsb-item {
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    color: #FF6D2A;
    text-transform: uppercase;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* II.I / плавная анимашка смена цвета */
.main-planet-sphere, 
.color-name, 
.js-dynamic-divider, 
.js-dynamic-label, 
.hsb-item,
.color-v-divider {
    transition: background-color 0.4s ease, color 0.4s ease;
}




/* II.II / подсекция : набор */
.subsection-2-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}



/* II.II /  0. соо */
.message-box.kit-msg {
    background-color: #FFE6C9;
    width: 24.3vw; 
    border-radius: 1.5vw;
    padding: 1.5vw;
    
    margin-top: -11vw; 

    align-self: flex-end;
    margin-right: 3.5vw;
}
.kit-msg .message-text { color: #000000; }
.kit-msg .footer-label { color: #FF6D2A; }
.section-2 {
    flex-direction: column;
    align-items: center;
    min-height: auto; 
    height: auto;
}



/* II.II / 2.1 контейнер кнопочек */
.kit-grid {
    display: flex;
    flex-direction: row; 
    justify-content: center; 
   
    gap: 1.5vw;
    width: 100%;
    padding: 0 3.5vw; 
    margin-top: 4vw;

    box-sizing: border-box; 
}
.kit-btn {
    width: 21vw; 
    padding: 2vw 0; 
    border: none;
    border-radius: 1.5vw;

    font-family: 'Roboto Mono', monospace;
    font-weight: 400; 
    font-size: 1.6vw;
    text-transform: uppercase;
    
    cursor: pointer;
    
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    color: #FF6D2A; 

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* II.II / 2.2 cостояние: выпуклая */
.kit-btn {
    background-color: #FFE6C9;
    box-shadow: 
        -0.2vw -0.2vw 0.3vw #FFF7EB, 
         0.15vw  0.15vw 0.4vw #FFC79F;
}

/* II.II / 2.3 состояние: вжатая */
.kit-btn.active {
    background-color: #FFF3E0;
    box-shadow: 
        inset  0.15vw  0.15vw 0.3vw #FFD0A4, 
        inset -0.15vw -0.15vw 0.3vw #FFFFFF;
    color: #FFC59E; 
}

/* II.II / 2.4 ховер текста */
.kit-btn:not(.active):hover {
    color: #FFC59E;
}



/* II.II / 3. контейнер планетки + набора */
.kit-workspace {
    display: flex;
    width: 100%;
    padding: 2vw 3.5vw;
    box-sizing: border-box;
}

/* II.II / 3.1 контейнер набора */
.kit-box-container {
    position: relative;
    width: 46vw;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kit-box-svg {
    width: 100%;
    height: auto;
}


/* II.II / 3.2 контейнер предметов */
.kit-items-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.kit-item {
    position: absolute;

    width: 100%;
    height: auto;
    left: 0;
    top: 0;

    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.1s ease, transform 0.1s ease;
}
.kit-item.is-visible { opacity: 1; }

.js-kit-tools {
    z-index: 5;
    width: 16vw;
    top: 15%;
    left: 12%;
}
.js-kit-manual {
    z-index: 3;
    width: 15vw;
    top: 13.5%;
    left: 53.5%;
}
.js-kit-core {
    z-index: 4;
    width: 14.6vw;
    top: 54%;
    left: 13.5%;
}
.js-kit-tubes {
    z-index: 6;
    width: 16vw;
    top: 53.3%;
    left: 52.5%;
}


/* II.II / 3.3 контейнер планеты */
.kit-planet-container {
    position: relative;
    display: flex;

    width: 40vw;
    height: 40vw;
    margin-top: 4vw;

    justify-content: center;
    align-items: center;
}

/* II.II / 3.3.1 боксик */
.kit-planet-frame-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

/* II.II / 3.3 планетка */
.kit-planet-result-img {
    width: 35vw;
    height: auto;
    z-index: 1;
}



/* II.II / 4. кнопка отправки */
.kit-final-action {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 3.5vw; 
    margin-top: 1.5vw;
    padding-bottom: 2vw;
    box-sizing: border-box;
}
.js-send-planet { width: 100%; background-color: #FFF1DD; }

/* /* II.II / 4.1 состояние : вжатая */
.js-send-planet.active {
    background-color: #FFEDD7;
    box-shadow: 
        inset  0.15vw  0.15vw 0.3vw #ffd7b2, 
        inset -0.15vw -0.15vw 0.3vw #FFFFFF;
    color: #FFC59E;
}





/* II.II / 5.оверлэй затемнение */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.overlay.is-visible {
    display: flex;
    animation: fadeInBg 0.4s ease forwards;
}


/* II.II / 5.1 поп-ап */
.popup-container {
    position: relative;
    opacity: 0;
}
.overlay.is-visible .popup-container {
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
}
.overlay.is-closing .popup-container {
    animation: fadeDown 0.3s ease forwards;
}

/* II.II / 5.2 соо внутри поп-апа */
.popup-msg {
    position: relative;
    background-color: #FFF1DD !important; 
    width: auto !important;
    padding: 4vw !important;
    border-radius: 2.5vw;
    box-sizing: border-box;
}

/* II.II / 5.3 внутр рамка */
.inner-border {
    position: absolute;
    top: 1.6vw;
    left: 1.6vw;
    right: 1.6vw;
    bottom: 1.6vw;
    border: 0.14vw solid #FF6D2A;
    border-radius: 1.6vw;
    pointer-events: none;
}

/* II.II / 5.4 крестик */
.popup-close {
    position: absolute;
    top: -1.2vw;
    right: -1.2vw;
    width: 3.2vw;
    height: 3.2vw;
    background-color: #FF6D2A;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 0;
}
.close-icon {
    font-size: 2.5vw;
    color: #FFFFFF;
    line-height: 1;
    font-family: 'Roboto Mono', monospace;

    margin-top: -0.4vw;
    
    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* II.II / 5.5 текст + перегородка */
.popup-msg .message-text { 
    color: #000000; 
    font-size: 1.6vw;
    margin: 0;
}
.popup-msg .color-divider { 
    background-color: #FF6D2A; 
    width: 40%; 
    height: 0.14vw; 
    margin: 0.8vw 0;
}

/* II.II / 5.6 футер */
.popup-msg .message-footer {
    font-size: 1.6vw;
    color: #FF6D2A;
}
.popup-msg .footer-label, 
.popup-msg .footer-number { 
    color: #FF6D2A; 
}

/* II.II / 5.7 анимашки поп-апа */
@keyframes fadeInBg {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.4); }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes fadeOutBg {
    from { background-color: rgba(0, 0, 0, 0.4); }
    to { background-color: rgba(0, 0, 0, 0); }
}
@keyframes fadeDown {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}





/* III. СЕКЦИЯ : ФУТЕР */
.site-footer {
    background-color: #FF6D2A; 
    width: 95vw; 
    margin: auto auto 3vw auto; 
    margin-top: -3vw;
    
    border-radius: 2.5vw;
    padding: 1.6vw; 
    box-sizing: border-box;
    
    display: block; 
}
.footer-row {
    display: flex;
    align-items: baseline;
    color: #FFFFFF;
    width: 100%;
}

/* III. / 1. белая рамка */
.footer-inner {
    border: 0.1vw solid #FFFFFF;
    border-radius: 1.6vw;
    padding: 2vw 2vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
}

/* III. / 2.1 левый текст */
.text-mono {
    font-family: 'Roboto Mono', monospace;
    font-size: 1vw;
    letter-spacing: 0.05em;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.uppercase { text-transform: uppercase; }

/* III. / 2.2 много много точечек */
.dots {
    flex-grow: 1;
    border-bottom: 0.15vw dotted #FFFFFF;
    margin: 0 1vw;
}

/* III. / 2.3 правый текст */
.text-helvetica {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1vw;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* III. / 2.4 биг текст 3-я строка */
.row-large {
    justify-content: space-between;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.6vw;
    text-transform: uppercase;

    /* стиль шрифта для mac/ios */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}