:root {

    --text:#111;
    --nav-bg:rgba(255,255,255,.72);

}


body.dark {

    --text:#eee;
    --nav-bg:rgba(20,20,20,.75);

}


* {

    box-sizing:border-box;

}


html,
body {

    margin:0;
    padding:0;

    font-family:
    Inter,
    system-ui,
    sans-serif;

}



/*
 VIDEO BACKGROUND
*/

.video-background {

    position:fixed;

    inset:0;

    z-index:-2;

}


.video-background video {

    width:100%;

    height:100%;

    object-fit:cover;

}



/*
 GLOBAL OVERLAY
*/

.site-wrapper {

    min-height:100vh;

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

}



/*
 HEADER
*/

.site-header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}



.nav-container {

    height:50px;

    padding:0 28px;

    display:flex;

    align-items:center;

    background:var(--nav-bg);

    backdrop-filter:blur(14px);

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

}



/*
 LOGO
*/

.logo-container {

    display:flex;

    align-items:center;

    width:34px;

}



.logo {

    width:32px;

    height:32px;

    display:block;

}


/* 
BLOCK ALL general interface
*/

/*
 HERO CONTENT
*/


.hero-content {

    padding-top:90px;

    max-width:900px;

    margin:0 auto;

}



.content-box {


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


    backdrop-filter:
    blur(12px);


    border-radius:14px;


    padding:30px 40px;


    box-shadow:
    0 10px 30px rgba(0,0,0,.15);


}


.content-box h2 {

    margin-top:0;

    background:none;

    padding:0;

}


/*
 ORIGINAL BLOCK SVG ANIMATION
*/

.logo rect {

    transform-box:fill-box;

    transform-origin:center;

    animation:
    block-fade-float 4s ease-in-out infinite;

}


.logo rect:nth-child(1) {
    animation-delay:0ms;
}

.logo rect:nth-child(2) {
    animation-delay:400ms;
}

.logo rect:nth-child(3) {
    animation-delay:800ms;
}

.logo rect:nth-child(4) {
    animation-delay:200ms;
}

.logo rect:nth-child(5) {
    animation-delay:600ms;
}

.logo rect:nth-child(6) {
    animation-delay:1000ms;
}

.logo rect:nth-child(7) {
    animation-delay:400ms;
}

.logo rect:nth-child(8) {
    animation-delay:800ms;
}

.logo rect:nth-child(9) {
    animation-delay:1200ms;
}



@keyframes block-fade-float {


    0%,100% {

        opacity:.55;

        transform:
        translateY(0)
        scale(1);

    }


    50% {

        opacity:1;

        transform:
        translateY(-3px)
        scale(1.05);

    }

}



/*
 NAVIGATION
*/

.main-nav {

    display:flex;

    align-items:center;

    gap:22px;

    margin-left:42px;

}



.main-nav a {

    color:var(--text);

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    letter-spacing:.2px;

    transition:.2s;

}


.main-nav a:hover {

    opacity:.55;

}



/*
 RIGHT ACTIONS
*/

.header-actions {

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:10px;

}



/*
 LANGUAGE SWITCHER
*/

.language-switcher {

    display:flex;

    align-items:center;

    gap:6px;

    margin-right:8px;

    font-size:12px;

    font-weight:700;

}



.language-switcher a {

    color:var(--text);

    text-decoration:none;

    opacity:.55;

}



.language-switcher a.active {

    opacity:1;

}



.language-switcher span {

    opacity:.4;

}



/*
 BUTTONS
*/

.theme-toggle,
.mobile-menu {

    border:0;

    background:none;

    padding:4px;

    cursor:pointer;

    font-size:17px;

    color:var(--text);

}



/*
 CONTENT
*/

section {

    padding-top:90px;

    max-width:1100px;

    margin:auto;

    color:var(--text);

}



section h2 {

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

    padding:

    18px 25px;

    border-radius:10px;

}



/*
 FOOTER
*/

.site-footer {

    display:none;

}



/*
 MOBILE
*/

@media(max-width:768px){


.nav-container {

    height:50px;

    padding:0 15px;

}



.logo-container {

    width:34px;

}


.logo {

    width:30px;

    height:30px;

}



.main-nav {

    display:none;

    position:absolute;

    top:50px;

    left:0;

    width:100%;

    flex-direction:column;

    gap:15px;

    padding:20px;

    background:var(--nav-bg);

}



.main-nav.active {

    display:flex;

}



.mobile-menu {

    display:block;

}


}