:root { --container: 1100px; --gap: 1.25rem; --primary:#0d6efd; }

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: Arial, sans-serif;
  margin: 0; padding: 0;
  color: #111; background: #fff; line-height: 1.6;
}

/* Layout helpers */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; gap: var(--gap); }
.card { background:#fff; border:1px solid #eee; border-radius:14px; padding:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.04); }

.btn { display:inline-block; padding:.75rem 1.25rem; border-radius:10px; background:var(--primary); color:#fff; text-decoration:none; font-weight:600; }
.btn:hover { filter: brightness(0.95); }

/* Header */
header {
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 0; background:#fff; border-bottom:1px solid #eee;
}
header .logo { font-size:1.25rem; font-weight:800; letter-spacing:.2px; }
header nav ul { list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
header nav a { text-decoration:none; color:#333; font-weight:600; }
header nav a:hover { color:var(--primary); }

#menu-toggle { display:none; background:none; border:1px solid #ddd; border-radius:8px; padding:.4rem .6rem; }

/* Hero */
.hero { display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:2rem; padding:3rem 0; }
.hero-content h1{ font-size:2.2rem; margin:.2rem 0 1rem; }
.hero-content p{ color:#555; margin:0 0 1.25rem; }
.hero-image img{ border-radius:14px; }

/* Sections */
section { padding:3rem 0; }
h2 { font-size:1.75rem; margin:0 0 1rem; }

.features .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.features .card img { width:64px; height:64px; margin-bottom:.75rem; color:#0ea5e9; }

/* About */
.about { display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:2rem; }
.about-media img{ border-radius:14px; }

/* Team */
.team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.team figure{ margin:0; text-align:center; }
.team img{ border-radius:12px; }
.team figcaption{ margin-top:.5rem; color:#555; }

/* Testimonials */
.testimonials .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); font-style:italic; }

/* Blog */
.blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.blog article.card img{ border-radius:10px; margin-bottom:.75rem; }

/* Contact */
.contact-form{ display:grid; gap:.75rem; max-width:520px; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.75rem 1rem; border:1px solid #ddd; border-radius:10px; font:inherit;
}

/* Footer */
footer{ padding:1.5rem 0; border-top:1px solid #eee; color:#666; }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .about{ grid-template-columns: 1fr; }
  .features .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .testimonials .grid{ grid-template-columns: 1fr 1fr; }
  .blog-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  header nav ul{ position:absolute; right:1rem; top:64px; background:#fff; border:1px solid #eee; border-radius:12px; padding:1rem; display:none; flex-direction:column; min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
  header nav ul.active{ display:flex; }
  #menu-toggle{ display:block; }
}


/* Gaming theme enhancements */
section:nth-child(even) {
  background: #f4f4f4;
}

.card {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.card:hover {
  transform: translateY(-6px);
}

.hero {
  background: linear-gradient(135deg, #111, #222);
  color: #f1f1f1;
  border-radius: 14px;
  padding: 4rem 2rem;
}
.hero .btn {
  background: linear-gradient(135deg, #16a34a, #0d6efd);
}


/* Dark theme overrides */

body {
  color: #eee;
  background: #000;
}
header, footer {
  background: #111;
  color: #eee;
}
.card {
  background: #1a1a1a;
  border: 1px solid #333;
}