@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');


:root{

--black:#030303;
--dark:#0a0a0a;
--surface:#111;
--surface2:#181818;

--gold:#d4af37;
--gold-light:#f5d77a;

--white:#ffffff;
--gray:#b5b5b5;

--glass:
rgba(255,255,255,.08);

}


*{

margin:0;
padding:0;

box-sizing:border-box;

font-family:
'Inter',
sans-serif;

scroll-behavior:smooth;

}


body{

background:
radial-gradient(
circle at top,
#242424,
#030303 60%
);

color:white;

overflow-x:hidden;

}


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


header{

position:fixed;

top:0;

width:100%;

z-index:9999;

background:
rgba(0,0,0,.55);

backdrop-filter:
blur(20px);

border-bottom:
1px solid rgba(255,255,255,.12);

}



nav{

max-width:1400px;

margin:auto;

padding:22px 6%;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

font-size:30px;

font-weight:900;

letter-spacing:3px;

}


.logo span{

color:var(--gold);

}



nav a{

color:white;

text-decoration:none;

font-weight:600;

margin-left:30px;

transition:.3s;

}


nav a:hover{

color:var(--gold);

}


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


.hero{

min-height:100vh;

display:flex;

align-items:center;

padding:
120px 8% 80px;


background:

linear-gradient(
90deg,
rgba(0,0,0,.9),
rgba(0,0,0,.25)
),

url("main profile header.jpeg");


background-size:cover;

background-position:center;


position:relative;

overflow:hidden;

}


.hero::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
transparent,
rgba(0,0,0,.8)
);

}


.hero-content{

position:relative;

z-index:2;

max-width:750px;

}



.hero h1{

font-size:
clamp(50px,8vw,100px);

font-weight:900;

line-height:.95;

letter-spacing:-3px;

}



.hero h1 span{

color:var(--gold);

}



.hero p{

font-size:22px;

line-height:1.6;

color:#ddd;

margin:30px 0;

}



/* BUTTON */


.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:
17px 40px;


background:

linear-gradient(
135deg,
var(--gold),
var(--gold-light)
);


color:black;

border-radius:50px;

font-weight:900;

text-decoration:none;

border:none;

cursor:pointer;

transition:.4s;

box-shadow:

0 15px 40px
rgba(212,175,55,.35);

}


.btn:hover{

transform:
translateY(-8px);

box-shadow:

0 25px 60px
rgba(212,175,55,.55);

}



/* =========================
VEHICLE SHOWROOM
========================= */


.vehicle-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(300px,1fr)
);

gap:35px;

padding:
80px 8%;

}



.vehicle-card{

background:

linear-gradient(
145deg,
#181818,
#070707
);


border-radius:30px;

overflow:hidden;

border:

1px solid
rgba(255,255,255,.1);


transition:.5s;

position:relative;

}



.vehicle-card::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
120deg,
transparent,
rgba(212,175,55,.15),
transparent
);

opacity:0;

transition:.5s;

}


.vehicle-card:hover::before{

opacity:1;

}



.vehicle-card:hover{

transform:

translateY(-18px);

box-shadow:

0 40px 80px
rgba(0,0,0,.8);

}



/* VEHICLE IMAGE */


.vehicle-image{

height:280px;

overflow:hidden;

background:#000;

}



.vehicle-image img{

width:100%;

height:100%;

object-fit:cover;

transition:
transform 8s ease;

}



.vehicle-card:hover img{

transform:
scale(1.15);

}



.vehicle-content{

padding:30px;

}



.vehicle-top{

display:flex;

justify-content:space-between;

color:var(--gold);

font-weight:700;

}



.vehicle-content h3{

font-size:35px;

margin:15px 0;

}



.vehicle-content p{

color:#bbb;

line-height:1.6;

}



/* SPECS */


.spec-row{

display:flex;

justify-content:space-between;

margin:25px 0;

}


.spec-row span{

background:

rgba(255,255,255,.06);

padding:12px;

border-radius:12px;

font-size:13px;

}



/* =========================
GLASS SECTIONS
========================= */


.glass,
.ai-box{

background:

rgba(255,255,255,.06);


backdrop-filter:

blur(25px);


border:

1px solid
rgba(255,255,255,.12);


border-radius:35px;

padding:60px;

}



/* =========================
TESTIMONIALS
========================= */


.testimonial{

background:

rgba(255,255,255,.06);

padding:40px;

border-radius:30px;

border:

1px solid rgba(255,255,255,.1);

}



.testimonial.active{

animation:

fade .8s;

}



@keyframes fade{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

}

}



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


.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;


border-radius:50%;


background:#25D366;


display:flex;

align-items:center;

justify-content:center;


z-index:9999;


box-shadow:

0 15px 40px
rgba(37,211,102,.5);


animation:

pulse 2s infinite;

}


@keyframes pulse{

50%{

transform:
scale(1.15);

}

}



/* =========================
SCROLL ANIMATION
========================= */


.reveal{

opacity:0;

transform:
translateY(50px);

transition:

1s ease;

}


.reveal.active{

opacity:1;

transform:none;

}



/* =========================
MOBILE
========================= */


@media(max-width:768px){


nav{

padding:20px;

}



nav a{

display:none;

}


.hero{

text-align:center;

padding:
130px 25px 70px;

}



.hero h1{

font-size:45px;

letter-spacing:-1px;

}


.hero p{

font-size:17px;

}


.btn{

width:100%;

margin-top:10px;

}



.vehicle-grid{

grid-template-columns:1fr;

padding:40px 20px;

}



.vehicle-image{

height:230px;

}


.glass,
.ai-box{

padding:30px 20px;

}


.whatsapp{

width:58px;

height:58px;

right:15px;

bottom:15px;

}

}
/* ==========================
   PERFECT MOBILE HERO FIX
========================== */


.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

}


.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.85),
rgba(0,0,0,.55)
);

z-index:1;

}



.hero-content{

position:relative;

z-index:5;

width:100%;

max-width:700px;

}



/* BUTTON FIX */

.hero-buttons{

position:relative;

z-index:20;

display:flex;

gap:15px;

flex-wrap:wrap;

}



.btn{

position:relative;

z-index:50;

cursor:pointer;

}



.secondary{

background:white;

color:black;

}



/* MOBILE */

@media(max-width:768px){


.hero{

min-height:100svh;

padding:

130px 25px 50px;

background-position:

65% center;

}



.hero-content{

text-align:center;

}



.hero-small{

font-size:16px;

letter-spacing:2px;

color:#ddd;

}



.hero h1{

font-size:

48px;

line-height:1;

margin:20px 0;

}



.hero h1 span{

display:block;

}



.hero-text{

font-size:17px;

line-height:1.6;

margin-bottom:30px;

color:white;

}



.hero-buttons{

display:flex;

flex-direction:column;

width:100%;

}



.hero-buttons .btn{

width:100%;

padding:18px;

font-size:17px;

}



}



/* VERY SMALL PHONES */

@media(max-width:380px){


.hero h1{

font-size:40px;

}


.hero-text{

font-size:15px;

}


}
section{

width:100%;

overflow:hidden;

}


img{

max-width:100%;

height:auto;

}


.vehicle-grid,
.testimonials,
.ai-box{

width:100%;

}


@media(max-width:768px){

.vehicle-card{

width:100%;

}


.spec-row{

display:grid;

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

gap:8px;

}


.spec-row span{

font-size:11px;

}


}
@media(max-width:768px){

nav.open a{

display:block;

margin:15px 0;

}


nav.open{

background:#080808;

padding-bottom:30px;

}

}
.mobile-sales-bar{

display:none;

}


@media(max-width:768px){

.mobile-sales-bar{

display:flex;

position:fixed;

bottom:0;

left:0;

right:0;

background:#050505;

z-index:9999;

padding:12px;

justify-content:space-around;

border-top:1px solid #d6a84f;

}


.mobile-sales-bar a{

color:white;

font-size:13px;

text-decoration:none;

}

}