/* style/index.css */
.page-index {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #f5e6d0; /* Light text for dark background */
  background-color: #0A192F; /* Main dark background */
}

.page-index__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-index__section-title {
  font-size: 2.8em;
  color: #FFD700; /* Accent color for titles */
  text-align: center;
  margin-bottom: 20px;
  padding-top: 40px;
  font-weight: bold;
}

.page-index__section-subtitle {
  font-size: 1.2em;
  color: #cccccc;
  text-align: center;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Hero Section */
.page-index__hero-section {
  background: linear-gradient(135deg, #0A192F, #333d4e);
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-index__hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('[GALLERY:bg:abstract,gaming,light_effect]') no-repeat center center/cover;
  opacity: 0.1;
  z-index: 0;
}

.page-index__hero-section > .page-index__container {
  position: relative;
  z-index: 1;
}

.page-index__hero-title {
  font-size: 3.8em;
  color: #FFD700;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.2;
}

.page-index__hero-description {
  font-size: 1.4em;
  color: #f5e6d0;
  max-width: 900px;
  margin: 0 auto 40px auto;
}

.page-index__hero-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.page-index__btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: center;
}

.page-index__btn--primary {
  background-color: #FFD700;
  color: #0A192F;
  border: 2px solid #FFD700;
}

.page-index__btn--primary:hover {
  background-color: #e6c200;
  border-color: #e6c200;
  transform: translateY(-3px);
}

.page-index__btn--secondary {
  background-color: transparent;
  color: #FFD700;
  border: 2px solid #FFD700;
}

.page-index__btn--secondary:hover {
  background-color: #FFD700;
  color: #0A192F;
  transform: translateY(-3px);
}

.page-index__btn--small {
  padding: 10px 20px;
  font-size: 0.9em;
  border-radius: 5px;
}

.page-index__btn--large {
  padding: 18px 40px;
  font-size: 1.3em;
}

/* About Section */
.page-index__about-section {
  padding: 80px 0;
  background-color: #1a2a44;
}

.page-index__about-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.page-index__about-text {
  flex: 1;
  font-size: 1.1em;
  color: #e0e0e0;
}

.page-index__about-text p {
  margin-bottom: 20px;
  line-height: 1.8;
}

.page-index__about-image {
  flex: 1;
  text-align: center;
}

.page-index__img-responsive {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Features Section */
.page-index__features-section {
  padding: 80px 0;
  background-color: #0A192F;
}

.page-index__features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.page-index__feature-item {
  background-color: #1a2a44;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.page-index__feature-item:hover {
  transform: translateY(-10px);
}

.page-index__feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.page-index__feature-title {
  font-size: 1.8em;
  color: #FFD700;
  margin-bottom: 15px;
}

.page-index__feature-description {
  font-size: 1em;
  color: #cccccc;
}

.page-index__cta-center {
  text-align: center;
  margin-top: 60px;
}

/* Games Section */
.page-index__games-section {
  padding: 80px 0;
  background-color: #1a2a44;
}

.page-index__games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.page-index__game-card {
  background-color: #0A192F;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.3s ease;
}

.page-index__game-card:hover {
  transform: translateY(-10px);
}

.page-index__game-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 3px solid #FFD700;
}

.page-index__game-title {
  font-size: 1.6em;
  color: #FFD700;
  margin: 20px 15px 10px 15px;
}

.page-index__game-description {
  font-size: 0.95em;
  color: #cccccc;
  padding: 0 15px 20px 15px;
}

.page-index__game-card .page-index__btn {
  margin-bottom: 20px;
}

/* Promo Section */
.page-index__promo-section {
  padding: 80px 0;
  background-color: #0A192F;
}

.page-index__promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.page-index__promo-card {
  background-color: #1a2a44;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.3s ease;
}

.page-index__promo-card:hover {
  transform: translateY(-10px);
}

.page-index__promo-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 3px solid #FFD700;
}

.page-index__promo-title {
  font-size: 1.8em;
  color: #FFD700;
  margin: 20px 15px 10px 15px;
}

.page-index__promo-description {
  font-size: 1em;
  color: #cccccc;
  padding: 0 15px 20px 15px;
}

.page-index__promo-card .page-index__btn {
  margin-bottom: 20px;
}

.page-index__promo-footer {
  text-align: center;
  color: #e0e0e0;
  font-size: 1.1em;
  margin-top: 40px;
}

/* Download Section */
.page-index__download-section {
  padding: 80px 0;
  background-color: #1a2a44;
}

.page-index__download-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 50px;
}

.page-index__download-qr {
  text-align: center;
  background-color: #0A192F;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.page-index__download-qr img {
  width: 200px;
  height: 200px;
  margin-bottom: 15px;
  border: 5px solid #FFD700;
  border-radius: 5px;
}

.page-index__download-qr p {
  color: #f5e6d0;
  font-size: 1.1em;
}

.page-index__download-platforms {
  text-align: center;
  max-width: 400px;
}

.page-index__mobile-app-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 30px;
  border: 2px solid #FFD700;
}

.page-index__platform-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.page-index__btn--download {
  background-color: #FFD700;
  color: #0A192F;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.page-index__btn--download:hover {
  background-color: #e6c200;
}

.page-index__icon-apple, .page-index__icon-android {
  /* Placeholder for icons */
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #0A192F; /* Example background for icon, replace with actual SVG/font icon */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M325.7 348.6c-4.4 2.8-10.7 2.3-15.2-1.2-4.5-3.5-7.7-9.5-8.2-15.6-.5-6.2 2.2-12.2 6.7-15.7 4.5-3.5 10.8-4 15.2-1.2 4.4 2.8 7.7 8.8 8.2 15.1.5 6.1-2.2 12.1-6.7 15.7zm-26.6-8.1c-3.2 2-7.7 1.6-11-2.5-3.2-4.1-5.6-9.6-6-15.3-.4-5.7 1.6-11.2 4.8-15.3 3.2-4.1 7.7-4.5 11-2.5 3.2 2 5.6 7.5 6 13.2.4 5.7-1.6 11.2-4.8 15.3zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm-104 352c-1.1-1.5-1.7-3.4-1.7-5.5 0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64c-4.6 0-8.3-3.7-8.3-8.3v-16zm0-96c-1.1-1.5-1.7-3.4-1.7-5.5 0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64c-4.6 0-8.3-3.7-8.3-8.3v-16zm0-96c-1.1-1.5-1.7-3.4-1.7-5.5 0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64c-4.6 0-8.3-3.7-8.3-8.3v-16zM352 352c-4.6 0-8.3-3.7-8.3-8.3v-16c0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64zm0-96c-4.6 0-8.3-3.7-8.3-8.3v-16c0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64zm0-96c-4.6 0-8.3-3.7-8.3-8.3v-16c0-4.6 3.7-8.3 8.3-8.3h64c4.6 0 8.3 3.7 8.3 8.3v16c0 4.6-3.7 8.3-8.3 8.3h-64z"/></svg>') center center no-repeat; */
}

.page-index__icon-apple {
  /* Example for Apple icon, replace with actual SVG */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M360.7 168.1c-11.4-1.5-22.6 5.8-28.7 16.4-12.5 21.6-1.5 50.1 20.1 62.6 11.4 6.6 24 9.1 36.6 7.4 11.4-1.5 22.6-5.8 28.7-16.4 12.5-21.6 1.5-50.1-20.1-62.6-11.4-6.6-24-9.1-36.6-7.4zm-136.2-74.8c-1.5-11.4-5.8-22.6-16.4-28.7-21.6-12.5-50.1-1.5-62.6 20.1-6.6 11.4-9.1 24-7.4 36.6 1.5 11.4 5.8 22.6 16.4 28.7 21.6 12.5 50.1 1.5 62.6-20.1 6.6-11.4 9.1-24 7.4-36.6zm-50.5 204.8c-1.5-11.4-5.8-22.6-16.4-28.7-21.6-12.5-50.1-1.5-62.6 20.1-6.6 11.4-9.1 24-7.4 36.6 1.5 11.4 5.8 22.6 16.4 28.7 21.6 12.5 50.1 1.5 62.6-20.1 6.6-11.4 9.1-24 7.4-36.6zM448 80c0-26.5-21.5-48-48-48h-85.3c-2.3-1.6-4.6-3.2-6.9-4.8C287.4 13.1 260.6 0 231.8 0 188.7 0 152.1 29.8 141.2 71.4c-1.5 5.8-2.6 11.9-2.9 18.2-1.3 27.6 10.2 54.1 31.6 73.8 23.6 21.9 53.6 33.3 85 33.3 45.4 0 85.3-25.7 104.9-64.2 1.9-3.7 3.5-7.6 4.9-11.6h50.1c26.5 0 48-21.5 48-48zM368 432c0 26.5-21.5 48-48 48H128c-26.5 0-48-21.5-48-48V352c0-26.5 21.5-48 48-48h192c26.5 0 48 21.5 48 48v80zM0 160c0-26.5 21.5-48 48-48h85.3c2.3-1.6 4.6-3.2 6.9-4.8 17.5-12.2 39.3-19.2 62.4-19.2 43.1 0 79.7 29.8 90.6 71.4 1.5 5.8 2.6 11.9 2.9 18.2 1.3 27.6-10.2 54.1-31.6 73.8-23.6 21.9-53.6 33.3-85 33.3-45.4 0-85.3-25.7-104.9-64.2-1.9-3.7-3.5-7.6-4.9-11.6H48c-26.5 0-48-21.5-48-48z"/></svg>') center center no-repeat;
}

.page-index__icon-android {
  /* Example for Android icon, replace with actual SVG */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M416 260.7l-47.5-47.5c-4.7-4.7-12.3-4.7-17 0L320 249.5l-20.7-20.7c-4.7-4.7-12.3-4.7-17 0L240 249.5l-20.7-20.7c-4.7-4.7-12.3-4.7-17 0L160 249.5l-20.7-20.7c-4.7-4.7-12.3-4.7-17 0L96 260.7V104c0-5.3 4.3-9.6 9.6-9.6h300.8c5.3 0 9.6 4.3 9.6 9.6v156.7zM448 320V104c0-35.3-28.7-64-64-64H96c-35.3 0-64 28.7-64 64v216c0 10.6 4.6 20.6 12.6 27.5L160 464h192l111.4-116.5c8-6.9 12.6-16.9 12.6-27.5zM224 416h64v-64h-64v64z"/></svg>') center center no-repeat;
}

.page-index__download-note {
  color: #cccccc;
  font-size: 0.9em;
  margin-top: 20px;
}

/* Detail Pages Section */
.page-index__detail-pages-section {
  padding: 80px 0;
  background-color: #0A192F;
}

.page-index__detail-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.page-index__detail-card {
  background-color: #1a2a44;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.page-index__detail-card:hover {
  transform: translateY(-10px);
}

.page-index__detail-title {
  font-size: 1.8em;
  margin-bottom: 15px;
}

.page-index__detail-title a {
  color: #FFD700;
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-index__detail-title a:hover {
  color: #e6c200;
}

.page-index__detail-description {
  font-size: 1em;
  color: #cccccc;
  margin-bottom: 25px;
}

/* Final CTA Section */
.page-index__cta-final-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #1a2a44, #0A192F);
  text-align: center;
}

/* Responsive Design */
@media (max-width: 992px) {
  .page-index__hero-title {
    font-size: 3em;
  }
  .page-index__hero-description {
    font-size: 1.2em;
  }
  .page-index__about-content {
    flex-direction: column;
  }
  .page-index__about-image {
    margin-top: 30px;
  }
  .page-index__section-title {
    font-size: 2.2em;
  }
}

@media (max-width: 768px) {
  .page-index__hero-section {
    padding: 80px 0;
  }
  .page-index__hero-title {
    font-size: 2.5em;
  }
  .page-index__hero-description {
    font-size: 1em;
  }
  .page-index__hero-actions {
    flex-direction: column;
    gap: 15px;
  }
  .page-index__btn {
    width: 80%;
    margin: 0 auto;
  }
  .page-index__section-title {
    font-size: 1.8em;
  }
  .page-index__section-subtitle {
    font-size: 1em;
  }
  .page-index__features-grid, .page-index__games-grid, .page-index__promo-grid, .page-index__detail-pages-grid {
    grid-template-columns: 1fr;
  }
  .page-index__download-content {
    flex-direction: column;
  }
  .page-index__download-qr {
    margin-bottom: 30px;
  }
  .page-index__platform-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .page-index__btn--download {
    width: 48%;
  }
}

@media (max-width: 480px) {
  .page-index__hero-title {
    font-size: 2em;
  }
  .page-index__btn {
    width: 90%;
    padding: 12px 25px;
  }
  .page-index__btn--large {
    padding: 15px 30px;
  }
  .page-index__section-title {
    font-size: 1.6em;
  }
  .page-index__platform-buttons {
    flex-direction: column;
  }
  .page-index__btn--download {
    width: 100%;
  }
}