#guest {
  margin: 0;
  color: #111827;
  font-family: Inter, Arial, sans-serif;
  background: #fff;
}
#guest a { color: inherit; text-decoration: none; }
#guest .container { width: min(1180px, calc(100% - 48px)); margin: auto; }
#guest .header {
  height: 76px;
  border-bottom: 1px solid #eef0f4;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
#guest .nav { height: 100%; display: flex; align-items: center; gap: 28px; }
#guest .logo { font-size: 34px; font-weight: 800; letter-spacing: -2px; position: relative; margin-right: 8px; }
#guest .logo span {
  position: absolute;
  top: -2px;
  left: 54px;
  width: 9px;
  height: 9px;
  background: #16b85a;
  border-radius: 50%;
}
#guest .menu { display: flex; gap: 26px; font-size: 15px; font-weight: 500; }
#guest .menu a { padding: 26px 0; position: relative; color: #374151; }
#guest .menu a.active { color: #4338f5; }
#guest .menu a.active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 2px;
  background: #4338f5;
}
#guest .actions { display: flex; gap: 10px; margin-left: auto; }
#guest .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
}
#guest .btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
#guest .outline { border-color: #d7dce6; background: #fff; color: #111827; }
#guest .primary { color: #fff; background: linear-gradient(100deg, #5b3df5, #2f5bff); box-shadow: 0 8px 16px #4938f424; }
#guest .large { min-width: 196px; padding: 14px 22px; font-size: 15px; }
#guest .menu-toggle { display: none; margin-left: auto; border: 0; background: none; font-size: 24px; cursor: pointer; }

#guest .hero {
  overflow: visible !important;
  color: #111827 !important;
  padding: 0 !important;
  display: block !important;
  background: radial-gradient(ellipse at 72% 18%, #e7ecff, transparent 28%),
              radial-gradient(ellipse at 92% 70%, #f7e4f6, transparent 24%),
              #fff !important;
}
#guest .hero-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, .86fr) 1.14fr;
  align-items: center;
  gap: 28px;
  padding: 28px 0 8px;
}
#guest .intro { position: relative; z-index: 2; background: linear-gradient(90deg, #fff 88%, #fff0); padding: 12px 8px 12px 0; }
#guest .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e3f8ea;
  color: #0b7a3e;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
#guest .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #16b85a; display: block; }
#guest .hero h1 {
  font-size: clamp(36px, 2.5vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.6px !important;
  margin: 0 0 16px !important;
  max-width: none !important;
  color: #111827 !important;
  font-weight: 800;
}
#guest .hero h1 span { display: block; }
#guest .intro > p {
  font-size: 16px;
  line-height: 1.55;
  color: #273247 !important;
  max-width: 480px !important;
  margin: 0 0 26px;
}
#guest .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#guest .art {
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  position: static !important;
  margin: 0;
}
#guest .hero-visual {
  width: 100%;
  height: auto;
  display: block;
}
#guest .features { border: 0; background: #fff; }
#guest .features-visual { width: min(1180px, calc(100% - 48px)); margin: 6px auto 10px; display: block; }
#guest .games { padding: 18px 0 28px; }
#guest .kicker { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: #4b3df5; margin-bottom: 8px; }
#guest .section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#guest .section-title h2 { font-size: 30px; letter-spacing: -1px; margin: 0; }
#guest .section-title a { font-size: 14px; color: #4537f1; font-weight: 600; }
#guest .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
#guest .game-shot { display: block; border-radius: 18px; overflow: hidden; }
#guest .game-shot img { width: 100%; height: auto; display: block; }
#guest .stats { background: #f7f8fb; border-top: 1px solid #eef0f5; border-bottom: 1px solid #eef0f5; }
#guest .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 0; }
#guest .stat-grid > div {
  display: grid;
  grid-template-columns: 36px auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #e4e7ee;
}
#guest .stat-grid > div:last-child { border: 0; }
#guest .stat-grid svg { width: 26px; height: 26px; grid-row: 1 / span 2; }
#guest .stat-grid svg circle { fill: currentColor; }
#guest .stat-grid b { font-size: 16px; }
#guest .stat-grid small { font-size: 12px; color: #697386; grid-column: 2; }
#guest .heart { color: #ef334b; }
#guest footer { padding: 28px 0 36px; background: #fff; }
#guest .foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#guest .foot .logo { font-size: 28px; }
#guest .foot .logo span { left: 44px; }
#guest .foot p { color: #697386; font-size: 13px; margin: 0; }
#guest .foot > div { display: flex; gap: 18px; margin-left: auto; font-size: 13px; }
#guest .foot small { width: 100%; color: #8b93a3; font-size: 11px; }

@media (min-width: 1100px) {
  #guest .hero h1 span { white-space: nowrap; }
}
@media (max-width: 980px) {
  #guest .hero-grid { grid-template-columns: 1fr; }
  #guest .art { margin-top: 8px; }
  #guest .menu { display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff; padding: 8px 22px 16px; flex-direction: column; box-shadow: 0 12px 18px #10182814; }
  #guest .menu.open { display: flex; }
  #guest .menu-toggle { display: block; }
  #guest .actions .outline { display: none; }
  #guest .game-grid, #guest .stat-grid { grid-template-columns: 1fr; }
  #guest .stat-grid > div { border: 0; justify-content: start; }
}
