.hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero::before,
.hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    border-radius:50%;
    filter:blur(10px);
    pointer-events:none;
}

.hero::before{
    width:340px;
    height:340px;
    left:-120px;
    top:-90px;
    background:rgba(230,38,146,.10);
}

.hero::after{
    width:420px;
    height:420px;
    right:-160px;
    bottom:-180px;
    background:rgba(255,179,216,.18);
}

.hero-pills{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-top:20px;
}

.hero-pills span{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    border:1px solid rgba(230,38,146,.14);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:var(--primary-dark);
    font-size:11px;
    font-weight:850;
    box-shadow:0 8px 18px rgba(230,38,146,.06);
    backdrop-filter:blur(8px);
}

.hero-showcase{
    position:relative;
    min-height:500px;
    display:grid;
    align-items:center;
    justify-items:center;
}

.hero-showcase__glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(22px);
    animation:heroGlow 7s ease-in-out infinite alternate;
}

.hero-showcase__glow--one{
    width:260px;
    height:260px;
    top:34px;
    right:24px;
    background:rgba(230,38,146,.20);
}

.hero-showcase__glow--two{
    width:210px;
    height:210px;
    left:10px;
    bottom:30px;
    background:rgba(255,192,221,.26);
    animation-delay:1.2s;
}

.hero-image{
    position:relative;
    z-index:2;
    width:100%;
    min-height:460px;
    overflow:hidden;
    border-radius:34px;
    border:1px solid rgba(230,38,146,.10);
    background:#fff;
    box-shadow:
        0 30px 70px rgba(129,39,84,.18),
        0 10px 28px rgba(230,38,146,.10);
}

.hero-image img{
    width:100%;
    height:100%;
    min-height:460px;
    display:block;
    object-fit:cover;
    object-position:center;
    animation:heroImageFloat 9s ease-in-out infinite alternate;
}

.hero-floating-card{
    position:absolute;
    z-index:4;
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 18px 45px rgba(86,25,57,.18);
    backdrop-filter:blur(12px);
    animation:heroCardFloat 5.5s ease-in-out infinite;
}

.hero-floating-card--offer{
    top:26px;
    right:-24px;
    width:168px;
    padding:18px;
    border-radius:22px;
    background:rgba(255,249,216,.95);
}

.hero-floating-card--offer span,
.hero-floating-card--offer small{
    display:block;
}

.hero-floating-card--offer span{
    color:#6d5962;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.hero-floating-card--offer strong{
    display:block;
    margin:6px 0;
    color:var(--primary);
    font-size:28px;
    line-height:1;
}

.hero-floating-card--offer small{
    color:#73656c;
    font-size:11px;
    line-height:1.4;
}

.hero-floating-card--new{
    left:-28px;
    bottom:40px;
    display:flex;
    align-items:center;
    gap:11px;
    width:210px;
    padding:15px 17px;
    border-radius:20px;
    background:rgba(255,255,255,.94);
    animation-delay:.8s;
}

.hero-floating-card__dot{
    flex:0 0 12px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#25c76f;
    box-shadow:0 0 0 7px rgba(37,199,111,.12);
}

.hero-floating-card--new strong,
.hero-floating-card--new small{
    display:block;
}

.hero-floating-card--new strong{
    color:var(--primary);
    font-size:16px;
}

.hero-floating-card--new small{
    margin-top:2px;
    color:#70646a;
    font-size:11px;
    line-height:1.35;
}

.hero-floating-card--categories{
    right:28px;
    bottom:18px;
    display:flex;
    gap:6px;
    padding:9px;
    border-radius:999px;
    background:rgba(255,255,255,.90);
    animation-delay:1.4s;
}

.hero-floating-card--categories span{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:#fff0f8;
    color:var(--primary-dark);
    font-size:10px;
    font-weight:900;
}

.trust-grid{
    box-shadow:0 18px 42px rgba(81,31,56,.08);
}

@keyframes heroImageFloat{
    from{
        transform:scale(1.01) translate3d(0,0,0);
    }
    to{
        transform:scale(1.055) translate3d(-6px,-4px,0);
    }
}

@keyframes heroCardFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}

@keyframes heroGlow{
    from{
        transform:scale(.94) translateY(0);
        opacity:.65;
    }
    to{
        transform:scale(1.08) translateY(-12px);
        opacity:1;
    }
}

@media(prefers-reduced-motion:reduce){
    .hero-image img,
    .hero-floating-card,
    .hero-showcase__glow{
        animation:none !important;
    }
}

@media(max-width:1050px){
    .hero-floating-card--offer{right:8px}
    .hero-floating-card--new{left:8px}
}

@media(max-width:900px){
    .hero-showcase{
        width:min(100%,700px);
        margin:10px auto 0;
    }

    .hero-image,
    .hero-image img{
        min-height:390px;
    }
}

@media(max-width:640px){
    .hero-showcase{
        min-height:330px;
        padding-bottom:34px;
    }

    .hero-image,
    .hero-image img{
        min-height:300px;
    }

    .hero-image{
        border-radius:25px;
    }

    .hero-floating-card--offer{
        top:12px;
        right:-2px;
        width:132px;
        padding:13px;
        border-radius:17px;
    }

    .hero-floating-card--offer strong{
        font-size:22px;
    }

    .hero-floating-card--new{
        left:4px;
        bottom:8px;
        width:180px;
        padding:12px 14px;
    }

    .hero-floating-card--categories{
        right:8px;
        bottom:-8px;
    }

    .hero-floating-card--categories span{
        padding:0 7px;
        font-size:9px;
    }
}