/* =========================
   Atom Casino — main.css
   No JS. Responsive. Neon casino theme.
   ========================= */

/* ---- CSS Reset (light) ---- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
button, input { font: inherit; }

/* ---- Theme tokens ---- */
:root{
  /* core */
  --bg0: #070014;
  --bg1: #0a0021;
  --bg2: #0b0724;

  /* neon accents */
  --violet: #a855f7;
  --violet2:#7c3aed;
  --lime: #2cff9a;
  --mint: #00e5ff;
  --gold: #ffd166;

  /* text */
  --text: rgba(236,240,255,.92);
  --muted: rgba(236,240,255,.70);
  --muted2: rgba(236,240,255,.58);

  /* surface */
  --card: rgba(255,255,255,.045);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);

  /* shadow/glow */
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --glowG: 0 0 0 1px rgba(44,255,154,.16), 0 18px 70px rgba(44,255,154,.10);
  --glowV: 0 0 0 1px rgba(168,85,247,.16), 0 18px 70px rgba(168,85,247,.10);

  /* layout */
  --radius: 18px;
  --radius2: 24px;
  --container: 1180px;

  /* typography (fluid) */
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

/* ---- Background: layered, smooth, "intriguing" ---- */
body{
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(44,255,154,.18), transparent 62%),
    radial-gradient(900px 650px at 85% 15%, rgba(168,85,247,.20), transparent 60%),
    radial-gradient(900px 700px at 55% 105%, rgba(0,229,255,.10), transparent 58%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg2) 100%);
  overflow-x: hidden;
}

/* film grain + soft haze (no harsh color breaks) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 35% 35%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(720px 420px at 70% 62%, rgba(255,255,255,.04), transparent 60%),
    repeating-radial-gradient(circle at 20% 20%, rgba(255,255,255,.016) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
  opacity: .55;
}

/* ---- Container ---- */
.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

/* ---- Utilities ---- */
.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }
.hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  margin: 18px 0;
}
.section{ padding: 30px 0; }
@media (max-width: 900px){
  .section{ padding: 22px 0; }
}

/* ---- Card / surfaces ---- */
.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.card::after{
  content:"";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(44,255,154,.22),
    rgba(168,85,247,.20),
    rgba(0,229,255,.14),
    rgba(255,255,255,.08)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
}

/* ---- Typography ---- */
h1,h2,h3{ margin: 0 0 10px; letter-spacing: -0.3px; }
h1{
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.05;
}
h2{
  font-size: clamp(18px, 2.0vw, 26px);
  line-height: 1.2;
}
h3{
  font-size: 16px;
  line-height: 1.25;
  color: rgba(236,240,255,.90);
}
p{ margin: 0 0 12px; line-height: 1.65; }

/* ---- Neon text highlight ---- */
.glowText{
  text-shadow:
    0 0 18px rgba(44,255,154,.12),
    0 0 22px rgba(168,85,247,.12);
}

/* ---- Buttons ---- */
.btnRow{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(236,240,255,.92);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.07); }
.btn:active{ transform: translateY(0px); }

.btn--primary{
  border-color: rgba(44,255,154,.25);
  background:
    radial-gradient(220px 80px at 20% 20%, rgba(44,255,154,.18), transparent 60%),
    radial-gradient(240px 90px at 80% 80%, rgba(168,85,247,.18), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: var(--glowG);
}
.btn--ghost{
  border-color: rgba(168,85,247,.22);
  box-shadow: var(--glowV);
}

/* ---- Header (sticky, blur) ---- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(8,0,24,.78), rgba(8,0,24,.28));
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 190px;
}
.logoMark{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(180px 90px at 30% 25%, rgba(44,255,154,.28), transparent 60%),
    radial-gradient(180px 90px at 70% 75%, rgba(168,85,247,.26), transparent 60%),
    rgba(255,255,255,.04);
  box-shadow: 0 18px 70px rgba(44,255,154,.10);
  position: relative;
}
.logoMark::after{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 16px; height: 16px;
  border-radius: 6px;
  border: 2px solid rgba(236,240,255,.70);
  box-shadow: 0 0 18px rgba(0,229,255,.18);
  transform: rotate(15deg);
}
.brandName{
  font-weight: 950;
  letter-spacing: .1px;
  line-height: 1.05;
}
.brandSub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---- Nav: desktop ---- */
.nav{
  display:flex;
  gap: 10px;
  align-items:center;
}
.nav a{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(236,240,255,.82);
  transition: background .15s ease, transform .15s ease;
}
.nav a:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }
.nav a[aria-current="page"]{
  border-color: rgba(44,255,154,.18);
  box-shadow: 0 0 0 1px rgba(44,255,154,.10), 0 18px 60px rgba(44,255,154,.08);
}

/* ---- Mobile nav (no JS): checkbox hack ---- */
.navToggle{ display:none; }
.burger{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.burgerLines{
  width: 18px;
  height: 12px;
  position: relative;
}
.burgerLines::before,
.burgerLines::after,
.burgerLines span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:99px;
  background: rgba(236,240,255,.85);
  box-shadow: 0 0 18px rgba(44,255,154,.10);
}
.burgerLines::before{ top:0; }
.burgerLines span{ top:5px; }
.burgerLines::after{ bottom:0; }

@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:flex; }
  .header__row{ gap: 10px; }
  .brand{ min-width: auto; }

  .mobileNav{
    display:none;
    padding: 12px 0 18px;
  }
  .mobileNav__grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mobileNav a{
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
  }

  /* show when checked */
  .navToggle:checked ~ .mobileNav{ display:block; }
}

/* ---- Hero ---- */
.hero{
  padding: 26px 0 10px;
}
.hero__wrap{
  padding: 20px;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
}

.heroMedia{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(420px 260px at 20% 25%, rgba(44,255,154,.16), transparent 60%),
    radial-gradient(460px 280px at 80% 75%, rgba(168,85,247,.18), transparent 62%),
    radial-gradient(460px 280px at 50% 110%, rgba(0,229,255,.10), transparent 62%),
    rgba(255,255,255,.03);
  overflow:hidden;
  min-height: 240px;
  position: relative;
}
.heroMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(0,0,0,.40));
  pointer-events:none;
}
.heroMedia__inner{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  padding: 16px;
}
.badges{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(236,240,255,.86);
  font-size: 13px;
}
.badge i{
  width: 10px; height: 10px;
  border-radius: 99px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(44,255,154,.45);
  display:inline-block;
}

.heroSide{
  display:grid;
  gap: 12px;
}
.sideCard{
  padding: 16px;
}
.kpiGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.kpi{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.kpi b{
  display:block;
  font-size: 16px;
}
.kpi span{
  color: var(--muted);
  font-size: 12px;
}

/* ---- LSI dropdown (usable details) ---- */
.acc{ padding: 14px; }
.acc summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  user-select:none;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ background: rgba(255,255,255,.06); }
.accTitle{
  font-weight: 950;
  letter-spacing: .1px;
}
.accPill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}
.accIcon{
  width: 28px; height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  position: relative;
}
.accIcon::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(236,240,255,.78);
  border-bottom: 2px solid rgba(236,240,255,.78);
  transform: rotate(45deg);
  top: 7px;
}
details.acc[open] .accIcon::after{ transform: rotate(-135deg); top: 10px; }

.tags{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .tags{ grid-template-columns: 1fr; }
}
.tag{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .15s ease, background .15s ease;
}
.tag:hover{ background: rgba(255,255,255,.07); transform: translateY(-1px); }
.tag .dot{
  width: 10px; height: 10px;
  border-radius: 99px;
  background: var(--lime);
  box-shadow: 0 0 18px rgba(44,255,154,.45);
}

/* ---- Feature grid ---- */
.features{
  padding: 18px;
}
.featureGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .featureGrid{ grid-template-columns: 1fr; }
}
.feature{
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.featureTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.pulse{
  width: 10px; height: 10px;
  border-radius: 99px;
  background: var(--mint);
  box-shadow: 0 0 18px rgba(0,229,255,.42);
}

/* ---- Inline “logo rails” (no images) ---- */
.rail{
  padding: 16px 18px;
}
.railTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.pills{
  display:flex;
  gap: 10px;
  overflow:auto hidden;
  padding: 12px 2px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.pills::-webkit-scrollbar{ height: 8px; }
.pills::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
.pill{
  scroll-snap-align: start;
  flex: 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(236,240,255,.82);
  font-size: 13px;
  white-space: nowrap;
}
.pill svg{ width: 18px; height: 18px; opacity: .92; }

/* ---- Footer (like screenshot, universal) ---- */
.footer{
  padding: 34px 0 42px;
}
.footerTop{
  padding: 18px;
}
.footerCols{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1.1fr;
  gap: 16px;
  padding: 6px;
}
@media (max-width: 980px){
  .footerCols{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footerCols{ grid-template-columns: 1fr; }
}
.footerH{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.footerList{
  list-style: none;
  display: grid;
  gap: 8px;
}
.footerList a{
  color: rgba(236,240,255,.75);
}
.footerList a:hover{
  color: rgba(236,240,255,.95);
}

.supportBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  margin-bottom: 10px;
  gap: 10px;
}
.supportBtn:hover{ background: rgba(255,255,255,.06); }

.footerRow{
  margin-top: 18px;
  display:grid;
  gap: 14px;
}
.appsRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.appBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 46px;
  min-width: 160px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(220px 80px at 20% 20%, rgba(44,255,154,.16), transparent 60%),
    radial-gradient(240px 90px at 80% 80%, rgba(168,85,247,.16), transparent 60%),
    rgba(255,255,255,.03);
}
.appBadge:hover{ background: rgba(255,255,255,.06); }

.footerBottom{
  padding: 14px 6px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.small{
  font-size: 12px;
  color: rgba(236,240,255,.62);
}