/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Arial', sans-serif; }
html, body { width:100%; height:100%; background:#000; color:#fff; }

/* Cyber grid background */
body::before {
  content:""; position:fixed; top:0; left:0; width:100%; height:100%;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 25px),
             repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 25px);
  z-index:-1;
  animation: moveGrid 15s linear infinite;
}
@keyframes moveGrid {
  0% { background-position:0 0, 0 0; }
  100% { background-position:150px 150px, 150px 150px; }
}

/* Header */
header { display:flex; align-items:flex-start; padding:20px 5%; flex-wrap:wrap; gap:20px; }
.logo { width:70px; height:auto; }
.header-text { max-width:800px; }
.header-text h1 { font-size:1.8rem; font-weight:700; margin-bottom:8px; }
.header-text p { font-size:1rem; color:rgba(255,255,255,0.8); }

/* Services container */
.services-container {
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  max-width:1200px; margin:40px auto; padding:0 20px;
}

/* Service box */
.service {
  border:2px solid #fff; border-radius:10px;
  padding:20px; width:300px;
  display:flex; flex-direction:column; align-items:center;
  transition:0.3s;
}
.service:hover { transform:translateY(-5px); box-shadow:0 0 20px rgba(255,255,255,0.3); }
.service img { width:70px; height:70px; margin-bottom:15px; }
.service h2 { font-size:1.2rem; margin-bottom:10px; text-align:center; }
.service ul { list-style:disc; padding-left:20px; font-size:0.95rem; }
.service li { margin-bottom:6px; }

/* Contact */
.contact { max-width:700px; margin:50px auto; padding:20px; border:2px solid #fff; border-radius:10px; }
.contact h2 { font-size:1.5rem; text-align:center; margin-bottom:15px; }
.contact form { display:flex; flex-direction:column; gap:10px; margin-bottom:15px; }
.contact input, .contact textarea { padding:10px; border-radius:5px; border:none; background:#111; color:white; }
.contact input::placeholder, .contact textarea::placeholder { color:#aaa; }
.contact button { padding:10px; border:none; border-radius:5px; background:#fff; color:#000; font-weight:700; cursor:pointer; transition:0.3s; }
.contact button:hover { background:rgba(255,255,255,0.8); }

/* Footer */
footer { text-align:center; padding:20px; font-size:0.9rem; color:rgba(255,255,255,0.6); border-top:1px solid rgba(255,255,255,0.2); }

/* Responsive */
@media(max-width:768px){
  header { flex-direction:column; align-items:center; text-align:center; }
  .services-container { flex-direction:column; align-items:center; }
  .service { width:90%; max-width:350px; }
}