body{
margin:0;
background:#06142e;
color:white;
overflow-x:hidden;



}

#particles-js{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;

background: linear-gradient(135deg,#003B8F,#0057D9,#00A3FF);
/* 

background:linear-gradient(135deg,#06142e,#3b0764);
background: linear-gradient(135deg,rgb(255, 255, 255),rgb(246, 245, 244),#00A3FF);
*/
}

nav,section,footer{
position:relative;
z-index:2;
}

.navbar{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
}

.hero{
min-height:100vh;
display:flex;
align-items:center;
}

h1{
font-size:60px;
font-weight:bold;
}

h1 span{
color:#00ff99;
}


.ai-brain{
height:280px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.brain-core{
position:absolute;
font-size:80px;
animation:brainFloat 40s infinite;
filter:drop-shadow(0 0 30px cyan);
}

.brain-core b{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:35px;
}

.brain-ring{
	
width:80px;
height:80px;
border-radius:50%;
border:3px dashed #00ff99;
box-shadow:0 0 40px #00ff99;
animation:spin 100s linear infinite;

}


.dashboard{
margin:auto;
width:350px;
padding:30px;
background:rgba(255,255,255,.12);
border-radius:25px;
backdrop-filter:blur(20px);
animation:floatDash 5s infinite;
}


@keyframes spin{
100%{transform:rotate(360deg);}
}

@keyframes brainFloat{
50%{transform:translateY(-20px);}
}

@keyframes floatDash{
50%{transform:translateY(20px);}
}

footer{
text-align:center;
padding:40px;
background:#000;
}






.hero-logo{

text-align:center;
margin-bottom:20px;
 width: 280px;              /* control logo area */
    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-logo img{

/*width:180px;*/

animation:logoFloat 5s infinite;

filter:drop-shadow(0 0 25px cyan);

    width: 100%;
    height: auto;              /* keeps Dias logo proportion */
    max-height: 160px;
    object-fit: contain;       /* prevents deformation */

}


@keyframes logoFloat{

50%{

transform:
translateY(-15px);

}

}

@media(max-width:768px){

    .hero-logo{
        width: 180px;
    }

    .hero-logo img{
        max-height: 100px;
    }

}


.ai-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:30px;
}

.ai-globe{
    width:200px;
    height:200px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:60px;
    font-weight:bold;
    color:white;

    background:
    radial-gradient(circle,#007BFF,#020B2D);

    box-shadow:
    0 0 50px #009DFF;
}















.dias-globe{

    width:300px;
    height:300px;
    border-radius:50%;
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;

    background:
    radial-gradient(
        circle at 30% 30%,
        #00A3FF,
        #0057D9 40%,
        #020B2D 80%
    );

    box-shadow:
    0 0 40px #009DFF,
    inset 0 0 40px #001B5D;

}


/* Earth network lines */
.dias-globe::before{

    content:"";
    position:absolute;
    inset:20px;

    border-radius:50%;

    background:
    linear-gradient(
        90deg,
        transparent 45%,
        rgba(255,255,255,.4),
        transparent 55%
    );

    animation: rotateEarth 50s linear infinite;

}


/* orbit rings */

.orbit{

    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,200,255,.8);

}


.orbit1{

    width:360px;
    height:90px;
    transform:rotate(25deg);

}


.orbit2{

    width:330px;
    height:100px;
    transform:rotate(-30deg);

}


/* satellite */

.satellite{

    position:absolute;

    top:40px;
    right:20px;

    font-size:35px;

    animation:satelliteMove 5s infinite alternate;

}


/* AI */

.globe-text{

    color:white;
    font-size:70px;
    font-weight:900;

    text-shadow:
    0 0 20px #00A3FF;

    z-index:2;

}



@keyframes rotateEarth{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


@keyframes satelliteMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(30px);
    }

}


/* OUTER BRAIN RING - FIXED */
.brain-ring{

    width:350px;
    height:350px;

    position:relative;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;


    background:
    radial-gradient(
        circle,
        transparent 55%,
        #0057D9 60%,
        #00A3FF 70%,
        transparent 75%
    );


    box-shadow:
    0 0 40px #009DFF,
    inset 0 0 25px #0057D9;

}



/* INNER ROTATING EARTH */
.rotating-globe{

    width:250px;
    height:250px;

    position:absolute;

    border-radius:50%;


    background:

    radial-gradient(
        circle at 30% 30%,
        #00D9FF,
        #0057D9 45%,
        #020B2D 80%
    );


    box-shadow:
    inset -30px -20px 50px #000,
    0 0 35px #00A3FF;


    animation:
    earthRotate 50s linear infinite;

}



/* digital longitude lines */

.rotating-globe::before{

    content:"";

    position:absolute;
    inset:15px;

    border-radius:50%;


    background:
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 20px,
        rgba(255,255,255,.3) 22px
    );

}



/* AI TEXT */

.ai-center{

    position:absolute;

    z-index:5;

    color:white;

    font-size:65px;
    font-weight:900;

    text-shadow:
    0 0 20px #00A3FF,
    0 0 40px #0057D9;

}



/* ONLY GLOBE ROTATES */

@keyframes earthRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}