/* Базовые переменные и настройки */
:root {
    --accent: #00f2ff;
    --dark: #0a0a0a;
    --dark-alt: #141414;
    --light: #f5f5f5;
    --text-muted: #888888;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

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

body {
    font-family: 'Inter', sans-serif;
    background: var(--dark);
    color: var(--light);
    line-height: 1.6;
}

h1, h2, h3, h4 { font-family: 'Syncopate', sans-serif; font-weight: 700; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.py-xl { padding: 150px 0 100px 0; } /* Универсальный отступ для внутренних страниц */

/* --- UI Элементы --- */
.tag {
    color: var(--accent);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1rem;
}

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 15px 30px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease;
    border: none;
}

.btn-primary { background: var(--accent); color: var(--dark); }
.btn-primary:hover { background: #fff; }
.btn-secondary { background: transparent; border: 1px solid var(--glass-border); color: var(--light); }
.btn-secondary:hover { background: var(--glass); }

/* --- Навигация --- */
.glass-nav {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(10, 10, 10, 0.8);
    border-bottom: 1px solid var(--glass-border);
}

.logo { font-family: 'Syncopate', sans-serif; font-weight: 700; text-decoration: none; color: var(--light); font-size: 1.5rem; }
.logo span { color: var(--accent); }

.nav-links a { 
    text-decoration: none; 
    color: var(--light); 
    margin-left: 2rem; 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    transition: 0.3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

/* --- Footer --- */
footer {
    border-top: 1px solid var(--glass-border);
    padding: 40px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dark-alt);
}
footer p { color: var(--text-muted); font-size: 0.8rem; }
footer .socials a { color: var(--light); text-decoration: none; margin-left: 15px; font-size: 0.8rem; text-transform: uppercase; }

/* --- Главная страница --- */
.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    align-items: center;
}
.hero-text { padding: 0 10%; }
.hero-text h1 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.1; margin: 1rem 0 2rem 0; }
.hero-text p { color: var(--text-muted); margin-bottom: 2rem; font-size: 1.1rem; }
.hero-btns { display: flex; gap: 15px; }
.hero-visual { height: 100%; overflow: hidden; position: relative; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(80%) contrast(120%); opacity: 0.7; }

/* --- Страница О нас --- */
.about-header { margin-bottom: 4rem; }
.about-header h1 { font-size: clamp(2rem, 3.5vw, 3.5rem); line-height: 1.1; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 80px; }
.story-image img { width: 100%; border-radius: 4px; filter: grayscale(50%); }
.story-text h2 { margin-bottom: 1.5rem; }
.story-text p { margin-bottom: 1.5rem; color: var(--text-muted); font-size: 1.1rem; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; border-top: 1px solid var(--glass-border); padding-top: 60px; }
.value-card .num { font-family: 'Syncopate'; color: var(--accent); font-size: 0.9rem; }
.value-card h3 { margin: 15px 0; }
.value-card p { color: var(--text-muted); font-size: 0.95rem; }

/* --- Страница Проектов --- */
.filter-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 20px;}
.filter-btn { background: transparent; border: 1px solid var(--glass-border); color: var(--light); padding: 10px 20px; cursor: pointer; margin-right: 10px; transition: 0.3s; }
.filter-btn:hover { border-color: var(--light); }
.filter-btn.active { background: var(--accent); color: var(--dark); border-color: var(--accent); }
.projects-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.project-item { position: relative; overflow: hidden; height: 400px; background: var(--dark-alt); border-radius: 4px; }
.project-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; opacity: 0.6; filter: grayscale(50%); }
.project-item:hover img { transform: scale(1.05); opacity: 0.3; filter: grayscale(0%); }
.p-info { position: absolute; bottom: 30px; left: 30px; transform: translateY(20px); opacity: 0; transition: 0.4s ease; }
.project-item:hover .p-info { transform: translateY(0); opacity: 1; }
.p-info h3 { margin-bottom: 5px; }
.p-info p { color: var(--accent); font-size: 0.8rem; text-transform: uppercase; }

/* --- Страница Контактов --- */
.contact-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; }
.input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
select, input, textarea { width: 100%; padding: 20px; background: var(--glass); border: 1px solid var(--glass-border); color: var(--light); margin-bottom: 20px; font-family: 'Inter', sans-serif; outline: none; transition: 0.3s; }
select:focus, input:focus, textarea:focus { border-color: var(--accent); background: rgba(255,255,255,0.1); }
.contact-info-side .info-block { margin-bottom: 40px; }
.contact-info-side h4 { color: var(--accent); text-transform: uppercase; font-size: 0.7rem; margin-bottom: 10px; }
.contact-info-side p, .contact-info-side a { color: var(--text-muted); text-decoration: none; display: block; margin-bottom: 8px; font-size: 0.95rem; }
.contact-info-side a:hover { color: var(--light); }

/* --- Адаптивность --- */
@media (max-width: 768px) {
    .hero-split, .story-grid, .contact-split { grid-template-columns: 1fr; }
    .hero-visual { height: 40vh; order: -1; }
    .hero-text { padding: 10% 5%; text-align: center; }
    .hero-btns { justify-content: center; }
    .nav-links { display: none; /* Для простоты на мобильных скрываем меню в этом статичном макете */ }
    .input-group { grid-template-columns: 1fr; }
}