:root {
    --neon-cyan: #00f0ff;
    --bg-color: #050505;
    --card-bg: rgba(20, 20, 20, 0.7);
    --text-main: #e0e0e0;
    --font-head: 'Orbitron', sans-serif;
    --font-code: 'Share Tech Mono', monospace;
    --font-body: 'Rajdhani', sans-serif;
}

/* --- RESET & BASE --- */
html.lenis { height: auto; } 
.lenis.lenis-smooth { scroll-behavior: auto; } 
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } 
.lenis.lenis-stopped { overflow: hidden; } 
.lenis.lenis-scrolling iframe { pointer-events: none; }

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

body {
    background: radial-gradient(circle at 50% 50%, #151515 0%, #050505 100%); 
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden;
    font-size: 1vw; 
}

/* --- PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column;
}

.intro-sequence {
    position: absolute; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none;
}
.intro-word {
    position: absolute;
    font-family: var(--font-head);
    font-size: 5vw;
    font-weight: 900;
    color: #fff;
    opacity: 0;
    letter-spacing: 0.5vw;
    transform: scale(0.9);
    transition: 0.2s;
}
.intro-word.active { opacity: 1; transform: scale(1); text-shadow: 0 0 1vw rgba(0, 240, 255, 0.5); }

.loader-content { 
    width: 15vw; font-family: var(--font-code); color: var(--neon-cyan); 
    display: none; opacity: 0; transition: opacity 0.5s;
}
.loader-content.visible { display: block; opacity: 1; }

.loader-text { margin-bottom: 0.5vw; font-size: 0.8vw; letter-spacing: 0.1vw; }
.loader-bar { width: 100%; height: 2px; background: #333; position: relative; }
.loader-progress { width: 0%; height: 100%; background: var(--neon-cyan); transition: width 0.1s; box-shadow: 0 0 0.5vw var(--neon-cyan); }
.loader-percentage { margin-top: 0.3vw; text-align: right; font-size: 0.7vw; }

/* --- CURSOR --- */
.cursor {
    width: 0.4vw; height: 0.4vw; background: var(--neon-cyan);
    border-radius: 50%; position: fixed; pointer-events: none; z-index: 11111119999;
    transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; mix-blend-mode: difference;
}
.cursor-follower {
    width: 1.5vw; height: 1.5vw; border: 1px solid rgba(0, 240, 255, 0.5);
    border-radius: 50%; position: fixed; pointer-events: none; z-index: 1111119998;
    transform: translate(-50%, -50%); transition: transform 0.1s, width 0.3s, height 0.3s;
}
.cursor.active { width: 0px; height: 0px; }
.cursor-follower.active { width: 3vw; height: 3vw; background: rgba(0, 240, 255, 0.1); border-color: var(--neon-cyan); }

/* --- BACKGROUND FX --- */
.vignette {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, #000 130%);
    pointer-events: none; z-index: 8998; opacity: 0.5;
}
#bgCanvas { position: fixed; top: 0; left: 0; z-index: -1; opacity: 1; }

/* --- HEADER & NAV --- */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.5vw 3vw; position: fixed; width: 100%; top: 0; z-index: 100;
    mix-blend-mode: difference;
}
.header-logo { height: 2.5vw; filter: none; opacity: 1; }

/* NAV LINKS */
.nav-menu { display: flex; align-items: center; }
.nav-menu a {
    margin-left: 2vw; text-decoration: none; color: #fff; font-family: var(--font-code);
    font-size: 0.9vw; letter-spacing: 0.05vw; transition: 0.3s;
}
.nav-menu a.nav-active {
    color: var(--neon-cyan);
    text-shadow: 0 0 0.5vw var(--neon-cyan);
}
.nav-menu a:hover { color: var(--neon-cyan); text-shadow: 0 0 0.5vw var(--neon-cyan); }

.btn-contact { 
    border: 1px solid rgba(255,255,255,0.3); padding: 0.5vw 1vw; 
    transition: 0.3s;
}
.btn-contact:hover { 
    background: var(--neon-cyan); color: #000 !important; border-color: var(--neon-cyan); 
    box-shadow: 0 0 1vw var(--neon-cyan);
}

/* LANGUAGE SWITCHER */
.lang-switcher {
    display: flex; align-items: center; gap: 0.3vw;
    margin-right: auto; margin-left: 2vw; font-family: var(--font-code); z-index: 101;
}
.lang-btn {
    background: none; border: none; color: #666;
    font-family: var(--font-code); font-size: 0.9vw; cursor: pointer; transition: 0.3s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.active { color: #ffffff; font-weight: bold; }
.separator { color: #333; font-size: 0.8vw; }

/* MOBILE MENU */
.mobile-menu-btn { 
    display: none; width: 30px; height: 20px; flex-direction: column; 
    justify-content: space-between; cursor: pointer; z-index: 10001; 
}
.mobile-menu-btn .line { width: 100%; height: 2px; background: #fff; transition: 0.3s; }
.mobile-menu-btn.active .line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-btn.active .line:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active .line:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

.mobile-nav-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #050505; z-index: 9990; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.mobile-nav-overlay.active { transform: translateX(0); }
.mobile-nav-links { display: flex; flex-direction: column; text-align: center; gap: 30px; }
.m-link { 
    font-family: var(--font-head); font-size: 2.5rem; color: #444; 
    text-decoration: none; transition: 0.3s; 
}
.m-link:hover, .m-link.highlight-cyan { color: var(--neon-cyan); }
.m-link.active {
    color: var(--neon-cyan);
    border-left: 2px solid var(--neon-cyan);
    padding-left: 10px;
}

.mobile-lang-switch { margin-top: 50px; font-family: var(--font-code); color: #666; font-size: 1.2rem; }
.mobile-lang-switch span { cursor: pointer; padding: 0 10px; transition: 0.3s; }
.mobile-lang-switch span:hover { color: var(--neon-cyan); }

/* --- SECTIONS --- */
main { position: relative; width: 100%; overflow: hidden; }

section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5vw 8vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.hero.full-height { height: 100vh; }
.page-top-padding { padding-top: 15vw; }

/* --- HERO --- */
.hero-content { display: flex; flex-direction: column; align-items: center; z-index: 1;}
.hero-logo-img { width: 14vw; margin-bottom: 1.5vw; animation: float 6s ease-in-out infinite;}
@keyframes float { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-0.5vw);} }

.hacker-text {
    font-family: var(--font-head); font-size: 7vw; margin: 0.5vw 0;
    background: linear-gradient(90deg, #fff, #aaa); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 1.5vw rgba(255,255,255,0.15);
}
.subtitle { color: #666; font-size: 1.2vw; letter-spacing: 0.2vw; font-weight: 300; margin-top: 0.5vw;}

/* --- PORTFOLIO (INDEX) --- */
.section-title {
    font-family: var(--font-head); font-size: 3vw; color: #fff; margin-bottom: 3vw;
    border-left: 0.2vw solid var(--neon-cyan); padding-left: 1vw;
}
.highlight-cyan { color: var(--neon-cyan); text-shadow: 0 0 0.8vw rgba(0, 240, 255, 0.4); }

.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr)); gap: 3vw; margin-top: 2.5vw; }

.project-image-area { 
    width: 100%; height: 18vw; position: relative; overflow: hidden; 
    border: 1px solid #333; margin-bottom: 1vw; background: #0a0a0a;
}
.parallax-wrapper { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #444; font-family: var(--font-head); letter-spacing: 0.1vw; transition: 0.5s; font-size: 1.5vw;}
.pattern-1 { background: repeating-linear-gradient(45deg, #0a0a0a, #0a0a0a 10px, #111 10px, #111 20px); }
.pattern-2 { background-image: radial-gradient(#222 15%, transparent 16%); background-size: 1vw 1vw; background-color: #080808; }

.project-card { min-height: 25vw; }
/* .img-placeholder filter handled via overlay logic mostly, but keep for fallback */
.project-card:hover .img-placeholder { filter: brightness(1.2); color: var(--neon-cyan); }
.project-card:hover .project-image-area { border-color: var(--neon-cyan); }

/* --- OVERLAY FIX (MAKE IT CLICKABLE) --- */
.overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; 
    opacity: 0; transition: 0.3s; backdrop-filter: blur(2px); z-index: 20; 
    cursor: pointer; text-decoration: none;
}
.project-card:hover .overlay { opacity: 1; }

.view-btn { 
    border: 1px solid var(--neon-cyan); color: var(--neon-cyan); 
    padding: 0.8vw 2vw; font-family: var(--font-code); letter-spacing: 0.1vw; 
    text-decoration: none; font-weight: bold; background: rgba(0, 240, 255, 0.05); 
    font-size: 0.9vw;
}

.project-info h3 { font-family: var(--font-head); color: #fff; font-size: 1.6vw; }
.project-info p { color: #666; font-family: var(--font-code); font-size: 0.9vw; margin-top: 0.3vw; }

.project-img { width: 100%; height: 70%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.project-img.contain { object-fit: contain; padding: 2vw; background: #0a0a0a; }
.project-card:hover .project-img { transform: scale(1.1); }

/* --- ABOUT --- */
.about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3vw; align-items: center; margin-bottom: 4vw; }
.about-text-box { background: #0a0a0a; border: 1px solid #333; padding: 0; border-radius: 0.3vw; overflow: hidden; box-shadow: 0 0 1vw rgba(0,0,0,0.5); }
.terminal-header { background: #151515; padding: 0.5vw 0.8vw; display: flex; align-items: center; gap: 0.4vw; font-family: var(--font-code); font-size: 0.7vw; color: #888; border-bottom: 1px solid #333; }
.dot { width: 0.6vw; height: 0.6vw; border-radius: 50%; }
.red { background: #ff5f56; } .yellow { background: #ffbd2e; } .green { background: #27c93f; }
.terminal-body { padding: 1.5vw; font-family: var(--font-code); color: #ccc; line-height: 1.6; font-size: 1.1vw; }
.cmd-text { color: #fff; font-weight: bold; }
.blink-cursor { animation: blink 1s infinite; color: var(--neon-cyan); font-weight: bold; }

/* MOCKUP FRAME */
.tech-frame { position: relative; padding: 0.8vw; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.5); transition: 0.4s ease; overflow: hidden; }
.tech-frame:hover { border-color: var(--neon-cyan); box-shadow: 0 0 1.5vw rgba(0, 240, 255, 0.15); }
.mockup-img { width: 100%; height: auto; display: block; filter: grayscale(30%) contrast(1.1); transition: 0.5s; }
.tech-frame:hover .mockup-img { filter: grayscale(0%) contrast(1); transform: scale(1.02); }
.corner { position: absolute; width: 1vw; height: 1vw; border: 0.1vw solid var(--neon-cyan); pointer-events: none; transition: 0.3s; }
.c-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.c-br { bottom: 0; right: 0; border-left: none; border-top: none; }
.scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 0.1vw; background: rgba(0, 240, 255, 0.5); box-shadow: 0 0 0.5vw var(--neon-cyan); animation: scan 4s linear infinite; opacity: 0.5; pointer-events: none; }
@keyframes scan { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.features-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5vw; border-top: 1px solid #222; padding-top: 2vw; }
.feature-item h3 { color: var(--neon-cyan); margin-bottom: 0.8vw; font-family: var(--font-head); font-size: 1.3vw; }
.feature-item p { color: #888; line-height: 1.6; font-size: 0.95vw; }
.feature-item.border-left-right { border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); padding: 0 1.5vw;}
.highlight { color: #fff; font-weight: bold; }

/* --- SERVICES --- */
.services-section { background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.02)); }
.section-title-center { font-family: var(--font-head); font-size: 3vw; text-align: center; margin-bottom: 3vw; color: #fff; }
.cards-container { display: flex; gap: 1.5vw; flex-wrap: wrap; justify-content: center; }
.card { background: var(--card-bg); width: 20vw; padding: 0.1vw; position: relative; overflow: hidden; transition: 0.3s; min-width: 300px; }
.card:hover { transform: translateY(-0.5vw); box-shadow: 0 0.5vw 1.5vw rgba(0, 240, 255, 0.15); }
.card-content { background: #050505; padding: 2vw 1.5vw; height: 100%; display: flex; flex-direction: column; align-items: center;}
.card-icon { font-size: 2.5vw; color: var(--neon-cyan); margin-bottom: 1vw; font-family: var(--font-head); text-align: center; }
.card h3 { color: #fff; margin-bottom: 1.2vw; font-family: var(--font-head); text-align: center; font-size: 1.5vw; }
.card ul { list-style: none; color: #888; font-family: var(--font-code); line-height: 2; width: 100%; font-size: 1vw;}
.card ul li::before { content: '> '; color: var(--neon-cyan); margin-right: 0.3vw;}

/* --- FOOTER --- */
.footer-cta { text-align: center; padding: 5vw 0; border-top: 1px solid #222; }
.footer-cta h2 { font-family: var(--font-head); font-size: 2.5vw; color: #fff; margin-bottom: 2vw; }

.terminal-input-wrapper {
    display: inline-flex; align-items: center; 
    background: #000; border: 1px solid #333; 
    padding: 1vw 1.5vw; font-family: var(--font-code);
    width: 30vw; max-width: 500px;
    margin-bottom: 2vw;
}
.prompt { color: var(--neon-cyan); margin-right: 1vw; }
.terminal-input {
    background: transparent; border: none; color: #fff;
    width: 100%; font-family: var(--font-code); font-size: 1vw;
    outline: none;
}
.terminal-submit {
    background: transparent; border: none; color: var(--neon-cyan);
    font-family: var(--font-head); cursor: pointer; font-size: 1vw;
    margin-left: 1vw; transition: 0.3s;
}
.terminal-submit:hover { text-shadow: 0 0 10px var(--neon-cyan); }

.social-links { display: flex; justify-content: center; gap: 2vw; margin-top: 1vw; }
.social-link { color: #666; font-family: var(--font-code); text-decoration: none; font-size: 0.9vw; transition: 0.3s; }
.social-link:hover { color: #fff; }

.footer-bottom { text-align: center; padding: 1.5vw; color: #444; font-family: var(--font-code); font-size: 0.8vw; border-top: 1px solid #111; display: flex; justify-content: space-between; padding: 1.5vw 3vw;}
.status-indicator { display: flex; align-items: center; gap: 0.5vw; }
.status-dot { width: 0.5vw; height: 0.5vw; background: var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 0.5vw var(--neon-cyan); animation: blink 2s infinite; }
.blink { color: var(--neon-cyan); }
@keyframes blink { 50% { opacity: 0.5; } }

.simple-footer {
    text-align: center; padding: 2vw; border-top: 1px solid #111; color: #444; font-family: var(--font-code); font-size: 0.8vw;
}

.glitch-btn { display: inline-block; padding: 1vw 3vw; background: transparent; border: 1px solid #333; color: #fff; text-decoration: none; font-family: var(--font-head); font-size: 1.2vw; position: relative; overflow: hidden; margin-top: 1.5vw; transition: 0.3s; }
.glitch-btn:hover { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); box-shadow: 0 0 1vw rgba(0, 240, 255, 0.2); }

/* --- PROJECT PAGE STYLES --- */
.back-link, .close-project { color: #fff; text-decoration: none; font-family: var(--font-code); font-size: 1.1vw; border: 1px solid transparent; padding: 0.5vw 1vw; transition: 0.3s;}
.back-link:hover, .close-project:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); background: transparent; }

.project-hero { height: 70vh; display: flex; align-items: flex-end; padding: 0 8% 4vw; position: relative; border-bottom: 1px solid #222;}
.hero-bg-pattern { position: absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 50% 50%, #111, #000); z-index: -1; opacity: 0.3;}
.p-category { color: var(--neon-cyan); font-family: var(--font-code); margin-bottom: 0.8vw; display: block; letter-spacing: 0.1vw; font-size: 1vw;}
.p-title { font-family: var(--font-head); font-size: 5vw; line-height: 0.9; color: #fff; text-shadow: 0 0 20px rgba(0,0,0,0.5); }

.project-meta { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2vw 8%; border-bottom: 1px solid #222; }
.meta-item { display: flex; flex-direction: column; }
.meta-item .label { font-family: var(--font-code); color: #555; font-size: 0.8vw; margin-bottom: 0.3vw; }
.meta-item .value { font-family: var(--font-body); color: #fff; font-size: 1.2vw; }
.live-link { color: var(--neon-cyan); text-decoration: none; font-family: var(--font-code); border-bottom: 1px solid var(--neon-cyan); display: inline-block; width: max-content; font-size: 1vw;}

.project-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; padding: 3vw 8%; height: auto; }
.desc-col h3 { color: #fff; font-family: var(--font-head); margin-bottom: 1vw; font-size: 1.5vw; }
.desc-col p { color: #dcdcdc; line-height: 1.7; font-family: var(--font-body); font-size: 1.1vw; }

.next-project { padding: 5vw 0; text-align: center; background: #050505; }
.next-project p { color: #555; font-family: var(--font-code); margin-bottom: 0.5vw; font-size: 1vw;}
.next-link { font-family: var(--font-head); font-size: 4vw; color: #fff; text-decoration: none; transition: 0.3s; }
.next-link:hover { color: var(--neon-cyan); -webkit-text-stroke: 1px var(--neon-cyan); }

.reveal { opacity: 0; transform: translateY(50px); filter: blur(10px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); filter: blur(0); }

/* --- GRID GALLERY FOR PROJECT PAGE --- */
.project-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
    padding: 0 8% 3vw;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
    background: #0a0a0a;
    transition: 0.3s;
}
.grid-item:hover { border-color: var(--neon-cyan); }

/* MAIN SHOT (LANDSCAPE) */
.grid-item.main-shot {
    grid-column: 1 / -1; 
    height: 40vw; /* Standard cinematic height */
}

/* VERTICAL SHOTS (PHONE UI) - ИСПРАВЛЕНИЕ ОБРЕЗКИ */
.grid-item.vertical-shot {
    height: 50vw; /* Делаем ячейки выше */
}

.project-img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.grid-item:hover .project-img { transform: scale(1.05); }

/* ДЛЯ ВЕРТИКАЛЬНЫХ ФОТО ДЕЛАЕМ CONTAIN */
.vertical-shot .project-img {
    object-fit: contain; /* Чтобы фото влезло целиком */
    background: #0a0a0a; /* Фон, если пропорции не совпадут */
    padding: 1vw; /* Отступ внутри рамки */
}

/* SCROLL HINT */
.scroll-hint-left {
    position: absolute;
    bottom: 3vw;
    left: 8%;
    display: flex;
    align-items: center;
    gap: 1vw;
    font-family: var(--font-code);
    font-size: 0.8vw;
    color: #666;
    animation: fadeInUp 2s ease forwards 1s;
    opacity: 0;
}

.hint-line {
    width: 3vw;
    height: 1px;
    background: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.project-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #333, transparent);
    margin: 2vw 0;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    header { padding: 20px 30px; }
    body { font-size: 16px; }
    .p-title { font-size: 3rem; }
    .project-gallery-grid { grid-template-columns: 1fr; gap: 20px; }
    .grid-item.main-shot { height: 250px; }
    .grid-item.vertical-shot { height: 400px; } /* Выше для мобилки */
    .project-scroll-hint { font-size: 12px; bottom: 20px; }
    .scroll-line { width: 40px; }
    .next-link { font-size: 2.5rem; }
    .footer-bottom { flex-direction: column; gap: 10px; }
    .section-title { font-size: 2.5rem; border-width: 4px; padding-left: 15px; }
    .hero-logo-img { width: 180px; }
    .project-image-area { height: 250px; }
    .card { width: 100%; min-width: 0; }
    .card-content { padding: 40px 20px; }
    .card-icon { font-size: 2.5rem; }
    .card h3 { font-size: 1.5rem; }
    .card ul { font-size: 1rem; }
    .footer-cta h2 { font-size: 2rem; }
    .glitch-btn { font-size: 1.1rem; padding: 20px 40px; }
    .intro-word { font-size: 3rem; }
    .loader-content { width: 80%; }
    .project-divider { margin: 30px 0; }
    .terminal-input-wrapper { width: 90%; padding: 15px; }
    .terminal-input, .terminal-submit { font-size: 1rem; }
    .simple-footer { font-size: 12px; padding: 20px; }
    
    /* OVERLAY FIX FOR INDEX PAGE (MOBILE) */
    .overlay { opacity: 1; background: transparent; }
    .view-btn { background: rgba(0, 0, 0, 0.8); }
}

@media (hover: none) {
    .overlay { opacity: 1; background: transparent; }
    .view-btn { background: rgba(0,0,0,0.8); }
}

/* --- EXISTING STYLES... --- */

/* ... (Вставь это в конец файла style.css) ... */

/* --- CARD MORE BUTTON --- */
.card-btn-more {
    margin-top: auto;
    background: transparent;
    border: 1px solid #333;
    color: var(--neon-cyan);
    font-family: var(--font-code);
    padding: 0.5vw 1.5vw;
    cursor: pointer;
    font-size: 0.9vw;
    transition: 0.3s;
    text-transform: uppercase;
    align-self: center;
    margin-top: 1.5vw;
}

.card-btn-more:hover {
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 10px var(--neon-cyan);
    letter-spacing: 0.1vw;
}

/* --- MODAL STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background: #0a0a0a;
    border: 1px solid var(--neon-cyan);
    width: 40vw;
    min-width: 320px;
    padding: 2vw;
    position: relative;
    box-shadow: 0 0 2vw rgba(0, 240, 255, 0.15);
    transform: scale(0.9);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: 1vw; right: 1vw;
    color: #666;
    font-family: var(--font-code);
    cursor: pointer;
    font-size: 1vw;
    transition: 0.3s;
}
.modal-close:hover { color: #fff; }

.modal-header h2 {
    font-family: var(--font-head);
    color: #fff;
    margin-bottom: 1vw;
    font-size: 1.5vw;
}

.modal-progress-bar {
    width: 100%;
    height: 2px;
    background: #222;
    margin-bottom: 2vw;
}
.modal-progress-fill {
    width: 33%;
    height: 100%;
    background: var(--neon-cyan);
    transition: 0.3s;
    box-shadow: 0 0 5px var(--neon-cyan);
}

/* FORM STEPS */
.form-step { display: none; animation: fadeIn 0.5s; }
.form-step.active { display: block; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-step h3 {
    color: var(--neon-cyan);
    font-family: var(--font-code);
    margin-bottom: 1.5vw;
    font-size: 1.2vw;
}

/* OPTIONS GRID (Step 1) */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw;
    margin-bottom: 2vw;
}

.option-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid #333;
    color: #fff;
    padding: 1vw;
    font-family: var(--font-body);
    cursor: pointer;
    transition: 0.3s;
    text-align: center;
}
.option-btn:hover, .option-btn.selected {
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.1);
}

/* INPUTS (Step 2 & 3) */
.input-group { margin-bottom: 1.5vw; }
.input-group label {
    display: block;
    color: #888;
    font-family: var(--font-code);
    font-size: 0.8vw;
    margin-bottom: 0.5vw;
}
.neon-input {
    width: 100%;
    background: #050505;
    border: 1px solid #333;
    padding: 0.8vw;
    color: #fff;
    font-family: var(--font-code);
    font-size: 1vw;
    outline: none;
    transition: 0.3s;
}
.neon-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }

/* RADIO BUTTONS */
.radio-group {
    display: flex;
    gap: 2vw;
    margin-bottom: 2vw;
}
.radio-label {
    color: #fff;
    font-family: var(--font-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5vw;
}
.radio-label input { display: none; }
.radio-custom {
    width: 1vw; height: 1vw;
    border: 1px solid #666;
    display: inline-block;
    border-radius: 50%;
    position: relative;
}
.radio-label input:checked + .radio-custom {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
}
.radio-label input:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 0.5vw; height: 0.5vw;
    background: var(--neon-cyan);
    border-radius: 50%;
}

/* NAVIGATION BUTTONS */
.step-nav { display: flex; justify-content: space-between; margin-top: 2vw; }
.nav-btn {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 0.5vw 1.5vw;
    font-family: var(--font-head);
    cursor: pointer;
    transition: 0.3s;
}
.nav-btn.next { border-color: var(--neon-cyan); color: var(--neon-cyan); margin-left: auto;}
.nav-btn:hover { background: rgba(255,255,255,0.1); }
.nav-btn.next:hover { background: rgba(0,240,255,0.1); box-shadow: 0 0 10px var(--neon-cyan); }

.final-actions { text-align: center; margin-top: 2vw; }
.small-btn { padding: 0.8vw 2vw; font-size: 1vw; }

/* RESPONSIVE MODAL */
@media (max-width: 768px) {
    .modal-content { width: 90vw; padding: 30px; }
    .card-btn-more { font-size: 1rem; padding: 10px 20px; }
    .modal-close { font-size: 1.5rem; top: 15px; right: 15px; }
    .modal-header h2 { font-size: 1.5rem; }
    .form-step h3 { font-size: 1.2rem; }
    .option-btn { font-size: 1rem; padding: 15px; }
    .neon-input { font-size: 1rem; padding: 10px; }
    .radio-custom { width: 20px; height: 20px; }
    .radio-label input:checked + .radio-custom::after { width: 10px; height: 10px; }
    .nav-btn { font-size: 1rem; padding: 10px 20px; }
    .input-group label { font-size: 0.9rem; }
}

/* ...existing code... */

.final-actions {
    text-align: center;
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    gap: 1vw; /* Расстояние между кнопками */
}

.done-btn {
    background: #050505;
    border-color: #333;
    font-size: 1vw;
    padding: 0.8vw 2vw; 
}

.done-btn:hover {
    border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); box-shadow: 0 0 1vw rgba(0, 240, 255, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .final-actions { flex-direction: column; align-items: center; }
    .done-btn { font-size: 1rem; width: 100%; }
}

/* ...existing code... */

/* --- MODAL FINAL BUTTONS --- */
.final-actions {
    text-align: center;
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    gap: 1vw; 
    align-items: center; /* Центрируем по вертикали */
}

/* Общие стили для обеих кнопок, чтобы они были одинаковыми */
.final-actions .glitch-btn, 
.final-actions .done-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3vw;          /* Фиксированная высота */
    padding: 0 2vw;       /* Отступы по бокам */
    font-size: 1vw;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid;
    transition: 0.3s;
    margin-top: 0;        /* Убираем лишний маржин, если он был */
    line-height: 1;
}

/* Специфика для кнопки Glitch (Write Yourself) */
.final-actions .glitch-btn {
    background: transparent;
    border-color: #333;
    color: #fff;
}
.final-actions .glitch-btn:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.05);
}

/* Специфика для кнопки Done */
.final-actions .done-btn {
    background: #050505;
    border-color: #333;
    color: #fff;
    font-family: var(--font-head);
}
.final-actions .done-btn:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.05);
    box-shadow: 0 0 1vw rgba(0, 240, 255, 0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .final-actions { 
        flex-direction: column; 
        gap: 15px; 
    }
    
    .final-actions .glitch-btn, 
    .final-actions .done-btn { 
        width: 100%; 
        height: 50px;      /* Фиксированная высота для мобилок */
        font-size: 1rem; 
        padding: 0;
    }
}

/* ... (ВСТАВИТЬ В КОНЕЦ ФАЙЛА) ... */

/* --- SYSTEM NOTIFICATION (COOKIE) --- */
.sys-notification {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    width: 22vw;
    min-width: 300px;
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid #333;
    z-index: 20000;
    backdrop-filter: blur(10px);
    padding: 1.2vw;
    transform: translateY(150%); /* Скрыт вниз */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.sys-notification.active {
    transform: translateY(0);
}

/* Header: Red/Green Dot & Title */
.sys-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.8vw;
    border-bottom: 1px solid #222;
    padding-bottom: 0.5vw;
}

.sys-dot {
    width: 6px;
    height: 6px;
    background: var(--neon-cyan);
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 5px var(--neon-cyan);
    animation: blink 2s infinite;
}

.sys-title {
    font-family: var(--font-head);
    font-size: 0.7vw;
    letter-spacing: 1px;
    color: #666;
}

/* Body Text */
.sys-body p {
    font-family: var(--font-code);
    color: #aaa;
    font-size: 0.8vw;
    line-height: 1.4;
    margin-bottom: 1.2vw;
}

/* Actions Row */
.sys-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1vw;
}

.sys-btn {
    font-family: var(--font-code);
    font-size: 0.75vw;
    cursor: pointer;
    background: transparent;
    border: 1px solid;
    padding: 0.4vw 1vw;
    transition: 0.3s;
    text-transform: uppercase;
}

/* Кнопка DECLINE (Призрачная, серая) */
.sys-btn-ghost {
    border-color: #333;
    color: #555;
}
.sys-btn-ghost:hover {
    color: #888;
    border-color: #555;
}

/* Кнопка ACCEPT (Яркая, активная) */
.sys-btn-main {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    background: rgba(0, 240, 255, 0.05);
}
.sys-btn-main:hover {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* RESPONSIVE */
@media (max-width: 768px) {
    .sys-notification {
        width: 90%;
        bottom: 20px;
        right: 5%;
        padding: 20px;
    }
    .sys-title { font-size: 10px; }
    .sys-body p { font-size: 12px; margin-bottom: 20px; }
    .sys-btn { font-size: 12px; padding: 10px 15px; }
}