/* ==========================================================================
   ALGORY — the onchain-terminal skin for the whole TradeX / Quant X platform.

   WHAT THIS IS
   A pure presentation layer. It is loaded LAST on every page, so it wins every
   same-specificity tie, and it retunes the two existing token dialects instead
   of touching a single component:

     dialect A  css/style.css (main app)   --bg2 --panel --panel-2 --panel-line
                                           --panel-line-hot --cyan --txt …
     dialect B  quant-x/*.html (inline)    --bg-deep --bg-raise --bg-panel
                                           --line --line-bright --accent --ink …

   Every component in both products already reads those vars, so remapping the
   VALUES here restyles all 10 pages and all 25 app tabs at once. Names never
   change — a rename would silently break every tab.

   TO REVERT a page: delete its two <link>/<script> lines. Nothing else in the
   codebase was modified.

   CONTENTS
     01  primitives + token remap
     02  the surface (deep space) + ambient layers
     03  glass, depth, gradient hairlines
     04  HUD chrome (corner brackets, rails, scanlines)
     05  typography (gradient display, mono caps)
     06  controls (buttons, chips, inputs, toggles, segmented)
     07  navigation (topbar, rail, marketing nav)
     08  data surfaces (tables, tiles, meters, gauges, sparks)
     09  the hero command-deck mock
     10  marketing sections (pricing, cards, funnel, FAQ, footer)
     11  motion system
     12  responsive + reduced motion
   ========================================================================== */


/* ==========================================================================
   01  PRIMITIVES + TOKEN REMAP
   ========================================================================== */
:root{
  /* --- ALGORY palette. Categorical hues are assigned in fixed order and are
         never cycled; status colours are reserved and never reused as series. */
  --ax-cy:#22d3ee;          /* 1 · signal cyan — the live colour */
  --ax-ice:#7dd3fc;         /* 1b · cyan light step */
  --ax-vi:#a78bfa;          /* 2 · validator violet */
  --ax-bl:#60a5fa;          /* 3 · block blue */
  --ax-em:#34d399;          /* status: good / settled */
  --ax-am:#fbbf24;          /* status: warning / gas */
  --ax-rd:#fb7185;          /* status: critical / slashed */

  /* --- surfaces. Glass is translucent so the ambient layers read through. */
  --ax-void:#04060d;
  --ax-glass:rgba(13,20,34,.58);
  --ax-pane:rgba(12,19,32,.88);   /* panel fill under the gradient hairline */
  --ax-glass-2:rgba(18,27,45,.66);
  --ax-glass-3:rgba(24,35,56,.72);
  --ax-deep:rgba(6,10,18,.72);

  /* --- hairlines */
  --ax-line:rgba(122,170,255,.14);
  --ax-line-hot:rgba(125,211,252,.34);

  /* --- elevation. Three steps, each a cast shadow + a faint inner top edge
         so a panel reads as lit from above rather than merely outlined. */
  --ax-e1:0 2px 10px -4px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035);
  --ax-e2:0 14px 44px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.045);
  --ax-e3:0 30px 80px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  --ax-lit:0 0 0 1px rgba(34,211,238,.22), 0 12px 44px -14px rgba(34,211,238,.42);

  /* --- gradients used in more than one place */
  --ax-grad-hair:linear-gradient(120deg,rgba(34,211,238,.55),rgba(34,211,238,0) 42%,rgba(167,139,250,0) 58%,rgba(167,139,250,.45));
  --ax-grad-txt:linear-gradient(96deg,#eaf7ff 0%,var(--ax-cy) 42%,var(--ax-vi) 96%);
  --ax-grad-acc:linear-gradient(96deg,var(--ax-cy),#38bdf8 55%,#818cf8);

  /* ---------- dialect A: main app (css/style.css) ---------- */
  --bg2:rgba(6,10,18,.62);
  --panel:var(--ax-glass);
  --panel-2:var(--ax-glass-2);
  --panel-3:var(--ax-glass-3);
  --panel-line:var(--ax-line);
  --panel-line-hot:var(--ax-line-hot);
  --grid:rgba(122,170,255,.10);
  --neon:0 0 14px rgba(34,211,238,.5);
  --neon-soft:0 8px 30px -8px rgba(34,211,238,.55);

  /* ---------- dialect B: quant-x pages (inline :root) ---------- */
  --bg-deep:rgba(5,8,15,.66);
  --bg-raise:var(--ax-glass);
  --bg-panel:var(--ax-glass-2);
  --line:var(--ax-line);
  --line-bright:var(--ax-line-hot);
  --accent-dim:rgba(34,211,238,.13);
  --accent-line:rgba(34,211,238,.42);
}


/* ==========================================================================
   02  THE SURFACE + AMBIENT LAYERS

   <html> carries a SOLID void colour so no scroll position, overscroll, or
   full-page capture can ever flash a pale canvas. The glow stack rides on
   <body>, fixed, so it does not scroll with the content.
   ========================================================================== */
html{background:var(--ax-void) !important;min-height:100%}
body{background:transparent !important}

/* The glow stack is its OWN fixed element, not a background-attachment:fixed
   on <body>. On a 12,000px marketing page a fixed body background is
   re-rasterised on every scroll frame; that dropped enough frames that the
   page's IntersectionObserver never saw some sections go past, and they stayed
   invisible. As a fixed layer it is composited once and costs nothing to
   scroll. */
.ax-sky{
  position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:
    radial-gradient(54rem 34rem at 10% -8%,  rgba(34,211,238,.085), transparent 62%),
    radial-gradient(48rem 30rem at 90%  2%,  rgba(167,139,250,.075), transparent 62%),
    radial-gradient(64rem 42rem at 50% 108%, rgba(52,211,153,.05),  transparent 62%),
    linear-gradient(180deg,#060911 0%,#04060d 52%,#05070f 100%);
}

/* --- layers injected by algory-fx.js -------------------------------------

   EVERY layer here is promoted to its own compositor layer. Without that, a
   stack of fixed full-viewport elements forces the browser to re-composite the
   whole viewport on every scroll frame — measured at 7fps on the home page
   versus 59 with the stack removed. Promoted, they are rasterised once and the
   scroll is back to 60. `contain:strict` tells the engine nothing inside can
   affect layout elsewhere, so it never has to look at them again. */
.ax-sky,.ax-mesh,.ax-aurora,.ax-gridovl,.ax-scan{
  contain:strict;backface-visibility:hidden;
}
.ax-sky,.ax-mesh,.ax-gridovl,.ax-scan{transform:translateZ(0)}

.ax-mesh{position:fixed;inset:0;z-index:-3;opacity:.55;pointer-events:none}

.ax-aurora{
  position:fixed;inset:-16% -10%;z-index:-2;pointer-events:none;
  /* no filter:blur() — the radial stops are already soft, and a blurred layer
     has to be re-rasterised every time the drift animation moves it */
  will-change:transform;
  background:
    radial-gradient(42rem 26rem at 16% 12%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(38rem 24rem at 84% 16%, rgba(167,139,250,.11), transparent 62%),
    radial-gradient(46rem 28rem at 52% 98%, rgba(52,211,153,.07), transparent 62%);
  animation:ax-drift 30s ease-in-out infinite alternate;
}
@keyframes ax-drift{
  from{transform:translate3d(-1.6%,-1.2%,0) scale(1)}
  to  {transform:translate3d(1.6%,1.4%,0) scale(1.05)}
}

/* The blueprint grid is part of the sky layer rather than a sixth fixed
   element — both are static and occupy the same box, so they cost half as much
   composited together. It keeps its own radial mask so the lines dissolve
   toward the edges. */
.ax-gridovl{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.28;
  background-image:
    linear-gradient(rgba(122,170,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,170,255,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(circle at 50% 32%,#000 16%,transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 16%,transparent 74%);
}

/* ---- LITE MODE ----------------------------------------------------------
   Set on <html> by algory-fx.js when the device cannot afford the full
   ambient stack — a software rasteriser, two cores, or a measured frame rate
   that cannot hold ~45fps with the mesh running. The identity of the design
   is the palette, the glass and the lit edges, and all of that survives; what
   goes is the per-frame work. Better a fast page than a clever background. */
html.ax-lite .ax-mesh,
html.ax-lite .ax-scan{display:none}
html.ax-lite .ax-aurora{animation:none}
html.ax-lite .ax-gridovl{opacity:.2}

/* Scanlines, without mix-blend-mode. A blend mode has to read the composited
   page underneath on every frame, so it can never be a cheap static layer —
   it was the single most expensive thing on the page. Plain low-alpha white
   lines over the top look the same at this opacity. */
.ax-scan{
  position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(190,225,255,.022) 0 1px,transparent 1px 3px);
}

/* While the page is scrolling, the ambient layers stand still. Nobody studies
   a background mid-scroll, and a moving layer competes with the scroll for the
   compositor — this is the difference between 11fps and 60 on the long pages.
   algory-fx.js sets .ax-scrolling on <html> and clears it 180ms after the last
   scroll event; the mesh loop parks on the same signal. */
html.ax-scrolling .ax-aurora{animation-play-state:paused}

/* boot sweep — the desk powering on, once, on load */
.ax-boot{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:99;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ax-cy) 30%,var(--ax-vi) 70%,transparent);
  box-shadow:0 0 18px rgba(34,211,238,.7);
  transform:translateX(-100%);
  animation:ax-boot 1.1s cubic-bezier(.65,0,.35,1) .04s forwards;
}
@keyframes ax-boot{to{transform:translateX(100%)}}

/* scroll progress — how far through the page you are, in the signal colour */
.ax-prog{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:98;pointer-events:none;
  background:linear-gradient(90deg,var(--ax-cy),var(--ax-vi));
  box-shadow:0 0 12px rgba(34,211,238,.55);
  transition:width .1s linear;
}


/* ==========================================================================
   03  GLASS, DEPTH, GRADIENT HAIRLINES

   The gradient edge is painted with background-clip rather than a pseudo-
   element, because most of these components already spend ::before and
   ::after on their own decoration (.tile's accent bar, .panel's hover sweep).
   ========================================================================== */
/* NO backdrop-filter on content cards.

   It was here first and it cost the page everything: a blurred backdrop is
   re-composited on every scroll frame, and a marketing page carries dozens of
   these. Measured on the 12,000px home page it took scrolling from 59fps to
   under 8. It also bought almost nothing — the fill above is 88% opaque, so
   there was barely any backdrop left to blur. Depth here comes from the cast
   shadow and the lit hairline instead, and both are free.

   Backdrop blur survives only on the three fixed pieces of chrome that
   genuinely sit over moving content: the topbar, the rail, and the hero's
   terminal frame. Those are one element each and they do not repaint on
   scroll. */
.panel,.tile,.stat,.card,.pcard,.guide-step,.pf-item,.tier,.ticket,
.formbox,.box,.gc,.ex,.grade,.daycard,.feed,.qa,.tpl,.cs-daycard{
  box-shadow:var(--ax-e2);
}

/* One-pass gradient hairline for the primary containers.

   The first layer is the panel fill and it is painted to the PADDING box; the
   second is the hairline and it is painted to the BORDER box, so only the 1px
   frame shows it at full strength. The fill is deliberately near-opaque
   (--ax-pane, .88) rather than the lighter --ax-glass: at .58 the hairline
   gradient read straight through the middle of every panel and washed large
   surfaces violet. At .88 the mesh still twinkles faintly through the glass
   and the edge stays lit, but a table of numbers sits on an even ground. */
.panel,.card,.pcard,.tile,.stat,.guide-step,.tier,.ticket{
  border:1px solid transparent !important;
  background-image:
    linear-gradient(var(--ax-pane),var(--ax-pane)),
    var(--ax-grad-hair) !important;
  background-origin:border-box !important;
  background-clip:padding-box,border-box !important;
}

/* raised inner wells stay flatter than the containers holding them */
.echo,.log,.m5-raw,pre,.tg,.surv{
  background:rgba(4,7,14,.55) !important;
  border-color:var(--ax-line) !important;
}

/* hover: the container lifts and its edge goes live */
.panel:hover,.card:hover,.pcard:hover,.tile:hover,.pf-item:hover,.guide-step:hover,.tier:hover{
  box-shadow:var(--ax-e3),0 0 0 1px rgba(34,211,238,.18);
}


/* ==========================================================================
   04  HUD CHROME
   ========================================================================== */

/* corner brackets — injected as <i class="ax-c tl|br"> by algory-fx.js */
i.ax-c{
  position:absolute;width:11px;height:11px;z-index:4;pointer-events:none;
  border:0 solid rgba(34,211,238,.5);
  opacity:.85;transition:opacity .25s ease,border-color .25s ease;
}
i.ax-c.tl{top:5px;left:5px;border-left-width:1.5px;border-top-width:1.5px}
i.ax-c.br{bottom:5px;right:5px;border-right-width:1.5px;border-bottom-width:1.5px}
.panel:hover>i.ax-c,.card:hover>i.ax-c,.pcard:hover>i.ax-c,.tile:hover>i.ax-c{
  opacity:1;border-color:var(--ax-cy)
}


/* ==========================================================================
   05  TYPOGRAPHY
   ========================================================================== */

/* Display headlines keep their ink; only the marked highlight span carries the
   gradient, so a heading never loses contrast wholesale. */
h1 .hl,.brand-mid h1 .hl,.guide-hero h2 span,.hero h1 .hl{
  background:var(--ax-grad-txt);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(34,211,238,.30));
}

/* section eyebrow / number — the mono caps signature, now with a lit rule */
.eyebrow,.sec-no{color:var(--ax-cy) !important;text-shadow:0 0 16px rgba(34,211,238,.35)}
.eyebrow::before{background:var(--ax-grad-acc) !important;height:1.5px !important;
  box-shadow:0 0 10px rgba(34,211,238,.6)}

/* the wordmark */
.brand h1{
  background:var(--ax-grad-txt);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* .brand .logo is deliberately not in this rule. It now holds the raster mark,
   and `filter` makes the element a stacking context, which isolates the child's
   mix-blend-mode and puts the mark's opaque black background back. The mark
   carries its own glow in the artwork. .logo .sl is the Quant X "//" and keeps
   its glow — that one is live text. */
.logo .sl{filter:drop-shadow(0 0 9px rgba(34,211,238,.6))}


/* ==========================================================================
   06  CONTROLS
   ========================================================================== */

/* primary CTA — a charged surface with a sheen that sweeps on hover */
.btn-acc,.deploy-btns button:not(.ghost){
  position:relative;overflow:hidden;
  background:var(--ax-grad-acc) !important;
  color:#03121a !important;border-color:transparent !important;
  box-shadow:0 0 0 1px rgba(34,211,238,.28),0 10px 34px -10px rgba(34,211,238,.6) !important;
}
.btn-acc::after,.deploy-btns button:not(.ghost)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-130%);
}
.btn-acc:hover::after,.deploy-btns button:not(.ghost):hover::after{
  transform:translateX(130%);transition:transform .7s cubic-bezier(.3,0,.2,1);
}
.btn-acc:hover{
  box-shadow:0 0 0 1px rgba(34,211,238,.5),0 14px 46px -8px rgba(34,211,238,.8) !important;
  transform:translateY(-1px);
}

/* ghost / secondary */
.btn-ghost,.acct-btn,.runbtns button{
  background:rgba(255,255,255,.02) !important;
}
.btn-ghost:hover,.acct-btn:hover{
  color:#eaf7ff !important;border-color:rgba(125,211,252,.5) !important;
  box-shadow:0 0 20px -6px rgba(34,211,238,.45);
}

/* chips + segmented: the active state is a charged inset, not a flat fill */
.chip.on,.seg button.on,.deck-tab.on,nav.tabs button.active,nav.tabs a.active{
  color:var(--ax-cy) !important;
  border-color:rgba(34,211,238,.45) !important;
  background:linear-gradient(96deg,rgba(34,211,238,.20),rgba(129,140,248,.10)) !important;
  box-shadow:inset 0 0 20px -8px rgba(34,211,238,.6),0 0 16px -6px rgba(34,211,238,.5) !important;
}
.chip:hover:not(.on){border-color:rgba(125,211,252,.4) !important;color:#dbeafe !important}

/* inputs — focus lights the field, not just its border */
input.f,select.f,textarea.f,.inp,.searchbar input,input[type=text],input[type=email],
input[type=password],input[type=search],textarea,select{
  background:rgba(4,7,14,.6) !important;
  border-color:var(--ax-line-hot) !important;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
input.f:focus,select.f:focus,textarea.f:focus,.inp:focus,input:focus,textarea:focus,select:focus{
  border-color:rgba(34,211,238,.65) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.12),0 0 24px -8px rgba(34,211,238,.55) !important;
  background:rgba(6,11,20,.75) !important;
}

/* toggle */
.sw.on{background:var(--ax-grad-acc) !important;border-color:transparent !important;
  box-shadow:0 0 14px -3px rgba(34,211,238,.7)}

/* focus ring is designed, and it is the live colour */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ax-cy) !important;outline-offset:2px;
}


/* ==========================================================================
   07  NAVIGATION
   ========================================================================== */

/* topbars: deeper glass + a gradient hairline that reads as a status rail */
header.hud,header{
  background:var(--ax-deep) !important;
  backdrop-filter:blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
  position:relative;
}
header.hud::after,header:not(.hud)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.6),rgba(167,139,250,.5),transparent);
}

/* marketing nav links get a sweep underline */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--ax-grad-acc);border-radius:2px;
  transition:right .28s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover::after{right:0}

/* left rail */
.sidebar{
  background:rgba(5,8,15,.62) !important;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
/* the active rail item carries a lit left edge as well as the charged fill */
nav.tabs button.active,nav.tabs a.active{position:relative}
nav.tabs button.active::before,nav.tabs a.active::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--ax-grad-acc);box-shadow:0 0 12px rgba(34,211,238,.8);
}

/* product switch */
.prodswitch{background:rgba(4,7,14,.6) !important}
.prodswitch a.on{background:var(--ax-grad-acc) !important;color:#03121a !important;
  box-shadow:0 0 16px -4px rgba(34,211,238,.7)}

/* top ribbon — a slow shimmer across the announcement bar */
.ribbon{
  background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(167,139,250,.13),rgba(34,211,238,.16)) !important;
  background-size:220% 100% !important;
  animation:ax-shift 9s linear infinite;
}
@keyframes ax-shift{from{background-position:0 0}to{background-position:220% 0}}

/* mobile drawer */
.m-menu{background:var(--ax-deep) !important;backdrop-filter:blur(16px)}

/* --- marketing nav overflow -----------------------------------------------
   shell.js injects a session widget ("local@desktop · OPEN DECK →") into the
   nav once you are signed in. With it present the row is wider than the
   viewport at common laptop widths and the primary CTA gets clipped off the
   right edge. Let the row compress in a defined order instead: gaps tighten,
   then the section links give up their spacing, then the ghost button and the
   session e-mail drop — the primary CTA is the last thing to go. */
/* The nav lives inside .wrap (max-width 1180px), so its width does NOT track
   the viewport — a viewport media query is the wrong instrument here and was
   what let the row overlap itself on a 1920 screen. The row is made to fit at
   1180px outright instead: tighter gaps, no shrinking boxes (a shrunk box with
   nowrap content overflows into its neighbour rather than clipping), and the
   two lowest-value items removed once a session exists. */
.nav{gap:18px;min-width:0;flex-wrap:nowrap}
.nav-links{gap:20px;flex:0 0 auto}
.nav-cta{flex:none}

/* The account e-mail is context, not an action, and it is the widest optional
   thing in the row. The OPEN DECK button next to it already says who you are. */
.qx-session>span:first-child{display:none}

/* Once shell.js has rendered the session widget the nav's own "Sign in" ghost
   is a duplicate of what that widget already offers (OPEN DECK when signed in,
   Sign in when not) — and it is also what tips the row over the edge. Drop it.
   .ax-session is set by algory-fx.js; the :has() rule covers the frames before
   that runs, and browsers without :has() simply keep the button. */
.ax-session .nav-cta .btn-ghost,
header:has([data-qx-session] a) .nav-cta .btn-ghost{display:none}
/* Both injected widgets must refuse to shrink. A flex item that shrinks below
   its nowrap content does not clip — it spills over its neighbour, which is
   how the CTA ended up painted across the OPEN DECK button. */
[data-qx-switch],[data-qx-session]{flex:0 0 auto}
[data-qx-session]{white-space:nowrap;display:inline-flex;align-items:center}
[data-qx-session] a{font-family:var(--font-m,var(--font-mono,monospace));font-size:12.5px;color:var(--ax-cy)}

/* Below the .wrap width the row does start tracking the viewport, so from here
   down the gaps tighten normally. At 820px the page's own rules take over and
   swap the links for the burger. */
@media (max-width:1120px){
  .nav{gap:13px}
  .nav-links{gap:15px;font-size:14px}
}
@media (max-width:960px){
  .nav-links{gap:12px;font-size:13.5px}
  .nav-cta .btn-ghost{display:none}
}
@media (max-width:900px){
  .nav{gap:10px}
  .nav-links{gap:9px;font-size:12.5px}
  .qx-switch a{padding:5px 8px;font-size:9px}
  .qx-session .qx-deck{padding:6px 10px;font-size:9.5px}
  .nav-cta .btn{padding:9px 14px;font-size:14px}
}

/* Hand over to the burger before the row can break. The page already ships a
   complete mobile menu with every link in it, so this loses nothing.
     · signed in  — the OPEN DECK button + switch cost ~190px, so the links
                    have to go at 1000px
     · otherwise  — the row survives to 880px, just past the page's own 820px
                    breakpoint, which is where the overflow actually began */
@media (max-width:1000px){
  .ax-signed .nav-links{display:none}
  .ax-signed .burger{display:block}
}
@media (max-width:880px){
  .nav-links{display:none}
  .burger{display:block}
}


/* ==========================================================================
   08  DATA SURFACES
   ========================================================================== */

/* tables: hovering a row lights a rail down its leading edge */
tr:hover td{background:rgba(34,211,238,.055) !important}
tbody tr{position:relative}
tbody tr td:first-child{position:relative}
tbody tr:hover td:first-child::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;
  background:var(--ax-grad-acc);box-shadow:0 0 10px rgba(34,211,238,.8);
}
th{color:var(--ax-cy) !important;opacity:.62}

/* stat values read as energy, everywhere both dialects put one */
.tile .tv,.stat .v,.core-stats .v,footer.strip .cell .v,.statline div b,
.kpi .v,.cell .v,.tprice,.v.big{
  background:linear-gradient(180deg,#ffffff,#a9dcff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* status-coloured values keep their meaning — polarity outranks decoration */
.stat .v.g,.tile.g .tv,.core-stats .v.g,footer.strip .cell .v.g,.pos,.v.g,.g{
  -webkit-text-fill-color:initial;color:var(--ax-em) !important;background:none !important}
.neg,.v.r,.r{-webkit-text-fill-color:initial;color:var(--ax-rd) !important;background:none !important}
.core-stats .v.c,footer.strip .cell .v.c{
  -webkit-text-fill-color:initial;color:var(--ax-cy) !important;background:none !important}

/* the tile accent bar becomes a lit gradient rail */
.tile::before{background:var(--ax-grad-acc) !important;box-shadow:0 0 12px rgba(34,211,238,.7);width:2.5px !important}
.tile.g::before{background:linear-gradient(180deg,#6ee7b7,var(--ax-em)) !important;box-shadow:0 0 12px rgba(52,211,153,.7)}
.tile.go::before{background:linear-gradient(180deg,#fde68a,var(--ax-am)) !important;box-shadow:0 0 12px rgba(251,191,36,.7)}
.tile.v::before{background:linear-gradient(180deg,#c4b5fd,var(--ax-vi)) !important;box-shadow:0 0 12px rgba(167,139,250,.7)}
.tile.c::before{background:linear-gradient(180deg,#fda4af,var(--ax-rd)) !important;box-shadow:0 0 12px rgba(251,113,133,.7)}

/* meters and bars — filled track glows, empty track recedes */
.meter,.barrow .track,.gate .bar,.bar{background:rgba(255,255,255,.06) !important}
.meter>span,.barrow .track>span,.gate .bar i,.bar i,.fun-bar{
  background:var(--ax-grad-acc) !important;
  box-shadow:0 0 14px -2px rgba(34,211,238,.75);
  position:relative;overflow:hidden;
}
/* a slow shine travels any bar that is still filling */
.gate .bar i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%);animation:ax-shine 7s ease-in-out infinite;
}
@keyframes ax-shine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(220%)}}

/* the 6-up footer under the neural core: a wrapped label breaks the baseline
   of the whole row, so labels stay on one line and shrink instead */
.core-stats .k,footer.strip .cell .k{white-space:nowrap;letter-spacing:.11em;font-size:8px}

/* progress ring */
.ring{filter:drop-shadow(0 0 14px rgba(34,211,238,.4))}
.ring::after{background:rgba(8,13,23,.92) !important}

/* status badges / pills keep meaning, gain depth */
.badge.ok,.pill.ok{color:var(--ax-em) !important;border-color:rgba(52,211,153,.42) !important;
  background:rgba(52,211,153,.12) !important;box-shadow:0 0 16px -6px rgba(52,211,153,.6)}
.badge.info{color:var(--ax-cy) !important;border-color:rgba(34,211,238,.42) !important;
  background:rgba(34,211,238,.12) !important;box-shadow:0 0 16px -6px rgba(34,211,238,.6)}
.badge.warn,.pill.wt{color:var(--ax-am) !important;border-color:rgba(251,191,36,.42) !important;
  background:rgba(251,191,36,.12) !important}
.badge.bad{color:var(--ax-rd) !important;border-color:rgba(251,113,133,.42) !important;
  background:rgba(251,113,133,.12) !important}

/* every live dot breathes with a ring, not just an opacity blink */
.pill .dot,.ticket .hd i,.m5-dot.m5-on,.deck-live i,.feed .dot,.dot.on{
  box-shadow:0 0 0 0 currentColor;animation:ax-ping 5s ease-out infinite;
}
@keyframes ax-ping{
  0%  {box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70% {box-shadow:0 0 0 7px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* canvas charts sit on a well, and carry the accent bloom */
canvas,.chart{filter:drop-shadow(0 0 10px rgba(34,211,238,.14))}
#coreCanvas{filter:drop-shadow(0 0 26px rgba(34,211,238,.22))}
#mapCanvas{background:rgba(4,7,14,.5)}

/* sparkline in the hero deck */
.spark .line{filter:drop-shadow(0 0 6px rgba(34,211,238,.8));stroke-width:2 !important}

/* heat cells */
.heat.best{box-shadow:0 0 18px -6px rgba(52,211,153,.7)}


/* ==========================================================================
   09  THE HERO COMMAND-DECK MOCK
   The single most-looked-at object on the site: it should read as a real
   terminal running behind glass.
   ========================================================================== */
.deck-frame{
  background:linear-gradient(180deg,rgba(10,16,28,.82),rgba(6,10,18,.9)) !important;
  border:1px solid transparent !important;
  background-image:
    linear-gradient(180deg,rgba(10,16,28,.86),rgba(6,10,18,.92)),
    var(--ax-grad-hair) !important;
  background-origin:border-box !important;background-clip:padding-box,border-box !important;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:var(--ax-e3),0 0 70px -30px rgba(34,211,238,.5) !important;
}
.deck-top{background:rgba(4,7,14,.6) !important;position:relative}
.deck-top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.55),transparent);
}
.deck-title{letter-spacing:.18em}
.deck-live i{background:var(--ax-em) !important}
.dots i:nth-child(1){background:rgba(251,113,133,.75) !important}
.dots i:nth-child(2){background:rgba(251,191,36,.75) !important}
.dots i:nth-child(3){background:rgba(52,211,153,.75) !important}

/* the scrolling data feed gets edge fades so it dissolves rather than clipping */
.feedline{position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* approve / reject demo buttons */
.sbtn.ap{color:var(--ax-em) !important;border-color:rgba(52,211,153,.4) !important}
.sbtn.rj{color:var(--ax-rd) !important;border-color:rgba(251,113,133,.4) !important}
.sbtn.done-ap{background:rgba(52,211,153,.18) !important;box-shadow:0 0 18px -6px rgba(52,211,153,.8)}
.sbtn.done-rj{background:rgba(251,113,133,.18) !important}


/* ==========================================================================
   10  MARKETING SECTIONS
   ========================================================================== */

/* section rules become a fading hairline instead of a hard line */
hr.hr-sec,.hr-sec{
  border:0 !important;height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(122,170,255,.22),transparent) !important;
}

/* The highlighted pricing tier sits forward with a lit edge and a slow breath.
   NOTE this is .tier.hot — the tier CARD. `.hotcol` is a <td>/<th> class on the
   comparison table and must never receive card treatment. */
.tier.hot{
  position:relative;z-index:2;
  box-shadow:var(--ax-e3),var(--ax-lit) !important;
  animation:ax-breathe 7s ease-in-out infinite;
}
.cmp .hotcol{background:rgba(34,211,238,.07) !important}
@keyframes ax-breathe{
  0%,100%{box-shadow:var(--ax-e3),0 0 0 1px rgba(34,211,238,.2),0 14px 50px -18px rgba(34,211,238,.35)}
  50%    {box-shadow:var(--ax-e3),0 0 0 1px rgba(34,211,238,.42),0 20px 66px -14px rgba(34,211,238,.6)}
}

/* the funnel / gauntlet bars */
.fun-bar{box-shadow:0 0 16px -4px rgba(34,211,238,.65)}

/* FAQ rows open with a lit marker */
.qa summary::marker,.qa summary::-webkit-details-marker{color:var(--ax-cy)}
.qa[open]{border-color:rgba(34,211,238,.3) !important}

/* footer */
footer{background:rgba(4,7,14,.6) !important}
footer.strip{border-top-color:var(--ax-line) !important}


/* ==========================================================================
   11  MOTION SYSTEM
   Rule: motion carries information or it does not ship.
   ========================================================================== */

/* the app's panels/tiles already rise on arrival (style.css). Keep that, and
   make the rise carry a faint blur-in so it reads as focus rather than slide. */
@keyframes tx-rise{
  from{opacity:0;transform:translateY(10px) scale(.995);filter:blur(3px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* marketing reveal: same easing as the app so the two products move alike */
.rv{transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1) !important}

/* a value that just changed is the one worth looking at */
.tx-changed{animation:ax-flash 1s ease-out}
@keyframes ax-flash{
  0%{background:rgba(34,211,238,.28);box-shadow:0 0 18px rgba(34,211,238,.5);border-radius:4px}
  100%{background:transparent;box-shadow:none}
}

/* pointer-reactive lift on the cards the fx layer tags */
.ax-tilt{transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease}

/* controls answer instantly */
.chip,button,.btn,.tile,.panel,.card,.pf-item{
  transition:transform .14s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}


/* ==========================================================================
   12  SCROLLBARS, SELECTION, RESPONSIVE, REDUCED MOTION
   ========================================================================== */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(34,211,238,.35),rgba(167,139,250,.3));
  border-radius:5px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(34,211,238,.6),rgba(167,139,250,.5));
  background-clip:padding-box}
::selection{background:var(--ax-cy);color:#03121a}

@media (max-width:900px){
  .ax-gridovl{background-size:38px 38px;opacity:.2}
  .ax-scan{opacity:.16}
  .ax-mesh{opacity:.4}
  /* the fixed chrome keeps its blur on desktop only — on a phone GPU even
     three blurred layers show up in scroll jank */
  header.hud,header,.sidebar,.deck-frame{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
}

@media (prefers-reduced-motion:reduce){
  .ax-aurora,.ax-boot,.ribbon,.hotcol,.gate .bar i::after,
  .pill .dot,.ticket .hd i,.m5-dot.m5-on,.deck-live i{animation:none !important}
  .btn-acc::after,.deploy-btns button:not(.ghost)::after{display:none}
  .ax-prog{transition:none}
}

/* forced-colors: drop the decoration, keep the structure */
@media (forced-colors:active){
  .ax-mesh,.ax-aurora,.ax-gridovl,.ax-scan,.ax-boot,.ax-prog,i.ax-c{display:none}
  .panel,.card,.tile,.stat{background-image:none !important;border:1px solid CanvasText !important}
}