:root {
  --primary: #3cf2de;
  --secondary: #3535f1;
  --accent: #fd63d0;
  --gradient: linear-gradient(90deg, #44ffd7, #647cff 80%);
  --bg-dark: #161622;
  --bg-section: #1e1e2f;
  --card-dark: #232346;
  --text: #e2eafc;
  --muted: #8a90b0;
  --shadow: 0 6px 24px 0 rgba(60, 242, 222, 0.15);

  --border-radius: 18px;
  --transition: 0.23s cubic-bezier(.4,0,.2,1);
}

html {
  height: 100%;
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  line-height: 1.62;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover, a:focus {
  color: var(--accent);
}

header.site-header {
  background: var(--bg-section);
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.logo img {
  height: 52px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.85rem;
  margin: 0;
  padding: 0;
}

.main-nav .nav-link {
  font-size: 1.08rem;
  color: var(--muted);
  padding: .38em 0;
  letter-spacing: 0.04em;
  position: relative;
}

.main-nav .nav-link:hover {
  color: var(--primary);
}

.btn,
.btn-primary,
.btn-lg,
.btn-header {
  display: inline-flex;
  align-items: center;
  background: var(--gradient);
  color: #161622;
  font-weight: 600;
  border: 0;
  padding: .8em 2em;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-shadow: none;
  font-size: 1rem;
  box-shadow: var(--shadow);
  margin-left: 1em;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn.primary,
.btn-primary {
  background: var(--gradient);
  color: #1e1e2f;
}

.btn-header {
  font-size: 1em;
  box-shadow: 0 2px 20px 0 rgba(60, 242, 222, 0.18);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--primary);
  margin-left: 1.2em;
  transition: background var(--transition), color var(--transition), border var(--transition);
}

.btn-ghost:hover {
  background: var(--gradient);
  color: #161622;
}

.hero {
  background: linear-gradient(120deg, #232346 60%, #2d176b 100%);
  padding: 3.6rem 0 1rem 0;
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hero-content {
  flex: 1 1 380px;
  min-width: 340px;
}

.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: .7rem;
  letter-spacing: -0.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content p {
  margin-top: 1em;
  font-size: 1.19rem;
  color: var(--text);
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

ul.hero-highlights {
  list-style: disc;
  margin-top: 1.8em;
  margin-left: 1.8em;
  color: var(--primary);
}

.hero-media {
  flex: 1 1 370px;
  min-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel {
  width: 340px;
  background: var(--card-dark);
  border-radius: var(--border-radius);
  padding: 1.3rem;
  box-shadow: var(--shadow);
  margin-top: 1.2rem;
  position: relative;
}

.carousel-title {
  color: var(--primary);
  margin-bottom: 0.8em;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}

.carousel-viewport {
  overflow: hidden;
  border-radius: var(--border-radius);
}

.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
}

.carousel-track img {
  width: 340px;
  height: 180px;
  object-fit: cover;
  border-radius: var(--border-radius);
  margin-right: 3px;
}

.carousel-control {
  border: 0;
  background: var(--bg-section);
  color: var(--primary);
  font-size: 1.7em;
  cursor: pointer;
  padding: 0 0.36em;
  border-radius: 50%;
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  opacity: 0.75;
  transition: opacity var(--transition);
  z-index: 1;
}

.carousel-control.prev { left: 8px; }
.carousel-control.next { right: 8px; }

.carousel-control:hover { opacity: 1; }

.section {
  background: var(--bg-section);
  padding: 2.7em 0;
}

.section-dark {
  background: #171734;
}

.section-header {
  text-align: center;
  margin-bottom: 2em;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .5em;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-header p {
  color: var(--muted);
  font-size: 1.13rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 1.8em;
  padding-bottom: 0.5em;
}

.feature-card {
  background: var(--card-dark);
  color: var(--text);
  padding: 1.25em 1.3em 1.35em 1.3em;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s;
}

.feature-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 10px 40px 0 rgba(252, 99, 208, 0.13);
}

.feature-card h3 {
  font-size: 1.2rem;
  margin-bottom: .6em;
  color: var(--accent);
}

.feature-card p {
  color: var(--muted);
}

ul {
  margin: 0 0 1em 1.6em;
}

#how-to-play ul li {
  font-size: 1.08em;
  margin-bottom: .7em;
  color: var(--text);
}

.article-previews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.7em;
  margin-top: 2.5em;
}

.article-preview {
  background: var(--card-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 1.1em 1.05em;
  transition: transform .13s, box-shadow .13s;
}

.article-preview:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 8px 30px 0 rgba(60,242,222,0.15);
}

.article-preview h3 {
  color: var(--primary);
  font-size: 1.12em;
  margin-bottom: 0.4em;
  font-weight: 700;
}

.article-preview p {
  color: var(--muted);
}

.site-footer {
  background: #151522;
  color: var(--muted);
  text-align: center;
  padding: 1.8em 0;
  margin-top: 2rem;
}

.footer-inner {
  max-width: 970px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.footer-links {
  list-style: none;
  display: flex;
  gap: 1.5em;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--primary);
  transition: color var(--transition);
}
.footer-links a:hover {
  color: var(--accent);
}

/* Responsive design */
@media (max-width: 850px) {
  .hero-inner, .header-inner, .footer-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    padding: 1rem;
  }
  .carousel,
  .carousel-track img {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .feature-card,
  .article-preview {
    padding: 1.15em 1em;
  }
}

@media (max-width: 540px) {
  html { font-size: 15px; }
  .hero-content h1, .section-header h2 {
    font-size: 1.4rem;
  }
  .hero-content {
    min-width: 0;
    padding-bottom: 2em;
  }
  .logo img {
    height: 37px;
  }
  .btn, .btn-lg, .btn-header {
    padding: .56em 1.3em;
    font-size: 1em;
  }
}