:root{
  --bg0:#071319;
  --bg1:#050b10;
  --panel:#0b1116cc;
  --card:#0e161d;
  --card2:#0c1319;
  --stroke:#1b2a33;
  --text:#d7e7f1;
  --muted:#9bb1bf;
  --cyan:#24e3e9;
  --cyan2:#00cbd2;
  --purple:#7b5cff;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 14px;
  --container: 1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 680px at 20% 20%, rgba(36,227,233,.18), transparent 60%),
    radial-gradient(900px 520px at 78% 30%, rgba(123,92,255,.14), transparent 55%),
    radial-gradient(700px 520px at 60% 85%, rgba(0,203,210,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Subtle vignette like the screenshot */
body::before{
  content:"";
  position:fixed;
  inset:-40px;
  background:
    radial-gradient(60% 60% at 50% 35%, transparent 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
  z-index:-1;
}

a{ color:inherit; text-decoration:none; }
.wrap{
  width:min(var(--container), calc(100% - 36px));
  margin: 76px auto 110px;
}

.app{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(7,18,23,.78), rgba(7,13,18,.92));
  border:1px solid rgba(36,227,233,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(10,18,24,.65), rgba(10,18,24,.15));
  border-bottom: 1px solid rgba(36,227,233,.07);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.3px;
}
.brand .mark{
  width:22px; height:22px;
  filter: drop-shadow(0 0 12px rgba(36,227,233,.35));
}
.brand span{
  font-size: 13px;
  color: rgba(36,227,233,.92);
}

nav{
  display:flex;
  align-items:center;
  gap:18px;
  color: rgba(215,231,241,.72);
  font-size: 12px;
}
nav a{
  position:relative;
  padding: 8px 6px;
}
nav a.active{
  color: rgba(215,231,241,.92);
}
nav a.active::after{
  content:"";
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: -12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(36,227,233,.95), transparent);
  border-radius: 999px;
}

.right-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill{
  display:flex;
  align-items:center;
  gap:6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10,18,24,.55);
  border: 1px solid rgba(155,177,191,.15);
  color: rgba(215,231,241,.8);
  font-size: 12px;
  cursor:pointer;
  user-select:none;
}
.pill:hover{
  border-color: rgba(36,227,233,.25);
}
.pill .dot{
  width:8px; height:8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(36,227,233,.9), rgba(36,227,233,.35));
  box-shadow: 0 0 16px rgba(36,227,233,.55);
}
.pill .label{
  font-weight:700;
}
.pill .value{
  color: rgba(155,177,191,.85);
  font-weight:600;
}

.group{
  display:flex;
  align-items:center;
  gap:8px;
}
.circle{
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(10,18,24,.5);
  border: 1px solid rgba(155,177,191,.15);
  cursor:pointer;
}
.circle:hover{ border-color: rgba(36,227,233,.25); }
.circle svg{
  width:16px; height:16px;
  fill: rgba(215,231,241,.82);
}

.avatar{
  width:30px; height:30px;
  border-radius: 999px;
  border: 1px solid rgba(36,227,233,.18);
  background:
    radial-gradient(circle at 30% 30%, rgba(36,227,233,.30), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(123,92,255,.25), transparent 60%),
    linear-gradient(180deg, rgba(12,19,25,.9), rgba(10,16,21,.65));
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.icon-btn{
  width:30px; height:30px;
  border-radius: 999px;
  border: 1px solid rgba(155,177,191,.14);
  background: rgba(10,18,24,.45);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.icon-btn:hover{
  border-color: rgba(36,227,233,.25);
}
.icon{
  width:16px;
  height:16px;
  opacity:.9;
  fill: rgba(215,231,241,.88);
}

/* Hero */
.hero{
  position:relative;
  padding: 34px 22px 14px;
}
.hero-panel{
  position:relative;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.20));
  border: 1px solid rgba(36,227,233,.08);
  overflow:hidden;
  min-height: 540px;
}
.hero-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 360px at 60% 38%, rgba(36,227,233,.22), transparent 55%),
    radial-gradient(760px 320px at 70% 35%, rgba(123,92,255,.18), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.20) 100%);
  pointer-events:none;
}

/* Decorative sci-fi “art” on the right (CSS-only) */
.hero-art{
  position:absolute;
  right:-120px;
  top:-40px;
  width: 640px;
  height: 440px;
  pointer-events:none;
  opacity:.95;
  filter: saturate(1.05) contrast(1.02);
}
.hero-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 75% 40%, rgba(36,227,233,.25), transparent 52%),
    radial-gradient(circle at 70% 48%, rgba(123,92,255,.18), transparent 56%),
    radial-gradient(circle at 64% 58%, rgba(36,227,233,.12), transparent 58%),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.14), transparent 42%),
    conic-gradient(from 210deg at 68% 52%, rgba(36,227,233,.0), rgba(36,227,233,.18), rgba(123,92,255,.16), rgba(36,227,233,.0));
  border-radius: 999px;
  transform: rotate(-8deg);
}
.hero-art::after{
  content:"";
  position:absolute;
  left: 140px;
  top: 70px;
  width: 250px;
  height: 250px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 35%, rgba(36,227,233,.35), rgba(36,227,233,.08) 44%, rgba(0,0,0,0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(0,0,0,0) 62%),
    radial-gradient(circle at 60% 55%, rgba(123,92,255,.22), rgba(0,0,0,0) 70%);
  box-shadow: 0 0 80px rgba(36,227,233,.10);
  transform: rotate(8deg);
}

.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  padding: 44px 38px 34px;
  z-index:1;
}
.hero h1{
  margin:0 0 10px;
  font-size: 44px;
  letter-spacing: .8px;
  color: rgba(36,227,233,.98);
  text-shadow: 0 0 22px rgba(36,227,233,.18);
}
.hero p{
  margin:0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(215,231,241,.78);
  max-width: 560px;
}
.cta{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  border: 1px solid rgba(36,227,233,.28);
  color: rgba(0,0,0,.88);
  background: linear-gradient(180deg, rgba(36,227,233,.95), rgba(0,203,210,.85));
  box-shadow: 0 14px 30px rgba(0,203,210,.18);
  cursor:pointer;
}
.btn:hover{
  filter: brightness(1.03);
  box-shadow: 0 18px 40px rgba(0,203,210,.22);
}
.btn.secondary{
  color: rgba(36,227,233,.92);
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(36,227,233,.35);
  box-shadow: none;
}

/* Section shell */
.section{
  padding: 34px 24px 44px;
}
.section-title{
  margin: 10px 4px 20px;
  font-size: 24px;
  letter-spacing: .6px;
  color: rgba(36,227,233,.95);
}

/* Cards grid like screenshot */
.grid{
  display:grid;
  gap: 18px;
}
.grid.games{
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid.games .card{
  min-height: 150px;
}
.card{
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(14,22,29,.92), rgba(10,16,21,.86));
  border: 1px solid rgba(155,177,191,.14);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
  position:relative;
}
.card:hover{
  border-color: rgba(36,227,233,.22);
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
  transform: translateY(-1px);
  transition: .18s ease;
}
.thumb{
  height: 165px;
  margin: 14px 14px 10px;
  border-radius: 12px;
  border: 1px solid rgba(155,177,191,.14);
  background:
    radial-gradient(circle at 35% 30%, rgba(36,227,233,.25), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(123,92,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(12,19,25,.7), rgba(6,10,14,.9));
  position:relative;
  overflow:hidden;
}
.thumb .tag{
  position:absolute;
  left: 8px;
  top: 8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(36,227,233,.18);
  color: rgba(215,231,241,.85);
  backdrop-filter: blur(6px);
}
.thumb .logo{
  position:absolute;
  right: 10px;
  bottom: 10px;
  font-weight:800;
  font-size: 14px;
  letter-spacing:.3px;
  color: rgba(215,231,241,.9);
  opacity:.85;
  text-shadow: 0 0 16px rgba(0,0,0,.55);
}
.card-body{
  padding: 2px 16px 16px;
}
.meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 2px 0 8px;
}
.name{
  font-size: 13px;
  color: rgba(215,231,241,.82);
}
.rating{
  font-size: 11px;
  color: rgba(155,177,191,.75);
  display:flex;
  align-items:center;
  gap: 4px;
}
.rating .star{
  width: 14px;
  height: 14px;
  fill: rgba(255,215,102,.92);
  filter: drop-shadow(0 0 10px rgba(255,215,102,.18));
}
.price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.price{
  font-weight:800;
  font-size: 14px;
  color: rgba(36,227,233,.95);
}
.buy{
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(36,227,233,.28);
  background: linear-gradient(180deg, rgba(36,227,233,.90), rgba(0,203,210,.78));
  color: rgba(0,0,0,.88);
  font-weight:700;
  font-size: 13px;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,203,210,.14);
}
.buy:hover{ filter: brightness(1.02); }

/* Features (why choose us) */
.features{
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.0));
  border-top: 1px solid rgba(36,227,233,.06);
  padding-top: 34px;
}
.features .grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.feature{
  padding: 24px 18px;
  text-align:center;
  min-height: 250px;
}
.feature .badge{
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  border-radius: 14px;
  border: 1px solid rgba(36,227,233,.18);
  background:
    radial-gradient(circle at 35% 30%, rgba(36,227,233,.22), transparent 60%),
    linear-gradient(180deg, rgba(10,16,21,.75), rgba(8,12,16,.85));
  display:grid;
  place-items:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.feature h3{
  margin: 0 0 6px;
  font-size: 14px;
  color: rgba(215,231,241,.90);
}
.feature p{
  margin:0;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(155,177,191,.75);
}
.feature .badge svg{
  width: 26px;
  height: 26px;
  fill: rgba(36,227,233,.92);
  filter: drop-shadow(0 0 14px rgba(36,227,233,.18));
}

/* Deals */
.deals .grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.deal-thumb{
  height: 120px;
}
.discount{
  position:absolute;
  right: 10px;
  top: 10px;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,71,87,.18);
  border: 1px solid rgba(255,71,87,.35);
  color: rgba(255,171,179,.95);
}
.deal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top: 8px;
  gap: 10px;
}
.tiny{
  font-size: 10px;
  color: rgba(155,177,191,.72);
}
.cta-mini{
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(36,227,233,.24);
  background: rgba(36,227,233,.10);
  color: rgba(36,227,233,.92);
  font-weight:700;
  font-size: 11px;
  cursor:pointer;
}
.cta-mini:hover{
  border-color: rgba(36,227,233,.36);
  background: rgba(36,227,233,.14);
}

/* Footer */
footer{
  padding: 22px 18px 18px;
  border-top: 1px solid rgba(155,177,191,.10);
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22));
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 18px;
  align-items:start;
}
.f-title{
  font-size: 12px;
  color: rgba(215,231,241,.88);
  margin: 0 0 8px;
}
.f-links{
  display:grid;
  gap: 6px;
  font-size: 11px;
  color: rgba(155,177,191,.76);
}
.newsletter{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 4px;
}
.input{
  flex:1;
  height: 30px;
  border-radius: 999px;
  padding: 0 12px;
  border: 1px solid rgba(155,177,191,.14);
  background: rgba(10,18,24,.35);
  color: rgba(215,231,241,.9);
  outline:none;
}
.input:focus{
  border-color: rgba(36,227,233,.28);
  box-shadow: 0 0 0 3px rgba(36,227,233,.06);
}
.send{
  width: 42px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(36,227,233,.26);
  background: rgba(36,227,233,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.send svg{ width: 16px; height:16px; fill: rgba(36,227,233,.92); }

.social{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.social a{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(155,177,191,.14);
  background: rgba(10,18,24,.35);
  display:grid;
  place-items:center;
}
.social a:hover{ border-color: rgba(36,227,233,.24); }
.social svg{ width: 15px; height:15px; fill: rgba(215,231,241,.78); }

.copyright{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(155,177,191,.10);
  font-size: 10px;
  color: rgba(155,177,191,.65);
  text-align:center;
}

/* Language dropdown */
.lang{
  position:relative;
}
.menu{
  position:absolute;
  right:0;
  top: 38px;
  min-width: 160px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10,18,24,.92);
  border: 1px solid rgba(155,177,191,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  display:none;
}
.menu.open{ display:block; }
.menu button{
  width:100%;
  text-align:left;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(215,231,241,.82);
  cursor:pointer;
  font-size: 12px;
}
.menu button:hover{
  background: rgba(36,227,233,.10);
  color: rgba(36,227,233,.92);
}

/* Responsive */
@media (max-width: 1060px){
  .grid.games{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  nav{ display:none; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-art{ opacity:.55; right:-260px; }
  .features .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deals .grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .grid.games{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Topup games full-width overrides */
.games-section{
  padding-left: 18px;
  padding-right: 18px;
}
.games-section .grid.games{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1200px){
  .games-section .grid.games{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 1060px){
  .games-section .grid.games{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .games-section .grid.games{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .games-section .grid.games{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px){
  .games-section .grid.games{ grid-template-columns: 1fr; }
}