:root {
    --blue: #1e3a5f;
    --blue-light: #2c4f7c;
    --gold: #c9a96e;
    --white: #ffffff;
    --gray: #f5f5f5;
    --dark: #1a1a1a;
}

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

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

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

/* HEADER */
header {
    background: var(--blue);
    padding: 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.header-top {
    background: rgba(0,0,0,0.2);
    padding: 8px 0;
}

.header-top-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.header-top a { color: var(--gold); text-decoration: none; font-weight: 600; }

.header-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.logo-monogram {
    width: 50px;
    height: 50px;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold);
}

.logo-text {
    color: var(--white);
}

.logo-text .name {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
}

.logo-text .sub {
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    opacity: 0.9;
    margin-top: 2px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 35px;
}

nav a {
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 400;
    position: relative;
    padding: 5px 0;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.3s;
}

nav a:hover::after { width: 100%; }

.estim-cta {
    background: var(--gold);
    color: var(--blue) !important;
    padding: 10px 25px !important;
    font-weight: 700 !important;
}

.estim-cta::after { display: none !important; }

.mobile-menu { display: none; font-size: 24px; color: var(--white); cursor: pointer; }

/* HERO */
.hero {
    margin-top: 120px;
    height: 75vh;
    min-height: 500px;
    max-height: 650px;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 40%, #0f1f35 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M0 600 L0 450 L40 450 L40 380 L80 380 L80 420 L120 420 L120 300 L160 300 L160 500 L200 500 L200 350 L240 350 L240 450 L280 450 L280 320 L320 320 L320 480 L360 480 L360 400 L400 400 L400 520 L440 520 L440 280 L480 280 L480 400 L520 400 L520 340 L560 340 L560 460 L600 460 L600 380 L640 380 L640 500 L680 500 L680 310 L720 310 L720 430 L760 430 L760 350 L800 350 L800 490 L840 490 L840 330 L880 330 L880 420 L920 420 L920 360 L960 360 L960 480 L1000 480 L1000 390 L1040 390 L1040 500 L1080 500 L1080 340 L1120 340 L1120 450 L1160 450 L1160 370 L1200 370 L1200 490 L1240 490 L1240 320 L1280 320 L1280 410 L1320 410 L1320 350 L1360 350 L1360 480 L1400 480 L1400 390 L1440 390 L1440 600Z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom center;
    opacity: 0.6;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-100%);
    animation: heroShine 6s ease-in-out infinite;
}

@keyframes heroShine {
    0% { transform: skewX(-20deg) translateX(-100%); }
    50% { transform: skewX(-20deg) translateX(200%); }
    100% { transform: skewX(-20deg) translateX(200%); }
}

.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 20px; }

.hero-content h1 {
    font-size: 56px;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-content h1 span { color: var(--gold); }

.hero-content p {
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 16px 40px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid;
    transition: all 0.3s;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
}

.btn-primary {
    background: var(--gold);
    color: var(--blue);
    border-color: var(--gold);
}

.btn-primary:hover {
    background: transparent;
    color: var(--gold);
}

.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--blue);
}

/* SEARCH BAR */
.search-bar {
    background: var(--white);
    padding: 40px 0;
    box-shadow: 0 5px 30px rgba(0,0,0,0.1);
    position: relative;
    z-index: 10;
}

.search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.search-container select, .search-container input {
    flex: 1;
    min-width: 180px;
    padding: 15px 20px;
    border: 1px solid #ddd;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s;
}

.search-container select:focus, .search-container input:focus {
    border-color: var(--blue);
}

.search-container .btn { padding: 15px 40px; }

main { padding-top: 0; }

/* SECTIONS */
section { padding: 80px 0; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 38px;
    color: var(--blue);
    margin-bottom: 15px;
}

.section-title .gold-line {
    width: 60px;
    height: 2px;
    background: var(--gold);
    margin: 0 auto;
}

.section-title p {
    color: #777;
    margin-top: 20px;
    font-size: 16px;
}

/* SERVICES */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    border: 1px solid #eee;
    padding: 50px 30px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: var(--gold);
}

.service-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--blue);
}

.service-card h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--blue);
}

.service-card p {
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}

/* PROPERTIES */
.properties { background: var(--gray); }

.properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.property-card {
    background: var(--white);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.property-card:hover { transform: translateY(-5px); }

.property-img {
    height: 250px;
    background: linear-gradient(135deg, #d4d4d4, #a8a8a8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 60px;
}

.property-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--gold);
    color: var(--blue);
    padding: 8px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.property-badge.rent { background: var(--blue); color: var(--white); }

.property-info { padding: 25px; }

.property-info h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--blue);
}

.property-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #888;
}

.property-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--blue);
    font-family: 'Playfair Display', serif;
}

/* ESTIMATION */
.estimation {
    background: var(--blue);
    color: var(--white);
    text-align: center;
}

.estimation h2 {
    color: var(--white);
    font-size: 38px;
    margin-bottom: 20px;
}

.estimation p {
    font-size: 18px;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 40px;
}

.estim-form {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.estim-form input, .estim-form select {
    flex: 1 1 auto;
    min-width: 220px;
    padding: 18px 25px;
    border: none;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    outline: none;
}

.estim-form .btn { padding: 18px 50px; }

/* AGENCE */
.agence-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.agence-img {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 80px;
}

.agence-text h2 {
    font-size: 36px;
    color: var(--blue);
    margin-bottom: 25px;
}

.agence-text p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.9;
}

.agence-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: var(--gold);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

/* CONTACT */
.contact { background: var(--gray); }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h3 {
    font-size: 28px;
    color: var(--blue);
    margin-bottom: 30px;
}

.contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.contact-item-icon {
    width: 50px;
    height: 50px;
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--blue);
    flex-shrink: 0;
}

.contact-item-text h4 {
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--blue);
}

.contact-item-text p {
    color: #666;
    font-size: 14px;
}

.contact-form {
    background: var(--white);
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.contact-form h3 {
    font-size: 24px;
    color: var(--blue);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--blue);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* FOOTER */
footer {
    background: var(--blue);
    color: var(--white);
    padding: 60px 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-brand .logo-monogram {
    border-color: var(--gold);
    color: var(--gold);
}

.footer-brand h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    margin: 20px 0 15px;
}

.footer-brand p {
    opacity: 0.7;
    font-size: 14px;
    line-height: 1.8;
}

.footer-col h4 {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 25px;
    color: var(--gold);
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 12px; }

.footer-col a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    opacity: 0.6;
}

/* RESPONSIVE */
@media (max-width: 968px) {
    nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--blue); padding: 20px; }
    nav.active { display: block; }
    nav ul { flex-direction: column; gap: 20px; }
    .mobile-menu { display: block; }
    .hero-content h1 { font-size: 36px; }
    .agence-content, .contact-grid { grid-template-columns: 1fr; }
    .agence-img { height: 300px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 28px; }
    .estim-form input, .estim-form select { min-width: 100%; }
    .form-row { grid-template-columns: 1fr; }
    .search-container { flex-direction: column; }
    .search-container select, .search-container input { width: 100%; }
}