:root {
    --bg: #030303;
    --accent: #ff3b3b;
    --accent-glow: rgba(255, 59, 59, 0.5);
    --text: #ffffff;
    --text-dim: #888888;
    --header-bg: rgba(3, 3, 3, 0.85);
    --card-bg: rgba(10, 10, 10, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; overflow-x: hidden; }
body.locked { overflow: hidden; }

.white-hover-red { color: #ffffff; font-family: 'Inter', sans-serif; transition: color 0.3s ease; }
.white-hover-red:hover { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }

.splash-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--bg); z-index: 99999; display: flex; justify-content: center; align-items: center; transition: 0.4s; }
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.splash-logo { width: 120px; filter: drop-shadow(0 0 20px var(--accent-glow)); animation: pulse-glow 2s infinite ease-in-out; }
.splash-text { font-family: 'Syncopate', sans-serif; color: var(--accent); letter-spacing: 8px; font-size: 1rem; text-transform: uppercase; animation: pulse-opacity 1.5s infinite; }
@keyframes pulse-glow { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px var(--accent-glow)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 35px var(--accent)); } }
@keyframes pulse-opacity { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; }

#bg-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0.7; }
.scanlines { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9997; pointer-events: none; opacity: 0.15; background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 50%); background-size: 100% 4px; }
.vignette { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9998; pointer-events: none; background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.8) 150%); }
.noise-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; opacity: 0.03; background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E'); }

.cursor-dot, .cursor-trail { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: 999999; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cursor-trail { width: 30px; height: 30px; border: 1px solid var(--accent-glow); transition: width 0.2s, height 0.2s, background 0.2s; }
.cursor-trail.hovered { width: 50px; height: 50px; background: rgba(255, 59, 59, 0.1); border-color: var(--accent); }

header { position: fixed; top: 0; width: 100%; height: 55px; padding: 0 3%; display: flex; justify-content: space-between; align-items: center; background: var(--header-bg); backdrop-filter: blur(15px); z-index: 1000; transition: 0.4s; }
.header-left { display: flex; align-items: center; gap: 15px; }
.theme-toggle { background: transparent; border: 1px solid var(--accent); color: var(--accent); width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.theme-toggle:hover { background: var(--accent); color: var(--bg); box-shadow: 0 0 15px var(--accent-glow); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 35px; height: 35px; object-fit: contain; transition: 0.3s; }
.brand:hover img { transform: scale(1.1); filter: drop-shadow(0 0 10px var(--accent)); }
.brand-runes { font-family: 'Syncopate', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; display: inline-block; background: linear-gradient(to right, var(--text) 50%, var(--accent) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.3)); }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--text-dim); font-size: 0.7rem; text-transform: uppercase; font-weight: 700; letter-spacing: 2px; transition: 0.3s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--accent); transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 100px 20px 50px; z-index: 10; }
.hero h1 { font-family: 'Ruslan Display', cursive; font-size: clamp(3rem, 10vw, 8rem); color: var(--text); margin-bottom: 10px; letter-spacing: 5px; transition: 0.4s ease; }
.hero h1:hover { color: var(--accent); text-shadow: 0 0 25px var(--accent-glow); transform: scale(1.02); }
.hero-desc { max-width: 600px; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; margin-bottom: 40px; margin-top: 20px;}

.hero-buttons { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cta-btn { display: inline-block; background: var(--accent); color: #000 !important; font-family: 'Syncopate', sans-serif; font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; padding: 18px 45px; border: none; border-radius: 2px; text-decoration: none; box-shadow: 0 0 20px var(--accent-glow), inset 0 0 10px rgba(255,255,255,0.2); transition: 0.4s; }
.cta-btn:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 15px 30px var(--accent-glow); background: #ff4f4f; letter-spacing: 3px; }
.secondary-btn { display: inline-block; background: transparent; color: var(--text); font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; padding: 18px 35px; border: 1px solid var(--text-dim); border-radius: 2px; text-decoration: none; transition: 0.4s; }
.secondary-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); box-shadow: 0 5px 20px rgba(255, 59, 59, 0.15); }

/* --- СИСТЕМА: TERMINAL PRESENTATION --- */
.terminal-section { padding: 40px 10% 120px; position: relative; z-index: 10; max-width: 1300px; margin: 0 auto; }
.section-title { text-align: center; font-size: 1.5rem; margin-bottom: 50px; text-transform: uppercase; letter-spacing: 3px; }

.terminal-container { display: flex; gap: 40px; align-items: stretch; }
@media (max-width: 900px) { .terminal-container { flex-direction: column; } }

.terminal-list { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.term-item { padding: 25px 20px; background: rgba(10,10,10,0.5); border-left: 3px solid #333; font-family: 'Syncopate', sans-serif; font-size: 1rem; color: var(--text-dim); transition: all 0.3s ease; position: relative; overflow: hidden; }
.term-item span { color: #555; margin-right: 15px; font-weight: 900; transition: 0.3s; }
.term-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,59,59,0.1)); transition: left 0.4s ease; z-index: -1; }
.term-item:hover { border-left-color: var(--accent); color: #fff; transform: translateX(10px); background: rgba(20,20,20,0.8); }
.term-item:hover span { color: var(--accent); }
.term-item:hover::before { left: 0; }

.terminal-display { flex: 1.2; background: rgba(5,5,5,0.9); border: 1px solid rgba(255,59,59,0.2); border-radius: 4px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,0.8); overflow: hidden; }
.term-header { background: rgba(20,20,20,1); padding: 15px 20px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.term-dots { display: flex; gap: 8px; }
.term-dots span { width: 12px; height: 12px; border-radius: 50%; opacity: 0.8; }
.term-title { font-family: monospace; color: var(--text-dim); font-size: 0.85rem; letter-spacing: 1px; }

.term-body { padding: 40px 30px; font-family: monospace; color: var(--accent); font-size: 1.1rem; line-height: 1.8; text-shadow: 0 0 10px rgba(255,59,59,0.4); flex-grow: 1; display: flex; align-items: center; position: relative; }
.term-body::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: rgba(255,59,59,0.5); animation: terminal-scan 3s linear infinite; box-shadow: 0 0 15px var(--accent); opacity: 0.5; }
@keyframes terminal-scan { 0% { top: 0; } 100% { top: 100%; } }

/* --- СТРАНИЦА ПОДПИСОК (ЧИСТАЯ ЛЕВИТАЦИЯ, БЕЗ 3D ПРОКРУТКИ) --- */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; width: 100%; max-width: 1200px; margin: 40px auto; padding: 0 20px; }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.plan-card { 
    background: var(--card-bg); border: 1px solid rgba(255,255,255,0.05); padding: 40px 30px; border-radius: 4px; backdrop-filter: blur(10px); 
    position: relative; transition: transform 0.3s ease, border 0.3s, box-shadow 0.3s; 
    text-align: left; display: flex; flex-direction: column; animation: float-card 6s infinite ease-in-out; 
}
.plan-card:nth-child(2) { animation-delay: 1.5s; }
.plan-card:nth-child(3) { animation-delay: 3s; }
.plan-card:nth-child(4) { animation-delay: 4.5s; }

/* Красивое увеличение при наведении без желе-эффекта */
.plan-card:hover { animation-play-state: paused; z-index: 20; transform: scale(1.02); border-color: rgba(255,255,255,0.2); box-shadow: 0 15px 40px rgba(0,0,0,0.8); }

.plan-role-dot { width: 12px; height: 12px; border-radius: 50%; margin-bottom: 15px; box-shadow: 0 0 20px currentColor; }
.plan-title { font-family: 'Syncopate', sans-serif; font-size: 1.8rem; margin-bottom: 5px; text-shadow: 0 0 15px currentColor; }
.plan-price { font-size: 2rem; font-weight: 900; margin-bottom: 25px; color: var(--text); }
.plan-price span { font-size: 0.9rem; color: var(--text-dim); font-weight: 400; }
.plan-features { list-style: none; margin-bottom: 30px; flex-grow: 1; }
.plan-features li { margin-bottom: 12px; font-size: 0.85rem; color: var(--text); border-left: 2px solid var(--accent); padding-left: 10px; }
.plan-features li.locked-feature { color: #444; border-color: #333; text-decoration: line-through; }
.plan-card .cta-btn { width: 100%; text-align: center; font-size: 0.8rem; padding: 15px; transition: 0.3s; }

.support-container { max-width: 800px; margin: 0 auto; width: 100%; display: grid; gap: 40px; text-align: left; }
.support-form { background: var(--card-bg); padding: 40px; border-radius: 4px; border: 1px solid transparent; backdrop-filter: blur(10px); transition: 0.3s; }
.support-form:hover { border-color: var(--accent-glow); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.input-group { margin-bottom: 25px; }
.input-group label { display: block; font-family: 'Syncopate', sans-serif; font-size: 0.7rem; color: var(--accent); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; }
.input-group input, .input-group textarea { width: 100%; background: rgba(0,0,0,0.5); border: 1px solid var(--text-dim); padding: 15px; color: var(--text); font-family: 'Inter', sans-serif; border-radius: 2px; outline: none; transition: 0.3s; resize: none; }
.input-group input:focus, .input-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 15px rgba(255,59,59,0.2); background: rgba(0,0,0,0.8); }

.dashboard-card { background: var(--card-bg); padding: 50px 40px; border-radius: 4px; border: 1px solid rgba(255,59,59,0.1); backdrop-filter: blur(15px); text-align: center; max-width: 500px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.auth-buttons { display: flex; flex-direction: column; gap: 15px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: var(--text); border: 1px solid var(--text-dim); padding: 15px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; border-radius: 2px; transition: 0.3s; }
.auth-btn.discord:hover { border-color: #5865F2; background: #5865F2; color: #fff; box-shadow: 0 5px 15px rgba(88, 101, 242, 0.5); }
.auth-btn.google:hover { border-color: #db4437; background: #db4437; color: #fff; box-shadow: 0 5px 15px rgba(219, 68, 55, 0.5); }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; width: 100%; max-width: 900px; margin: 0 auto; }
.dash-card { background: var(--card-bg); padding: 30px; border-radius: 4px; border: 1px solid rgba(255,59,59,0.05); text-align: left; transition: 0.3s; }
.dash-title { font-family: 'Syncopate', sans-serif; color: var(--accent); font-size: 1rem; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 2px; }
.user-info { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.avatar { width: 50px; height: 50px; background: var(--text-dim); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; border-radius: 2px; }
.user-name { font-weight: 700; font-size: 1.1rem; color: var(--text); }
.user-id { font-size: 0.75rem; color: var(--text-dim); font-family: monospace; }
.dash-divider { border: none; height: 1px; background: rgba(255,255,255,0.05); margin: 20px 0; }
.plan-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-label { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; font-weight: 700; }
.plan-value { color: var(--accent); font-family: 'Syncopate', sans-serif; font-size: 0.9rem; font-weight: 900; }
.hidden { display: none !important; }

.btn-locked { background: #111 !important; color: #444 !important; border: 1px solid #222 !important; box-shadow: inset 0 0 15px #000 !important; cursor: not-allowed !important; pointer-events: none !important; }

.tweaker-card { background: var(--card-bg); padding: 50px 40px; border-radius: 4px; backdrop-filter: blur(15px); max-width: 700px; margin: 0 auto; text-align: center; transition: 0.4s; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position: relative; z-index: 10; border: 1px solid transparent; }
.tweaker-card:hover { border-color: var(--accent-glow); transform: translateY(-10px); box-shadow: 0 20px 50px rgba(255,59,59,0.15); }
.tweaker-title { font-family: 'Syncopate', sans-serif; color: var(--text); font-size: 2rem; margin-bottom: 15px; letter-spacing: 3px; }
.tweaker-title span { color: var(--accent); }
.tweaker-desc { font-size: 0.95rem; line-height: 1.7; margin-bottom: 35px; }

.server-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.stat-row { display: flex; justify-content: space-between; font-family: monospace; font-size: 0.9rem; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 5px; }
.network-graph { display: flex; align-items: flex-end; gap: 4px; height: 40px; margin-top: 15px; }
.network-graph .bar { flex: 1; background: var(--accent); opacity: 0.7; height: 10%; transition: height 0.3s ease; }