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

.hero {

    position: relative;

    min-height: 780px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        linear-gradient(
            135deg,
            #071028,
            #020617
        );

}

.hero::before {

    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        radial-gradient(

            circle at 25% 35%,

            rgba(
                2,
                6,
                23,
                .32
            ),

            rgba(
                2,
                6,
                23,
                .52
            ),

            transparent 100%

        );

}




.hero-carousel {

    position: absolute;

    inset: 0;

    opacity: 1;

    filter:

        blur(
            0px
        )

        brightness(
            1.25
        );

}

.hero-slides {

    width: 100%;

    height: 100%;

}

.hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding:

        8rem
        3rem
        5rem;

    color: #ffffff;

    text-align: center;

}
}

.hero-label {

    display: inline-flex;

    align-items: center;

    gap: .5rem;

    padding:
        10px
        18px;

    margin-bottom: 1.5rem;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    backdrop-filter:
        blur(12px);

    border-radius: 999px;

    color:
        rgba(
            255,
            255,
            255,
            .95
        );

    font-size: .85rem;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.hero h1 {

    max-width: 760px;

    margin:

        0
        0
        1.5rem;

    font-size: 4rem;

    line-height: 1.05;

    text-shadow:

        0 8px 40px
        rgba(
            0,
            0,
            0,
            .75
        ),

        0 2px 10px
        rgba(
            0,
            0,
            0,
            .85
        );

}


.hero p {

    max-width: 650px;

    margin:

        0 auto
        2rem;

    color:
        rgba(
            255,
            255,
            255,
            .94
        );

    font-size: 1.15rem;

    font-weight: 500;

    line-height: 1.55;

    letter-spacing:
        -.03em;

    text-align: center;

    text-shadow:

        0 8px 24px
        rgba(
            0,
            0,
            0,
            .70
        ),

        0 2px 10px
        rgba(
            0,
            0,
            0,
            .85
        );

}
}



.hero-actions {

    display: flex;

    gap: 1rem;

}

.hero-actions .btn{

min-width:220px;

}

/* =====================================
   DEALER INFO
===================================== */

.dealer-info {

    background: #ffffff;

    padding:

        0
        1.5rem
        5rem;

}

.dealer-inner {

    max-width: 1180px;

    margin: 0 auto;

}

.dealer-card {

    display: grid;

    grid-template-columns:

        repeat(
            3,
            1fr
        );

    gap: 1.25rem;

    margin-top: -80px;

    position: relative;

    z-index: 20;

}

.dealer-item {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    background: #ffffff;

    border-radius: 28px;

    padding: 2rem;

    box-shadow:

        0 20px 60px
        rgba(
            2,
            6,
            23,
            .08
        );

}

.dealer-item span {

    font-size: 1.6rem;

}

.dealer-item strong {

    display: block;

    margin-bottom: .5rem;

    font-size: 1.05rem;

}

.dealer-item p {

    margin: 0;

    color: #64748b;

}



/* =====================================
   FEATURED
===================================== */

.teaser {

    background:

        linear-gradient(
            180deg,
            #f8fafc,
            #eef2f7
        );

    padding:

        3rem
        1.5rem;

}

.teaser-inner {

    max-width: 1180px;

    margin: 0 auto;

}

.teaser-header {

    text-align: center;

    margin-bottom: 3rem;

}

.teaser-header h2 {

    font-size: 3rem;

    margin-bottom: .75rem;

}

.teaser-header p {

    color: #64748b;

}

.teaser-grid {

    display: grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(
                320px,
                1fr
            )
        );

    gap: 2rem;

}

.teaser-action {

    margin-top: 4rem;

    text-align: center;

}



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

.homepage-contact {

    background: #ffffff;

    padding:

        6rem
        1.5rem;

}

.contact-inner {

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}

.contact-inner h2 {

    font-size: 3rem;

}

.contact-inner p {

    color: #64748b;

    line-height: 1.8;

}

.contact-actions {

    display: flex;

    justify-content: center;

    gap: 1rem;

}





/* =====================================
   FEATURED CARD FIX
===================================== */

.teaser-card {

    display: block;

    text-decoration: none;

    color: inherit;

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    border:
        1px solid
        rgba(
            15,
            23,
            42,
            .08
        );

    box-shadow:
        0 20px 60px
        rgba(
            2,
            6,
            23,
            .08
        );

    transition:
        .25s;

}

.teaser-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 35px 80px
        rgba(
            2,
            6,
            23,
            .14
        );

}

.featured-image {

    position: relative;

    height: 200px;

    overflow: hidden;

    border-radius:

        28px
        28px
        0
        0;

}

.featured-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.featured-badges {

    position: absolute;

    top: 18px;

    left: 18px;

    right: 18px;

    display: flex;

    justify-content: space-between;

    z-index: 5;

}

.featured-badge {

    padding:

        10px
        16px;

    border-radius: 999px;

    font-size: .72rem;

    font-weight: 700;

}

.featured-badge.featured {

    background:

        linear-gradient(
            135deg,
            #d92d3a,
            #b91c2d
        );

    color: #ffffff;

}

.featured-badge.body {

    background: #ffffff;

}

.featured-image-overlay {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

}

.featured-price {

    width: 100%;

    padding:

        4px
        24px;

    background:

        linear-gradient(
            90deg,
            rgba(
                217,
                45,
                58,
                .95
            ),
            rgba(
                185,
                28,
                45,
                .25
            )
        );

    color: #ffffff;

    text-align: center;

    font-size: .95rem;

    font-weight: 700;

    letter-spacing: .03em;

    backdrop-filter:

        blur(
            18px
        );

    box-shadow:

        0 -10px 30px
        rgba(
            217,
            45,
            58,
            .22
        );

}

.featured-content {

padding:

18px
20px
20px;

}


.featured-title {

    margin-bottom: 16px;
    
    font-size: 1.45rem;

    line-height: 1.15;

}



.featured-specs {

    display: grid;

    grid-template-columns:

        1fr
        1fr;

    gap: 10px;

}

.featured-spec {

    background: #f8fafc;

    border-radius: 12px;

    transition: .25s;
    
    min-height:30px;
padding:8px 10px;

}

.featured-spec:hover {

    transform:

        translateY(-2px);

    border:
        1px solid
        rgba(
            217,
            45,
            58,
            .35
        );

}

.featured-label {

    font-size: .72rem;

    color: #64748b;

    margin-bottom: 2px;

}

.featured-value {

    font-weight: 700;

}

.featured-footer {

    margin-top: 18px;

    padding-top: 18px;

    border-top:
        1px solid
        #e2e8f0;

}


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

.hero-slides {

    position: absolute;

    inset: 0;

}

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    transform:

        scale(
            1.03
        );

    transition:

        opacity 1.5s ease,

        transform 10s linear;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.hero-slide.active {

    opacity: 1;

    transform:

        scale(
            1
        );

}



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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 56px;

    padding:

        0
        28px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

}

.btn-primary {

background:
#C23A47;

color:
#fff;

border:
none;

min-width:
260px;

}


.btn-primary:hover{

background:#AF3140;

color:#fff;

transform:
translateY(-2px);

}


.btn-secondary {


background:
transparent;

color:
#08153F;

border:
2px solid rgba(
8,
21,
63,
.18
);

backdrop-filter:
blur(
8px
);

}

.btn-secondary:hover{

background:
rgba(
8,
21,
63,
.05
);



}


.hero .btn-secondary{

color:
#fff;

border:
2px solid rgba(
255,
255,
255,
.35
);

}


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

@media (max-width:768px){

.hero{

min-height:auto;

}

.hero-content{

padding:

7rem
1.5rem
2rem;

}

.hero h1{

font-size:2.5rem;

line-height:1.08;

margin-bottom:1rem;

}

.hero p{

font-size:1rem;

margin-bottom:1.5rem;

max-width:100%;

}

.hero-actions{

flex-direction:column;

gap:.75rem;

}

.btn{

min-height:50px;

}

.dealer-card{

grid-template-columns:1fr;

margin-top:-50px;

}

.teaser{

padding:

2.5rem
1.25rem;

}

.teaser-header{

margin-bottom:2rem;

}

.teaser-header h2{

font-size:2.3rem;

}

.teaser-grid{

grid-template-columns:1fr;

}

.contact-inner h2{

font-size:2.2rem;

}

.contact-actions{

flex-direction:column;

}

}