/* ================= GLOBAL ================= */

body{

margin:0;
font-family:Arial, Helvetica, sans-serif;

background:linear-gradient(180deg,#021629,#062b45);
color:white;

overflow-x:hidden;

}


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

.energy-layer{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background-image:
radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.5), transparent),
radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.5), transparent),
radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.4), transparent);

background-size:600px 600px;

animation:energyMove 120s linear infinite;

z-index:-1;

}

@keyframes energyMove{

0%{
transform:translateY(0px);
}

100%{
transform:translateY(-1000px);
}

}


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

.hero{

text-align:center;
padding:120px 20px 100px 20px;

}

.logo{

  width:110px;
  margin-bottom:25px;

  animation:fadeUp 1.2s ease;

  /* 🔥 Add this */
  filter:
    drop-shadow(0 0 12px rgba(0,0,0,0.8))
    drop-shadow(0 0 25px rgba(0,150,255,0.35));

}

.title{

font-size:38px;
margin-bottom:20px;
letter-spacing:1px;

animation:fadeUp 1.4s ease;

}

.hero-text{

max-width:650px;
margin:auto;
font-size:18px;
line-height:1.7;
opacity:0.9;

animation:fadeUp 1.6s ease;

}


/* ================= BUTTON ================= */

.enter-btn{

display:inline-block;

margin-top:40px;

padding:16px 40px;

border-radius:8px;

background:linear-gradient(90deg,#00c2ff,#4ee3c1);

color:#022033;

font-weight:600;

text-decoration:none;

transition:all 0.3s ease;

box-shadow:0 0 20px rgba(0,194,255,0.5);

}

.enter-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 35px rgba(0,194,255,0.8);

}


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

.section{

padding:80px 20px;

max-width:1000px;
margin:auto;

}

h2{

color:#e0b94f;

margin-bottom:25px;

font-size:26px;

}

.section p{

line-height:1.8;
opacity:0.9;

}


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

.card-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:20px;

margin-top:25px;

}

.card{

background:#0b2f4d;

padding:30px;

border-radius:14px;

transition:all 0.35s ease;

border:1px solid rgba(255,255,255,0.05);

}

.card:hover{

transform:translateY(-6px);

background:#0f3b61;

box-shadow:0 12px 30px rgba(0,0,0,0.35);

}


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

footer{

text-align:center;

padding:60px 20px;

opacity:0.6;

font-size:14px;

margin-top:40px;

}


/* ================= INITIAL HERO MOTION ================= */

@keyframes fadeUp{

from{

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

}

to{

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

}

}


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

.reveal{

opacity:0;
transform:translateY(60px);
transition:all 1s ease;

}

.reveal.active{

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

}


/* ================= CARD STAGGER EFFECT ================= */

.card{

opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;

}

.card.active{

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

}