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

body{
font-family:Segoe UI,sans-serif;
background:#050514;
overflow:hidden;
color:white;
}

#intro{
position:fixed;
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
background:radial-gradient(circle,#170033,#020208);
z-index:100;
transition:2s;
}

.beam{
position:absolute;
width:6px;
height:100%;
background:linear-gradient(
to top,
transparent,
#00ffff,
#ff00ff,
transparent
);
box-shadow:
0 0 30px #00ffff,
0 0 80px #ff00ff;
animation:pulse 2s infinite;
}

.intro-content{
text-align:center;
z-index:10;
}

.intro-content h1{
font-size:4rem;
letter-spacing:8px;
}

.intro-content h2{
margin-top:15px;
color:#00ffff;
font-weight:300;
}

.intro-content p{
margin-top:20px;
opacity:.8;
}

#gates{
position:fixed;
width:100%;
height:100%;
z-index:90;
pointer-events:none;
}

.gate{
position:absolute;
top:0;
width:50%;
height:100%;
background:#080808;
transition:2.5s ease;
}

.left-gate{
left:0;
border-right:2px solid gold;
}

.right-gate{
right:0;
border-left:2px solid gold;
}

#city{
width:100%;
height:100vh;
background:
linear-gradient(
rgba(0,0,0,.4),
rgba(0,0,0,.4)
),
url('heal-city.jpg');

background-size:cover;
background-position:center;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.city-header{
text-align:center;
margin-bottom:50px;
}

.city-header h1{
font-size:3rem;
text-shadow:0 0 20px cyan;
}

.city-header p{
color:#00ffff;
margin-top:10px;
}

.pyramid-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
width:90%;
max-width:1200px;
}

.pyramid{
background:rgba(0,0,0,.55);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.2);
padding:30px;
border-radius:20px;
text-align:center;
cursor:pointer;
transition:.4s;
}

.pyramid:hover{
transform:translateY(-10px);
box-shadow:0 0 25px cyan;
}

.pyramid span{
font-size:3rem;
display:block;
margin-bottom:10px;
}

@keyframes pulse{
0%{opacity:.3;}
50%{opacity:1;}
100%{opacity:.3;}
}