/* ===== BitLobo shared design system ===== */
:root{
  --bg:#05070d; --bg2:#0a0e1a; --card:#0e1320; --card2:#141b2c;
  /* Primary brand accent: deep navy -> royal blue -> bright sky blue (gradient triad,
     same 3-step pattern the old amber used: 3=darkest/start, base=mid, 2=light/end). */
  --primary3:#1e3a8a; --primary:#2563eb; --primary2:#60a5fa;
  /* Gold stays reserved for LoboCoin amounts/balance only — never general UI chrome. */
  --amber:#f59e0b; --amber2:#fbbf24; --amber3:#b45309;
  --blue:#38bdf8; --blue2:#0ea5e9;
  --purple:#8b5cf6; --purple2:#a78bfa;
  --green:#10b981; --red:#ef4444;
  --white:#f4f4f6; --muted:#8186a0; --muted2:#aab0c6;
  --border:rgba(148,163,210,0.14);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--white);font-family:'Inter',sans-serif;overflow-x:hidden;line-height:1.6;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}
.mono{font-family:'Space Mono',monospace;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{background:var(--primary);color:#000;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary3),var(--primary));border-radius:10px;}

/* CURSOR */
#cursor,#cursor-ring{position:fixed;pointer-events:none;z-index:9999;border-radius:50%;opacity:0;transform:translate(-50%,-50%);}
#cursor{width:8px;height:8px;background:var(--primary);transition:width .25s,height .25s;}
#cursor-ring{width:30px;height:30px;border:1px solid rgba(37,99,235,0.35);transition:width .25s,height .25s;z-index:9998;}
body.has-fine-cursor{cursor:none;}
body.has-fine-cursor #cursor,body.has-fine-cursor #cursor-ring{opacity:1;}
body.has-fine-cursor a,body.has-fine-cursor button{cursor:none;}
.cursor-hover#cursor{width:16px;height:16px;}
.cursor-hover#cursor-ring{width:50px;height:50px;border-color:rgba(37,99,235,0.6);}

#progress-bar{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--primary3),var(--primary),var(--primary2));z-index:999;}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
section{padding:110px 0;position:relative;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:0.72rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--primary2);margin-bottom:18px;}
.eyebrow::before{content:'';width:18px;height:1px;background:linear-gradient(90deg,var(--primary2),transparent);}
.sec-title{font-family:'Chakra Petch',sans-serif;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.1rem);font-weight:700;line-height:1.08;letter-spacing:-0.01em;margin-bottom:18px;max-width:720px;}
.app-title{font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:0.01em;}
.sec-desc{color:var(--muted2);font-size:1.05rem;max-width:620px;}
.amber-text{background:linear-gradient(90deg,var(--primary),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.purple-text{background:linear-gradient(90deg,var(--purple),var(--purple2));-webkit-background-clip:text;background-clip:text;color:transparent;}

.placeholder-tag{
  display:inline-block;font-size:0.63rem;font-family:'Inter',sans-serif;
  background:rgba(37,99,235,0.12);color:var(--primary2);
  border:1px solid rgba(37,99,235,0.35);padding:2px 8px;border-radius:20px;
  margin-left:8px;vertical-align:middle;letter-spacing:0.02em;white-space:nowrap;
}
.demo-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:0.72rem;font-weight:600;
  background:rgba(56,189,248,0.1);color:var(--blue);
  border:1px solid rgba(56,189,248,0.3);padding:5px 12px;border-radius:20px;
}

/* REVEAL */
[data-anim]{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
[data-anim="left"]{transform:translateX(-40px);}
[data-anim="right"]{transform:translateX(40px);}
[data-anim="scale"]{transform:scale(.94);}
[data-anim].in{opacity:1;transform:none;}

/* ANNOUNCEMENT BAR (marketing homepage only) */
#announce{
  position:relative;z-index:500;background:linear-gradient(90deg,#1a1206,#241a08);
  border-bottom:1px solid rgba(37,99,235,0.25);
  padding:10px 24px;text-align:center;font-size:0.82rem;color:var(--primary2);
}
#announce b{color:var(--white);}
#announce button{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted2);font-size:1.1rem;cursor:pointer;
}

/* MARKETING NAV (homepage) */
nav{position:fixed;top:0;left:0;width:100%;z-index:500;padding:18px 0;background:rgba(4,4,4,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:all .3s;}
nav.scrolled{padding:12px 0;border-bottom:1px solid var(--border);background:rgba(4,4,4,0.88);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.2rem;}
.brand img{width:34px;height:34px;object-fit:contain;}
.nav-links{display:flex;gap:24px;list-style:none;}
.nav-links a{font-size:0.82rem;font-weight:500;color:var(--muted2);transition:color .3s;white-space:nowrap;}
.nav-links a:hover{color:var(--white);}
.nav-cta{padding:10px 20px;border-radius:8px;background:linear-gradient(90deg,var(--primary3),var(--primary));color:#f4f4f6;font-weight:700;font-size:0.8rem;font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:0.03em;white-space:nowrap;transition:transform .3s,box-shadow .3s;}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,99,235,0.3);}
.nav-toggle{display:none;flex-direction:column;gap:5px;}
.nav-toggle span{width:22px;height:2px;background:var(--white);}

/* APP HEADER (tool pages) */
.app-header{
  position:sticky;top:0;z-index:500;padding:16px 0;
  background:rgba(4,4,4,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.app-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.app-back{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--muted2);transition:color .3s;}
.app-back:hover{color:var(--primary2);}
.app-back .brand-mark{width:30px;height:30px;object-fit:contain;}
.app-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px;}
.app-header-right{display:flex;align-items:center;gap:12px;}
.balance-chip{
  /* Gold on purpose: this always shows a LoboCoin amount. */
  display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid rgba(245,158,11,0.3);
  padding:8px 16px;border-radius:30px;font-family:'Space Mono',monospace;font-weight:700;color:var(--amber2);font-size:0.88rem;
}
.rank-chip{
  display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);
  padding:8px 14px;border-radius:30px;font-size:0.8rem;font-weight:600;color:var(--purple2);
}
.app-main{padding-top:50px;padding-bottom:100px;min-height:70vh;}

/* BUTTONS */
.btn-primary,.btn-outline{position:relative;overflow:hidden;will-change:transform;}
.btn-primary::before,.btn-outline::before{
  content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.btn-primary:hover::before,.btn-outline:hover::before{left:135%;}
.btn-primary{padding:16px 34px;border-radius:10px;background:linear-gradient(90deg,var(--primary3),var(--primary));color:#f4f4f6;font-weight:700;font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:0.03em;font-size:0.9rem;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease;display:inline-block;border:none;cursor:pointer;}
.btn-primary:hover{box-shadow:0 14px 32px rgba(37,99,235,0.35);}
.btn-primary:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-outline{padding:16px 34px;border-radius:10px;border:1px solid var(--border);color:var(--white);font-weight:600;font-family:'Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:0.03em;font-size:0.9rem;transition:all .35s cubic-bezier(.16,1,.3,1);display:inline-block;background:transparent;cursor:pointer;}
.btn-outline:hover{border-color:var(--primary);background:rgba(37,99,235,0.08);}
.btn-sm{padding:10px 20px;font-size:0.82rem;}

/* CARD PRIMITIVES */
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px 22px;text-align:center;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease;}
.stat-card:hover{border-color:rgba(37,99,235,0.35);box-shadow:0 18px 40px -16px rgba(0,0,0,0.5);}
.stat-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:var(--primary2);}
.stat-label{font-size:0.8rem;color:var(--muted2);margin-top:6px;}

/* ICONS — inline SVG, injected by js/shared.js (BL.icon / BL.renderIcons). No emoji anywhere. */
.icon{width:1.1em;height:1.1em;display:inline-block;vertical-align:-0.2em;flex-shrink:0;}
.icon-sm{width:14px;height:14px;}
.icon-md{width:20px;height:20px;}
.icon-lg{width:28px;height:28px;}
.icon-xl{width:40px;height:40px;}
.icon-spin{animation:iconSpin 1s linear infinite;}
@keyframes iconSpin{to{transform:rotate(360deg);}}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;}
.js-balance,.js-rank{display:inline-flex;align-items:center;gap:6px;}
.modal-icon{display:flex;align-items:center;justify-content:center;color:var(--primary2);margin:0 auto 16px;}

/* GX-STYLE GHOST DIVIDER — big outlined repeated wordmark, inspired by Opera GX's section breaks */
.gx-divider{position:relative;height:6rem;overflow:hidden;width:100%;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);display:flex;align-items:center;}
.gx-divider-track{display:flex;gap:3rem;align-items:center;height:100%;width:max-content;animation:gxScroll 24s linear infinite;}
.gx-divider-track span{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:3.2rem;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(148,163,210,0.3);letter-spacing:0.02em;}
.gx-divider-track span:nth-child(3n+1){-webkit-text-stroke-color:rgba(37,99,235,0.5);}
@keyframes gxScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (max-width:640px){.gx-divider{height:4rem;}.gx-divider-track span{font-size:2.1rem;}}

/* TOAST */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card2);border:1px solid rgba(37,99,235,0.4);color:var(--white);padding:14px 24px;border-radius:12px;font-size:0.86rem;z-index:9000;opacity:0;pointer-events:none;transition:all .35s;max-width:90vw;text-align:center;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(4,4,4,0.75);backdrop-filter:blur(6px);z-index:8000;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.show{display:flex;}
.modal-box{background:var(--card2);border:1px solid var(--border);border-radius:22px;padding:34px;max-width:420px;width:100%;text-align:center;animation:modal-in .3s ease;}
@keyframes modal-in{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:scale(1);}}
.modal-icon{font-size:2.6rem;margin-bottom:16px;}
.modal-box h3{font-size:1.3rem;margin-bottom:10px;}
.modal-box p{color:var(--muted2);font-size:0.92rem;margin-bottom:24px;}

/* FOOTER (simplified, used on tool pages) */
.simple-footer{padding:40px 0;border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:0.82rem;}
.simple-footer a{color:var(--primary2);}

/* FULL FOOTER (homepage) */
footer.full{padding:60px 0 30px;border-top:1px solid var(--border);}
.footer-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:40px;}
.footer-brand{max-width:320px;}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{color:var(--muted2);font-size:0.86rem;}
.footer-cols{display:flex;gap:60px;flex-wrap:wrap;}
.footer-col h5{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:16px;}
.footer-col a{display:block;color:var(--muted2);font-size:0.88rem;margin-bottom:10px;transition:color .3s;}
.footer-col a:hover{color:var(--primary2);}
.disclaimer{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px 26px;font-size:0.8rem;color:var(--muted2);margin-bottom:30px;}
.disclaimer b{color:var(--muted2);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:0.8rem;color:var(--muted);}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:0.9rem;transition:all .3s;}
.footer-social a:hover{border-color:var(--primary);background:rgba(37,99,235,0.1);}

@media (max-width:980px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
}
@media (max-width:560px){
  section{padding:80px 0;}
}

/* Menú del móvil */
.nav-toggle{cursor:pointer;padding:6px;}
.nav-toggle span{transition:transform .25s,opacity .25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-menu-cta{display:none;}
@media (max-width:980px){
  .nav-links.open{display:flex!important;position:absolute;top:100%;left:0;width:100%;flex-direction:column;background:#05070d;box-shadow:0 24px 40px rgba(0,0,0,.6);z-index:50;padding:24px;gap:18px;border-bottom:1px solid var(--border);}
  .nav-links.open a{font-size:1rem;}
}
@media (max-width:380px){ .nav-links.open .nav-menu-cta{display:block;} }