:root {
  --bg: #11141f;
  --bg-2: #171b28;
  --panel: rgba(28, 33, 48, 0.92);
  --panel-2: rgba(38, 44, 61, 0.82);
  --text: #f8f9ff;
  --muted: #aeb6c8;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255, 137, 0, .68);
  --red: #ef2f3e;
  --red-2: #ff8a00;
  --pink: #ff8a00;
  --violet: #4c5cff;
  --cyan: #3ea8ff;
  --gold: #ffcb45;
  --green: #23d18b;
  --shadow: 0 24px 70px rgba(0,0,0,.58);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { background: var(--bg); min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 72% 10%, rgba(255,138,0,.22), transparent 26%),
    radial-gradient(circle at 20% 18%, rgba(62,168,255,.15), transparent 21%),
    radial-gradient(circle at 50% 95%, rgba(255,138,0,.13), transparent 30%),
    linear-gradient(180deg, #121620 0%, #171b28 44%, #0d1018 100%);
  overflow-x: hidden;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .23;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.28) .7px, transparent 1.8px);
  background-size: 72px 72px, 72px 72px, 96px 96px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.page-glow { position: fixed; z-index: -1; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(80px); opacity: .36; pointer-events: none; }
.glow-red { top: -14rem; right: 2rem; background: #ef2f3e; }
.glow-violet { left: -16rem; bottom: -14rem; background: #1f2c54; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  min-height: 70px;
  padding: 0 64px;
  display: flex; align-items: center; gap: 36px; justify-content: space-between;
  background: rgba(19, 23, 34, .92);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 52px rgba(0,0,0,.3);
  backdrop-filter: blur(18px);
}
.logo {
  display: inline-flex; flex-direction: column; text-decoration: none; line-height: .82;
  font-weight: 950; letter-spacing: -.065em; text-transform: uppercase;
  text-shadow: 0 0 22px rgba(255,255,255,.16);
}
.logo span { font-size: clamp(30px, 2.7vw, 48px); color: #fff; }
.logo small {
  margin-left: 4px; width: max-content; padding: 2px 8px 3px;
  letter-spacing: .18em; font-weight: 950; font-size: 9px; line-height: 1;
  border-radius: 999px;
  color: #16030c;
  background: linear-gradient(90deg, var(--red), var(--gold));
  box-shadow: 0 0 20px rgba(239,47,62,.42);
}
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a {
  color: rgba(255,255,255,.72); text-decoration: none; font-size: 14px; font-weight: 800;
  transition: color .18s ease, text-shadow .18s ease;
}
.nav a:hover { color: #fff; text-shadow: 0 0 18px rgba(255,138,0,.65); }
.top-actions { display: flex; gap: 18px; align-items: center; }
.btn {
  border: 0; color: #fff; min-height: 44px; min-width: 120px; padding: 0 20px;
  border-radius: 10px; font: 850 15px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-icon { margin-right: 8px; }
.btn-login {
  background: rgba(13, 11, 32, .76); border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(76,92,255,.1);
}
.btn-login:hover { border-color: rgba(62,168,255,.52); box-shadow: 0 0 28px rgba(62,168,255,.14); }
.btn-register {
  background: linear-gradient(135deg, #ffb43a 0%, #ff8a00 48%, #d85a00 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 42px rgba(255,138,0,.28);
}
.btn-register:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 54px rgba(255,138,0,.42); }

.page { position: relative; z-index: 2; width: min(100% - 72px, 1860px); margin: 22px auto 34px; }
.hero {
  position: relative; min-height: 304px; padding: 22px 28px;
  display: grid; grid-template-columns: 530px minmax(410px, 1fr) 520px; gap: 24px; align-items: center;
  overflow: hidden; border-radius: 0;
  background:
    radial-gradient(circle at 87% 43%, rgba(239,47,62,.28), transparent 23%),
    radial-gradient(circle at 61% 54%, rgba(62,168,255,.17), transparent 22%),
    radial-gradient(circle at 17% 31%, rgba(76,92,255,.18), transparent 24%),
    linear-gradient(90deg, rgba(22,26,38,.98), rgba(32,29,38,.9) 50%, rgba(17,20,30,.98));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.hero::before, .hero::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,47,62,.9), rgba(62,168,255,.62), transparent); opacity: .42;
}
.hero::before { top: 0; } .hero::after { bottom: 0; }
.hero-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-lines::before {
  content: ""; position: absolute; left: 26%; right: 20%; bottom: 0; height: 150px;
  background: radial-gradient(ellipse at center bottom, rgba(255,138,0,.22), transparent 67%), linear-gradient(90deg, transparent, rgba(239,47,62,.28), rgba(62,168,255,.22), transparent);
  filter: blur(7px);
}
.hero-lines span {
  position: absolute; bottom: 0; width: 2px; height: 190px; border-radius: 3px;
  background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,138,0,.5), transparent);
  box-shadow: 0 0 16px rgba(255,138,0,.8), 0 0 52px rgba(255,138,0,.38); opacity: .75;
}
.hero-lines span:nth-child(1){left:40%;height:135px}.hero-lines span:nth-child(2){left:43%;height:225px;background:linear-gradient(to top,rgba(255,255,255,.9),rgba(76,92,255,.58),transparent)}.hero-lines span:nth-child(3){left:66%;height:205px;background:linear-gradient(to top,rgba(255,255,255,.86),rgba(62,168,255,.56),transparent);box-shadow:0 0 16px rgba(62,168,255,.7)}.hero-lines span:nth-child(4){left:69%;height:230px;background:linear-gradient(to top,rgba(255,255,255,.86),rgba(62,168,255,.44),transparent);box-shadow:0 0 18px rgba(62,168,255,.7)}.hero-lines span:nth-child(5){left:72%;height:170px;background:linear-gradient(to top,rgba(255,255,255,.8),rgba(62,168,255,.34),transparent);box-shadow:0 0 16px rgba(62,168,255,.5)}.hero-lines span:nth-child(6){left:34%;height:120px}

.promo-stack { position: relative; z-index: 2; display: grid; gap: 12px; max-width: 530px; }
.promo-card {
  position: relative; min-height: 126px; display: grid; grid-template-columns: 185px 1fr; align-items: center;
  overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(35,40,57,.94), rgba(18,22,34,.88)), radial-gradient(circle at 17% 55%, rgba(255,138,0,.24), transparent 42%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.1);
}
.promo-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(125deg, #ff8a00, #ffcb45, rgba(239,47,62,.5), rgba(62,168,255,.38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.promo-card::after {
  content: ""; position: absolute; inset: -52% -26% auto auto; width: 240px; height: 170px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 60%); transform: rotate(20deg);
}
.promo-copy { position: relative; z-index: 2; padding-right: 12px; }
.promo-copy strong { display: block; margin-bottom: 7px; color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.promo-copy h2 { margin: 0; color: #fff; font-weight: 950; font-size: clamp(22px, 1.55vw, 31px); line-height: 1.13; letter-spacing: -.035em; }
.promo-copy h2 span { color: #ff9d1a; text-shadow: 0 0 22px rgba(239,47,62,.62); }
.promo-copy p { margin: 8px 0 0; color: rgba(255,255,255,.72); font-size: 15px; }
.promo-art { position: relative; height: 100%; min-height: 122px; }
.vox-chip,.chip,.floating-chip {
  position:absolute;display:grid;place-items:center;border-radius:50%;color:#fff;font-weight:950;letter-spacing:-.04em;
  background: radial-gradient(circle at 50% 45%, #171226 0 29%, transparent 30%), conic-gradient(from 8deg,#ef2f3e,#ff8a00,#5567ff,#3ea8ff,#ef2f3e);
  box-shadow:0 0 24px rgba(255,138,0,.5), inset 0 0 14px rgba(0,0,0,.6);
}
.chip-xl{width:88px;height:88px;left:54px;top:19px;z-index:3;font-size:18px}.chip{width:36px;height:36px}.chip-a{left:31px;top:34px}.chip-b{left:121px;top:75px}.gem{position:absolute;width:30px;height:30px;background:linear-gradient(135deg,#fff,#3ea8ff 38%,#5567ff);clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);filter:drop-shadow(0 0 15px rgba(62,168,255,.5))}.gem-a{left:25px;top:83px}.gift{position:absolute;left:22px;top:59px;width:76px;height:49px;border-radius:10px;transform:rotate(-15deg);background:linear-gradient(135deg,#ef2f3e,#ff8a00 50%,#ffcb45);box-shadow:0 0 26px rgba(255,138,0,.42)}.gift:before,.gift:after{content:"";position:absolute;background:rgba(255,255,255,.75);border-radius:3px}.gift:before{width:12px;inset:0 auto 0 32px}.gift:after{height:10px;inset:19px 0 auto}
.wheel{position:absolute;left:44px;top:28px;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#14091f 0 22%,#ef2f3e 23% 28%,transparent 29%),conic-gradient(#ef2f3e 0 15deg,#2d123e 15deg 30deg,#ffcb45 30deg 45deg,#2d123e 45deg 60deg,#5567ff 60deg 75deg,#2d123e 75deg 90deg,#3ea8ff 90deg 105deg,#2d123e 105deg 120deg,#ef2f3e 120deg 135deg,#2d123e 135deg 360deg);box-shadow:0 0 28px rgba(255,138,0,.45)}.card{position:absolute;width:40px;height:56px;border-radius:7px;background:#fff;color:#ef2f3e;font-weight:950;display:grid;place-items:start center;padding-top:6px;box-shadow:0 0 20px rgba(255,255,255,.16)}.card-one{left:106px;top:50px;transform:rotate(14deg)}.card-two{left:132px;top:39px;transform:rotate(-8deg);color:#111}.coin{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff5b7,#ffcb45 50%,#9f5d0a 82%);box-shadow:0 0 20px rgba(255,203,69,.5)}.coin-a{left:25px;top:31px;width:32px;height:32px}

.hero-title { position: relative; z-index: 2; text-align: center; justify-self: center; min-width: 420px; }
.eyebrow { display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:6px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.74);font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase; }
.hero-title h1 { margin: 0; font-size: clamp(43px, 4.55vw, 80px); line-height: .98; letter-spacing: -.065em; font-weight: 950; background: linear-gradient(180deg, #ffffff 0%, #ffcb45 46%, #ff8a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 34px rgba(255,138,0,.22); }
.hero-title h1 span { background: linear-gradient(180deg,#ffffff 0%,#ffdf86 56%,#ff8a00 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-cta { display: flex; gap: 12px; justify-content: center; margin-top: 22px; }
.main-cta,.ghost-cta { min-height: 42px; display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border-radius:10px;text-decoration:none;font-weight:900;font-size:14px; }
.main-cta { background: linear-gradient(135deg, #ffb43a, #ff8a00 58%, #d85a00); box-shadow:0 14px 34px rgba(255,138,0,.28); }
.ghost-cta { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.8); }

.jackpot-scene { position: relative; z-index: 2; min-height: 232px; justify-self: stretch; }
.jackpot-machine { position:absolute;right:48px;top:62px;width:310px;height:112px;perspective:600px; }
.jackpot-reels { position:relative;height:100%;border-radius:30px 46px 46px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;padding:0 22px;background:linear-gradient(90deg,#2a0c24,#441138 54%,#150817),radial-gradient(circle at 50% 50%,rgba(255,138,0,.46),transparent 62%);border:2px solid rgba(255,177,66,.5);box-shadow:inset 0 -16px 42px rgba(0,0,0,.5),0 0 48px rgba(255,138,0,.38);transform:rotate(-7deg) skewX(-5deg); }
.jackpot-reels span { display:grid;place-items:center;height:84px;border-radius:19px;font-size:72px;font-weight:950;line-height:1;color:#ff8a00;text-shadow:0 0 10px rgba(239,47,62,.82),0 0 26px rgba(255,138,0,.48);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12); }
.jackpot-base { position:absolute;left:14px;right:50px;bottom:-38px;height:23px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,138,0,.36),transparent 70%);filter:blur(6px); }
.lever { position:absolute;right:-30px;top:-45px;width:18px;height:114px;border-radius:999px;background:linear-gradient(90deg,#ffd179,#531126 58%,#100613);transform:rotate(12deg);box-shadow:0 0 18px rgba(255,138,0,.4); }
.lever i { position:absolute;left:50%;top:-34px;width:54px;height:54px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 34% 24%,#fff,#ff8a00 36%,#8a3c00 82%);box-shadow:0 0 35px rgba(255,138,0,.76); }
.floating-chip { width:66px;height:66px;font-size:13px;transform:rotateX(58deg) rotateZ(-18deg);opacity:.9; }
.fc-1{right:318px;top:26px}.fc-2{right:218px;top:20px}.fc-3{right:16px;bottom:40px}.orbit{position:absolute;border-radius:50%;border:1px solid rgba(62,168,255,.18);filter:blur(.1px)}.orbit-one{right:87px;top:23px;width:310px;height:110px;transform:rotate(-12deg)}.orbit-two{right:38px;bottom:15px;width:260px;height:68px;transform:rotate(9deg);border-color:rgba(255,138,0,.2)}

.text-card,.info-table,.quick-stats,.feature-grid { width: calc(100% - 28px); margin: 14px auto 0; }
.text-card,.info-table { border-radius: 12px; background: linear-gradient(180deg, rgba(28,33,48,.9), rgba(18,22,34,.92)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 18px 55px rgba(0,0,0,.22); }
.text-card { padding: 18px 22px; }
.text-card p { margin:0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.58;letter-spacing:-.01em; }
.text-card p+p { margin-top: 16px; }
.quick-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.quick-stats article { min-height:92px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;box-shadow:0 16px 40px rgba(0,0,0,.18); }
.quick-stats span { font-size: clamp(24px,2vw,36px); font-weight:950; letter-spacing:-.055em; background:linear-gradient(180deg,#fff,#ffb23a 70%); -webkit-background-clip:text;background-clip:text;color:transparent; }
.quick-stats small { color: rgba(255,255,255,.64); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.info-table { overflow:hidden; margin-bottom: 18px; }
.table-row { display:grid; grid-template-columns:420px 1fr; min-height:31px; border-top:1px solid rgba(255,255,255,.105); }
.table-row:first-child { border-top:0; }
.table-row:nth-child(odd) { background:rgba(255,255,255,.015); }
.table-row:hover { background: rgba(255,138,0,.06); }
.table-label,.table-value { display:flex; align-items:center; min-height:32px; padding:7px 18px; font-size:15px; line-height:1.25; }
.table-label { gap:14px;color:#ffb43a;font-weight:900;background:linear-gradient(90deg,rgba(255,138,0,.14),rgba(255,203,69,.06));border-right:1px solid rgba(255,255,255,.11);box-shadow:inset 2px 0 0 rgba(255,138,0,.85); }
.table-label span { width:22px;display:inline-grid;place-items:center;color:#ffe2a3;text-shadow:0 0 12px rgba(255,138,0,.62);font-size:18px; }
.table-value { color:rgba(255,255,255,.84); font-weight:520; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom: 28px; }
.feature-grid article { border-radius:14px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 46px rgba(0,0,0,.2); }
.feature-icon { display:grid;place-items:center;width:48px;height:48px;border-radius:13px;margin-bottom:14px;background:linear-gradient(135deg,rgba(255,138,0,.3),rgba(239,47,62,.18));font-size:24px; }
.feature-grid h3 { margin:0 0 8px;font-size:20px;letter-spacing:-.03em; }
.feature-grid p { margin:0;color:rgba(255,255,255,.7);line-height:1.5;font-size:14px; }

@media (max-width: 1460px) {
  .topbar{padding:0 32px}.page{width:min(100% - 32px,1280px)}.nav{display:none}.hero{grid-template-columns:minmax(380px,500px) 1fr;grid-auto-rows:auto}.jackpot-scene{grid-column:1/-1;height:180px;min-height:180px}.jackpot-machine{right:90px;top:36px}.hero-title{justify-self:start;min-width:0;text-align:left}.hero-cta{justify-content:flex-start}
}
@media (max-width: 920px) {
  .topbar{min-height:70px;padding:14px 18px;gap:16px;flex-wrap:wrap}.top-actions{gap:10px;margin-left:auto}.btn{min-width:auto;min-height:40px;padding:0 14px;font-size:14px}.page{width:min(100% - 22px,700px);margin-top:14px}.hero{grid-template-columns:1fr;padding:18px 14px 22px}.promo-stack{max-width:none}.hero-title{text-align:left}.hero-cta{justify-content:flex-start}.jackpot-scene{min-height:200px;height:auto}.jackpot-machine{left:24px;right:auto;transform:scale(.86);transform-origin:left top}.floating-chip,.orbit{display:none}.text-card,.info-table,.quick-stats,.feature-grid{width:100%}.quick-stats{grid-template-columns:repeat(2,1fr)}.table-row{grid-template-columns:1fr}.table-label{border-right:0}.feature-grid{grid-template-columns:1fr}
}
@media (max-width: 560px) {
  .logo span{font-size:30px}.logo small{font-size:8px}.btn-icon{display:none}.promo-card{grid-template-columns:118px 1fr;min-height:118px}.chip-xl{width:58px;height:58px;left:33px;top:29px;font-size:12px}.gift{width:50px;height:34px;left:20px;top:68px}.chip-a,.chip-b,.gem-a{display:none}.wheel{width:58px;height:58px;left:28px;top:32px}.card{transform:scale(.76)}.card-one{left:70px;top:58px}.card-two{left:88px;top:49px}.promo-copy h2{font-size:19px}.promo-copy p{font-size:13px}.promo-copy strong{font-size:10px}.hero-title h1{font-size:42px}.eyebrow{font-size:10px}.jackpot-machine{transform:scale(.7)}.quick-stats{grid-template-columns:1fr 1fr;gap:10px}.quick-stats article{min-height:78px}.text-card p,.table-label,.table-value{font-size:14px}.top-actions{width:100%;justify-content:space-between}.btn{flex:1}
}


/* VOX palette refresh: dark slate interface + orange CTA accents */
.logo span { color: #fff; }
.logo span::first-letter { color: #fff; }
.logo small {
  color: #171b28;
  background: linear-gradient(90deg, #ffffff 0%, #ffcb45 42%, #ff8a00 100%);
  box-shadow: 0 0 22px rgba(255,138,0,.36);
}
.btn-register,
.main-cta {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.btn-login:hover {
  border-color: rgba(255,138,0,.5);
  box-shadow: 0 0 28px rgba(255,138,0,.16);
}
.hero::before,
.hero::after {
  background: linear-gradient(90deg, transparent, rgba(255,138,0,.85), rgba(239,47,62,.52), transparent);
}
.eyebrow {
  border-color: rgba(255,138,0,.2);
  background: rgba(255,138,0,.065);
  color: rgba(255,230,190,.86);
}
.promo-copy strong { color: rgba(255,203,69,.86); }
.promo-copy h2 span { color: #ffb43a; text-shadow: 0 0 20px rgba(255,138,0,.48); }
.ghost-cta:hover,
.btn-login:hover,
.nav a:hover { color: #ffcb45; }
.info-table { border-color: rgba(255,138,0,.22); }
.table-row:hover { background: rgba(255,138,0,.065); }
.jackpot-reels span { color: #ff9a1f; text-shadow:0 0 10px rgba(255,138,0,.8),0 0 26px rgba(255,203,69,.34); }