:root {
  --primary: #00e5ff;
  --secondary: #ff2a85;
  --accent: #fbbf24;
  --card-bg: rgba(12, 20, 38, 0.82);
  --glow: rgba(0, 229, 255, 0.32);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Prompt', 'Kanit', system-ui, -apple-system, sans-serif;
  color: #f8fafc;
  background-color: #060913;
  background: radial-gradient(circle at 20% 10%, rgba(0, 229, 255, 0.32), transparent 45%), #070b16;
  line-height: 1.65;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: all 0.22s ease; }
img { max-width: 100%; height: auto; display: block; }
.s1-container { max-width: 1260px; margin: 0 auto; padding: 0 16px; }

/* Sticky Compact Glass Header */
.s1-header {
  position: sticky; top: 0; z-index: 999;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(6, 10, 22, 0.82);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  padding: 10px 0;
}
.s1-nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.s1-brand-box { display: flex; align-items: center; gap: 12px; }
.s1-logo-img { max-height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 0 10px var(--glow)); }
.s1-brand-name { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.5px; color: var(--primary); }
.s1-promo-chip {
  font-size: 0.82rem; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: #e2e8f0;
}
.s1-nav-links { display: flex; align-items: center; gap: 18px; font-size: 0.95rem; font-weight: 500; }
.s1-nav-links a:hover { color: var(--primary); }
.s1-hdr-btn-img { max-height: 46px; width: auto; filter: drop-shadow(0 4px 12px var(--glow)); transition: transform 0.2s ease; }
.s1-hdr-btn-img:hover { transform: translateY(-2px) scale(1.03); }
.s1-cta-pill {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #060913; font-weight: 800; padding: 10px 22px; border-radius: 999px;
  box-shadow: 0 4px 18px var(--glow);
}

/* Top Icon Quick Dock */
.s1-icon-dock {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin: 16px 0 18px;
}
.s1-dock-item {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 12px; border-radius: 14px; font-weight: 600; font-size: 0.9rem;
  backdrop-filter: blur(10px);
}
.s1-dock-item:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 20px var(--glow); }
.s1-dock-icon img { width: 30px; height: 30px; object-fit: contain; }

/* Visual-First Hero Grid (Banners Right at Top, Zero Text Clutter) */
.s1-hero-stage {
  display: grid; grid-template-columns: 2.15fr 1fr; gap: 16px; align-items: stretch;
  margin-bottom: 18px;
}
.s1-main-visual-card {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1.5px solid var(--primary); box-shadow: 0 12px 38px rgba(0,0,0,0.65), 0 0 26px var(--glow);
  background: #090f1f; display: flex; flex-direction: column; justify-content: space-between;
}
.s1-main-banner-img { width: 100%; height: 100%; max-height: 470px; object-fit: cover; }
.s1-hero-cta-overlay {
  padding: 14px 18px; background: linear-gradient(90deg, rgba(6,10,22,0.95), rgba(12,19,38,0.88));
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.s1-hero-btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s1-hero-img-btn img { max-height: 54px; width: auto; filter: drop-shadow(0 4px 14px var(--glow)); transition: transform 0.2s ease; }
.s1-hero-img-btn:hover img { transform: scale(1.05); }
.s1-primary-btn {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #050811; font-weight: 800; padding: 12px 26px; border-radius: 999px; font-size: 1rem;
}
.s1-glass-btn {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; font-weight: 700; padding: 11px 22px; border-radius: 999px;
}
.s1-glass-btn:hover { border-color: var(--primary); color: var(--primary); }
.s1-side-stack { display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.s1-side-banner-card {
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14);
  background: var(--card-bg); flex: 1; display: flex;
}
.s1-side-banner-card img { width: 100%; height: 100%; max-height: 148px; object-fit: cover; transition: transform 0.3s ease; }
.s1-side-banner-card:hover { border-color: var(--primary); box-shadow: 0 6px 20px var(--glow); }
.s1-side-banner-card:hover img { transform: scale(1.04); }

/* Stats Row */
.s1-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 26px; }
.s1-stat-card {
  background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1);
  border-top: 3px solid var(--st-color, var(--primary));
  border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(12px);
}
.s1-stat-top { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #cbd5e1; margin-bottom: 6px; }
.s1-stat-ic { width: 20px; height: 20px; object-fit: contain; }
.s1-stat-val { font-size: 1.65rem; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.s1-stat-sub { font-size: 0.78rem; color: #94a3b8; margin-top: 4px; }

/* Section Bars */
.s1-sec-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  background: rgba(10, 16, 32, 0.78); padding: 12px 18px; border-radius: 14px;
  border-left: 4px solid var(--primary); font-weight: 700; font-size: 1.1rem;
}
.s1-badge-live {
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  color: #fff; font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.6px;
}

/* Visual Promo Gallery */
.s1-visual-gallery { margin-bottom: 28px; }
.s1-banner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.s1-gallery-card {
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.12);
  background: var(--card-bg); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.s1-gallery-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.s1-gallery-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 10px 24px var(--glow); }

/* Partnership Casino Grid */
.s1-partner-sec { margin-bottom: 28px; }
.s1-partner-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px;
}
.s1-partner-item {
  background: rgba(15, 23, 42, 0.78); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 12px; display: flex; align-items: center; justify-content: center;
  min-height: 78px; backdrop-filter: blur(8px);
}
.s1-partner-item img { max-height: 52px; width: auto; object-fit: contain; transition: transform 0.22s ease; }
.s1-partner-item:hover { border-color: var(--primary); box-shadow: 0 6px 18px var(--glow); }
.s1-partner-item:hover img { transform: scale(1.08); }

/* Bank Icon Trust Ribbon */
.s1-bank-sec {
  background: rgba(9, 14, 28, 0.85); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 18px 20px; margin-bottom: 32px; text-align: center;
}
.s1-bank-title { font-size: 0.95rem; font-weight: 600; color: #cbd5e1; margin-bottom: 14px; }
.s1-bank-ribbon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.s1-bank-badge {
  width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12); padding: 7px; display: flex; align-items: center; justify-content: center;
}
.s1-bank-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Bottom SEO Content Zone (Pushed Below All Visuals!) */
.s1-seo-bottom-zone {
  margin-top: 36px; padding: 28px; border-radius: 20px;
  background: rgba(7, 11, 24, 0.9); border: 1px solid rgba(255,255,255,0.09);
}
.s1-seo-bottom-zone h1 { font-size: 1.65rem; color: var(--primary); margin-bottom: 12px; line-height: 1.35; }
.s1-seo-bottom-zone h2 { font-size: 1.28rem; color: var(--accent); margin: 20px 0 10px; }
.s1-seo-bottom-zone p { color: #cbd5e1; font-size: 0.96rem; margin-bottom: 12px; }
.s1-article-links-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 18px;
}
.s1-art-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.s1-art-card:hover { border-color: var(--primary); background: rgba(255,255,255,0.07); }
.s1-art-card strong { color: #f8fafc; font-size: 0.96rem; }
.s1-art-card span { color: #94a3b8; font-size: 0.83rem; }

/* Footer */
.s1-footer {
  margin-top: 40px; padding: 26px 0 36px; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(4, 7, 15, 0.95); text-align: center; color: #94a3b8; font-size: 0.86rem;
}
.s1-footer-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.s1-footer-links a:hover { color: var(--primary); }

@media (max-width: 960px) {
  .s1-hero-stage { grid-template-columns: 1fr; }
  .s1-side-stack { flex-direction: row; overflow-x: auto; }
  .s1-side-banner-card { min-width: 240px; }
  .s1-icon-dock { grid-template-columns: repeat(3, 1fr); }
  .s1-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .s1-banner-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .s1-icon-dock { grid-template-columns: repeat(2, 1fr); }
  .s1-nav-links { display: none; }
}