/* ============================================================
   Six Game – Comprehensive Utility CSS
   ============================================================ */

/* --- Reset & Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- Typography -------------------------------------------- */
h1 {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.15;
  color: #000;
  margin-bottom: 1.25rem;
}
h2 { font-size: 1.5rem; font-weight: 900; line-height: 1.2; color: #000; }
h3 { font-size: 1.125rem; font-weight: 700; color: #000; }
p  { line-height: 1.7; }
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* --- Header ----------------------------------------------- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all 300ms;
  background: rgba(255,255,255,0.70);
  border-bottom: 1px solid rgba(217,119,6,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#site-header.scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom-color: rgba(217,119,6,0.20);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.header-inner { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.h-16 { height: 4rem; }
.lg\:h-20 { height: 4rem; }
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* --- Breadcrumbs ------------------------------------------ */
.breadcrumb-wrap {
  max-width: 80rem; margin: 0 auto;
  padding: 5.5rem 1rem 1rem;
  font-size: 0.85rem;
}
.breadcrumb-wrap a { color: #D97706; }
.breadcrumb-wrap a:hover { text-decoration: underline; }
.breadcrumb-wrap span { color: #9ca3af; margin: 0 0.4rem; }

/* --- Layout Utilities ------------------------------------- */
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* --- Display ---------------------------------------------- */
.hidden     { display: none !important; }
.block      { display: block; }
.inline-block { display: inline-block; }
.flex       { display: flex; }
.inline-flex { display: inline-flex; }
.grid       { display: grid; }

/* --- Flex helpers ----------------------------------------- */
.flex-col   { flex-direction: column; }
.flex-row   { flex-direction: row; }
.flex-wrap  { flex-wrap: wrap; }
.flex-grow  { flex-grow: 1; }
.shrink-0   { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }

/* --- Gap -------------------------------------------------- */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* --- Grid columns ----------------------------------------- */
.grid-cols-1  { grid-template-columns: repeat(1,minmax(0,1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2,minmax(0,1fr)); }

/* --- Spacing (padding) ------------------------------------ */
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }

.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.px-5   { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6   { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7   { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8   { padding-left: 2rem; padding-right: 2rem; }

.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4   { padding-top: 1rem; padding-bottom: 1rem; }
.py-5   { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8   { padding-top: 2rem; padding-bottom: 2rem; }
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12  { padding-top: 3rem; padding-bottom: 3rem; }
.py-16  { padding-top: 4rem; padding-bottom: 4rem; }
.py-24  { padding-top: 6rem; padding-bottom: 6rem; }

.pt-10 { padding-top: 2.5rem; }
.pt-8  { padding-top: 2rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-8  { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-11 { padding-left: 2.75rem; }

/* --- Spacing (margin) ------------------------------------- */
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1    { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2    { margin-bottom: 0.5rem; }
.mb-3    { margin-bottom: 0.75rem; }
.mb-4    { margin-bottom: 1rem; }
.mb-5    { margin-bottom: 1.25rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mb-8    { margin-bottom: 2rem; }
.mb-10   { margin-bottom: 2.5rem; }
.mb-14   { margin-bottom: 3.5rem; }
.mb-16   { margin-bottom: 4rem; }
.mb-20   { margin-bottom: 5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1    { margin-top: 0.25rem; }
.mt-2    { margin-top: 0.5rem; }
.mt-4    { margin-top: 1rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-8    { margin-top: 2rem; }
.mt-10   { margin-top: 2.5rem; }
.mt-12   { margin-top: 3rem; }
.mt-20   { margin-top: 5rem; }
.mt-auto { margin-top: auto; }
.mr-2    { margin-right: 0.5rem; }

/* --- Space-y helpers (applies margin to children) --------- */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* --- Text sizes ------------------------------------------- */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }

/* --- Font weights ----------------------------------------- */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }

/* --- Text colors ------------------------------------------ */
.text-black    { color: #000; }
.text-white    { color: #fff; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }

/* Custom color */
.text-amber { color: #D97706; }

/* --- Background colors ------------------------------------ */
.bg-white     { background-color: #fff; }
.bg-gray-50   { background-color: #f9fafb; }
.bg-amber-50  { background-color: #fffbeb; }
.bg-green-50  { background-color: #f0fdf4; }

/* --- Border ------------------------------------------------ */
.border      { border: 1px solid; }
.border-t    { border-top: 1px solid; }
.border-b    { border-bottom: 1px solid; }
.border-l    { border-left: 1px solid; }
.border-gray-100  { border-color: #f3f4f6; }
.border-gray-200  { border-color: #e5e7eb; }
.border-gray-300  { border-color: #d1d5db; }
.border-green-200 { border-color: #bbf7d0; }

/* --- Border radius ---------------------------------------- */
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* --- Shadows ---------------------------------------------- */
.shadow-sm   { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-lg   { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-xl   { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04); }
.shadow-2xl  { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* --- Opacity ---------------------------------------------- */
.opacity-10  { opacity: 0.10; }
.opacity-20  { opacity: 0.20; }
.opacity-60  { opacity: 0.60; }
.opacity-70  { opacity: 0.70; }

/* --- Overflow --------------------------------------------- */
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }

/* --- Position --------------------------------------------- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* --- Sizing ----------------------------------------------- */
.w-1  { width: 0.25rem; }
.w-2  { width: 0.5rem; }
.w-4  { width: 1rem; }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem; }
.w-7  { width: 1.75rem; }
.w-8  { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-11 { width: 2.75rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-80 { width: 20rem; }
.w-96 { width: 24rem; }
.h-1  { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-2  { height: 0.5rem; }
.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-7  { height: 1.75rem; }
.h-8  { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-11 { height: 2.75rem; }
.h-16 { height: 4rem; }
.h-px { height: 1px; }
.max-w-md { max-width: 28rem; }
.max-w-xs { max-width: 20rem; }
.max-w-2xl { max-width: 42rem; }

/* --- Transforms ------------------------------------------- */
.transform-gpu { transform: translateZ(0); }
.will-change-transform { will-change: transform; }
.-z-10 { z-index: -10; }

/* --- Transitions ------------------------------------------ */
.transition-all    { transition: all 200ms; }
.transition-colors { transition: color 200ms, background-color 200ms, border-color 200ms; }
.transition-transform { transition: transform 200ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }

/* --- Hover effects ---------------------------------------- */
.hover\:underline:hover { text-decoration: underline; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04); }
.hover\:shadow-2xl:hover { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:translate-x-2:hover { transform: translateX(0.5rem); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:text-amber:hover { color: #D97706; }
.hover\:bg-\[#B45309\]:hover { background-color: #B45309; }
.hover\:border-amber-40:hover { border-color: rgba(217,119,6,0.40); }

/* Group hover */
.group:hover .group-hover\:text-amber { color: #D97706; }
.group:hover .group-hover\:translate-x-2 { transform: translateX(0.5rem); }

/* --- Blur ------------------------------------------------- */
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }

/* --- Animate ---------------------------------------------- */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.animate-pulse { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

/* --- Pointer events --------------------------------------- */
.pointer-events-none { pointer-events: none; }

/* --- Misc ------------------------------------------------- */
.leading-relaxed { line-height: 1.625; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.italic          { font-style: italic; }
.uppercase       { text-transform: uppercase; }
.text-center     { text-align: center; }
.text-left       { text-align: left; }
.text-right      { text-align: right; }
.resize-none     { resize: none; }
.outline-none    { outline: none; }
.border-collapse { border-collapse: collapse; }
.line-through    { text-decoration: line-through; }
.font-mono       { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* --- Line clamp ------------------------------------------- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Divide-y -------------------------------------------- */
.divide-y > * + * { border-top: 1px solid #f3f4f6; }

/* --- Focus ring ------------------------------------------ */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(217,119,6,0.5);
  border-color: transparent;
}

/* --- Prose ------------------------------------------------ */
.prose { color: #000; }
.prose p { margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; }
.prose h3 { font-size: 1.125rem; font-weight: 700; color: #D97706; margin-bottom: 0.5rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
.prose li { margin-bottom: 0.5rem; line-height: 1.7; }
.prose strong { font-weight: 700; }
.prose a { color: #D97706; }
.prose a:hover { text-decoration: underline; }
.prose a.text-white { color: #fff; }
.prose a.text-black { color: #000; }

/* --- Responsive: sm (640px) ------------------------------- */
@media (min-width: 640px) {
  h1 { font-size: 3rem; }
  .sm\:p-6  { padding: 1.5rem; }
  .sm\:p-8  { padding: 2rem; }
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:p-12 { padding: 3rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:border { border: 1px solid; }
  .sm\:bg-fafafa { background: #fafafa; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right  { text-align: right; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
  .sm\:text-5xl { font-size: 3rem;     line-height: 1; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-auto   { width: auto; }
  .sm\:mx-auto  { margin-left: auto; margin-right: auto; }
  .sm\:flex     { display: flex; }
  .sm\:hidden   { display: none !important; }
  .sm\:block    { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* --- Responsive: md (768px) ------------------------------- */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .md\:text-center { text-align: center; }
  .md\:flex        { display: flex; }
  .md\:block       { display: block !important; }
}

/* --- Responsive: lg (1024px) ------------------------------ */
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }
  .lg\:h-20 { height: 5rem; }
  .header-inner { padding: 0 2rem; }
  .lg\:flex   { display: flex !important; }
  .lg\:hidden { display: none !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .lg\:col-span-2   { grid-column: span 2; }
  .lg\:px-8  { padding-left: 2rem; padding-right: 2rem; }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:justify-end  { justify-content: flex-end; }
  .lg\:text-center  { text-align: center; }
}

/* --- Screen-reader only ----------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border-width: 0;
}

/* === FAQ accordion ======================================== */
.faq-item { border-radius: 1rem; overflow: hidden; margin-bottom: 0.75rem; }
.faq-btn  { width: 100%; text-align: left; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: none; }
.faq-content { padding: 0 1.5rem 1rem; display: none; }
.faq-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; background: #D97706; transition: all 200ms; }

/* === Table =============================================== */
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; vertical-align: middle; }

/* === Contact form ======================================== */
#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 100%; padding: 0.75rem 1rem;
  border-radius: 0.75rem; border: 1px solid #d1d5db;
  background: #fff; color: #000;
  transition: all 200ms;
}
#form-success { display: none; }

/* === Gradient text ======================================= */
.gradient-text {
  background: linear-gradient(135deg,#D97706,#F59E0B,#B45309);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* === Stats row =========================================== */
.stats-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; }
.stat-item { text-align: center; }
.stat-num  { font-size: 1.25rem; font-weight: 900; color: #D97706; }
.stat-lbl  { font-size: 0.75rem; color: #000; }

/* === Payment badges ====================================== */
.payment-badge {
  padding: 0.25rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.75rem; font-weight: 500;
  background: rgba(240,192,89,0.1);
  color: #D97706;
  border: 1px solid rgba(240,192,89,0.2);
  display: inline-block;
}