:root {
--ink: #17130f;
--muted: #6f6a63;
--paper: #f8f6f1;
--panel: #ffffff;
--line: #e9dfcf;


--gold: #f4c542;
--gold-dark: #a56b00;

--green: #22c55e;

--shadow:
0 20px 60px rgba(0,0,0,0.10);


}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;


font-family:
Inter,
Arial,
Helvetica,
sans-serif;

background:var(--paper);

color:var(--ink);

overflow-x:hidden;


}

a{
color:inherit;
}

/* =========================
HEADER
========================= */

.site-header{
position:fixed;


top:0;
left:0;

width:100%;

z-index:1000;

background:
rgba(255,255,255,0.82);

backdrop-filter:blur(14px);

border-bottom:
1px solid rgba(0,0,0,0.06);


}

.nav{
width:min(1180px, calc(100% - 40px));


margin:0 auto;

min-height:86px;

display:flex;
align-items:center;
justify-content:space-between;


}

.brand{
display:flex;
align-items:center;


gap:14px;

text-decoration:none;

font-weight:800;

font-size:1.12rem;


}

.brand-mark{
width:54px;
height:54px;


display:grid;
place-items:center;

border-radius:14px;

background:#111;

color:#fff;

font-weight:900;

font-size:1.4rem;


}

.nav-actions{
display:flex;
align-items:center;


gap:26px;


}

.nav-actions a{
text-decoration:none;


font-weight:700;

color:#5e5850;

transition:0.25s ease;


}

.nav-actions a:hover{
    color:#111;
}

.nav-call{
    background:var(--gold);
    color:#111 !important;
    padding:16px 24px;
    border-radius:14px;
    transition:0.25s ease;
}

.nav-call:hover{
transform:translateY(-2px);


background:#e7b833;


}



/* =========================
   HERO SECTION
========================= */

.hero{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:140px 7% 60px;

    background:#f8f6f1;
}

.hero-bg-image{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

    filter:
brightness(0.62)
blur(0.4px);

    transform:scale(1.03);
}

.hero-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(248,246,241,0.82) 0%,
        rgba(248,246,241,0.55) 40%,
        rgba(248,246,241,0.20) 100%
    );

    z-index:2;
}

.hero-content{
    position:relative;

    z-index:3;

    width:100%;
    max-width:760px;
}

.eyebrow{
    margin-bottom:18px;

    color:#b77900;

    font-size:15px;

    font-weight:800;

    letter-spacing:4px;

    text-transform:uppercase;
}

.hero h1{
    font-size:92px;

    line-height:0.92;

    letter-spacing:-4px;

    text-shadow:0 4px 30px rgba(255,255,255,0.25);

    margin-bottom:26px;

    font-weight:900;

    color:#111;
}

.hero-text{
    max-width:540px;

    font-size:22px;

    text-shadow:0 2px 18px rgba(255,255,255,0.2);

    line-height:1.7;

    color:#2d2d2d;

    margin-bottom:34px;
}

.owner-details{
    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:34px;
}

.owner-details span{
    background:#111;

    color:#fff;

    padding:12px 20px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    letter-spacing:0.3px;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.18);

    transition:0.25s ease;
}

.owner-details span:hover{
    transform:translateY(-2px);

    background:#1d1d1d;
}

.hero-actions{
    display:flex;

    gap:18px;

    flex-wrap:wrap;
}



/* MOBILE */

@media(max-width:900px){

    .hero{
        min-height:auto;

        padding:120px 24px 80px;
    }

    .hero h1{
        font-size:78px;
    }

    .hero-text{
        font-size:19px;
    }

}

@media(max-width:600px){

    .hero{
        padding:110px 20px 70px;
    }

    .hero h1{
        font-size:42px;

        line-height:1;
    }

    .hero-text{
        font-size:17px;

        line-height:1.7;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions .btn{
        width:100%;
    }

}

/* =========================
TRUST BAND
========================= */

.trust-band{
display:grid;


grid-template-columns:repeat(3,1fr);

background:#fff;

border-top:1px solid var(--line);
border-bottom:1px solid var(--line);


}

.trust-band div{
padding:34px 24px;


text-align:center;

border-right:1px solid var(--line);


}

.trust-band div:last-child{
border-right:0;
}

.trust-band strong{
display:block;


font-size:2rem;

margin-bottom:8px;


}

.trust-band span{
color:var(--muted);
}

/* =========================
GENERAL SECTION
========================= */

.section{
width:min(1180px, calc(100% - 40px));


margin:0 auto;

padding:110px 0;


}

.section-heading{
max-width:760px;


margin-bottom:50px;


}

.section-heading p{
color:var(--muted);
}

h2{
margin:0 0 18px;


font-size:
clamp(2.8rem, 5vw, 5rem);

line-height:0.95;

letter-spacing:-2px;


}

/* =========================
CAR GRID
========================= */

.cars-grid{
display:grid;


grid-template-columns:
repeat(3, minmax(0,1fr));

gap:28px;


}

.car-card{
background:#fff;


border-radius:20px;

overflow:hidden;

box-shadow:
0 18px 50px rgba(0,0,0,0.08);

transition:
transform 0.3s ease,
box-shadow 0.3s ease;


}

.car-card:hover{
transform:translateY(-10px);


box-shadow:
0 28px 70px rgba(0,0,0,0.14);


}

.car-card img{
    aspect-ratio:16/9;

    height:240px;

    object-fit:cover;
}

.car-card:hover img{
    transform:scale(1.05);
}

.car-content{
    padding:24px;

    display:flex;

    flex-direction:column;
}

.car-type{
color:var(--muted);


font-size:0.82rem;

font-weight:800;

letter-spacing:0.08em;

text-transform:uppercase;


}

.price{
font-size:2.2rem;


font-weight:900;

margin:18px 0;

color:#103932;


}

.feature-list{
list-style:none;


display:flex;
flex-wrap:wrap;

gap:10px;

padding:0;

margin:
22px 0
28px;


}

.feature-list li{
background:#f5f2ea;


border-radius:999px;

padding:10px 14px;

font-size:0.88rem;

font-weight:700;


}

.card-actions{
    display:flex;

    gap:14px;

    margin-top:auto;
}

.card-actions .btn{
flex:1;
}

/* =========================
SERVICES
========================= */

.service-section{
    padding-top:40px;
    border-top:
    1px solid var(--line);

    margin-top:90px;
}

.service-grid{
display:grid;


grid-template-columns:
repeat(3,1fr);

gap:24px;


}

.service-grid article{
background:#fff;


border-radius:20px;

padding:36px;

box-shadow:
0 14px 40px rgba(0,0,0,0.06);


}

.service-icon{
width:58px;
height:58px;


display:grid;
place-items:center;

margin-bottom:28px;

border-radius:16px;

background:#103932;

color:#fff;

font-weight:900;

font-size:1.25rem;


}

.service-grid p{
color:var(--muted);


line-height:1.8;


}

/* =========================
CONTACT
========================= */

.contact-section{
width:min(1180px, calc(100% - 40px));


margin:
0 auto
90px;

padding:54px;

border-radius:28px;

display:grid;

grid-template-columns:
minmax(0,1fr)
auto;

gap:36px;

align-items:center;

background:#111;

color:#fff;


}

.contact-section p{
color:
rgba(255,255,255,0.72);


max-width:620px;


}

.contact-actions{
display:flex;


flex-wrap:wrap;

gap:16px;


}

/* =========================
FOOTER
========================= */

.footer{
padding:
30px
20px;


display:flex;
align-items:center;
justify-content:center;

flex-wrap:wrap;

gap:20px;

border-top:
1px solid var(--line);

color:var(--muted);

background:#fff;


}

.footer strong{
color:#111;
}

/* =========================
FLOATING WHATSAPP
========================= */

.floating-whatsapp{
position:fixed;


right:24px;
bottom:24px;

z-index:999;

background:#22c55e;

color:#fff;

text-decoration:none;

padding:16px 22px;

border-radius:999px;

font-weight:800;

box-shadow:
0 20px 40px rgba(0,0,0,0.18);

transition:0.25s ease;


}

.floating-whatsapp:hover{
transform:translateY(-3px);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width:980px){

    .cars-grid,
    .service-grid,
    .contact-section{
        grid-template-columns:1fr;
    }

    .hero{
        min-height:92vh;

        padding:
        120px
        24px
        80px;
    }

    .hero-overlay{
        background:
        linear-gradient(
            90deg,
            rgba(248,246,241,0.82) 0%,
            rgba(248,246,241,0.48) 35%,
            rgba(0,0,0,0.18) 100%
        );
    }

    .hero h1{
        font-size:4.5rem;
    }

}



@media (max-width:680px){


.nav{
    min-height:auto;

    padding:16px 0;

    flex-direction:column;

    align-items:flex-start;

    gap:16px;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:16px;
}

.hero h1{
    font-size:3.4rem;

    letter-spacing:-2px;
}

.hero-text{
    font-size:1.05rem;
}

.section{
    padding:80px 0;
}

.contact-section{
    padding:34px;
}

.card-actions{
    flex-direction:column;
}

.btn{
    width:100%;
}

.trust-band{
    grid-template-columns:1fr;
}

.trust-band div{
    border-right:0;

    border-bottom:
    1px solid var(--line);
}

.trust-band div:last-child{
    border-bottom:0;
}


}
/* =========================
BUTTONS
========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 26px;

    border-radius:14px;

    text-decoration:none;

    font-weight:800;

    transition:0.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-primary{
    background:var(--gold);
    color:#111;
}

.btn-primary:hover{
    background:#e7b833;
}

.btn-dark{
    background:#111;
    color:#fff;
}

.btn-dark:hover{
    background:#222;
}

.btn-whatsapp{
    background:#22c55e;
    color:#fff;
}

.btn-whatsapp:hover{
    background:#16a34a;
}
.site-header{
    box-shadow:0 6px 30px rgba(0,0,0,0.04);
}
.service-pricing{
    margin:26px 0;

    display:flex;
    flex-direction:column;

    gap:14px;
}

.service-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    padding:14px 16px;

    border-radius:14px;

    background:#f5f2ea;

    font-weight:600;
}

.service-row strong{
    color:#103932;

    font-size:1.1rem;
}
.car-card{
    display:flex;

    flex-direction:column;

}
.coverage-box{
    background:#111;

    color:#fff;

    padding:24px 28px;

    border-radius:20px;

    margin-bottom:40px;

    line-height:1.8;

    box-shadow:
    0 14px 40px rgba(0,0,0,0.08);
}

.coverage-box strong{
    color:var(--gold);
}
#cars{
    padding-bottom:120px;
}
.section-title{
    font-size:2.2rem;

    font-weight:800;

    margin:
    90px
    0
    40px;

    text-align:center;

    color:#111;

    position:relative;
}

.section-title::after{
    content:"";

    width:90px;

    height:4px;

    background:var(--gold);

    display:block;

    margin:16px auto 0;

    border-radius:999px;
}
@media (max-width:768px){

    .nav{
        flex-direction:column;
        align-items:center;
        gap:12px;
        padding:15px 0;
    }

    .nav-brand{
        justify-content:center;
    }

    .nav-actions{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:15px;
        flex-wrap:nowrap;
    }

    .nav-call{
        padding:12px 20px;
        font-size:16px;
    }

    .hero{
        min-height:100vh;
        padding:120px 5% 40px;
    }

    .hero h1{
        font-size:42px;
        line-height:1.1;
    }

    .hero-text{
        font-size:1rem;
    }

    .hero-actions{
        flex-direction:column;
        gap:12px;
    }

    .hero-actions .btn{
        width:100%;
        text-align:center;
    }

    .floating-whatsapp{
        right:15px;
        bottom:15px;
        padding:12px 18px;
        font-size:14px;
    }

    body{
        overflow-x:hidden;
    }
}