/* ПЛАВНЫЙ СКРОЛЛ */
html { 
    scroll-behavior: smooth; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #000; font-family: 'Inter', sans-serif; color: white; overflow-x: hidden; }

/* HERO */
.hero { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; }
#bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: -1; }
.content h1 { font-size: clamp(1.8rem, 8vw, 4.2rem); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px; font-weight: 700; }
.occupation { font-size: 1rem; letter-spacing: 0.5em; font-weight: 300; text-transform: uppercase; margin-bottom: 30px; }
.subtitle { font-size: 0.85rem; color: #bbb; margin-bottom: 40px; letter-spacing: 1px; }

/* КНОПКИ С АНИМАЦИЕЙ */
.button-container { display: flex; gap: 15px; justify-content: center; }
.btn { 
    padding: 12px 28px; 
    text-decoration: none; 
    font-weight: 700; 
    border: 1px solid white; 
    color: white; 
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Плавная анимация */
    font-size: 0.7rem; 
    letter-spacing: 2px; 
    display: inline-block;
}

.btn-primary { background: white; color: black; }

/* Эффект при наведении */
.btn:hover { 
    transform: translateY(-5px); /* Кнопка приподнимается */
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); 
}

.btn-primary:hover { background: #f0f0f0; }
.btn-outline:hover { background: white; color: black; }

/* СЕТКА ПОРТФОЛИО */
.portfolio-section { padding: 100px 5%; }
.section-title { text-align: center; font-size: 1.8rem; letter-spacing: 8px; margin-bottom: 60px; text-transform: uppercase; font-weight: 300; }
.portfolio-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 240px; 
    grid-auto-flow: dense; 
    gap: 20px; 
    max-width: 1300px; 
    margin: 0 auto; 
}

.portfolio-item { position: relative; background: #0a0a0a; overflow: hidden; cursor: pointer; }
.portfolio-item.vertical { grid-row: span 2; } /* Вертикальное видео на 2 строки */

.preview-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: 0.7s; }
.portfolio-item:hover .preview-video { opacity: 1; transform: scale(1.03); }
.item-info { position: absolute; bottom: 15px; left: 15px; pointer-events: none; }
.item-info h3 { font-size: 0.85rem; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 1px; }
.item-info p { font-size: 0.6rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* ФУТЕР */
.site-footer { padding: 50px 20px; background: #000; border-top: 1px solid #111; text-align: center; }
.footer-brand { font-size: 1.1rem; letter-spacing: 0.3em; margin-bottom: 4px; font-weight: 700; }
.footer-tagline { font-size: 0.7rem; color: #666; letter-spacing: 0.5em; margin-bottom: 30px; text-transform: uppercase; }
.footer-info .city { font-size: 0.9rem; letter-spacing: 0.4em; font-weight: 700; margin-bottom: 5px; }
.footer-info .limit { font-size: 0.65rem; color: #444; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px;}

.footer-contacts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.f-link { color: #fff !important; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }
.f-link:hover { opacity: 0.6; }
.footer-copy { font-size: 0.55rem; color: #333; text-transform: uppercase; letter-spacing: 1px; }

/* МОДАЛКИ */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.97); z-index: 9999; justify-content: center; align-items: center; }
.modal-content { width: 90%; max-width: 1000px; aspect-ratio: 16/9; }
.contact-box { background: #050505; padding: 40px; border: 1px solid #111; text-align: center; position: relative; width: 90%; max-width: 350px; }
.contact-item { text-decoration: none !important; color: white !important; display: flex; flex-direction: column; margin-bottom: 15px; }
.contact-item span { font-size: 0.6rem; color: #555; text-transform: uppercase; }
.contact-item strong { font-size: 1rem; }
.close-modal, .close-contacts { position: absolute; top: 15px; right: 20px; color: white; font-size: 25px; cursor: pointer; opacity: 0.5; }

/* АДАПТАЦИЯ */
@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { 
    .hero { padding: 15px; height: 85vh; }
    #bg-video { width: calc(100% - 30px); height: calc(100% - 30px); left: 15px; top: 15px; border-radius: 12px; }
    .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; } 
    .portfolio-item.vertical { grid-row: span 1; height: 320px; }
}