:root {
    --bg-1: #03050f;
    --bg-2: #060a18;
    --bg-3: #0a1025;
    --bg-4: #11183a;

    --pink: rgba(217, 70, 239, 0.72);
    --pink-2: rgba(255, 120, 210, 0.42);

    --blue: rgba(77, 163, 255, 0.82);
    --blue-2: rgba(120, 190, 255, 0.46);

    --cyan: rgba(94, 231, 255, 0.34);
    --violet: rgba(126, 87, 255, 0.52);
}

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

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

body {
    position: relative;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 24%, var(--bg-3) 62%, var(--bg-4) 100%);
}

/* большие цветовые массы */
.bg,
.bg-2,
.bg-3 {
    position: absolute;
    inset: -20%;
    pointer-events: none;
}

/* основной цвет */
.bg {
    background:
        radial-gradient(circle at 10% 18%, rgba(217, 70, 239, 0.90) 0%, transparent 18%),
        radial-gradient(circle at 24% 72%, rgba(94, 231, 255, 0.58) 0%, transparent 18%),
        radial-gradient(circle at 52% 42%, rgba(126, 87, 255, 0.52) 0%, transparent 18%),
        radial-gradient(circle at 80% 18%, rgba(77, 163, 255, 0.94) 0%, transparent 20%),
        radial-gradient(circle at 86% 72%, rgba(217, 70, 239, 0.54) 0%, transparent 18%),
        radial-gradient(circle at 58% 84%, rgba(77, 163, 255, 0.42) 0%, transparent 20%);
    filter: blur(105px) saturate(165%);
    transform: scale(1.18);
    animation: bgFlowA 18s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* дополнительный сочный слой */
.bg-2 {
    background:
        radial-gradient(ellipse at 18% 34%, rgba(255, 120, 210, 0.30) 0%, transparent 16%),
        radial-gradient(ellipse at 38% 18%, rgba(77, 163, 255, 0.26) 0%, transparent 14%),
        radial-gradient(ellipse at 72% 34%, rgba(94, 231, 255, 0.18) 0%, transparent 16%),
        radial-gradient(ellipse at 66% 80%, rgba(126, 87, 255, 0.20) 0%, transparent 16%),
        radial-gradient(ellipse at 34% 82%, rgba(217, 70, 239, 0.18) 0%, transparent 15%);
    filter: blur(135px) saturate(185%);
    animation: bgFlowB 24s ease-in-out infinite alternate;
    opacity: 0.95;
}

/* широкие переливы */
.bg-3 {
    background:
        conic-gradient(
            from 180deg at 50% 50%,
            rgba(217, 70, 239, 0.00) 0deg,
            rgba(217, 70, 239, 0.14) 42deg,
            rgba(77, 163, 255, 0.00) 92deg,
            rgba(77, 163, 255, 0.16) 150deg,
            rgba(94, 231, 255, 0.00) 210deg,
            rgba(126, 87, 255, 0.12) 285deg,
            rgba(217, 70, 239, 0.00) 360deg
        );
    filter: blur(78px);
    animation: bgFlowC 28s ease-in-out infinite alternate;
    opacity: 0.85;
}

/* слои сетей / соединений */
body::before,
body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* тонкие диагональные сети */
body::before {
    background:
        repeating-linear-gradient(
            118deg,
            rgba(255,255,255,0.00) 0px,
            rgba(255,255,255,0.00) 18px,
            rgba(77,163,255,0.075) 19px,
            rgba(77,163,255,0.075) 20px,
            rgba(255,255,255,0.00) 22px,
            rgba(255,255,255,0.00) 52px
        ),
        repeating-linear-gradient(
            62deg,
            rgba(255,255,255,0.00) 0px,
            rgba(255,255,255,0.00) 24px,
            rgba(217,70,239,0.06) 25px,
            rgba(217,70,239,0.06) 26px,
            rgba(255,255,255,0.00) 28px,
            rgba(255,255,255,0.00) 64px
        );
    opacity: 0.42;
    filter: blur(0.2px);
    animation: networkShift 18s linear infinite;
}

/* световые трассы подключения */
body::after {
    background:
        linear-gradient(180deg, rgba(3,5,15,0.12), rgba(3,5,15,0.34)),
        radial-gradient(circle at center, rgba(255,255,255,0.02), transparent 36%),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.00) 0px,
            rgba(255,255,255,0.00) 54px,
            rgba(94,231,255,0.035) 55px,
            rgba(94,231,255,0.035) 56px,
            rgba(255,255,255,0.00) 58px,
            rgba(255,255,255,0.00) 118px
        );
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    opacity: 0.9;
}

/* центр */
.hero {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* текст */
.brand {
    position: relative;
    font-size: clamp(70px, 12vw, 188px);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: transparent;
    user-select: none;
}

/* жидкая заливка */
.brand::before {
    content: "L-line";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 18% 34%, #ffffff 0%, #ffe3f5 9%, transparent 22%),
        radial-gradient(circle at 34% 72%, #ff91db 0%, transparent 20%),
        radial-gradient(circle at 54% 28%, #8fc7ff 0%, transparent 18%),
        radial-gradient(circle at 72% 64%, #7ee9ff 0%, transparent 18%),
        radial-gradient(circle at 84% 36%, #d8b8ff 0%, transparent 18%),
        linear-gradient(
            115deg,
            #ffffff 0%,
            #ffd8ef 14%,
            #ff7fce 28%,
            #9ec8ff 50%,
            #7deaff 68%,
            #d4b6ff 84%,
            #ffffff 100%
        );

    background-size:
        180% 180%,
        150% 150%,
        170% 170%,
        170% 170%,
        170% 170%,
        260% 260%;

    background-position:
        0% 0%,
        100% 60%,
        40% 0%,
        100% 100%,
        60% 40%,
        0% 50%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 0 18px rgba(217, 70, 239, 0.22))
        drop-shadow(0 0 28px rgba(77, 163, 255, 0.22))
        drop-shadow(0 0 44px rgba(94, 231, 255, 0.10));

    animation: liquidPaint 7.5s ease-in-out infinite;
}

/* жидкий блик */
.brand::after {
    content: "L-line";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,0.00) 8%,
            rgba(255,255,255,0.34) 18%,
            rgba(255,255,255,0.00) 30%,
            rgba(255,255,255,0.00) 52%,
            rgba(255,255,255,0.12) 62%,
            rgba(255,255,255,0.00) 76%
        );

    background-size: 240% 240%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: screen;
    animation: glossMove 6.2s ease-in-out infinite;
    opacity: 0.92;
}

/* фон */
@keyframes bgFlowA {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1.16) rotate(0deg);
    }
    100% {
        transform: translate3d(2%, 2%, 0) scale(1.26) rotate(9deg);
    }
}

@keyframes bgFlowB {
    0% {
        transform: translate3d(1%, -2%, 0) scale(1.08) rotate(0deg);
    }
    100% {
        transform: translate3d(-2%, 2%, 0) scale(1.18) rotate(-8deg);
    }
}

@keyframes bgFlowC {
    0% {
        transform: translate3d(0, 0, 0) scale(1.02) rotate(0deg);
    }
    100% {
        transform: translate3d(1.5%, -1%, 0) scale(1.10) rotate(14deg);
    }
}

@keyframes networkShift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-40px, 24px, 0);
    }
}

/* текст */
@keyframes liquidPaint {
    0% {
        background-position:
            0% 0%,
            100% 60%,
            40% 0%,
            100% 100%,
            60% 40%,
            0% 50%;
        transform: scale(1);
    }
    25% {
        background-position:
            16% 10%,
            82% 74%,
            54% 8%,
            90% 88%,
            48% 52%,
            40% 50%;
    }
    50% {
        background-position:
            34% 18%,
            68% 88%,
            68% 18%,
            78% 76%,
            38% 66%,
            100% 50%;
        transform: scale(1.02);
    }
    75% {
        background-position:
            18% 10%,
            86% 70%,
            52% 6%,
            90% 90%,
            52% 48%,
            60% 50%;
    }
    100% {
        background-position:
            0% 0%,
            100% 60%,
            40% 0%,
            100% 100%,
            60% 40%,
            0% 50%;
        transform: scale(1);
    }
}

@keyframes glossMove {
    0% {
        background-position: 0% 50%;
        opacity: 0.58;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.95;
    }
    100% {
        background-position: 0% 50%;
        opacity: 0.58;
    }
}

@media (max-width: 700px) {
    .bg {
        filter: blur(90px) saturate(155%);
    }

    .bg-2 {
        filter: blur(120px) saturate(180%);
    }

    .bg-3 {
        filter: blur(70px);
    }

    body::after {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}