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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050510;
    color:#fff;
    overflow-x:hidden;
    cursor:none;
}

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

body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(140,0,255,.35),transparent 40%),
    radial-gradient(circle at 80% 30%,rgba(0,180,255,.25),transparent 40%),
    radial-gradient(circle at 50% 80%,rgba(255,0,255,.15),transparent 35%);

    animation:bgMove 12s ease-in-out infinite alternate;

    z-index:-6;
}

@keyframes bgMove{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.2) translateY(-40px);
    }

}

#particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-5;
}

canvas{
    display:block;
}


/* =========================
   CURSOR
========================= */

.cursor{
    width:16px;
    height:16px;

    background:#9b5cff;

    border-radius:50%;

    position:fixed;

    left:0;
    top:0;

    pointer-events:none;

    z-index:99999;

    box-shadow:
    0 0 15px #9b5cff,
    0 0 35px #9b5cff;

    transition:transform .12s linear;
}

.cursor-blur{
    width:220px;
    height:220px;

    background:rgba(155,92,255,.20);

    border-radius:50%;

    position:fixed;

    left:0;
    top:0;

    filter:blur(45px);

    pointer-events:none;

    z-index:99998;

    transition:.15s;
}


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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 7%;

    background:rgba(8,8,18,.45);

    backdrop-filter:blur(25px);

    border-bottom:1px solid rgba(155,92,255,.18);

    box-shadow:0 0 30px rgba(155,92,255,.15);

    z-index:1000;

    transition:.4s;
}

.logo3d{
    display:flex;
    align-items:center;

    gap:8px;

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

    font-size:42px;

    font-weight:900;

    letter-spacing:5px;

    perspective:1000px;
}

.logo3d span{
    display:inline-block;

    position:relative;

    color:#fff;

    text-shadow:
    0 0 10px #9b5cff,
    0 0 25px #9b5cff,
    0 0 60px #9b5cff;

    animation:logoFloat 3s ease-in-out infinite;

    transition:.4s;
}

.logo3d span::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:100%;
    height:3px;

    background:#9b5cff;

    transform:scaleX(0);

    transition:.4s;
}

.logo3d span:hover{
    transform:
    translateY(-12px)
    rotateX(20deg)
    scale(1.15);

    color:#bb88ff;
}

.logo3d span:hover::after{
    transform:scaleX(1);
}

.logo3d .space{
    width:18px;
}

@keyframes logoFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

nav{
    display:flex;
    gap:20px;
}

nav a{
    color:#fff;

    text-decoration:none;

    font-weight:600;

    padding:10px 16px;

    border-radius:10px;

    position:relative;

    transition:.35s;
}

nav a:hover{
    color:#bb8cff;

    background:rgba(155,92,255,.12);

    box-shadow:0 0 15px rgba(155,92,255,.35);
}

nav a::after{
    content:"";

    position:absolute;

    left:16px;
    bottom:5px;

    width:0;
    height:2px;

    background:#8d4dff;

    transition:.35s;
}

nav a:hover::after{
    width:calc(100% - 32px);
}

.menu{
    display:none;

    font-size:32px;

    cursor:pointer;

    color:white;
}


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

.about-hero{
    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 20px;

    overflow:hidden;
}

.about-hero::before{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    background:
    radial-gradient(circle,#8d4dff55,transparent 70%);

    border-radius:50%;

    filter:blur(50px);

    animation:pulse 6s ease-in-out infinite;

    z-index:-3;
}

.about-hero::after{
    content:"";

    position:absolute;

    width:900px;
    height:900px;

    background:
    radial-gradient(circle,
    rgba(155,92,255,.18),
    transparent 70%);

    filter:blur(60px);

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    z-index:-3;

    animation:aurora 10s ease-in-out infinite;
}

@keyframes pulse{

    0%,100%{
        transform:scale(.8);
        opacity:.5;
    }

    50%{
        transform:scale(1.1);
        opacity:1;
    }

}

@keyframes aurora{

    0%,100%{
        transform:translateX(-50%) scale(1);
    }

    50%{
        transform:translateX(-50%) scale(1.15);
    }

}

.about-hero-content{
    animation:fadeHero 1.4s ease;
}

@keyframes fadeHero{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.welcome{
    color:#9d7cff;

    font-size:15px;

    letter-spacing:5px;

    margin-bottom:25px;
}

.about-hero h1{
    font-size:95px;

    font-weight:900;

    line-height:1;

    text-shadow:
    0 0 15px #8d4dff,
    0 0 30px #8d4dff,
    0 0 60px #8d4dff,
    0 0 90px #8d4dff;

    animation:floatTitle 4s ease-in-out infinite;
}

.about-hero h1 span{
    color:#9b5cff;
}

.about-hero-content > p:last-child{
    max-width:750px;

    margin:30px auto;

    color:#d4d4d4;

    font-size:18px;

    line-height:1.8;
}

@keyframes floatTitle{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


/* =========================
   STARS
========================= */

.stars{
    position:absolute;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:-2;
}

.stars::before{
    content:"";

    position:absolute;

    width:3px;
    height:3px;

    background:white;

    border-radius:50%;

    box-shadow:
    120px 50px white,
    350px 200px #9b5cff,
    550px 150px white,
    750px 350px cyan,
    950px 120px white,
    1150px 250px #9b5cff,
    1450px 450px white,
    1700px 150px cyan,
    400px 500px white,
    800px 650px #9b5cff,
    1200px 600px white,
    1600px 700px cyan;

    animation:starsMove 12s linear infinite;
}

@keyframes starsMove{

    0%{
        transform:translateY(0);
        opacity:.8;
    }

    50%{
        opacity:1;
    }

    100%{
        transform:translateY(-80px);
        opacity:.6;
    }

}


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

.floating{
    position:absolute;

    border-radius:50%;

    filter:blur(8px);

    animation:float 8s ease-in-out infinite;

    opacity:.35;
}

.floating1{
    width:120px;
    height:120px;

    background:#8d4dff;

    top:15%;
    left:10%;
}

.floating2{
    width:180px;
    height:180px;

    background:#00d4ff;

    bottom:12%;
    right:10%;

    animation-delay:2s;
}

.floating3{
    width:90px;
    height:90px;

    background:#ff00ff;

    top:65%;
    left:20%;

    animation-delay:4s;
}

@keyframes float{

    0%,100%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-35px) rotate(180deg);
    }

}


/* =========================
   LIGHTS
========================= */

.hero-lights{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;
}

.light{
    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.5;

    animation:lightMove 10s ease-in-out infinite;
}

.light1{
    width:300px;
    height:300px;

    background:#9b5cff;

    top:15%;
    left:15%;
}

.light2{
    width:250px;
    height:250px;

    background:#00d4ff;

    bottom:10%;
    right:15%;

    animation-delay:2s;
}

.light3{
    width:200px;
    height:200px;

    background:#ff4dff;

    top:40%;
    left:55%;

    animation-delay:4s;
}

@keyframes lightMove{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(30px,-40px) scale(1.2);
    }

}

.grid-overlay{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:60px 60px;

    mask-image:linear-gradient(to bottom,black,transparent);

    pointer-events:none;

    opacity:.25;
}


/* =========================
   GENERAL SECTIONS
========================= */

.about-section,
.team-section,
.values-section{
    position:relative;

    padding:120px 8%;
}

.section-heading{
    text-align:center;

    margin-bottom:70px;
}

.section-heading p{
    color:#9d7cff;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:12px;
}

.section-heading h2{
    font-size:48px;

    font-weight:800;
}

.section-heading h2 span{
    color:#9b5cff;

    text-shadow:
    0 0 15px #9b5cff,
    0 0 35px #9b5cff;
}


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

.about-container{
    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:40px;

    max-width:1200px;

    margin:auto;
}

.about-text,
.about-box{
    background:rgba(255,255,255,.06);

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

    border-radius:25px;

    padding:45px;

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    0 0 30px rgba(155,92,255,.15);

    transition:.45s;
}

.about-text:hover,
.about-box:hover{
    transform:translateY(-10px);

    border-color:#8d4dff;

    box-shadow:
    0 0 30px #8d4dff55,
    0 0 70px #8d4dff22;
}

.about-text h3{
    font-size:28px;

    margin-bottom:25px;
}

.about-text p{
    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:20px;
}

.about-box{
    text-align:center;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;
}

.about-box i{
    font-size:65px;

    color:#9b5cff;

    text-shadow:
    0 0 20px #9b5cff;

    margin-bottom:25px;
}

.about-box h3{
    font-size:28px;

    margin-bottom:18px;
}

.about-box p{
    color:#cfcfcf;

    line-height:1.8;
}


/* =========================
   TEAM
========================= */

.team-container{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

    max-width:1300px;

    margin:auto;
}

.member-card{
    position:relative;

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

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

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:.5s;

    box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    0 0 30px rgba(155,92,255,.15);
}

.member-card:hover{
    transform:translateY(-15px) scale(1.02);

    border-color:#9b5cff;

    box-shadow:
    0 0 35px #9b5cff55,
    0 0 80px #9b5cff22;
}


/* PHOTO */

.member-image{
    position:relative;

    width:100%;

    height:350px;

    overflow:hidden;

    background:
    radial-gradient(circle at center,#9b5cff55,transparent 65%),
    #10101d;
}

.member-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;
}

.member-card:hover .member-image img{
    transform:scale(1.08);
}

.image-glow{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(5,5,16,.95),
    transparent 55%
    );

    pointer-events:none;
}

.member-info{
    padding:30px;
}

.role{
    display:inline-block;

    color:#9b5cff;

    font-size:12px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:10px;
}

.member-info h3{
    font-size:30px;

    margin-bottom:15px;

    font-weight:800;
}

.member-info p{
    color:#cfcfcf;

    line-height:1.8;

    font-size:15px;
}

.member-social{
    display:flex;

    gap:12px;

    margin-top:25px;
}

.member-social i{
    width:42px;
    height:42px;

    display:flex;

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

    border-radius:50%;

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

    color:#fff;

    transition:.35s;

    cursor:pointer;
}

.member-social i:hover{
    background:#9b5cff;

    transform:translateY(-5px);

    box-shadow:0 0 20px #9b5cff;
}


/* =========================
   VALUES
========================= */

.values-container{
    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

    max-width:1250px;

    margin:auto;
}

.value-card{
    text-align:center;

    padding:35px 25px;

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

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

    border-radius:25px;

    backdrop-filter:blur(20px);

    transition:.45s;
}

.value-card:hover{
    transform:translateY(-12px);

    border-color:#8d4dff;

    box-shadow:
    0 0 30px #8d4dff55;
}

.value-card i{
    font-size:45px;

    color:#9b5cff;

    margin-bottom:20px;

    text-shadow:0 0 20px #9b5cff;
}

.value-card h3{
    margin-bottom:12px;

    font-size:21px;
}

.value-card p{
    color:#cfcfcf;

    line-height:1.7;

    font-size:14px;
}


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

footer{
    padding:70px 8%;

    text-align:center;

    background:#080811;

    border-top:1px solid rgba(255,255,255,.08);
}

footer h2{
    font-size:40px;

    margin-bottom:15px;
}

footer span{
    color:#9b5cff;

    text-shadow:
    0 0 15px #9b5cff,
    0 0 40px #9b5cff;
}

footer p{
    color:#bdbdbd;

    margin-top:10px;
}

.social{
    margin:30px 0;

    display:flex;

    justify-content:center;

    gap:25px;
}

.social i{
    font-size:28px;

    width:60px;
    height:60px;

    line-height:60px;

    border-radius:50%;

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

    transition:.4s;

    cursor:pointer;
}

.social i:hover{
    background:#8d4dff;

    transform:translateY(-8px) rotate(360deg);

    box-shadow:0 0 25px #8d4dff;
}

.copy{
    margin-top:30px;

    font-size:15px;

    opacity:.7;
}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#09090f;
}

::-webkit-scrollbar-thumb{
    background:#8d4dff;

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b46cff;
}


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

@media(max-width:1100px){

    .team-container{
        grid-template-columns:repeat(2,1fr);
    }

    .values-container{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:900px){

    nav{
        position:absolute;

        top:80px;
        right:20px;

        display:flex;

        flex-direction:column;

        background:rgba(10,10,20,.95);

        padding:20px;

        border-radius:15px;

        opacity:0;
        visibility:hidden;

        transform:translateY(-20px);

        transition:.4s;
    }

    nav.active{
        opacity:1;

        visibility:visible;

        transform:translateY(0);
    }

    .menu{
        display:block;
    }

    .about-hero h1{
        font-size:70px;
    }

    .about-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    .logo3d{
        font-size:28px;

        gap:4px;
    }

    .about-hero{
        padding:140px 20px 100px;
    }

    .welcome{
        font-size:11px;

        letter-spacing:3px;
    }

    .about-hero h1{
        font-size:48px;
    }

    .about-hero-content > p:last-child{
        font-size:15px;
    }

    .about-section,
    .team-section,
    .values-section{
        padding:80px 20px;
    }

    .section-heading{
        margin-bottom:45px;
    }

    .section-heading h2{
        font-size:34px;
    }

    .team-container{
        grid-template-columns:1fr;
    }

    .values-container{
        grid-template-columns:1fr;
    }

    .member-image{
        height:320px;
    }

    .about-text,
    .about-box{
        padding:30px;
    }

    footer{
        padding:60px 20px;
    }

}