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

body{
background:#05060a;
color:#fff;
}

/* NAV */
.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
padding:20px 8%;
background:rgba(0,0,0,0.8);
z-index:10;
}

.logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo {
  height: 50px;
  width: auto;
}

.logo{
color:#00e5ff;
font-weight:700;
}

.nav-links{
display:flex;
gap:20px;
list-style:none;
}

.nav-links a{
color:#fff;
text-decoration:none;
}

/* HERO SAFE VIDEO */
.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
}

.hero-video{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
top:0;
left:0;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.6);
}

.hero-content{
position:relative;
z-index:2;
max-width:700px;
padding:20px;
}

.glow{
font-size:48px;
color:#fff;
text-shadow:0 0 10px #00e5ff, 0 0 20px #ff4fd8;
}

/* BUTTONS */
.btns{
margin-top:20px;
display:flex;
gap:15px;
justify-content:center;
}

.btn{
padding:12px 20px;
border-radius:25px;
text-decoration:none;
font-weight:600;
}

.green{
background:#25D366;
color:white;
}

.pink{
background:#ff4fd8;
color:white;
}

/* SECTIONS */
.section{
padding:100px 8%;
text-align:center;
}

.section h2{
font-size:32px;
margin-bottom:30px;
color:#00e5ff;
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
}

.card{
background:#111;
padding:20px;
border-radius:10px;
}

.card.img{
padding:0;
overflow:hidden;
}

.card img{
width:100%;
display:block;
}

/* FOOTER */
footer{
text-align:center;
padding:20px;
background:#000;
color:#777;
}