/* Стили, специфичные только для главной страницы (index.php) */

header.hero {
    height: 100vh;
    background: linear-gradient(rgba(24, 22, 21, 0.8), rgba(24, 22, 21, 0.95)),
                url('../images/background.jpg') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}
header.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    max-width: 850px;
    text-transform: uppercase;
}
header.hero h1 span { color: var(--amber-bright); }
header.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    max-width: 650px;
    margin-bottom: 40px;
}

.about-section { padding: 100px 0; background-color: var(--bg-alt); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-text h2 { font-size: 2.2rem; color: var(--amber-bright); margin-bottom: 20px; text-transform: uppercase; }
.about-text p { color: var(--text-muted); margin-bottom: 20px; }
.about-img {
    width: 100%;
    height: 400px;
    background: url('../images/background.jpg') no-repeat center center/cover;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.features-section { padding: 90px 0; background-color: var(--bg-alt); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; text-align: center; }
.feature-item i { font-size: 2.8rem; color: var(--amber-bright); margin-bottom: 20px; }
.feature-item h4 { font-size: 1.3rem; margin-bottom: 10px; text-transform: uppercase; }
.feature-item p { color: var(--text-muted); }

.social-section { padding: 100px 0; text-align: center; background-color: var(--bg-main); }
.social-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 35px; flex-wrap: wrap; }
.social-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 35px; border-radius: 50px; text-decoration: none;
    color: #fff; font-weight: 600; transition: opacity 0.3s;
}
.social-btn.tiktok { background: #000000; border: 1px solid #fff; }
.social-btn.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-btn:hover { opacity: 0.85; }
.social-btn.facebook { background: #1877F2; }

@media (max-width: 768px) {
    .about-grid { grid-template-columns: 1fr; text-align: center; }
    header.hero h1 { font-size: 2rem; }
    header.hero img { width: 100%; height: auto; }
}
@media (max-width: 600px) {
    .section-title {
        font-size: 1.6rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .section-subtitle {
        font-size: 0.95rem;
    }
}