:root {
    --primary: #121212;
    --accent: #7A1E2C;
    --accent-hover: #5e1621;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--primary); background: #fff; line-height: 1.6; }

header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100; }
.container-nav { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.main-logo { height: 40px; }

nav ul { display: flex; list-style: none; gap: 20px; align-items: center; }
nav ul li a { text-decoration: none; color: var(--primary); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }
.btn-nav { border: 2px solid var(--accent); padding: 8px 15px; color: var(--accent) !important; }

.hero { background: var(--primary); color: white; text-align: center; padding: 100px 20px; }
.hero-logo { max-width: 200px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.hero h1 { font-size: 2.8rem; margin-bottom: 15px; }

.container { max-width: 1100px; margin: 0 auto; padding: 70px 20px; }
.section-title { text-align: center; margin-bottom: 50px; }
.section-title h2 { font-size: 2rem; text-transform: uppercase; border-bottom: 3px solid var(--accent); display: inline-block; padding-bottom: 10px; }

.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.brand-card { padding: 40px; border: 1px solid #eee; text-align: center; border-radius: 4px; transition: 0.3s; }
.brand-card:hover { border-color: var(--accent); transform: translateY(-5px); }
.brand-logo-container { height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.brand-img { max-height: 80px; max-width: 100%; object-fit: contain; }

.btn-primary { background: var(--accent); color: white; padding: 15px 35px; border: none; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.btn-primary:hover { background: var(--accent-hover); }

.bg-dark { background: var(--primary); color: white; }
.white h2 { color: white; border-color: var(--accent); }

.contact-form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.contact-form input, .contact-form select, .contact-form textarea { padding: 12px; background: #222; border: 1px solid #444; color: white; }

.success-box { border: 2px solid var(--accent); padding: 30px; text-align: center; }
.success-box h3 { color: var(--accent); margin-bottom: 10px; }

footer { background: #000; color: #555; padding: 30px; text-align: center; font-size: 0.8rem; }

@media (max-width: 768px) { nav ul { display: none; } }