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

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}



/* =========================
   GLOBAL SETTINGS
========================= */

html{

    scroll-behavior: smooth;
}


body{

    font-family: Arial, sans-serif;

    background: #030712;

    color: white;

    overflow-x: hidden;
}



/* =========================
   GLOBAL TRANSITIONS
========================= */

button,
a,
.hero-card,
.step-card,
.trend-card,
.impact-card{

    transition: all 0.3s ease;
}



/* =========================
   GLOBAL SECTION STYLE
========================= */

section{

    position: relative;
}





/* =========================================================
   NAVBAR
========================================================= */

.navbar{

    width: 92%;
    max-width:1400px;

    margin: 20px auto;

    padding: 16px 28px;

    background:
    rgba(10,15,30,0.92);

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 18px;

    backdrop-filter: blur(20px);

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: sticky;

    top: 15px;

    z-index: 1000;

    box-shadow:
    0 8px 30px rgba(0,0,0,0.25),
    0 0 20px rgba(124,58,237,0.12);
}




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

.logo-section{

    display: flex;

    align-items: center;

    gap: 16px;
}



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

.logo-section img{

    width: 58px;

    height: 58px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid rgba(139,92,246,0.7);

    box-shadow:
    0 0 18px rgba(139,92,246,0.45);

    background: white;

    padding: 3px;

    transition: all 0.3s ease;
}


.logo-section img:hover{

    transform: scale(1.05);

    box-shadow:
    0 0 22px rgba(139,92,246,0.7);
}



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

.logo-section h1{

    font-size: 26px;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: white;
}




/* =========================
   NAVIGATION LINKS
========================= */

.nav-links{

    display: flex;

    align-items: center;

    gap: 12px;

    list-style: none;
}



/* =========================
   NAV LINKS
========================= */

.nav-links a{

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: white;

    padding: 12px 18px;

    border-radius: 14px;

    font-size: 17px;

    font-weight: 500;

    transition: all 0.3s ease;
}



/* =========================
   NAV HOVER
========================= */

.nav-links a:hover{

    background:
    rgba(139,92,246,0.16);

    color: #d8b4fe;

    transform: translateY(-2px);
}



/* =========================
   ACTIVE NAV
========================= */

.active-nav{

    background:
    rgba(139,92,246,0.22);

    border:
    1px solid rgba(255,255,255,0.08);

    color: #d8b4fe !important;
}



/* =========================
   LOGIN BUTTON
========================= */

.login-nav-btn{

    background:
    linear-gradient(
    135deg,
    #7c3aed,
    #4f46e5
    );

    color: white !important;
}


.login-nav-btn:hover{

    transform: translateY(-2px);

    background:
    linear-gradient(
    135deg,
    #8b5cf6,
    #6366f1
    );
}



/* =========================
   MENU TOGGLE
========================= */

.menu-toggle{

    display: none;

    font-size: 28px;

    color: white;

    cursor: pointer;
}




/* =========================================================
   LANGUAGE DROPDOWN
========================================================= */

.language-dropdown{

    position: relative;
}



/* =========================
   LANGUAGE BUTTON
========================= */

.language-btn{

    display: flex;

    align-items: center;

    gap: 10px;

    background: transparent;

    border: none;

    color: white;

    padding: 12px 18px;

    border-radius: 14px;

    font-size: 17px;

    cursor: pointer;

    transition: all 0.3s ease;
}


.language-btn:hover{

    background:
    rgba(139,92,246,0.16);

    color: #d8b4fe;
}



/* =========================
   LANGUAGE MENU
========================= */

.language-menu{

    position: absolute;

    top: 65px;

    right: 0;

    width: 180px;

    background: #111827;

    border:
    1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    overflow: hidden;

    display: none;

    z-index: 1000;
}


.language-menu.show{

    display: block;
}


.language-menu a{

    display: block;

    padding: 14px 18px;

    text-decoration: none;

    color: white;
}


.language-menu a:hover{

    background:
    rgba(139,92,246,0.2);
}




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

@media(max-width:768px){



    .language-dropdown{

    display:none;

}

    .mobile-language-menu{

    display:block !important;
    }

    .navbar{

        padding: 14px 18px;

        position: relative;
    }


    .logo-section{

        gap: 12px;
    }


    .logo-section h1{

        font-size: 22px;
    }


    .logo-section img{

        width: 50px;

        height: 50px;
    }


    .menu-toggle{

        display: block;
    }


    .nav-links{

        display: none;

        position: absolute;

        top: 85px;

        right: 15px;

        width: 220px;

        background: #111827;

        border-radius: 20px;

        padding: 18px;

        flex-direction: column;

        gap: 14px;

        border:
        1px solid rgba(255,255,255,0.08);

        box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
    }


    .nav-links.active{

        display: flex;
    }


    .nav-links a{

        width: 100%;
    }
}


/* =========================
   MOBILE LANGUAGE MENU
========================= */

.mobile-language-menu{

    display: none;
    width: 100%;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 12px;
    margin-top: 6px;
}


.mobile-language-header{

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: white;

    cursor: pointer;

    padding: 12px 18px;

    border-radius: 12px;
}


.mobile-language-header:hover{

    background:
    rgba(139,92,246,0.16);
}


.mobile-language-options{

    display: none;

    list-style: none;

    margin-top: 10px;
}


.mobile-language-options.show{

    display: block;
}


.mobile-language-option{

    display: block;

    width: 100%;

    padding: 12px 18px;

    color: white;

    text-decoration: none;

    border-radius: 10px;
}


.mobile-language-option:hover{

    background:
    rgba(139,92,246,0.16);
}







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

.hero{

    width: 100%;

    padding: 40px 20px 80px;

    display: flex;

    justify-content: center;

    overflow: hidden;
}



/* =========================
   HERO GLOW EFFECTS
========================= */

.hero::before{

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    background:
    rgba(124,58,237,0.22);

    filter: blur(120px);

    top: -180px;

    left: -150px;
}


.hero::after{

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    background:
    rgba(59,130,246,0.16);

    filter: blur(120px);

    bottom: -200px;

    right: -140px;
}



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

.hero-card{

    width: 100%;

    max-width: 1400px;

    background:
    linear-gradient(
    to right,
    #2835d8,
    #7e22ce
    );

    border-radius: 35px;

    padding: 55px 70px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 60px;

    border:
    1px solid rgba(255,255,255,0.15);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.4);

    position: relative;

    z-index: 1;
}



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

.hero-left{

    flex: 1;
}


.hero-left h2{

    font-size: 78px;

    line-height: 1;

    margin-bottom: 25px;
}


.hero-left h3{

    font-size: 28px;

    font-weight: 400;

    color:
    rgba(255,255,255,0.9);

    margin-bottom: 20px;
}



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

.hero-line{

    width: 80px;

    height: 4px;

    background: #a855f7;

    border-radius: 10px;

    margin-bottom: 35px;
}



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

.hero-left p{

    max-width: 520px;

    font-size: 22px;

    line-height: 1.8;

    color:
    rgba(255,255,255,0.9);

    margin-bottom: 45px;
}



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

.hero-buttons{

    display: flex;

    gap: 20px;

    flex-wrap: wrap;
}



/* =========================
   COMMON HERO BUTTON
========================= */

.hero-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 30px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;
}



/* =========================
   PRIMARY BUTTON
========================= */

.primary-btn{

    background: white;

    color: #4338ca;
}



/* =========================
   SECONDARY BUTTON
========================= */

.secondary-btn{

    background:
    rgba(255,255,255,0.08);

    border:
    2px solid rgba(255,255,255,0.4);

    color: white;
}



/* =========================
   HERO BUTTON HOVER
========================= */

.hero-btn:hover{

    transform: translateY(-4px);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.25);
}



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

.hero-right{

    flex: 1;

    height: 500px;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
}



/* =========================
   MAIN CIRCLE
========================= */

.hero-main-circle{

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background:
    rgba(255,255,255,0.08);

    border:
    2px solid rgba(255,255,255,0.2);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 90px;

    backdrop-filter: blur(10px);
}



/* =========================
   SMALL CARDS
========================= */

.small-card{

    position: absolute;

    padding: 14px 22px;

    border-radius: 16px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.1);

    backdrop-filter: blur(10px);

    font-size: 16px;
}



/* =========================
   CARD POSITIONS
========================= */

.top-small{

    top: 40px;
}


.left-small{

    left: 20px;

    bottom: 100px;
}


.right-small{

    right: 20px;

    bottom: 100px;
}






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

.about{

    width: 100%;

    padding: 100px 20px;

    background: #0f172a;

    display: flex;

    justify-content: center;
}


.about-container{

    max-width: 900px;

    text-align: center;
}


.about-container h2{

    font-size: 45px;

    margin-bottom: 30px;
}


.about-container p{

    font-size: 20px;

    line-height: 1.8;

    color: #cbd5e1;

    margin-bottom: 25px;
}






/* =========================================================
   HOW IT WORKS
========================================================= */

.how-it-works{

    width: 100%;

    padding: 100px 20px;

    background: #111827;

    text-align: center;
}


.how-it-works h2{

    font-size: 45px;

    margin-bottom: 60px;
}



/* =========================
   STEP CONTAINER
========================= */

.steps-container{

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}



/* =========================
   STEP CARD
========================= */

.step-card{

    width: 280px;

    background:
    rgba(255,255,255,0.05);

    padding: 30px;

    border-radius: 20px;

    border:
    1px solid rgba(255,255,255,0.08);
}


.step-card:hover{

    transform: translateY(-10px);
}


.step-card h3{

    font-size: 24px;

    color: #c084fc;

    margin-bottom: 20px;
}


.step-card p{

    font-size: 18px;

    line-height: 1.7;

    color: #cbd5e1;
}






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

.trending-section{

    width: 90%;

    margin: 80px auto;
}



/* =========================
   TRENDING HEADER
========================= */

.trending-header{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;
}


.trending-header h2{

    font-size: 42px;
}


.view-all{

    text-decoration: none;

    color: #c084fc;

    font-size: 22px;

    font-weight: 600;
}


.view-all:hover{

    transform: translateX(5px);
}



/* =========================
   EMPTY TRENDING
========================= */

.empty-trending{

    background:
    rgba(255,255,255,0.05);

    backdrop-filter: blur(15px);

    border-radius: 30px;

    padding: 70px 40px;

    text-align: center;
}


.empty-icon{

    font-size: 70px;

    margin-bottom: 20px;
}


.empty-trending h3{

    font-size: 36px;

    margin-bottom: 15px;
}


.empty-trending p{

    font-size: 20px;

    color: #cbd5e1;

    line-height: 1.8;

    max-width: 650px;

    margin: auto;

    margin-bottom: 35px;
}



/* =========================
   REPORT BUTTON
========================= */

.start-report-btn{

    display: inline-block;

    text-decoration: none;

    background:
    linear-gradient(
    135deg,
    #4338ca,
    #9333ea
    );

    color: white;

    padding: 18px 38px;

    border-radius: 18px;

    font-size: 18px;

    font-weight: 600;
}


.start-report-btn:hover{

    transform: translateY(-4px);
}






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

.impact-section{

    width: 100%;

    padding: 100px 20px;

    background:
    linear-gradient(
    to right,
    #172554,
    #312e81
    );

    text-align: center;
}


.impact-section h2{

    font-size: 45px;

    margin-bottom: 60px;
}



/* =========================
   IMPACT CONTAINER
========================= */

.impact-container{

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}



/* =========================
   IMPACT CARD
========================= */

.impact-card{

    width: 260px;

    background:
    rgba(255,255,255,0.08);

    padding: 30px;

    border-radius: 20px;

    border:
    1px solid rgba(255,255,255,0.08);
}


.impact-card:hover{

    transform: translateY(-10px);
}


.impact-card h3{

    font-size: 28px;

    margin-bottom: 20px;
}


.impact-card p{

    font-size: 18px;

    line-height: 1.7;

    color: #e2e8f0;
}






/* =========================================================
   FOOTER
========================================================= */

.footer{

    width: 100%;

    background: #020617;

    padding-top: 80px;
}



/* =========================
   FOOTER CONTAINER
========================= */

.footer-container{

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

    gap: 40px;

    padding: 0 20px 60px;
}



/* =========================
   FOOTER SECTIONS
========================= */

.footer-section{

    max-width: 250px;
}


.footer-section h2,
.footer-section h3{

    margin-bottom: 20px;

    color: #c084fc;
}


.footer-section p{

    color: #cbd5e1;

    line-height: 1.7;
}



/* =========================
   FOOTER LINKS
========================= */

.footer-section ul{

    list-style: none;
}


.footer-section ul li{

    margin-bottom: 12px;
}


.footer-section ul li a{

    text-decoration: none;

    color: #cbd5e1;
}


.footer-section ul li a:hover{

    color: #c084fc;
}



/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom{

    text-align: center;

    padding: 20px;

    border-top:
    1px solid rgba(255,255,255,0.1);

    color: #94a3b8;
}






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

@media(max-width:768px){

    /* =========================
       NAVBAR
    ========================= */

    .navbar{

        padding: 14px 18px;

        position: relative;
    }


    .menu-toggle{

        display: block;
    }


    .nav-links{

        display: none;

        position: absolute;

        top: 85px;

        right: 15px;

        width: 220px;

        background: #111827;

        border-radius: 20px;

        padding: 18px;

        flex-direction: column;

        gap: 14px;
    }


    .nav-links.active{

        display: flex;
    }


    .nav-links a{

        width: 100%;
    }



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

    .hero{

        padding: 20px 12px;
    }


    .hero-card{

        flex-direction: column;

        padding: 40px 28px;

        gap: 25px;
    }


    .hero-left h2{

        font-size: 58px;
    }


    .hero-left h3{

        font-size: 22px;
    }


    .hero-left p{

        font-size: 18px;
    }


    .hero-right{

        display: none;
    }



    /* =========================
       TRENDING
    ========================= */

    .trending-header{

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .empty-trending{

        padding: 50px 25px;
    }



    /* =========================
       FOOTER
    ========================= */

    .footer-container{

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

}

/* =========================================================
   FOOTER SOCIAL LINKS
========================================================= */

.footer-social{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer-link{

    color:white;

    text-decoration:none;

    transition:0.3s;

}



.footer-link:hover{

    color:#9f7aea;

}



/* ==================================================
   CUSTOM MODAL
================================================== */

.custom-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(8px);

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.custom-modal.show{

    display:flex;

}

.modal-box{

    border:1px solid rgba(255,255,255,0.08);

box-shadow:
0 20px 50px rgba(0,0,0,0.4);

backdrop-filter:blur(12px);

    width:90%;

    max-width:420px;

    background:#071226;

    border:1px solid rgba(255,255,255,0.1);

    border-radius:20px;

    padding:30px;

    text-align:center;

    color:white;

    box-shadow:0 0 30px rgba(138,92,246,.35);

}

.modal-box h3{

    margin-bottom:15px;

}

.modal-box p{

    color:#cbd5e1;

    margin-bottom:25px;

}

.modal-buttons{

    display:flex;

    justify-content:center;

    gap:12px;

}

.modal-btn{

    border:none;

    cursor:pointer;

    border-radius:12px;

    padding:12px 22px;

    font-weight:600;

}

.cancel-btn{

    background:#334155;

    color:white;

}

.confirm-btn{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #4f46e5
    );

    color:white;

}