* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
body { 
  font-family: Arial, Helvetica, sans-serif; 
  background: #f4f5f7; 
  color: #111111; 
  line-height: 1.6; 
}
a { 
  text-decoration: none; 
  color: inherit; 
}

/* Skip to content link styling */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #0a84ff;
  color: white;
  padding: 10px 20px;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

/* Standardized accessible link buttons styling */
.link-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: inline;
}

header { 
  width: 100%; 
  padding: 24px 60px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  background: #f4f5f7; 
  border-bottom: 1px solid #e3e3e3; 
  position: sticky; 
  top: 0; 
  z-index: 100; 
}
.logo { 
  font-size: 24px; 
  font-weight: bold; 
  color: #0d1117; 
}
nav { 
  display: flex; 
  gap: 28px; 
  align-items: center; 
}
nav .link-btn { 
  font-size: 15px; 
  color: #333; 
  transition: 0.2s ease; 
}
nav .link-btn:hover { 
  color: #0a84ff; 
}
.nav-btn { 
  background: #0a84ff; 
  color: white; 
  padding: 10px 18px; 
  border-radius: 8px; 
  font-size: 14px; 
}
.section { 
  display: none; 
  animation: fade 0.3s ease; 
}
.active { 
  display: block; 
}
@keyframes fade { 
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  } to { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}
.hero { 
  max-width: 1200px; 
  margin: 60px auto; 
  background: white; 
  border: 1px solid #e5e5e5; 
  border-radius: 24px; 
  overflow: hidden; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
}
.hero-content { 
  padding: 70px 60px; 
}
.hero h1 { 
  font-size: 68px; 
  line-height: 1.05; 
  margin-bottom: 28px; 
  color: #0d1117; 
}
.hero p { 
  font-size: 18px; 
  color: #4b5563; 
  margin-bottom: 32px; 
  max-width: 520px; 
}
.hero-buttons { 
  display: flex; 
  gap: 16px; 
  flex-wrap: wrap; 
}
.primary-btn { 
  background: #0a84ff; 
  color: white; 
  padding: 14px 24px; 
  border-radius: 10px; 
  font-weight: bold; 
  cursor: pointer; 
  border: none;
  font-family: inherit;
  font-size: inherit;
}
.secondary-btn { 
  border: 1px solid #d5d5d5; 
  padding: 14px 24px; 
  border-radius: 10px; 
  color: #222; 
  background: white; 
  cursor: pointer; 
  font-family: inherit;
  font-size: inherit;
}
.hero-image { 
  background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1200&auto=format&fit=crop'); 
  background-size: cover; 
  background-position: center; 
  min-height: 650px; 
}
.stats-section { 
  background: #eaf2fb; 
  padding: 90px 60px; 
  margin-top: 80px; 
}
.stats-header { 
  max-width: 1200px; 
  margin: auto; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 40px; 
  margin-bottom: 50px; 
}
.stats-header h2 { 
  font-size: 54px; 
  line-height: 1.1; 
}
.stats-header p { 
  font-size: 20px; 
  color: #4b5563; 
}
.stats-grid { 
  max-width: 1200px; 
  margin: auto; 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
}
.stat-card { 
  background: white; 
  border-radius: 24px; 
  padding: 40px; 
  min-height: 280px; 
  border: 1px solid #dde4ec; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}
.stat-card h3 { 
  font-size: 70px; 
  line-height: 1; 
  margin-bottom: 20px; 
}
.stat-card p { 
  color: #4b5563; 
}
.product-page { 
  max-width: 1200px; 
  margin: auto; 
  padding: 80px 40px; 
}
.product-hero { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 50px; 
  align-items: center; 
  margin-bottom: 70px; 
}
.product-hero img { 
  width: 100%; 
  border-radius: 24px; 
  object-fit: cover; 
  height: 500px; 
}
.product-hero h1 { 
  font-size: 58px; 
  line-height: 1.1; 
  margin-bottom: 24px; 
}
.product-hero p { 
  font-size: 18px; 
  color: #4b5563; 
  margin-bottom: 20px; 
}
.product-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  margin-top: 50px; 
}
.feature-card { 
  background: white; 
  border: 1px solid #e5e5e5; 
  border-radius: 20px; 
  padding: 32px; 
}
.feature-card h3 { 
  margin-bottom: 14px; 
  font-size: 24px; 
}
.feature-card p { 
  color: #4b5563; 
}
.zawadi-page { 
  max-width: 1200px; 
  margin: auto; 
  padding: 80px 40px; 
}
.zawadi-hero { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 50px; 
  align-items: center; 
  margin-bottom: 70px; 
}
.zawadi-hero img { 
  width: 100%; 
  border-radius: 24px; 
  object-fit: cover; 
  height: 500px; 
}
.zawadi-hero h1 { 
  font-size: 58px; 
  line-height: 1.1; 
  margin-bottom: 24px; 
}
.zawadi-hero p { 
  font-size: 18px; 
  color: #4b5563; 
  margin-bottom: 20px; 
}
.zawadi-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  margin-top: 50px; 
}
.games-page { 
  max-width: 1200px; 
  margin: auto; 
  padding: 80px 40px; 
}
.games-hero { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 50px; 
  align-items: center; 
  margin-bottom: 70px; 
}
.games-hero img { 
  width: 100%; 
  border-radius: 24px; 
  object-fit: cover; 
  height: 500px; 
}
.games-hero h1 { 
  font-size: 58px; 
  line-height: 1.1; 
  margin-bottom: 24px; 
}
.games-hero p { 
  font-size: 18px; 
  color: #4b5563; 
  margin-bottom: 20px; 
}
.games-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 24px; 
  margin-top: 50px; 
}
.about-page { 
  max-width: 1000px; 
  margin: auto; 
  padding: 100px 40px; 
}
.about-page h1 { 
  font-size: 58px; 
  margin-bottom: 30px; 
}
.about-page p { 
  font-size: 19px; 
  margin-bottom: 22px; 
  color: #4b5563; 
}
.legal-page { 
  max-width: 900px; 
  margin: auto; 
  padding: 80px 40px; 
}
.legal-page h1 { 
  font-size: 48px; 
  line-height: 1.1; 
  margin-bottom: 8px; 
  color: #0d1117; 
}
.legal-page .last-updated { 
  font-size: 14px; 
  color: #6b7280; 
  margin-bottom: 40px; 
}
.legal-page h2 { 
  font-size: 22px; 
  margin-top: 40px; 
  margin-bottom: 10px; 
  color: #111827; 
}
.legal-page h3 { 
  font-size: 17px; 
  margin-top: 24px; 
  margin-bottom: 8px; 
  color: #374151; 
}
.legal-page p { 
  color: #4b5563; 
  margin-bottom: 12px; 
}
.legal-page ul { 
  color: #4b5563; 
  padding-left: 22px; 
  margin-bottom: 12px; 
  line-height: 1.9; 
}
.legal-page a { 
  color: #0a84ff; 
}
.arbitration-notice { 
  background: #fef3c7; 
  border: 1px solid #f59e0b; 
  border-radius: 10px; 
  padding: 16px 20px; 
  margin-bottom: 16px; 
  font-size: 14px; 
  color: #92400e; 
}
footer { 
  background: #f4f5f7; 
  border-top: 1px solid #e3e3e3; 
  padding: 70px 60px 30px; 
  margin-top: 80px; 
}
.footer-grid { 
  max-width: 1200px; 
  margin: auto; 
  display: grid; 
  grid-template-columns: 2fr 1fr 1fr; 
  gap: 50px; 
  margin-bottom: 50px; 
}
.footer-grid h3 {
  margin-bottom: 18px; 
  font-size: 18px; 
}
.footer-grid .link-btn { 
  display: block; 
  margin-bottom: 12px; 
  color: #4b5563; 
}
.footer-grid .link-btn:hover { 
  color: #0a84ff; 
}
.footer-grid p { 
  color: #4b5563; 
  margin-bottom: 16px; 
}
.footer-bottom { 
  max-width: 1200px; 
  margin: auto; 
  padding-top: 30px; 
  border-top: 1px solid #ddd; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  gap: 16px; 
  color: #666; 
  font-size: 14px; 
}
.footer-legal-links { 
  display: flex; 
  gap: 20px; 
  flex-wrap: wrap; 
}
.footer-legal-links .link-btn { 
  color: #666; 
  font-size: 14px; 
  transition: 0.2s ease; 
}
.footer-legal-links .link-btn:hover { 
  color: #0a84ff; 
}
.email { 
  font-weight: bold; 
  color: #111; 
}
@media (max-width: 900px) {
  .hero, .stats-header, .product-hero, .stats-grid, .product-grid, .footer-grid { 
    grid-template-columns: 1fr; 
  }
  .hero h1, .product-hero h1, .stats-header h2, .about-page h1, .legal-page h1 { 
    font-size: 42px; 
  }
  header { 
    padding: 20px; 
    flex-direction: column; 
    gap: 20px; 
  }
  .hero-content, .stats-section, .product-page, .about-page, .legal-page, footer { 
    padding-left: 20px; 
    padding-right: 20px; 
  }
}