/* Базовый сброс */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #080c14;
    color: #f1f5f9;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Утилиты шрифтов */
.font-heading  { font-family: 'Tektur', sans-serif; }
.font-mono-label { font-family: 'JetBrains Mono', monospace; }

/* Центрирующий контейнер — работает независимо от Tailwind CDN */
.wrap {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Скроллбар */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #080c14; }
::-webkit-scrollbar-thumb { background: #1e293b; }
::-webkit-scrollbar-thumb:hover { background: #22c55e; }

/* Hero — сетка */
.hero-bg {
    position: relative;
    background-color: #080c14;
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    overflow: hidden;
}

/* Скан-линии */
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.07) 3px,
        rgba(0, 0, 0, 0.07) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Затухание сетки снизу */
.hero-bg::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, transparent, #080c14);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* Glitch-эффект */
.glitch {
    position: relative;
    display: block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Tektur', sans-serif;
    font-weight: 800;
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
}

.glitch::before {
    color: #22c55e;
    animation: glitch-a 6s infinite;
}

.glitch::after {
    color: #f43f5e;
    animation: glitch-b 6s infinite;
}

@keyframes glitch-a {
    0%, 78%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
    80%  { clip-path: inset(8%  0 72% 0); transform: translate(-4px); }
    82%  { clip-path: inset(48% 0 32% 0); transform: translate(3px);  }
    84%  { clip-path: inset(72% 0 6%  0); transform: translate(-2px); }
    86%  { clip-path: inset(100% 0 0 0); transform: none; }
}

@keyframes glitch-b {
    0%, 83%, 100% { clip-path: inset(100% 0 0 0); transform: none; }
    85%  { clip-path: inset(33% 0 42% 0); transform: translate(4px);  }
    87%  { clip-path: inset(62% 0 18% 0); transform: translate(-3px); }
    89%  { clip-path: inset(100% 0 0 0); transform: none; }
}

/* Появление секций при скролле */
.fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.10s; }
.fade-in-delay-2 { transition-delay: 0.22s; }
.fade-in-delay-3 { transition-delay: 0.36s; }