/* =========================================================
   GLOBAL CSS — TILDA
   Общие стили сайта
   ========================================================= */


/* =========================================================
   01. БАЗОВЫЕ НАСТРОЙКИ
   ========================================================= */

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

body {
    margin: 0;
}

img {
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   02. ЦВЕТА
   ========================================================= */

:root {

    --accent: #FFEC00;

    --text-white: #FFFFFF;

    --text-light: #E9E9E9;

    --text-muted: #D8D8D8;

}


/* =========================================================
   03. ОБЩИЕ ССЫЛКИ / КНОПКИ
   ========================================================= */

.btn-yellow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--accent);

    text-decoration: none;

    font-weight: 500;

    transition: .3s ease;

}

.btn-yellow:hover {

    color: var(--accent);

}


.btn-yellow .arrow {

    display: inline-block;

    transition: .3s ease;

}


.btn-yellow:hover .arrow {

    transform: translateX(5px);

}


.btn-white {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #FFFFFF;

    text-decoration: none;

    font-weight: 500;

    transition: .3s ease;

}


.btn-white:hover {

    color: var(--accent);

}


.btn-white .arrow {

    transition: .3s ease;

}


.btn-white:hover .arrow {

    transform: translateX(5px);

}


/* =========================================================
   04. ЖЁЛТОЕ СТЕКЛО
   ========================================================= */

.glass-yellow {

    background:
        linear-gradient(
            135deg,
            rgba(255,236,0,.11),
            rgba(255,236,0,.05)
        );

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,236,0,.14);

    border-radius: 18px;

    transition: .35s ease;

}


@media (hover: hover) {

    .glass-yellow:hover {

        background:
            linear-gradient(
                135deg,
                rgba(255,236,0,.17),
                rgba(255,236,0,.08)
            );

        border-color:
            rgba(255,236,0,.24);

        box-shadow:
            0 8px 28px
            rgba(255,236,0,.14);

    }

}


/* =========================================================
   05. ЖЁЛТАЯ ПОДСВЕТКА
   ========================================================= */

.yellow-glow {

    box-shadow:
        0 0 24px
        rgba(255,236,0,.12);

    transition: .35s ease;

}


@media (hover: hover) {

    .yellow-glow:hover {

        box-shadow:
            0 0 30px
            rgba(255,236,0,.18);

    }

}


/* =========================================================
   06. ЖЁЛТЫЕ ИКОНКИ
   ========================================================= */

.icon-yellow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

}


.icon-yellow svg {

    stroke: var(--accent);

    fill: none;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================================
   07. СТЕКЛЯННАЯ ПАНЕЛЬ
   ========================================================= */

.glass-panel {

    background:
        linear-gradient(
            135deg,
            rgba(255,236,0,.08),
            rgba(255,236,0,.035)
        );

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255,236,0,.12);

    border-radius: 18px;

}


/* =========================================================
   08. ОТКЛЮЧЕНИЕ ЛИШНИХ АНИМАЦИЙ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}