:root{
  --ink:#08060F;
  --surface:#150F26;
  --surface-2:#1E1533;
  --line:#2E2247;
  --violet-deep:#5B1FD1;
  --violet:#8B3BFF;
  --violet-lit:#B57BFF;
  --paper:#F1EAFF;
  --paper-dim:#A594C4;
  --cash:#3ED598;
  --flag:#FFB020;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.block{font-family:'Archivo Black',Impact,sans-serif;font-weight:400;letter-spacing:-.02em;line-height:1.05}
a{color:var(--violet-lit);text-decoration-thickness:1px;text-underline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--violet-lit);outline-offset:3px}
img{max-width:100%}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(8,6,15,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:66px}
.logo{font-family:'Archivo Black',sans-serif;font-size:21px;letter-spacing:-.04em;color:var(--paper);text-decoration:none;white-space:nowrap}
.logo span{color:var(--violet-lit)}
nav.main{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
nav.main a{color:var(--paper-dim);text-decoration:none}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--paper)}
.btn{
  display:inline-block;background:var(--violet);color:#fff;font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 3px 0 var(--violet-deep);transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--violet-deep)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--violet-deep)}
.btn.lg{font-size:18px;padding:16px 30px}
.btn.ghost{background:transparent;color:var(--paper);border:1px solid var(--line);box-shadow:none}

/* ticker */
.ticker{border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden}
.ticker-inner{display:flex;gap:34px;padding:9px 0;font-size:13.5px;color:var(--paper-dim);white-space:nowrap;animation:slide 38s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-inner{animation:none;flex-wrap:wrap;white-space:normal}}
.ticker b{color:var(--cash);font-weight:700}

/* hero (home) */
.hero{padding:64px 0 72px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:-40% 40% 40% -20%;background:radial-gradient(closest-side,rgba(139,59,255,.22),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;position:relative}
.hero h1{font-size:clamp(40px,5.6vw,66px);margin:0 0 20px}
.lede{font-size:19px;color:var(--paper-dim);max-width:46ch;margin:0 0 28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:13.5px;color:var(--paper-dim);margin-top:18px;max-width:44ch}

/* article pages */
.page-head{padding:44px 0 30px;border-bottom:1px solid var(--line)}
.crumbs{font-size:13.5px;color:var(--paper-dim);margin:0 0 18px}
.crumbs a{color:var(--paper-dim);text-decoration:none}
.crumbs a:hover{color:var(--paper)}
.page-head h1{font-size:clamp(32px,4.4vw,50px);margin:0 0 16px;max-width:20ch}
.page-head .lede{margin-bottom:0;max-width:60ch}
.updated{font-size:13px;color:var(--paper-dim);margin-top:18px}
.byline{font-size:13.5px;color:var(--paper-dim);margin:20px 0 0;display:flex;
flex-wrap:wrap;gap:0 4px;align-items:center}
.byline a{color:var(--paper-dim)}
.byline a:hover{color:var(--paper)}
.byline .sep{margin:0 8px;opacity:.5}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 10px;font-size:12.5px;
color:var(--paper-dim);line-height:1}
.badge svg{color:var(--violet-lit);flex:0 0 auto}
.badge.score{border-color:var(--cash);color:var(--paper);background:rgba(62,213,152,.07)}
.badge.score svg{color:var(--cash)}

.seals{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 30px;padding-top:26px;
border-top:1px solid var(--line)}
.seals .seal{display:flex;flex-direction:column;gap:2px;background:var(--surface);
border:1px solid var(--line);border-radius:8px;padding:10px 15px;text-decoration:none;
min-width:0}
.seals .seal:hover{border-color:var(--violet)}
.seals .seal strong{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:13px;
color:var(--paper);letter-spacing:-.01em}
.seals .seal span{font-size:11.5px;color:var(--paper-dim)}
.seals .seal.age strong{color:var(--flag);font-size:15px}
.seals .seal.age{border-color:var(--flag)}

.author-box{display:flex;gap:20px;align-items:flex-start;background:var(--surface);
border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin:48px 0 0}
.author-box .avatar{flex:0 0 auto;width:54px;height:54px;border-radius:50%;
background:var(--violet-deep);color:#fff;display:flex;align-items:center;justify-content:center;
font-family:'Archivo Black',sans-serif;font-size:18px;letter-spacing:-.02em}
.author-box h4{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:17px;margin:0 0 8px}
.author-box h4 span{color:var(--paper-dim);font-family:Inter,sans-serif;font-weight:400;font-size:14px}
.author-box p{margin:0 0 10px;font-size:15px;color:var(--paper-dim);max-width:70ch}
.author-box .links{font-size:14px;margin:0}
.author-box .links .sep{margin:0 8px;opacity:.5;color:var(--paper-dim)}

.sources{border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:10px;
padding:22px 26px;margin:44px 0 0;background:var(--surface)}
.sources h3{font-size:17px;margin:0 0 8px}
.sources p{font-size:14px;color:var(--paper-dim);margin:0 0 14px;max-width:70ch}
.sources ol{margin:0;font-size:14.5px;color:var(--paper-dim)}
.sources li{margin-bottom:8px}

.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.trust-item{background:var(--surface);border:1px solid var(--line);border-radius:10px;
padding:20px 18px}
.trust-item strong{display:block;font-size:15.5px;margin-bottom:6px}
.trust-item span{display:block;font-size:14px;color:var(--paper-dim);line-height:1.5}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:48px 0 72px;align-items:start}
article h2{font-size:clamp(24px,2.8vw,32px);margin:44px 0 14px}
article h2:first-child{margin-top:0}
article h3{font-size:20px;margin:30px 0 10px}
article p{max-width:72ch;margin:0 0 16px}
article ul,article ol{max-width:70ch;color:var(--paper);padding-left:22px}
article li{margin-bottom:9px}
article table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
article th,article td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
article th{color:var(--paper-dim);font-weight:500;font-size:13.5px}
article tbody tr:hover{background:var(--surface)}
.sidebar{position:sticky;top:90px;display:grid;gap:18px}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.side-card h4{font-family:'Archivo Black',sans-serif;font-weight:400;font-size:16px;margin:0 0 12px}
.side-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
.side-card a{color:var(--paper-dim);text-decoration:none}
.side-card a:hover{color:var(--paper)}
.side-card .btn{width:100%;text-align:center;margin-top:6px}
.side-card p{font-size:14.5px;color:var(--paper-dim);margin:0 0 14px}

/* calculator */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.calc h2{font-size:20px;margin:0 0 4px}
.calc .sub{font-size:13.5px;color:var(--paper-dim);margin:0 0 22px}
.calc label{display:block;font-size:14px;color:var(--paper-dim);margin-bottom:8px}
.amount{font-family:'Archivo Black',sans-serif;font-size:38px;color:var(--paper);line-height:1;margin-bottom:16px}
input[type=range]{width:100%;accent-color:var(--violet);height:26px;cursor:pointer}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.readout div p{margin:0;font-size:13.5px;color:var(--paper-dim)}
.readout div strong{display:block;font-family:'Archivo Black',sans-serif;font-size:26px;line-height:1.2;margin-top:4px}
.tier-name{color:var(--violet-lit)}
.rake{color:var(--cash)}
.progress{margin-top:20px}
.track{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.fill{height:100%;background:var(--violet);border-radius:99px;transition:width .18s ease}
.progress p{font-size:13px;color:var(--paper-dim);margin:9px 0 0}
.calc .btn{margin-top:22px;width:100%;text-align:center}

/* sections */
section.band{padding:72px 0;border-top:1px solid var(--line)}
h2.sec{font-size:clamp(28px,3.4vw,38px);margin:0 0 12px}
.sec-lede{color:var(--paper-dim);max-width:62ch;margin:0 0 36px;font-size:17px}

/* callout */
.callout{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--flag);border-radius:10px;padding:24px 26px;margin:26px 0;max-width:76ch}
.callout .mark{font-size:26px;line-height:1.2}
.callout h3{font-size:19px;margin:0 0 8px}
.callout p{margin:0;color:var(--paper-dim);font-size:16px}
.callout.good{border-left-color:var(--cash)}
.callout.info{border-left-color:var(--violet)}

/* join band */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:34px 0 40px}
.perk{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 22px}
.perk strong{display:block;font-family:'Archivo Black',sans-serif;font-weight:400;font-size:34px;
line-height:1;color:var(--violet-lit);margin-bottom:12px;letter-spacing:-.02em}
.perk span{display:block;font-size:15px;color:var(--paper-dim);line-height:1.5}
.join-cta{display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:var(--surface-2);
border:1px solid var(--line);border-radius:14px;padding:28px 30px}
.join-cta .btn{flex:0 0 auto}
.join-cta p{margin:0;font-size:15px;color:var(--paper-dim);max-width:56ch;flex:1 1 300px}

/* ladder */
.ladder{display:grid;gap:0;margin-top:8px}
.rung{display:grid;grid-template-columns:52px 1fr auto;gap:20px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line)}
.rung:first-child{border-top:1px solid var(--line)}
.rung .n{font-family:'Archivo Black',sans-serif;font-size:15px;color:var(--violet-lit)}
.rung h3{font-size:19px;margin:0 0 3px}
.rung p{margin:0;font-size:14.5px;color:var(--paper-dim)}
.rung .val{font-family:'Archivo Black',sans-serif;font-size:18px;color:var(--cash);white-space:nowrap}

/* vip matrix */
.matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:22px 0 10px;
-webkit-overflow-scrolling:touch}
table.matrix{width:100%;border-collapse:collapse;font-size:13.5px;margin:0;min-width:900px}
table.matrix th,table.matrix td{padding:10px 8px;text-align:center;border-bottom:1px solid var(--line);
border-right:1px solid var(--line)}
table.matrix thead th{color:var(--paper);font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;background:var(--surface-2);
vertical-align:bottom;line-height:1.3}
table.matrix thead th span{display:block;font-family:Inter,sans-serif;font-size:11px;
color:var(--paper-dim);margin-top:4px;text-transform:none;letter-spacing:0}
table.matrix tbody th{text-align:left;font-weight:500;color:var(--paper);white-space:nowrap;
position:sticky;left:0;background:var(--ink);font-size:14px;min-width:190px}
table.matrix td.yes{color:var(--cash);font-size:15px}
table.matrix td.no{color:var(--line)}
table.matrix tbody tr:hover td{background:rgba(139,59,255,.06)}
table.matrix tbody tr:hover th{background:var(--surface)}
.matrix-note{font-size:13px;color:var(--paper-dim);margin:0 0 8px}

.benefit-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.chip{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;
padding:5px 12px;font-size:12.5px;color:var(--paper)}
.chip.off{color:var(--paper-dim)}

.rate-calc{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.rate-row{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--paper-dim)}
.rate-row input{width:80px;background:var(--surface-2);border:1px solid var(--line);
border-radius:6px;color:var(--paper);font:inherit;padding:8px 10px}
.rate-row strong{color:var(--cash);font-family:'Archivo Black',sans-serif;font-weight:400;
font-size:19px;margin-left:2px}
.rate-note{font-size:12.5px;color:var(--paper-dim);margin:12px 0 0;line-height:1.5}

/* grids */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.game{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 18px;text-decoration:none;color:var(--paper);display:block}
.game:hover{border-color:var(--violet);background:var(--surface-2)}
.game .emoji{font-size:24px;display:block;margin-bottom:10px}
.game strong{display:block;font-size:16px;margin-bottom:3px}
.game span.d{font-size:13.5px;color:var(--paper-dim)}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;text-decoration:none;display:block;color:var(--paper)}
.guide:hover{border-color:var(--violet)}
.guide strong{display:block;font-size:17px;margin-bottom:6px}
.guide p{margin:0;font-size:14.5px;color:var(--paper-dim);max-width:none}

/* geo */
.geo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.geo ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.geo li{background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:14.5px;margin:0}
.geo li.no{color:var(--paper-dim);text-decoration:line-through;text-decoration-color:var(--flag)}
.geo h3{font-size:18px;margin:0 0 14px}

/* faq */
details{border-bottom:1px solid var(--line);padding:20px 0;max-width:76ch}
details summary{cursor:pointer;font-size:18px;font-weight:700;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"+";color:var(--violet-lit);font-family:'Archivo Black',sans-serif;margin-right:12px}
details[open] summary:before{content:"\2013"}
details p{color:var(--paper-dim);margin:12px 0 0}

/* final cta */
.final{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:48px;text-align:center}
.final h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 14px}
.final p{color:var(--paper-dim);max-width:52ch;margin:0 auto 26px}

/* next links */
.next-links{border-top:1px solid var(--line);margin-top:52px;padding-top:28px}
.next-links h3{font-size:18px;margin:0 0 16px}
.next-links ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next-links li{margin:0}
.next-links a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--paper);font-size:15.5px}
.next-links a:hover{border-color:var(--violet)}

/* footer */
footer.site{border-top:1px solid var(--line);padding:52px 0 40px;font-size:14.5px}
.fcols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px 30px;margin-bottom:36px}
.fcols h4{font-size:14px;margin:0 0 14px;color:var(--paper)}
.fcols ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fcols a{color:var(--paper-dim);text-decoration:none}
.fcols a:hover{color:var(--paper)}
.legal{color:var(--paper-dim);font-size:13px;border-top:1px solid var(--line);padding-top:24px;max-width:88ch}
.legal .age{display:inline-block;border:1px solid var(--flag);color:var(--flag);border-radius:99px;padding:2px 10px;font-weight:700;margin-right:10px}

@media (max-width:980px){
  .fcols{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr;gap:40px}
  .sidebar{position:static}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-grid,.geo{grid-template-columns:1fr;gap:36px}
  .games,.perks,.trust-strip{grid-template-columns:repeat(2,1fr)}
  .author-box{flex-direction:column;gap:14px}
  .seals{gap:8px}
  .seals .seal{padding:8px 12px}
  .join-cta{padding:24px 22px}
  .guides{grid-template-columns:1fr}
  .next-links ul{grid-template-columns:1fr}
  nav.main{display:none}
  .final{padding:34px 22px}
}
@media (max-width:620px){
  .fcols{grid-template-columns:1fr}
}