/* ===== Cyber-Neon v2 — unique suffix --nx42 ===== */
/* Dark base + bold accent (yellow/cyan), glassmorphism cards, micro-motion */

:root{
  --bg-0:#0b0e12;
  --bg-1:#10151b;
  --ink:#eaf1ff;
  --muted:#9aa4b2;
  --line:rgba(255,255,255,0.1);

  --accent:#ffd34d;     /* yellow */
  --accent-2:#00e5ff;   /* neon cyan */

  --glass:rgba(255,255,255,0.06);
  --glass-2:rgba(255,255,255,0.12);

  --radius:22px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 12px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box; scroll-behavior: smooth;}
html,body{height:100%}
body.theme--nx42{
  margin:0; color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.55;
  background:
    radial-gradient(1200px 560px at 14% 10%, rgba(255,211,77,.10), transparent 45%),
    radial-gradient(1000px 520px at 86% 70%, rgba(0,229,255,.08), transparent 50%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  background-attachment:fixed;
}

/* Skip */
.skip--nx42{position:absolute;left:-9999px;top:auto}
.skip--nx42:focus{left:16px;top:16px;background:var(--accent);color:#111;padding:8px 10px;border-radius:8px;z-index:999}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:var(--radius);text-decoration:none;font-weight:700;letter-spacing:.2px;transition:transform .16s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.btn--primary{color:#0e1216;background:linear-gradient(100deg,var(--accent),#ffe77c 50%);box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-1px) scale(1.02)}
.btn--alt{color:#0e1216;background:linear-gradient(100deg,var(--accent-2),#74f7ff)}
.btn--ghost{color:var(--ink);border:1px dashed rgba(255,255,255,.28);background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.glow--nx42{box-shadow:0 0 0 2px rgba(255,211,77,.2),0 30px 80px rgba(255,211,77,.18)}

/* Hero */
.hero--nx42{position:relative;overflow:clip;}

.hero_bg{
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .4;
  filter: blur(2px);
  -webkit-filter: blur(2px);
}
.hero__inner--nx42{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 60px 0;
}
.h1--nx42{font-family:"Anton",system-ui;font-size:clamp(42px,8vw,120px);line-height:.9;letter-spacing:.5px;margin:0;text-shadow:0 2px 0 rgba(0,0,0,.45); text-transform: uppercase;}
.h1--nx42 em{color:var(--accent);font-style:normal}
.lede--nx42{color:var(--muted);font-size:clamp(16px,2.2vw,20px)}
.hero__cta--nx42{display:flex;gap:12px;flex-wrap:wrap}
.arcs--nx42{position:absolute;inset:auto 0 0 0;height:42%;opacity:.35; user-select: none; pointer-events: none;}
.arcs--nx42 path{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 10px 26px rgba(0,229,255,.22))}
.pitch--nx42{position:absolute;right:4%;bottom:8%;width:120px;height:200px;opacity:.18;background:
  linear-gradient(90deg,transparent 40%,#fff 40% 44%,transparent 44% 56%,#fff 56% 60%,transparent 60%),
  linear-gradient(180deg,transparent 0 15%,#fff 15% 17%,transparent 17% 83%,#fff 83% 85%,transparent 85%)}

/* Ball easter egg */
.ball--nx42{position:absolute;right:20px;bottom:28px;padding:0;border:0;background:transparent;cursor:pointer}
.ball-svg--nx42{width:84px;height:84px;border-radius:50%;transition:transform .6s var(--ease),filter .3s var(--ease);filter:drop-shadow(0 12px 34px rgba(255,81,81,.25))}
.ball--nx42:hover .ball-svg--nx42{transform:rotate(360deg) scale(1.05);filter:drop-shadow(0 16px 48px rgba(255,81,81,.38))}
.spark--nx42{position:absolute;inset:-6px;border-radius:50%;pointer-events:none}
.ball--nx42:hover .spark--nx42{animation:sparkNx42 .8s ease-out}
@keyframes sparkNx42{
  0%{box-shadow:0 0 0 0 rgba(255,211,77,0),0 0 0 0 rgba(0,229,255,0)}
  30%{box-shadow:0 0 0 12px rgba(255,211,77,.12),0 0 0 24px rgba(0,229,255,.08)}
  100%{box-shadow:0 0 0 0 rgba(255,211,77,0),0 0 0 0 rgba(0,229,255,0)}
}

/* Section base */
.section--nx42{margin:0 auto;padding:72px 20px}
.section__head--nx42{margin-bottom:22px}
.h2--nx42{font-family:"Anton",system-ui;font-size:clamp(28px,4.8vw,58px);margin:0 0 6px}
.h3--nx42{font-weight:700;margin:0 0 6px;font-size:20px}
.h4--nx42{font-weight:800;margin:0 0 6px;font-size:18px}
.micro--nx42{color:var(--muted);font-size:13px;letter-spacing:.4px;text-transform:uppercase}

/* Cards (asym grid) */
.how--nx42{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.card--glass--nx42{
  grid-column:span 6;
  background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  transition:transform .16s var(--ease),border-color .2s var(--ease),background .2s var(--ease)
}
.card--glass--nx42:nth-child(3){grid-column:span 5}
.card--glass--nx42:nth-child(4){grid-column:span 7}
.card--glass--nx42:hover{transform:translateY(-3px);border-color:rgba(255,211,77,.35);background:linear-gradient(180deg,var(--glass-2),rgba(255,255,255,.04))}

/* Provably Fair grid */
.pf--nx42{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-card--nx42{border:1.5px dashed rgba(255,255,255,.28);border-radius:var(--radius);padding:18px;background:rgba(255,255,255,.02)}
.pf-card--nx42 svg{width:36px;height:36px;margin-bottom:8px}

/* Demo grid */
.grid-wrap--nx42{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.grid--nx42{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  padding:16px;border-radius:16px;border:1px solid var(--line);
  background:radial-gradient(380px 180px at 12% 18%, rgba(255,211,77,.10), transparent 60%)
}
.tile--nx42{
  aspect-ratio:1/1;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-radius:14px;position:relative;overflow:hidden;
  transition:transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease)
}
.tile--nx42:hover{transform:translateY(-2px)}
.tile--nx42.is-safe{background:linear-gradient(180deg, rgba(0,229,255,.16), rgba(255,255,255,.03));border-color:rgba(0,229,255,.38)}
.tile--nx42.is-bomb{background:radial-gradient(120px 80px at 40% 40%, rgba(255,88,88,.36), rgba(255,255,255,0));border-color:rgba(255,88,88,.48)}
.tile--nx42.is-bomb::after{
  content:"💣";position:absolute;inset:0;display:grid;place-items:center;font-size:28px;opacity:.9
}
.tile--nx42.is-safe::after{
  content:"◆";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;color:#00e5ff;opacity:.9
}

/* Panel */
.panel--nx42{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);padding:14px}
.pill--nx42{display:inline-block;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:700;letter-spacing:.6px}
.row--nx42{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-top:12px}
.label--nx42{color:var(--muted)}
.hint--nx42{color:var(--muted);font-size:13px;margin-top:8px}

/* Seams divider */
.seams--nx42{height:10px;margin-top:24px;opacity:.7;background:repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 6px);mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}

/* Stats */
.stats--nx42{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat--nx42{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);padding:18px}
.kpi--nx42{font-family:"Anton",system-ui;font-size:clamp(36px,6vw,76px);margin:0 0 2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}


/* CTA strip */
.cta--strip--nx42{text-align:center;border-top:1px solid var(--line);background:radial-gradient(600px 300px at 50% 0%, rgba(255,211,77,.10), transparent 60%);padding:60px 20px}
.cta-row--nx42{display:inline-flex;gap:12px;flex-wrap:wrap}

/* Footer */
.footer--nx42{border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.footer__grid--nx42{margin:0 auto;padding:32px 20px;display:grid;gap:20px;grid-template-columns:1.2fr .8fr 1fr}
.footer__grid--nx42 ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.muted--nx42{color:var(--muted)}

/* Responsive */
@media (max-width:1024px){
  .pf--nx42{grid-template-columns:1fr}
  .grid-wrap--nx42{grid-template-columns:1fr}
  .stats--nx42{grid-template-columns:repeat(2,1fr)}
  .footer__grid--nx42{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .topbar__inner--nx42{grid-template-columns:1fr auto}
  .nav--nx42{display:none}
  .footer__grid--nx42{grid-template-columns:1fr}
  .ball-svg--nx42{width:68px;height:68px}
}


.wrapper{
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Utility: hidden heading for posters */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* POSTERS */
.posters--nx42 .posters__grid--nx42{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.poster--nx42{grid-column:span 12;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,0.03);overflow:hidden;box-shadow:var(--shadow)}
@media(min-width:900px){
  .poster--nx42:nth-child(1){grid-column:span 12}
  .poster--nx42:nth-child(2){grid-column:span 6}
  .poster--nx42:nth-child(3){grid-column:span 6}
}
.poster__svg--nx42{display:block;width:100%;height:auto}


/* STRATEGY */
.strategy__tabs--nx42{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tab--nx42{border:1px solid var(--line);background:rgba(255,255,255,0.04);color:var(--ink);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;letter-spacing:.2px}
.tab--nx42.is-active{background:linear-gradient(100deg,var(--accent-2),#74f7ff);color:#0c0f13;border-color:transparent}
.boards--nx42{position:relative}
.board--nx42{display:none;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,0.03);padding:16px}
.board--nx42.is-active{display:grid;gap:12px}
.graph--nx42{width:100%;height:auto;display:block;border-radius:14px}
.list--nx42{margin:0;padding-left:18px;color:var(--muted)}
.list--nx42 li{margin:2px 0}

/* SKINS */
.skins__grid--nx42{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.skinCard--nx42{grid-column:span 12;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,0.03);padding:14px}
@media(min-width:900px){ .skinCard--nx42{grid-column:span 4} }
.miniGrid--nx42{margin-top:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.miniGrid--nx42::before{content:"";}

/* mini tiles base */
.miniGrid--nx42 > div,
.miniGrid--nx42:empty::after{content:"";}

.miniGrid--nx42{counter-reset:cell 25}
.miniGrid--nx42{position:relative}
.miniGrid--nx42::after{ /* generate 25 tiles via shadow trick */
  content:"";
  display:block;height:0
}
.miniGrid--nx42{--tile-bg:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));--tile-br:rgba(255,255,255,.18)}
.miniGrid--nx42.skin--classic .miniTile--nx42{background:var(--tile-bg);border-color:var(--tile-br)}
.miniGrid--nx42.skin--cyan .miniTile--nx42{background:linear-gradient(180deg, rgba(0,229,255,.22), rgba(255,255,255,.03));border-color:rgba(0,229,255,.45)}
.miniGrid--nx42.skin--danger .miniTile--nx42{background:linear-gradient(180deg, rgba(255,88,88,.28), rgba(255,255,255,.03));border-color:rgba(255,88,88,.5)}

.miniGrid--nx42 .miniTile--nx42{
  aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px
}

/* generate tiles */
.skin--classic,.skin--cyan,.skin--danger{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.skin--classic::before,.skin--cyan::before,.skin--danger::before{content:"";display:none}
.skin--classic,.skin--cyan,.skin--danger{
  counter-reset:tiles 25;
}
.skin--classic div,.skin--cyan div,.skin--danger div{}

/* Insert 25 tiles (JS will build quickly for clarity) */
::-webkit-scrollbar {
    width: 0.5em;
}

::-webkit-scrollbar-track {
    background-color: #111;
}

::-webkit-scrollbar-thumb {
    background-color: #FFD34D;
}


::-webkit-scrollbar-thumb:active {
    background-color: #FFD34D;
}

.into-links li a{
    color: #fff;
    text-decoration: none;
}

.into-links li a:hover{
    color: #FFD34D;
    text-decoration:underline;
}

.socialIcons{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  i{
    color: #FFD34D;
  }
}


@media (max-width: 800px) {
  .hero--nx42{
    
  }
  .logo{
    font-size: 20px !important;
  }
  .hero__cta--nx42{
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  .how--nx42{
    display: flex;
    flex-direction: column;
  }
  .footer__grid--nx42{
    padding-left: 0;
    padding-right: 0;
  }
  .stats--nx42{
    display: flex;
    flex-direction: column;
  }
}