*{box-sizing:border-box}
body{
 margin:0;
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
 background:#02040a;
 color:#fff;
}

.container{max-width:1300px;margin:auto;padding:0 20px}

/* NAVBAR */
nav{
 position:fixed;width:100%;
 background:rgba(255,255,255,0.75);
 backdrop-filter:blur(12px);
 border-bottom:1px solid rgba(0,0,0,0.05);
 z-index:10;
}
.nav-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.logo img{height:40px}
nav a{color:#111;text-decoration:none;margin-left:25px;font-weight:500}

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

.hero video{
 position:absolute;width:100%;height:100%;object-fit:cover;z-index:-2;
}

.hero::after{
 content:"";
 position:absolute;
 width:100%;height:100%;
 background:linear-gradient(to bottom,rgba(0,0,0,0.4),#02040a);
 z-index:-1;
}

.hero h1{font-size:54px;margin-bottom:20px}
.hero p{opacity:0.9}

/* sections */
.section{padding:100px 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px}

.card{
 background:rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.1);
 padding:25px;border-radius:16px;
 transform:translateY(40px);
 opacity:0;
 transition:0.6s;
}
.card.show{transform:translateY(0);opacity:1}

iframe{width:100%;height:450px;border:none;border-radius:16px}

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