/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:system-ui;background:#0b0b0f;color:#fff;overflow-x:hidden;}
a{text-decoration:none;transition:all .3s;}
img{display:block;}

/* ===== Header & Navigation ===== */
header{
position:fixed;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;
padding:20px 40px;background:rgba(0,0,0,0.5);backdrop-filter:blur(10px);z-index:1000;
}
.logo{font-size:22px;color:white;font-weight:bold;}
nav a{margin:0 15px;color:#ddd;}
#burger{display:none;flex-direction:column;cursor:pointer;z-index:2001;}
#burger span{height:3px;width:25px;background:white;margin:4px;transition:0.3s;}
nav{display:flex;z-index:2000;}

/* ===== Hero ===== */
.hero{
position:relative;height:100vh;width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;
}
.hero-bg{
position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:brightness(0.6);
}
.hero-content{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
text-align:center;z-index:2;display:flex;flex-direction:column;gap:50px;
padding:0 20px;max-width:1200px;will-change: transform;
}
.hero h1{font-size:70px;}
.cta{display:inline-block;padding:14px 30px;background:linear-gradient(45deg,#00f0ff,#8a2cff);border-radius:30px;color:white;}
.cta:hover{transform:scale(1.07);box-shadow:0 0 30px rgba(0,240,255,0.6);}

/* ===== Sections ===== */
.section{padding:120px 10%;opacity:0;transform:translateY(60px);transition:all 1s ease;}
.section.visible{opacity:1;transform:translateY(0);}
h2{margin-bottom:40px;font-size:36px;}
.grid{display:grid;gap:30px;}
.grid.two{grid-template-columns:1fr 1fr;}
.grid.four{grid-template-columns:repeat(4,1fr);}
.grid img{width:100%;border-radius:12px;transition:transform .4s ease,box-shadow .4s ease;}
.grid img:hover{transform:scale(1.05) rotateX(6deg) rotateY(-6deg);box-shadow:0 20px 40px rgba(0,240,255,0.35);}
.single{width:100%;max-width:800px;margin:auto;display:block;}
.video iframe{width:100%;height:400px;border:none;}
.blog-link{display:inline-block;margin-top:30px;color:#00f0ff;}
.top{display:block;margin-top:40px;opacity:0.6;color:white;}
@media(max-width:1024px){
  .section{padding:100px 20px;}
  .grid img{width:100%;height:auto;}
}

/* ===== Progress Bar ===== */
#progress{position:fixed;top:0;left:0;height:3px;background:#00f0ff;width:0%;z-index:2000;}

/* ===== Beams ===== */
.beam{
position:fixed;top:-100vh;width:2px;height:80vh;background:linear-gradient(to bottom,#00f0ff,transparent);
opacity:0.15;pointer-events:none;animation:float 8s linear infinite;
}
@keyframes float{0%{transform:translateY(-100vh);}100%{transform:translateY(100vh);}}

/* ===== Responsive ===== */
@media(max-width:1024px){
#burger{display:flex;}
nav{display:none;flex-direction:column;position:absolute;top:70px;right:20px;background:#111;padding:20px;border-radius:10px;}
nav.nav-open{display:flex;}
.grid.four,.grid.two{grid-template-columns:1fr;}
}