/*==========================================================
GOOGLE FONT
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');


/*==========================================================
ROOT VARIABLES
==========================================================*/

:root{

    --bg:#06060a;

    --bg-secondary:#0d0d14;

    --surface:#13131c;

    --surface-light:#191924;

    --magenta:#d10073;

    --magenta-light:#ff4da6;

    --blue:#35c7ff;

    --white:#ffffff;

    --text:#d6d6dd;

    --text-light:#9b9ba8;

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

    --shadow:0 20px 60px rgba(0,0,0,.45);

    --radius:22px;

    --transition:.4s ease;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:"Space Grotesk",sans-serif;

    background:var(--bg);

    color:var(--white);

    overflow-x:hidden;

    position:relative;

}


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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(209,0,115,.18),
    transparent 35%),

    radial-gradient(circle at 85% 75%,
    rgba(53,199,255,.10),
    transparent 40%),

    radial-gradient(circle at 50% 120%,
    rgba(255,255,255,.03),
    transparent 45%);

    z-index:-5;

}


/*==========================================================
GRID
==========================================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

    background-size:55px 55px;

    mask-image:

    linear-gradient(

        rgba(0,0,0,.9),

        transparent

    );

    animation:gridMove 15s linear infinite;

    opacity:.45;

    z-index:-4;

}


/*==========================================================
GRID ANIMATION
==========================================================*/

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(55px);

    }

}


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

section{

    width:min(1400px,92%);

    margin:auto;

}


img{

    max-width:100%;

    display:block;

}


a{

    color:inherit;

    text-decoration:none;

}


button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    outline:none;

}


input,
textarea,
select{

    font-family:inherit;

}


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

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#09090d;

}


::-webkit-scrollbar-thumb{

    background:var(--magenta);

    border-radius:50px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--magenta-light);

}


/*==========================================================
TEXT SELECTION
==========================================================*/

::selection{

    background:var(--magenta);

    color:white;

}


/*==========================================================
COMMON BUTTONS
==========================================================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 38px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--magenta),
        #990055
    );

    color:white;

    font-weight:600;

    transition:var(--transition);

    box-shadow:

    0 0 35px rgba(209,0,115,.35);

}


.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:

    0 0 45px rgba(209,0,115,.6);

}


.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:999px;

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

    color:white;

    transition:var(--transition);

}


.secondary-btn:hover{

    background:white;

    color:#111;

}


/*==========================================================
SECTION HEADER
==========================================================*/

.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 90px;

}


.section-tag{

    color:var(--magenta);

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:.85rem;

    margin-bottom:20px;

}


.section-header h2{

    font-size:clamp(3rem,6vw,5rem);

    margin-bottom:20px;

    line-height:1.1;

}


.section-header span{

    color:var(--magenta);

}


.section-description{

    color:var(--text-light);

    line-height:1.9;

    font-size:1.08rem;

}


/*==========================================================
SPACING
==========================================================*/

.hero{

    padding-top:120px;

}

.journey-section,
.application-section,
.cta-section,
.faq-section{

    padding:140px 0;

}


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

@media(max-width:900px){

    .section-header h2{

        font-size:2.7rem;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

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

.navbar{

    position:fixed;

    top:22px;

    left:50%;

    transform:translateX(-50%);

    width:min(1400px,95%);

    height:82px;

    padding:0 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-radius:22px;

    background:rgba(10,10,18,.72);

    backdrop-filter:blur(22px);

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

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

    box-shadow:

    0 15px 45px rgba(0,0,0,.45);

    z-index:9999;

    transition:.4s;

}


/*==========================================================
TOP LIGHT
==========================================================*/

.navbar::before{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:0;

    width:94%;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );

}


/*==========================================================
BOTTOM GLOW
==========================================================*/

.navbar::after{

    content:"";

    position:absolute;

    bottom:-1px;

    left:50%;

    transform:translateX(-50%);

    width:92%;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--magenta),

        transparent

    );

    opacity:.8;

}


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

.logo{

    display:flex;

    align-items:center;

    gap:16px;

}


.logo img{

    width:58px;

    transition:.45s;

}


.logo:hover img{

    transform:rotate(360deg) scale(1.08);

}


.logo h2{

    font-size:1.05rem;

    letter-spacing:2px;

}


.logo span{

    display:block;

    color:var(--text-light);

    font-size:.82rem;

    letter-spacing:4px;

    margin-top:4px;

}


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

nav{

    display:flex;

    gap:45px;

}


nav a{

    position:relative;

    color:var(--text);

    font-weight:500;

    transition:.35s;

}


nav a:hover{

    color:white;

}


/*==========================================================
UNDERLINE
==========================================================*/

nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-10px;

    transform:translateX(-50%);

    width:0;

    height:2px;

    border-radius:50px;

    background:var(--magenta);

    transition:.35s;

}


nav a:hover::after{

    width:100%;

}


/*==========================================================
JOIN BUTTON
==========================================================*/

.join-button{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:999px;

    background:linear-gradient(

        135deg,

        var(--magenta),

        #8e0050

    );

    font-weight:600;

    color:white;

    transition:.35s;

    box-shadow:

    0 0 30px rgba(209,0,115,.35);

}


.join-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-20deg);

    transition:.7s;

}


.join-button:hover::before{

    left:140%;

}


.join-button:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 45px rgba(209,0,115,.65);

}


/*==========================================================
SCROLL EFFECT
==========================================================*/

.navbar.scrolled{

    top:10px;

    background:rgba(8,8,14,.92);

    border-color:rgba(209,0,115,.18);

}


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

@media(max-width:980px){

    nav{

        display:none;

    }

    .join-button{

        display:none;

    }

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

}


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

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}


.hero-background::before{

    content:"";

    position:absolute;

    width:220%;

    height:220%;

    left:-60%;

    bottom:-135%;

    transform:

    perspective(1200px)

    rotateX(82deg);

    background-image:

    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:90px 90px;

    animation:gridPerspective 12s linear infinite;

    opacity:.45;

}


@keyframes gridPerspective{

    from{

        transform:

        perspective(1200px)

        rotateX(82deg)

        translateY(0);

    }

    to{

        transform:

        perspective(1200px)

        rotateX(82deg)

        translateY(90px);

    }

}


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

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    animation:floatGlow 9s ease-in-out infinite;

}


.glow-1{

    width:520px;

    height:520px;

    background:rgba(209,0,115,.22);

    left:-120px;

    top:-120px;

}


.glow-2{

    width:420px;

    height:420px;

    background:rgba(53,199,255,.12);

    right:-100px;

    bottom:-100px;

    animation-delay:2s;

}


@keyframes floatGlow{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

}


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

.hero-content{

    position:relative;

    z-index:5;

    width:min(900px,90%);

    animation:heroReveal 1.2s ease;

}


@keyframes heroReveal{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
TAG
==========================================================*/

.hero-tag{

    color:var(--magenta);

    letter-spacing:8px;

    font-size:.9rem;

    margin-bottom:25px;

    text-transform:uppercase;

}


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

.hero h1{

    font-size:clamp(4rem,9vw,7.5rem);

    line-height:.95;

    font-weight:700;

    letter-spacing:-3px;

    text-transform:uppercase;

}


.hero h1 span{

    color:var(--magenta);

    text-shadow:

    0 0 25px rgba(209,0,115,.45),

    0 0 60px rgba(209,0,115,.25);

}


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

.hero-description{

    width:min(700px,95%);

    margin:40px auto;

    color:var(--text-light);

    font-size:1.15rem;

    line-height:2;

}


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

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}


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

.hero-scroll{

    margin-top:80px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}


.hero-scroll span{

    width:2px;

    height:70px;

    background:linear-gradient(

        transparent,

        var(--magenta),

        transparent

    );

    animation:scrollMove 2s infinite;

}


.hero-scroll p{

    color:var(--text-light);

    font-size:.8rem;

    letter-spacing:5px;

}


@keyframes scrollMove{

    0%{

        transform:scaleY(.5);

        opacity:.4;

    }

    50%{

        transform:scaleY(1);

        opacity:1;

    }

    100%{

        transform:scaleY(.5);

        opacity:.4;

    }

}


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

@media(max-width:768px){

    .hero{

        min-height:90vh;

    }

    .hero h1{

        font-size:3.6rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

}
/*==========================================================
JOURNEY SECTION
==========================================================*/

.journey-section{

    position:relative;

    padding:170px 0;

}


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

.journey-container{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    gap:60px;

    align-items:center;

    margin-top:90px;

}


/*==========================================================
CENTER DIVIDER
==========================================================*/

.journey-middle{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:25px;

}


.journey-middle span{

    color:var(--text-light);

    letter-spacing:6px;

    font-size:.85rem;

}


.line{

    width:2px;

    height:140px;

    background:

    linear-gradient(

        transparent,

        var(--magenta),

        transparent

    );

}


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

.journey-card{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.05),

        rgba(255,255,255,.02)

    );

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

    border-radius:32px;

    padding:50px;

    backdrop-filter:blur(20px);

    transition:.45s;

    cursor:pointer;

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}


/*==========================================================
TOP LIGHT
==========================================================*/

.journey-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--magenta),

        transparent

    );

    transform:scaleX(0);

    transition:.45s;

}


.journey-card:hover::before{

    transform:scaleX(1);

}


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

.card-glow{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(209,0,115,.08);

    right:-180px;

    top:-180px;

    filter:blur(30px);

    transition:.5s;

}


.journey-card:hover .card-glow{

    transform:scale(1.4);

}


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

.journey-card:hover{

    transform:

    translateY(-14px)

    scale(1.02);

    border-color:rgba(209,0,115,.35);

    box-shadow:

    0 35px 80px rgba(0,0,0,.45),

    0 0 45px rgba(209,0,115,.18);

}


/*==========================================================
TOP AREA
==========================================================*/

.card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}


.card-number{

    font-size:4.5rem;

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

    font-weight:700;

}


.card-icon{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:24px;

    background:

    linear-gradient(

        135deg,

        rgba(209,0,115,.22),

        rgba(209,0,115,.08)

    );

    font-size:2.6rem;

    transition:.45s;

}


.journey-card:hover .card-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}


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

.journey-card h3{

    font-size:2rem;

    margin-bottom:22px;

}


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

.journey-card p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:35px;

}


/*==========================================================
FEATURES
==========================================================*/

.feature-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:40px;

}


.feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#e7e7ee;

}


.feature::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--magenta);

    box-shadow:

    0 0 15px var(--magenta);

}


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

.card-button{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:

    linear-gradient(

        135deg,

        var(--magenta),

        #8d0050

    );

    color:white;

    font-size:1rem;

    font-weight:600;

    transition:.35s;

}


.card-button span{

    transition:.35s;

}


.card-button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 35px rgba(209,0,115,.45);

}


.card-button:hover span{

    transform:translateX(6px);

}


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

@media(max-width:1100px){

    .journey-container{

        grid-template-columns:1fr;

    }

    .journey-middle{

        display:none;

    }

}
/*==========================================================
APPLICATION SECTION
==========================================================*/

.application-section{

    display:none;

    padding:160px 0;

    animation:fadeUp .8s ease;

}

.application-section.active{

    display:block;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
APPLICATION HEADER
==========================================================*/

.application-header{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}


.application-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(209,0,115,.12);

    color:var(--magenta);

    letter-spacing:3px;

    font-size:.8rem;

    margin-bottom:25px;

}


.application-header h2{

    font-size:clamp(3rem,6vw,5rem);

    margin-bottom:20px;

}


.application-header h2 span{

    color:var(--magenta);

}


.application-header p{

    color:var(--text-light);

    line-height:1.9;

}


/*==========================================================
FORM
==========================================================*/

.application-form{

    width:min(1050px,100%);

    margin:auto;

    padding:55px;

    border-radius:30px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.05),

        rgba(255,255,255,.02)

    );

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

    backdrop-filter:blur(18px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}


/*==========================================================
FORM SECTION
==========================================================*/

.form-section{

    margin-bottom:55px;

}


.form-section h3{

    font-size:1.5rem;

    margin-bottom:30px;

    color:white;

}


/*==========================================================
GRID
==========================================================*/

.form-grid{

    display:grid;

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

    gap:25px;

}


/*==========================================================
INPUT GROUP
==========================================================*/

.input-group{

    display:flex;

    flex-direction:column;

}


.input-group label{

    margin-bottom:12px;

    color:var(--text);

    font-size:.95rem;

}


/*==========================================================
INPUTS
==========================================================*/

.input-group input,

.input-group select,

.input-group textarea{

    width:100%;

    padding:18px 20px;

    border-radius:16px;

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

    background:#11111a;

    color:white;

    font-size:1rem;

    transition:.35s;

    outline:none;

}


.input-group textarea{

    resize:vertical;

    min-height:180px;

}


.input-group input::placeholder,

.input-group textarea::placeholder{

    color:#88889b;

}


/*==========================================================
FOCUS
==========================================================*/

.input-group input:focus,

.input-group textarea:focus,

.input-group select:focus{

    border-color:var(--magenta);

    box-shadow:

    0 0 25px rgba(209,0,115,.25);

}


/*==========================================================
CHECKBOX GRID
==========================================================*/

.checkbox-grid{

    display:grid;

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

    gap:18px;

}


.checkbox-grid label{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    background:#101018;

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

    border-radius:16px;

    cursor:pointer;

    transition:.3s;

}


.checkbox-grid label:hover{

    border-color:rgba(209,0,115,.4);

    transform:translateY(-2px);

}


.checkbox-grid input{

    width:18px;

    height:18px;

}


/*==========================================================
SUBMIT AREA
==========================================================*/

.submit-area{

    margin-top:70px;

}


.terms{

    display:flex;

    align-items:flex-start;

    gap:15px;

    color:var(--text-light);

    line-height:1.8;

    margin-bottom:30px;

}


.terms input{

    margin-top:4px;

}


/*==========================================================
SUBMIT BUTTON
==========================================================*/

.submit-button{

    width:100%;

    padding:20px;

    border-radius:18px;

    background:

    linear-gradient(

        135deg,

        var(--magenta),

        #8b0051

    );

    color:white;

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    transition:.35s;

}


.submit-button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 0 40px rgba(209,0,115,.45);

}


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

@media(max-width:900px){

    .application-form{

        padding:35px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .checkbox-grid{

        grid-template-columns:1fr;

    }

}
/*==========================================================
CALL TO ACTION
==========================================================*/

.cta-section{

    padding:180px 0 120px;

}

.cta-box{

    position:relative;

    overflow:hidden;

    padding:90px 70px;

    border-radius:35px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.02)
    );

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

    text-align:center;

    backdrop-filter:blur(20px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.4);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(209,0,115,.12);

    top:-220px;

    left:-120px;

    filter:blur(80px);

}

.cta-box::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

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

    bottom:-180px;

    right:-120px;

    filter:blur(70px);

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-tag{

    color:var(--magenta);

    letter-spacing:5px;

    margin-bottom:18px;

}

.cta-box h2{

    font-size:clamp(3rem,6vw,5rem);

    margin-bottom:25px;

}

.cta-box span{

    color:var(--magenta);

}

.cta-box p{

    max-width:720px;

    margin:auto;

    color:var(--text-light);

    line-height:2;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:50px;

    flex-wrap:wrap;

}



/*==========================================================
FAQ
==========================================================*/

.faq-container{

    width:min(950px,100%);

    margin:auto;

}

.faq-item{

    margin-bottom:22px;

    border-radius:20px;

    overflow:hidden;

    background:

    rgba(255,255,255,.03);

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

    transition:.35s;

}

.faq-item:hover{

    border-color:rgba(209,0,115,.3);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    background:none;

    color:white;

    font-size:1.05rem;

    font-weight:600;

    cursor:pointer;

}

.faq-question > span:last-child {
    font-size: 24px;
    font-weight: 700;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 30px 28px;

    color:var(--text-light);

    line-height:1.9;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-item.active .faq-question > span:last-child {
    transform: rotate(45deg);
}

.faq-question > span:first-child {
    transform: none !important;
    rotate: none !important;
    writing-mode: horizontal-tb;
}



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

footer{

    position:relative;

    margin-top:170px;

    padding:90px 0 35px;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        transparent,

        var(--magenta),

        transparent

    );

}

.footer-container{

    width:min(1400px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:

    2fr

    1fr

    1fr

    1.2fr;

    gap:70px;

}

.footer-brand img{

    width:80px;

    margin-bottom:25px;

}

.footer-brand h3{

    font-size:1.7rem;

    margin-bottom:15px;

}

.footer-brand p{

    color:var(--text-light);

    line-height:1.8;

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links h4{

    margin-bottom:25px;

    color:white;

}

.footer-links a{

    color:var(--text-light);

    margin-bottom:16px;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--magenta);

    transform:translateX(8px);

}

.footer-social h4{

    margin-bottom:25px;

}

.social-icons{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.social-icons a{

    color:var(--text-light);

    transition:.3s;

}

.social-icons a:hover{

    color:var(--magenta);

    transform:translateX(8px);

}



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

.footer-bottom{

    width:min(1400px,92%);

    margin:70px auto 0;

    padding-top:30px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

    color:var(--text-light);

}



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

@media(max-width:1100px){

    .footer-container{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

}

@media(max-width:700px){

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand img{

        margin:auto auto 25px;

    }

    .footer-links{

        align-items:center;

    }

    .social-icons{

        align-items:center;

    }

    .footer-bottom{

        justify-content:center;

        text-align:center;

    }

    .cta-box{

        padding:60px 30px;

    }

}
/*==========================================================
PARTICLES
==========================================================*/

.particle-container{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.particle{

    position:absolute;

    width:3px;

    height:3px;

    border-radius:50%;

    background:var(--magenta);

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-250px);

    }

}

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

.cursor-light{

    position:fixed;

    width:26px;

    height:26px;

    border-radius:50%;

    background:rgba(209,0,115,.45);

    pointer-events:none;

    transform:translate(-50%,-50%);

    filter:blur(3px);

    transition:

    width .25s,

    height .25s,

    background .25s;

    z-index:999999;

}

.cursor-light.active{

    width:60px;

    height:60px;

    background:rgba(209,0,115,.18);

}

/*==========================================================
HUD
==========================================================*/

.hud-box{

    position:absolute;

    padding:15px 20px;

    border-radius:14px;

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

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

    backdrop-filter:blur(12px);

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

}

.hud-box span{

    display:block;

    font-size:.7rem;

    letter-spacing:2px;

    color:var(--text-light);

}

.hud-box strong{

    font-size:1.3rem;

    color:var(--magenta);

}

@keyframes hudFloat{

    50%{

        transform:translateY(-15px);

    }

}

/*==========================================================
GLITCH
==========================================================*/

.hero-glitch{

    animation:glitch .12s linear;

}

@keyframes glitch{

    0%{

        transform:translateX(-2px);

    }

    25%{

        transform:translateX(3px);

    }

    50%{

        transform:translateX(-3px);

    }

    100%{

        transform:translateX(0);

    }

}
.page-progress{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0;

    background:linear-gradient(
        90deg,
        #d10073,
        #ff4ca3
    );

    z-index:999999;

    box-shadow:0 0 20px #d10073;

}

.loaded{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.mobile-mode .particle-container,

.mobile-mode .cursor-light,

.mobile-mode .hud-box{

    display:none;

}
.application-header{
    position:relative;
}

.close-application{

    position:absolute;
    top:0;
    right:0;

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    background:#1d1d1d;
    color:white;

    font-size:22px;

    transition:.3s;

}

.close-application:hover{

    background:#ff0055;
    transform:rotate(90deg);

}
/* ==========================================
   FAQ
========================================== */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    color:#d4d4d4;

    line-height:1.7;

    padding:0 35px;

}

.faq-answer p{

    margin:0 0 25px;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-question{

    cursor:pointer;

}
/* ==========================================================
   LANGUAGE SWITCH
========================================================== */

.language-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

.language-switch span {
    color: rgba(255,255,255,.4);
}

.language-switch button {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    transition: .3s;
}

.language-switch button:hover {
    color: #d1005d;
}

.language-switch button.active {
    color: #d1005d;
}