:root{

    --bg:#050505;

    --text:#ffffff;

    --muted:#b7b7b7;

    --glass:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.12);

}



*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#000;

    color:#fff;

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

}



.navbar{

    position:fixed;

    top:0;

    left:0;

    right:0;



    display:flex;

    justify-content:space-between;

    align-items:center;



    padding:22px 8%;



    z-index:1000;



    backdrop-filter:blur(18px);

    background:rgba(10,10,10,.25);

}



.logo{

    font-weight:800;

    letter-spacing:4px;

}



.nav-links{

    display:flex;

    gap:30px;

    list-style:none;

}



.nav-links a{

    color:white;

    text-decoration:none;

}



.menu-toggle{

    display:none;

    color:white;

    background:none;

    border:none;

    font-size:28px;

}



.hero{

    position:relative;

    height:100vh;



    display:flex;

    justify-content:center;

    align-items:center;



    text-align:center;



    overflow:hidden;

}



.hero-bg{

    position:absolute;

    inset:0;



    background:

    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.75)

    ),

    url("../hero.jpg");



    background-size:cover;

    background-position:center;



    transform:scale(1.1);

    z-index:-1;

}



.hero-content{

    max-width:900px;

    padding:20px;

}



.hero h1{

    font-size:clamp(4rem,10vw,8rem);

    line-height:.9;

}



.hero p{

    margin-top:25px;

    color:#ddd;

    font-size:1.2rem;

}



.hero-buttons{

    margin-top:40px;



    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}



.btn{

    display:inline-block;



    padding:15px 30px;



    border-radius:999px;



    border:1px solid rgba(255,255,255,.2);



    color:white;

    text-decoration:none;



    transition:.3s;

}



.btn:hover{

    background:white;

    color:black;

}



.btn-glass{

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

}



.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    font-size:28px;

}



section{

    padding:120px 10%;

}



h2{

    font-size:3rem;

    text-align:center;

    margin-bottom:20px;

}



.section-text{

    text-align:center;

    color:var(--muted);

    margin-bottom:60px;

}



.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

}



.glass{

    background:var(--glass);

    backdrop-filter:blur(20px);



    border:1px solid var(--border);



    box-shadow:0 8px 30px rgba(0,0,0,.25);

}



.card{

    padding:35px;

    border-radius:24px;

    transition:.3s;

}



.card:hover{

    transform:translateY(-8px);

}



.contact-box{

    max-width:800px;

    margin:auto;

    padding:40px;

    border-radius:24px;

}



form{

    display:flex;

    flex-direction:column;

    gap:15px;

}



input,

textarea{

    padding:16px;



    border:none;

    border-radius:12px;



    background:#151515;

    color:white;

}



textarea{

    min-height:180px;

}



footer{

    text-align:center;

    padding:50px;

    color:#888;

}



.reveal{

    opacity:0;

    transform:translateY(50px);



    transition:

        opacity 1s ease,

        transform 1s ease;

}



.reveal.visible{

    opacity:1;

    transform:none;

}



@media(max-width:768px){



    .menu-toggle{

        display:block;

    }



    .nav-links{

        display:none;

    }



    .nav-links.active{

        display:flex;



        position:absolute;

        top:70px;

        right:10px;



        padding:20px;



        background:#111;



        flex-direction:column;

        border-radius:12px;

    }



    .hero h1{

        font-size:4rem;

    }

}

.badges{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px;



    max-width:1000px;

    margin:40px auto 0;

}



.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;



    padding:12px 22px;



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

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



    backdrop-filter:blur(20px);

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



    border-radius:999px;



    color:#ffffff;



    font-size:0.95rem;

    font-weight:500;



    transition:all .3s ease;

}



.badge:hover{

    transform:translateY(-3px);



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



    border-color:rgba(255,255,255,0.25);



    box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.ticker{

    overflow:hidden;

    width:100%;

    margin-top:40px;

}



.ticker-track{



    display:flex;

    align-items:center;



    gap:24px;



    width:max-content;



    animation:ticker 35s linear infinite;

}



.ticker-item{



    display:flex;

    align-items:center;



    gap:12px;



    padding:12px 20px;



    border-radius:999px;



    background:var(--glass);



    border:1px solid var(--border);



    backdrop-filter:blur(20px);

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



    white-space:nowrap;



    transition:.3s;

}



.ticker-item:hover{



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



    transform:translateY(-3px);

}



.ticker-item img{



    width:24px;

    height:24px;



    opacity:.9;

}



@keyframes ticker{



    from{

        transform:translateX(0);

    }



    to{

        transform:translateX(-50%);

    }

}


.ticker-icon{

    width:22px;
    height:22px;

    stroke:currentColor;
    stroke-width:2;

    fill:none;

    stroke-linecap:round;
    stroke-linejoin:round;

    flex-shrink:0;

    opacity:.9;
}

.ticker-item svg{
    overflow:visible;
}

.social-links{



    margin-top:30px;



    display:flex;

    justify-content:center;

    align-items:center;



    gap:22px;

}



.social-icon{



    width:26px;

    height:26px;



    fill:rgba(255,255,255,.7);



    transition:all .25s ease;

}



.social-links a:hover .social-icon{



    fill:#ffffff;



    transform:translateY(-3px) scale(1.08);

}