:root{
  --bg:#06121a;
  --text:#eaf7ff;
  --muted:rgba(234,247,255,.74);
  --line:rgba(255,255,255,.12);

  --glass:rgba(10,18,26,.62);
  --glass2:rgba(10,18,26,.40);

  --shadow:0 24px 90px rgba(0,0,0,.60);
  --cyan:rgba(0,255,220,.92);
  --blue:rgba(0,140,255,.92);

  --good:#55ffb6;
  --warn:#ffd166;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

.bg{
  position: fixed;
  inset: 0;
  background: url("/bg.png") center/cover no-repeat;
  filter: blur(1px);
  transform: scale(1.03);
  z-index: 0;
  pointer-events: none;
}
.bg-overlay{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,220,.14), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(0,140,255,.12), transparent 46%),
    radial-gradient(circle at 55% 92%, rgba(255,220,130,.06), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.62));
  z-index: 1;
  pointer-events: none;
}

.topbar, .wrap, .modal { position: relative; z-index: 2; }

a{ color: inherit; }

/* TOPBAR */
.topbar{
  width: min(1200px, 92vw);
  margin: 18px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  user-select:none;
}
.logoPill{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  font-weight: 1000;
  letter-spacing: .9px;
}
.brandText{ display:flex; flex-direction:column; gap:2px; }
.brandTitle{ font-weight:900; opacity:.9; }
.brandSub{ font-size:12px; opacity:.72; font-style: italic; }

.nav{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.nav-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:850;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.nav-btn:hover{background: rgba(255,255,255,.10)}
.nav-btn.ghost{ background: transparent; }
.nav-btn.cta{
  background: linear-gradient(135deg, rgba(0,255,220,.30), rgba(0,140,255,.22));
  border: 1px solid rgba(0,255,220,.28);
}

/* WRAP & HERO */
.wrap{
  width: min(1200px, 92vw);
  margin: 28px auto 54px;
}

.hero{
  display:grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 18px;
  align-items:start;
}

.eyebrow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  opacity:.95;
}
.spark{ filter: drop-shadow(0 0 12px rgba(0,255,220,.35)); }
.gradientText{
  background: linear-gradient(90deg, rgba(0,255,220,.95), rgba(0,140,255,.95), rgba(255,220,130,.85));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  font-weight: 1000;
}
.muted{ color: var(--muted); font-weight: 800; }

.h1{
  margin: 10px 0 8px;
  font-size: clamp(44px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:-1px;
}
.h1Sub{
  font-size: clamp(18px, 2.1vw, 22px);
  opacity:.75;
  font-weight: 800;
  margin-left: 8px;
}

.lead{
  margin: 0 0 14px;
  color: rgba(234,247,255,.86);
  max-width: 70ch;
  line-height: 1.55;
}

/* Value pills */
.valueRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 0 0 14px;
}
.valuePill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

/* Setup (Node required) */
.setupCard{
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,255,220,.12), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(0,140,255,.10), transparent 42%),
    rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 70px rgba(0,0,0,.52);
  padding: 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom: 14px;
}
.setupTop{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.setupBadge{
  font-weight: 1000;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,209,102,.14);
  border: 1px solid rgba(255,209,102,.30);
  color: rgba(255,209,102,.95);
}
.setupTitle{
  font-weight: 1000;
  font-size: 16px;
  letter-spacing: -.2px;
}
.setupDesc{
  margin-top: 8px;
  color: rgba(234,247,255,.86);
  line-height: 1.5;
}
.setupCtas{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 12px;
}
.btnNode{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 1000;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#041018;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 0 24px rgba(0,255,255,.18);
}
.btnNode:hover{ filter: brightness(1.06); }

.btnGhostSmall{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 950;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(234,247,255,.95);
}
.btnGhostSmall:hover{ background: rgba(0,0,0,.26); }

.nodeCheck{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 950;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  user-select:none;
}
.nodeCheck input{ transform: translateY(1px); }

.setupNote{
  margin-top: 10px;
  opacity:.86;
  line-height: 1.45;
}
.setupNote code{
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

/* GLASS CARDS */
.glassCard{
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(0,255,220,.10), transparent 40%),
    radial-gradient(circle at 88% 20%, rgba(0,140,255,.08), transparent 40%),
    var(--glass);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  padding: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.cardTitleRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cardTitle{ font-weight: 1000; font-size: 16px; }
.cardSubtitle{ opacity:.78; font-size: 13px; }

.cardTop{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.statusLine .k{
  font-size:12px;
  opacity:.78;
  margin-bottom:6px;
  font-weight: 900;
}
.statusLine .v{
  font-size:18px;
  font-weight:1000;
}

.divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 14px 0;
}

.primaryCtaRow{
  display:flex;
  gap: 12px;
  align-items: center;
  flex-wrap:wrap;
}

.btnPrimary{
  flex: 1 1 320px;
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 1000;
  text-decoration:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  color:#041018;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  box-shadow: 0 0 24px rgba(0,255,255,.20);
  border: 0;
}
.btnPrimary:hover{ filter: brightness(1.06); }

.btnPrimary.disabled{
  filter: grayscale(.35) brightness(.85);
  opacity: .72;
  cursor: not-allowed;
  pointer-events: none;
}

.btnMeta{
  font-weight: 950;
  opacity: .88;
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
}

.btnGhost{
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 950;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  color: rgba(234,247,255,.95);
}
.btnGhost:hover{ background: rgba(0,0,0,.30); }

.lockMsg{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,209,102,.10);
  border: 1px solid rgba(255,209,102,.22);
  color: rgba(255,209,102,.95);
  font-weight: 900;
  display:none;
}

.noteBox{ margin-top: 12px; }
.noteBox .k{
  font-size:12px;
  opacity:.78;
  margin-bottom:8px;
  font-weight: 900;
}
.noteText{
  font-size:14px;
  line-height:1.45;
  color: rgba(234,247,255,.92);
  white-space: pre-line;
}

.trustRow{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.trustItem{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
  border-radius: 999px;
}

.dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.35);
}
.dot.ok{ background: var(--good); }

/* Hash */
.hashRow{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.hashRow .k{
  font-size:12px;
  opacity:.78;
  margin-bottom:8px;
  font-weight: 900;
}
.hashBox{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.hashBox code{
  font-size: 12px;
  opacity:.92;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.12);
  overflow-wrap:anywhere;
}

/* Info grid */
.infoGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.infoCard{
  border-radius: 22px;
  background: var(--glass2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 60px rgba(0,0,0,.45);
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.infoTitle{ font-weight: 1000; font-size: 16px; }
.infoList{ margin: 10px 0 0; padding-left: 18px; opacity:.92; }
.infoList li{ margin: 8px 0; line-height: 1.35; }
.reqStrong{
  font-weight: 1000;
  color: rgba(255,209,102,.95);
}

/* FAQ */
.faq{
  margin-top: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding: 10px 12px;
}
.faq summary{
  cursor:pointer;
  font-weight: 1000;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faqBody{
  margin-top: 10px;
  opacity:.86;
  line-height: 1.45;
}

/* Versions */
.versionsCard{
  margin-top: 14px;
  border-radius: 22px;
  background: var(--glass2);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 60px rgba(0,0,0,.45);
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.versionsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.versionsTitle{ font-weight: 1000; font-size: 16px; }
.versionsSub{ opacity:.78; font-size: 13px; margin-top: 4px; }
.btnMini{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 950;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(234,247,255,.95);
}
.btnMini:hover{ background: rgba(255,255,255,.12); }
.hidden{ display:none; }

.versionsWrap{ margin-top: 12px; }
.versionsLoading{ opacity:.75; font-weight: 900; }

.versionsList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.verItem{
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.14);
  padding: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.verLeft{ display:flex; flex-direction:column; gap:3px; }
.verTag{ font-weight: 1000; letter-spacing: .2px; }
.verDate{ font-size: 12px; opacity:.72; }
.verBtn{
  text-decoration:none;
  font-weight: 1000;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,255,220,.22), rgba(0,140,255,.18));
  border: 1px solid rgba(0,255,220,.22);
  color: rgba(234,247,255,.95);
  white-space: nowrap;
}
.verBtn:hover{ filter: brightness(1.06); }

.versionsFoot{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.directLink{
  color: rgba(0,255,220,.95);
  font-weight: 1000;
  text-decoration:none;
  border-bottom: 1px dashed rgba(0,255,220,.55);
  padding-bottom:2px;
}
.mutedSmall{ font-size: 12px; opacity:.72; }

/* Right Panel */
.hero-right{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height: 420px;
}
.proPanel{
  border-radius: 22px;
  padding: 16px;
  background: rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 65px rgba(0,0,0,.45);
}
.proTitle{ font-size: 20px; font-weight: 1000; }
.proSub{ margin-top: 6px; opacity: .80; line-height: 1.45; }
.proGrid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.proItem{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.proIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.proH{ font-weight: 1000; }
.proP{ opacity:.78; font-size: 13px; margin-top: 2px; }

.proSteps{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(10,18,26,.38);
  border:1px solid rgba(255,255,255,.12);
}
.stepTitle{ font-weight: 1000; margin-bottom: 8px; }
.proSteps ol{ margin:0; padding-left: 18px; opacity:.92; }
.proSteps li{ margin: 8px 0; line-height: 1.35; }

/* Footer */
.footer{
  margin-top: 18px;
  opacity:.78;
  font-size: 13px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.footer a{ color: rgba(234,247,255,.90); }
.sep{ opacity:.6; }

/* Modal */
.modal{
  position: fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999999;
}
.modalBack{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(10px);
}
.modalBox{
  width: min(860px, 92vw);
  max-height: min(76vh, 720px);
  overflow:hidden;
  border-radius: 18px;
  background: rgba(10,18,26,.92);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 90px rgba(0,0,0,.70);
  position: relative;
  display:flex;
  flex-direction:column;
}
.modalTop{
  padding: 14px 14px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modalTitle{ font-weight: 1000; font-size: 18px; }
.modalClose{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  cursor:pointer;
  font-size: 18px;
  font-weight: 1000;
}
.modalClose:hover{ background: rgba(255,255,255,.12); }
.modalBody{
  padding: 14px;
  overflow:auto;
  font-size: 14px;
  line-height: 1.55;
  opacity: .95;
  white-space: pre-line;
}
.modalBottom{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .versionsList{ grid-template-columns: 1fr; }
  .btnPrimary{ flex: 1 1 auto; }
  .cardTop{ grid-template-columns: 1fr; }
  .infoGrid{ grid-template-columns: 1fr; }
}

.verLabel{
  margin-left: 8px;
  font-size: 11px;
  font-weight: 1000;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  opacity: .9;
}
/* =========================
   NEO BLUE THEME OVERRIDE
   PÉGALO AL FINAL DEL CSS
   ========================= */

/* 1) Paleta más clara + más “neo” */
:root{
  --bg:#061a28;                 /* fondo menos negro */
  --text:rgba(240,252,255,.96); /* texto más limpio */
  --muted:rgba(240,252,255,.80);
  --line:rgba(255,255,255,.18);

  /* glass más claro */
  --glass:rgba(255,255,255,.085);
  --glass2:rgba(255,255,255,.06);

  /* acentos más “neo azul” */
  --cyan:rgba(0,255,230,.98);
  --blue:rgba(60,160,255,.98);

  --shadow: 0 18px 70px rgba(0,0,0,.35);

  --good:#5dffbf;
  --warn:#ffd166;
  --bad:#ff6b6b;
}

/* 2) Fondo: quita “negro pesado” y dale luz azul */
body{
  background: radial-gradient(circle at 20% 10%, rgba(0,255,230,.10), transparent 42%),
              radial-gradient(circle at 85% 15%, rgba(60,160,255,.14), transparent 45%),
              radial-gradient(circle at 50% 95%, rgba(130,210,255,.10), transparent 55%),
              linear-gradient(180deg, rgba(6,26,40,1), rgba(5,35,55,1));
}

.bg-overlay{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,230,.14), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(60,160,255,.14), transparent 46%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.34)) !important;
}

/* overlay más suave (menos negro) */
.bg-overlay{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,230,.18), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(60,160,255,.18), transparent 46%),
    radial-gradient(circle at 55% 92%, rgba(255,220,130,.07), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28)) !important;
}

/* 3) Topbar y pills más claras */
.logoPill{
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 0 24px rgba(60,160,255,.10);
}

.nav-btn{
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
.nav-btn:hover{ background: rgba(255,255,255,.12) !important; }
.nav-btn.cta{
  background: linear-gradient(135deg, rgba(0,255,230,.30), rgba(60,160,255,.26)) !important;
  border:1px solid rgba(0,255,230,.32) !important;
  box-shadow: 0 0 26px rgba(0,255,230,.12);
}

.valuePill{
  background: rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.20) !important;
}

/* 4) Cards “glass” más luminosas */
.glassCard,
.versionsCard,
.infoCard,
.proPanel{
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 70px rgba(0,0,0,.28) !important;
}

/* Node card destacada y clara */
.setupCard{
  background:
    radial-gradient(circle at 20% 10%, rgba(0,255,230,.18), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(60,160,255,.16), transparent 42%),
    rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}

/* Items interiores más claros */
.proItem,
.faq,
.verItem,
.nodeCheck,
.trustItem,
.hashRow{
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* 5) Botones: más “neo” */
.btnGhost, .btnGhostSmall, .btnMini{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}
.btnGhost:hover, .btnGhostSmall:hover, .btnMini:hover{
  background: rgba(255,255,255,.12) !important;
}

.btnPrimary, .btnNode{
  background: linear-gradient(135deg, rgba(0,255,230,.95), rgba(60,160,255,.95)) !important;
  box-shadow: 0 0 30px rgba(0,255,230,.16), 0 0 40px rgba(60,160,255,.10) !important;
}

/* 6) Texto: un poquito más brillante */
.lead{ color: rgba(240,252,255,.88) !important; }
.proP, .cardSubtitle, .versionsSub, .mutedSmall{ opacity:.86 !important; }

/* 7) Etiquetas (Última/Anterior) más “neon” */
.verLabel{
  background: rgba(0,255,230,.12) !important;
  border:1px solid rgba(0,255,230,.22) !important;
}
.bg-overlay{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,230,.14), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(60,160,255,.14), transparent 46%),
    radial-gradient(circle at 55% 92%, rgba(255,220,130,.06), transparent 52%),
    /* ✅ más oscuro para legibilidad */
    linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.72));
}
/* ✅ FORCE BG IMAGE (Cloudflare / tu dominio) */
.bg{
  background: url("/bg.png") center/cover no-repeat !important;
  filter: blur(1px) !important;
  transform: scale(1.03) !important;
}

/* ✅ overlay MÁS CLARO (menos oscuro) */
.bg-overlay{
  background:
    radial-gradient(circle at 18% 20%, rgba(0,255,230,.12), transparent 45%),
    radial-gradient(circle at 82% 25%, rgba(60,160,255,.12), transparent 46%),
    radial-gradient(circle at 55% 92%, rgba(255,220,130,.05), transparent 52%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.44)) !important;
}
#modal.hidden { display: none !important; }