/* AUREUM — base */
:root{
  --ink:#e8eef6; --bg:#000;
  --muted:#9fb0c2;
  --glass:rgba(255,255,255,.06);
  --accent1:#0a84ff; --accent2:#2ee64e;
}
*{box-sizing:border-box} html,body{margin:0}
html{scroll-behavior:smooth}
body{background:#000;color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Demo content */
.wrap{max-width:960px;margin:0 auto;padding:24px 16px}
.hero{background:radial-gradient(1200px 700px at 50% -10%, rgba(166,255,42,.18), transparent 60%), radial-gradient(1000px 600px at 10% 18%, rgba(10,132,255,.20), transparent 60%);filter:blur(0);}
.hero .wrap{padding:38px 16px}
h1{font-size:clamp(32px,7vw,58px);margin:0 0 6px;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.lead{margin:0;color:#c9d1dc}

/* ===== Preloader ===== */
body.preloading{overflow:hidden}
#preloader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:#000; color:var(--ink); transition:opacity .5s ease;
}
#preloader.hide{opacity:0;pointer-events:none}

#preloader .pl-wrap{ text-align:center; width:min(92vw,560px) }
.pl-logo{ width:clamp(120px,26vw,220px); height:auto; margin:0 auto 16px; filter:drop-shadow(0 10px 28px rgba(166,255,42,.35)) }
.pl-percent{ font-size:clamp(36px,10vw,92px); font-weight:800; letter-spacing:.02em; margin:2px 0 8px }
.pl-bar{ height:10px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) }
.pl-fill{ display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 0 22px rgba(10,132,255,.35),0 0 24px rgba(46,230,78,.25); transition:width .18s ease }
.pl-hint{ margin-top:14px; font-size:14px; letter-spacing:.04em; color:var(--muted); opacity:.9 }

/* floating snippets */
.pl-fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.pl-sn{ position:absolute; font-size:12px; color:#8ab4ff; opacity:.85; white-space:nowrap; animation:pl-move linear forwards }
@keyframes pl-move{
  from{ transform:translateY(10px); opacity:0 }
  10%{ opacity:.9 } 90%{ opacity:.9 }
  to{ transform:translateY(-40px); opacity:0 }
}