*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

}

body{

    font-family:'Google Sans',sans-serif;

    background:#01182a;

    color:#fff;

}


#video{

    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;

    animation:zoomVideo 30s ease-in-out infinite alternate;

}

@keyframes zoomVideo{

from{

transform:scale(1);

}

to{

transform:scale(1.12);

}

}

.video-overlay{

    position:fixed;

    inset:0;

    z-index:-2;

    background:
    linear-gradient(#01182a,    #01182a);
    opacity: 0.7;

}




.video-overlay:before{

content:"";

position:absolute;

width:700px;
height:700px;

left:-200px;
top:-200px;

background:radial-gradient(circle,
rgba(201,164,92,.30),
transparent 70%);

animation:lightMove 16s infinite linear;

filter:blur(70px);

}

.video-overlay:after{

content:"";

position:absolute;

right:-200px;
bottom:-250px;

width:650px;
height:650px;

background:radial-gradient(circle,
rgba(201,164,92,.18),
transparent 70%);

filter:blur(80px);

animation:lightMove2 20s linear infinite;

}

@keyframes lightMove{

0%{

transform:translateX(0);

}

50%{

transform:translateX(250px);

}

100%{

transform:translateX(0);

}

}

@keyframes lightMove2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-180px);

}

100%{

transform:translateY(0);

}

}

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

#loader{

position:fixed;

inset:0;

background:#2e1411;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:.8s;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

#loader img{

width:170px;

margin-bottom:40px;

animation:fadeLogo 2s infinite;

}

@keyframes fadeLogo{

0%{

opacity:.5;

}

50%{

opacity:1;

}

100%{

opacity:.5;

}

}

.loader-line{

width:240px;

height:2px;

background:#333;

overflow:hidden;

}

.loader-line span{

display:block;

height:100%;

width:0;

background:#fff;

animation:loading 2.5s linear forwards;

}

@keyframes loading{

100%{

width:100%;

}

}

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

.hero{

position:absolute;

left:50%;
top:50%;

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

text-align:center;

width:95%;

max-width:900px;

z-index:10;

animation:fadeUp 1.4s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translate(-50%,calc(-50% + 50px));

}

to{

opacity:1;

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

}

}

.logo{

width:240px;

margin-bottom:35px;

filter:drop-shadow(0 0 25px rgba(255,255,255,.12));

}

.coming{

display:inline-block;

padding:8px 24px;

border:1px solid rgba(201,164,92,.4);

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

backdrop-filter:blur(20px);

border-radius:40px;

font-size:14px;

letter-spacing:3px;

text-transform:uppercase;

color:#cbbaaa;

margin-bottom:35px;

}

h1{

font-family:'Google Sans',serif;

font-size:52px;

font-weight:700;

line-height:1.1;

margin-bottom:18px;

}

h2{

font-size:24px;

font-weight:300;

letter-spacing:2px;

margin-bottom:60px;

}

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

.countdown{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}

.box{

width:130px;

padding:28px 10px;

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

backdrop-filter:blur(20px);

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

border-radius:24px;

transition:.4s;

}

.box:hover{

transform:translateY(-8px);

border-color:#cbbaaa;

box-shadow:0 15px 45px rgba(201,164,92,.15);

}

.box span{

display:block;

font-size:38px;

font-weight:700;

color:#fff;

}

.box small{

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

opacity:.75;

}

/* ======================================
PHONE
====================================== */

.hero p{

font-size:22px;

margin-bottom:18px;

opacity:.9;

}

.phone{

display:inline-flex;

align-items:center;

justify-content:center;

padding:20px 60px;

background:#cbbaaa;

color:#111;

text-decoration:none;

font-size:34px;

font-weight:700;

border-radius:60px;

transition:.35s;
color: #fff;
margin-top:20px;

}

.phone:hover{

transform:translateY(-6px);

box-shadow:0 20px 50px rgba(201,164,92,.35);

}

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

.floating{

position:fixed;

right:35px;

bottom:35px;

display:flex;

flex-direction:column;

gap:15px;

z-index:20;

}

.floating a{

width:65px;

height:65px;

border-radius:50%;

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

backdrop-filter:blur(20px);

display:flex;

align-items:center;

justify-content:center;

color:white;

text-decoration:none;

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

transition:.35s;

font-size:24px;

}

.floating a:last-child{

width:65px;

height:65px;

background:#25D366;

font-size:14px;

font-weight:700;

}

.floating a:hover{

transform:translateY(-6px);

}

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

.particles{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

}

.particles span{

position:absolute;

width:6px;

height:6px;

background:#fff;

border-radius:50%;

opacity:.55;

animation:float 14s linear infinite;

}

.particles span:nth-child(1){left:8%;animation-delay:0s;}
.particles span:nth-child(2){left:24%;animation-delay:2s;}
.particles span:nth-child(3){left:41%;animation-delay:5s;}
.particles span:nth-child(4){left:59%;animation-delay:7s;}
.particles span:nth-child(5){left:72%;animation-delay:9s;}
.particles span:nth-child(6){left:88%;animation-delay:11s;}
.particles span:nth-child(7){left:95%;animation-delay:13s;}

@keyframes float{

0%{

transform:translateY(110vh) scale(.4);

opacity:0;

}

15%{

opacity:.7;

}

100%{

transform:translateY(-15vh) scale(1.4);

opacity:0;

}

}

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

@media(max-width:991px){

.logo{

width:180px;

}

h1{

font-size:44px;

}

h2{

font-size:24px;

}

.box{

width:100px;

padding:18px 8px;

}

.box span{

font-size:36px;

}

.phone{

font-size:26px;

padding:16px 35px;

}

.hero p{

font-size:18px;

}

}

@media(max-width:576px){

.countdown{

gap:12px;

}

.box{

width:78px;

padding:15px 5px;

}

.box span{

font-size:26px;

}

.box small{

font-size:11px;

}

h1{

font-size:34px;

}

h2{

font-size:20px;

}

.phone{

width:100%;

font-size:24px;

}

.floating{

right:15px;
bottom:15px;

}

}

.phone{
    position: relative;
    overflow: hidden;
}

.phone::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transform:skewX(-25deg);

}

.phone.shine::before{

    animation:shineMove 1.2s linear;

}

@keyframes shineMove{

    from{
        left:-120%;
    }

    to{
        left:180%;
    }

}

.logo path{

    stroke:#cbbaaa;
    
    stroke-width:2;
    
    fill:transparent;
    
    stroke-dasharray:800;
    
    stroke-dashoffset:800;
    
    animation:drawLogo 4s forwards;
    
    }
    
    @keyframes drawLogo{
    
    to{
    
    stroke-dashoffset:0;
    
    fill:white;
    
    }
    
    }
    .hero-slider{
        position:fixed;
        inset:0;
        z-index:-5;
    }
    
    .slide{
    
        position:absolute;
        inset:0;
    
        opacity:0;
        visibility:hidden;
    
        transition:
            opacity 2s ease,
            visibility 2s;
    
    }
    
    .slide.active{
    
        opacity:1;
        visibility:visible;
    
    }
    
    .slide img{
    
        width:100%;
        height:100%;
        object-fit:cover;
    
        transform:scale(1);
    
    }
    
    .slide.active img{
    
        animation:kenburns 8s linear forwards;
    
    }
    
    @keyframes kenburns{
    
        from{
    
            transform:scale(1);
    
        }
    
        to{
    
            transform:scale(1.12);
    
        }
    
    }

.particles{

    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:3;
    
    }
    
    .particles span{
    
    position:absolute;
    
    background:#d7b36a;
    
    border-radius:50%;
    
    filter:blur(2px);
    
    box-shadow:
    0 0 10px rgba(215,179,106,.8),
    0 0 25px rgba(215,179,106,.4);
    
    animation:dust linear infinite;
    
    }
    
    @keyframes dust{
    
    0%{
    
    transform:
    translateY(110vh)
    translateX(0)
    scale(.2);
    
    opacity:0;
    
    }
    
    20%{
    
    opacity:.8;
    
    }
    
    100%{
    
    transform:
    translateY(-20vh)
    translateX(80px)
    scale(1.2);
    
    opacity:0;
    
    }
    
    }

    .light-rays{

        position:fixed;
        
        inset:0;
        
        pointer-events:none;
        
        z-index:1;
        
        overflow:hidden;
        
        }
        
        .light-rays::before{
        
        content:"";
        
        position:absolute;
        
        left:-20%;
        
        top:-20%;
        
        width:70%;
        
        height:180%;
        
        background:linear-gradient(
        
        90deg,
        
        transparent,
        
        rgba(215,179,106,.08),
        
        transparent
        
        );
        
        transform:rotate(18deg);
        
        animation:rayMove 16s linear infinite;
        
        filter:blur(50px);
        
        }
        
        @keyframes rayMove{
        
        0%{
        
        transform:
        translateX(-20%)
        rotate(18deg);
        
        }
        
        100%{
        
        transform:
        translateX(120%)
        rotate(18deg);
        
        }
        
        }

        #loader svg{

            width:220px;
            
            overflow:visible;
            
            }
            
            #loader svg path{
            
            fill:transparent;
            
            stroke:#d7b36a;
            
            stroke-width:2;
            
            stroke-dasharray:1200;
            
            stroke-dashoffset:1200;
            
            animation:drawLogo 3.8s ease forwards;
            
            }
            
            @keyframes drawLogo{
            
            70%{
            
            fill:transparent;
            
            stroke-dashoffset:0;
            
            }
            
            100%{
            
            fill:white;
            
            stroke-dashoffset:0;
            
            }
            
            }

            .video-overlay{

                position:fixed;
                inset:0;
                z-index:-2;
                
                background:
                
                linear-gradient(
                180deg,
                rgba(0,0,0,.25),
                rgba(0,0,0,.75)
                ),
                
                linear-gradient(
                90deg,
                rgba(0,0,0,.25),
                transparent 40%,
                transparent 60%,
                rgba(0,0,0,.25)
                );
                
                }

                .hero{

                    animation:
                    
                    fadeHero 2s ease,
                    
                    floatHero 8s ease-in-out infinite;
                    
                    }
                    
                    @keyframes floatHero{
                    
                    0%{
                    
                    transform:
                    translate(-50%,-50%);
                    
                    }
                    
                    50%{
                    
                    transform:
                    translate(-50%,-48%);
                    
                    }
                    
                    100%{
                    
                    transform:
                    translate(-50%,-50%);
                    
                    }
                    
                    }
                    
@media (max-width: 600px) {

.hero {
    width:100%;
    max-width:100%;
}
    h1 {
        font-size: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }
    h2 {
        margin-bottom:30px;
    }
    .countdown {
        marign-bottom:30px;
    }
        .phone {
        width: 80%;
        font-size: 20px;
        }
}