:root{--bg-primary: #111827;--bg-secondary: #1f2937;--bg-card: #1a2332;--accent: #3b82f6;--accent-hover: #2563eb;--text-primary: #f9fafb;--text-secondary: #9ca3af;--border: #374151}
*{box-sizing: border-box;margin: 0;padding: 0}
body{background-color: var(--bg-primary);color: var(--text-primary);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Bengali",sans-serif;font-size: 16px;line-height: 1.7}
a{color: var(--accent);text-decoration: none}
a:hover{color: var(--accent-hover)}
.navbar{background-color: #0d1117 !important;border-bottom: 1px solid var(--border);padding: 12px 0}
.navbar-brand img{height: 40px}
.navbar-nav .nav-link{color: var(--text-secondary) !important;font-size: 14px;padding: 6px 12px !important;transition: color 0.2s}
.navbar-nav .nav-link:hover,
  .navbar-nav .nav-link.active{color: var(--accent) !important}
.navbar-toggler{border-color: var(--border)}
.navbar-toggler-icon{filter: invert(1)}
.btn-nav-register{background: var(--accent);color: #fff !important;border-radius: 6px;padding: 6px 18px !important;font-weight: 600}
.btn-nav-register:hover{background: var(--accent-hover);color: #fff !important}
.hero-section{background: linear-gradient(135deg, #0d1117 0%, #1a2332 50%, #0d1117 100%);padding: 80px 0 60px;position: relative;overflow: hidden}
.hero-section::before{content: "";position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle at 30% 50%, rgba(59,130,246,0.08) 0%, transparent 60%);pointer-events: none}
.hero-badge{display: inline-block;background: rgba(59,130,246,0.15);color: var(--accent);border: 1px solid rgba(59,130,246,0.3);border-radius: 20px;padding: 4px 16px;font-size: 13px;margin-bottom: 16px}
.hero-section h1{font-size: clamp(28px, 5vw, 48px);font-weight: 700;line-height: 1.3;margin-bottom: 20px;color: var(--text-primary)}
.hero-section h1 span{color: var(--accent)}
.hero-section p{color: var(--text-secondary);font-size: 17px;max-width: 520px;margin-bottom: 32px}
.btn-primary-custom{background: var(--accent);color: #fff;border: none;border-radius: 8px;padding: 12px 32px;font-size: 16px;font-weight: 600;cursor: pointer;transition: background 0.2s, transform 0.1s;display: inline-block}
.btn-primary-custom:hover{background: var(--accent-hover);color: #fff;transform: translateY(-1px)}
.btn-outline-custom{background: transparent;color: var(--accent);border: 1px solid var(--accent);border-radius: 8px;padding: 12px 32px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.2s;display: inline-block}
.btn-outline-custom:hover{background: var(--accent);color: #fff}
.hero-img-wrap{position: relative}
.hero-img-wrap img{border-radius: 16px;box-shadow: 0 20px 60px rgba(0,0,0,0.5);width: 100%;object-fit: cover}
.hero-stat-card{background: rgba(59,130,246,0.1);border: 1px solid rgba(59,130,246,0.2);border-radius: 10px;padding: 12px 20px;text-align: center}
.hero-stat-card .num{font-size: 24px;font-weight: 700;color: var(--accent)}
.hero-stat-card .label{font-size: 12px;color: var(--text-secondary)}
section{padding: 64px 0}
.section-label{color: var(--accent);font-size: 13px;font-weight: 600;letter-spacing: 2px;text-transform: uppercase;margin-bottom: 8px}
.section-title{font-size: clamp(22px, 4vw, 36px);font-weight: 700;color: var(--text-primary);margin-bottom: 16px}
.section-sub{color: var(--text-secondary);font-size: 16px;max-width: 560px;margin: 0 auto 48px}
.feature-card{background: var(--bg-card);border: 1px solid var(--border);border-radius: 12px;padding: 28px 24px;transition: border-color 0.2s, transform 0.2s}
.feature-card:hover{border-color: var(--accent);transform: translateY(-4px)}
.feature-icon{width: 52px;height: 52px;background: rgba(59,130,246,0.12);border-radius: 10px;display: flex;align-items: center;justify-content: center;margin-bottom: 16px;font-size: 22px;color: var(--accent)}
.feature-card h5{font-size: 17px;font-weight: 600;margin-bottom: 8px;color: var(--text-primary)}
.feature-card p{font-size: 14px;color: var(--text-secondary);margin: 0}
.img-showcase{border-radius: 14px;width: 100%;object-fit: cover;box-shadow: 0 8px 32px rgba(0,0,0,0.4)}
.img-caption{font-size: 13px;color: var(--text-secondary);text-align: center;margin-top: 8px}
.step-card{background: var(--bg-card);border: 1px solid var(--border);border-radius: 12px;padding: 28px 20px;text-align: center;position: relative;height: 100%}
.step-num{width: 44px;height: 44px;background: var(--accent);color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 700;margin: 0 auto 16px}
.step-card h5{font-size: 16px;font-weight: 600;margin-bottom: 8px}
.step-card p{font-size: 14px;color: var(--text-secondary);margin: 0}
.testimonial-card{background: var(--bg-card);border: 1px solid var(--border);border-radius: 12px;padding: 24px;height: 100%}
.testimonial-card .stars{color: #f59e0b;font-size: 14px;margin-bottom: 12px}
.testimonial-card p{font-size: 14px;color: var(--text-secondary);margin-bottom: 16px;font-style: italic}
.testimonial-author{display: flex;align-items: center;gap: 12px}
.author-avatar{width: 40px;height: 40px;background: var(--accent);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 16px;color: #fff;flex-shrink: 0}
.author-name{font-size: 14px;font-weight: 600;color: var(--text-primary)}
.author-city{font-size: 12px;color: var(--text-secondary)}
.privacy-notice{background: rgba(59,130,246,0.07);border: 1px solid rgba(59,130,246,0.25);border-left: 4px solid var(--accent);border-radius: 10px;padding: 20px 24px}
.privacy-notice h6{color: var(--accent);font-weight: 600;margin-bottom: 8px}
.privacy-notice p{font-size: 14px;color: var(--text-secondary);margin: 0}
.rg-section{background: var(--bg-secondary)}
.rg-card{background: var(--bg-primary);border: 1px solid var(--border);border-radius: 10px;padding: 20px;height: 100%}
.rg-card i{font-size: 24px;color: var(--accent);margin-bottom: 12px;display: block}
.rg-card h6{font-weight: 600;margin-bottom: 6px}
.rg-card p{font-size: 13px;color: var(--text-secondary);margin: 0}
.content-section{background: var(--bg-secondary)}
.content-section h2{font-size: 26px;font-weight: 700;margin-bottom: 16px}
.content-section h3{font-size: 20px;font-weight: 600;margin: 28px 0 12px;color: var(--accent)}
.content-section p{color: var(--text-secondary);margin-bottom: 14px;font-size: 15px}
.game-card{background: var(--bg-card);border: 1px solid var(--border);border-radius: 12px;overflow: hidden;transition: transform 0.2s, border-color 0.2s}
.game-card:hover{transform: translateY(-4px);border-color: var(--accent)}
.game-card img{width: 100%;height: 180px;object-fit: cover}
.game-card-body{padding: 16px}
.game-card-body h6{font-weight: 600;margin-bottom: 4px}
.game-card-body p{font-size: 13px;color: var(--text-secondary);margin: 0}
footer{background: #0d1117;border-top: 1px solid var(--border);padding: 48px 0 24px}
.footer-logo img{height: 36px;margin-bottom: 12px}
.footer-desc{font-size: 14px;color: var(--text-secondary);max-width: 280px}
.footer-heading{font-size: 13px;font-weight: 600;color: var(--text-primary);text-transform: uppercase;letter-spacing: 1px;margin-bottom: 16px}
.footer-links{list-style: none;padding: 0;margin: 0}
.footer-links li{margin-bottom: 8px}
.footer-links a{font-size: 14px;color: var(--text-secondary);transition: color 0.2s}
.footer-links a:hover{color: var(--accent)}
.footer-bottom{border-top: 1px solid var(--border);margin-top: 40px;padding-top: 20px}
.footer-bottom p{font-size: 13px;color: var(--text-secondary);margin: 0}
.divider{border-color: var(--border);margin: 0}
@media  (max-width: 768px) {.hero-section{padding: 48px 0 40px}
section{padding: 48px 0}}