/* Black & white gaming-themed stylesheet */
:root {
  --bg: #0a0a0a;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --accent: #ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
.site-header{background: rgba(0,0,0,0.7); backdrop-filter: blur(10px); position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0; border-bottom: 1px solid rgba(255,255,255,0.05);}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo { display: flex; align-items: center; text-decoration: none; color: var(--fg); }
.logo-img { height: 32px; margin-right: 12px; }
.logo-text { font-family: 'Orbitron', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; }
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px}
.main-nav a{color:var(--fg);text-decoration:none;opacity:0.9}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.06);color:var(--fg);padding:8px 12px;border-radius:6px}
.hero{height:100vh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-video-wrapper { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); z-index: -1; overflow: hidden; }
#bgvid { object-fit: cover; width: 100%; height: 100%; }
.hero-inner{max-width:800px; z-index: 1; text-align: center;}
.hero h1{font-family:'Orbitron',sans-serif;font-weight:700;font-size:clamp(40px,9vw,96px);margin:0;letter-spacing:6px;text-transform:uppercase; white-space: nowrap;}
.hero .tagline{color:var(--muted);font-size:1.05rem;margin-top:10px}
.cta{margin-top:24px;display:flex;gap:12px; justify-content: center;}
.btn{display:inline-block;padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:600}
.btn.primary{background:var(--fg);color:var(--bg);box-shadow:0 6px 20px rgba(255,255,255,0.03)}
.btn.ghost{border:1px solid rgba(255,255,255,0.06);color:var(--fg);background:transparent}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent, rgba(255,255,255,0.02) 1px);mix-blend-mode:overlay;pointer-events:none;opacity:0.18}

.slider-container { position: relative; width: 100%; height: 100%; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s ease-in-out; }
.slide.active { opacity: 1; }
.slider-nav { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; z-index: 10; }
.slider-arrow { background: none; border: none; color: var(--fg); font-size: 20px; cursor: pointer; padding: 0 15px; }
.slider-dots { display: flex; gap: 10px; }
.slider-dots .dot { width: 8px; height: 16px; border-radius: 50%; background: rgba(255,255,255,0.3); cursor: pointer; }
.slider-dots .dot.active { background: var(--fg); }

.overview { padding: 80px 0; text-align: center; max-width: 800px; }
.overview h2 { font-family: 'Orbitron', sans-serif; margin-bottom: 24px; }
.overview p { color: var(--muted); margin-bottom: 1em; line-height: 1.6; }
.projects{padding:80px 0}
.projects h2{font-family:'Orbitron',sans-serif;margin-bottom:24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:rgba(255,255,255,0.02);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.6)}
.thumb{height:160px;border-radius:8px;margin-bottom:12px;background-size:cover;background-position:center}
.thumb.t1{background:linear-gradient(135deg,#111,#333)}
.thumb.t2{background:linear-gradient(135deg,#222,#444)}
.thumb.t3{background:linear-gradient(135deg,#000,#222)}
.team,.contact{padding:60px 0;}
.team h2 {font-family:'Orbitron',sans-serif;margin-bottom:24px; color: var(--fg);}
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.team-member { background: rgba(255,255,255,0.02); padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.03); }
.team-member h3 { margin: 0 0 5px 0; font-family:'Orbitron',sans-serif; }
.team-member p { margin: 0; color: var(--muted); }
.contact {color:var(--muted); text-align: center;}
.social-links { margin-top: 20px; }
.social-links a { color: var(--fg); text-decoration: none; margin: 0 15px; font-weight: 600; }
.social-links a:hover { text-decoration: underline; }

#contact-form { max-width: 600px; margin: 40px auto 0; border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 30px; background: rgba(0,0,0,0.2); }
.form-group { display: flex; gap: 15px; margin-bottom: 15px; }
#contact-form input, #contact-form textarea { 
  width: 100%; 
  padding: 14px; 
  background: rgba(255,255,255,0.03); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: 8px; 
  color: var(--fg); 
  font-family: 'Inter', sans-serif;
  transition: border-color 0.3s, box-shadow 0.3s;
}
#contact-form input::placeholder, #contact-form textarea::placeholder {
  color: var(--muted);
}
#contact-form input:focus, #contact-form textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 15px rgba(255,255,255,0.05);
}
#contact-form textarea { resize: vertical; }
#contact-form button { width: 100%; border: none; cursor: pointer; transition: background-color 0.3s; }
#contact-form button:hover { background-color: #ddd; }

.site-footer{padding:30px 0;border-top:1px solid rgba(255,255,255,0.03);text-align:center;color:var(--muted)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.main-nav{display:none}.menu-toggle{display:inline-block}}
@media (max-width:560px){.grid{grid-template-columns:1fr}.hero h1{font-size:48px}.hero{align-items:flex-end;padding-bottom:80px}}