*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Montserrat,sans-serif;
 background:#020617;
 color:#e5e7eb
}

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

.nav{
 position:fixed;
 width:100%;
 top:0;
 z-index:100;
 background:rgba(2,6,23,.75);
 backdrop-filter:blur(12px)
}

.nav-container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:20px 0
}

.nav-logo{
 font-weight:900;
 letter-spacing:3px;
 color:#38bdf8
}

.nav ul{display:flex;gap:30px;list-style:none}
.nav a{color:#e5e7eb;text-decoration:none;font-weight:500}

.hero{
 min-height:100vh;
 display:flex;
 align-items:center
}

.hero-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 align-items:center
}

.hero-text h1{
 font-size:clamp(56px,6vw,80px);
 letter-spacing:8px;
 margin:0
}

.hero-text h3{
 font-weight:300;
 letter-spacing:4px;
 color:#7dd3fc;
 margin-top:15px
}

.highlight{
 margin-top:30px;
 font-size:22px;
 color:#38bdf8;
 font-weight:500
}

.hero-image img{
 width:100%;
 max-height:600px;
 object-fit:contain;
 filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))
}

.section{
 padding:120px 0
}

.tag{
 text-transform:uppercase;
 letter-spacing:4px;
 font-size:12px;
 color:#38bdf8
}

.section h2{
 font-size:42px;
 margin:15px 0 25px
}

.lead{
 font-size:22px;
 color:#e0f2fe
}

.glass{
 background:rgba(255,255,255,.04);
 backdrop-filter:blur(14px)
}

.dark{
 background:#020617
}

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

.gallery img{
 width:100%;
 border-radius:18px;
 transition:.4s
}
.gallery img:hover{transform:scale(1.05)}

.video-grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:30px
}

.video{position:relative;cursor:pointer}
.video img{width:100%;border-radius:18px}
.video span{
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:60px;
 color:#38bdf8;
 opacity:0;
 transition:.3s
}
.video:hover span{opacity:1}

.center{text-align:center}

.socials{
 display:flex;
 justify-content:center;
 gap:80px;
 align-items:center
}

.socials img{
 width:60px;
 margin-bottom:10px
}

.socials strong{
 display:block;
 font-size:28px;
 color:#38bdf8
}

form{
 max-width:520px;
 margin:auto;
 display:flex;
 flex-direction:column;
 gap:15px
}

input,textarea{
 padding:16px;
 border-radius:14px;
 border:none;
 background:#020617;
 color:#e5e7eb
}

button{
 padding:16px;
 border:none;
 border-radius:30px;
 background:linear-gradient(135deg,#38bdf8,#0ea5e9);
 font-weight:800;
 cursor:pointer
}

footer{
 padding:40px;
 text-align:center;
 background:#020617;
 font-size:14px
}

#lightbox{
 display:none;
 position:fixed;
 inset:0;
 background:rgba(2,6,23,.95);
 z-index:200
}
#lightbox iframe{
 width:80%;
 height:80%;
 margin:5% auto;
 display:block
}
#close{
 position:absolute;
 top:30px;
 right:50px;
 font-size:50px;
 cursor:pointer;
 color:#38bdf8
}

@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr}
 .hero-image{text-align:center}
}