/* NorthStarBets Casino — game-library satellite. Own layout: split hero, provider grid, no sidebar. */

:root{
  --navy-950:#040f1c;
  --navy-900:#081f38;
  --navy-800:#0e2f52;
  --ink:#f1f6f8;
  --ink-dim:#b6c7d4;
  --ink-faint:#7f95a6;
  --green:#22d67e;
  --green-soft:#7fe3a8;
  --gold:#e8b84b;
  --line:rgba(34,214,126,0.2);
  --card:rgba(255,255,255,0.04);
  --card-border:rgba(255,255,255,0.09);
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy-900);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--green-soft);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Topbar: simple, not sticky, centered brand */
.topbar{padding:16px 0;border-bottom:1px solid var(--line);background:var(--navy-950)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:28px;height:28px}
.brand-word{font-weight:800;font-size:1.05rem;letter-spacing:.2px}
.brand-word b{color:var(--green-soft)}
.topbar-tag{color:var(--gold);font-size:.8rem;font-weight:700;border:1px solid rgba(232,184,75,.4);padding:4px 10px;border-radius:999px}
.cta-mini{background:var(--green);color:#04160c;font-weight:800;padding:9px 16px;border-radius:10px;font-size:.9rem}
.cta-mini:hover{text-decoration:none;filter:brightness(1.08)}
.topbar-right{display:flex;align-items:center;gap:12px}

/* Hero split */
.hero-split{padding:52px 0 40px;border-bottom:1px solid var(--line)}
.hero-split-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero-eyebrow{color:var(--green-soft);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.hero-split h1{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.18;margin:0 0 14px}
.hero-split p.lede{color:var(--ink-dim);font-size:1.05rem;margin:0 0 20px;max-width:56ch}
.hero-panel{background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:22px}
.hero-panel-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:0 0 14px}
.hero-panel-num{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.09)}
.hero-panel-num:last-child{border-bottom:0}
.hero-panel-num .n{font-size:1.4rem;font-weight:800;color:var(--green-soft)}
.hero-panel-num .l{color:var(--ink-dim);font-size:.88rem}

/* Provider grid */
.section{padding:44px 0}
.section h2{font-size:1.5rem;margin:0 0 8px}
.section .sub{color:var(--ink-dim);margin:0 0 22px;max-width:64ch}
.provider-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.provider-chip{background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:14px 12px;text-align:center;font-weight:700;font-size:.9rem;color:var(--ink)}

/* Lobby breakdown cards */
.lobby-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.lobby-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:16px}
.lobby-card .num{font-size:1.6rem;font-weight:800;color:var(--green-soft)}
.lobby-card .lbl{color:var(--ink-dim);font-size:.85rem;margin-top:4px}

/* Feature rows */
.feature-row{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--card-border)}
.feature-row:first-of-type{border-top:0}
.feature-badge{width:40px;height:40px;border-radius:10px;background:rgba(34,214,126,.12);color:var(--green-soft);display:flex;align-items:center;justify-content:center;font-weight:800}
.feature-row h3{margin:0 0 6px;font-size:1.05rem}
.feature-row p{margin:0;color:var(--ink-dim)}

/* table wrap */
.table-scroll{overflow-x:auto;border:1px solid var(--card-border);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:420px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--card-border);font-size:.92rem}
th{color:var(--green-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
tr:last-child td{border-bottom:0}

/* faq */
.faq-item{border-top:1px solid var(--card-border);padding:16px 0}
.faq-item:first-child{border-top:0}
.faq-item h3{margin:0 0 6px;font-size:1.02rem}
.faq-item p{margin:0;color:var(--ink-dim)}

/* callout */
.callout{background:rgba(34,214,126,.07);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:28px 0}
.callout p{margin:0;color:var(--ink-dim)}
.callout strong{color:var(--ink)}

.btn{display:inline-block;background:var(--green);color:#04160c;font-weight:800;padding:12px 22px;border-radius:10px}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.btn-outline{border:1px solid var(--card-border);color:var(--ink);padding:11px 20px;border-radius:10px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.license-strip{background:var(--navy-950);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.license-strip .container{display:flex;gap:24px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-dim)}
.license-strip strong{color:var(--ink)}

footer.site-footer{background:var(--navy-950);border-top:1px solid var(--line);padding:34px 0 24px;margin-top:20px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.footer-links a{color:var(--ink-dim)}
.footer-legal{color:var(--ink-faint);font-size:.82rem;line-height:1.7;max-width:80ch}
.footer-legal .rg{margin-top:8px}

@media (max-width:820px){
  .hero-split-grid{grid-template-columns:1fr}
  .provider-grid{grid-template-columns:repeat(2,1fr)}
}