/* ==========================================================
   KAMAL PRABHAS
   Version 4
========================================================== */

:root{

    --bg:#050505;
    --white:#ffffff;
    --gray:#b5b5b5;
    --line:rgba(255,255,255,.08);

    --blue:#4f8ef7;
    --purple:#7c5cfc;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--white);

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

    overflow-x:hidden;

}

/* =========================
        LOADER
========================= */

#loader{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    transition:1s;

}

#loader.hide{

    opacity:0;

    visibility:hidden;

}

.loader-content{

    text-align:center;

}

.loader-dot{

    width:10px;

    height:10px;

    background:white;

    border-radius:50%;

    margin:auto;

    margin-bottom:35px;

    animation:pulse 1.5s infinite;

}

.loader-content h1{

    font-size:60px;

    letter-spacing:8px;

}

.loader-content p{

    margin-top:20px;

    color:#888;

    letter-spacing:3px;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:.4;

}

50%{

transform:scale(2);

opacity:1;

}

100%{

transform:scale(1);

opacity:.4;

}

}

/* =========================
        AURORA
========================= */

.aurora{

position:fixed;

inset:0;

z-index:-3;

background:

radial-gradient(circle at 20% 20%,
rgba(79,142,247,.14),
transparent 40%),

radial-gradient(circle at 80% 30%,
rgba(124,92,252,.15),
transparent 45%),

radial-gradient(circle at 50% 90%,
rgba(79,142,247,.10),
transparent 45%);

filter:blur(90px);

animation:aurora 16s ease-in-out infinite alternate;

}

@keyframes aurora{

from{

transform:translateY(-30px);

}

to{

transform:translateY(30px) scale(1.15);

}

}

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

#stars{

position:fixed;

inset:0;

z-index:-2;

overflow:hidden;

pointer-events:none;

}

.star{

position:absolute;

background:white;

border-radius:50%;

animation:twinkle ease-in-out infinite;

}

@keyframes twinkle{

0%,100%{

opacity:.2;

transform:scale(1);

}

50%{

opacity:1;

transform:scale(1.5);

}

}

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

.cursor-glow{

position:fixed;

width:420px;

height:420px;

border-radius:50%;

background:radial-gradient(circle,

rgba(79,142,247,.14),

rgba(124,92,252,.08),

transparent 70%

);

pointer-events:none;

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

z-index:-1;

filter:blur(25px);

transition:left .08s linear,
top .08s linear;

}

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

.hero{

min-height:92vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

}

.eyebrow{

font-size:12px;

letter-spacing:8px;

color:#8d8d8d;

margin-bottom:25px;

}

.brand{

font-size:clamp(60px,10vw,130px);

font-weight:800;

letter-spacing:10px;

margin-bottom:18px;

}

.headline{

height:80px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:18px;

}

.headline span{

font-size:clamp(30px,4vw,54px);

font-weight:300;

}

.tagline{

font-size:24px;

line-height:1.6;

color:#b5b5b5;

margin-bottom:55px;

}

/* =========================
        COUNTDOWN
========================= */

.countdown{

display:flex;

gap:25px;

flex-wrap:wrap;

justify-content:center;

}

.time-card{

width:165px;

padding:35px;

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

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

backdrop-filter:blur(18px);

border-radius:28px;

transition:.4s;

}

.time-card:hover{

transform:translateY(-10px);

box-shadow:

0 15px 45px rgba(79,142,247,.18);

}

.time-card h2{

font-size:54px;

}

.time-card span{

display:block;

margin-top:12px;

font-size:12px;

letter-spacing:3px;

color:#9c9c9c;

}

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

.scroll-indicator{

margin-top:80px;

}

.scroll-indicator span{

display:block;

width:2px;

height:70px;

background:linear-gradient(

transparent,

white,

transparent

);

animation:scrollLine 2s infinite;

}

@keyframes scrollLine{

0%{

opacity:.2;

transform:translateY(0);

}

50%{

opacity:1;

}

100%{

opacity:.2;

transform:translateY(20px);

}

}/* ==========================================================
                QUOTE SECTION
========================================================== */

.quote{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 10%;

}

.quote h2{

    font-size:clamp(40px,5vw,72px);

    font-weight:300;

    line-height:1.4;

    margin:18px 0;

    opacity:.95;

}

/* ==========================================================
                MISSION
========================================================== */

.mission{

    min-height:80vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 10%;

}

.section-label{

    color:#888;

    letter-spacing:6px;

    font-size:13px;

    margin-bottom:30px;

}

.mission h2{

    max-width:950px;

    font-size:clamp(36px,4vw,64px);

    line-height:1.5;

    font-weight:300;

}

/* ==========================================================
                PILLARS
========================================================== */

.pillars{

    width:min(1400px,90%);

    margin:auto;

    display:grid;

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

    gap:35px;

    padding:100px 0 160px;

}

.pillar{

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

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:60px;

    transition:.4s ease;

    overflow:hidden;

    position:relative;

}

.pillar::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(79,142,247,.05),
        rgba(124,92,252,.03),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.pillar:hover::before{

    opacity:1;

}

.pillar:hover{

    transform:translateY(-12px);

    border-color:rgba(79,142,247,.25);

    box-shadow:

    0 20px 70px rgba(79,142,247,.15);

}

.pillar span{

    font-size:14px;

    color:#666;

    letter-spacing:3px;

}

.pillar h2{

    margin-top:25px;

    font-size:44px;

}

.pillar p{

    margin-top:25px;

    color:#bdbdbd;

    line-height:1.9;

    font-size:18px;

}

/* ==========================================================
                COMING SOON
========================================================== */

.coming-soon{

    min-height:70vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 10%;

}

.coming-soon h2{

    font-size:clamp(40px,5vw,70px);

    font-weight:300;

    line-height:1.4;

    margin-bottom:30px;

}

.coming-soon p:last-child{

    color:#999;

    font-size:20px;

}

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

footer{

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

    padding:90px 20px;

    text-align:center;

}

footer h2{

    font-size:48px;

    letter-spacing:6px;

    margin-bottom:30px;

}

footer p{

    color:#b3b3b3;

    font-size:22px;

    line-height:1.8;

    margin-bottom:35px;

}

footer small{

    color:#666;

    letter-spacing:2px;

}

/* ==========================================================
                SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:900px){

.brand{

    font-size:52px;

    letter-spacing:4px;

}

.headline{

    height:auto;

}

.headline span{

    font-size:36px;

}

.countdown{

    gap:16px;

}

.time-card{

    width:140px;

    padding:24px;

}

.time-card h2{

    font-size:42px;

}

.pillars{

    grid-template-columns:1fr;

}

.quote h2{

    font-size:36px;

}

.mission h2{

    font-size:34px;

}

footer h2{

    font-size:34px;

}

footer p{

    font-size:18px;

}

}/* ==========================================================
            PREMIUM BUTTONS
========================================================== */

.button-group{

    display:flex;

    gap:20px;

    justify-content:center;

    align-items:center;

    margin-top:60px;

    flex-wrap:wrap;

}

.btn{

    padding:18px 38px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    letter-spacing:1px;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        #4f8ef7,
        #7c5cfc
    );

    color:#fff;

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:
    0 20px 45px rgba(79,142,247,.35);

}

.btn-secondary{

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

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

    color:white;

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

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

    transform:translateY(-6px);

}

/* ==========================================================
            GLASS SECTION
========================================================== */

.glass{

    width:min(1300px,90%);

    margin:120px auto;

    padding:70px;

    border-radius:35px;

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

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

    backdrop-filter:blur(25px);

    overflow:hidden;

    position:relative;

}

.glass::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(79,142,247,.08),

        transparent,

        rgba(124,92,252,.05)

    );

    pointer-events:none;

}

/* ==========================================================
            TIMELINE
========================================================== */

.timeline{

    width:min(1000px,90%);

    margin:120px auto;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:30px;

    top:0;

    width:2px;

    height:100%;

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

}

.timeline-item{

    padding-left:90px;

    margin-bottom:70px;

    position:relative;

}

.timeline-item::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#4f8ef7;

    left:22px;

    top:8px;

    box-shadow:

    0 0 20px rgba(79,142,247,.5);

}

.timeline-item h3{

    font-size:30px;

    margin-bottom:12px;

}

.timeline-item p{

    color:#b5b5b5;

    line-height:1.8;

    font-size:18px;

}

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

.stats{

    width:min(1200px,90%);

    margin:120px auto;

    display:grid;

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

    gap:30px;

}

.stat{

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

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

    border-radius:28px;

    padding:45px;

    text-align:center;

    transition:.35s;

}

.stat:hover{

    transform:translateY(-10px);

}

.stat h2{

    font-size:60px;

    margin-bottom:10px;

}

.stat p{

    color:#999;

    letter-spacing:2px;

}

/* ==========================================================
            SOCIALS
========================================================== */

.socials{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:70px;

}

.socials a{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:white;

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

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

    transition:.35s;

}

.socials a:hover{

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

    background:

    linear-gradient(

        135deg,

        #4f8ef7,

        #7c5cfc

    );

}

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

.blur-circle{

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    filter:blur(130px);

    opacity:.25;

    pointer-events:none;

}

.blur-one{

    background:#4f8ef7;

    top:-200px;

    left:-200px;

}

.blur-two{

    background:#7c5cfc;

    bottom:-200px;

    right:-200px;

}

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

::-webkit-scrollbar{

    width:9px;

}

::-webkit-scrollbar-track{

    background:#080808;

}

::-webkit-scrollbar-thumb{

    background:

    linear-gradient(

        #4f8ef7,

        #7c5cfc

    );

    border-radius:30px;

}

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

::selection{

    background:#4f8ef7;

    color:white;

}

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

@media(max-width:768px){

.hero{

    padding:30px;

}

.brand{

    font-size:42px;

}

.headline span{

    font-size:28px;

}

.tagline{

    font-size:18px;

}

.time-card{

    width:130px;

}

.glass{

    padding:40px 25px;

}

.timeline-item{

    padding-left:70px;

}

.timeline::before{

    left:20px;

}

.timeline-item::before{

    left:12px;

}

.stats{

    grid-template-columns:1fr 1fr;

}

.socials{

    flex-wrap:wrap;

}

}

@media(max-width:500px){

.stats{

    grid-template-columns:1fr;

}

.time-card{

    width:100%;

}

.countdown{

    flex-direction:column;

    align-items:center;

}

.brand{

    font-size:34px;

    letter-spacing:2px;

}

.quote h2{

    font-size:28px;

}

.mission h2{

    font-size:28px;

}

.pillar{

    padding:35px;

}

footer h2{

    font-size:28px;

}

}