* { margin:0; padding:0; box-sizing:border-box; font-family:'Fira Code', monospace; }
body { color:#fff; background:#000; line-height:1.6; }
.container { width:90%; max-width:1100px; margin:0 auto; text-align:center; }

/* HEADER */
header { background:#0a0a0a; padding:20px 0; position:fixed; width:100%; top:0; z-index:10; }
header h1 { font-size:1.4rem; color:#AD0517; }
header nav ul { list-style:none; display:flex; justify-content:center; gap:25px; margin-top:10px; }
header nav a { text-decoration:none; color:#fff; transition:0.3s; }
header nav a:hover { color:#AD0517; }

/* HERO / WELCOME */
.hero {
  height:100vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  background:url('images/1.jpg') no-repeat center center/cover;
  padding-top:80px;
}
.hero::after {
  content:"";
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background:linear-gradient(to bottom right, rgba(24,8,8,0.7), rgba(77,2,8,0.8), rgba(173,5,23,0.7));
  z-index:0;
}
.hero-container { position:relative; z-index:1; text-align:center; }
.hero-content h2 { font-size:3rem; color:#fff; }
.hero-content p { font-size:1.2rem; color:#fff; margin:15px 0; }
.btn { display:inline-block; background-color:#7C8D61; color:#fff; padding:12px 30px; border-radius:6px; text-decoration:none; font-weight:600; transition:all 0.3s ease; }
.btn:hover { background-color:#003049; transform:scale(1.05); }

/* ABOUT + HAZE */
#about { position:relative; background:#111; overflow:hidden; padding:120px 0; }
#haze-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.6; }
.about-text { position:relative; z-index:1; max-width:700px; margin:0 auto; text-align:center; }

/* SERVICES */
#services { padding:120px 0; background:#0a0a0a; text-align:center; }
#services h2 { margin-bottom:50px; color:#AD0517; font-size:2rem; }
.services-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 100px;
}
.service-card {
  background:#111;
  padding:20px;
  border-radius:8px;
  flex:1 1 200px;
  max-width:250px;
  transition:0.3s;
}
.service-card:hover { background:#AD0517; transform:translateY(-5px); }

/* CONTACT */
#contact { padding:80px 0; background:#111; text-align:center; }
#contact h2 { color:#AD0517; margin-bottom:20px; font-size:2rem; }
#contact p, #contact a { font-size:1rem; color:#fff; }
#contact a { text-decoration:none; }
#contact a:hover { text-decoration:underline; }

/* FOOTER */
footer { background:#0a0a0a; padding:20px 0; text-align:center; color:#fff; margin-top:50px; }

/* MEDIA QUERIES */
@media(max-width:900px){
  .hero-content h2{font-size:2.2rem;}
  .hero-content p{font-size:1rem;}
  .services-row { flex-direction:column; }
}