/* =====================================================
   CyberSheep Landing
   STYLE.CSS
===================================================== */

/* =========================
   RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#05060A;

    color:#fff;

    overflow-x:hidden;

}

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

.grid{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);

    background-size:60px 60px;

    z-index:-3;

}

.glow{

    position:fixed;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.35;

    z-index:-2;

    transition:1s;

}

.glow1{

    background:#00E8FF;

    top:-250px;

    left:-150px;

}

.glow2{

    background:#a000ff;

    bottom:-250px;

    right:-150px;

}

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

.star{

    position:fixed;

    width:2px;

    height:2px;

    background:#fff;

    border-radius:50%;

    opacity:.5;

    animation:blink 4s infinite;

    pointer-events:none;

    z-index:-1;

}

@keyframes blink{

    0%,100%{

        opacity:.15;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(2);

    }

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:80px;

    backdrop-filter:blur(16px);

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

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

    z-index:999;

    transition:.35s;

}

nav{

    max-width:1300px;

    height:80px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

}

/* =========================
   LOGO
========================= */

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    flex:1;

}

.logo img{

    width:52px;

    display:block;

}

.logo span{

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

    font-size:24px;

    font-weight:700;

}

/* =========================
   MENU
========================= */

.menu{

    display:flex;

    align-items:center;

    gap:40px;

}

.menu a{

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.3s;

    position:relative;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#00E8FF;

    transition:.3s;

}

.menu a:hover{

    color:#00E8FF;

}

.menu a:hover::after{

    width:100%;

}

/* =========================
   BURGER
========================= */

.burger{

    display:none;

    width:34px;

    cursor:pointer;

    z-index:1001;

}

.burger span{

    display:block;

    width:100%;

    height:3px;

    margin:7px 0;

    background:#fff;

    border-radius:30px;

    transition:.35s;

}

.burger.active span:nth-child(1){

    transform:translateY(10px) rotate(45deg);

}

.burger.active span:nth-child(2){

    opacity:0;

}

.burger.active span:nth-child(3){

    transform:translateY(-10px) rotate(-45deg);

}

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

.hero{

    max-width:1300px;

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding:120px 40px;

}

.hero-left{

    z-index:2;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-logo{

    width:520px;

    filter:drop-shadow(0 0 45px #00E8FF);

    animation:float 6s ease-in-out infinite;

}

.hero h1{

    font-family:'Orbitron';

    font-size:90px;

    line-height:1;

    font-weight:800;

    margin-bottom:40px;

}

.hero h2{

    font-size:38px;

    color:#00E8FF;

    margin-bottom:25px;

    text-align: left;

}

.hero p{

    color:#999;

    font-size:20px;

    line-height:34px;

    max-width:520px;

}

/* =========================
   GLITCH
========================= */

.glitch{

    position:relative;

    display:inline-block;

}

.glitch::before,

.glitch::after{

    content:attr(data-text);

    position:absolute;

    inset:0;

    pointer-events:none;

}

.glitch::before{

    color:#00E8FF;

    transform:translate(-2px,0);

    animation:glitch1 2s infinite;

}

.glitch::after{

    color:#ff00ff;

    transform:translate(2px,0);

    animation:glitch2 2s infinite;

}

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

.buttons{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-top:50px;

}

.socials-row{

    display:flex;
    justify-content:center;
    gap:18px;

}

.btn{

    height:62px;

    padding:0 34px;

    border-radius:16px;

    border:2px solid #00E8FF;

    color:#fff;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px rgba(0,232,255,.45);

}

.primary{

    background:#00E8FF;

    color:#05060A;

}

.primary:hover{

    background:#32EEFF;

}

.social-btn{

    width:62px;

    padding:0;

}

.social-btn i{

    font-size:30px;

    transition:.3s;

}


.social-btn:hover i{

    transform:scale(1.05);

    filter:drop-shadow(0 0 18px #00E8FF);

}


/* =====================================================
   SECTIONS
===================================================== */

section{

    padding:120px 40px;

}

section h2{

    text-align:center;

    font-family:'Orbitron';

    font-size:48px;

    margin-bottom:70px;

}

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

#about p{

    max-width:900px;

    margin:auto;

    text-align:center;

    font-size:22px;

    line-height:42px;

    color:#b7b7b7;

}

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

.cards{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.card{

    padding:40px;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.card:hover{

    transform:translateY(-12px);

    border-color:#00E8FF;

    box-shadow:0 0 35px rgba(0,232,255,.35);

}

.card h3{

    font-size:28px;

    margin-bottom:20px;

}

.card p{

    color:#aaa;

    line-height:30px;

}

/* =====================================================
   ROADMAP
===================================================== */

.road{

    max-width:1300px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.step{

    padding:35px;

    border-radius:24px;

    background:#11131B;

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

    transition:.35s;

}

.step:hover{

    transform:translateY(-8px);

    border-color:#00E8FF;

    box-shadow:0 0 30px rgba(0,232,255,.25);

}

.step h3{

    color:#00E8FF;

    margin-bottom:16px;

}

.step p{

    color:#bbb;

    line-height:30px;

}

/* =====================================================
   TAP GAME
===================================================== */

.phone{

    width:260px;

    height:520px;

    margin:50px auto;

    border-radius:40px;

    background:#11131B;

    border:2px solid #00E8FF;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-size:80px;

    box-shadow:0 0 40px rgba(0,232,255,.35);

}

.tap{

    margin-top:25px;

    color:#00FF99;

    font-size:46px;

    animation:pulse 1s infinite;

}

.game-text{

    max-width:700px;

    margin:40px auto 0;

    text-align:center;

    color:#b7b7b7;

    font-size:20px;

    line-height:36px;

}

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

footer{

    padding:60px;

    text-align:center;

    color:#666;

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

}

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

.hidden{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes glitch1{

    0%{clip-path:inset(0 0 80% 0);}
    20%{clip-path:inset(40% 0 30% 0);}
    40%{clip-path:inset(10% 0 60% 0);}
    60%{clip-path:inset(70% 0 5% 0);}
    80%{clip-path:inset(20% 0 40% 0);}
    100%{clip-path:inset(0 0 80% 0);}

}

@keyframes glitch2{

    0%{clip-path:inset(80% 0 0 0);}
    20%{clip-path:inset(30% 0 40% 0);}
    40%{clip-path:inset(60% 0 10% 0);}
    60%{clip-path:inset(5% 0 70% 0);}
    80%{clip-path:inset(40% 0 20% 0);}
    100%{clip-path:inset(80% 0 0 0);}

}

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

#socials{

    text-align:center;

}

.social-text{

    max-width:700px;

    margin:20px auto 60px;

    color:#999;

    font-size:20px;

    line-height:34px;

}

.social-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.social-card{

    width:160px;

    height:120px;

    border-radius:24px;

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

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

    backdrop-filter:blur(20px);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.35s;

}

.social-card:hover{

    transform:translateY(-10px) scale(1.03);

    border-color:#00E8FF;

    box-shadow:

        0 0 25px rgba(0,232,255,.35),

        0 0 60px rgba(160,0,255,.2);

}

.social-card i{

    font-size:46px;

    color:#fff;

    transition:.3s;

}

.social-icon{

    width:46px;

    height:46px;

    object-fit:contain;

    transition:.3s;

}

.social-card:hover i,
.social-card:hover .social-icon{

    transform:scale(1.15);

    filter:drop-shadow(0 0 18px #00E8FF);

}

/* =====================================================
   BURGER MENU
===================================================== */

.menu-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

body.menu-open{

    overflow:hidden;

}

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

@media (max-width:900px){

nav{

    padding:0 20px;

}

.logo span{

    font-size:20px;

}

.hero{

    grid-template-columns:1fr;

    text-align:center;

    padding:120px 25px;

}

.hero-logo{

    width:280px;

    margin:auto;

}

.hero h1{

    font-size:58px;

    line-height:1;

}

.hero h2{

    font-size:28px;
    text-align: center;

}

.hero p{

    margin:auto;

}

.buttons{

    justify-content:center;

}

.cards{

    grid-template-columns:1fr;

}

.road{

    grid-template-columns:1fr;

}

.social-buttons{

    flex-direction:column;

    align-items:center;

}

.social-card{

    width:160px;

    height:120px;
    
    max-width:none;

}

.burger{

    display:block;

}

.menu{

    position:fixed;

    top:0;

    right:-320px;

    width:300px;

    height:100vh;

    background:#0B0D14;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:40px;

    transition:.35s;

    z-index:999;

}

.menu.active{

    right:0;

}

.menu a{

    font-size:22px;

}

}

/* =====================================================
   DESKTOP
===================================================== */

@media (min-width:901px){

.menu{

    position:static !important;

    width:auto;

    height:auto;

    background:none;

    border:none;

    flex-direction:row;

    gap:40px;

}

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#080A0F;

}

::-webkit-scrollbar-thumb{

    background:#00E8FF;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#46F2FF;

}

/* =========================================
   MOBILE HERO BUTTONS
========================================= */

@media (max-width:900px){

    .buttons{

        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;

    }

    .primary{

        width:260px;
        text-align:center;

    }

    .buttons .socials-row{

        display:flex;
        justify-content:center;
        gap:18px;
        width:100%;

    }

    .social-btn{

        width:62px;
        height:62px;

    }

}

/* =========================================
   DESKTOP HERO BUTTONS
========================================= */

@media (min-width:901px){

    .buttons{

        display:flex;
        flex-direction:row;
        align-items:center;
        gap:20px;

    }


    .socials-row{

        display:flex;
        flex-direction:row;
        align-items:center;
        gap:20px;

    }

}