/* Подключение современных киберспортивных шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700;800&family=Montserrat:wght@700;800;900&display=swap');

body {
    background-color: #0a0a0f;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Montserrat', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Эффект телевизионного/цифрового шума на фоне */
.noise-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Абстрактный паттерн шестиугольников (гексагоны) */
.hex-pattern {
    background-image: url('data:image/svg+xml,%3Csvg width="40" height="69.282" viewBox="0 0 40 69.282" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 69.282L0 57.735V34.641l20-11.547 20 11.547v23.094L20 69.282zm0-46.188L4.019 32.321v18.453L20 60.019l15.981-9.245V32.321L20 23.094zM20 23.094L0 11.547V-11.547l20-11.547 20 11.547v23.094L20 23.094zm0-46.188L4.019-13.856v18.453L20 13.842l15.981-9.245v-18.453L20-23.094z" fill="%237c3aed" fill-opacity="0.03" fill-rule="evenodd"/%3E%3C/svg%3E');
}

/* Неоновое свечение текста */
.text-glow-purple {
    text-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
}

.text-glow-blue {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.text-glow-pink {
    text-shadow: 0 0 15px rgba(236, 72, 153, 0.6);
}

/* Киберспортивные карточки со скошенными углами (clip-path) */
.cyber-card {
    background: linear-gradient(145deg, #12121a 0%, #0a0a0f 100%);
    border: 1px solid #2d2d3d;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    transition: all 0.3s ease;
    position: relative;
}

.cyber-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7c3aed, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-card:hover {
    border-color: #7c3aed;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.15);
}

.cyber-card:hover::before {
    opacity: 1;
}

/* Агрессивные кнопки */
.cyber-btn {
    position: relative;
    background: transparent;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    display: inline-block;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    border: 1px solid #7c3aed;
    background-color: rgba(124, 58, 237, 0.1);
    transition: all 0.3s ease;
    z-index: 1;
    cursor: pointer;
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #7c3aed, #ec4899);
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.cyber-btn:hover {
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border-color: transparent;
}

.cyber-btn:hover::before {
    opacity: 1;
}

/* Инпуты форм */
.cyber-input {
    background: #12121a;
    border: 1px solid #2d2d3d;
    color: #fff;
    padding: 0.85rem 1.25rem;
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.cyber-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    background: #1a1a2e;
}

/* Ссылки в меню */
.nav-link {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px #3b82f6;
}

.nav-link:hover {
    color: #3b82f6;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.nav-link:hover::after {
    width: 100%;
}

/* Эффект глитча при наведении на заголовки */
.glitch-hover:hover {
    animation: glitch-anim 0.2s linear infinite;
    text-shadow: 2px 0px #ec4899, -2px 0px #3b82f6;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 1px)
    }

    40% {
        transform: translate(-1px, -1px)
    }

    60% {
        transform: translate(2px, 1px)
    }

    80% {
        transform: translate(1px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

.gradient-text {
    background: linear-gradient(to right, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Вспомогательные классы для Clip-path */
.clip-path-polygon {
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

/* Подключение современных киберспортивных шрифтов */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700;800&family=Montserrat:wght@700;800;900&display=swap');

body {
    background-color: #0a0a0f;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Montserrat', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Эффект телевизионного/цифрового шума на фоне */
.noise-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}

/* Абстрактный паттерн шестиугольников (гексагоны) */
.hex-pattern {
    background-image: url('data:image/svg+xml,%3Csvg width="40" height="69.282" viewBox="0 0 40 69.282" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20 69.282L0 57.735V34.641l20-11.547 20 11.547v23.094L20 69.282zm0-46.188L4.019 32.321v18.453L20 60.019l15.981-9.245V32.321L20 23.094zM20 23.094L0 11.547V-11.547l20-11.547 20 11.547v23.094L20 23.094zm0-46.188L4.019-13.856v18.453L20 13.842l15.981-9.245v-18.453L20-23.094z" fill="%237c3aed" fill-opacity="0.03" fill-rule="evenodd"/%3E%3C/svg%3E');
}

/* Неоновое свечение текста */
.text-glow-purple {
    text-shadow: 0 0 15px rgba(124, 58, 237, 0.6);
}

.text-glow-blue {
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
}

.text-glow-pink {
    text-shadow: 0 0 15px rgba(236, 72, 153, 0.6);
}

/* Киберспортивные карточки со скошенными углами (clip-path) */
.cyber-card {
    background: linear-gradient(145deg, #12121a 0%, #0a0a0f 100%);
    border: 1px solid #2d2d3d;
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    transition: all 0.3s ease;
    position: relative;
}

.cyber-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #7c3aed, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-card:hover {
    border-color: #7c3aed;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.15);
}

.cyber-card:hover::before {
    opacity: 1;
}

/* Агрессивные кнопки */
.cyber-btn {
    position: relative;
    background: transparent;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1rem 2.5rem;
    display: inline-block;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    border: 1px solid #7c3aed;
    background-color: rgba(124, 58, 237, 0.1);
    transition: all 0.3s ease;
    z-index: 1;
    cursor: pointer;
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #7c3aed, #ec4899);
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.cyber-btn:hover {
    color: #fff;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.5);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    border-color: transparent;
}

.cyber-btn:hover::before {
    opacity: 1;
}

/* Инпуты форм */
.cyber-input {
    background: #12121a;
    border: 1px solid #2d2d3d;
    color: #fff;
    padding: 0.85rem 1.25rem;
    width: 100%;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
}

.cyber-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    background: #1a1a2e;
}

/* Ссылки в меню */
.nav-link {
    position: relative;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2px;
    background: #3b82f6;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px #3b82f6;
}

.nav-link:hover {
    color: #3b82f6;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.nav-link:hover::after {
    width: 100%;
}

/* Эффект глитча при наведении на заголовки */
.glitch-hover:hover {
    animation: glitch-anim 0.2s linear infinite;
    text-shadow: 2px 0px #ec4899, -2px 0px #3b82f6;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(-2px, 1px)
    }

    40% {
        transform: translate(-1px, -1px)
    }

    60% {
        transform: translate(2px, 1px)
    }

    80% {
        transform: translate(1px, -2px)
    }

    100% {
        transform: translate(0)
    }
}

.gradient-text {
    background: linear-gradient(to right, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Вспомогательные классы для Clip-path */
.clip-path-polygon {
    clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
}

/* Скрытие скроллбара для карусели */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}