/* gk222bet.co Design System */
:root {
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-primary-soft: rgba(16,185,129,.12);
  --color-secondary: #6366f1;
  --color-accent: #f59e0b;
  --color-bg: #0a0f1c;
  --color-bg-soft: #111827;
  --color-surface: #1a2236;
  --color-surface-strong: #1f2a40;
  --color-card: #162032;
  --color-card-alt: #1c2a3f;
  --color-border: rgba(16,185,129,.18);
  --color-border-strong: rgba(16,185,129,.35);
  --color-text: #e8ecf1;
  --color-text-soft: #94a3b8;
  --color-text-muted: #64748b;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-footer-bg: #070b14;
  --color-footer-text: #94a3b8;
  --gradient-hero: linear-gradient(135deg, #0a0f1c 0%, #0d1f2d 40%, #0a1628 100%);
  --gradient-button: linear-gradient(135deg, #10b981, #059669);
  --gradient-button-hover: linear-gradient(135deg, #34d399, #10b981);
  --gradient-cta: linear-gradient(135deg, rgba(16,185,129,.08), rgba(99,102,241,.06));
  --shadow-header: 0 2px 20px rgba(0,0,0,.35);
  --shadow-card: 0 4px 24px rgba(0,0,0,.2);
  --shadow-card-hover: 0 8px 32px rgba(16,185,129,.15);
  --shadow-button: 0 4px 14px rgba(16,185,129,.3);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-card: 14px;
  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, "Noto Sans Bengali", sans-serif;
  --fs-h1: clamp(1.8rem, 4vw, 3rem);
  --fs-h2: clamp(1.4rem, 3vw, 2rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-nav: clamp(13px, .84vw, 15px);
  --lh-body: 1.85;
  --lh-heading: 1.25;
  --container-max: 1200px;
  --section-y: clamp(48px, 8vw, 80px);
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --header-h: 68px;
  --motion-fast: .15s;
  --motion-normal: .3s;
  --ease-out: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; padding:0; font-family:var(--font-base); background:var(--color-bg); color:var(--color-text); line-height:var(--lh-body); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--color-primary); text-decoration:none; transition:color var(--motion-fast); }
a:hover { color:var(--color-primary-dark); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.container { width:100%; max-width:var(--container-max); margin:0 auto; padding:0 clamp(14px,3vw,24px); }

/* HEADER */
.site-header { position:sticky; top:0; z-index:1000; width:100%; background:rgba(10,15,28,.97); border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-header); backdrop-filter:blur(12px); }
.header-inner { width:100%; max-width:none; padding-left:clamp(10px,1.2vw,20px); padding-right:clamp(10px,1.2vw,20px); min-height:var(--header-h); display:flex; align-items:center; gap:clamp(10px,1vw,18px); }
.brand-wrap { flex:0 0 auto; margin-right:clamp(4px,.8vw,14px); }
.site-logo { display:block; width:auto; height:clamp(32px,3vw,42px); max-width:clamp(118px,10vw,168px); object-fit:contain; }
.primary-nav { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:clamp(6px,.72vw,14px); white-space:nowrap; }
.primary-nav a { flex:0 1 auto; min-width:0; padding:9px clamp(6px,.65vw,12px); font-size:var(--fs-nav); line-height:1; color:var(--color-text-soft); white-space:nowrap; border-radius:var(--radius-sm); transition:color var(--motion-fast),background var(--motion-fast); }
.primary-nav a:hover, .primary-nav a.active { color:var(--color-primary); background:var(--color-primary-soft); }
.header-actions { flex:0 0 auto; margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:clamp(6px,.6vw,10px); white-space:nowrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:var(--radius-sm); font-size:var(--fs-small); font-weight:600; cursor:pointer; border:none; transition:all var(--motion-fast) var(--ease-out); line-height:1; white-space:nowrap; min-height:42px; }
.btn-login { background:transparent; border:1px solid var(--color-border-strong); color:var(--color-primary); }
.btn-login:hover { background:var(--color-primary-soft); color:var(--color-primary); }
.btn-register { background:var(--gradient-button); color:#fff; box-shadow:var(--shadow-button); }
.btn-register:hover { background:var(--gradient-button-hover); transform:translateY(-1px); color:#fff; }
.nav-toggle { display:none; flex:0 0 40px; width:40px; height:40px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:none; border:1px solid var(--color-border); border-radius:var(--radius-sm); cursor:pointer; padding:0; margin-left:2px; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--color-text); transition:transform var(--motion-normal),opacity var(--motion-fast); }
.mobile-menu { display:none; position:fixed; left:0; right:0; top:var(--header-h); background:rgba(10,15,28,.98); border-top:1px solid var(--color-border); padding:16px; max-height:calc(100vh - var(--header-h)); overflow-y:auto; flex-direction:column; gap:4px; z-index:999; }
.mobile-menu.is-open { display:flex; }
.mobile-menu a { display:block; padding:14px 16px; color:var(--color-text); border-radius:var(--radius-sm); font-size:1rem; }
.mobile-menu a:hover, .mobile-menu a.active { background:var(--color-primary-soft); color:var(--color-primary); }
.mobile-menu-actions { display:flex; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--color-border); }
.mobile-menu-actions .btn { flex:1; text-align:center; }
@media (max-width:1180px) {
  .header-inner { padding-left:clamp(8px,2.4vw,14px); padding-right:clamp(8px,2.4vw,14px); justify-content:flex-start; gap:clamp(6px,1.8vw,10px); }
  .brand-wrap { flex:0 1 auto; margin-right:0; }
  .site-logo { height:clamp(30px,8vw,40px); max-width:clamp(104px,27vw,138px); }
  .primary-nav { display:none; }
  .header-actions { margin-left:auto; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:clamp(5px,1.6vw,8px); }
  .header-actions .btn { min-height:40px; padding-inline:clamp(10px,2.6vw,14px); font-size:clamp(12px,3.2vw,14px); }
  .nav-toggle { display:inline-flex; }
}
@media (max-width:375px) {
  .header-inner { padding-left:8px; padding-right:8px; gap:6px; }
  .site-logo { max-width:104px; }
  .header-actions .btn { min-height:38px; padding-inline:9px; font-size:12px; }
  .nav-toggle { flex-basis:38px; width:38px; height:38px; }
}

/* SECTIONS */
.section { padding:var(--section-y) 0; }
.section-alt { background:var(--color-bg-soft); }
.section-dark { background:var(--color-surface); }
.section-label { font-size:.75rem; text-transform:uppercase; letter-spacing:2px; color:var(--color-primary); margin-bottom:.5rem; font-weight:600; }
.section-title { font-size:var(--fs-h2); font-weight:700; line-height:var(--lh-heading); margin:0 0 1rem; color:var(--color-text); }
.section-title em { font-style:normal; color:var(--color-primary); }
.section-subtitle { color:var(--color-text-soft); max-width:600px; font-size:1rem; margin:0 0 2rem; line-height:1.7; }
.text-center { text-align:center; }
.text-center .section-subtitle { margin-left:auto; margin-right:auto; }

/* HERO */
.home-hero { background:var(--gradient-hero); padding:clamp(60px,10vw,100px) 0 clamp(48px,8vw,80px); position:relative; overflow:hidden; }
.home-hero::before { content:''; position:absolute; top:-200px; left:-200px; width:600px; height:600px; background:radial-gradient(circle,rgba(16,185,129,.12) 0%,transparent 70%); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.hero-content h1 { font-size:var(--fs-h1); font-weight:700; line-height:1.15; margin:0 0 1.2rem; }
.hero-content h1 span { color:var(--color-primary); }
.hero-desc { color:var(--color-text-soft); font-size:1.05rem; max-width:540px; margin-bottom:2rem; line-height:1.8; }
.hero-btns { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:2rem; }
.btn-hero-primary { background:var(--gradient-button); color:#fff; padding:14px 28px; border-radius:var(--radius-md); font-size:1rem; font-weight:700; box-shadow:var(--shadow-button); border:none; cursor:pointer; transition:all var(--motion-fast); display:inline-flex; align-items:center; gap:8px; }
.btn-hero-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(16,185,129,.4); color:#fff; }
.btn-hero-secondary { background:transparent; border:1px solid var(--color-primary); color:var(--color-primary); padding:14px 28px; border-radius:var(--radius-md); font-size:1rem; font-weight:600; cursor:pointer; transition:all var(--motion-fast); display:inline-flex; align-items:center; gap:8px; }
.btn-hero-secondary:hover { background:var(--color-primary-soft); color:var(--color-primary); }
.hero-stats { display:flex; gap:2rem; flex-wrap:wrap; }
.hero-stat { text-align:left; }
.hero-stat-num { font-size:1.6rem; font-weight:700; color:var(--color-primary); }
.hero-stat-label { font-size:.78rem; color:var(--color-text-muted); }
.hero-visual { text-align:center; }
.hero-visual img { width:100%; max-width:520px; border-radius:var(--radius-lg); border:1px solid var(--color-border-strong); box-shadow:var(--shadow-card-hover); }
@media (max-width:900px) { .hero-grid { grid-template-columns:1fr; } .hero-visual { margin-top:2rem; } .hero-visual img { max-width:400px; } }

/* CARDS */
.card-grid { display:grid; gap:var(--gap-md); }
.card-grid-4 { grid-template-columns:repeat(4,1fr); }
.card-grid-3 { grid-template-columns:repeat(3,1fr); }
.card-grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:900px) { .card-grid-4, .card-grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns:1fr; } }
.feature-card { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:1.5rem; transition:transform var(--motion-normal),box-shadow var(--motion-normal); }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.feature-card-icon { width:48px; height:48px; border-radius:var(--radius-md); background:var(--color-primary-soft); border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--color-primary); margin-bottom:1rem; }
.feature-card h3 { font-size:1rem; font-weight:600; margin:0 0 .5rem; }
.feature-card p { color:var(--color-text-soft); font-size:.9rem; line-height:1.7; margin:0; }
.game-card { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-card); overflow:hidden; transition:transform var(--motion-normal),box-shadow var(--motion-normal); }
.game-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card-hover); }
.game-card img { width:100%; height:180px; object-fit:cover; }
.game-card-body { padding:1rem; }
.game-card-body h3 { font-size:.95rem; font-weight:600; margin:0 0 .3rem; }
.game-card-body a { font-size:.85rem; color:var(--color-primary); }
.step-card { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:1.8rem 1.2rem; text-align:center; }
.step-num { width:48px; height:48px; border-radius:50%; background:var(--gradient-button); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700; margin:0 auto 1rem; box-shadow:var(--shadow-button); }
.step-card h3 { font-size:1rem; font-weight:600; margin:0 0 .5rem; }
.step-card p { color:var(--color-text-soft); font-size:.88rem; margin:0; line-height:1.7; }
.trust-card { background:var(--gradient-cta); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:1.4rem; display:flex; gap:1rem; align-items:flex-start; transition:border-color var(--motion-fast); }
.trust-card:hover { border-color:var(--color-primary); }
.trust-card-icon { font-size:1.4rem; color:var(--color-primary); flex-shrink:0; line-height:1; padding-top:2px; }
.trust-card h4 { font-size:.95rem; font-weight:600; margin:0 0 .4rem; }
.trust-card p { color:var(--color-text-soft); font-size:.88rem; margin:0; line-height:1.7; }

/* CONTENT / PROSE */
.content-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start; }
@media (max-width:900px) { .content-layout { grid-template-columns:1fr; } }
.prose { max-width:820px; }
.prose h2 { font-size:var(--fs-h2); font-weight:700; color:var(--color-primary); margin:2rem 0 .8rem; line-height:var(--lh-heading); }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:var(--fs-h3); font-weight:600; margin:1.5rem 0 .6rem; }
.prose p { color:var(--color-text-soft); font-size:.97rem; line-height:1.85; margin:0 0 1rem; }
.prose ul, .prose ol { color:var(--color-text-soft); padding-left:1.5rem; margin:0 0 1rem; }
.prose li { margin-bottom:.5rem; line-height:1.7; }
.prose img { border-radius:var(--radius-md); border:1px solid var(--color-border); margin:1.5rem 0; }
.img-showcase { width:100%; border-radius:var(--radius-card); border:1px solid var(--color-border); box-shadow:var(--shadow-card); }
.img-caption { text-align:center; color:var(--color-text-muted); font-size:.82rem; margin-top:.5rem; }
.info-box { background:var(--gradient-cta); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:1.5rem; margin:1.5rem 0; }
.info-box h4 { font-size:1rem; font-weight:700; margin:0 0 .5rem; color:var(--color-text); }
.info-box p { color:var(--color-text-soft); font-size:.9rem; margin:0; line-height:1.7; }
.stats-strip { display:flex; gap:2rem; flex-wrap:wrap; padding:1.5rem; background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-card); }
.stats-strip-item { flex:1; min-width:100px; }
.stats-strip-item .val { font-size:1.4rem; font-weight:700; color:var(--color-primary); }
.stats-strip-item .label { font-size:.78rem; color:var(--color-text-muted); }

/* CTA */
.cta-section { background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(99,102,241,.04)); border-top:1px solid var(--color-border); border-bottom:1px solid var(--color-border); }
.cta-inner { text-align:center; max-width:600px; margin:0 auto; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* FAQ */
.faq-list { max-width:800px; margin:0 auto; }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-btn { width:100%; padding:18px 0; background:none; border:none; color:var(--color-text); font-size:1rem; font-weight:600; text-align:left; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--font-base); }
.faq-btn::after { content:'+'; font-size:1.2rem; color:var(--color-primary); transition:transform var(--motion-fast); flex-shrink:0; }
.faq-btn[aria-expanded="true"]::after { content:'−'; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height var(--motion-normal) var(--ease-out); }
.faq-answer-inner { padding:0 0 18px; color:var(--color-text-soft); font-size:.95rem; line-height:1.8; }

/* FORMS */
.auth-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px) { .auth-layout { grid-template-columns:1fr; } }
.auth-form-card { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:2rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.88rem; font-weight:600; margin-bottom:.4rem; color:var(--color-text); }
.form-group input { width:100%; padding:12px 14px; background:var(--color-bg-soft); border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-text); font-size:1rem; font-family:var(--font-base); transition:border-color var(--motion-fast); }
.form-group input:focus { border-color:var(--color-primary); outline:none; }
.form-submit { width:100%; padding:14px; background:var(--gradient-button); color:#fff; border:none; border-radius:var(--radius-sm); font-size:1rem; font-weight:700; cursor:pointer; transition:all var(--motion-fast); }
.form-submit:hover { transform:translateY(-1px); box-shadow:var(--shadow-button); }

/* BREADCRUMB */
.breadcrumb { padding:14px 0; font-size:.82rem; color:var(--color-text-muted); }
.breadcrumb a { color:var(--color-text-muted); }
.breadcrumb a:hover { color:var(--color-primary); }
.breadcrumb span { margin:0 6px; }

/* PAGE HERO */
.page-hero { padding:clamp(32px,5vw,60px) 0; background:var(--gradient-hero); border-bottom:1px solid var(--color-border); }
.page-hero h1 { font-size:var(--fs-h1); font-weight:700; margin:0 0 1rem; line-height:var(--lh-heading); }
.page-hero .lead { color:var(--color-text-soft); font-size:1.05rem; max-width:640px; line-height:1.8; }

/* POLICY */
.policy-toc { background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius-card); padding:1.5rem; margin-bottom:2rem; }
.policy-toc h3 { font-size:1rem; font-weight:700; margin:0 0 .8rem; color:var(--color-primary); }
.policy-toc ul { list-style:none; padding:0; margin:0; }
.policy-toc li { margin-bottom:.5rem; }
.policy-toc a { color:var(--color-text-soft); font-size:.9rem; }
.policy-toc a:hover { color:var(--color-primary); }
.policy-note { background:rgba(245,158,11,.08); border-left:3px solid var(--color-warning); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:1rem 1.2rem; margin:1.5rem 0; }
.policy-note p { color:var(--color-text-soft); font-size:.9rem; margin:0; }

/* FOOTER */
.site-footer { background:var(--color-footer-bg); border-top:1px solid var(--color-border); padding:60px 0 30px; }
.footer-inner { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; max-width:var(--container-max); margin:0 auto; padding:0 clamp(14px,3vw,24px); }
@media (max-width:900px) { .footer-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .footer-inner { grid-template-columns:1fr; } }
.footer-logo-link img { height:42px; width:auto; margin-bottom:1rem; }
.footer-desc { color:var(--color-footer-text); font-size:.88rem; line-height:1.75; max-width:300px; }
.footer-heading { color:var(--color-text); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:1rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.5rem; }
.footer-links a { color:var(--color-footer-text); font-size:.88rem; transition:color var(--motion-fast),padding-left var(--motion-fast); }
.footer-links a:hover { color:var(--color-primary); padding-left:4px; }
.footer-contact { margin-top:1rem; padding:.8rem 1rem; background:rgba(16,185,129,.06); border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:.85rem; }
.footer-contact span { color:var(--color-text-muted); display:block; font-size:.78rem; margin-bottom:.2rem; }
.footer-contact a { color:var(--color-primary); }
.footer-bottom { border-top:1px solid var(--color-border); margin-top:2.5rem; padding-top:1.5rem; text-align:center; max-width:var(--container-max); margin-left:auto; margin-right:auto; padding-left:clamp(14px,3vw,24px); padding-right:clamp(14px,3vw,24px); }
.footer-bottom p { color:var(--color-text-muted); font-size:.82rem; margin:0 0 .4rem; }
.footer-policy-links { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer-policy-links a { color:var(--color-text-muted); font-size:.78rem; }
.footer-policy-links a:hover { color:var(--color-primary); }

/* UTILITY */
.age-badge { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#ef4444,#b91c1c); font-size:1rem; font-weight:700; color:#fff; flex-shrink:0; }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--color-border-strong),transparent); border:none; margin:0; }