/*==========================================================
HERO SECTION v1.1
Layout Foundation
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    min-height:calc(100vh - 84px);

    display:flex;

    align-items:center;

    background:var(--background);

    padding:90px 0 60px;

}

.hero-container{

    width:min(92%,1360px);

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:40px;

    align-items:center;

    position:relative;

    z-index:2;

}

.hero-left{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

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

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.hero-gradient{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.45;

}

.hero-gradient-left{

    width:520px;

    height:520px;

    background:#DDF3E5;

    top:-120px;

    left:-120px;

}

.hero-gradient-right{

    width:420px;

    height:420px;

    background:rgba(46,155,87,.08);

    right:-80px;

    bottom:-60px;

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(46,155,87,.035) 1px, transparent 1px),

        linear-gradient(90deg, rgba(46,155,87,.035) 1px, transparent 1px);

    background-size:42px 42px;

    mask-image:radial-gradient(circle, rgba(0,0,0,1) 35%, transparent 95%);

}

.hero-noise{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:radial-gradient(circle, #1D2433 1px, transparent 1px);

    background-size:26px 26px;

}

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

@media(max-width:1024px){

    .hero{

        padding:120px 0 80px;

    }

    .hero-container{

        grid-template-columns:1fr;

        gap:70px;

        text-align:center;

    }

    .hero-left{

        align-items:center;

    }

}

@media(max-width:768px){

    .hero{

        min-height:auto;

        padding:90px 0 50px;

    }

    .hero-container{

        width:92%;

        gap:50px;

    }

}

@media(max-width:480px){

    .hero{

        padding:100px 0 60px;

    }

}



/*==========================================================
HERO LEFT CONTENT
==========================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(221,243,229,.65);

    border:1px solid rgba(46,155,87,.12);

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:28px;

}

.hero-badge-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 12px rgba(46,155,87,.55);

}

.hero-title{

    max-width:700px;

    font-size:clamp(46px,6vw,68px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

    color:var(--text);

    margin-bottom:18px;

}

.hero-title span{

    color:var(--primary);

}

.hero-description{

    max-width:620px;

    font-size:19px;

    line-height:1.9;

    color:var(--text-light);

    margin-bottom:34px;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:34px;

}

.hero-primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 32px;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.35s ease;

    text-decoration:none;

}

.hero-primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(46,155,87,.28);

}

.hero-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 32px;

    border-radius:18px;

    border:1px solid rgba(46,155,87,.12);

    background:#fff;

    color:var(--text);

    font-weight:600;

    text-decoration:none;

    transition:.35s ease;

}

.hero-secondary-btn:hover{

    border-color:rgba(46,155,87,.28);

    transform:translateY(-3px);

}


/*==========================================================
SUPPORTED PRODUCTS
==========================================================*/

.hero-supported{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:0;

}

.supported-label{

    color:var(--primary);

    font-weight:700;

    font-size:15px;

}

.hero-supported p{

    margin:0;

    color:var(--text-light);

    font-size:15px;

    line-height:1.7;

}



/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

    display:none;

}

.scroll-indicator span{

    width:42px;

    height:2px;

    background:var(--primary);

    border-radius:10px;

}


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

@media(max-width:768px){

    .hero-title{

        font-size:42px;

        text-align:center;

    }

    .hero-description{

        font-size:17px;

        text-align:center;

    }

    .hero-buttons{

        width:100%;

        justify-content:center;

    }

    .hero-primary-btn,

    .hero-secondary-btn{

        width:100%;

    }

    .hero-supported{

        justify-content:center;

        text-align:center;

    }

    .scroll-indicator{

        justify-content:center;

    }

    .scan-card{

        min-height:auto;

        padding:26px;

        border-radius:28px;

    }

    .card-header{

        gap:12px;

        flex-wrap:wrap;

    }

    .card-category{

        width:100%;

        justify-content:center;

    }

    .product-image{

        width:180px;

        height:180px;

        padding:14px;

    }

    .product-image img{

        width:130px;

        height:130px;

    }

    .card-product h2{

        font-size:21px;

    }


    /*==========================================================
    MOBILE GLASS OPTIMIZATION
    ==========================================================*/

    .scan-card{

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

        backdrop-filter:none;

        -webkit-backdrop-filter:none;

        border:1px solid rgba(46,155,87,.08);

    }

    .score-value{

        font-size:54px;

    }

    .score-bar{

        max-width:100%;

    }


    .analysis-list{

        gap:10px;

    }

    .analysis-list li{

        padding:12px 14px;

        font-size:14px;

    }


    .ingredients-list li{

        justify-content:flex-start;

        align-items:flex-start;

        flex-direction:column;

        gap:6px;

    }

    .ingredient-status{

        min-width:auto;

    }

    .ingredient-name{

        width:100%;

        text-align:left;

    }

    .ingredients-section{

        text-align:left;

    }

    .ingredients-section h3{

        text-align:left;

    }

    .summary-section{

        text-align:left;

    }

    .card-product{

        align-items:flex-start;

    }

    .card-product h2{

        text-align:left;

    }

    .card-header{

        align-items:flex-start;

    }


    .summary-section{

        width:100%;

        text-align:left;

    }

    .summary-section p{

        font-size:14px;

    }

    .analysis-status{

        font-size:12px;

    }

}



/*==========================================================
HERO v1.4
SCANSKRIT ANALYSIS ENGINE
==========================================================*/

/*==========================================================
ANALYSIS ENGINE CONTAINER
v1.4.1
==========================================================*/

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1800px;

}

/*------------------------------------
MAIN ENGINE
------------------------------------*/

.scan-card{

    position:relative;

    animation:cardFloat 7s ease-in-out infinite;

    width:100%;

    max-width:500px;

    min-height:650px;

    --theme-color:#2E9B57;

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    border:1px solid color-mix(in srgb,var(--theme-color) 20%,white);

    border-radius:34px;

    overflow:hidden;

    padding:34px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:28px;

    box-shadow:

        0 30px 80px rgba(29,36,51,.08),

        0 8px 24px rgba(29,36,51,.05);

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .45s ease,

        background .45s ease;

    z-index:2;

}

/*------------------------------------
FLOAT EFFECT
------------------------------------*/



@keyframes cardFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*------------------------------------
BACKGROUND GLOW
------------------------------------*/

.scan-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:36px;

    background:

    radial-gradient(

        circle at top,

        color-mix(

            in srgb,

            var(--theme-color) 16%,

            transparent

        )

        transparent 65%

    );

    z-index:-1;

}

.scan-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-110px;

    top:-110px;

    background:

    radial-gradient(

        color-mix(

            in srgb,

            var(--theme-color) 20%,

            transparent

        )

        transparent 72%

    );

    filter:blur(18px);

    pointer-events:none;

}

/*------------------------------------
HOVER
------------------------------------*/

.scan-card:hover{

    transform:

        translateY(-10px)

        rotateX(3deg)

        rotateY(-3deg);

    box-shadow:

        0 45px 90px rgba(29,36,51,.12),

        0 12px 30px rgba(29,36,51,.08);

}


/*==========================================================
ANALYSIS ENGINE HEADER
v1.4.2
==========================================================*/

.card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-bottom:20px;

    border-bottom:1px solid rgba(29,36,51,.08);

}

.card-status{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    font-weight:700;

    color:var(--text);

    letter-spacing:.5px;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 12px rgba(46,155,87,.45);

    animation:livePulse 2s infinite;

}

@keyframes livePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.4);

        opacity:.45;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

.card-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:

        color-mix(

            in srgb,

            var(--theme-color) 14%,

            white

        );

        color:

    var(--theme-color);

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    transition:.4s ease;

}



/*==========================================================
PRODUCT SECTION
v1.4.3
==========================================================*/

.card-product{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:22px;

}

.product-image{

    position:relative;

    width:220px;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:18px;

    border-radius:28px;

    background:linear-gradient(

        180deg,

        rgba(255,255,255,.98),

        color-mix(

            in srgb,

            var(--theme-color) 18%,

            white

        )

    );

    border:1px solid
        color-mix(
            in srgb,
            var(--theme-color) 22%,
            white
        );

}

/* Soft spotlight */

.product-image::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(

        color-mix(

            in srgb,

            var(--theme-color) 18%,

            transparent

        )

        transparent 72%

    );

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

}

@keyframes spotlightPulse{

    0%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.12);

        opacity:.8;

    }

    100%{

        transform:scale(1);

        opacity:.5;

    }

}

/* Product image */

.product-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    display:block;

    position:relative;

    z-index:2;

    transition:
        transform .5s ease,
        opacity .5s ease;

}

/* Product name */

.card-product h2{

    width:100%;

    font-size:24px;

    font-weight:700;

    color:var(--text);

    text-align:center;

    line-height:1.35;

    margin:0;

    padding-bottom:18px;

    border-bottom:1px solid #E3E9E6;

}





/*==========================================================
KEY INSIGHTS
v1.4.5
==========================================================*/

.analysis-list{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:0;

    padding:0;

}

.analysis-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:14px 16px;

    border-radius:16px;

    background:#ffffff;

    border:1px solid rgba(46,155,87,.08);

    font-size:15px;

    font-weight:500;

    color:var(--text);

    line-height:1.6;

    transition:all .3s ease;

}

.analysis-list li:hover{

    transform:translateX(4px);

    border-color:rgba(46,155,87,.22);

    box-shadow:0 8px 18px rgba(29,36,51,.05);

}

/* Positive */

.analysis-list li:nth-child(1){

    border-left:4px solid #27AE60;

}

/* Positive */

.analysis-list li:nth-child(2){

    border-left:4px solid #27AE60;

}

/* Warning */

.analysis-list li:nth-child(3){

    border-left:4px solid #F39C12;

}


/*==========================================================
PRODUCT DIVIDER
v1.4.6
==========================================================*/

.product-divider{

    width:100%;

    height:1px;

    background:rgba(29,36,51,.12);

    margin:20px 0 22px;

}

/*==========================================================
INGREDIENTS
==========================================================*/

.ingredients-list{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.ingredients-list li{

    display:grid;

    grid-template-columns:120px 1fr;

    align-items:center;

    column-gap:18px;

    padding:4px 0;

}

.ingredient-status{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:700;

}


.ingredient-name{

    font-size:15px;

    color:var(--text);

}

.good{

    color:#2E9B57;

}

.moderate{

    color:#C68600;

}

.caution{

    color:#D64541;

}


/*==========================================================
SCANSKRIT ANALYSIS
v1.4.7
==========================================================*/

.summary-section{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.summary-section h3{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:var(--text);

}

.analysis-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.analysis-status.recommended{

    background:#DDF3E5;

    color:#2E9B57;

}

.analysis-status.awareness{

    background:#FFF3D8;

    color:#C68600;

}

.analysis-status.occasional{

    background:#FFE9D6;

    color:#E67E22;

}

.analysis-status.avoid{

    background:#FFE2E2;

    color:#C62828;

    border:1px solid rgba(198,40,40,.18);

}

.summary-section p{

    margin:0;

    line-height:1.7;

    color:var(--text-light);

    font-size:15px;

}



/*==========================================================
SCAN STATUS
v2.0.3
==========================================================*/

.live-dot.scanning{

    background:#F59E0B;

    box-shadow:

        0 0 0 rgba(245,158,11,.5);

    animation:scanPulse .8s infinite;

}

@keyframes scanPulse{

    0%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(245,158,11,.45);

    }

    70%{

        transform:scale(1.25);

        box-shadow:0 0 0 10px rgba(245,158,11,0);

    }

    100%{

        transform:scale(1);

        box-shadow:0 0 0 0 rgba(245,158,11,0);

    }

}



/*==========================================================
SCAN BEAM
v2.1
==========================================================*/

.product-image{

    position:relative;

    overflow:hidden;

}

.scan-beam{

    position:absolute;

    left:0;

    top:-45%;

    width:100%;

    height:54px;

    opacity:0;

    z-index:5;

    pointer-events:none;

    overflow:hidden;

    border-radius:8px;

    background:

    linear-gradient(

        to bottom,

        transparent 0%,

        color-mix(in srgb,var(--theme-color) 12%,transparent) 18%,

        color-mix(in srgb,var(--theme-color) 35%,transparent) 42%,

        rgba(255,255,255,.95) 50%,

        color-mix(in srgb,var(--theme-color) 35%,transparent) 58%,

        color-mix(in srgb,var(--theme-color) 12%,transparent) 82%,

        transparent 100%

    );

    filter:blur(.2px);

}

.scan-beam::after{

    content:"";

    position:absolute;

    top:0;

    left:-35%;

    width:35%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    animation:beamShine .8s linear infinite;

}

@keyframes beamShine{

    from{

        left:-35%;

    }

    to{

        left:135%;

    }

}

.scan-beam.active{

    opacity:1;

    animation:

        scanBeam 1.7s linear,

        beamGlow .8s ease-in-out infinite;

}

@keyframes beamGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.35);

    }

    100%{

        filter:brightness(1);

    }

}

@keyframes scanBeam{

    from{

        top:-30%;

    }

    to{

        top:115%;

    }

}

/*==========================================================
CARD ANALYSIS
v2.2
==========================================================*/



.scan-card.processing{

    opacity:.45;

    transform:scale(.985);

}



/*==========================================================
PRODUCT THEMES
v2.4
==========================================================*/



/* Beauty */

.scan-card.beauty{

    --accent:#F4B8D6;

}

/* Namkeen */

.scan-card.namkeen{

    --accent:#FFD34D;

}

/* Beverage */

.scan-card.beverage{

    --accent:#D62828;

}

/* Supplement */

.scan-card.supplement{

    --accent:#2B2B2B;

}

/* Kids */

.scan-card.kids{

    --accent:#49A6FF;

}