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

:root{

    --hero-green:#15803D;
    --hero-dark:#14532D;
    --hero-light:#F6FFF8;
    --hero-text:#1F2937;
    --hero-muted:#6B7280;
    --hero-radius:28px;

}

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

.hero-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f7fff9 55%,
        #eefbf2 100%
    );

    padding:80px 0;

}

.hero-bg{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(34,197,94,.12),
    transparent 40%),

    radial-gradient(circle at 90% 15%,
    rgba(22,163,74,.10),
    transparent 30%);

    pointer-events:none;

}

/*==================================================
                WRAPPER
==================================================*/

.hero-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

/*==================================================
                LEFT
==================================================*/

.hero-content{

    max-width:620px;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:#E8F8ED;

    color:var(--hero-green);

    font-weight:700;

    font-size:15px;

    margin-bottom:24px;

}

.hero-badge i{

    font-size:20px;

}

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

.hero-title{

    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:1.08;

    font-weight:800;

    color:var(--hero-dark);

    margin-bottom:20px;

    letter-spacing:-1px;

}

/*==================================================
                TYPEWRITER
==================================================*/

.hero-typewriter{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:24px;

    font-size:30px;

    font-weight:700;

}

.typing-prefix{

    color:#374151;

}

.typing-text{

    color:#16A34A;

}

.typing-cursor{

    width:3px;

    height:32px;

    background:#16A34A;

    animation:blink .8s infinite;

}

@keyframes blink{

0%,50%{

opacity:1;

}

51%,100%{

opacity:0;

}

}

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

.hero-description{

    font-size:18px;

    line-height:1.9;

    color:var(--hero-muted);

    margin-bottom:34px;

}

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

.hero-rating{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:38px;

}

.hero-stars{

    display:flex;

    gap:4px;

    color:#FBBF24;

    font-size:22px;

}

.hero-rating-text h4{

    margin:0;

    font-size:20px;

    color:var(--hero-dark);

    font-weight:700;

}

.hero-rating-text p{

    margin:4px 0 0;

    color:var(--hero-muted);

    font-size:15px;

    font-weight:600;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

.btn-primary-hero,

.btn-secondary-hero{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 28px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;

}

.btn-primary-hero{

    background:linear-gradient(
        135deg,
        #16A34A,
        #15803D
    );

    color:#fff;

    box-shadow:
    0 15px 35px rgba(21,128,61,.25);

}

.btn-primary-hero:hover{

    transform:translateY(-5px);

    color:#fff;

    box-shadow:
    0 25px 45px rgba(21,128,61,.35);

}

.btn-secondary-hero{

    border:2px solid #16A34A;

    color:#15803D;

    background:#fff;

}

.btn-secondary-hero:hover{

    background:#FF0000;

    color:#fff;

    border-color:#FF0000;

    transform:translateY(-5px);

}

/*==================================================
                RIGHT
==================================================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

/*==================================================
            PRODUCT WRAPPER
==================================================*/

.hero-product-wrapper{

    position:relative;

    width:min(100%,520px);

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.hero-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(

        rgba(34,197,94,.22),

        transparent 70%

    );

    filter:blur(35px);

    z-index:0;

}

/*==================================================
                PRODUCT
==================================================*/

.hero-product{

    position:relative;

    z-index:2;

    width:100%;

    max-width:500px;

    height:auto;

    display:block;

    user-select:none;

    -webkit-user-drag:none;

    filter:drop-shadow(
        0 30px 50px rgba(0,0,0,.18)
    );

    transition:
        transform .45s ease;

}

.hero-product:hover{

    transform:translateY(-10px);

}

/*==================================================
            SCROLL BUTTON
==================================================*/

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#15803D;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    animation:heroScroll 2s infinite;

}

.hero-scroll i{

    font-size:28px;

}

@keyframes heroScroll{

    0%{

        transform:translate(-50%,0);

    }

    50%{

        transform:translate(-50%,8px);

    }

    100%{

        transform:translate(-50%,0);

    }

}

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

/*==========================
        LAPTOP
===========================*/

@media (max-width:1400px){

.hero-wrapper{

gap:50px;

}

.hero-title{

font-size:58px;

}

.hero-product{

max-width:440px;

}

.hero-glow{

width:360px;

height:360px;

}

}

/*==========================
        TABLET
===========================*/

@media (max-width:992px){

.hero-section{

padding:70px 0 40px;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:45px;

text-align:center;

}

.hero-content{

max-width:700px;

margin:auto;

order:2;

}

.hero-right{

order:1;

}

.hero-rating{

justify-content:center;

}

.hero-buttons{

justify-content:center;

}

.hero-product{

max-width:420px;

}

.hero-glow{

width:330px;

height:330px;

}

.hero-scroll{

display:none;

}

}

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

@media (max-width:768px){

.hero-section{

padding:40px 0;

min-height:auto;

}

.hero-wrapper{

gap:30px;

}

.hero-title{

font-size:38px;

line-height:1.15;

margin-bottom:15px;

}

.hero-typewriter{

justify-content:center;

font-size:24px;

margin-bottom:20px;

}

.typing-cursor{

height:26px;

}

.hero-description{

font-size:16px;

line-height:1.8;

margin-bottom:25px;

padding:0 5px;

}

.hero-rating{

flex-direction:column;

gap:10px;

margin-bottom:30px;

}

.hero-stars{

justify-content:center;

}

.hero-buttons{

flex-direction:column;

width:100%;

gap:14px;

}

.btn-primary-hero,

.btn-secondary-hero{

width:100%;

padding:15px 20px;

font-size:16px;

}

.hero-product{

width:100%;

max-width:320px;

}

.hero-glow{

width:260px;

height:260px;

filter:blur(28px);

}

.hero-badge{

font-size:14px;

padding:9px 16px;

}

}

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

@media (max-width:480px){

.hero-title{

font-size:32px;

}

.hero-typewriter{

font-size:20px;

}

.hero-description{

font-size:15px;

}

.hero-product{

max-width:270px;

}

.hero-glow{

width:220px;

height:220px;

}

.hero-badge{

font-size:13px;

}

}

/*==================================================
            SAFE AREA (iPhone)
==================================================*/

.hero-section{

padding-top:max(40px,env(safe-area-inset-top));

padding-bottom:max(40px,env(safe-area-inset-bottom));

}

/*==================================================
            PERFORMANCE
==================================================*/

.hero-product,

.hero-glow{

backface-visibility:hidden;

-webkit-backface-visibility:hidden;

transform:translateZ(0);

will-change:transform;

}

.hero-bg::after{

content:"";

position:absolute;

inset:0;

background:url("/images/patterns/herbal-pattern.svg");

opacity:.03;

background-size:350px;

pointer-events:none;

}

.typing-cursor{

animation:
blink .8s infinite,
pulse 1.6s infinite;

}

@keyframes pulse{

0%,100%{

transform:scaleY(1);

}

50%{

transform:scaleY(1.2);

}

}