:root{
  --bg:#0a0c10;
  --surface:#11151b;
  --muted:#9aa4b2;
  --text:#e6edf3;
  --primary:#00e0a4; /* neon green (sports betting accent) */
  --primary-600:#00c38e;
  --accent:#ff4d4f; /* roulette red */
  --gold:#f0c419;   /* casino gold */
  --card:#141922;
  --card-2:#171e28;
  --border:#222a35;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 600px at 70% -10%, rgba(0,224,164,.18), transparent 60%),
              radial-gradient(900px 500px at 10% -20%, rgba(240,196,25,.12), transparent 60%),
              var(--bg);
  line-height:1.6;
}

.container{ width:min(1120px, 92%); margin-inline:auto }
.section{ padding:72px 0 }
.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap:40px }
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px }

.site-header{
  position:sticky; top:0; z-index:1000; -webkit-backdrop-filter:saturate(200%) blur(8px); backdrop-filter:saturate(200%) blur(8px);
  background: linear-gradient(180deg, rgba(10,12,16,.75), rgba(10,12,16,.3));
  border-bottom:1px solid var(--border);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text) }
.brand .logo{ width:36px; height:36px }
.brand-name{ font-weight:700; letter-spacing:.3px }

.nav-toggle{ display:none; background:none; border:0; cursor:pointer }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0 }
.primary-nav ul{ display:flex; gap:22px; list-style:none; margin:0; padding:0 }
.primary-nav a{ color:var(--muted); text-decoration:none; font-weight:500 }
.primary-nav a:hover{ color:var(--text) }

.hero{ padding-top:48px }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:32px }
.hero-copy h1{
  font-family: Rajdhani, Poppins, sans-serif;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height:1.1; margin:0 0 14px;
}
.hero-copy p{ color:var(--muted); margin:0 0 20px }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin: 8px 0 16px }
.hero-points{ display:grid; grid-template-columns: 1fr; gap:8px; padding:0; list-style:none; color:#c8d1dc }
.hero-visual{
  display:grid; place-items:center; background:linear-gradient(145deg, var(--card), var(--card-2));
  border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow: var(--shadow);
}
.hero-visual img{ width:100%; height:auto; border-radius:10px; border:1px solid #1c2430; background:#0c1219 }

/* removed trustbar */

.about .checklist{ list-style:none; padding:0; margin:18px 0 0; color:#c8d1dc }
.about .checklist li{ margin:8px 0; padding-left:26px; position:relative }
.about .checklist li::before{ content:"✔"; position:absolute; left:0; color:var(--primary) }
.about-card{ background:linear-gradient(145deg, #10151c, #0e1319); border:1px solid var(--border); border-radius:16px; padding:20px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
.kpi{ background:#0d131a; border:1px solid #1c2430; border-radius:12px; padding:16px; text-align:center }
.kpi-value{ font-family: Rajdhani, Poppins, sans-serif; font-size:32px; color:var(--gold) }
.kpi-label{ display:block; color:#91a0b1; font-size:12px }

.section h2{ font-size: clamp(22px, 2.6vw, 36px); margin:0 0 8px; font-family: Rajdhani, Poppins, sans-serif }
.section-intro{ color:var(--muted); margin:0 0 24px }

.card{ background:linear-gradient(160deg, var(--card), var(--card-2)); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow) }
.card h3{ margin:8px 0 8px; font-size:20px }
.feature-list{ list-style:none; padding:0; margin:10px 0 0; color:#c8d1dc }
.feature-list li{ margin:6px 0; padding-left:22px; position:relative }
.feature-list li::before{ display:none }
.feature-list .fi{ width:1.1em; margin-right:8px }

.icon{ width:40px; height:40px; border-radius:10px; display:inline-grid; place-items:center; margin-bottom:8px; background:#0e151e; border:1px solid #1f2835; color:var(--primary) }
.icon-chip{ background: conic-gradient(from 0deg, #0e151e, #101821); }
.icon-scoreboard{ color:#7cc5ff }
.icon-dice{ color:var(--accent) }

.gallery{ margin-top:28px }
.gallery-title{ font-size:18px; color:#aab6c3 }
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.gallery-grid figure{ margin:0; aspect-ratio: 16 / 10; overflow:hidden }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid #1c2430 }
.gallery-note{ color:#7f8b99; font-size:12px; margin-top:8px }

.pricing-grid{ grid-template-columns: repeat(3, 1fr) }
.price-card{ display:flex; flex-direction:column }
.price-card .price{ font-size:28px; margin:8px 0 14px }
.price-card h3{ font-size:18px }
.price-card .price{ font-size:22px }
.price-card .feature-list{ font-size:14px }
.price-card .btn{ padding:6px 10px; font-weight:600 }
.price-card .currency{ color:var(--muted) }
.price-card .per{ color:#91a0b1; font-size:14px }
.price-card.featured{ border-color:#284b38; box-shadow: 0 0 0 2px rgba(0,224,164,.15), var(--shadow); position:relative }
.price-card .badge{ position:absolute; top:12px; right:12px; background:linear-gradient(90deg, var(--primary), #48f0c3); color:#082116; font-weight:700; font-size:11px; padding:4px 8px; border-radius:999px }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto }

.contact-form{ display:grid; gap:12px; margin-top:8px }
.form-row{ display:grid; gap:6px }
.form-row label{ color:#aab6c3; font-size:14px }
.form-row input,
.form-row textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid #223042; background:#0b1118; color:var(--text);
}
.form-row input:focus,
.form-row textarea:focus{ outline:2px solid rgba(0,224,164,.35); border-color:#2b705f }
.form-status{ min-height:20px; font-size:14px; color:#aab6c3 }
.contact-card,
.contact-aside{ background:linear-gradient(160deg, var(--card), var(--card-2)); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column }
.contact-list{ list-style:none; padding:0; margin:0 0 10px; color:#c8d1dc }
.contact-list a{ color:#9bd7ff; text-decoration:none }
.contact-list a:hover{ text-decoration:underline }
.note{ background:#0d141c; border:1px dashed #243042; color:#9aa9bb; padding:10px 12px; border-radius:10px; font-size:13px }

.site-footer{ border-top:1px solid var(--border); background:#0b0e12; padding-top:24px; margin-top:40px }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; padding-bottom:14px }
.footer-nav{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px }
.footer-nav h4{ margin:0 0 6px; font-size:14px; color:#aab6c3 }
.footer-nav ul{ list-style:none; padding:0; margin:0 }
.footer-nav a{ color:#c8d1dc; text-decoration:none; font-size:14px }
.footer-nav a:hover{ color:#fff }
.copyright{ border-top:1px solid var(--border); padding:10px 0 18px; color:#7f8b99 }

.btn{ display:inline-block; border-radius:999px; padding:10px 16px; text-decoration:none; font-weight:700; letter-spacing:.2px }
.btn-primary{ background:linear-gradient(90deg, var(--primary), #48f0c3); color:#081d16; border:1px solid #1d5f51 }
.btn-primary:hover{ filter:brightness(1.05) }
.btn-outline{ color:var(--text); border:1px solid #2a3546; background:transparent }
.btn-outline:hover{ background:#121824 }

.logo.small{ width:28px; height:28px }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* Contact equal height */
#contact .grid-2{ align-items:stretch }
#contact .contact-card,
#contact .contact-aside{ height:100% }

/* Tighter product cards */
.products .card{ padding:12px }
.products .card h3{ margin-top:4px }
.products .feature-list{ margin-top:8px }

/* Responsive */
@media (max-width: 960px){
  .grid-2, .hero-grid{ grid-template-columns: 1fr }
  .card-grid{ grid-template-columns: 1fr 1fr }
  .gallery-grid{ grid-template-columns: repeat(3, 1fr) }
  .pricing-grid{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr }
  .primary-nav{ position:fixed; inset:56px 0 auto 0; background:#0b0f15; border-bottom:1px solid var(--border); transform:translateY(-120%); transition:.25s ease; }
  .primary-nav.open{ transform:translateY(0) }
  .primary-nav ul{ flex-direction:column; padding:12px; gap:10px }
  .nav-toggle{ display:block }
}

@media (max-width: 560px){
  .card-grid{ grid-template-columns: 1fr }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr) }
}

.header-inner{ gap:10px }

/* Simple icon set (font-less) */
.fi{ display:inline-block; width:1em; text-align:center; margin-right:6px; color:var(--primary) }
.fi-check::before{ content:"✔" }
.fi-chart::before{ content:"📊" }
.fi-api::before{ content:"🧩" }
.fi-bolt::before{ content:"⚡" }
.fi-bell::before{ content:"🔔" }
.fi-mobile::before{ content:"📱" }
.fi-speed::before{ content:"🚀" }
.fi-shield::before{ content:"🛡" }
.fi-plug::before{ content:"🔌" }
.fi-refresh::before{ content:"↻" }
.fi-mail::before{ content:"✉" }
.fi-infinity::before{ content:"∞" }
.fi-users::before{ content:"👥" }
.fi-star::before{ content:"★" }
.fi-lab::before{ content:"🧪" }
.fi-clock::before{ content:"⏰" }
.fi-linkedin::before{ content:"in" }
.fi-twitter::before{ content:"𝕏" }
.fi-stripe::before{ content:"S" }
.fi-bank::before{ content:"🏦" }
.fi-card::before{ content:"💳" }
.fi-btc::before{ content:"₿" }
.fi-eth::before{ content:"◇" }
.fi-usdc::before{ content:"◉" }

/* Segments */
.segments{ padding-top:0 }
.seg-list{ display:flex; gap:12px; list-style:none; padding:0; margin: -12px 0 12px; flex-wrap:wrap }
.seg-list li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid #243042; border-radius:999px; background:linear-gradient(160deg, #0f151e, #0b1118); color:#cfe6ff }
.seg-icon{ font-size:16px }

/* Lightbox */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; align-items:center; justify-content:center; z-index:2000 }
.lightbox.show{ display:flex }
.lightbox img{ max-width:92vw; max-height:80vh; border-radius:12px; border:1px solid #213044; box-shadow: var(--shadow) }
.lightbox-close{ position:absolute; top:16px; right:18px; font-size:28px; background:#0b0f15; color:#cfd8e3; border:1px solid #243042; border-radius:50%; width:36px; height:36px; cursor:pointer }
.lightbox-controls{ position:absolute; bottom:24px; display:flex; gap:12px }
.lightbox-controls button{ background:#0b0f15; color:#cfd8e3; border:1px solid #243042; border-radius:8px; padding:8px 12px; cursor:pointer }
.lightbox-caption{ position:absolute; bottom:70px; color:#d6dee9; font-size:14px; text-align:center; width:80vw; max-width:900px }

/* Payment badges */
.pay-row{ margin-top:22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid #243042; border-radius:12px; background:linear-gradient(160deg, #0f151e, #0b1118) }
.pay-row{ border-left:3px solid var(--primary) }
.pay-label{ color:#aab6c3; font-size:14px; font-weight:700 }
.pay-badges{ list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap }
.pay-badges .badge{ display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #233246; border-radius:999px; background:#0c1118; color:#d6dee9; font-size:13px }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:3000 }
.modal.show{ display:block }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7) }
.modal-dialog{ position:relative; margin:8vh auto 0; width:min(720px, 92vw); background:#0b0f15; border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); padding:16px 16px 18px; color:var(--text) }
.modal-close{ position:absolute; right:12px; top:10px; background:#0c1118; color:#cfd8e3; border:1px solid #223042; border-radius:50%; width:34px; height:34px; cursor:pointer }
.modal-subtitle{ color:#aab6c3; margin-top:-6px }

.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin:12px 0 10px }
.tab{ background:#0c1118; color:#d6dee9; border:1px solid #223042; border-bottom:none; border-top-left-radius:10px; border-top-right-radius:10px; padding:8px 12px; cursor:pointer }
.tab.active{ background:#0f151e }
.tabpanels{ background:#0f151e; border:1px solid #223042; border-radius:0 10px 10px 10px; padding:14px }
.tabpanel{ display:none }
.tabpanel.show{ display:block }

.bank-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:6px }
.bank-grid .label{ color:#aab6c3; font-size:12px }
.bank-grid .value{ color:#d6dee9; font-size:14px; word-break: break-all }
.bank-grid .value.row{ display:flex; align-items:center; gap:8px }
.copy{ background:#0c1118; color:#cfe6ff; border:1px solid #223042; border-radius:8px; padding:6px 8px; cursor:pointer }

.crypto-row{ display:flex; gap:10px; align-items:center; margin:6px 0 10px }
.addr-row .label{ color:#aab6c3; font-size:12px }
.addr-row .value{ color:#d6dee9; font-size:14px; word-break: break-all; display:flex; align-items:center; gap:8px }
.mini-note{ color:#7f8b99; font-size:12px; margin-top:8px }
