:root {
    --bg-color: #0a0e0b; 
    --sidebar-bg: #0d1410;
    --accent-color: #c5a47e; 
    --text-primary: #ffffff;
    --text-secondary: #8a958e;
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Montserrat', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--body-font);
    display: flex;
}

nav {
    width: 280px; height: 100vh;
    background: var(--sidebar-bg);
    position: fixed; padding: 3rem 2rem;
    display: flex; flex-direction: column;
    border-right: 1px solid rgba(197, 164, 126, 0.1);
    z-index: 100;
}

.brand {
    font-family: var(--heading-font); font-size: 1.6rem;
    color: var(--accent-color); text-decoration: none;
    margin-bottom: 4rem; letter-spacing: 2px; font-weight: bold;
}

nav ul { list-style: none; }
nav ul li { margin-bottom: 1.5rem; }
nav ul li a {
    text-decoration: none; color: var(--text-secondary);
    font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 2px; transition: 0.3s;
}
nav ul li a:hover, nav ul li a.active { color: var(--accent-color); padding-left: 8px; }

main { margin-left: 280px; width: calc(100% - 280px); }

.hero-banner {
    height: 45vh; position: relative;
    display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden; background: #000;
}

.hero-banner img {
    position: absolute; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.4;
}

.hero-content { position: relative; z-index: 10; padding: 0 10%; }
.hero-content h1 { font-family: var(--heading-font); font-size: 2.8rem; color: var(--accent-color); line-height: 1.2; }

.content-container { padding: 5rem 10%; max-width: 1200px; }

.text-section h2, .text-section h3 {
    font-family: var(--heading-font); color: var(--accent-color);
    margin: 2.5rem 0 1.5rem 0; font-size: 2.2rem; border-left: 3px solid var(--accent-color);
    padding-left: 1.5rem;
}

.text-section p {
    margin-bottom: 1.8rem; line-height: 2;
    color: var(--text-primary); text-align: justify; font-weight: 300;
}

.img-row { display: flex; gap: 2rem; margin: 3rem 0; }
.img-row img { width: 50%; height: 400px; object-fit: cover; border-radius: 4px; filter: grayscale(30%); }

.glow-title {
    font-family: var(--heading-font); font-size: 5rem;
    background: linear-gradient(to right, #fff, var(--accent-color));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-align: center; margin-bottom: 2rem;
}

.cool-btn {
    background: transparent; border: 1px solid var(--accent-color);
    color: var(--accent-color); padding: 1.2rem 3rem;
    font-size: 0.9rem; letter-spacing: 4px; cursor: pointer;
    transition: 0.4s; width: 100%;
}
.cool-btn:hover { background: var(--accent-color); color: #000; box-shadow: 0 0 20px rgba(197, 164, 126, 0.3); }

@media (max-width: 1024px) {
    body { flex-direction: column; }
    nav { width: 100%; height: auto; position: relative; }
    main { margin-left: 0; width: 100%; }
    .img-row { flex-direction: column; }
    .img-row img { width: 100%; }
}