:root {
  font-size: 62.5%;
  --s411-primary: #00ffff;
  --s411-bg: #273746;
  --s411-bg-deep: #17232d;
  --s411-panel: #31475b;
  --s411-soft: #f5deb3;
  --s411-text: #f5f5f5;
  --s411-muted: #d7dce2;
  --s411-accent: #bc8f8f;
  --s411-warm: #8b4513;
  --s411-line: rgba(245, 245, 245, .16);
  --s411-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .28);
  --s411-radius: 1.8rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 20% 0, rgba(0,255,255,.18), transparent 30%), var(--s411-bg-deep);
  color: var(--s411-text);
  font-size: 1.6rem;
  line-height: 1.5rem;
  overflow-x: hidden;
}
body.s411-lock { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.s411-page {
  width: 100%;
  max-width: 43rem;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(180deg, #273746 0%, #17232d 100%);
  box-shadow: 0 0 4rem rgba(0,0,0,.32);
}
.s411-container { width: min(100% - 2.4rem, 40.6rem); margin: 0 auto; }
.s411-wrapper { padding-top: 7.8rem; }
.s411-header {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 43rem;
  z-index: 1000;
  background: rgba(23, 35, 45, .94);
  border-bottom: .1rem solid var(--s411-line);
  backdrop-filter: blur(1.4rem);
}
.s411-topbar {
  min-height: 6.6rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
}
.s411-brand { display: flex; align-items: center; gap: .8rem; min-width: 0; flex: 1; text-decoration: none; }
.s411-logo { width: 3.2rem; height: 3.2rem; border-radius: .8rem; border: .1rem solid var(--s411-primary); }
.s411-brand-text { display: grid; gap: .1rem; }
.s411-brand-name { font-size: 1.7rem; font-weight: 900; letter-spacing: .02em; color: var(--s411-primary); }
.s411-brand-sub { font-size: 1rem; color: var(--s411-soft); }
.s411-actions { display: flex; gap: .5rem; align-items: center; }
.s411-btn {
  min-height: 4.4rem;
  min-width: 4.4rem;
  border: 0;
  border-radius: 999rem;
  padding: .9rem 1.2rem;
  color: #11202a;
  background: linear-gradient(135deg, var(--s411-primary), var(--s411-soft));
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 .7rem 1.5rem rgba(0,255,255,.18);
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.s411-btn:hover, .s411-btn:focus { transform: translateY(-.1rem) scale(1.02); filter: brightness(1.08); }
.s411-btn-secondary { background: linear-gradient(135deg, var(--s411-accent), var(--s411-soft)); color: #20120d; }
.s411-menu-btn { background: transparent; color: var(--s411-text); border: .1rem solid var(--s411-line); padding: 0; }
.s411-desktop-nav { display: none; }
.s411-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}
.s411-overlay-open { opacity: 1; pointer-events: auto; }
.s411-mobile-menu {
  position: fixed;
  top: 0;
  right: max(calc((100vw - 43rem) / 2), 0rem);
  width: min(34rem, 86vw);
  height: 100vh;
  z-index: 9999;
  padding: 2rem;
  background: linear-gradient(180deg, #31475b, #17232d);
  transform: translateX(105%);
  transition: transform .26s ease;
  overflow-y: auto;
  border-left: .1rem solid var(--s411-line);
}
.s411-menu-open { transform: translateX(0); }
.s411-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; }
.s411-menu-title { font-size: 2rem; color: var(--s411-primary); font-weight: 900; }
.s411-menu-close { color: var(--s411-text); background: transparent; border: .1rem solid var(--s411-line); border-radius: 50%; width: 4.4rem; height: 4.4rem; }
.s411-menu-list { display: grid; gap: .9rem; }
.s411-menu-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 1rem 1.2rem;
  border-radius: 1.2rem;
  text-decoration: none;
  background: rgba(245,245,245,.07);
  border: .1rem solid var(--s411-line);
  color: var(--s411-text);
}
.s411-menu-link i, .s411-menu-link span.material-icons, .s411-menu-link ion-icon { color: var(--s411-primary); font-size: 2.4rem; }
.s411-hero { padding: 1.2rem 0 2rem; }
.s411-badge { display: inline-flex; align-items: center; gap: .6rem; color: var(--s411-soft); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.s411-h1 { font-size: 2.8rem; line-height: 1.12; margin: 1rem 0; color: var(--s411-text); }
.s411-h2 { font-size: 2.2rem; line-height: 1.2; margin: 0 0 1rem; color: var(--s411-primary); }
.s411-h3 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 .7rem; color: var(--s411-soft); }
.s411-copy { color: var(--s411-muted); line-height: 1.55; margin: .7rem 0; }
.s411-strong-link { color: var(--s411-primary); font-weight: 900; cursor: pointer; text-decoration: underline; text-decoration-thickness: .2rem; }
.s411-card {
  background: linear-gradient(180deg, rgba(49,71,91,.95), rgba(39,55,70,.95));
  border: .1rem solid var(--s411-line);
  border-radius: var(--s411-radius);
  box-shadow: var(--s411-shadow);
  padding: 1.5rem;
}
.s411-card-soft { background: rgba(245,222,179,.08); border-color: rgba(245,222,179,.22); }
.s411-grid { display: grid; gap: 1.2rem; }
.s411-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s411-carousel { position: relative; overflow: hidden; border-radius: 2rem; border: .1rem solid var(--s411-line); box-shadow: var(--s411-shadow); }
.s411-slide { display: none; position: relative; cursor: pointer; min-height: 15rem; }
.s411-slide-active { display: block; }
.s411-slide img { width: 100%; height: 17rem; object-fit: cover; }
.s411-slide-copy { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: 1rem; border-radius: 1.2rem; background: rgba(23,35,45,.78); }
.s411-dots { display: flex; gap: .6rem; justify-content: center; padding: .9rem; background: rgba(0,0,0,.2); }
.s411-dot { width: 1rem; height: 1rem; border: 0; border-radius: 50%; background: rgba(245,245,245,.35); padding: 0; min-height: auto; min-width: auto; }
.s411-dot-active { background: var(--s411-primary); box-shadow: 0 0 1rem var(--s411-primary); }
.s411-section { padding: 1.4rem 0; }
.s411-chip-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0; }
.s411-chip { padding: .6rem .9rem; border: .1rem solid var(--s411-line); border-radius: 999rem; color: var(--s411-soft); background: rgba(245,245,245,.06); font-size: 1.2rem; font-weight: 800; }
.s411-game-section { padding: 1.2rem 0; }
.s411-game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.s411-game-card {
  display: grid;
  gap: .5rem;
  text-align: center;
  text-decoration: none;
  color: var(--s411-text);
  background: rgba(245,245,245,.06);
  border: .1rem solid var(--s411-line);
  border-radius: 1.1rem;
  padding: .7rem .4rem;
  min-height: 9rem;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.s411-game-card:hover, .s411-game-card:focus { transform: translateY(-.2rem); border-color: var(--s411-primary); }
.s411-game-card img { width: 4.8rem; height: 4.8rem; border-radius: 1rem; object-fit: cover; margin: 0 auto; }
.s411-game-name { font-size: 1.05rem; line-height: 1.2; font-weight: 800; }
.s411-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.s411-stat { padding: 1rem; border-radius: 1.3rem; background: rgba(0,255,255,.08); border: .1rem solid rgba(0,255,255,.22); }
.s411-stat-num { font-size: 2rem; color: var(--s411-primary); font-weight: 900; }
.s411-stat-label { font-size: 1.15rem; color: var(--s411-muted); }
.s411-steps { counter-reset: s411-step; display: grid; gap: 1rem; }
.s411-step { position: relative; padding: 1.2rem 1.2rem 1.2rem 5rem; border-radius: 1.4rem; background: rgba(245,245,245,.06); border: .1rem solid var(--s411-line); }
.s411-step::before { counter-increment: s411-step; content: counter(s411-step); position: absolute; left: 1rem; top: 1rem; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--s411-primary); color: #11202a; font-weight: 900; }
.s411-note { border-left: .4rem solid var(--s411-primary); padding: 1rem; background: rgba(0,255,255,.08); border-radius: 0 1.2rem 1.2rem 0; }
.s411-review { display: grid; gap: .5rem; padding: 1rem; border-radius: 1.2rem; background: rgba(245,222,179,.08); }
.s411-stars { color: var(--s411-soft); letter-spacing: .1em; }
.s411-payment-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.s411-payment { min-height: 5rem; display: grid; place-items: center; border-radius: 1.1rem; background: rgba(245,245,245,.08); border: .1rem solid var(--s411-line); font-weight: 900; color: var(--s411-soft); }
.s411-cta { text-align: center; background: linear-gradient(135deg, rgba(0,255,255,.14), rgba(188,143,143,.18)); }
.s411-cta .s411-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; }
.s411-inline-links { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.s411-internal-link { color: var(--s411-soft); font-weight: 800; text-decoration: underline; }
.s411-footer { padding: 2rem 0 8.4rem; background: #17232d; border-top: .1rem solid var(--s411-line); margin-top: 2rem; }
.s411-footer-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.s411-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; margin: 1.2rem 0; }
.s411-footer-links a { color: var(--s411-muted); text-decoration: none; font-size: 1.25rem; }
.s411-footer-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.s411-footer-partners { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }
.s411-partner { padding: .6rem .9rem; border-radius: .9rem; background: rgba(245,245,245,.08); color: var(--s411-soft); font-size: 1.1rem; font-weight: 900; }
.s411-copyright { color: var(--s411-muted); font-size: 1.15rem; margin-top: 1rem; }
.s411-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 43rem;
  height: 6.2rem;
  z-index: 1000;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background: #273746;
  border-top: .2rem solid var(--s411-primary);
  box-shadow: 0 -1rem 2rem rgba(0,0,0,.28);
}
.s411-bottom-item {
  min-width: 6rem;
  min-height: 6rem;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--s411-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, color .18s ease;
}
.s411-bottom-item i, .s411-bottom-item span.material-icons, .s411-bottom-item ion-icon { font-size: 2.4rem; line-height: 1; }
.s411-bottom-text { font-size: 1.05rem; font-weight: 800; }
.s411-bottom-item:hover, .s411-bottom-item:focus, .s411-bottom-active { color: var(--s411-primary); transform: translateY(-.2rem) scale(1.03); }
.s411-bottom-active::before { content: ''; position: absolute; top: .3rem; width: 2.4rem; height: .3rem; border-radius: 1rem; background: var(--s411-primary); }
.s411-badge-dot { position: absolute; top: .7rem; right: 2.1rem; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--s411-accent); color: #fff; font-size: .9rem; font-weight: 900; }
.s411-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 1.2rem; font-size: 1.25rem; }
.s411-table th, .s411-table td { padding: .9rem; border-bottom: .1rem solid var(--s411-line); text-align: left; }
.s411-table th { color: var(--s411-primary); background: rgba(0,0,0,.22); }
.s411-faq details { background: rgba(245,245,245,.06); border: .1rem solid var(--s411-line); border-radius: 1.2rem; padding: 1rem; margin: .8rem 0; }
.s411-faq summary { min-height: 4.4rem; display: flex; align-items: center; font-weight: 900; color: var(--s411-soft); cursor: pointer; }
.s411-split { display: grid; gap: 1rem; }
.s411-icon-line { display: flex; gap: .9rem; align-items: flex-start; }
.s411-icon-line i, .s411-icon-line span.material-icons, .s411-icon-line ion-icon { color: var(--s411-primary); font-size: 2.4rem; flex: 0 0 auto; }
@media (min-width: 769px) {
  .s411-page, .s411-header, .s411-bottom-nav { max-width: 100%; }
  .s411-container { width: min(112rem, 100% - 4rem); }
  .s411-desktop-nav { display: flex; gap: 1rem; align-items: center; }
  .s411-desktop-nav a { color: var(--s411-text); text-decoration: none; font-weight: 800; }
  .s411-menu-btn { display: none; }
  .s411-bottom-nav { display: none; }
  .s411-game-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .s411-grid-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s411-footer { padding-bottom: 2.5rem; }
}
@media (max-width: 768px) {
  main.s411-main { padding-bottom: 8rem; }
  .s411-actions .s411-btn { padding: .8rem 1rem; font-size: 1.2rem; }
}
@media (max-width: 360px) {
  .s411-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s411-brand-sub { display: none; }
  .s411-h1 { font-size: 2.45rem; }
}