body{

margin:0;
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
background:#020404;
color:white;

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

min-height:100vh;
padding:80px 20px;

overflow-x:hidden;

}

/* container */

.container{

max-width:650px;
width:100%;
text-align:center;

}

/* LOGO */

.logo{

width:210px;

margin-bottom:30px;

opacity:0;
transform:scale(0.8);

animation:
logoIntro 1.2s ease forwards,
logoHero 4s ease 1.2s forwards,
logoShrink 1s ease 5.2s forwards,
logoPulse 3s ease-in-out infinite 6.2s;

}

/* logo aparece */

@keyframes logoIntro{

to{

opacity:1;
transform:scale(1);

}

}

/* fase hero */

@keyframes logoHero{

0%{

transform:scale(1);

}

100%{

transform:scale(1.2);

}

}

/* encolhe para posição final */

@keyframes logoShrink{

0%{

transform:scale(1.2);

}

100%{

transform:scale(0.85);

}

}

/* pulsação final */

@keyframes logoPulse{

0%{

filter: drop-shadow(0 0 12px rgba(0,255,210,0.35));
transform:scale(0.85);

}

50%{

filter: drop-shadow(0 0 40px rgba(0,255,210,0.9));
transform:scale(0.9);

}

100%{

filter: drop-shadow(0 0 12px rgba(0,255,210,0.35));
transform:scale(0.85);

}

}

/* TEXTO */

.text{

opacity:0;

margin-top:20px;

max-width:520px;
margin-left:auto;
margin-right:auto;

animation:textAppear 1.3s ease forwards;
animation-delay:6.2s;

}

/* texto aparece */

@keyframes textAppear{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* título */

h1{

font-weight:600;
margin-bottom:20px;

}

/* parágrafos */

p{

text-align:justify;
line-height:1.7;

color:#c9d4d3;
font-size:16px;

margin-bottom:18px;

}

/* contacto */

.contact{

text-align:center;
margin-top:30px;

}

.contact span{

color:#00ffd2;
font-weight:500;

}

/* footer */

.footer{

margin-top:60px;
font-size:13px;
color:#7f8c8b;

}

/* mobile */

@media (max-width:600px){

.logo{

width:160px;

}

h1{

font-size:26px;

}

p{

font-size:15px;

}

body{

padding:60px 18px;

}

}