* {
    box-sizing: border-box;
}


body {

    margin:0;

    min-height:100vh;

    overflow-x:hidden;

    background:#000;

    color:white;

    font-family:Arial, sans-serif;

    display:flex;

    justify-content:center;

    align-items:center;

}






/* Main wrapper */

.wrapper {

    min-height:100vh;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:40px;

}






/* Cyber grid background */

body::before {

    content:"";

    position:fixed;

    inset:0;


    background-image:

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

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


    background-size:50px 50px;


    opacity:.25;

    z-index:-1;

}







/* Permanent logo outside cube */

.company-logo {


    width:260px;

    max-width:80%;


    margin-bottom:60px;



    filter:

    drop-shadow(
        0 0 20px rgba(0,170,255,.6)
    );


}







/* 3D Scene */

.scene {

    width:350px;

    height:350px;

    perspective:900px;

    touch-action:none;

}







/* Cube */

.cube {

    width:300px;

    height:300px;

    position:relative;

    transform-style:preserve-3d;

    transform:

    rotateX(-20deg)

    rotateY(30deg);


    transition:

    transform .2s;

}







/* Cube Faces */

.face {


    position:absolute;


    width:300px;

    height:300px;


    background:

    linear-gradient(

        135deg,

        rgba(0,170,255,.25),

        rgba(0,0,0,.8)

    );


    border:

    1px solid #00aaff;



    box-shadow:


    0 0 30px rgba(0,170,255,.4);



    display:flex;


    justify-content:center;


    align-items:center;


    text-align:center;



    padding:30px;



}







.face h2 {


    color:#00aaff;


    letter-spacing:1px;


    text-shadow:

    0 0 10px rgba(0,170,255,.5);


}







.face p {


    color:#ddd;


    line-height:1.5;


    font-size:15px;


}







/* Cube positions */


.front {

    transform:

    translateZ(150px);

}



.back {

    transform:

    rotateY(180deg)

    translateZ(150px);

}



.right {

    transform:

    rotateY(90deg)

    translateZ(150px);

}



.left {

    transform:

    rotateY(-90deg)

    translateZ(150px);

}



.top {

    transform:

    rotateX(90deg)

    translateZ(150px);

}



.bottom {

    transform:

    rotateX(-90deg)

    translateZ(150px);

}







/* Logo inside cube */


.inside-logo {


    width:180px;


    margin-bottom:15px;



    filter:

    drop-shadow(
        0 0 10px rgba(0,170,255,.5)
    );


}







/* Button section */


.actions {


    margin-top:90px;


    text-align:center;


}





.button {


    display:inline-block;


    padding:

    14px 35px;


    background:#00aaff;


    color:white;


    border-radius:30px;


    text-decoration:none;


    font-weight:bold;


    box-shadow:


    0 0 20px rgba(0,170,255,.6);



    transition:.3s;


}



.button:hover {


    transform:scale(1.05);


    background:#0088cc;


}







/* Links */

.links {


    margin-top:25px;


}



.links a {


    color:#00aaff;


    text-decoration:none;


    margin:0 10px;


}


.links a:hover {


    text-decoration:underline;


}







/* SEO section */

.seo {


    max-width:900px;


    padding:

    80px 20px;


    color:#aaa;


    line-height:1.8;


}



.seo h2 {


    color:#00aaff;


}







.footer {


    color:#666;


    font-size:14px;


    padding-bottom:30px;


}







/* Mobile */


@media(max-width:600px){


    body {

        align-items:flex-start;

    }



    .wrapper {


        padding-top:40px;


    }



    .company-logo {


        width:200px;


        margin-bottom:45px;


    }



    .scene {


        transform:

        scale(.85);


    }



    .actions {


        margin-top:70px;


    }



}