/* =====================================================================================================
   Futuristic layer (Oct 2026): always dark, NumbX electric blue and cyan, glass panels, glowing grid hero.
   Loaded after style.css and overrides it. Drop this file from the page template to go back to the classic look.
   ===================================================================================================== */
:root, :root[data-theme] {
  --navy: #050a18; --ink: #e8eeff; --muted: #93a3cf; --line: rgba(120, 160, 255, .16); --tint: #0a1430;
  --bg: #04081a; --card: rgba(14, 24, 56, .62); --royal: #2f7bff; --cyan: #19e3ff; --violet: #7c4dff;
  --glow: 0 0 0 1px rgba(25, 227, 255, .25), 0 10px 40px rgba(47, 123, 255, .22);
}
html { background: var(--bg); }
body { background:
    radial-gradient(1200px 600px at 85% -10%, rgba(124, 77, 255, .16), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(25, 227, 255, .10), transparent 60%),
    var(--bg);
  color: var(--ink); letter-spacing: -.005em;
  font-family: "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", system-ui, -apple-system, Inter, Roboto, sans-serif; }
h1, h2, h3 { letter-spacing: -.02em; }
a { color: var(--cyan); }

/* scroll progress bar (site.js sets --progress) */
body::before { content: ""; position: fixed; top: 0; left: 0; height: 3px; z-index: 60; width: var(--progress, 0%);
  background: linear-gradient(90deg, var(--cyan), var(--royal), var(--violet)); box-shadow: 0 0 12px var(--cyan); }

/* glass header, pinned */
.top { position: sticky; top: 0; z-index: 50; background: rgba(4, 8, 26, .55);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(25, 227, 255, .14); transition: background .3s; }
.top.scrolled { background: rgba(4, 8, 26, .85); }
.nav a { color: #c9d6ff; position: relative; }
.nav a:not(.login)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--royal)); transform: scaleX(0); transition: transform .25s; }
.nav a:not(.login):hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { border-bottom: 0; color: #fff; }
.nav .login { border: 1px solid rgba(25, 227, 255, .45); box-shadow: 0 0 18px rgba(25, 227, 255, .15) inset; }

/* hero and page headers: deep space, a floating orb, a glowing perspective grid */
.hero, .pagehead { background: radial-gradient(ellipse at 50% 120%, #0b2a6b 0%, #050a1e 55%, #03060f 100%);
  animation: none; isolation: isolate; }
.hero::before, .pagehead::before { content: ""; position: absolute; left: -50%; right: -50%; bottom: -2px; height: 70%;
  z-index: -1; transform: perspective(420px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(25, 227, 255, .28) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(25, 227, 255, .28) 1px, transparent 1px);
  background-size: 54px 54px; animation: gridmove 6s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
@keyframes gridmove { to { background-position: 0 54px, 0 0; } }
.hero::after, .pagehead::after { content: ""; position: absolute; width: 520px; height: 520px; right: -120px; top: -180px;
  z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle, rgba(124, 77, 255, .9), rgba(47, 123, 255, .4) 50%, transparent 70%);
  animation: orb 14s ease-in-out infinite alternate; }
@keyframes orb { to { transform: translate(-120px, 80px) scale(1.15); } }
.hero h1 { font-size: 54px; font-weight: 800; }
.hero h1 span { background: linear-gradient(90deg, var(--cyan), #7ab8ff, var(--violet), var(--cyan)); background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
.pagehead h1 { font-size: 46px; background: linear-gradient(90deg, #fff 30%, #9fdcff 70%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p, .pagehead p { color: #b8c6ef; }
#net { opacity: .7; }

/* buttons */
.btn { background: linear-gradient(135deg, var(--cyan), var(--royal) 55%, var(--violet)); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 10px 30px rgba(47, 123, 255, .45); }
.btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 14px 40px rgba(25, 227, 255, .55); }
.btn.ghost, .cta .btn.ghost { background: rgba(255, 255, 255, .04); color: #fff; border: 1px solid rgba(25, 227, 255, .45);
  box-shadow: 0 0 20px rgba(25, 227, 255, .12) inset; }

/* sections: glowing divider lines */
section { position: relative; }
section + section::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 227, 255, .5), rgba(124, 77, 255, .5), transparent); }
section.alt { background: linear-gradient(180deg, rgba(10, 20, 48, .55), rgba(10, 20, 48, .25)); }
.bar { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(25, 227, 255, .6); }
.lead { color: var(--muted); }

/* glass cards with a mouse-following spotlight (site.js sets --mx and --my) */
.card, .rep, .price, .demo { background:
    radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), rgba(25, 227, 255, .12), transparent 45%),
    var(--card);
  border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.card:hover, .rep:hover { border-color: rgba(25, 227, 255, .45); box-shadow: var(--glow); transform: translateY(-4px); }
.card .num { background: linear-gradient(135deg, var(--cyan), var(--royal)); box-shadow: 0 0 16px rgba(25, 227, 255, .5); }
.card.feat .art { background: linear-gradient(135deg, rgba(47, 123, 255, .12), rgba(124, 77, 255, .14)); border-bottom-color: var(--line); }
.card.feat .art.logo-art { background: #050a18; }
.price { border: 1px solid rgba(25, 227, 255, .45); box-shadow: var(--glow); }
.price .amount { background: linear-gradient(135deg, var(--cyan), var(--royal)); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.price .volume { background: rgba(22, 163, 74, .12); }
.calc #calc-price { color: var(--cyan); text-shadow: 0 0 18px rgba(25, 227, 255, .4); }
.calc input[type=range] { background: linear-gradient(90deg, var(--cyan) var(--fill, 10%), rgba(255, 255, 255, .12) var(--fill, 10%)); }
.stat b { background: linear-gradient(135deg, var(--cyan), var(--royal), var(--violet)); -webkit-background-clip: text;
  background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(25, 227, 255, .25)); }
ul.ticks li { border-bottom-color: var(--line); }
ul.ticks li::before { color: var(--cyan); }
.note { background: var(--card); border-left-color: var(--violet); }
.rep-tiles div { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.rep-chart i { background: linear-gradient(180deg, var(--cyan), var(--royal)); box-shadow: 0 0 10px rgba(25, 227, 255, .25); }
.rep-chart i:last-child { background: linear-gradient(180deg, #ffd95a, var(--violet)); }
.meter i { background: linear-gradient(90deg, var(--cyan), var(--royal)); }
.u0 { background: rgba(255, 255, 255, .04); }
.u1 { background: rgba(47, 123, 255, .22); }
.u2 { background: rgba(47, 123, 255, .42); }
.u3 { background: rgba(47, 123, 255, .66); }
.u4 { background: linear-gradient(135deg, var(--cyan), var(--royal)); color: #031028; }
.rep-head em { background: linear-gradient(135deg, var(--cyan), var(--royal)); color: #031028; }
table.examples th, table.examples td { border-bottom-color: var(--line); }
.numbx-band { background: linear-gradient(180deg, #03060f, #050b1f); }
img.numbx-logo { box-shadow: 0 0 0 1px rgba(25, 227, 255, .25), 0 20px 60px rgba(25, 140, 255, .35); }
.demo { border-color: rgba(25, 227, 255, .3); box-shadow: var(--glow); }
footer { background: #03060f; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .hero h1 { font-size: 36px; }
  .pagehead h1 { font-size: 32px; }
  .hero::after, .pagehead::after { width: 320px; height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .pagehead::before, .hero::after, .pagehead::after { animation: none; }
}