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

.hero{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:120px 0 80px;
    background:transparent;
}

.hero-wrapper{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center;
}

.hero-content{
    position:relative;
    z-index:2;
}

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

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    margin-bottom:24px;
}

.hero-badge i{
    color:var(--primary);
    font-size:16px;
}

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

.hero h1{
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-2px;
    color:var(--dark);
    margin-bottom:24px;
}

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

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

.hero p{
    max-width:560px;
    font-size:20px;
    line-height:1.9;
    color:var(--gray);
    margin-bottom:40px;
}

/*=====================================
        BUTTON GROUP
======================================*/

.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

/*=====================================
        RATING
======================================*/

.hero-rating{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:40px;
    font-size:15px;
    color:var(--gray);
    font-weight:500;
}

.hero-rating span{
    color:#FFC107;
    font-size:22px;
    letter-spacing:2px;
}

/*=====================================
        BACKGROUND BLOBS
======================================*/

.hero::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    right:-220px;
    top:-220px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(0,210,106,.18),
        transparent 70%
    );
    filter:blur(20px);
}

.hero::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    left:-150px;
    bottom:-120px;
    border-radius:50%;
    background:
    radial-gradient(
        circle,
        rgba(0,148,255,.12),
        transparent 70%
    );
    filter:blur(15px);
}

/*=====================================
        MAIN GLOW
======================================*/

.glow{
    position:absolute;
    right:140px;
    bottom:20px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:#00D26A;
    opacity:.12;
    filter:blur(120px);
    z-index:-1;
}

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

.hero-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:620px;
}

/*=====================================
        CAR FRAME
======================================*/

.car-frame{
    position:relative;
    width:100%;
    max-width:560px;
    aspect-ratio:16/10;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    border-radius:32px;
    background:linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(244,248,252,.92)
    );
    border:1px solid rgba(255,255,255,.7);
    box-shadow:
        0 30px 80px rgba(0,0,0,.08);
}

/*=====================================
        INNER GLOW
======================================*/

.car-frame::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;

    background:radial-gradient(

        rgba(0,210,106,.20),

        transparent 70%

    );

    filter:blur(35px);

}

/*=====================================
        GRID EFFECT
======================================*/

.car-frame::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);

    background-size:40px 40px;

    opacity:.35;

}

/*=====================================
        EV IMAGE
======================================*/

.ev-car{

    position:relative;

    z-index:5;

    width:100%;

    max-width:520px;

    display:none;

    animation:carFloat 5s ease-in-out infinite;

}

/*=====================================
        PLACEHOLDER
======================================*/

.car-placeholder{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    z-index:4;

}

.placeholder-icon{

    font-size:82px;

    margin-bottom:18px;

}

.car-placeholder h3{

    font-size:34px;

    color:var(--primary);

    margin-bottom:12px;

}

.car-placeholder p{

    font-size:16px;

    color:var(--gray);

}

/*=====================================
        GLOW
======================================*/

.car-glow{

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:#00D26A;

    opacity:.15;

    filter:blur(90px);

    animation:pulseGlow 5s ease-in-out infinite;

}

/*=====================================
        IMAGE ANIMATION
======================================*/

@keyframes carFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

}

@keyframes pulseGlow{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

}
/*=====================================
        FLOATING CARDS
======================================*/

.floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 22px;
    border-radius:20px;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    font-weight:600;
    color:var(--dark);
    z-index:20;
    animation:floatCard 6s ease-in-out infinite;
}

.floating-card i{
    color:var(--primary);
    font-size:20px;
}

/* Card Positions */

.card-one{
    top:35px;
    left:-25px;
}

.card-two{
    top:180px;
    right:-35px;
    animation-delay:1.5s;
}

.card-three{
    bottom:40px;
    left:50px;
    animation-delay:3s;
}

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

.hero-blob{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(90px);
    opacity:.35;
    z-index:0;
}

.blob-green{
    width:320px;
    height:320px;
    background:#00D26A;
    right:120px;
    top:80px;
    animation:blobFloat 10s ease-in-out infinite;
}

.blob-blue{
    width:260px;
    height:260px;
    background:#0094FF;
    left:-90px;
    bottom:40px;
    animation:blobFloat 12s ease-in-out infinite reverse;
}

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

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/*=====================================
        ANIMATIONS
======================================*/

@keyframes floatCard{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}

@keyframes blobFloat{

    0%,100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-25px)
            scale(1.05);
    }

}

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

/* Laptop */

@media (max-width:1200px){

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

    .hero-wrapper{
        gap:50px;
    }

}

/* Tablet */

@media (max-width:992px){

    .hero{

        min-height:auto;

        padding:110px 0 80px;

    }

    .hero-wrapper{

        grid-template-columns:1fr;

        text-align:center;

        gap:70px;

    }

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .hero h1{

        font-size:54px;

    }

    .hero p{

        max-width:700px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-rating{

        justify-content:center;

    }

    .hero-image{

        min-height:500px;

    }

    .card-one{

        left:10px;

    }

    .card-two{

        right:10px;

    }

    .card-three{

        left:40px;

    }

}

/* Mobile */

@media (max-width:768px){

    .hero{

        padding-top:95px;

    }

    .hero h1{

        font-size:42px;

        letter-spacing:-1px;

    }

    .hero p{

        font-size:17px;

        line-height:1.8;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

    .hero-buttons .btn,

    .hero-buttons .btn-outline{

        width:100%;

    }

    .hero-image{

        min-height:380px;

    }

    .car-frame{

        max-width:100%;

        border-radius:24px;

    }

    .floating-card{

        padding:12px 16px;

        font-size:13px;

        border-radius:16px;

    }

    .floating-card i{

        font-size:16px;

    }

    .card-one{

        top:10px;

        left:0;

    }

    .card-two{

        top:140px;

        right:0;

    }

    .card-three{

        left:15px;

        bottom:10px;

    }

}

/* Small Mobile */

@media (max-width:480px){

    .hero h1{

        font-size:34px;

    }

    .hero-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .hero-rating{

        flex-wrap:wrap;

        gap:8px;

    }

    .placeholder-icon{

        font-size:64px;

    }

    .car-placeholder h3{

        font-size:26px;

    }

    .car-placeholder p{

        font-size:14px;

    }

    .floating-card{

        font-size:12px;

        padding:10px 14px;

    }

}

/* FIX: Hero EV image visibility */

.car-frame .ev-car {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
    filter: none !important;
}

.car-frame {
    position: relative;
    overflow: hidden;
}

.car-glow {
    z-index: 1 !important;
    pointer-events: none;
}