/* NJ Sportsbook — Y2K Chrome + Neon Glassmorphism */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* ── Reset & base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:#e8ffe8;
  background:#172617;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── CSS custom properties ── */
:root{
  --green:#69ff69;
  --cyan:#00ffff;
  --ink:#172617;
  --ink2:#1e3a1e;
  --ink3:#253825;
  --glass:rgba(105,255,105,0.06);
  --glass-border:rgba(105,255,105,0.2);
  --glass-hover:rgba(0,255,255,0.1);
  --text:#e8ffe8;
  --text-muted:#8ab58a;
  --radius:10px;
  --shadow-neon:0 0 16px rgba(105,255,105,0.35),0 0 32px rgba(0,255,255,0.15);
  --shadow-card:0 4px 24px rgba(0,0,0,0.45);
  --max-content:72rem;
  --header-h:68px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:3px}

/* ── Site wrap ── */
.site-wrap{display:flex;flex-direction:column;min-height:100vh}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-header{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:200;
  background:linear-gradient(180deg,rgba(23,38,23,0.92) 0%,rgba(23,38,23,0.98) 100%);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--glass-border);
  height:var(--header-h);
}
.header-inner{
  max-width:var(--max-content);
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0 1rem;
}

/* Brand mark */
.brand-mark{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
}
.brand-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:var(--ink);
  font-weight:700;
  font-size:0.8rem;
  border-radius:8px;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  box-shadow:var(--shadow-neon);
}

/* Nav */
.main-nav{
  flex:1;
  overflow:hidden;
}
.main-nav p{
  display:flex;
  flex-wrap:nowrap;
  gap:0.25rem;
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.main-nav p::-webkit-scrollbar{display:none}
.main-nav p a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:500;
  padding:0.55rem 0.65rem;
  border-radius:6px;
  white-space:nowrap;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color 0.2s,background 0.2s;
}
.main-nav p a:hover,
.main-nav p a[aria-current="page"]{
  color:var(--green);
  background:var(--glass);
}

/* Header CTA buttons */
.header-ctas{
  display:flex;
  gap:0.4rem;
  flex-shrink:0;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 1.1rem;
  border-radius:8px;
  font-size:0.8rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:filter 0.2s,transform 0.15s;
  letter-spacing:0.02em;
}
.cta:active{transform:scale(0.97)}
.cta-signup{
  background:linear-gradient(135deg,var(--green) 0%,var(--cyan) 100%);
  color:var(--ink);
  box-shadow:0 0 12px rgba(105,255,105,0.5);
}
.cta-signup:hover{filter:brightness(1.12)}
.cta-login{
  background:transparent;
  color:var(--cyan);
  border:1.5px solid var(--cyan);
  box-shadow:0 0 8px rgba(0,255,255,0.25);
}
.cta-login:hover{background:rgba(0,255,255,0.08)}

/* Nav toggle (hidden on desktop) */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;height:44px;
  background:transparent;
  border:1.5px solid var(--glass-border);
  border-radius:8px;
  cursor:pointer;
  flex-shrink:0;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:20px;height:2px;
  background:var(--green);
  border-radius:2px;
  transition:transform 0.25s,opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Page offset for fixed bottom bar */
body{padding-bottom:var(--header-h)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero,.page-hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#0a1a0a 0%,#172617 40%,#0d2020 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3rem 1.5rem 5rem;
}
.hero-home{
  min-height:100vh;
  background:linear-gradient(135deg,#0a1a0a 0%,#172617 50%,#0a2020 100%);
}
.hero-home::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%,rgba(105,255,105,0.12) 0%,transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 70%,rgba(0,255,255,0.10) 0%,transparent 70%);
  pointer-events:none;
}
/* Sparkle decorations */
.hero-home::after{
  content:'✦ ✦ ✦';
  position:absolute;
  top:1.5rem;right:2rem;
  color:var(--green);
  font-size:0.7rem;
  letter-spacing:0.8rem;
  opacity:0.45;
  filter:drop-shadow(0 0 4px var(--green));
}
.page-hero--ranking,
.page-hero--compare,
.page-hero--review,
.page-hero--data,
.page-hero--inner{
  min-height:38vh;
  background:linear-gradient(135deg,#0e1e0e 0%,#172617 60%,#0a1e1e 100%);
  padding:4rem 1.5rem 5rem;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:52rem;
  margin:0 auto;
  width:100%;
}
.hero-eyebrow{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:1.2rem;
  filter:drop-shadow(0 0 6px var(--cyan));
}
.hero-h1{
  font-size:clamp(2.2rem,6vw,5rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#ffffff 0%,var(--green) 45%,var(--cyan) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1.5rem;
  filter:drop-shadow(0 0 18px rgba(105,255,105,0.3));
}
.page-hero h1{
  font-size:clamp(1.6rem,4vw,3rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#ffffff 0%,var(--green) 55%,var(--cyan) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1rem;
}
.hero-sub{
  font-size:1.1rem;
  color:var(--text-muted);
  max-width:38rem;
  margin:0 auto 2rem;
  line-height:1.7;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:0 2rem;
  border-radius:10px;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:var(--ink);
  box-shadow:0 0 24px rgba(105,255,105,0.55),0 4px 16px rgba(0,0,0,0.4);
  letter-spacing:0.03em;
  transition:filter 0.2s,transform 0.15s;
}
.hero-cta:hover{filter:brightness(1.1);transform:translateY(-2px)}
.hero-cta:active{transform:scale(0.97)}

/* Slanted divider */
.hero-slant{
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:72px;
  background:var(--ink);
  clip-path:polygon(0 100%,100% 100%,100% 0);
  z-index:3;
}

/* Byline */
.byline{
  font-size:0.82rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:0.35rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:0.75rem;
}
.byline strong{color:var(--green)}
.byline time{color:var(--cyan)}

/* Stage pill */
.stage-pill{
  display:inline-block;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:0.2em 0.75em;
  border-radius:50px;
  margin-bottom:0.75rem;
}
.stage-awareness{background:rgba(105,255,105,0.15);color:var(--green);border:1px solid rgba(105,255,105,0.3)}
.stage-consideration{background:rgba(0,255,255,0.12);color:var(--cyan);border:1px solid rgba(0,255,255,0.3)}
.stage-decision{background:rgba(255,180,0,0.12);color:#ffd060;border:1px solid rgba(255,180,0,0.3)}

/* Compare VS badge */
.compare-vs-badge{
  display:inline-block;
  font-size:1.6rem;
  font-weight:700;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:0.15em;
  margin-bottom:0.5rem;
  filter:drop-shadow(0 0 10px rgba(105,255,105,0.4));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAIN LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-main{
  flex:1;
  background:var(--ink);
  padding:3rem 1.5rem 4rem;
}
.page-article{max-width:var(--max-content);margin:0 auto}
.content-section{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:2.5rem;
  align-items:start;
}
.content-col{min-width:0}

/* Page content (injected HTML) */
.page-content{font-size:1rem;line-height:1.72;color:var(--text)}
.page-content h2{
  font-size:1.45rem;
  font-weight:700;
  color:var(--green);
  margin:2.5rem 0 0.85rem;
  line-height:1.25;
}
.page-content h3{
  font-size:1.18rem;
  font-weight:700;
  color:var(--cyan);
  margin:2rem 0 0.65rem;
}
.page-content p{margin-bottom:1.1rem}
.page-content a{
  color:var(--cyan);
  text-decoration:underline;
  text-underline-offset:3px;
}
.page-content a:hover{color:var(--green)}
.page-content ul,
.page-content ol{padding-left:1.4rem;margin-bottom:1.1rem}
.page-content li{margin-bottom:0.4rem}
.page-content table{
  width:100%;border-collapse:collapse;
  margin:1.5rem 0;font-size:0.92rem;
}
.page-content th{
  background:var(--ink3);
  color:var(--green);
  padding:0.65rem 1rem;
  text-align:left;
  font-weight:700;
  border-bottom:2px solid var(--glass-border);
}
.page-content td{
  padding:0.65rem 1rem;
  border-bottom:1px solid var(--glass-border);
  vertical-align:top;
}
.page-content tr:nth-child(even) td{background:rgba(105,255,105,0.03)}
.page-content blockquote{
  border-left:3px solid var(--green);
  padding:0.75rem 1.25rem;
  margin:1.5rem 0;
  background:var(--glass);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text-muted);
  font-style:italic;
}

/* Heading decoration — h2 > span, h3 > span */
.page-content h2 > span,
.page-content h3 > span,
.aside-inner h2 > span,
.aside-inner h3 > span,
.rank-quick h2 > span,
.child-table-wrap h2 > span,
.author-block h2 > span{
  position:relative;
  display:inline;
}
.page-content h2 > span::after,
.aside-inner h2 > span::after{
  content:'';
  position:absolute;
  bottom:-3px;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,var(--green),var(--cyan));
  border-radius:2px;
}

/* ── Aside ── */
.page-aside{
  position:sticky;
  top:1.5rem;
}
.aside-inner{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:1.25rem;
  backdrop-filter:blur(8px);
}
.aside-inner h2{
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:0.75rem;
  margin-top:1.25rem;
}
.aside-inner h2:first-child{margin-top:0}
.aside-links{list-style:none;padding:0;margin-bottom:1rem}
.aside-links li{border-bottom:1px solid rgba(105,255,105,0.08)}
.aside-links li:last-child{border-bottom:none}
.aside-links a{
  display:block;
  padding:0.5rem 0;
  color:var(--text-muted);
  text-decoration:none;
  font-size:0.85rem;
  min-height:44px;
  display:flex;
  align-items:center;
  transition:color 0.2s;
}
.aside-links a:hover{color:var(--cyan)}
.rg-aside{
  font-size:0.7rem;
  color:var(--text-muted);
  line-height:1.5;
  padding-top:0.75rem;
  border-top:1px solid var(--glass-border);
  margin-top:0.75rem;
}

/* ── Glass cards ── */
.glass-card{
  background:linear-gradient(135deg,rgba(105,255,105,0.07),rgba(0,255,255,0.05));
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(6px);
  position:relative;
  overflow:hidden;
  transition:transform 0.2s,box-shadow 0.2s;
}
.glass-card::before{
  content:'';
  position:absolute;
  top:-40%;left:-40%;
  width:80%;height:80%;
  background:radial-gradient(circle,rgba(105,255,105,0.08),transparent 70%);
  pointer-events:none;
}
.glass-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card),var(--shadow-neon);
}
.card-label{
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:0.5rem;
}
.glass-card h3{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:0.5rem;
}
.glass-card p{
  font-size:0.87rem;
  color:var(--text-muted);
  margin-bottom:0.75rem;
}
.card-link{
  font-size:0.82rem;
  font-weight:700;
  color:var(--green);
  text-decoration:none;
  letter-spacing:0.03em;
}
.card-link:hover{text-decoration:underline}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.25rem;
  margin-top:2rem;
}

/* ── Child table ── */
.child-table-wrap{margin-top:2.5rem}
.child-table-wrap h2{
  font-size:1.25rem;
  font-weight:700;
  color:var(--green);
  margin-bottom:1rem;
}
.child-table-wrap table{
  width:100%;border-collapse:collapse;
  font-size:0.9rem;
}
.child-table-wrap td{
  padding:0.65rem 1rem;
  border-bottom:1px solid var(--glass-border);
  vertical-align:top;
  color:var(--text-muted);
}
.child-table-wrap td:first-child a{
  color:var(--cyan);
  text-decoration:none;
  font-weight:500;
}
.child-table-wrap td:first-child a:hover{color:var(--green);text-decoration:underline}
.child-table-wrap tr:nth-child(even) td{background:rgba(105,255,105,0.03)}
.child-table-wrap time{color:var(--text-muted);font-size:0.78rem}

/* ── Rank sidebar ── */
.rank-quick{margin-bottom:1.5rem}
.rank-quick h2{
  font-size:0.78rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:0.75rem;
}
.rank-ol{
  list-style:none;padding:0;counter-reset:rank;
}
.rank-ol li{
  counter-increment:rank;
  display:flex;align-items:center;
  gap:0.65rem;padding:0.45rem 0;
  border-bottom:1px solid rgba(105,255,105,0.08);
  font-size:0.85rem;color:var(--text-muted);
}
.rank-ol li::before{
  content:counter(rank);
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  background:linear-gradient(135deg,var(--green),var(--cyan));
  color:var(--ink);
  font-size:0.7rem;font-weight:700;
  border-radius:50%;flex-shrink:0;
}

/* ── About author block ── */
.author-block{margin-top:2rem}
.author-name{
  font-size:1.1rem;font-weight:700;
  color:var(--green);margin-bottom:0.25rem;
}
.author-creds{
  font-size:0.8rem;color:var(--cyan);
  letter-spacing:0.04em;margin-bottom:0.75rem;
}
.author-bio{font-size:0.95rem;color:var(--text-muted);line-height:1.7}

/* Hero image */
.hero-img{
  max-width:120px;height:auto;
  border-radius:var(--radius);
  margin-bottom:1rem;
  box-shadow:var(--shadow-neon);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-footer{
  background:linear-gradient(180deg,var(--ink2) 0%,#0e1e0e 100%);
  border-top:1px solid var(--glass-border);
  margin-bottom:var(--header-h);
}
.footer-cta-block{
  text-align:center;
  padding:3rem 1.5rem 2.5rem;
  border-bottom:1px solid var(--glass-border);
  background:linear-gradient(135deg,rgba(105,255,105,0.05),rgba(0,255,255,0.04));
}
.footer-cta-heading{
  font-size:1.2rem;font-weight:700;
  color:var(--text);margin-bottom:1.25rem;
  letter-spacing:-0.01em;
}
.footer-cols{
  max-width:var(--max-content);
  margin:0 auto;
  padding:2.5rem 1.5rem;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
}
.footer-col dt{
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--green);
  padding-bottom:0.65rem;
  border-bottom:1px solid var(--glass-border);
  margin-bottom:0.75rem;
}
.footer-col dd{
  margin:0 0 0.35rem;
}
.footer-col dd a{
  color:var(--text-muted);
  text-decoration:none;
  font-size:0.85rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:color 0.2s;
}
.footer-col dd a:hover{color:var(--cyan)}
.rg-footer{
  font-size:0.72rem;
  color:var(--text-muted);
  line-height:1.55;
}
.footer-bar{
  border-top:1px solid var(--glass-border);
  padding:1rem 1.5rem;
  text-align:center;
  font-size:0.72rem;
  color:var(--text-muted);
  letter-spacing:0.04em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE NAV (≤768px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:768px){
  .nav-toggle{display:flex}
  .main-nav{
    position:fixed;
    bottom:var(--header-h);
    left:0;right:0;
    background:rgba(14,30,14,0.97);
    backdrop-filter:blur(16px);
    border-top:1px solid var(--glass-border);
    padding:1rem 1rem 0.5rem;
    transform:translateY(100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index:199;
    overflow-y:auto;
    max-height:60vh;
  }
  .main-nav.is-open{transform:translateY(0)}
  .main-nav p{
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .main-nav p a{
    width:100%;
    font-size:0.95rem;
    padding:0.85rem 0.5rem;
    border-bottom:1px solid rgba(105,255,105,0.08);
    min-height:52px;
  }
  .main-nav p a:last-child{border-bottom:none}
  .header-ctas{gap:0.3rem}
  .cta{padding:0 0.7rem;font-size:0.73rem;min-height:40px}
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .content-section{grid-template-columns:1fr}
  .page-aside{position:static}
  .hero-home::after{display:none}
  .card-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  .footer-cols{grid-template-columns:1fr}
  .header-ctas .cta-login{display:none}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL REVEAL (reduced-motion safe)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(prefers-reduced-motion:no-preference){
  .glass-card,.page-content h2,.child-table-wrap{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.5s ease,transform 0.5s ease;
  }
  .glass-card.revealed,
  .page-content h2.revealed,
  .child-table-wrap.revealed{
    opacity:1;transform:none;
  }
}

/* Glow pulse on hero CTA */
@media(prefers-reduced-motion:no-preference){
  @keyframes pulse-glow{
    0%,100%{box-shadow:0 0 18px rgba(105,255,105,0.5),0 4px 16px rgba(0,0,0,0.4)}
    50%{box-shadow:0 0 32px rgba(105,255,105,0.8),0 4px 24px rgba(0,255,255,0.3)}
  }
  .hero-cta{animation:pulse-glow 3s ease-in-out infinite}
}

/* ── Utility ── */
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}

a[data-cta],button[aria-controls]{min-height:44px;min-width:44px;box-sizing:border-box}main p a{text-decoration:underline}