:root{
    --primary:#01241F;
    --secondary:#00584b;
    --light:#f5fffc;
    --white:#ffffff;
    --text:#062b25;

    --gold:#f8d56d;
    --gold-light:#ffe89a;

    --shadow:0 20px 50px rgba(0,57,48,.12);
}


/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}


/* =========================
   BODY
========================= */

body{

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

    background-color:#003930;

    overflow-x:hidden;

    position:relative;

    /*
    IMPORTANT:
    Body ka background direct use nahi kar rahe.
    Fixed background layer neeche banayi gayi hai.
    Isse click/focus/animation par BG disappear nahi hoga.
    */
}


/* =========================
   FIXED BACKGROUND IMAGE
========================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    background-image:
        linear-gradient(
            rgba(0,57,48,.10),
            rgba(0,57,48,.10)
        ),
        url("../images/bg.png");

    background-repeat:no-repeat;

    background-position:center top;

    background-size:cover;

    z-index:-10;

    pointer-events:none;

}


/* Dark overlay */

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(0,57,48,0) 25%,
            rgba(0,20,17,.20) 100%
        );

    z-index:-9;

    pointer-events:none;

}


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

.bg-circle{

    position:fixed;

    border-radius:50%;

    filter:blur(30px);

    z-index:-8;

    pointer-events:none;

}

.one{

    width:300px;
    height:300px;

    background:#0c9f7d22;

    top:-120px;
    left:-120px;

}

.two{

    width:260px;
    height:260px;

    background:#00393022;

    right:-80px;
    top:180px;

}

.three{

    width:350px;
    height:350px;

    background:#00a88418;

    bottom:-120px;
    left:-150px;

}


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

.hero{

    width:100%;

    min-height:100vh;

    padding:30px 15px 60px;

    position:relative;

    z-index:1;

}

.main-card{

    text-align:center;

}


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

.top-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px 24px;

    border-radius:40px;

    background:
        linear-gradient(
            135deg,
            #003930,
            #006d5b
        );

    color:#fff;

    font-size:13px;

    font-weight:700;

    border:1px solid rgba(248,213,109,.65);

    box-shadow:

        0 10px 30px
        rgba(0,57,48,.35),

        0 0 15px
        rgba(248,213,109,.10);

    animation:float 3s infinite;

}


/* =========================
   LOGO
========================= */

.logo-box{

    width:120px;
    height:120px;

    margin:30px auto;

    border-radius:20px;

    background:#01241F;

    display:flex;

    align-items:center;
    justify-content:center;

    border:2px solid var(--gold);

    box-shadow:

        0 20px 60px
        rgba(0,57,48,.35),

        0 0 20px
        rgba(248,213,109,.15),

        inset 0 2px 6px
        rgba(255,255,255,.12);

    transition:.4s;

    overflow:hidden;

}

.logo-box:hover{

    transform:translateY(-8px);

    box-shadow:

        0 25px 65px
        rgba(0,57,48,.45),

        0 0 30px
        rgba(248,213,109,.25);

}

.logo-box img{

    width:85px;

    max-width:85%;

    height:auto;

    object-fit:contain;

}


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

h1{

    font-size:46px;

    font-weight:800;

    color:#f8d56d;

    margin-bottom:12px;

    text-shadow:

        0 3px 8px
        rgba(0,0,0,.35),

        0 0 15px
        rgba(248,213,109,.15);

}


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

.main-card p{

    color:#f0f5f3;

    font-size:16px;

    line-height:30px;

    margin-bottom:25px;

    text-shadow:
        0 2px 5px rgba(0,0,0,.25);

}


/* =========================
   DOWNLOAD BUTTON
========================= */

.download-btn{

    position:relative;

    width:100%;

    height:64px;

    border:3px solid #f8d56d;

    border-radius:50px;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #270039,
            #8403ce
        );

    color:#fff;

    font-size:18px;

    font-weight:700;

    box-shadow:

        0 10px 30px
        rgba(0,57,48,.35),

        0 0 15px
        rgba(248,213,109,.12);

    animation:pulseGlow 2s infinite;

    transition:.3s ease;

    outline:none;

}


/* Button icon */

.download-btn i{

    margin-right:7px;

    color:#f8d56d;

}


/* Hover */

.download-btn:hover{

    transform:translateY(-4px) scale(1.03);

    animation-play-state:paused;

    box-shadow:

        0 15px 35px
        rgba(0,57,48,.45),

        0 0 30px
        rgba(0,184,148,.35),

        0 0 15px
        rgba(248,213,109,.25);

}


/* Click */

.download-btn:active{

    transform:scale(.97);

}


/* Focus ke baad bhi BG/color change nahi hoga */

.download-btn:focus,
.download-btn:focus-visible{

    outline:none;

    color:#fff;

}


/* =========================
   DOWNLOAD PULSE
========================= */

@keyframes pulseGlow{

    0%{

        transform:scale(1);

        box-shadow:

            0 0 0 0
            rgba(248,213,109,.45),

            0 10px 30px
            rgba(0,57,48,.35);

    }

    70%{

        transform:scale(1.03);

        box-shadow:

            0 0 0 18px
            rgba(248,213,109,0),

            0 18px 40px
            rgba(0,57,48,.45);

    }

    100%{

        transform:scale(1);

        box-shadow:

            0 0 0 0
            rgba(248,213,109,0),

            0 10px 30px
            rgba(0,57,48,.35);

    }

}


/* =========================
   FEATURE CARDS
========================= */

.feature{

    margin-top:22px;

    background:#01241F;

    backdrop-filter:blur(18px);

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

    border-radius:24px;

    padding:18px;

    display:flex;

    align-items:center;

    box-shadow:

        0 20px 50px
        rgba(0,20,15,.40);

    transition:.35s;

    border:2px solid #f8d56d;

    height:88px;

}


/* Card hover */

.feature:hover{

    transform:translateY(-8px);

    border-color:#ffe89a;

    box-shadow:

        0 25px 55px
        rgba(0,20,15,.50),

        0 0 20px
        rgba(248,213,109,.15);

}


/* Card click/focus */

.feature:focus,
.feature:focus-within{

    outline:none;

    background:#01241F;

}


/* =========================
   FEATURE ICON
========================= */

.icon{

    width:65px;

    height:65px;

    min-width:65px;

    background:
        linear-gradient(
            135deg,
            #003930,
            #00896c
        );

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:#f8d56d;

    margin-right:18px;

    box-shadow:

        0 15px 30px
        rgba(0,57,48,.35),

        inset 0 0 10px
        rgba(248,213,109,.08);

}


/* =========================
   FEATURE TEXT
========================= */

.feature h5{

    margin:0;

    font-size:22px;

    font-weight:700;

    color:white;

    text-align:left;

}

.feature span{

    display:block;

    font-size:14px;

    margin-top:4px;

    color:#c4d3cf;

    text-align:left;

}


/* =========================
   FEATURE ARROW
========================= */

.arrow{

    margin-left:auto;

    width:42px;

    height:42px;

    min-width:42px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #003930,
            #00584b
        );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#f8d56d;

    font-size:22px;

    border:1px solid #f8d56d;

    box-shadow:

        0 5px 15px
        rgba(0,0,0,.25);

}


/* Arrow hover */

.feature:hover .arrow{

    transform:translateX(4px);

    box-shadow:
        0 0 15px rgba(248,213,109,.25);

}


/* =========================
   STATS
========================= */

.stats{

    margin-top:31px;

    display:flex;

    justify-content:space-between;

    background:
        linear-gradient(
            135deg,
            #003930,
            #00584b
        );

    padding:25px;

    border-radius:28px;

    color:#fff;

    border:2px solid
        rgba(248,213,109,.65);

    box-shadow:

        0 20px 40px
        rgba(0,57,48,.30),

        0 0 20px
        rgba(248,213,109,.08);

}


.stats > div{

    flex:1;

    text-align:center;

}


.stats > div:not(:last-child){

    border-right:1px solid
        rgba(248,213,109,.35);

}


.stats h3{

    font-size:34px;

    font-weight:800;

    color:#f8d56d;

    margin-bottom:4px;

}


.stats p{

    margin:0;

    font-size:14px;

    color:#d8ebe6;

}


/* =========================
   BOTTOM PILL
========================= */

.bottom-pill{

    margin:30px auto;

    display:inline-flex;

    gap:10px;

    align-items:center;

    padding:14px 30px;

    background:#01241F;

    border:1px solid
        rgba(248,213,109,.70);

    border-radius:40px;

    font-weight:600;

    color:#fff;

    box-shadow:

        0 12px 35px
        rgba(0,57,48,.30),

        0 0 15px
        rgba(248,213,109,.08);

}


.bottom-pill i{

    color:#f8d56d;

}


/* =========================
   FLOATING
========================= */

@keyframes float{

    50%{

        transform:translateY(-5px);

    }

}


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

@media(max-width:576px){

    body::before{

        background-position:center top;

        /*
        Mobile par image ko stretch nahi karenge
        */

        background-size:cover;

    }


    .hero{

        padding:
            22px 15px 45px;

    }


    h1{

        font-size:36px;

    }


    .main-card p{

        font-size:14px;

        line-height:25px;

    }


    .top-badge{

        font-size:11px;

        padding:8px 18px;

    }


    .logo-box{

        width:105px;

        height:105px;

        margin:24px auto;

    }


    .logo-box img{

        width:75px;

    }


    .download-btn{

        height:60px;

        font-size:18px;

    }


    .feature{

        height:78px;

        padding:10px;

        border-radius:18px;

    }


    .icon{

        width:52px;

        height:52px;

        min-width:52px;

        border-radius:15px;

        font-size:23px;

        margin-right:12px;

    }


    .feature h5{

        font-size:15px;

    }


    .feature span{

        font-size:10px;

        margin-top:2px;

    }


    .arrow{

        width:34px;

        height:34px;

        min-width:34px;

        font-size:17px;

    }


    .stats{

        padding:18px 10px;

        border-radius:22px;

        margin-top:25px;

    }


    .stats h3{

        font-size:24px;

    }


    .stats p{

        font-size:10px;

    }


    .bottom-pill{

        margin:22px auto;

        padding:10px 18px;

        font-size:11px;

    }

}


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

@media(max-width:380px){

    h1{

        font-size:31px;

    }


    .feature{

        height:72px;

    }


    .feature h5{

        font-size:13px;

    }


    .feature span{

        font-size:9px;

    }


    .icon{

        width:47px;

        height:47px;

        min-width:47px;

        font-size:21px;

    }


    .arrow{

        width:30px;

        height:30px;

        min-width:30px;

        font-size:14px;

    }


    .download-btn{

        font-size:16px;

    }

}