body{

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

overflow-x:hidden;

background:#f8fbff;

}



:root{

--primary:#2563eb;

--secondary:#7c3aed;

--dark:#111827;

--gray:#6b7280;

}



/* HERO */

.hero{

position:relative;

height:100vh;

overflow:hidden;

background:

linear-gradient(135deg,#f8fbff,#eef5ff,#ffffff);

}



.hero::before{

content:"";

position:absolute;

width:650px;

height:650px;

border-radius:50%;

background:#2563eb20;

top:-250px;

right:-150px;

filter:blur(60px);

}



.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:#7c3aed20;

bottom:-150px;

left:-120px;

filter:blur(60px);

}




/* SWIPER */


.heroSwiper{

width:100%;

height:100%;

}



.swiper-wrapper{

height:100%;

}



.swiper-slide{

height:100%;

display:flex;

align-items:center;

}




/* MAIN GRID */


.hero-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

height:100%;

}




/* CONTENT */


.hero-content{

max-width:600px;

position:relative;

z-index:3;

animation:fadeLeft .8s ease;

}



.hero-badge{

display:inline-flex;

padding:10px 25px;

background:white;

border-radius:50px;

font-weight:700;

color:var(--primary);

box-shadow:0 15px 35px rgba(0,0,0,.08);

margin-bottom:25px;

}



.hero-content h1{

font-size:64px;

line-height:1.1;

font-weight:800;

color:var(--dark);

margin-bottom:25px;

}



.hero-content p{

font-size:18px;

line-height:1.8;

color:var(--gray);

margin-bottom:35px;

}



/* BUTTONS */


.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}



.hero-buttons .btn{

padding:16px 35px;

border-radius:50px;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

transition:.3s;

}



.btn-primary{

background:linear-gradient(135deg,#2563eb,#4f46e5);

border:none;

color:white;

box-shadow:0 15px 35px #2563eb55;

}



.btn-primary:hover{

transform:translateY(-5px);

color:white;

}



.btn-outline-primary{

border:2px solid #2563eb;

color:#2563eb;

}



.btn-outline-primary:hover{

background:#2563eb;

color:white;

transform:translateY(-5px);

}





/* STATS */


.hero-stats{

display:flex;

gap:45px;

}



.hero-stats h3{

font-size:34px;

font-weight:800;

color:#2563eb;

margin:0;

}



.hero-stats p{

font-size:15px;

margin:0;

}





/* IMAGE */


.hero-image{

height:650px;

display:flex;

align-items:center;

justify-content:center;

position:relative;

z-index:2;

animation:fadeRight 1s ease;

}



.hero-image::before{

content:"";

position:absolute;

width:520px;

height:520px;

border-radius:50%;

background:linear-gradient(135deg,#2563eb,#7c3aed);

opacity:.12;

}



.hero-image img{

position:relative;

z-index:2;

width:100%;

max-width:560px;

object-fit:contain;

animation:none !important;

transition:0.5s ease;

filter:drop-shadow(0 35px 60px rgba(0,0,0,.25));

}




/* FLOAT */


@keyframes float{

0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-20px);

}

}



@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-50px);

}

to{

opacity:1;

transform:translateX(0);

}

}



@keyframes fadeRight{

from{

opacity:0;

transform:translateX(50px);

}

to{

opacity:1;

transform:translateX(0);

}

}



/* CARDS */


.discount-card{

position:absolute;

top:70px;

left:-20px;

background:white;

padding:22px;

width:140px;

text-align:center;

border-radius:22px;

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

z-index:5;

}



.discount-card h2{

font-size:42px;

color:#ef4444;

margin:0;

}



.rating-card{

position:absolute;

right:-20px;

bottom:80px;

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

backdrop-filter:blur(20px);

padding:20px 28px;

border-radius:22px;

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

z-index:5;

}



.rating-card h4{

font-size:26px;

}



.rating-card p{

margin:0;

color:#666;

}

/* ARROWS */

.swiper-button-next,
.swiper-button-prev{

width:60px;

height:60px;

background:#fff;

border-radius:50%;

color:#2563eb;

box-shadow:0 15px 35px rgba(0,0,0,.15);

}



.swiper-button-next::after,
.swiper-button-prev::after{

font-size:22px;

font-weight:bold;

}



.swiper-button-next:hover,
.swiper-button-prev:hover{

background:#2563eb;

color:#fff;

}



/* PAGINATION */


.swiper-pagination-bullet{

width:14px;

height:14px;

background:#cbd5e1;

opacity:1;

}



.swiper-pagination-bullet-active{

width:40px;

border-radius:20px;

background:#2563eb;

}





/* RESPONSIVE */


@media(max-width:992px){


.hero{

height:auto;

}



.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

padding:80px 0;

}



.hero-content{

margin:auto;

}



.hero-content h1{

font-size:45px;

}



.hero-buttons{

justify-content:center;

}



.hero-stats{

justify-content:center;

}



.hero-image{

height:500px;

}



}



@media(max-width:576px){


.hero-content h1{

font-size:34px;

}



.hero-buttons{

flex-direction:column;

}



.hero-buttons .btn{

justify-content:center;

}



.hero-image img{

max-width:300px;

}



.hero-stats{

flex-direction:column;

gap:20px;

}



.swiper-button-next,
.swiper-button-prev{

display:none;

}



}
/* =========================================================
   ELITE STORE MOBILE HERO — stable single-slide layout
   ========================================================= */
@media (max-width: 767px) {
    .hero {
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    .heroSwiper,
    .heroSwiper .swiper-wrapper,
    .heroSwiper .swiper-slide {
        height: auto;
        min-height: 0;
    }

    .heroSwiper .swiper-slide {
        display: block;
    }

    .hero-wrapper {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-height: 0;
        height: auto;
        padding: 58px 18px 76px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        order: 1;
        padding: 0;
    }

    .hero-badge {
        margin-bottom: 14px;
        padding: 8px 15px;
        font-size: 13px;
    }

    .hero-content h1 {
        font-size: clamp(30px, 8.5vw, 40px);
        line-height: 1.12;
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 15px;
        line-height: 1.65;
        margin: 0 auto 22px;
        max-width: 520px;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 24px;
    }

    .hero-buttons .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
        padding: 13px 20px;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .hero-stats h3 { font-size: 24px; }
    .hero-stats p { font-size: 12px; }

    .hero-image {
        width: 100%;
        height: auto;
        min-height: 270px;
        order: 2;
        padding: 0 6px;
    }

    .hero-image::before {
        width: min(78vw, 310px);
        height: min(78vw, 310px);
    }

    .hero-image img {
        width: min(78vw, 310px);
        max-width: 100%;
        max-height: 330px;
        object-fit: contain;
    }

    .discount-card {
        top: 12px;
        left: 2px;
        width: 86px;
        padding: 10px 7px;
        border-radius: 15px;
    }

    .discount-card h2 { font-size: 27px; }
    .discount-card b { font-size: 12px; }
    .discount-card p { font-size: 10px; margin: 0; }

    .rating-card {
        right: 0;
        bottom: 16px;
        padding: 10px 12px;
        border-radius: 15px;
    }

    .rating-card h4 { font-size: 18px; margin: 0; }
    .rating-card p { font-size: 10px; }

    .heroSwiper .swiper-pagination {
        bottom: 18px;
    }

    .heroSwiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }

    .heroSwiper .swiper-pagination-bullet-active {
        width: 24px;
    }
}

@media (max-width: 380px) {
    .hero-wrapper { padding-left: 14px; padding-right: 14px; }
    .hero-stats h3 { font-size: 21px; }
    .hero-stats p { font-size: 11px; }
    .hero-image { min-height: 235px; }
    .hero-image img { width: min(72vw, 270px); }
}