@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Poppins,sans-serif;
}

body{
    background:#08121d;
    color:white;
    overflow-x:hidden;
}

/* Enhanced animated background */
.background{
    position:fixed;
    inset:0;
    z-index:-2;

    background:
        radial-gradient(circle at top,#2b8cff33,transparent),
        linear-gradient(135deg,#06111f,#13283d,#06111f);
}

/* Main dot grid - denser and drifting */
.background::after{
    content:"";
    position:absolute;
    inset:0;
    width:300%;
    height:300%;

    background:
        radial-gradient(white 1px,transparent 1px);

    background-size:18px 18px;
    opacity:.09;

    animation:drift 65s linear infinite;
}

/* Secondary colored dots - "alive" shimmering effect */
.background::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle,
            rgba(0,180,255,.19) 1px,
            transparent 1px);

    background-size:18px 18px;

    animation:
        drift 48s linear infinite,
        pulse 6.5s ease-in-out infinite;
}

@keyframes drift{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(-9px,-6px);
    }
    50%{
        transform:translate(-18px,-12px);
    }
    75%{
        transform:translate(-9px,-6px);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes pulse{
    0%,100%{ opacity:.32; }
    50%{ opacity:.78; }
}

/* Centered header */
header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:18px 40px;
    position:sticky;
    top:0;
    backdrop-filter:blur(20px);
    background:rgba(10,20,30,.65);
    z-index:100;
}

.logo{
    grid-column:2;
}

.logo h1{
    margin:0;
    text-align:center;
    font-size:1.8rem;
    font-weight:700;
    background:linear-gradient(90deg,#00d4ff,#9d7cff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

nav{
    grid-column:3;
    justify-self:end;
    display:flex;
    gap:25px;
}

nav a{
    color:white;
    text-decoration:none;
    transition:.3s;
    font-weight:500;
}

nav a:hover{
    color:#5fd0ff;
}

.hero{
    height:90vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    animation:fadeIn 2s;
}

.hero h2{
    font-size:4rem;
    margin-bottom:20px;
    background:linear-gradient(90deg,#00d4ff,#9d7cff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
}

.hero p{
    max-width:700px;
    font-size:1.2rem;
    margin-bottom:40px;
}

.button{
    padding:16px 36px;
    border-radius:40px;
    text-decoration:none;
    background:linear-gradient(90deg,#00b8ff,#5f7cff);
    color:white;
    transition:.3s;
    box-shadow:0 0 25px rgba(0,180,255,.4);
}

.button:hover{
    transform:translateY(-5px);
    box-shadow:0 0 40px rgba(0,180,255,.8);
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:35px;
    padding:80px 10%;
}

.card{
    padding:35px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(20px);
    border-radius:20px;
    transition:.4s;
}

.card:hover{
    transform:translateY(-15px);
    box-shadow:0 20px 40px rgba(0,150,255,.3);
}

.gallery{
    padding:80px 10%;
    text-align:center;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:30px;
    margin-top:40px;
}

.gallery img{
    width:100%;
    border-radius:20px;
    transition:.5s;
    box-shadow:0 0 30px rgba(0,0,0,.5);
}

.gallery img:hover{
    transform:scale(1.05);
}

.info{
    padding:100px 10%;
    display:flex;
    justify-content:center;
}

.contact-card{
    padding:40px;
    border-radius:20px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(25px);
    max-width:600px;
    line-height:2;
    box-shadow:0 15px 35px rgba(0,0,0,.4);
}

footer{
    padding:30px;
    text-align:center;
    opacity:.6;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}