/* ================= CUSTOM FONTS ================= */

@font-face{

    font-family:"Medodica";

    src:url("static/fonts/MedodicaRegular.otf") format("opentype");

    font-weight:400;

    font-style:normal;

}


@font-face{

    font-family:"Nihonium";

    src:url("static/fonts/Nihonium113.ttf") format("truetype");

    font-weight:400;

    font-style:normal;

}

:root{

    --gobbo-purple:#8b5cff;
    --gobbo-glow:#c4a7ff;

    --video:#AED580;
    --live:#38bdf8;
    --studio:#f97316;
    --auth:#ffffff;


}


*{

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

}


html{

    scroll-behavior:smooth;

}



body{

    font-family:"Medodica",sans-serif;

    background:#000;

    color:white;

    overflow-x:hidden;

}



a{

    text-decoration:none;

    font-size: 30px;

    color:inherit;

}



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

.background{

    position:fixed;

    inset:0;

    z-index:0;

    overflow:hidden;

    background:
    radial-gradient(
        circle at center,
        #21053d,
        #08020f 45%,
        #000
    );

}


/* floating light blobs */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.35;

    mix-blend-mode:screen;

    animation-iteration-count:infinite;

    animation-timing-function:cubic-bezier(.45,0,.55,1);

    animation-direction:alternate;

}


/* PURPLE */

.blob.purple{

    width:800px;
    height:800px;

    background:#8b5cff;

    top:-300px;
    left:-250px;

    animation:purpleMove 18s infinite;

}


/* VIDEO GREEN */

.blob.video{

    width:700px;
    height:700px;

    background:#AED580;

    right:-200px;
    top:100px;

    animation:videoMove 25s infinite;

}


/* LIVE BLUE */

.blob.live{

    width:900px;
    height:900px;

    background:#38bdf8;

    bottom:-500px;
    left:10%;

    animation:liveMove 30s infinite;

}


/* STUDIO ORANGE */

.blob.studio{

    width:600px;
    height:600px;

    background:#f97316;

    right:20%;
    bottom:50px;

    animation:studioMove 22s infinite;

}


/* ================= MOVEMENT ================= */


@keyframes purpleMove {

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

25%{
    transform:translate(160px,100px) scale(2.15);
}

50%{
    transform:translate(300px,-50px) scale(2.3);
}

75%{
    transform:translate(80px,220px) scale(2.1);
}

100%{
    transform:translate(-120px,80px) scale(2.2);
}

}



@keyframes videoMove {

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

30%{
    transform:translate(-180px,120px) scale(2.2);
}

60%{
    transform:translate(-260px,-80px) scale(2.1);
}

100%{
    transform:translate(-80px,180px) scale(2.25);
}

}



@keyframes liveMove {

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

30%{
    transform:translate(200px,-100px) scale(2.25);
}

60%{
    transform:translate(50px,-240px) scale(2.15);
}

100%{
    transform:translate(-180px,100px) scale(2.3);
}

}



@keyframes studioMove {

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

30%{
    transform:translate(-160px,-100px) scale(2.2);
}

60%{
    transform:translate(120px,-180px) scale(2.3);
}

100%{
    transform:translate(220px,100px) scale(2.1);
}

}

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

header {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    background:transparent;

}



nav {

    width:100%;

    margin:0;

    padding:30px 45px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-sizing:border-box;

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

    backdrop-filter:blur(20px);

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

    transition:.4s ease;

}



/* logo */

.logo{

    width:auto;

    font-family:"Nihonium",sans-serif;

    color:white;

}



/* links */

.nav-links{

    display:flex;

    gap:35px;

}



.nav-links a{

    color:#aaa;

    font-family:"Medodica",sans-serif;

    transition:.3s ease;

}



.nav-links a:hover{

    color:white;

}


/* ================= SHOWCASE ================= */


.showcase{

    position:relative;

    z-index:5;

    min-height:100vh;

    width:100%;

    overflow:hidden;

    background:#00000070;

}




/* product window */


.showcase-window{

    height:100vh;

    position:relative;

}





/* cards */


.showcase-card{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:120px 8%;

    opacity:0;

    transform:translateX(80px);

    pointer-events:none;

   transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    opacity .9s ease;

    overflow:hidden;

}





.showcase-card.active{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}





/* product colour atmosphere */


.showcase-card::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

}





.video-content::before{

    background:

    radial-gradient(
        circle at 75% 50%,
        rgba(174,213,128,.45),
        transparent 45%
    );

}



.live-content::before{

    background:

    radial-gradient(
        circle at 75% 50%,
        rgba(56,189,248,.45),
        transparent 45%
    );

}



.studio-content::before{

    background:

    radial-gradient(
        circle at 75% 50%,
        rgba(249,115,22,.45),
        transparent 45%
    );

}

.auth-content::before{

    background:

    radial-gradient(
        circle at 75% 50%,
        rgba(255, 255, 255, 0.45),
        transparent 45%
    );

}



/* dark readability layer */


.showcase-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,.7) 35%,
        transparent 75%
    );

    z-index:1;

}





/* text */


.showcase-text{

    position:relative;

    z-index:3;

    width:45%;

}





.showcase-card h1{
    font-family:"medodica",sans-serif;
    font-size:160px;
    line-height:.8;
    letter-spacing:-5px;

    color:#ffffff00;
    text-shadow:
        0 0 2.5px currentColor,
        0 0 7.5px currentColor,
        0 0 1px currentColor;
}





.showcase-card p{

    margin-top:35px;

    color:#aaa;

    font-size:24px;

    line-height:1.6;

}





.showcase-card a{

    display:block;

    margin-top:35px;

    font-weight:700;

}





.showcase-card video{

    position:absolute;

    inset:0;

    width:100vw;

    height:100vh;

    opacity: .3;

    object-fit:cover;

    object-position:center center;

    z-index:2;

    filter:
    drop-shadow(
        0 40px 100px rgba(0,0,0,.8)
    );

}





/* product colours */


.video-content h1,
.video-content a{

    color:var(--video);

}



.live-content h1,
.live-content a{

    color:var(--live);

}



.studio-content h1,
.studio-content a{

    color:var(--studio);

}


.auth-content h1,
.auth-content a{

    color:var(--auth);

}

/* mobile */


@media(max-width:900px){


.showcase-card{

    padding:120px 30px;

    justify-content:center;

    text-align:center;

}



.showcase-text{

    width:100%;

}



.showcase-card h1{

    font-size:90px;

}



.showcase-card img{

width: 100%;
height: 100%;
object-fit: cover;

}


}




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


.hero{

    position:relative;

    z-index:5;

    max-width:1920px;

    margin:150px auto;

    padding:0 30px;

    text-align:center;

}



.hero h1{

    font-family:"Nihonium",sans-serif;

    font-size:110px;

    line-height:.9;

}



.hero h1 span{

    color:#ffffff75;

}



.hero p{

    max-width:750px;

    margin:40px auto;

    color:#ffffff;

    font-size:20px;

    line-height:1.7;

}



/* buttons */


.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}



.primary,
.secondary{

    padding:17px 35px;

    border-radius:999px;

}



.primary{

    background:white;

    color:#150020;

    font-weight:700;

}



.secondary{

    border:1px solid #333;

    background:#111;

}





/* ================= PLATFORM CARDS ================= */


.platforms{

    position:relative;

    z-index:5;

    max-width:1920px;

    margin:0 auto;

    padding:0 35px 150px;

    display:grid;

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

    gap:30px;

}



/* CARD */

.card{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    padding:40px;

    min-height:260px;

    border-radius:32px;

    background:rgba(17,17,17,.45);

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

    backdrop-filter:blur(10px);

    transition:
        transform .5s ease,
        background .5s ease,
        border-color .5s ease;

}



/* IMAGE FADE */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:var(--card-image);

    background-size:cover;

    background-position:center;

    opacity:0;

    transform:scale(1.15);

    transition:
        opacity .8s ease,
        transform 1.2s ease;

    z-index:-2;

}



/* DARK IMAGE OVERLAY */

.card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.25),
        rgba(0,0,0,.75)
    );

    opacity:0;

    transition:.5s ease;

    z-index:-1;

}



/* HOVER */

.card:hover{

    transform:translateY(-10px);

    background:rgba(17,17,17,.35);

    backdrop-filter:blur(25px);

    border-color:rgba(255,255,255,.3);

}



.card:hover::before{

    opacity:1;

    transform:scale(1);

}



.card:hover::after{

    opacity:1;

}



/* CONTENT */

.card > *{

    position:relative;

    z-index:2;

}



/* ICON */

.icon{

    width:60px;

    height:60px;

    border-radius:20px;

    background:white;

    color:black;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

}



/* TEXT */

.card h2{

    font-family:"Nihonium",sans-serif;

    font-size:45px;

    margin-bottom:15px;

}



.card p{

    color:#aaa;

    line-height:1.6;

    margin-bottom:25px;

}



.card a{

    font-weight:700;

    color:white;

}



/* MOBILE */

@media(max-width:900px){


    .platforms{

        grid-template-columns:1fr;

        padding:0 25px 100px;

    }


    .card{

        min-height:240px;

        padding:30px;

    }


}



/* ================= INDIVIDUAL CARD IMAGES ================= */


.video-card::before{

    background-image:url("images/video.jpg");

}



.live-card::before{

    background-image:url("images/live.jpg");

}



.studio-card::before{

    background-image:url("images/studio.jpg");

}


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


.video-card::before{

    background-image:url("images/video.jpg");

}



.live-card::before{

    background-image:url("images/live.jpg");

}



.studio-card::before{

    background-image:url("images/studio.jpg");

}



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


.about{

    position:relative;

    z-index:5;

    padding:0 35px 150px;

}



.about-box{

    position:relative;

    overflow:hidden;

    max-width:1100px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:40px;

    background:rgba(17,17,17,.45);

    border:1px solid #222;

    backdrop-filter:blur(20px);

    transition:.5s ease;

}



/* soft glow layer */

.about-box::before{

    content:"";

    position:absolute;

    inset:-50%;

    background:
    radial-gradient(
        circle,
        rgba(159, 243, 90, 0.25),
        transparent 60%
    );

    opacity:0;

    transition:.6s ease;

    z-index:-1;

}



.about-box:hover{

    background:rgba(17,17,17,.75);

    border-color:rgba(255,255,255,.25);

    backdrop-filter:blur(35px);

    transform:translateY(-8px);

}



.about-box:hover::before{

    opacity:1;

}



.about-box h2{

    position:relative;

    z-index:2;

    font-family:"Nihonium",sans-serif;

    font-size:70px;

}



.about-box p{

    position:relative;

    z-index:2;

    color:#aaa;

    margin:30px auto;

    max-width:700px;

}



/* FOOTER */


footer{

    position:relative;

    z-index:5;

    padding:70px 0px;

    text-align:center;

}




.footer-logo{

    font-family:"Nihonium",sans-serif;

    font-size:50px;

}

/* ================= PAGES ================= */

.page{

    position:relative;

    z-index:5;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:160px 8% 100px;

}


.page-content{

    max-width:900px;

    width:100%;

}


.page-content h1{

    font-family:"Medodica",sans-serif;

    font-size:140px;

    line-height:.8;

    letter-spacing:-5px;

    margin-bottom:35px;

}


.page-content .lead{

    font-size:28px;

    color:white;

    margin-bottom:50px;

    line-height:1.5;

}


.page-content h2{

    font-family:"Nihonium",sans-serif;

    font-size:42px;

    margin:55px 0 20px;

}


.page-content p{

    color:#aaa;

    font-size:22px;

    line-height:1.8;

    margin-bottom:25px;

}


.page-content ul{

    color:#aaa;

    font-size:22px;

    line-height:2;

    padding-left:30px;

}


.page-content a{

    display:inline-block;

    margin-top:30px;

    font-weight:700;

}


/* PAGE COLOURS */

.video-page h1,
.video-page a{

    color:var(--video);

}


.live-page h1,
.live-page a{

    color:var(--live);

}


.accounts-page h1,
.accounts-page a{

    color:var(--auth);

}


.platforms-page h1,
.platforms-page a{

    color:var(--studio);

}


.about-page h1,
.about-page a{

    color:var(--gobbo-purple);

}


.board-page h1,
.board-page a{

    color:var(--gobbo-purple);

}


.contact-page h1,
.contact-page a{

    color:var(--gobbo-purple);

}


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

@media (max-width: 900px) {

    /* Header */

    nav{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

        padding:20px;

    }

    .logo h1{

        font-size:32px;

    }

    .nav-links{

        width:100%;

        max-height: 40px;

        flex-wrap:wrap;

        gap:10px;

    }

    .nav-links a{

        font-size:20px;

    }


    /* Showcase */

    .showcase-card{

        flex-direction:column;

        justify-content:center;

        text-align:center;

        padding:140px 25px 60px;

    }

    .showcase-text{

        width:100%;

    }

    .showcase-card h1{

        font-size:72px;

        letter-spacing:-2px;

    }

    .showcase-card p{

        font-size:18px;

    }

    .showcase-card video,
    .showcase-card img{

        width:100%;

        max-width:450px;

        height:auto;

        opacity:.3;

        margin-top:40px;

    }


    /* Hero */

    .hero{

        margin:120px auto 80px;

    }

    .hero h1{

        font-size:60px;

    }

    .hero p{

        font-size:18px;

    }


    /* Hero buttons only */

    .hero .buttons{

        flex-direction:column;

        align-items:center;

    }


    /* Platform cards */

    .platforms{

        grid-template-columns:1fr;

        padding:0 20px 80px;

    }

    .card{

        padding:30px;

    }

    .card h2{

        font-size:36px;

    }


    /* About */

    .about{

        padding:0 20px 80px;

    }

    .about-box{

        padding:50px 30px;

    }

    .about-box h2{

        font-size:42px;

    }


    /* Pages */

    .page{

        padding:flex 25px 80px;

        align-items:flex-start;

    }

    .page-content h1{

        font-size:72px;

        letter-spacing:-2px;

    }

    .page-content .lead{

        font-size:20px;

    }

    .page-content h2{

        font-size:30px;

    }

    .page-content p,
    .page-content ul{

        font-size:18px;

    }


    /* Footer */

    footer{

        padding:60px 20px;

    }

    .footer-logo{

        font-size:34px;

    }

    footer .buttons{

        display:flex;

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }

    footer .buttons a{

        font-size:20px;

    }

}