:root{
  --bg:#07111f; --bg2:#0b1630; --bg3:#0c1224;
  --card:#101a31; --line:rgba(255,255,255,.10);
  --text:#eef4ff; --muted:#a7b7d7;
  --blue:#00aeef; --blue2:#4ecbff; --violet:#8b5cf6; --green:#23d3a4;
  --radius:22px; --max:1240px; --shadow:0 22px 60px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(0,174,239,.16), transparent 24%),
    radial-gradient(circle at 100% 12%, rgba(139,92,246,.18), transparent 28%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg3) 100%);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 28px)); margin:0 auto}
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background:rgba(7,17,31,.78);
  border-bottom:1px solid var(--line);
}
.nav{
  min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.08em;
}
.brand img{width:42px; height:42px; object-fit:contain; border-radius:50%}
.nav-links{display:flex; gap:16px; flex-wrap:wrap}
.nav-links a{color:var(--muted); font-size:14px}
.nav-links a:hover{color:#fff}
.client-btn{
  padding:11px 16px; border-radius:14px; font-weight:700;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#04101d;
  box-shadow:0 10px 26px rgba(0,174,239,.20)
}
.hero{
  position:relative; overflow:hidden; padding:92px 0 62px;
}
.hero::after{
  content:""; position:absolute; inset:auto -8% 0 auto; width:420px; height:420px;
  background:radial-gradient(circle, rgba(0,174,239,.24), transparent 65%);
  filter:blur(18px); pointer-events:none; animation:float 9s ease-in-out infinite;
}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:24px; align-items:center}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:rgba(0,174,239,.08); border:1px solid rgba(0,174,239,.24);
  color:#bcefff; font-size:13px
}
h1{
  font-size:clamp(40px,7vw,68px); line-height:1.02; margin:16px 0 14px; letter-spacing:-.04em
}
.lead{font-size:18px; color:var(--muted); max-width:800px}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:14px; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.04)}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#04101d;
  box-shadow:0 14px 36px rgba(0,174,239,.18);
}
.btn-secondary{
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:#fff;
}
section{padding:64px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px}
.section-head h2{margin:0; font-size:34px}
.section-head p{margin:0; color:var(--muted); max-width:760px}
.card,.panel-card,.pricing-card,.mini-card,.search-wrap,.table-wrap,.notice{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.card,.pricing-card,.mini-card{padding:24px}
.card:hover,.pricing-card:hover,.mini-card:hover{transform:translateY(-4px); transition:.2s ease}
.grid-2{display:grid; grid-template-columns:1.08fr .92fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.stat{
  padding:18px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)
}
.stat strong{display:block; font-size:28px}
.stat span{color:var(--muted); font-size:14px}
.icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(0,174,239,.22), rgba(139,92,246,.18));
  font-size:22px; margin-bottom:16px
}
.hero-points,.check-list{list-style:none; padding:0; margin:0}
.hero-points li,.check-list li{position:relative; padding-left:24px; margin:11px 0; color:var(--muted)}
.hero-points li::before,.check-list li::before{content:"✓"; position:absolute; left:0; top:0; color:#88f0d9; font-weight:800}
.search-wrap{padding:14px; position:sticky; top:90px; z-index:10; margin-bottom:16px}
.search{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:#081325; color:#fff; outline:none
}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.filter-btn{
  border:1px solid var(--line); background:#0c1730; color:#e2edff;
  padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer
}
.filter-btn.active{background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#04101d}
.featured-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px}
.game-card{
  overflow:hidden; border-radius:24px; border:1px solid var(--line);
  background:linear-gradient(180deg,#101a31,#091325); box-shadow:var(--shadow)
}
.game-cover{aspect-ratio:16/8; width:100%; object-fit:cover}
.game-content{padding:18px}
.game-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#d8e8ff; font-size:12px
}
.price-line{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px}
.price{font-size:30px; font-weight:800}
.price small{font-size:14px; color:var(--muted); font-weight:500}
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse; min-width:980px}
th,td{padding:14px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left}
th{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#b7c7e8}
td{font-size:14px}
.pricing-card .topline{font-size:13px; color:#9deeff; text-transform:uppercase; letter-spacing:.1em}
.pricing-card .big{font-size:46px; font-weight:800; margin:10px 0}
.pricing-card .big small{font-size:14px; color:var(--muted)}
.badge{
  display:inline-flex; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(35,211,164,.12); color:#aef5e2; border:1px solid rgba(35,211,164,.34)
}
.notice{padding:16px; color:#cdefff}
.muted{color:var(--muted)}
.small{font-size:13px}
.footer{padding:30px 0 44px; border-top:1px solid var(--line); color:var(--muted); margin-top:42px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.input, textarea{
  width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:#081325; color:#fff; outline:none
}
textarea{min-height:140px; resize:vertical; margin-top:12px}
.logo-demo{display:flex; align-items:center; justify-content:center; min-height:360px}
.logo-demo img{max-width:100%; max-height:260px; object-fit:contain; filter:drop-shadow(0 12px 32px rgba(0,0,0,.28))}
.panel-shot{
  min-height:360px; border-radius:18px; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(0,174,239,.12), rgba(139,92,246,.12)),
    #091324;
  border:1px solid rgba(255,255,255,.08)
}
.panel-top{display:flex; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08)}
.dot{width:10px; height:10px; border-radius:50%; background:#57c8ff}
.panel-body{padding:18px}
.dash-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:14px}
.dash-main,.dash-side,.dash-stat{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px}
.dash-main{padding:18px; min-height:240px}
.dash-side{padding:14px}
.wave{
  height:110px; border-radius:12px; margin-top:12px;
  background:
    linear-gradient(180deg, rgba(0,174,239,.14), rgba(0,174,239,.02)),
    repeating-linear-gradient(90deg, rgba(78,203,255,.68) 0 6px, transparent 6px 16px);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  animation:pulse 3s ease-in-out infinite
}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.dash-stat{padding:12px}
.dash-stat strong{font-size:22px}
.meter{height:10px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden}
.meter span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--green))}
@keyframes float{50%{transform:translateY(-18px)}}
@keyframes pulse{50%{opacity:.72}}
@media (max-width: 980px){
  .hero-grid,.grid-2,.grid-3,.grid-4,.featured-grid,.form-grid,.dash-grid{grid-template-columns:1fr}
  .stats,.stats-row{grid-template-columns:1fr}
  .nav{flex-direction:column; align-items:flex-start; padding:14px 0}
  .search-wrap{top:138px}
}
@media (max-width: 640px){
  h1{font-size:38px}
  .section-head h2{font-size:28px}
  .hero{padding:76px 0 52px}
  .container{width:min(var(--max), calc(100% - 24px))}
}